diff --git a/app/[locale]/(admin)/admin/content/audio/components/columns.tsx b/app/[locale]/(admin)/admin/content/audio/components/columns.tsx
index 212a80a..78b4b9b 100644
--- a/app/[locale]/(admin)/admin/content/audio/components/columns.tsx
+++ b/app/[locale]/(admin)/admin/content/audio/components/columns.tsx
@@ -13,7 +13,7 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { format } from "date-fns";
 import withReactContent from "sweetalert2-react-content";
-import { deleteMedia } from "@/service/content/content";
+import { deleteArticle, deleteMedia } from "@/service/content/content";
 import { error } from "@/lib/swal";
 import Swal from "sweetalert2";
 import Link from "next/link";
@@ -55,12 +55,10 @@ const useTableColumns = () => {
         const categoryName = row.getValue("categoryName");
         const categories = row.original.categories;
         // Handle new API structure with categories array
-        const displayName = categoryName || (categories && categories.length > 0 ? categories[0].title : "-");
-        return (
-          <span className="whitespace-nowrap">
-            {displayName}
-          </span>
-        );
+        const displayName =
+          categoryName ||
+          (categories && categories.length > 0 ? categories[0].title : "-");
+        return <span className="whitespace-nowrap">{displayName}</span>;
       },
     },
     {
@@ -190,13 +188,8 @@ const useTableColumns = () => {
         const MySwal = withReactContent(Swal);
 
         async function doDelete(id: any) {
-          // loading();
-          const data = {
-            id,
-          };
-
-          const response = await deleteMedia(data);
-
+          const data = { id };
+          const response = await deleteArticle(id);
           if (response?.error) {
             error(response.message);
             return false;
@@ -220,7 +213,6 @@ const useTableColumns = () => {
         const handleDeleteMedia = (id: any) => {
           MySwal.fire({
             title: "Hapus Data",
-            text: "",
             icon: "warning",
             showCancelButton: true,
             cancelButtonColor: "#3085d6",
@@ -232,7 +224,6 @@ const useTableColumns = () => {
             }
           });
         };
-
         const [isMabesApprover, setIsMabesApprover] = React.useState(false);
         const userId = getCookiesDecrypt("uie");
         const userLevelId = getCookiesDecrypt("ulie");
diff --git a/app/[locale]/(admin)/admin/content/audio/create/page.tsx b/app/[locale]/(admin)/admin/content/audio/create/page.tsx
index b78476f..dbbdd08 100644
--- a/app/[locale]/(admin)/admin/content/audio/create/page.tsx
+++ b/app/[locale]/(admin)/admin/content/audio/create/page.tsx
@@ -3,7 +3,7 @@ import FormAudio from "@/components/form/content/audio/audio-form";
 const AudioCreatePage = async () => {
   return (
     <div>
-      <div className="space-y-4">
+      <div className="space-y-4 bg-slate-100">
         <FormAudio />
       </div>
     </div>
diff --git a/app/[locale]/(admin)/admin/content/text/components/columns.tsx b/app/[locale]/(admin)/admin/content/text/components/columns.tsx
index 6f6aaf8..5ea035b 100644
--- a/app/[locale]/(admin)/admin/content/text/components/columns.tsx
+++ b/app/[locale]/(admin)/admin/content/text/components/columns.tsx
@@ -13,7 +13,7 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { format } from "date-fns";
 import { error } from "@/lib/swal";
-import { deleteMedia } from "@/service/content/content";
+import { deleteArticle, deleteMedia } from "@/service/content/content";
 import withReactContent from "sweetalert2-react-content";
 import Swal from "sweetalert2";
 import Link from "next/link";
@@ -55,12 +55,10 @@ const useTableColumns = () => {
         const categoryName = row.getValue("categoryName");
         const categories = row.original.categories;
         // Handle new API structure with categories array
-        const displayName = categoryName || (categories && categories.length > 0 ? categories[0].title : "-");
-        return (
-          <span className="whitespace-nowrap">
-            {displayName}
-          </span>
-        );
+        const displayName =
+          categoryName ||
+          (categories && categories.length > 0 ? categories[0].title : "-");
+        return <span className="whitespace-nowrap">{displayName}</span>;
       },
     },
     {
@@ -191,13 +189,8 @@ const useTableColumns = () => {
         const MySwal = withReactContent(Swal);
 
         async function doDelete(id: any) {
-          // loading();
-          const data = {
-            id,
-          };
-
-          const response = await deleteMedia(data);
-
+          const data = { id };
+          const response = await deleteArticle(id);
           if (response?.error) {
             error(response.message);
             return false;
@@ -221,7 +214,6 @@ const useTableColumns = () => {
         const handleDeleteMedia = (id: any) => {
           MySwal.fire({
             title: "Hapus Data",
-            text: "",
             icon: "warning",
             showCancelButton: true,
             cancelButtonColor: "#3085d6",
@@ -233,7 +225,6 @@ const useTableColumns = () => {
             }
           });
         };
-
         const [isMabesApprover, setIsMabesApprover] = React.useState(false);
         const userId = getCookiesDecrypt("uie");
         const userLevelId = getCookiesDecrypt("ulie");
@@ -267,9 +258,7 @@ const useTableColumns = () => {
               </Link>
               {(Number(row.original.uploadedById) === Number(userId) ||
                 isMabesApprover) && (
-                <Link
-                  href={`/admin/content/text/update/${row.original.id}`}
-                >
+                <Link href={`/admin/content/text/update/${row.original.id}`}>
                   <DropdownMenuItem className="p-2 border-b text-default-700 group  rounded-none">
                     <SquarePen className="w-4 h-4 me-1.5" />
                     Edit
diff --git a/app/[locale]/(admin)/admin/content/video/components/columns.tsx b/app/[locale]/(admin)/admin/content/video/components/columns.tsx
index a036519..9a419eb 100644
--- a/app/[locale]/(admin)/admin/content/video/components/columns.tsx
+++ b/app/[locale]/(admin)/admin/content/video/components/columns.tsx
@@ -215,7 +215,6 @@ const useTableColumns = () => {
         const handleDeleteMedia = (id: any) => {
           MySwal.fire({
             title: "Hapus Data",
-            text: "",
             icon: "warning",
             showCancelButton: true,
             cancelButtonColor: "#3085d6",
@@ -227,7 +226,6 @@ const useTableColumns = () => {
             }
           });
         };
-
         const [isMabesApprover, setIsMabesApprover] = React.useState(false);
         const userId = getCookiesDecrypt("uie");
         const userLevelId = getCookiesDecrypt("ulie");
@@ -253,9 +251,7 @@ const useTableColumns = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="p-0" align="end">
-              <Link
-                href={`/admin/content/video/detail/${row.original.id}`}
-              >
+              <Link href={`/admin/content/video/detail/${row.original.id}`}>
                 <DropdownMenuItem className="p-2 border-b text-default-700 group  rounded-none">
                   <Eye className="w-4 h-4 me-1.5" />
                   View
@@ -271,14 +267,12 @@ const useTableColumns = () => {
               </Link> */}
               {/* {(Number(row.original.uploadedById) === Number(userId) ||
                 isMabesApprover) && ( */}
-                <Link
-                  href={`/admin/content/video/update/${row.original.id}`}
-                >
-                  <DropdownMenuItem className="p-2 border-b text-default-700 group  rounded-none">
-                    <SquarePen className="w-4 h-4 me-1.5" />
-                    Edit
-                  </DropdownMenuItem>
-                </Link>
+              <Link href={`/admin/content/video/update/${row.original.id}`}>
+                <DropdownMenuItem className="p-2 border-b text-default-700 group  rounded-none">
+                  <SquarePen className="w-4 h-4 me-1.5" />
+                  Edit
+                </DropdownMenuItem>
+              </Link>
               {/* )} */}
               <DropdownMenuItem
                 onClick={() => handleDeleteMedia(row.original.id)}
diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index 2547d24..2e7cd5f 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -8,7 +8,7 @@ export default function Home() {
   return (
     <div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
       <div className="relative z-10 bg-white w-full mx-auto">
-        {/* <Navbar /> */}
+        <Navbar />
         <div className="flex-1">
           <Header />
         </div>
diff --git a/components/form/content/audio/audio-form.tsx b/components/form/content/audio/audio-form.tsx
index b8574c2..9e1639d 100644
--- a/components/form/content/audio/audio-form.tsx
+++ b/components/form/content/audio/audio-form.tsx
@@ -783,7 +783,6 @@ export default function FormAudio() {
 
     const resCsrf = await getCsrfToken();
     const csrfToken = resCsrf?.data?.token;
-    console.log("CSRF TOKEN : ", csrfToken);
     const headers = {
       "X-XSRF-TOKEN": csrfToken,
     };
@@ -986,8 +985,8 @@ export default function FormAudio() {
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      <div className="flex flex-col lg:flex-row gap-10">
-        <Card className="w-full lg:w-8/12">
+      <div className="flex flex-col lg:flex-row gap-10 border rounded-lg">
+        <Card className="w-full lg:w-8/12 m-2">
           <div className="px-6 py-6">
             <p className="text-lg font-semibold mb-3">Form Audio</p>
             <div className="gap-5 mb-5">
@@ -1464,7 +1463,7 @@ export default function FormAudio() {
             </div>
           </div>
         </Card>
-        <div className="w-full lg:w-4/12">
+        <div className="w-full lg:w-4/12 m-2">
           <Card className="pb-3">
             <div className="px-3 py-3">
               <div className="space-y-2">
@@ -1597,6 +1596,7 @@ export default function FormAudio() {
                             id={option.id}
                             checked={isChecked}
                             onCheckedChange={handleChange}
+                            className="border"
                           />
                           <Label htmlFor={option.id}>{option.label}</Label>
                         </div>