diff --git a/app/[locale]/(admin)/admin/categories/page.tsx b/app/[locale]/(admin)/admin/categories/page.tsx
index 5b4ae77..ca9262c 100644
--- a/app/[locale]/(admin)/admin/categories/page.tsx
+++ b/app/[locale]/(admin)/admin/categories/page.tsx
@@ -34,10 +34,10 @@ import { createCategories } from "@/service/categories/categories";
 
 const FormSchema = z.object({
   title: z.string().min(1, "Nama kategori wajib diisi"),
-  slug: z.string().min(1, "Slug wajib diisi"),
+  slug: z.string().optional(), 
   description: z.string().min(1, "Deskripsi wajib diisi"),
-  statusId: z.coerce.number().default(1), // biar default aktif
-  tags: z.string().optional(), // opsional aja kalau belum wajib
+  statusId: z.coerce.number().default(1), 
+  tags: z.string().optional(), 
 });
 
 // helper untuk bikin slug otomatis
@@ -64,22 +64,30 @@ const ReactTableImagePage = () => {
     },
   });
 
+  // const handleTitleChange = (value: string) => {
+  //   form.setValue("title", value);
+  //   const autoSlug = slugify(value);
+  //   if (
+  //     !form.getValues("slug") ||
+  //     form.getValues("slug") ===
+  //       slugify(form.formState.defaultValues?.title || "")
+  //   ) {
+  //     form.setValue("slug", autoSlug);
+  //   }
+  // };
   const handleTitleChange = (value: string) => {
     form.setValue("title", value);
-    const autoSlug = slugify(value);
-    if (
-      !form.getValues("slug") ||
-      form.getValues("slug") ===
-        slugify(form.formState.defaultValues?.title || "")
-    ) {
-      form.setValue("slug", autoSlug);
-    }
+    form.setValue("slug", slugify(value));
   };
 
   const onSubmit = async (data: z.infer<typeof FormSchema>) => {
     loading();
     try {
-      const response = await createCategories(data);
+      const payload = {
+        ...data,
+        slug: slugify(data.title),
+      };
+      const response = await createCategories(payload);
       MySwal.close();
 
       if (response?.error) {
@@ -87,8 +95,8 @@ const ReactTableImagePage = () => {
           typeof response.message === "string"
             ? response.message
             : Array.isArray(response.message)
-            ? response.message.join(", ")
-            : JSON.stringify(response.message);
+              ? response.message.join(", ")
+              : JSON.stringify(response.message);
 
         await MySwal.fire({
           icon: "error",
@@ -128,7 +136,7 @@ const ReactTableImagePage = () => {
 
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-default-50">
-      {/* <SiteBreadcrumb /> */}
+      <SiteBreadcrumb />
       <div className="p-6">
         <div className="max-w-7xl mx-auto">
           <Card className="shadow-sm border-0">
@@ -184,7 +192,7 @@ const ReactTableImagePage = () => {
                             />
 
                             {/* Slug */}
-                            <FormField
+                            {/* <FormField
                               control={form.control}
                               name="slug"
                               render={({ field }) => (
@@ -199,7 +207,7 @@ const ReactTableImagePage = () => {
                                   <FormMessage />
                                 </FormItem>
                               )}
-                            />
+                            /> */}
 
                             {/* Deskripsi */}
                             <FormField
diff --git a/app/[locale]/globals.css b/app/[locale]/globals.css
index 3732f90..e2eab49 100644
--- a/app/[locale]/globals.css
+++ b/app/[locale]/globals.css
@@ -1,6 +1,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@import "swiper/css";
+@import "swiper/css/navigation";
 
 /* ================================
    GLOBAL CSS VARIABLE (LIGHT MODE)
diff --git a/components/form/categories/categories-detail-form.tsx b/components/form/categories/categories-detail-form.tsx
index d9ef915..a549661 100644
--- a/components/form/categories/categories-detail-form.tsx
+++ b/components/form/categories/categories-detail-form.tsx
@@ -161,12 +161,12 @@ export default function CategoriesDetailForm() {
                   {formatDateToIndonesian(new Date(detail.createdAt))}
                 </p>
               </div>
-              <div>
+              {/* <div>
                 <Label>Updated At</Label>
                 <p className="text-sm">
                   {formatDateToIndonesian(new Date(detail.updatedAt))}
                 </p>
-              </div>
+              </div> */}
 
               {/* Back Button */}
               <Button
diff --git a/global.d.ts b/global.d.ts
new file mode 100644
index 0000000..3255cfe
--- /dev/null
+++ b/global.d.ts
@@ -0,0 +1 @@
+declare module '*.css';
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 9074ba0..5f9edcd 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,6 +22,6 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "global.d.ts"],
   "exclude": ["node_modules"]
 }