diff --git a/app/[locale]/(public)/schedule/page.tsx b/app/[locale]/(public)/schedule/page.tsx
index f3096a7b..371a1fce 100644
--- a/app/[locale]/(public)/schedule/page.tsx
+++ b/app/[locale]/(public)/schedule/page.tsx
@@ -8,8 +8,9 @@ import React, { useEffect, useState } from "react";
 import { format } from "date-fns";
 import { cn } from "@/lib/utils";
 import { Checkbox } from "@/components/ui/checkbox";
+import { Icon } from "@iconify/react/dist/iconify.js";
 
-const Jadwal = () => {
+const Schedule = () => {
   const city = [
     {
       key: 1,
@@ -64,6 +65,9 @@ const Jadwal = () => {
 
   const [startDate, setStartDate] = useState<Date | undefined>(new Date());
   const [dateAWeek, setDateAWeek] = useState<string[]>([]);
+  const [scheduleSearch, setScheduleSearch] = useState();
+  const [todayList, setTodayList] = useState([]);
+
   const curr = new Date();
   const startDays = (curr.getDay() + 7 - 1) % 7;
 
@@ -190,7 +194,7 @@ const Jadwal = () => {
   return (
     <>
       {/* Awal Komponen Kiri */}
-      <div className="relative px-4 lg:px-28 md:py-10 py-4 bg-gray-50 dark:bg-slate-800">
+      <div className="relative px-4 lg:px-10 lg:py-10 py-4 bg-gray-50 dark:bg-slate-800">
         <Popover>
           <PopoverTrigger asChild>
             <Button variant={"outline"} className={cn("w-[240px] py-4 justify-start text-left font-normal", !startDate && "text-muted-foreground")}>
@@ -210,10 +214,10 @@ const Jadwal = () => {
           </PopoverContent>
         </Popover>
 
-        <div className="container relative">
+        <div className="container relative py-4">
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <a className="text-black flex flex-row gap-2 py-4 items-center cursor-pointer">
+              <a className="text-black flex flex-row w-fit gap-2 py-4 items-center cursor-pointer">
                 <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                   <path fill="#000" d="M20 3H4a1 1 0 0 0-1 1v2.227l.008.223a3 3 0 0 0 .772 1.795L8 12.886V21a1 1 0 0 0 1.316.949l6-2l.108-.043A1 1 0 0 0 16 19v-6.586l4.121-4.12A3 3 0 0 0 21 6.171V4a1 1 0 0 0-1-1" />
                 </svg>
@@ -273,337 +277,377 @@ const Jadwal = () => {
             </DropdownMenuContent>
           </DropdownMenu>
         </div>
-      <div className="flex flex-col lg:flex-row">
-        <div className="h-[500px] w-3/4 overflow-y-auto">
-          <div className="container-fluid relative">
-            <div className="grid grid-cols-1 mt-8">
-              <div className="relative block bg-white dark:bg-slate-900">
-                <table className="w-full text-sm text-start">
-                  <thead className="text-md">
-                    <tr className="h-full">
-                      <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[120px]">Time Table</th>
-                      <th className="flex flex-row border h-full border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
-                        <a className="cursor-pointer h-fit self-center bottom-0" onClick={() => changePrevWeek()}>
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
-                            <path fill="currentColor" d="M12.29 8.71L9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7" />
-                          </svg>
-                        </a>{" "}
-                        <div className="flex flex-col">
-                          <p>{dateAWeek[0]?.split("-")[2]}</p>
-                          <p>Monday</p>
-                        </div>
-                      </th>
-                      <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
-                        <div>{dateAWeek[1]?.split("-")[2]}</div>Tuesday
-                      </th>
-                      <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
-                        <div>{dateAWeek[2]?.split("-")[2]}</div>Wednesday
-                      </th>
-                      <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
-                        <div>{dateAWeek[3]?.split("-")[2]}</div>Thursday
-                      </th>
-                      <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
-                        <div>{dateAWeek[4]?.split("-")[2]}</div>Friday
-                      </th>
-                      <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
-                        <div>{dateAWeek[5]?.split("-")[2]}</div>Saturday
-                      </th>
-                      <th className="flex flex-row text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
-                        <div className="flex flex-col ">
-                          <p>{dateAWeek[6]?.split("-")[2]}</p>
-                          <p>Sunday</p>
-                        </div>
-                        <a onClick={() => changeNextWeek()} className="cursor-pointer h-fit p-0 m-0 self-center">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
-                            <path fill="currentColor" d="m11.71 15.29l2.59-2.59a.996.996 0 0 0 0-1.41L11.71 8.7c-.63-.62-1.71-.18-1.71.71v5.17c0 .9 1.08 1.34 1.71.71" />
-                          </svg>
-                        </a>
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr>
-                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">06:00</th>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                    </tr>
+        <div className="flex flex-col lg:flex-row gap-6">
+          <div className="h-[500px] overflow-y-auto w-3/4 ">
+            <div className="container-fluid relative">
+              <div className="grid grid-cols-1 mt-8">
+                <div className="relative block bg-white dark:bg-slate-900">
+                  <table className="w-full text-sm text-start">
+                    <thead className="text-md">
+                      <tr className="h-full">
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[120px]">Time Table</th>
+                        <th className="flex flex-row border h-full border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
+                          <a className="cursor-pointer h-fit self-center bottom-0" onClick={() => changePrevWeek()}>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
+                              <path fill="currentColor" d="M12.29 8.71L9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7" />
+                            </svg>
+                          </a>{" "}
+                          <div className="flex flex-col">
+                            <p>{dateAWeek[0]?.split("-")[2]}</p>
+                            <p>Monday</p>
+                          </div>
+                        </th>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
+                          <div>{dateAWeek[1]?.split("-")[2]}</div>Tuesday
+                        </th>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
+                          <div>{dateAWeek[2]?.split("-")[2]}</div>Wednesday
+                        </th>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
+                          <div>{dateAWeek[3]?.split("-")[2]}</div>Thursday
+                        </th>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
+                          <div>{dateAWeek[4]?.split("-")[2]}</div>Friday
+                        </th>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
+                          <div>{dateAWeek[5]?.split("-")[2]}</div>Saturday
+                        </th>
+                        <th className="flex flex-row text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
+                          <div className="flex flex-col ">
+                            <p>{dateAWeek[6]?.split("-")[2]}</p>
+                            <p>Sunday</p>
+                          </div>
+                          <a onClick={() => changeNextWeek()} className="cursor-pointer h-fit p-0 m-0 self-center">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
+                              <path fill="currentColor" d="m11.71 15.29l2.59-2.59a.996.996 0 0 0 0-1.41L11.71 8.7c-.63-.62-1.71-.18-1.71.71v5.17c0 .9 1.08 1.34 1.71.71" />
+                            </svg>
+                          </a>
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-5">06:00</th>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                      </tr>
 
-                    <tr>
-                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">07:00</th>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                    </tr>
+                      <tr>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-5">07:00</th>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                      </tr>
 
-                    <tr>
-                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">08:00</th>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                    </tr>
+                      <tr>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-5">08:00</th>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                      </tr>
 
-                    <tr>
-                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">09:00</th>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                    </tr>
+                      <tr>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-5">09:00</th>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                      </tr>
 
-                    <tr>
-                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">10:00</th>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                    </tr>
+                      <tr>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-5">10:00</th>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                      </tr>
 
-                    <tr>
-                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">11:00</th>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                    </tr>
+                      <tr>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-5">11:00</th>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                      </tr>
 
-                    <tr>
-                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">12:00</th>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                    </tr>
+                      <tr>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-5">12:00</th>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                      </tr>
 
-                    <tr>
-                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">13:00</th>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                    </tr>
+                      <tr>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-5">13:00</th>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                      </tr>
 
-                    <tr>
-                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">14:00</th>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                    </tr>
+                      <tr>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-5">14:00</th>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                      </tr>
 
-                    <tr>
-                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">15:00</th>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                    </tr>
+                      <tr>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-5">15:00</th>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                      </tr>
 
-                    <tr>
-                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">16:00</th>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                    </tr>
+                      <tr>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-5">16:00</th>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                      </tr>
 
-                    <tr>
-                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">17:00</th>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                    </tr>
+                      <tr>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-5">17:00</th>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                      </tr>
 
-                    <tr>
-                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">18:00</th>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                    </tr>
+                      <tr>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-5">18:00</th>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                      </tr>
 
-                    <tr>
-                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">19:00</th>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                    </tr>
+                      <tr>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-5">19:00</th>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                      </tr>
 
-                    <tr>
-                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">20:00</th>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                    </tr>
+                      <tr>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-5">20:00</th>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                      </tr>
 
-                    <tr>
-                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">21:00</th>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                    </tr>
+                      <tr>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-5">21:00</th>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                      </tr>
 
-                    <tr>
-                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">22:00</th>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                    </tr>
+                      <tr>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-5">22:00</th>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                      </tr>
 
-                    <tr>
-                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">23:00</th>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                    </tr>
+                      <tr>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-5">23:00</th>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                      </tr>
 
-                    <tr>
-                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">24:00</th>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                    </tr>
+                      <tr>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-5">24:00</th>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                      </tr>
 
-                    <tr>
-                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">01:00</th>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                    </tr>
+                      <tr>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-5">01:00</th>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                      </tr>
 
-                    <tr>
-                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">02:00</th>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                    </tr>
+                      <tr>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-5">02:00</th>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                      </tr>
 
-                    <tr>
-                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">03:00</th>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                    </tr>
+                      <tr>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-5">03:00</th>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                      </tr>
 
-                    <tr>
-                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">04:00</th>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                    </tr>
+                      <tr>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-5">04:00</th>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                      </tr>
 
-                    <tr>
-                      <th className="text-center border border-gray-100 dark:border-gray-700 py-5">05:00</th>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                      <td className="border border-gray-100 dark:border-gray-700"></td>
-                    </tr>
-                  </tbody>
-                </table>
+                      <tr>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-5">05:00</th>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                        <td className="border border-gray-100 dark:border-gray-700"></td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="w-1/4 flex flex-col gap-6">
+            <div className="relative text-gray-600 dark:text-white">
+              <input type="text" placeholder="Masukkan Judul Jadwal" className="pl-8 pr-4 py-1 w-full border rounded-full text-sm  focus:outline-none" />
+              <span className="absolute left-2 top-1/2 transform -translate-y-1/2">
+                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+                  <g fill="none" fill-rule="evenodd">
+                    <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
+                    <path fill="currentColor" d="M10.5 2a8.5 8.5 0 1 0 5.262 15.176l3.652 3.652a1 1 0 0 0 1.414-1.414l-3.652-3.652A8.5 8.5 0 0 0 10.5 2M4 10.5a6.5 6.5 0 1 1 13 0a6.5 6.5 0 0 1-13 0" />
+                  </g>
+                </svg>
+              </span>
+            </div>
+            <div className="card border border-slate-400 p-2 rounded-lg">
+              <div className="card-header">
+                <a className="accordion-icon">
+                  <h5 className="py-2 theme-text text-left">
+                    Jadwal Hari Ini
+                    <span className="float-right">
+                      <Icon icon="fa:angle-down" className="ml-1" />
+                    </span>
+                  </h5>
+                </a>
+              </div>
+            </div>
+            <div className="card border border-slate-400 p-2 rounded-lg">
+              <div className="card-header">
+                <a className="accordion-icon">
+                  <h5 className="py-2 theme-text text-left">
+                    Jadwal Sebelumnya
+                    <span className="float-right">
+                      <Icon icon="fa:angle-down" className="ml-1" />
+                    </span>
+                  </h5>
+                </a>
+              </div>
+            </div>
+            <div className="card border border-slate-400 p-2 rounded-lg">
+              <div className="card-header">
+                <a className="accordion-icon">
+                  <h5 className="py-2 theme-text text-left">
+                    Jadwal Selanjutnya
+                    <span className="float-right">
+                      <Icon icon="fa:angle-down" className="ml-1" />
+                    </span>
+                  </h5>
+                </a>
               </div>
             </div>
           </div>
         </div>
       </div>
-      </div>
-      {/* Akhir Komponen Kiri */}
-
-      {/* Awal Komponent Kanan */}
-      <div className="w-1/4">
-        <div>
-          <h1>HALO</h1>
-        </div>
-      </div>
-      {/* Akhir Komponen Kanan */}
     </>
   );
 };
 
-export default Jadwal;
+export default Schedule;
diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index c21b8aae..94461251 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -9,6 +9,7 @@ import Coverage from "@/components/landing-page/coverage";
 import Navbar from "@/components/landing-page/navbar";
 import Hero from "@/components/landing-page/hero";
 import Footer from "@/components/landing-page/footer";
+import Division from "@/components/landing-page/division";
 
 const Home = ({ params: { locale } }: { params: { locale: string } }) => {
   return (
@@ -21,6 +22,7 @@ const Home = ({ params: { locale } }: { params: { locale: string } }) => {
       <PopularContent />
       <ContentCategory />
       <Coverage />
+      <Division />
       <Footer />
     </>
   );
diff --git a/components/landing-page/Navbar.tsx b/components/landing-page/Navbar.tsx
index 7ee10d88..7d7b3624 100644
--- a/components/landing-page/Navbar.tsx
+++ b/components/landing-page/Navbar.tsx
@@ -14,6 +14,13 @@ const Navbar = () => {
   const pathname = usePathname();
   const params = useParams();
   const locale = params?.locale;
+  const [language, setLanguage] = useState<"id" | "en">("id");
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleLanguageChange = (lang: "id" | "en") => {
+    setLanguage(lang);
+    setIsOpen(false);
+  };
 
   return (
     <div className="bg-white dark:bg-black shadow-md sticky top-0 z-50">
@@ -113,17 +120,54 @@ const Navbar = () => {
               <img src="/assets/polriTv.png" className="w-20 lg:max-w-screen-lg h-10 flex-auto " />
             </a>
           </div>
-          <select className="bg-transparent dark:text-white text-black border-none focus:outline-none" defaultValue="Indonesia">
-            <option>Indonesia</option>
-            <option>English</option>
-          </select>
+          <div className="relative inline-block text-left">
+            {/* Tombol Utama */}
+            <button onClick={() => setIsOpen(!isOpen)} className="flex items-center space-x-2 p-2 text-gray-700 bg-slate-200 rounded-lg">
+              <img
+                src={language === "id" ? "https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg" : "https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg"}
+                alt={language === "id" ? "Ind" : "Eng"}
+                className="w-3 h-3"
+              />
+              <span>{language === "id" ? "Ind" : "Eng"}</span>
+              <span className="text-gray-500">
+                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 32 32">
+                  <path fill="currentColor" d="M8.037 11.166L14.5 22.36c.825 1.43 2.175 1.43 3 0l6.463-11.195c.826-1.43.15-2.598-1.5-2.598H9.537c-1.65 0-2.326 1.17-1.5 2.6z" />
+                </svg>
+              </span>
+            </button>
+
+            {/* Dropdown Menu */}
+            {isOpen && (
+              <div className="absolute right-0 mt-2 w-auto bg-slate-200 border rounded-md shadow-lg z-10">
+                <button onClick={() => handleLanguageChange("id")} className={`flex items-center space-x-2 w-full px-4 py-2 ${language === "id" ? "font-medium" : ""}`}>
+                  <img src="https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg" alt="Indonesia" className="w-5 h-5" />
+                  <span>Ind</span>
+                </button>
+                <button onClick={() => handleLanguageChange("en")} className={`flex items-center space-x-2 w-full px-4 py-2 ${language === "en" ? "font-medium" : ""}`}>
+                  <img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg" alt="English" className="w-5 h-5" />
+                  <span>Eng</span>
+                </button>
+              </div>
+            )}
+          </div>
           <ThemeSwitcher />
           <div className="relative text-gray-600 dark:text-white">
-            <input type="text" placeholder="Pencarian" className="pl-8 pr-4 py-1 border rounded-full text-sm  focus:outline-none" />
-            <span className="absolute left-2 top-1/2 transform -translate-y-1/2">🔍</span>
+            <input type="text" placeholder="Pencarian" className="pl-8 pr-4 py-1 w-28 text-[13px] border rounded-full focus:outline-none" />
+            <span className="absolute left-4 top-1/2 transform -translate-y-1/2">
+              <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24">
+                <path
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                  d="M14.385 15.446a6.751 6.751 0 1 1 1.06-1.06l5.156 5.155a.75.75 0 1 1-1.06 1.06zM6.46 13.884a5.25 5.25 0 1 1 7.43-.005l-.005.005l-.005.004a5.25 5.25 0 0 1-7.42-.004"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </span>
           </div>
           <div className="flex items-center space-x-2">
-            <button className="px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700">Masuk</button>
+            <Link href="/in/auth" className="px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700">
+              Masuk
+            </Link>
             <button className="px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-red-600 hover:text-white">Daftar</button>
           </div>
         </div>
@@ -215,8 +259,12 @@ const Navbar = () => {
             <input type="text" placeholder="Pencarian" className="border rounded-full text-sm text-gray-600" />
           </div>
           <div className="flex flex-col space-y-2">
-            <button className="w-full px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 md:flex">Masuk</button>
-            <button className="w-full px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] md:flex hover:text-white">Daftar</button>
+            <Link href="/auth" className="w-full px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 md:flex">
+              Masuk
+            </Link>
+            <Link href="#" className="w-full px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] md:flex hover:text-white">
+              Daftar
+            </Link>
           </div>
         </div>
       )}
diff --git a/components/landing-page/division.tsx b/components/landing-page/division.tsx
new file mode 100644
index 00000000..311414cf
--- /dev/null
+++ b/components/landing-page/division.tsx
@@ -0,0 +1,102 @@
+import React, { useState } from "react";
+import { Button } from "../ui/button";
+
+const Division = () => {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [seeAllValue, setSeeAllValue] = useState(false);
+
+  const regions = [
+    { name: "SIBER", logo: "/assets/satker/siber.png" },
+    { name: "DIVKUM", logo: "/assets/satker/divkum.png" },
+    { name: "PUSKEU", logo: "/assets/satker/puskeu.png" },
+    { name: "SSDM", logo: "/assets/satker/ssdm.png" },
+    { name: "ITWASUM", logo: "/assets/satker/itwasum.png" },
+    { name: "STIK-PTIK", logo: "/assets/satker/stik-ptik.png" },
+    { name: "SATUAN KERJA POLRI", logo: "/assets/satker/satuan-kerja-polri.png" },
+    { name: "BRIMOB", logo: "/assets/satker/brimob.png" },
+    { name: "DIV HUMAS", logo: "/assets/satker/div-humas.png" },
+    { name: "PUSLITBANG", logo: "/assets/satker/puslitbang.png" },
+    { name: "BINMAS", logo: "/assets/satker/binmas.png" },
+    { name: "DIV TIK", logo: "/assets/satker/div-tik.png" },
+    { name: "SPRIPIM", logo: "/assets/satker/spripim.png" },
+    { name: "DIVPROPRAM", logo: "/assets/satker/div-propram.png" },
+    { name: "KORPS SABHARA BAHARKAM", logo: "/assets/satker/khorp-sabhara-baharkam.png" },
+    { name: "PUSDOKKES", logo: "/assets/satker/pusdokkes.png" },
+    { name: "BAHARKAM", logo: "/assets/satker/baharkam.png" },
+    { name: "POLAIRUD", logo: "/assets/satker/polairud.png" },
+    { name: "POLAIR", logo: "/assets/satker/polair.png" },
+    { name: "POLUDARA", logo: "/assets/satker/poludara.png" },
+    { name: "LEMDIKLAT", logo: "/assets/satker/lemdiklat.png" },
+    { name: "AKPOL", logo: "/assets/satker/akpol.png" },
+    { name: "KORLANTAS", logo: "/assets/satker/korlantas.png" },
+    { name: "PUSINAFIS", logo: "/assets/satker/pusinafis.png" },
+    { name: "PUSJARAH", logo: "/assets/satker/pusjarah.png" },
+    { name: "PUSIKNAS", logo: "/assets/satker/pusiknas.png" },
+    { name: "SLOG", logo: "/assets/satker/slog.png" },
+    { name: "BAINTELKAM", logo: "/assets/satker/baintelkam.jpg" },
+    { name: "BARESKRIM", logo: "/assets/satker/bareskrim.png" },
+    { name: "DIVHUBINTER", logo: "/assets/satker/divhubinter.png" },
+    { name: "SETUM", logo: "/assets/satker/setum.png" },
+    { name: "PUSLABFOR", logo: "/assets/satker/puslabfor.png" },
+    { name: "DENSUS 88", logo: "/assets/satker/densus88.png" },
+    { name: "SAHLI KAPOLRI", logo: "/assets/satker/sahli-kapolri.png" },
+    { name: "SOPS", logo: "/assets/satker/sops.png" },
+    { name: "SRENA", logo: "/assets/satker/srena.png" },
+    { name: "SESPIM POLRI", logo: "/assets/satker/sespim-polri.png" },
+    { name: "SETUPA POLRI", logo: "/assets/satker/setupa-polri.png" },
+  ];
+
+  return (
+    <div className="max-w-screen-xl mx-auto px-4 lg:px-12 py-6">
+      {/* Header */}
+      <h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">
+        Liputan <span className="text-[#bb3523]">Satker</span>
+      </h2>
+      <div className="h-1 w-48 bg-[#bb3523] mx-auto mb-6 rounded"></div>
+
+      {/* Pencarian */}
+      <div className="flex items-center justify-center gap-4 mb-6">
+        <input
+          type="text"
+          placeholder="Pencarian"
+          className="w-full max-w-sm px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#bb3523] focus:outline-none"
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+        />
+        <button className="px-2 lg:px-4 lg:py-2 bg-[#bb3523] text-white rounded-md hover:bg-red-700">Cari Liputan &gt;</button>
+      </div>
+
+      {/* Grid Wilayah */}
+      <div className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-7 gap-6">
+        {regions.map((region, index) =>
+          !seeAllValue ? (
+            index < 7 ? (
+              <div key={index} className="flex flex-col items-center text-center group">
+                <div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
+                  <img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
+                </div>
+                <p className="text-md font-semibold">{region.name}</p>
+              </div>
+            ) : (
+              ""
+            )
+          ) : (
+            <div key={index} className="flex flex-col items-center text-center group">
+              <div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
+                <img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
+              </div>
+              <p className="text-md font-semibold">{region.name}</p>
+            </div>
+          )
+        )}
+      </div>
+      <div className="flex justify-center py-5">
+        <Button onClick={() => setSeeAllValue(!seeAllValue)} className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
+          Lihat Lebih {seeAllValue ? "Sedikit" : "Banyak"}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default Division;
diff --git a/public/assets/satker/akpol.png b/public/assets/satker/akpol.png
new file mode 100644
index 00000000..d7b95bf1
Binary files /dev/null and b/public/assets/satker/akpol.png differ
diff --git a/public/assets/satker/baharkam.png b/public/assets/satker/baharkam.png
new file mode 100644
index 00000000..1f541153
Binary files /dev/null and b/public/assets/satker/baharkam.png differ
diff --git a/public/assets/satker/baintelkam.jpg b/public/assets/satker/baintelkam.jpg
new file mode 100644
index 00000000..7445eab7
Binary files /dev/null and b/public/assets/satker/baintelkam.jpg differ
diff --git a/public/assets/satker/bareskrim.png b/public/assets/satker/bareskrim.png
new file mode 100644
index 00000000..2aa02f91
Binary files /dev/null and b/public/assets/satker/bareskrim.png differ
diff --git a/public/assets/satker/binmas.png b/public/assets/satker/binmas.png
new file mode 100644
index 00000000..8e447d67
Binary files /dev/null and b/public/assets/satker/binmas.png differ
diff --git a/public/assets/satker/brimob.png b/public/assets/satker/brimob.png
new file mode 100644
index 00000000..af0d4601
Binary files /dev/null and b/public/assets/satker/brimob.png differ
diff --git a/public/assets/satker/densus88.png b/public/assets/satker/densus88.png
new file mode 100644
index 00000000..b4a2a0ac
Binary files /dev/null and b/public/assets/satker/densus88.png differ
diff --git a/public/assets/satker/div-humas.png b/public/assets/satker/div-humas.png
new file mode 100644
index 00000000..9a69cf15
Binary files /dev/null and b/public/assets/satker/div-humas.png differ
diff --git a/public/assets/satker/div-propram.png b/public/assets/satker/div-propram.png
new file mode 100644
index 00000000..303fa471
Binary files /dev/null and b/public/assets/satker/div-propram.png differ
diff --git a/public/assets/satker/div-tik.png b/public/assets/satker/div-tik.png
new file mode 100644
index 00000000..83917024
Binary files /dev/null and b/public/assets/satker/div-tik.png differ
diff --git a/public/assets/satker/divhubinter.png b/public/assets/satker/divhubinter.png
new file mode 100644
index 00000000..186bd63e
Binary files /dev/null and b/public/assets/satker/divhubinter.png differ
diff --git a/public/assets/satker/divkum.png b/public/assets/satker/divkum.png
new file mode 100644
index 00000000..ee66164b
Binary files /dev/null and b/public/assets/satker/divkum.png differ
diff --git a/public/assets/satker/itwasum.png b/public/assets/satker/itwasum.png
new file mode 100644
index 00000000..82ef96fc
Binary files /dev/null and b/public/assets/satker/itwasum.png differ
diff --git a/public/assets/satker/khorp-sabhara-baharkam.png b/public/assets/satker/khorp-sabhara-baharkam.png
new file mode 100644
index 00000000..0b235cb4
Binary files /dev/null and b/public/assets/satker/khorp-sabhara-baharkam.png differ
diff --git a/public/assets/satker/korlantas.png b/public/assets/satker/korlantas.png
new file mode 100644
index 00000000..17ac5cf8
Binary files /dev/null and b/public/assets/satker/korlantas.png differ
diff --git a/public/assets/satker/lemdiklat.png b/public/assets/satker/lemdiklat.png
new file mode 100644
index 00000000..da934b6a
Binary files /dev/null and b/public/assets/satker/lemdiklat.png differ
diff --git a/public/assets/satker/polair.png b/public/assets/satker/polair.png
new file mode 100644
index 00000000..4fd8182c
Binary files /dev/null and b/public/assets/satker/polair.png differ
diff --git a/public/assets/satker/polairud.png b/public/assets/satker/polairud.png
new file mode 100644
index 00000000..3b921ea7
Binary files /dev/null and b/public/assets/satker/polairud.png differ
diff --git a/public/assets/satker/poludara.png b/public/assets/satker/poludara.png
new file mode 100644
index 00000000..b4fb278e
Binary files /dev/null and b/public/assets/satker/poludara.png differ
diff --git a/public/assets/satker/pusdokkes.png b/public/assets/satker/pusdokkes.png
new file mode 100644
index 00000000..78a3d3ad
Binary files /dev/null and b/public/assets/satker/pusdokkes.png differ
diff --git a/public/assets/satker/pusiknas.png b/public/assets/satker/pusiknas.png
new file mode 100644
index 00000000..d5a78c93
Binary files /dev/null and b/public/assets/satker/pusiknas.png differ
diff --git a/public/assets/satker/pusinafis.png b/public/assets/satker/pusinafis.png
new file mode 100644
index 00000000..e686704c
Binary files /dev/null and b/public/assets/satker/pusinafis.png differ
diff --git a/public/assets/satker/pusjarah.png b/public/assets/satker/pusjarah.png
new file mode 100644
index 00000000..1e89d159
Binary files /dev/null and b/public/assets/satker/pusjarah.png differ
diff --git a/public/assets/satker/puskeu.png b/public/assets/satker/puskeu.png
new file mode 100644
index 00000000..26ca4985
Binary files /dev/null and b/public/assets/satker/puskeu.png differ
diff --git a/public/assets/satker/puslabfor.png b/public/assets/satker/puslabfor.png
new file mode 100644
index 00000000..ceba5646
Binary files /dev/null and b/public/assets/satker/puslabfor.png differ
diff --git a/public/assets/satker/puslitbang.png b/public/assets/satker/puslitbang.png
new file mode 100644
index 00000000..d7587407
Binary files /dev/null and b/public/assets/satker/puslitbang.png differ
diff --git a/public/assets/satker/sahli-kapolri.png b/public/assets/satker/sahli-kapolri.png
new file mode 100644
index 00000000..fab5d74a
Binary files /dev/null and b/public/assets/satker/sahli-kapolri.png differ
diff --git a/public/assets/satker/satuan-kerja-polri.png b/public/assets/satker/satuan-kerja-polri.png
new file mode 100644
index 00000000..7847e96c
Binary files /dev/null and b/public/assets/satker/satuan-kerja-polri.png differ
diff --git a/public/assets/satker/sespim-polri.png b/public/assets/satker/sespim-polri.png
new file mode 100644
index 00000000..a60b9583
Binary files /dev/null and b/public/assets/satker/sespim-polri.png differ
diff --git a/public/assets/satker/setum.png b/public/assets/satker/setum.png
new file mode 100644
index 00000000..72cf49fc
Binary files /dev/null and b/public/assets/satker/setum.png differ
diff --git a/public/assets/satker/setupa-polri.png b/public/assets/satker/setupa-polri.png
new file mode 100644
index 00000000..09c07531
Binary files /dev/null and b/public/assets/satker/setupa-polri.png differ
diff --git a/public/assets/satker/siber.png b/public/assets/satker/siber.png
new file mode 100644
index 00000000..f0292c22
Binary files /dev/null and b/public/assets/satker/siber.png differ
diff --git a/public/assets/satker/slog.png b/public/assets/satker/slog.png
new file mode 100644
index 00000000..83cd6db9
Binary files /dev/null and b/public/assets/satker/slog.png differ
diff --git a/public/assets/satker/sops.png b/public/assets/satker/sops.png
new file mode 100644
index 00000000..2f9b5f4a
Binary files /dev/null and b/public/assets/satker/sops.png differ
diff --git a/public/assets/satker/spripim.png b/public/assets/satker/spripim.png
new file mode 100644
index 00000000..4d511fe6
Binary files /dev/null and b/public/assets/satker/spripim.png differ
diff --git a/public/assets/satker/srena.png b/public/assets/satker/srena.png
new file mode 100644
index 00000000..406f3c3d
Binary files /dev/null and b/public/assets/satker/srena.png differ
diff --git a/public/assets/satker/ssdm.png b/public/assets/satker/ssdm.png
new file mode 100644
index 00000000..6ee36f02
Binary files /dev/null and b/public/assets/satker/ssdm.png differ
diff --git a/public/assets/satker/stik-ptik.png b/public/assets/satker/stik-ptik.png
new file mode 100644
index 00000000..93ce352b
Binary files /dev/null and b/public/assets/satker/stik-ptik.png differ