diff --git a/app/dashboard/cp/intro/page.tsx b/app/dashboard/cp/intro/page.tsx
new file mode 100644
index 0000000..50eed20
--- /dev/null
+++ b/app/dashboard/cp/intro/page.tsx
@@ -0,0 +1,223 @@
+"use client";
+
+import Image from "next/image";
+import { Calendar, ChevronRight, MapPin } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import BannerCTA from "@/components/BannerCTA";
+
+export default function HackatonPage() {
+  const timelines = [
+    {
+      date: "April 17",
+      title: "Registrasi",
+      description:
+        "Peserta Mendaftar Melalui Website GDSC Universitas Gunakanlah. Peserta Wajib Isi Formulir Link. Pemberitahuan Srt Kirim Email Finalis. Mulai Ligula Consectetur, Ultricies Mauris. Malesuada Vitae Mattis Tellus.",
+    },
+    {
+      date: "April 17",
+      title: "Stage 1 Proposal!",
+      description:
+        "Roboh Ini Bertujuan Untuk Mengaktifkan Kebiasaan Dan Keakraban Solusi Yang Diajukan Oleh Peserta. Proposal Harus Menunjukkan Permasalahan Yang Mereka Coba Selesaikan, Solusi, Dasar Teknologi Dalam Solusi Yang Mereka Buat, Serta Kegunaan AI Diharapkan Untuk Mendukung Solusi Yang Diajukan Oleh Peserta.",
+    },
+    {
+      date: "April 19",
+      title: "Stage 2 Pitch Deck!",
+      description:
+        "Tim Yang Lolos Tahap Proposal Diharapkan Untuk Mengirimkan Video Presentasi Mengenai Proyek Mereka. Prototype Tidak Harus Sempurna Secara Fungsional, Tetapi Harus Dapat Menggambarkan Konsep Utama, Fiturnya Implementasi, Serta Kemampuannya AI Dalam Solusi Yang Diajukan.",
+    },
+    {
+      date: "April 28",
+      title: "Final (Demo Day)",
+      description:
+        "Babak Final Akan Diadakan Secara Luring Di Universitas Gunakanlah. Pada Stage Final Melakukan Presentasi LIVE (Advanced Pitching) Sekaligus Demo Produk Kepada Secara Langsung. Pada Tahap Ini, Tim Diharapkan Telah Menyempurnakan Prototype Mereka Dan Mampu Menunjukkan Bagaimana Solusi Mereka Dapat Digunakan Dalam Skenario Nyata.",
+    },
+  ];
+
+  const roles = [
+    {
+      name: "Hustler",
+      description: "Bertanggung Jawab Atas Strategi Bisnis Dan Peluang Pasar.",
+      icon: (
+        <div className="w-12 h-12 md:w-14 md:h-14 bg-[#202124] rounded-full relative">
+          <div className="absolute w-2 h-2 md:w-2.5 md:h-2.5 bg-white rounded-full top-3 left-3"></div>
+          <div className="absolute w-2 h-2 md:w-2.5 md:h-2.5 bg-white rounded-full top-3 right-3"></div>
+        </div>
+      ),
+    },
+    {
+      name: "Hipster",
+      description: "Mengembangkan Aspek Desain Dan User Experience (UX).",
+      icon: (
+        <div className="w-12 h-12 md:w-14 md:h-14 bg-[#202124] rounded-full relative">
+          <div className="absolute w-2 h-2 md:w-2.5 md:h-2.5 bg-white rounded-full top-3 left-3"></div>
+          <div className="absolute w-2 h-2 md:w-2.5 md:h-2.5 bg-white rounded-full top-3 right-3"></div>
+          <div className="absolute w-5 h-1 md:w-6 md:h-1.5 bg-white rounded-full bottom-4 left-1/2 transform -translate-x-1/2"></div>
+        </div>
+      ),
+    },
+    {
+      name: "Hacker",
+      description:
+        "Menguasai Implementasi Teknis Dan Pemilai AI Dalam Solusi Yang Dikembangkan.",
+      icon: (
+        <div className="w-12 h-12 md:w-14 md:h-14 bg-[#202124] rounded-full relative">
+          <div className="absolute w-2 h-2 md:w-2.5 md:h-2.5 bg-white rounded-full top-3 left-3"></div>
+          <div className="absolute w-2 h-2 md:w-2.5 md:h-2.5 bg-white rounded-full top-3 right-3"></div>
+          <div className="absolute text-white text-xs font-mono top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+            &lt;/&gt;
+          </div>
+        </div>
+      ),
+    },
+  ];
+
+  const handleRegisterClick = () => {
+    // Add your registration logic here
+    console.log("Register button clicked");
+    // You could redirect to registration page, open a modal, etc.
+  };
+
+  return (
+    <div className="flex min-h-screen bg-white">
+      {/* Main Content */}
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 py-4 sm:py-8 pt-16 md:pt-8">
+        {/* Header */}
+        <div className="flex flex-col-reverse md:flex-row justify-between items-center gap-4 md:gap-8 mb-8 md:mb-12">
+          <div className="space-y-3 md:space-y-4 max-w-xl text-center md:text-left">
+            <h1 className="text-2xl md:text-4xl md:leading-12 font-bold text-[#202124]">
+              Competitive Programming
+            </h1>
+            <div className="flex items-center text-sm text-[#5f6368] gap-1 justify-center md:justify-start">
+              <Calendar className="h-4 w-4 text-[#4084f3]" />
+              <span>April 28 - May 5, 2025</span>
+            </div>
+            <div className="flex items-center text-sm text-[#5f6368] gap-1 justify-center md:justify-start">
+              <MapPin className="h-4 w-4 text-[#4084f3]" />
+              <span>Online and Offline</span>
+            </div>
+            <Button>
+              Register Now <ChevronRight className="h-4 w-4 ml-1" />
+            </Button>
+          </div>
+          <div className="relative size-[150px] md:size-[280px] flex-shrink-0">
+            <Image
+              src="/assets/hackthon-maskot.png"
+              alt="Robot mascot"
+              width={280}
+              height={280}
+              className="object-contain"
+            />
+          </div>
+        </div>
+
+        {/* Description */}
+        <div className="relative p-[4px] rounded-xl mb-8 md:mb-12">
+          {/* Gradient border using pseudo-element */}
+          <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-[#4084f3] via-[#4285F4] to-[#5f6ad8]"></div>
+
+          {/* Content container with white background */}
+          <div className="relative flex flex-col items-center bg-white rounded-lg p-4 md:p-6">
+            <h2 className="text-xl md:text-2xl text-center font-bold text-[#202124] mb-3 md:mb-4">
+              What is Competitive Programming?
+            </h2>
+            <p className="text-xs md:text-sm text-[#5f6368] leading-relaxed">
+              Gunakanlah Code Week sebagai rangkaian kompetisi yang
+              diselenggarakan oleh GDSC universitas Gunakanlah dan Gunakanlah
+              (ID). Acara ini terdiri dari dua mata acara utama, yaitu seminar
+              dan kompetisi. Tema yang diangkat dalam Code Week kali ini adalah
+              &quot;AI-Powered Solutions: Empowering&quot; mengangkat tema
+              &quot;AI-Powered Solutions for Achieving SDGs and Inclusive
+              Future&quot;. Peserta diharapkan dapat mengembangkan business
+              opportunity dalam melakukan suatu solusi/ program yang
+              peserta-peserta dalam program yang menggunakan teknologi AI untuk
+              menyelesaikan masalah dalam berbagai domain. Hal ini bertujuan
+              untuk generasi yang optimal dan implementasi solusi bagi pihak
+              lain, sehingga memberikan yang berkelanjutan dalam jangka panjang
+              utama.
+            </p>
+          </div>
+        </div>
+
+        {/* Timeline */}
+        <div className="mb-8 md:mb-12">
+          <div className="flex flex-col gap-1 items-center text-center mb-4 md:mb-6">
+            <h2 className="text-xl md:text-2xl font-semibold text-[#202124]">
+              Timeline
+            </h2>
+            <p className="text-sm md:text-base text-[#5f6368] md:w-xl">
+              A full look at what&apos;s coming. Find out when to pick up your
+              badge, attend sessions, join parties, and more.
+            </p>
+          </div>
+
+          <div className="relative">
+            {/* Timeline line */}
+            <div className="absolute left-[15px] top-0 bottom-0 w-0.5 bg-[#4285f4]"></div>
+
+            {timelines.map((timeline, index) => (
+              <div key={index} className="relative mb-6 md:mb-8 pl-10">
+                <div className="absolute left-0 top-0 w-[30px] h-[30px] bg-white border-4 border-[#4285f4] rounded-full"></div>
+                <div className="border border-[#dadce0] rounded-lg p-3 md:p-4">
+                  <h3 className="text-base md:text-lg font-bold text-[#202124] mb-2">
+                    {timeline.date}
+                  </h3>
+                  <div className="mb-2">
+                    <div className="font-medium text-[#202124]">
+                      {timeline.title}
+                    </div>
+                    <p className="text-xs md:text-sm text-[#5f6368]">
+                      {timeline.description}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Pick Your Role */}
+        <div className="mb-8 md:mb-12">
+          <h2 className="text-xl md:text-2xl font-bold text-[#202124] mb-6 md:mb-8 text-center">
+            Competitive Programming Roles
+          </h2>
+
+          {roles.map((role, index) => (
+            <div
+              key={index}
+              className={`flex flex-col md:flex-row md:justify-between md:items-center border-t ${
+                index === roles.length - 1 ? "border-b" : ""
+              } border-[#dadce0] py-4 md:py-6`}
+            >
+              <div className="max-w-md mb-4 md:mb-0">
+                <h3 className="text-lg md:text-xl font-bold text-[#202124] mb-2">
+                  {role.name}
+                </h3>
+                <p className="text-xs md:text-sm text-[#5f6368]">
+                  {role.description}
+                </p>
+              </div>
+              <div className="relative self-center md:self-auto">
+                <div className="w-[80px] h-[80px] md:w-[100px] md:h-[100px] bg-[#bed4fd] rounded-lg flex items-center justify-center">
+                  {role.icon}
+                  <div className="absolute -bottom-2 right-2 w-5 h-5 md:w-6 md:h-6 bg-[#4285f4] rounded-full"></div>
+                  <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 text-lg md:text-xl font-bold text-[#4285f4]">
+                    g
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <BannerCTA
+          title="Join the Competitive Programming"
+          description="Lorem ipsum dolor sit amet consectetur. In lectus odio facilisis venenatis eros. Justo sagittis venenatis sit condimentum. Sit lacus adipiscing ut felis cursus purus pellentesque morbi. Imperdiet mi."
+          buttonText="Register now"
+          imageSrc="/assets/brain.png"
+          imageAlt="Code Week"
+          onButtonClick={handleRegisterClick}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/app/dashboard/hackathon/intro/page.tsx b/app/dashboard/hackathon/intro/page.tsx
index 9910877..1d8a898 100644
--- a/app/dashboard/hackathon/intro/page.tsx
+++ b/app/dashboard/hackathon/intro/page.tsx
@@ -1,89 +1,73 @@
 "use client";
 
 import Image from "next/image";
-import { Calendar, MapPin, ChevronRight } from "lucide-react";
+import { Calendar, ChevronRight, MapPin } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
 import BannerCTA from "@/components/BannerCTA";
 
-export default function SeminarPage() {
-  const agendaItems = [
+export default function HackatonPage() {
+  const timelines = [
     {
-      title: "9 April 2025",
-      rundown: [
-        {
-          time: "7:00 AM - 7:30 PM",
-          title: "Opening & Introduction",
-          description:
-            "Welcome Participants, Introduce The Speakers, And Outline The Goals Of The Workshop.",
-        },
-        {
-          time: "9:00 AM - 10:30 AM",
-          title:
-            "Workshop Session: A Dive Into Machine Learning And Sentiment Analysis",
-          description:
-            "Learn The Fundamentals Of Sentiment Analysis, From Setting Up The Environment To Preprocessing Text, Tokenizing, And Building A Classification Model. This Session Provides A Hands-On Introduction To Machine Learning Workflows For Analyzing Text Sentiment. ✓",
-        },
-        {
-          time: "9:00 AM - 6:00 PM",
-          title:
-            "Workshop Session: A Dive Into Machine Learning And Sentiment Analysis",
-          description:
-            "Learn The Fundamentals Of Sentiment Analysis, From Setting Up The Environment To Preprocessing Text, Tokenizing, And Building A Classification Model. This Session Provides A Hands-On Introduction To Machine Learning Workflows For Analyzing Text Sentiment. ✓",
-        },
-        {
-          time: "1:30 PM - 2:45 PM",
-          title: "Closing & Feedback",
-          description:
-            "Summarize Key Learnings, Share Resources For Further Learning, And Collect Participant Feedback.",
-        },
-      ],
+      date: "April 17",
+      title: "Registrasi",
+      description:
+        "Peserta Mendaftar Melalui Website GDSC Universitas Gunakanlah. Peserta Wajib Isi Formulir Link. Pemberitahuan Srt Kirim Email Finalis. Mulai Ligula Consectetur, Ultricies Mauris. Malesuada Vitae Mattis Tellus.",
     },
     {
-      title: "9 April 2025",
-      rundown: [
-        {
-          time: "7:00 AM - 7:30 PM",
-          title: "Opening & Introduction",
-          description:
-            "Welcome Participants, Introduce The Speakers, And Outline The Goals Of The Workshop.",
-        },
-        {
-          time: "9:00 AM - 10:30 AM",
-          title:
-            "Workshop Session: A Dive Into Machine Learning And Sentiment Analysis",
-          description:
-            "Learn The Fundamentals Of Sentiment Analysis, From Setting Up The Environment To Preprocessing Text, Tokenizing, And Building A Classification Model. This Session Provides A Hands-On Introduction To Machine Learning Workflows For Analyzing Text Sentiment. ✓",
-        },
-        {
-          time: "9:00 AM - 6:00 PM",
-          title:
-            "Workshop Session: A Dive Into Machine Learning And Sentiment Analysis",
-          description:
-            "Learn The Fundamentals Of Sentiment Analysis, From Setting Up The Environment To Preprocessing Text, Tokenizing, And Building A Classification Model. This Session Provides A Hands-On Introduction To Machine Learning Workflows For Analyzing Text Sentiment. ✓",
-        },
-      ],
+      date: "April 17",
+      title: "Stage 1 Proposal!",
+      description:
+        "Roboh Ini Bertujuan Untuk Mengaktifkan Kebiasaan Dan Keakraban Solusi Yang Diajukan Oleh Peserta. Proposal Harus Menunjukkan Permasalahan Yang Mereka Coba Selesaikan, Solusi, Dasar Teknologi Dalam Solusi Yang Mereka Buat, Serta Kegunaan AI Diharapkan Untuk Mendukung Solusi Yang Diajukan Oleh Peserta.",
+    },
+    {
+      date: "April 19",
+      title: "Stage 2 Pitch Deck!",
+      description:
+        "Tim Yang Lolos Tahap Proposal Diharapkan Untuk Mengirimkan Video Presentasi Mengenai Proyek Mereka. Prototype Tidak Harus Sempurna Secara Fungsional, Tetapi Harus Dapat Menggambarkan Konsep Utama, Fiturnya Implementasi, Serta Kemampuannya AI Dalam Solusi Yang Diajukan.",
+    },
+    {
+      date: "April 28",
+      title: "Final (Demo Day)",
+      description:
+        "Babak Final Akan Diadakan Secara Luring Di Universitas Gunakanlah. Pada Stage Final Melakukan Presentasi LIVE (Advanced Pitching) Sekaligus Demo Produk Kepada Secara Langsung. Pada Tahap Ini, Tim Diharapkan Telah Menyempurnakan Prototype Mereka Dan Mampu Menunjukkan Bagaimana Solusi Mereka Dapat Digunakan Dalam Skenario Nyata.",
     },
   ];
 
-  const speakers = [
+  const roles = [
     {
-      name: "Matt Renner",
-      title: "President, Global Revenue",
-      company: "Google Cloud",
-      image: "/assets/dummy-circle.png",
+      name: "Hustler",
+      description: "Bertanggung Jawab Atas Strategi Bisnis Dan Peluang Pasar.",
+      icon: (
+        <div className="w-12 h-12 md:w-14 md:h-14 bg-[#202124] rounded-full relative">
+          <div className="absolute w-2 h-2 md:w-2.5 md:h-2.5 bg-white rounded-full top-3 left-3"></div>
+          <div className="absolute w-2 h-2 md:w-2.5 md:h-2.5 bg-white rounded-full top-3 right-3"></div>
+        </div>
+      ),
     },
     {
-      name: "Matt Renner",
-      title: "President, Global Revenue",
-      company: "Google Cloud",
-      image: "/assets/dummy-circle.png",
+      name: "Hipster",
+      description: "Mengembangkan Aspek Desain Dan User Experience (UX).",
+      icon: (
+        <div className="w-12 h-12 md:w-14 md:h-14 bg-[#202124] rounded-full relative">
+          <div className="absolute w-2 h-2 md:w-2.5 md:h-2.5 bg-white rounded-full top-3 left-3"></div>
+          <div className="absolute w-2 h-2 md:w-2.5 md:h-2.5 bg-white rounded-full top-3 right-3"></div>
+          <div className="absolute w-5 h-1 md:w-6 md:h-1.5 bg-white rounded-full bottom-4 left-1/2 transform -translate-x-1/2"></div>
+        </div>
+      ),
     },
     {
-      name: "Matt Renner",
-      title: "President, Global Revenue",
-      company: "Google Cloud",
-      image: "/assets/dummy-circle.png",
+      name: "Hacker",
+      description:
+        "Menguasai Implementasi Teknis Dan Pemilai AI Dalam Solusi Yang Dikembangkan.",
+      icon: (
+        <div className="w-12 h-12 md:w-14 md:h-14 bg-[#202124] rounded-full relative">
+          <div className="absolute w-2 h-2 md:w-2.5 md:h-2.5 bg-white rounded-full top-3 left-3"></div>
+          <div className="absolute w-2 h-2 md:w-2.5 md:h-2.5 bg-white rounded-full top-3 right-3"></div>
+          <div className="absolute text-white text-xs font-mono top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+            &lt;/&gt;
+          </div>
+        </div>
+      ),
     },
   ];
 
@@ -94,21 +78,22 @@ export default function SeminarPage() {
   };
 
   return (
-    <div className="flex min-h-screen bg-white relative">
+    <div className="flex min-h-screen bg-white">
+      {/* Main Content */}
       <div className="max-w-3xl mx-auto px-4 sm:px-6 py-4 sm:py-8 pt-16 md:pt-8">
         {/* Header */}
-        <div className="flex flex-col md:flex-row justify-between items-center md:items-start gap-4 md:gap-8 mb-8 md:mb-12">
+        <div className="flex flex-col-reverse md:flex-row justify-between items-center gap-4 md:gap-8 mb-8 md:mb-12">
           <div className="space-y-3 md:space-y-4 max-w-xl text-center md:text-left">
             <h1 className="text-2xl md:text-4xl md:leading-12 font-bold text-[#202124]">
-              Seminar: Menyelami Pembelajaran Mesin dan Analisis Sentimen
+              GCW Hackathon 2025
             </h1>
             <div className="flex items-center text-sm text-[#5f6368] gap-1 justify-center md:justify-start">
               <Calendar className="h-4 w-4 text-[#4084f3]" />
-              <span>February 27, 2021 09:00-13:00 CST</span>
+              <span>April 28 - May 5, 2025</span>
             </div>
             <div className="flex items-center text-sm text-[#5f6368] gap-1 justify-center md:justify-start">
               <MapPin className="h-4 w-4 text-[#4084f3]" />
-              <span>Ruang Auditorium D402 Kampus D</span>
+              <span>Online and Offline</span>
             </div>
             <Button>
               Register Now <ChevronRight className="h-4 w-4 ml-1" />
@@ -116,7 +101,7 @@ export default function SeminarPage() {
           </div>
           <div className="relative size-[150px] md:size-[280px] flex-shrink-0">
             <Image
-              src="/assets/seminar-maskot.png"
+              src="/assets/hackthon-maskot.png"
               alt="Robot mascot"
               width={280}
               height={280}
@@ -125,170 +110,107 @@ export default function SeminarPage() {
           </div>
         </div>
 
-        <div className="flex flex-col md:flex-row gap-8 md:gap-4 mb-8 md:mb-12">
-          {/* Key Themes */}
-          <div className="flex flex-col">
-            <h2 className="text-lg md:text-xl font-semibold mb-3 md:mb-4 text-[#202124]">
-              Key Themes
-            </h2>
-            <div className="flex flex-wrap gap-2">
-              <Badge
-                variant="outline"
-                className="rounded-full px-3 py-1 border-[#dadce0] text-[#5f6368] text-xs"
-              >
-                AI
-              </Badge>
-              <Badge
-                variant="outline"
-                className="rounded-full px-3 py-1 border-[#dadce0] text-[#5f6368] text-xs"
-              >
-                Cloud
-              </Badge>
-              <Badge
-                variant="outline"
-                className="rounded-full px-3 py-1 border-[#dadce0] text-[#5f6368] text-xs"
-              >
-                Data AI
-              </Badge>
-              <Badge
-                variant="outline"
-                className="rounded-full px-3 py-1 border-[#dadce0] text-[#5f6368] text-xs"
-              >
-                Gemini
-              </Badge>
-              <Badge
-                variant="outline"
-                className="rounded-full px-3 py-1 border-[#dadce0] text-[#5f6368] text-xs"
-              >
-                Google Cloud Next
-              </Badge>
-              <Badge
-                variant="outline"
-                className="rounded-full px-3 py-1 border-[#dadce0] text-[#5f6368] text-xs"
-              >
-                Machine Learning
-              </Badge>
-              <Badge
-                variant="outline"
-                className="rounded-full px-3 py-1 border-[#dadce0] text-[#5f6368] text-xs"
-              >
-                Vertex AI
-              </Badge>
-            </div>
-          </div>
+        {/* Description */}
+        <div className="relative p-[4px] rounded-xl mb-8 md:mb-12">
+          {/* Gradient border using pseudo-element */}
+          <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-[#4084f3] via-[#4285F4] to-[#5f6ad8]"></div>
 
-          {/* About this event */}
-          <div className="flex flex-col">
-            <h2 className="text-lg md:text-xl font-semibold mb-3 md:mb-4 text-[#202124]">
-              About this event
+          {/* Content container with white background */}
+          <div className="relative flex flex-col items-center bg-white rounded-lg p-4 md:p-6">
+            <h2 className="text-xl md:text-2xl font-bold text-[#202124] mb-3 md:mb-4">
+              What is Hackathon?
             </h2>
-            <p className="text-sm md:text-base text-[#5f6368] mb-4">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et
-              massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien
-              fringilla, mattis ligula consectetur, ultrices mauris. Maecenas
-              vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum
-              auctor ornare leo, non suscipit magna interdum eu. Curabitur
-              pellentesque nibh nibh, at maximus ante fermentum sit amet.
-              Pellentesque commodo lacus at sodales sodales. Quisque sagittis
-              orci ut diam condimentum, vel euismod erat placerat. In iaculis
-              arcu erat, eget tempus orci facilisis id.
+            <p className="text-xs md:text-sm text-[#5f6368] leading-relaxed">
+              Gunakanlah Code Week sebagai rangkaian kompetisi yang
+              diselenggarakan oleh GDSC universitas Gunakanlah dan Gunakanlah
+              (ID). Acara ini terdiri dari dua mata acara utama, yaitu seminar
+              dan kompetisi. Tema yang diangkat dalam Code Week kali ini adalah
+              &quot;AI-Powered Solutions: Empowering&quot; mengangkat tema
+              &quot;AI-Powered Solutions for Achieving SDGs and Inclusive
+              Future&quot;. Peserta diharapkan dapat mengembangkan business
+              opportunity dalam melakukan suatu solusi/ program yang
+              peserta-peserta dalam program yang menggunakan teknologi AI untuk
+              menyelesaikan masalah dalam berbagai domain. Hal ini bertujuan
+              untuk generasi yang optimal dan implementasi solusi bagi pihak
+              lain, sehingga memberikan yang berkelanjutan dalam jangka panjang
+              utama.
             </p>
           </div>
         </div>
 
-        {/* Agenda */}
-        <div className="flex flex-col items-center mb-8 md:mb-12">
+        {/* Timeline */}
+        <div className="mb-8 md:mb-12">
           <div className="flex flex-col gap-1 items-center text-center mb-4 md:mb-6">
-            <h2 className="text-lg md:text-xl font-semibold text-[#202124]">
-              Agenda
+            <h2 className="text-xl md:text-2xl font-semibold text-[#202124]">
+              Timeline
             </h2>
             <p className="text-sm md:text-base text-[#5f6368] md:w-xl">
-              A first look at what&apos;s coming. Find out when to pick up your
+              A full look at what&apos;s coming. Find out when to pick up your
               badge, attend sessions, join parties, and more.
             </p>
           </div>
 
-          {/* Map through agendaItems to create agenda cards */}
-          {agendaItems.map((agenda, agendaIndex) => (
-            <div
-              key={agendaIndex}
-              className={`relative p-[4px] rounded-xl ${
-                agendaIndex < agendaItems.length - 1 ? "mb-4 md:mb-6" : ""
-              }`}
-            >
-              {/* Gradient border using pseudo-element */}
-              <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-[#4084f3] via-[#4285F4] to-[#5f6ad8]"></div>
-
-              {/* Content container with white background */}
-              <div className="relative bg-white rounded-lg p-4 md:p-6">
-                <h3 className="text-base md:text-lg font-semibold mb-2 text-[#202124]">
-                  {agenda.title}
-                </h3>
-                <div className="w-full h-1.5 bg-[#4084f3] rounded-full mb-4"></div>
+          <div className="relative">
+            {/* Timeline line */}
+            <div className="absolute left-[15px] top-0 bottom-0 w-0.5 bg-[#4285f4]"></div>
 
-                {/* Map through rundown items */}
-                {agenda.rundown.map((session, sessionIndex) => (
-                  <div
-                    key={sessionIndex}
-                    className={
-                      sessionIndex < agenda.rundown.length - 1
-                        ? "mb-4 md:mb-6"
-                        : ""
-                    }
-                  >
-                    <div className="text-xs md:text-sm text-[#5f6368] mb-1">
-                      {session.time}
+            {timelines.map((timeline, index) => (
+              <div key={index} className="relative mb-6 md:mb-8 pl-10">
+                <div className="absolute left-0 top-0 w-[30px] h-[30px] bg-white border-4 border-[#4285f4] rounded-full"></div>
+                <div className="border border-[#dadce0] rounded-lg p-3 md:p-4">
+                  <h3 className="text-base md:text-lg font-bold text-[#202124] mb-2">
+                    {timeline.date}
+                  </h3>
+                  <div className="mb-2">
+                    <div className="font-medium text-[#202124]">
+                      {timeline.title}
                     </div>
-                    <h4 className="font-medium text-sm md:text-base text-[#202124] mb-1">
-                      {session.title}
-                    </h4>
                     <p className="text-xs md:text-sm text-[#5f6368]">
-                      {session.description}
+                      {timeline.description}
                     </p>
                   </div>
-                ))}
+                </div>
               </div>
-            </div>
-          ))}
+            ))}
+          </div>
         </div>
 
-        {/* GDC Speakers */}
+        {/* Pick Your Role */}
         <div className="mb-8 md:mb-12">
-          <h2 className="text-lg md:text-xl font-semibold mb-4 md:mb-6 text-[#202124]">
-            GDC speakers
+          <h2 className="text-xl md:text-2xl font-bold text-[#202124] mb-6 md:mb-8 text-center">
+            Hackathon Roles
           </h2>
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 md:gap-4">
-            {speakers.map((speaker, i) => (
-              <div
-                key={i}
-                className="flex flex-col items-center py-4 border rounded-sm"
-              >
-                <div className="w-[100px] h-[100px] md:w-[120px] md:h-[120px] rounded-full overflow-hidden mb-3 md:mb-4 bg-[#202124] flex items-center justify-center">
-                  <Image
-                    src={
-                      speaker.image || "/placeholder.svg?height=120&width=120"
-                    }
-                    alt={`${speaker.name}`}
-                    width={120}
-                    height={120}
-                    className="object-cover"
-                  />
-                </div>
-                <h3 className="font-medium text-center">{speaker.name}</h3>
-                <p className="text-xs md:text-sm text-[#5f6368] text-center">
-                  {speaker.title}
-                </p>
-                <p className="text-xs md:text-sm text-[#5f6368] text-center">
-                  {speaker.company}
+
+          {roles.map((role, index) => (
+            <div
+              key={index}
+              className={`flex flex-col md:flex-row md:justify-between md:items-center border-t ${
+                index === roles.length - 1 ? "border-b" : ""
+              } border-[#dadce0] py-4 md:py-6`}
+            >
+              <div className="max-w-md mb-4 md:mb-0">
+                <h3 className="text-lg md:text-xl font-bold text-[#202124] mb-2">
+                  {role.name}
+                </h3>
+                <p className="text-xs md:text-sm text-[#5f6368]">
+                  {role.description}
                 </p>
               </div>
-            ))}
-          </div>
+              <div className="relative self-center md:self-auto">
+                <div className="w-[80px] h-[80px] md:w-[100px] md:h-[100px] bg-[#bed4fd] rounded-lg flex items-center justify-center">
+                  {role.icon}
+                  <div className="absolute -bottom-2 right-2 w-5 h-5 md:w-6 md:h-6 bg-[#4285f4] rounded-full"></div>
+                  <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 text-lg md:text-xl font-bold text-[#4285f4]">
+                    g
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
         </div>
 
-        {/* Replace the banner div with the BannerCTA component */}
         <BannerCTA
-          title="Join the Gunadarma Code WEEK"
+          title="Join the GCW Hackathon 2025"
           description="Lorem ipsum dolor sit amet consectetur. In lectus odio facilisis venenatis eros. Justo sagittis venenatis sit condimentum. Sit lacus adipiscing ut felis cursus purus pellentesque morbi. Imperdiet mi."
           buttonText="Register now"
           imageSrc="/assets/brain.png"
diff --git a/app/dashboard/seminar/intro/page.tsx b/app/dashboard/seminar/intro/page.tsx
new file mode 100644
index 0000000..9b10285
--- /dev/null
+++ b/app/dashboard/seminar/intro/page.tsx
@@ -0,0 +1,301 @@
+"use client";
+
+import Image from "next/image";
+import { Calendar, MapPin, ChevronRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import BannerCTA from "@/components/BannerCTA";
+
+export default function SeminarPage() {
+  const agendaItems = [
+    {
+      title: "9 April 2025",
+      rundown: [
+        {
+          time: "7:00 AM - 7:30 PM",
+          title: "Opening & Introduction",
+          description:
+            "Welcome Participants, Introduce The Speakers, And Outline The Goals Of The Workshop.",
+        },
+        {
+          time: "9:00 AM - 10:30 AM",
+          title:
+            "Workshop Session: A Dive Into Machine Learning And Sentiment Analysis",
+          description:
+            "Learn The Fundamentals Of Sentiment Analysis, From Setting Up The Environment To Preprocessing Text, Tokenizing, And Building A Classification Model. This Session Provides A Hands-On Introduction To Machine Learning Workflows For Analyzing Text Sentiment. ✓",
+        },
+        {
+          time: "9:00 AM - 6:00 PM",
+          title:
+            "Workshop Session: A Dive Into Machine Learning And Sentiment Analysis",
+          description:
+            "Learn The Fundamentals Of Sentiment Analysis, From Setting Up The Environment To Preprocessing Text, Tokenizing, And Building A Classification Model. This Session Provides A Hands-On Introduction To Machine Learning Workflows For Analyzing Text Sentiment. ✓",
+        },
+        {
+          time: "1:30 PM - 2:45 PM",
+          title: "Closing & Feedback",
+          description:
+            "Summarize Key Learnings, Share Resources For Further Learning, And Collect Participant Feedback.",
+        },
+      ],
+    },
+    {
+      title: "9 April 2025",
+      rundown: [
+        {
+          time: "7:00 AM - 7:30 PM",
+          title: "Opening & Introduction",
+          description:
+            "Welcome Participants, Introduce The Speakers, And Outline The Goals Of The Workshop.",
+        },
+        {
+          time: "9:00 AM - 10:30 AM",
+          title:
+            "Workshop Session: A Dive Into Machine Learning And Sentiment Analysis",
+          description:
+            "Learn The Fundamentals Of Sentiment Analysis, From Setting Up The Environment To Preprocessing Text, Tokenizing, And Building A Classification Model. This Session Provides A Hands-On Introduction To Machine Learning Workflows For Analyzing Text Sentiment. ✓",
+        },
+        {
+          time: "9:00 AM - 6:00 PM",
+          title:
+            "Workshop Session: A Dive Into Machine Learning And Sentiment Analysis",
+          description:
+            "Learn The Fundamentals Of Sentiment Analysis, From Setting Up The Environment To Preprocessing Text, Tokenizing, And Building A Classification Model. This Session Provides A Hands-On Introduction To Machine Learning Workflows For Analyzing Text Sentiment. ✓",
+        },
+      ],
+    },
+  ];
+
+  const speakers = [
+    {
+      name: "Matt Renner",
+      title: "President, Global Revenue",
+      company: "Google Cloud",
+      image: "/assets/dummy-circle.png",
+    },
+    {
+      name: "Matt Renner",
+      title: "President, Global Revenue",
+      company: "Google Cloud",
+      image: "/assets/dummy-circle.png",
+    },
+    {
+      name: "Matt Renner",
+      title: "President, Global Revenue",
+      company: "Google Cloud",
+      image: "/assets/dummy-circle.png",
+    },
+  ];
+
+  const handleRegisterClick = () => {
+    // Add your registration logic here
+    console.log("Register button clicked");
+    // You could redirect to registration page, open a modal, etc.
+  };
+
+  return (
+    <div className="flex min-h-screen bg-white">
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 py-4 sm:py-8 pt-16 md:pt-8">
+        {/* Header */}
+        <div className="flex flex-col-reverse md:flex-row justify-between items-center md:items-start gap-4 md:gap-8 mb-8 md:mb-12">
+          <div className="space-y-3 md:space-y-4 max-w-xl text-center md:text-left">
+            <h1 className="text-2xl md:text-4xl md:leading-12 font-bold text-[#202124]">
+              Seminar: Menyelami Pembelajaran Mesin dan Analisis Sentimen
+            </h1>
+            <div className="flex items-center text-sm text-[#5f6368] gap-1 justify-center md:justify-start">
+              <Calendar className="h-4 w-4 text-[#4084f3]" />
+              <span>February 27, 2021 09:00-13:00 CST</span>
+            </div>
+            <div className="flex items-center text-sm text-[#5f6368] gap-1 justify-center md:justify-start">
+              <MapPin className="h-4 w-4 text-[#4084f3]" />
+              <span>Ruang Auditorium D402 Kampus D</span>
+            </div>
+            <Button>
+              Register Now <ChevronRight className="h-4 w-4 ml-1" />
+            </Button>
+          </div>
+          <div className="relative size-[150px] md:size-[280px] flex-shrink-0">
+            <Image
+              src="/assets/seminar-maskot.png"
+              alt="Robot mascot"
+              width={280}
+              height={280}
+              className="object-contain"
+            />
+          </div>
+        </div>
+
+        <div className="flex flex-col md:flex-row gap-8 md:gap-4 mb-8 md:mb-12">
+          {/* Key Themes */}
+          <div className="flex flex-col">
+            <h2 className="text-lg md:text-xl font-semibold mb-3 md:mb-4 text-[#202124]">
+              Key Themes
+            </h2>
+            <div className="flex flex-wrap gap-2">
+              <Badge
+                variant="outline"
+                className="rounded-full px-3 py-1 border-[#dadce0] text-[#5f6368] text-xs"
+              >
+                AI
+              </Badge>
+              <Badge
+                variant="outline"
+                className="rounded-full px-3 py-1 border-[#dadce0] text-[#5f6368] text-xs"
+              >
+                Cloud
+              </Badge>
+              <Badge
+                variant="outline"
+                className="rounded-full px-3 py-1 border-[#dadce0] text-[#5f6368] text-xs"
+              >
+                Data AI
+              </Badge>
+              <Badge
+                variant="outline"
+                className="rounded-full px-3 py-1 border-[#dadce0] text-[#5f6368] text-xs"
+              >
+                Gemini
+              </Badge>
+              <Badge
+                variant="outline"
+                className="rounded-full px-3 py-1 border-[#dadce0] text-[#5f6368] text-xs"
+              >
+                Google Cloud Next
+              </Badge>
+              <Badge
+                variant="outline"
+                className="rounded-full px-3 py-1 border-[#dadce0] text-[#5f6368] text-xs"
+              >
+                Machine Learning
+              </Badge>
+              <Badge
+                variant="outline"
+                className="rounded-full px-3 py-1 border-[#dadce0] text-[#5f6368] text-xs"
+              >
+                Vertex AI
+              </Badge>
+            </div>
+          </div>
+
+          {/* About this event */}
+          <div className="flex flex-col">
+            <h2 className="text-lg md:text-xl font-semibold mb-3 md:mb-4 text-[#202124]">
+              About this event
+            </h2>
+            <p className="text-sm md:text-base text-[#5f6368] mb-4">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et
+              massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien
+              fringilla, mattis ligula consectetur, ultrices mauris. Maecenas
+              vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum
+              auctor ornare leo, non suscipit magna interdum eu. Curabitur
+              pellentesque nibh nibh, at maximus ante fermentum sit amet.
+              Pellentesque commodo lacus at sodales sodales. Quisque sagittis
+              orci ut diam condimentum, vel euismod erat placerat. In iaculis
+              arcu erat, eget tempus orci facilisis id.
+            </p>
+          </div>
+        </div>
+
+        {/* Agenda */}
+        <div className="flex flex-col items-center mb-8 md:mb-12">
+          <div className="flex flex-col gap-1 items-center text-center mb-4 md:mb-6">
+            <h2 className="text-lg md:text-xl font-semibold text-[#202124]">
+              Agenda
+            </h2>
+            <p className="text-sm md:text-base text-[#5f6368] md:w-xl">
+              A first look at what&apos;s coming. Find out when to pick up your
+              badge, attend sessions, join parties, and more.
+            </p>
+          </div>
+
+          {/* Map through agendaItems to create agenda cards */}
+          {agendaItems.map((agenda, agendaIndex) => (
+            <div
+              key={agendaIndex}
+              className={`relative p-[4px] rounded-xl ${
+                agendaIndex < agendaItems.length - 1 ? "mb-4 md:mb-6" : ""
+              }`}
+            >
+              {/* Gradient border using pseudo-element */}
+              <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-[#4084f3] via-[#4285F4] to-[#5f6ad8]"></div>
+
+              {/* Content container with white background */}
+              <div className="relative bg-white rounded-lg p-4 md:p-6">
+                <h3 className="text-base md:text-lg font-semibold mb-2 text-[#202124]">
+                  {agenda.title}
+                </h3>
+                <div className="w-full h-1.5 bg-[#4084f3] rounded-full mb-4"></div>
+
+                {/* Map through rundown items */}
+                {agenda.rundown.map((session, sessionIndex) => (
+                  <div
+                    key={sessionIndex}
+                    className={
+                      sessionIndex < agenda.rundown.length - 1
+                        ? "mb-4 md:mb-6"
+                        : ""
+                    }
+                  >
+                    <div className="text-xs md:text-sm text-[#5f6368] mb-1">
+                      {session.time}
+                    </div>
+                    <h4 className="font-medium text-sm md:text-base text-[#202124] mb-1">
+                      {session.title}
+                    </h4>
+                    <p className="text-xs md:text-sm text-[#5f6368]">
+                      {session.description}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* GDC Speakers */}
+        <div className="mb-8 md:mb-12">
+          <h2 className="text-lg md:text-xl font-semibold mb-4 md:mb-6 text-[#202124]">
+            GDC speakers
+          </h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 md:gap-4">
+            {speakers.map((speaker, i) => (
+              <div
+                key={i}
+                className="flex flex-col items-center py-4 border rounded-sm"
+              >
+                <div className="w-[100px] h-[100px] md:w-[120px] md:h-[120px] rounded-full overflow-hidden mb-3 md:mb-4 bg-[#202124] flex items-center justify-center">
+                  <Image
+                    src={
+                      speaker.image || "/placeholder.svg?height=120&width=120"
+                    }
+                    alt={`${speaker.name}`}
+                    width={120}
+                    height={120}
+                    className="object-cover"
+                  />
+                </div>
+                <h3 className="font-medium text-center">{speaker.name}</h3>
+                <p className="text-xs md:text-sm text-[#5f6368] text-center">
+                  {speaker.title}
+                </p>
+                <p className="text-xs md:text-sm text-[#5f6368] text-center">
+                  {speaker.company}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Replace the banner div with the BannerCTA component */}
+        <BannerCTA
+          title="Join the Gunadarma Code WEEK"
+          description="Lorem ipsum dolor sit amet consectetur. In lectus odio facilisis venenatis eros. Justo sagittis venenatis sit condimentum. Sit lacus adipiscing ut felis cursus purus pellentesque morbi. Imperdiet mi."
+          buttonText="Register now"
+          imageSrc="/assets/brain.png"
+          imageAlt="Code Week"
+          onButtonClick={handleRegisterClick}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/components/app-sidebar.tsx b/components/app-sidebar.tsx
index 7dd7774..3f6166d 100644
--- a/components/app-sidebar.tsx
+++ b/components/app-sidebar.tsx
@@ -54,7 +54,6 @@ const data = {
       title: "Hackathon",
       url: "#",
       icon: SquareTerminal,
-      isActive: true,
       items: [
         {
           title: "Intro",
@@ -79,6 +78,10 @@ const data = {
       url: "#",
       icon: Bot,
       items: [
+        {
+          title: "Intro",
+          url: "/dashboard/cp/intro",
+        },
         {
           title: "H1 Pemanasan",
           url: "#",
@@ -95,8 +98,8 @@ const data = {
     },
     {
       title: "Seminar",
-      url: "/dashboard/profile",
-      icon: BookOpen,
+      url: "/dashboard/seminar/intro",
+      icon: BookOpen
     },
     {
       title: "Settings",
diff --git a/components/nav-main.tsx b/components/nav-main.tsx
index 8223cf7..20072a6 100644
--- a/components/nav-main.tsx
+++ b/components/nav-main.tsx
@@ -1,12 +1,6 @@
 "use client";
 
-import { ChevronRight, type LucideIcon } from "lucide-react";
-
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible";
+import { type LucideIcon } from "lucide-react";
 import {
   SidebarGroup,
   SidebarGroupLabel,
@@ -34,64 +28,34 @@ export function NavMain({
   }[];
 }) {
   const router = useRouter();
-  console.log("items", items);
   return (
     <SidebarGroup>
       <SidebarGroupLabel>Event</SidebarGroupLabel>
       <SidebarMenu>
-        {items.map((item) => {
-          return (
-            <Collapsible
-              key={item.title}
-              asChild
-              defaultOpen={item.isActive}
-              className="group/collapsible"
+        {items.map((item) => (
+          <SidebarMenuItem key={item.title}>
+            <SidebarMenuButton
+              tooltip={item.title}
+              onClick={() => router.push(item.url)}
             >
-              <SidebarMenuItem>
-                {item.items ? (
-                  <CollapsibleTrigger asChild>
-                    <SidebarMenuButton
-                      tooltip={item.title}
-                      onClick={() => {
-                        router.push(item.url);
-                      }}
-                    >
-                      {item.icon && <item.icon />}
-                      <span>{item.title}</span>
-                      <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-                    </SidebarMenuButton>
-                  </CollapsibleTrigger>
-                ) : (
-                  <SidebarMenuButton
-                    tooltip={item.title}
-                    onClick={() => {
-                      router.push(item.url);
-                    }}
-                  >
-                    {item.icon && <item.icon />}
-                    <span>{item.title}</span>
-                    <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-                  </SidebarMenuButton>
-                )}
-                {item.items && (
-                  <CollapsibleContent>
-                    <SidebarMenuSub>
-                      {item.items?.map((subItem) => (
-                        <SidebarMenuSubItem key={subItem.title}>
-                          <SidebarMenuSubButton asChild>
-                            <a href={subItem.url}>
-                              <span>{subItem.title}</span>
-                            </a>
-                          </SidebarMenuSubButton>
-                        </SidebarMenuSubItem>
-                      ))}
-                    </SidebarMenuSub>
-                  </CollapsibleContent>
-                )}
-              </SidebarMenuItem>
-            </Collapsible>
-          );
-        })}
+              {item.icon && <item.icon />}
+              <span>{item.title}</span>
+            </SidebarMenuButton>
+            {item.items && (
+              <SidebarMenuSub>
+                {item.items.map((subItem) => (
+                  <SidebarMenuSubItem key={subItem.title}>
+                    <SidebarMenuSubButton asChild>
+                      <a href={subItem.url}>
+                        <span>{subItem.title}</span>
+                      </a>
+                    </SidebarMenuSubButton>
+                  </SidebarMenuSubItem>
+                ))}
+              </SidebarMenuSub>
+            )}
+          </SidebarMenuItem>
+        ))}
       </SidebarMenu>
     </SidebarGroup>
   );