diff --git a/src/pages/homepage/index.tsx b/src/pages/homepage/index.tsx
index e11aa04..920a078 100644
--- a/src/pages/homepage/index.tsx
+++ b/src/pages/homepage/index.tsx
@@ -4,7 +4,7 @@ import {
   PiCheckCircleFill,
   PiWarningCircleFill,
   PiXCircleFill,
-  PiCalendarPlusFill
+  PiCalendarPlusFill,
 } from "react-icons/pi";
 import pelindoLogo from "@/assets/logos/Logo_Baru_Pelindo_(2021).png";
 import dephubLogo from "@/assets/logos/LOGO_KEMENTERIAN_PERHUBUNGAN_REPUBLIK_INDONESIA.png";
@@ -40,11 +40,16 @@ export function Index() {
   const [clock, setClock] = useState("00:00:00");
   const [date, setDate] = useState("");
   const [currentScheduleIndex, setCurrentScheduleIndex] = useState(0);
-  const [grouppedSchedules, setGrouppedSchedules] = useState<{
+  const [grouppedSchedules, setGrouppedSchedules] = useState<
+    {
       key: string;
       items: Schedule[];
-  }[][]>([]);
-  const [companyInfo, setCompanyInfo] = useState<Record<string, {logo_location: string | null}>>(importCompanyInfo);
+    }[][]
+  >([]);
+  const [companyInfo, setCompanyInfo] =
+    useState<Record<string, { logo_location: string | null }>>(
+      importCompanyInfo
+    );
 
   const [data, setData] = useState<{
     harbor: {
@@ -65,48 +70,75 @@ export function Index() {
   };
 
   const groupDepartureDatetimes = (data: Schedule[], chunkSize = 5) => {
-    const sortDates = data.sort((x, y) => dayjs(x.departure_datetime).unix() - dayjs(y.departure_datetime).unix())
+    const sortDates = data.sort(
+      (x, y) =>
+        dayjs(x.departure_datetime).unix() - dayjs(y.departure_datetime).unix()
+    );
     const scheduleChunks = chunkArray(sortDates, chunkSize);
     const tempResult = [];
 
     const todayDatetime = dayjs();
-    const tomorrowDatetime = dayjs().add(1, 'days');
+    const tomorrowDatetime = dayjs().add(1, "days");
 
-    for(const scheduleChunk of scheduleChunks){
-      const tempHolder: Record<string, Schedule[]> = {}
-      for(const schedule of scheduleChunk){
-        const parseDatetime = dayjs(schedule.departure_datetime).diff(dayjs(), 'days')
-        if(parseDatetime == 0){
-          if(!(`(Hari Ini) - ${todayDatetime.format("DD MMMM YYYY")}|1` in tempHolder))
-            tempHolder[`(Hari Ini) - ${todayDatetime.format("DD MMMM YYYY")}|1`] = [];
-          tempHolder[`(Hari Ini) - ${todayDatetime.format("DD MMMM YYYY")}|1`].push(schedule);
+    for (const scheduleChunk of scheduleChunks) {
+      const tempHolder: Record<string, Schedule[]> = {};
+      for (const schedule of scheduleChunk) {
+        const parseDatetime = dayjs(schedule.departure_datetime).diff(
+          dayjs(),
+          "days"
+        );
+        if (parseDatetime == 0) {
+          if (
+            !(
+              `(Hari Ini) - ${todayDatetime.format("DD MMMM YYYY")}|1` in
+              tempHolder
+            )
+          )
+            tempHolder[
+              `(Hari Ini) - ${todayDatetime.format("DD MMMM YYYY")}|1`
+            ] = [];
+          tempHolder[
+            `(Hari Ini) - ${todayDatetime.format("DD MMMM YYYY")}|1`
+          ].push(schedule);
         }
 
-        if(parseDatetime == 1){
-          if(!(`(Besok) - ${tomorrowDatetime.format("DD MMMM YYYY")}|2` in tempHolder))
-            tempHolder[`(Besok) - ${tomorrowDatetime.format("DD MMMM YYYY")}|2`] = [];
-          tempHolder[`(Besok) - ${tomorrowDatetime.format("DD MMMM YYYY")}|2`].push(schedule);
+        if (parseDatetime == 1) {
+          if (
+            !(
+              `(Besok) - ${tomorrowDatetime.format("DD MMMM YYYY")}|2` in
+              tempHolder
+            )
+          )
+            tempHolder[
+              `(Besok) - ${tomorrowDatetime.format("DD MMMM YYYY")}|2`
+            ] = [];
+          tempHolder[
+            `(Besok) - ${tomorrowDatetime.format("DD MMMM YYYY")}|2`
+          ].push(schedule);
         }
 
-        if(parseDatetime > 1){
-          if(!(`Mendatang|3` in tempHolder))
-            tempHolder[`Mendatang|3`] = [];
+        if (parseDatetime > 1) {
+          if (!(`Mendatang|3` in tempHolder)) tempHolder[`Mendatang|3`] = [];
           tempHolder[`Mendatang|3`].push(schedule);
         }
       }
-      tempResult.push(tempHolder)
+      tempResult.push(tempHolder);
     }
 
-
     const finaleResult = [];
-    
-    for(const groupped of tempResult){
+
+    for (const groupped of tempResult) {
       const temporaryFinale = [];
-      const sortItAgain = Object.keys(groupped).sort((idA, idB) => (( (idA.split("|")[1]! as unknown as number) > (idB.split("|")[1]! as unknown as number) ? 1 : -1)))
-      for(const key of sortItAgain){
-        temporaryFinale.push({key: key.split("|")[0], items: groupped[key]})
+      const sortItAgain = Object.keys(groupped).sort((idA, idB) =>
+        (idA.split("|")[1]! as unknown as number) >
+        (idB.split("|")[1]! as unknown as number)
+          ? 1
+          : -1
+      );
+      for (const key of sortItAgain) {
+        temporaryFinale.push({ key: key.split("|")[0], items: groupped[key] });
       }
-      finaleResult.push(temporaryFinale)
+      finaleResult.push(temporaryFinale);
     }
 
     return finaleResult;
@@ -140,196 +172,194 @@ export function Index() {
      */
     setInterval(() => {
       const _clock = dayjs().format("HH:mm:ss");
-      const _date = dayjs().format("DD MMMM YYYY");
+      const _date = dayjs().format("DD MMM YYYY");
       setClock(_clock);
       setDate(_date);
     }, 1000);
 
-    setGrouppedSchedules(groupDepartureDatetimes(data.schedules, 6));
+    setGrouppedSchedules(groupDepartureDatetimes(data.schedules, 5));
   }, []);
 
   useEffect(() => {
-    if(grouppedSchedules.length != 0){
+    if (grouppedSchedules.length != 0) {
       setInterval(() => {
-        setCurrentScheduleIndex(current => (current + 1) % grouppedSchedules.length)
+        setCurrentScheduleIndex(
+          (current) => (current + 1) % grouppedSchedules.length
+        );
       }, 10000);
     }
   }, [grouppedSchedules]);
 
   return (
-    <div className="h-screen" style={{ backgroundImage: `url(${bgImage})` }}>
-      <div className="p-4 grid grid-cols-12 gap-8" style={{height: "85%"}}>
-        <div className="col-span-8">
-          <div className="flex flex-col bg-white border shadow-sm rounded-xl p-4 md:p-5 h-full">
-            <h3 className="text-4xl font-bold text-gray-800 text-center">
-              KEBERANGKATAN
-            </h3>
-
-            <div className="mt-10">
-              <table className="min-w-full max-w-full divide-y divide-gray-200 overflow-y-scroll">
-                <thead>
-                  <tr>
-                    <th
-                      scope="col"
-                      className="text-center text-xl font-bold uppercase w-2/5"
-                    >
-                      Kapal
-                    </th>
-                    <th
-                      scope="col"
-                      className="text-center text-xl font-bold uppercase w-1/5"
-                    >
-                      Tujuan
-                    </th>
-                    <th
-                      scope="col"
-                      className="text-center text-xl font-bold uppercase"
-                      style={{ width: "20%" }}
-                    >
-                      Wkt. Keberangkatan
-                    </th>
-                    <th
-                      scope="col"
-                      className="text-center text-xl font-bold uppercase w-1/4"
-                    >
-                      Status
-                    </th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-gray-200">
-                  {
-                    grouppedSchedules[currentScheduleIndex] != undefined && grouppedSchedules[currentScheduleIndex].map((x, i) => <>
-                      <tr key={i}>
-                        <td colSpan={4} className="text-center py-4">
-                          <div className="flex gap-2 justify-center">
-                            <PiCalendarDotsBold size={28} />
-                            <span className="text-lg font-bold">
-                              {x.key}
-                            </span>
-                          </div>
-                        </td>
-                      </tr>
-                      {
-                        x.items.map((y, j) => <tr key={j}>
-                          <td className="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-800 odd:bg-white even:bg-gray-100">
-                            <div className="flex flex-row items-center gap-4">
-                              <div>
-                                <CompanyLogo location={companyInfo[y.company_code].logo_location}  width={64} />
-                              </div>
-                              <div>
-                                <h4 className="text-xl font-bold">
-                                  {y.ship_name}
-                                </h4>
-                                <h5 className="text-lg">{y.dock_name}</h5>
-                              </div>
-                            </div>
-                          </td>
-                          <td className="px-4 py-2 whitespace-nowrap text-sm text-gray-800">
-                            <h3 className="text-xl font-medium text-center">
-                              {y.destination}
-                            </h3>
-                          </td>
-                          <td className="px-4 py-2 whitespace-nowrap text-sm text-gray-800">
-                            {
-                              x.key == "Mendatang" && <h3 className="text-xl font-medium text-center">
-                                {dayjs(y.departure_datetime).format("DD-MMM-YYYY")}
-                              </h3>
-                            }
-                            <h3 className="text-xl font-medium text-center">
-                              {dayjs(y.departure_datetime).format("HH:mm")} {timezone}
-                            </h3>
-                          </td>
-                          <td className="px-4 py-2 text-sm font-medium">
-                            <div className="flex flex-row items-center gap-2">
-                              {
-                                y.status == ScheduleStatus.NOT_AVAILABLE && <>
-                                  <PiXCircleFill size={32} className="text-red-500" />
-                                  <h3 className="text-xl">Belum tersedia</h3>
-                                </>
-                              }
-                              {
-                                y.status == ScheduleStatus.SCHEDULED && <>
-                                  <PiCalendarPlusFill size={32} className="text-yellow-500" />
-                                  <h3 className="text-xl">Dijadwalkan</h3>
-                                </>
-                              }
-                              {
-                                y.status == ScheduleStatus.AVAILABLE && <>
-                                  <PiCheckCircleFill size={32} className="text-green-700" />
-                                  <h3 className="text-xl">Tersedia</h3>
-                                </>
-                              }
-                              {
-                                y.status == ScheduleStatus.PREPARE_TO_DEPART && <>
-                                  <PiWarningCircleFill size={32} className="text-yellow-500" />
-                                  <h3 className="text-xl">Bersiap Berangkat</h3>
-                                </>
-                              }
-                              {
-                                y.status == ScheduleStatus.CANCELED && <>
-                                  <PiXCircleFill size={32} className="text-red-500" />
-                                  <h3 className="text-xl">Dibatalkan</h3>
-                                </>
-                              }
-                            </div>
-                          </td>
-                        </tr>)
-                      }
-                    </>)
-                  }
-                </tbody>
-              </table>
+    <>
+      <div className="h-screen pl-4 pr-4 pt-4">
+        <div className="grid grid-cols-12 items-center">
+          <div className="col-span-4">
+            <div className="flex items-center">
+              <img src={ferinesiaLogo} className="max-h-12" />
+              <h3 className="ml-2 text-6xl font-bold text-[#117AD1]">
+                FERI<span className="text-[#FFCE46]">NESIA</span>
+              </h3>
             </div>
           </div>
+          <div className="col-span-4">
+            <h3 className="text-5xl font-bold text-center text-[#2F95FA]">
+              PELABUHAN BASTIONG
+            </h3>
+          </div>
+          <div className="col-span-4">
+            <h3 className="text-3xl font-bold text-right">
+              {date} {clock} {timezone}
+            </h3>
+          </div>
         </div>
-        <div className="col-span-4">
-          <div className="flex flex-col bg-white border shadow-sm rounded-xl p-4 md:p-5 h-full">
-            <h3 className="text-3xl font-bold text-gray-800 text-center">
-              {data.harbor.name}
-            </h3>
-            <h3 className="text-xl font-bold text-gray-800 text-center">
-              {data.harbor.address}
-            </h3>
+        <div className="grid grid-cols-12 gap-8 mt-8" style={{ height: "80%" }}>
+          <div className="col-span-12">
+            <div className="flex flex-col bg-white border shadow-sm rounded-xl p-4 md:p-5 h-full">
+              <h3 className="text-4xl font-bold text-gray-800 text-center underline">
+                KEBERANGKATAN
+              </h3>
 
-            <div className="mt-12">
-              <div className="flex flex-col items-center gap-1">
-                <PiClock size={64} />
-                <h3 className="text-3xl font-semibold">{date}</h3>
-                <h3 className="text-3xl font-semibold">
-                  {clock} {timezone}
-                </h3>
-              </div>
-              {/* <div className="flex flex-col items-center gap-1 mt-6">
-                <WiNightAltRainMix size={64} />
-                <h3 className="text-3xl font-semibold">
-                  Hujan Cerah, 30&deg;C
-                </h3>
-              </div> */}
-            </div>
-
-            <div className="mt-12">
-              <div className="w-full">
-                <video className="w-full h-80 border rounded-lg" loop={true} autoPlay={true} controls={true}>
-                  <source src={data.embed_link[0]} type="video/mp4" />
-                Your browser does not support the video tag.
-                </video>
-              </div>
-            </div>
-
-            <div className="mt-12">
-              <div className="flex flex-row gap-3 items-center justify-center">
-                <img src={dephubLogo} className="h-10" />
-                <img src={pelindoLogo} className="max-h-7" />
-                <img src={ferinesiaLogo} className="max-h-7" />
-                <h4 className="text-md">didukung oleh Ferinesia</h4>
+              <div className="mt-8">
+                <table className="min-w-full max-w-full divide-y divide-gray-200 overflow-y-scroll">
+                  <thead>
+                    <tr>
+                      <th
+                        scope="col"
+                        className="text-center text-4xl uppercase"
+                        style={{ width: "10%", letterSpacing: "3px" }}
+                      >
+                        JAM
+                      </th>
+                      <th
+                        scope="col"
+                        className="text-center text-4xl font-bold uppercase w-2/5"
+                        style={{letterSpacing: "3px"}}
+                      >
+                        KAPAL
+                      </th>
+                      <th
+                        scope="col"
+                        className="text-center text-4xl font-bold uppercase w-1/5"
+                        style={{letterSpacing: "3px"}}
+                      >
+                        TUJUAN
+                      </th>
+                      <th
+                        scope="col"
+                        className="text-center text-4xl font-bold uppercase w-1/4"
+                        style={{letterSpacing: "3px"}}
+                      >
+                        STATUS
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-gray-200">
+                    {grouppedSchedules[currentScheduleIndex] != undefined &&
+                      grouppedSchedules[currentScheduleIndex].map((x, i) => (
+                        <>
+                          <tr key={i}>
+                            <td colSpan={4} className="text-center py-4">
+                              <div className="flex gap-2 justify-center">
+                                <PiCalendarDotsBold size={38} />
+                                <span className="text-3xl font-bold uppercase">
+                                  {x.key}
+                                </span>
+                              </div>
+                            </td>
+                          </tr>
+                          {x.items.map((y, j) => (
+                            <tr key={j} className="odd:bg-[#598eee] even:bg-[#dde8fc] odd:text-[#ffffff] even:text-[#0f79cf]">
+                              <td className="px-4 py-2 whitespace-nowrap text-sm ">
+                                <h3 className="text-4xl font-bold text-center uppercase">
+                                  {x.key == "Mendatang" ? dayjs(y.departure_datetime).format("DD-MMM-YYYY") : dayjs(y.departure_datetime).format("HH:mm ") + timezone}
+                                  
+                                </h3>
+                              </td>
+                              <td className="px-4 py-2 whitespace-nowrap text-sm font-medium ">
+                                <div className="flex flex-row items-center gap-4">
+                                  <div>
+                                    <CompanyLogo
+                                      location={
+                                        companyInfo[y.company_code]
+                                          .logo_location
+                                      }
+                                      width={72}
+                                    />
+                                  </div>
+                                  <div>
+                                    <h4 className="text-4xl font-medium uppercase">
+                                      {y.ship_name}
+                                    </h4>
+                                  </div>
+                                </div>
+                              </td>
+                              <td className="px-4 py-2 whitespace-nowrap text-sm ">
+                                <h3 className="text-4xl font-medium text-center uppercase">
+                                  {y.destination}
+                                </h3>
+                              </td>
+                              <td className="px-4 py-2 font-medium">
+                                <div className="flex flex-row items-center gap-2 uppercase">
+                                  {y.status == ScheduleStatus.NOT_AVAILABLE && (
+                                    <>
+                                      <PiXCircleFill
+                                        size={50}
+                                      />
+                                      <h3 className="text-4xl">
+                                        Belum tersedia
+                                      </h3>
+                                    </>
+                                  )}
+                                  {y.status == ScheduleStatus.SCHEDULED && (
+                                    <>
+                                      <PiCalendarPlusFill
+                                        size={50}
+                                      />
+                                      <h3 className="text-4xl">Dijadwalkan</h3>
+                                    </>
+                                  )}
+                                  {y.status == ScheduleStatus.AVAILABLE && (
+                                    <>
+                                      <PiCheckCircleFill
+                                        size={50}
+                                      />
+                                      <h3 className="text-4xl">Tersedia</h3>
+                                    </>
+                                  )}
+                                  {y.status ==
+                                    ScheduleStatus.PREPARE_TO_DEPART && (
+                                    <>
+                                      <PiWarningCircleFill
+                                        size={50}
+                                      />
+                                      <h3 className="text-4xl">
+                                        Bersiap Berangkat
+                                      </h3>
+                                    </>
+                                  )}
+                                  {y.status == ScheduleStatus.CANCELED && (
+                                    <>
+                                      <PiXCircleFill
+                                        size={50}
+                                      />
+                                      <h3 className="text-4xl">Dibatalkan</h3>
+                                    </>
+                                  )}
+                                </div>
+                              </td>
+                            </tr>
+                          ))}
+                        </>
+                      ))}
+                  </tbody>
+                </table>
               </div>
             </div>
           </div>
         </div>
-      </div>
 
-
-      <div className="fixed bottom-10 p-4">
+        <div className="fixed bottom-5">
           <div className="border-2 rounded-md mt-4 h-12 flex">
             <div className="bg-blue-400 h-full items-center justify-center flex w-40">
               <h3 className="text-xl text-center text-white">INFORMASI</h3>
@@ -343,6 +373,7 @@ export function Index() {
             </div>
           </div>
         </div>
-    </div>
+      </div>
+    </>
   );
 }