diff --git a/website/src/App.tsx b/website/src/App.tsx
index 1dcf224..d3cf3c2 100644
--- a/website/src/App.tsx
+++ b/website/src/App.tsx
@@ -96,6 +96,8 @@ export default function (props: JSX.HTMLAttributes<HTMLDivElement>) {
         rentang_suhu,
       })
       .eq("id", lastHistori()?.id);
+
+    await getLastHistori();
   };
 
   // const noSaveHistori = async () => {
diff --git a/website/src/icons/RefreshIcon.tsx b/website/src/icons/RefreshIcon.tsx
new file mode 100644
index 0000000..2a8ba3c
--- /dev/null
+++ b/website/src/icons/RefreshIcon.tsx
@@ -0,0 +1,21 @@
+import IconProps from "./type";
+
+export default function (props: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="w-6 h-6"
+      {...props}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
+      />
+    </svg>
+  );
+}
diff --git a/website/src/icons/TrashIcon.tsx b/website/src/icons/TrashIcon.tsx
new file mode 100644
index 0000000..dda590c
--- /dev/null
+++ b/website/src/icons/TrashIcon.tsx
@@ -0,0 +1,21 @@
+import IconProps from "./type";
+
+export default function (props: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="w-6 h-6"
+      {...props}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+      />
+    </svg>
+  );
+}
diff --git a/website/src/pages/Histori.tsx b/website/src/pages/Histori.tsx
index 587d37f..85e0d95 100644
--- a/website/src/pages/Histori.tsx
+++ b/website/src/pages/Histori.tsx
@@ -3,9 +3,14 @@ import Table from "../components/Table";
 import { Histori } from "../types/Histori";
 import supabase from "../utils/supabase";
 import { getDates } from "../utils/dates";
+import TrashIcon from "../icons/TrashIcon";
+import { KondisiTapai } from "../types/KondisiTapai";
+import RefreshIcon from "../icons/RefreshIcon";
 
 export default function () {
   const [items, setItems] = createSignal<Histori[]>([]);
+  const [dataPengujianAwal, setDataPengujianAwal] =
+    createSignal<KondisiTapai>();
 
   const getData = async () => {
     const { data } = await supabase
@@ -14,9 +19,25 @@ export default function () {
       .order("created_at", { ascending: false })
       .range(0, 10);
 
+    const { data: kondisi_tapai } = await supabase
+      .from("kondisi_tapai")
+      .select("created_time")
+      .order("created_time", { ascending: true })
+      .limit(1);
+
+    setDataPengujianAwal(kondisi_tapai![0] as KondisiTapai);
     setItems(data as Histori[]);
   };
 
+  const deleteHistory = async (id: any) => {
+    const isOk = confirm("Anda yakin menghapus history?");
+
+    if (isOk) {
+      await supabase.from("histori_fermentasi").delete().eq("id", id);
+      await getData();
+    }
+  };
+
   onMount(async () => {
     await getData();
   });
@@ -28,8 +49,18 @@ export default function () {
         <p class="text-sm">
           Menampilkan hasil fermentasi yang telah dilakukan.
         </p>
+        <div class="flex space-x-3 text-sm items-center mt-5">
+          <RefreshIcon class="text-blue-500 w-6 h-6 animate-spin" />{" "}
+          <div>: Proses sedang berlangsung</div>
+        </div>
         <Table
-          headers={["Tanggal", "Lama Fermentasi", "Rentang Suhu (C)", "Status"]}
+          headers={[
+            "Tanggal",
+            "Lama Fermentasi",
+            "Rentang Suhu (C)",
+            "Status",
+            "Opsi",
+          ]}
           items={items().map((item) => [
             getDates(item.created_at),
             Math.round((item.waktu_akhir - item.waktu_awal) / 3600) + " Jam",
@@ -42,6 +73,18 @@ export default function () {
             >
               {item.berhasil ? "SUKSES" : "GAGAL"}
             </span>,
+            !!dataPengujianAwal() &&
+            dataPengujianAwal()!.created_time <= item.waktu_akhir ? (
+              <RefreshIcon class="text-blue-500 w-6 h-6 animate-spin" />
+            ) : (
+              <button
+                type="button"
+                class="text-orange-500"
+                onClick={() => deleteHistory(item.id)}
+              >
+                <TrashIcon />
+              </button>
+            ),
           ])}
           class="my-5"
         ></Table>