diff --git a/components/form/article/edit-article-form.tsx b/components/form/article/edit-article-form.tsx
index 927c880..09bc944 100644
--- a/components/form/article/edit-article-form.tsx
+++ b/components/form/article/edit-article-form.tsx
@@ -24,6 +24,7 @@ import {
   getArticleByCategory,
   getArticleById,
   submitApproval,
+  unPublishArticle,
   updateArticle,
   uploadArticleFile,
   uploadArticleThumbnail,
@@ -443,7 +444,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
     }
 
     close();
-    successSubmit("/admin/article");
+    successSubmitData();
   };
 
   function successSubmit(redirect: string) {
@@ -459,6 +460,51 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
     });
   }
 
+  function successSubmitData() {
+    MySwal.fire({
+      title: "Berhasil disimpan!",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    });
+  }
+
+  const doUnpublish = async () => {
+    MySwal.fire({
+      title: "Unpublish Artikel?",
+      text: "Artikel akan dihapus dari publik dan tidak tampil lagi.",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Ya, Unpublish",
+    }).then(async (result) => {
+      if (result.isConfirmed) {
+        loading();
+        const response = await unPublishArticle(String(id), {
+          id: Number(id),
+          isPublish: false,
+          title: detailData?.title,
+          typeId: 1,
+          slug: detailData?.slug,
+          categoryIds: getValues("category")
+            .map((val) => val.id)
+            .join(","),
+          tags: getValues("tags").join(","),
+          description: htmlToString(getValues("description")),
+          htmlDescription: getValues("description"),
+        });
+
+        if (response?.error) {
+          error(response.message);
+          return;
+        }
+
+        successSubmit("/admin/article");
+      }
+    });
+  };
+
   const watchTitle = watch("title");
   const generateSlug = (title: string) => {
     return title
@@ -1186,6 +1232,15 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
             </Button>
           )} */}
 
+          <Button
+            className="bg-red-500 text-white"
+            variant="outline"
+            type="button"
+            onClick={doUnpublish}
+          >
+            Unpublish
+          </Button>
+
           <Link href="/admin/article">
             <Button color="danger" variant="outline" type="button">
               Kembali
diff --git a/components/table/article-table.tsx b/components/table/article-table.tsx
index 5620c54..d1a732c 100644
--- a/components/table/article-table.tsx
+++ b/components/table/article-table.tsx
@@ -65,7 +65,7 @@ const columnsOtherRole = [
   { name: "Kategori", uid: "category" },
   { name: "Tanggal Unggah", uid: "createdAt" },
   { name: "Kreator", uid: "customCreatorName" },
-  { name: "Status", uid: "isPublish" },
+  { name: "Status", uid: "publishStatus" },
   { name: "Aksi", uid: "actions" },
 ];
 
@@ -227,7 +227,7 @@ export default function ArticleTable() {
                 : article.createdByName}
             </p>
           );
-        case "isPublish":
+        case "publishStatus":
           return (
             // <Chip
             //   className="capitalize "
@@ -239,7 +239,7 @@ export default function ArticleTable() {
             //     {article.status}
             //   </div>
             // </Chip>
-            <p>{article.isPublish ? "Publish" : "Draft"}</p>
+            <p>{article.publishStatus}</p>
           );
         case "isBanner":
           return <p>{article.isBanner ? "Ya" : "Tidak"}</p>;
diff --git a/service/article.ts b/service/article.ts
index 5682e6f..569cef0 100644
--- a/service/article.ts
+++ b/service/article.ts
@@ -94,6 +94,11 @@ export async function updateArticle(id: string, data: any) {
   return await httpPutInterceptor(pathUrl, data);
 }
 
+export async function unPublishArticle(id: string, data: any) {
+  const pathUrl = `/articles/${id}/unpublish`;
+  return await httpPutInterceptor(pathUrl, data);
+}
+
 export async function getArticleById(id: any) {
   const headers = {
     "content-type": "application/json",