diff --git a/app/(admin)/admin/(basic-form)/form-costum/page.tsx b/app/(admin)/admin/(basic-form)/form-costum/page.tsx
deleted file mode 100644
index 224d54c..0000000
--- a/app/(admin)/admin/(basic-form)/form-costum/page.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-"use client"
-import { Image } from "@nextui-org/react";
-
-export default function CustumPage() {
-	return (
-		<div className="flex h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-small ml-4">
-			<div className="px-4">
-				<div className="bg-blue-900 mx-[24px] h-[120px] my-5 rounded-md">
-					<div>
-
-						<div className="flex flex-row justify-between items-center">
-							<div>
-								<p className="text-2xl font-semibold ml-5 ">Custum Form</p>
-								<p className="text-gray-300 ml-5">custom designed elemnt</p>
-							</div>
-							<div className="pr-5">
-								<Image
-									width={110}
-									alt="NextUI hero Image"
-									src="https://modernize-nextjs-dark.vercel.app/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FChatBc.3d875e2e.png&w=256&q=75"
-								/>
-							</div>
-						</div>
-					</div>
-				</div >
-				{/* <CreateCustomForm /> */}
-			</div>
-		</div>
-	);
-}
diff --git a/app/(admin)/admin/(basic-form)/form-horizontal/page.tsx b/app/(admin)/admin/(basic-form)/form-horizontal/page.tsx
deleted file mode 100644
index 63b5dc8..0000000
--- a/app/(admin)/admin/(basic-form)/form-horizontal/page.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-"use client"
-import CreateCustomForm from "@/components/form/form-costum/custom-form";
-import CreateHorizontalForm from "@/components/form/form-horizontal/custom-form";
-import CreateWizardForm from "@/components/form/form-wizard/wizard-form";
-import AuthtorsTable from "@/components/table/authors-table";
-import CustomerTable from "@/components/table/customers-table";
-import InvoiceTable from "@/components/table/invoice-table";
-import UserTable from "@/components/table/article-table";
-import UsersTable from "@/components/table/users-table";
-import { Card, Divider, Image } from "@nextui-org/react";
-
-export default function HorizontalPage() {
-	return (
-		<div className="flex h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-small ml-4">
-			<div className="px-4">
-				<div className="bg-blue-900 h-[120px] my-5 rounded-md mx-[24px]">
-					<div>
-
-						<div className="flex flex-row justify-between items-center">
-							<div>
-								<p className="text-2xl font-semibold ml-5 ">Horizontal Form</p>
-								<p className="text-gray-500 ml-5">Home<span className="text-black">{"  >  "}</span> <span className=" text-white">Horizontal Form</span></p>
-							</div>
-							<div className="pr-5">
-								<Image
-									width={110}
-									alt="NextUI hero Image"
-									src="https://modernize-nextjs-dark.vercel.app/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FChatBc.3d875e2e.png&w=256&q=75"
-								/>
-							</div>
-						</div>
-					</div>
-				</div >
-				<CreateHorizontalForm />
-			</div>
-		</div>
-	);
-}
diff --git a/app/(admin)/admin/(basic-form)/form-layout/page.tsx b/app/(admin)/admin/(basic-form)/form-layout/page.tsx
deleted file mode 100644
index 74c70ca..0000000
--- a/app/(admin)/admin/(basic-form)/form-layout/page.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-"use client"
-
-import CreateLayoutForm from "@/components/form/form-layout/layout-form";
-import CreateValidationForm from "@/components/form/form-validation/validation-form";
-import CreateWizardForm from "@/components/form/form-wizard/wizard-form";
-import AuthtorsTable from "@/components/table/authors-table";
-import CustomerTable from "@/components/table/customers-table";
-import InvoiceTable from "@/components/table/invoice-table";
-import UserTable from "@/components/table/article-table";
-import UsersTable from "@/components/table/users-table";
-import { Card, Divider, Image } from "@nextui-org/react";
-import { useEffect, useState } from "react";
-
-export default function FormLayoutPage() {
-
-	return (
-		<div className="flex h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-small ml-4">
-			<div className="px-4">
-				<div className="bg-blue-900 mx-[24px] h-[120px] my-5 rounded-md">
-					<div>
-						<div className="flex flex-row justify-between items-center">
-							<div>
-								<p className="text-2xl font-semibold ml-5 text-white">Form Layout</p>
-								<p className="text-white ml-5">Home<span className="text-white">{"  >  "}</span> <span className=" text-white">Form Layout</span></p>
-							</div>
-							<div className="pr-5">
-								<Image
-									width={110}
-									alt="NextUI hero Image"
-									src="https://modernize-nextjs-dark.vercel.app/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FChatBc.3d875e2e.png&w=256&q=75"
-								/>
-							</div>
-						</div>
-					</div>
-				</div >
-				<CreateLayoutForm />
-			</div>
-		</div>
-	);
-}
diff --git a/app/(admin)/admin/(basic-form)/form-validation/page.tsx b/app/(admin)/admin/(basic-form)/form-validation/page.tsx
deleted file mode 100644
index 8480b7e..0000000
--- a/app/(admin)/admin/(basic-form)/form-validation/page.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-"use client"
-import CreateValidationForm from "@/components/form/form-validation/validation-form";
-import CreateWizardForm from "@/components/form/form-wizard/wizard-form";
-import AuthtorsTable from "@/components/table/authors-table";
-import CustomerTable from "@/components/table/customers-table";
-import InvoiceTable from "@/components/table/invoice-table";
-import UserTable from "@/components/table/article-table";
-import UsersTable from "@/components/table/users-table";
-import { Card, Divider, Image } from "@nextui-org/react";
-
-export default function ValidationPage() {
-	return (
-		<div className="flex h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-small ml-4">
-			<div className="px-4">
-				<div className="bg-blue-900 mx-[24px] h-[120px] my-5 rounded-md">
-					<div>
-
-						<div className="flex flex-row justify-between items-center">
-							<div>
-								<p className="text-2xl font-semibold ml-5 ">Form Validation</p>
-								<p className="text-gray-500 ml-5">Home<span className="text-black">{"  >  "}</span> <span className=" text-white">Form Validation</span></p>
-							</div>
-							<div className="pr-5">
-								<Image
-									width={110}
-									alt="NextUI hero Image"
-									src="https://modernize-nextjs-dark.vercel.app/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FChatBc.3d875e2e.png&w=256&q=75"
-								/>
-							</div>
-						</div>
-					</div>
-				</div >
-				<CreateValidationForm />
-			</div>
-		</div>
-	);
-}
diff --git a/app/(admin)/admin/(basic-form)/form-vertical/page.tsx b/app/(admin)/admin/(basic-form)/form-vertical/page.tsx
deleted file mode 100644
index 1667561..0000000
--- a/app/(admin)/admin/(basic-form)/form-vertical/page.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-"use client"
-import CreateValidationForm from "@/components/form/form-validation/validation-form";
-import CreateVerticalForm from "@/components/form/form-vertical/vertical-form";
-import { Card, Divider, Image } from "@nextui-org/react";
-
-export default function VerticalPage() {
-	return (
-		<div className="flex h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-small ml-4">
-			<div className="px-4">
-				<div className="bg-blue-900 mx-[24px] h-[120px] my-5 rounded-md">
-					<div>
-
-						<div className="flex flex-row justify-between items-center">
-							<div>
-								<p className="text-2xl font-semibold ml-5 ">Vertical Form</p>
-								<p className="text-gray-500 ml-5">Home<span className="text-black">{"  >  "}</span> <span className=" text-white">Verical Form</span></p>
-							</div>
-							<div className="pr-5">
-								<Image
-									width={110}
-									alt="NextUI hero Image"
-									src="https://modernize-nextjs-dark.vercel.app/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FChatBc.3d875e2e.png&w=256&q=75"
-								/>
-							</div>
-						</div>
-					</div>
-				</div >
-				<CreateVerticalForm />
-			</div>
-		</div>
-	);
-}
diff --git a/app/(admin)/admin/(basic-form)/form-wizard/page.tsx b/app/(admin)/admin/(basic-form)/form-wizard/page.tsx
deleted file mode 100644
index b096f16..0000000
--- a/app/(admin)/admin/(basic-form)/form-wizard/page.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-"use client"
-import CreateWizardForm from "@/components/form/form-wizard/wizard-form";
-import AuthtorsTable from "@/components/table/authors-table";
-import CustomerTable from "@/components/table/customers-table";
-import InvoiceTable from "@/components/table/invoice-table";
-import UserTable from "@/components/table/article-table";
-import UsersTable from "@/components/table/users-table";
-import { Card, Divider, Image } from "@nextui-org/react";
-
-export default function WizardPage() {
-	return (
-		<div className="flex h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-small ml-4">
-			<div className="px-4">
-				<div className="bg-blue-900 mx-[24px] h-[120px] my-5 rounded-md">
-					<div>
-
-						<div className="flex flex-row justify-between items-center">
-							<div>
-								<p className="text-2xl font-semibold ml-5 ">Form Wizard</p>
-								<p className="text-white ml-5">This is Form WizardPage</p>
-							</div>
-							<div className="pr-5">
-								<Image
-									width={110}
-									alt="NextUI hero Image"
-									src="https://modernize-nextjs-dark.vercel.app/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FChatBc.3d875e2e.png&w=256&q=75"
-								/>
-							</div>
-						</div>
-					</div>
-				</div >
-				<Card className="rounded-md mx-[24px]">
-					<p className="ml-5 mt-5 text-lg">Form  Wizard</p>
-					<Divider className="w-full my-3" />
-					<div>
-						<CreateWizardForm />
-					</div>
-
-
-				</Card>
-			</div>
-		</div>
-	);
-}
diff --git a/app/(admin)/admin/magazine/create/page.tsx b/app/(admin)/admin/magazine/create/page.tsx
new file mode 100644
index 0000000..429ac76
--- /dev/null
+++ b/app/(admin)/admin/magazine/create/page.tsx
@@ -0,0 +1,16 @@
+import CreateMagazineForm from '@/components/form/magazine/magazine-form'
+import MagazineTable from '@/components/table/magazine/magazine-table'
+import { Card } from '@nextui-org/react'
+import React from 'react'
+
+const AdminMagazineCreate = () => {
+    return (
+        <div className=" h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-small ml-4">
+            <div className="px-3">
+                <CreateMagazineForm />
+            </div>
+        </div>
+    )
+}
+
+export default AdminMagazineCreate
\ No newline at end of file
diff --git a/app/admin/magazine/detail/page.tsx b/app/(admin)/admin/magazine/detail/page.tsx
similarity index 100%
rename from app/admin/magazine/detail/page.tsx
rename to app/(admin)/admin/magazine/detail/page.tsx
diff --git a/app/(admin)/admin/magazine/page.tsx b/app/(admin)/admin/magazine/page.tsx
new file mode 100644
index 0000000..f1b23c5
--- /dev/null
+++ b/app/(admin)/admin/magazine/page.tsx
@@ -0,0 +1,14 @@
+import MagazineTable from '@/components/table/magazine/magazine-table'
+import React from 'react'
+
+const AdminMagazine = () => {
+    return (
+        <div className=" h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-small ml-4">
+            <div className="px-3">
+                <MagazineTable />
+            </div>
+        </div>
+    )
+}
+
+export default AdminMagazine
\ No newline at end of file
diff --git a/app/admin/master/master-menu/menu-data/create/page.tsx b/app/(admin)/admin/master/master-menu/menu-data/create/page.tsx
similarity index 61%
rename from app/admin/master/master-menu/menu-data/create/page.tsx
rename to app/(admin)/admin/master/master-menu/menu-data/create/page.tsx
index 966e952..637fedf 100644
--- a/app/admin/master/master-menu/menu-data/create/page.tsx
+++ b/app/(admin)/admin/master/master-menu/menu-data/create/page.tsx
@@ -1,11 +1,14 @@
 import CreateMagazineForm from '@/components/form/magazine/magazine-form'
 import CreateMenuDataForm from '@/components/form/master/master-menu/menu-data/menu-data-form'
 import MagazineTable from '@/components/table/magazine/magazine-table'
+import { Card } from '@nextui-org/react'
 import React from 'react'
 
 const AdminMenuDataCreate = () => {
     return (
-        <div><CreateMenuDataForm /></div>
+        <Card className="h-[96vh] rounded-md my- ml-3 border bg-transparent">
+            <CreateMenuDataForm />
+        </Card>
     )
 }
 
diff --git a/app/(admin)/admin/master/master-menu/menu-data/page.tsx b/app/(admin)/admin/master/master-menu/menu-data/page.tsx
new file mode 100644
index 0000000..b2f82d0
--- /dev/null
+++ b/app/(admin)/admin/master/master-menu/menu-data/page.tsx
@@ -0,0 +1,17 @@
+import MagazineTable from '@/components/table/magazine/magazine-table'
+import MenuDataTable from '@/components/table/master/master-menu/menu-data/menu-data-table'
+import { Image } from '@nextui-org/react'
+import React from 'react'
+
+const AdminMenuData = () => {
+    return (
+        <div className=" h-[96vh]  overflow-y-scroll gap-0 grid rounded-lg border-small ml-4">
+            <div className="px-3">
+                <MenuDataTable />
+            </div>
+        </div>
+
+    )
+}
+
+export default AdminMenuData
\ No newline at end of file
diff --git a/app/admin/master/master-module/create/page.tsx b/app/(admin)/admin/master/master-module/create/page.tsx
similarity index 66%
rename from app/admin/master/master-module/create/page.tsx
rename to app/(admin)/admin/master/master-module/create/page.tsx
index 8b7a4e2..fd07497 100644
--- a/app/admin/master/master-module/create/page.tsx
+++ b/app/(admin)/admin/master/master-module/create/page.tsx
@@ -2,11 +2,14 @@ import CreateMagazineForm from '@/components/form/magazine/magazine-form'
 import CreateMenuDataForm from '@/components/form/master/master-menu/menu-data/menu-data-form'
 import CreateMasterModuleForm from '@/components/form/master/master-module/master-module-form'
 import MagazineTable from '@/components/table/magazine/magazine-table'
+import { Card } from '@nextui-org/react'
 import React from 'react'
 
 const AdminMasterModuleCreate = () => {
     return (
-        <div><CreateMasterModuleForm /></div>
+        <Card className="h-[96vh] rounded-md my- ml-3 border bg-transparent">
+            <CreateMasterModuleForm />
+        </Card>
     )
 }
 
diff --git a/app/admin/master/master-module/page.tsx b/app/(admin)/admin/master/master-module/page.tsx
similarity index 57%
rename from app/admin/master/master-module/page.tsx
rename to app/(admin)/admin/master/master-module/page.tsx
index 75eb767..ec8fe00 100644
--- a/app/admin/master/master-module/page.tsx
+++ b/app/(admin)/admin/master/master-module/page.tsx
@@ -5,7 +5,11 @@ import React from 'react'
 
 const AdminMasterModule = () => {
     return (
-        <div><MasterModuleTable /></div>
+        <div className=" h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-small ml-4">
+            <div className="px-3">
+                <MasterModuleTable />
+            </div>
+        </div>
     )
 }
 
diff --git a/app/admin/master/master-user-level/create/page.tsx b/app/(admin)/admin/master/master-user-level/create/page.tsx
similarity index 70%
rename from app/admin/master/master-user-level/create/page.tsx
rename to app/(admin)/admin/master/master-user-level/create/page.tsx
index 916eafe..ddc1539 100644
--- a/app/admin/master/master-user-level/create/page.tsx
+++ b/app/(admin)/admin/master/master-user-level/create/page.tsx
@@ -3,11 +3,14 @@ import CreateMenuDataForm from '@/components/form/master/master-menu/menu-data/m
 import CreateMasterModuleForm from '@/components/form/master/master-module/master-module-form'
 import CreateMasterUserLevelForm from '@/components/form/master/master-user-level/master-user-level-form'
 import MagazineTable from '@/components/table/magazine/magazine-table'
+import { Card } from '@nextui-org/react'
 import React from 'react'
 
 const AdminMasterUserLevelCreate = () => {
     return (
-        <div><CreateMasterUserLevelForm /></div>
+        <Card className="h-[96vh] rounded-md my- ml-3 border bg-transparent">
+            <CreateMasterUserLevelForm />
+        </Card>
     )
 }
 
diff --git a/app/admin/master/master-user-level/page.tsx b/app/(admin)/admin/master/master-user-level/page.tsx
similarity index 63%
rename from app/admin/master/master-user-level/page.tsx
rename to app/(admin)/admin/master/master-user-level/page.tsx
index cb67e53..022921e 100644
--- a/app/admin/master/master-user-level/page.tsx
+++ b/app/(admin)/admin/master/master-user-level/page.tsx
@@ -6,7 +6,11 @@ import React from 'react'
 
 const AdminMasterUserLevel = () => {
     return (
-        <div><MasterUserLevelTable /></div>
+        <div className=" h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-small ml-4">
+            <div className="px-3">
+                <MasterUserLevelTable />
+            </div>
+        </div>
     )
 }
 
diff --git a/app/admin/magazine/create/page.tsx b/app/admin/magazine/create/page.tsx
deleted file mode 100644
index 89d98a2..0000000
--- a/app/admin/magazine/create/page.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import CreateMagazineForm from '@/components/form/magazine/magazine-form'
-import MagazineTable from '@/components/table/magazine/magazine-table'
-import React from 'react'
-
-const AdminMagazineCreate = () => {
-    return (
-        <div><CreateMagazineForm /></div>
-    )
-}
-
-export default AdminMagazineCreate
\ No newline at end of file
diff --git a/app/admin/magazine/page.tsx b/app/admin/magazine/page.tsx
deleted file mode 100644
index b2250f5..0000000
--- a/app/admin/magazine/page.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import MagazineTable from '@/components/table/magazine/magazine-table'
-import React from 'react'
-
-const AdminMagazine = () => {
-    return (
-        <div><MagazineTable /></div>
-    )
-}
-
-export default AdminMagazine
\ No newline at end of file
diff --git a/app/admin/master/master-menu/menu-data/page.tsx b/app/admin/master/master-menu/menu-data/page.tsx
deleted file mode 100644
index b780a00..0000000
--- a/app/admin/master/master-menu/menu-data/page.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import MagazineTable from '@/components/table/magazine/magazine-table'
-import MenuDataTable from '@/components/table/master/master-menu/menu-data/menu-data-table'
-import React from 'react'
-
-const AdminMenuData = () => {
-    return (
-        <div><MenuDataTable /></div>
-    )
-}
-
-export default AdminMenuData
\ No newline at end of file
diff --git a/components/form/magazine/magazine-form.tsx b/components/form/magazine/magazine-form.tsx
index 94f3e13..9b2a85c 100644
--- a/components/form/magazine/magazine-form.tsx
+++ b/components/form/magazine/magazine-form.tsx
@@ -2,7 +2,6 @@
 import { Button } from "@nextui-org/button";
 import { Card, Checkbox, CheckboxGroup, Divider, Input, Radio, RadioGroup, Select, SelectItem, Slider, Switch, Tab, Table, Tabs, Textarea, User } from "@nextui-org/react";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { TimesIcon } from "@/components/icons";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { close, error, loading } from "@/config/swal";
@@ -13,6 +12,7 @@ import { useForm } from "react-hook-form";
 import * as z from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import parse from 'html-react-parser';
+import { TimesIcon } from "@/components/icons";
 
 export default function CreateMagazineForm() {
     const router = useRouter();
@@ -122,25 +122,24 @@ export default function CreateMagazineForm() {
     return (
         <div className="mx-3 my-5">
             <div className="flex flex-col gap-3 mb-4">
-                <Card className="w-full bg-white">
+                <Card className="w-full ">
                     <div className="w-full mr-2 p-5 ">
                         <form method="POST" onSubmit={handleSubmit(onSubmit)}>
                             <>
                                 <div className="flex flex-col gap-1">
-                                    <div className="flex flex-row justify-between items-center mt-[24px] gap-3">
+                                    <div className="flex flex-row justify-between items-center mt-[10px] gap-3">
                                         <div className="flex flex-col w-6/12">
                                             <Input
                                                 type="text"
-                                                label="Title"
-                                                id="title"
+                                                label="Name"
                                                 {...register("title")}
-                                                placeholder="...."
+                                                placeholder="......"
                                                 labelPlacement="outside"
                                                 className="w-9/12 font-semibold"
                                                 classNames={{
-                                                    label: "!text-black",
-                                                    input: "!text-black hover:!text-white focus:!text-white",
-                                                    inputWrapper: "max-h-[40px] bg-transparant border text-white",
+                                                    label: "!text-black dark:!text-white",
+                                                    input: "!text-black dark:!text-white hover:!text-black focus:!text-black",
+                                                    inputWrapper: "max-h-[40px] bg-transparant border text-black",
                                                 }}
                                                 startContent={
                                                     <div className="pointer-events-none flex items-center">
@@ -164,9 +163,9 @@ export default function CreateMagazineForm() {
                                                 labelPlacement="outside"
                                                 className="w-9/12 font-semibold"
                                                 classNames={{
-                                                    label: "!text-black",
-                                                    input: "!text-black hover:!text-white focus:!text-white",
-                                                    inputWrapper: "max-h-[40px] bg-transparant border text-white",
+                                                    label: "!text-black dark:!text-white",
+                                                    input: "!text-black dark:!text-white hover:!text-black focus:!text-black",
+                                                    inputWrapper: "max-h-[40px] bg-transparant border text-black",
                                                 }}
                                                 startContent={
                                                     <div className="pointer-events-none flex items-center">
@@ -183,7 +182,7 @@ export default function CreateMagazineForm() {
                                     </div>
 
                                     <div className="mt-1">
-                                        <p className="text-black text-sm font-semibold my-2">Description</p>
+                                        <p className="text-black dark:text-white  text-sm font-semibold my-2">Description</p>
                                         <JoditEditor
                                             ref={editor}
                                             value={content}
@@ -191,12 +190,12 @@ export default function CreateMagazineForm() {
                                             className="dark:text-black"
                                         />
                                     </div>
-                                    <p className="text-sm text-black mt-2 pb-1 pt-3">Upload File (Opsional)</p>
+                                    <p className="text-sm text-black dark:text-white mt-2 pb-1 pt-3">Upload File (Opsional)</p>
                                     <div className="w-full bg-transparent">
                                         <div className="flex items-center justify-center w-full ">
                                             <label
                                                 htmlFor="dropzone-file"
-                                                className="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-100 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
+                                                className="flex flex-col items-center justify-center w-full h-32 border-2 border-black border-dashed rounded-lg cursor-pointer dark:bg-black dark:hover:bg-bray-800 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
                                             >
                                                 <div className="flex flex-col items-center justify-center pt-5 pb-6 ">
                                                     <svg
@@ -213,9 +212,6 @@ export default function CreateMagazineForm() {
                                                             d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
                                                         ></path>
                                                     </svg>
-                                                    {/* <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
-                                            Drag and drop files here
-                                        </p> */}
                                                     <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
                                                         {/* or{" "} */}
                                                         <span className="font-semibold underline text-amber-800">
@@ -223,11 +219,16 @@ export default function CreateMagazineForm() {
                                                         </span>
                                                     </p>
                                                 </div>
-                                                <input id="dropzone-file" type="file" multiple accept=".doc,.docx,.pdf,.ppt,.pptx,.xlsx,.csv" className="hidden" onChange={handleFileChange} />
+                                                <input
+                                                    id="dropzone-file"
+                                                    type="file"
+                                                    multiple accept=".doc,.docx,.pdf,.ppt,.pptx,.xlsx,.csv"
+                                                    className="hidden"
+                                                    onChange={handleFileChange} />
                                             </label>
                                         </div>
                                     </div>
-                                    <p className="text-tiny text-default ">Support file format in word, excel, ppt and pdf</p>
+                                    <p className="text-tiny text-default dark:text-white ">Support file format in word, excel, ppt and pdf</p>
                                     <div className="flex flex-wrap gap-3">
                                         {files?.length > 0 &&
                                             files?.map((list: File) => (
diff --git a/components/form/master/master-menu/menu-data/menu-data-form.tsx b/components/form/master/master-menu/menu-data/menu-data-form.tsx
index 6859834..aaed42d 100644
--- a/components/form/master/master-menu/menu-data/menu-data-form.tsx
+++ b/components/form/master/master-menu/menu-data/menu-data-form.tsx
@@ -138,7 +138,7 @@ export default function CreateMenuDataForm() {
     return (
         <div className="mx-3 my-5">
             <div className="flex flex-col gap-3 mb-4">
-                <Card className="w-full bg-white">
+                <Card className="w-full ">
                     <div className="w-full mr-2 p-5 ">
                         <form method="POST" onSubmit={handleSubmit(onSubmit)}>
                             <>
@@ -154,9 +154,9 @@ export default function CreateMenuDataForm() {
                                                 labelPlacement="outside"
                                                 className=" font-semibold"
                                                 classNames={{
-                                                    label: "!text-black",
-                                                    input: "!text-black hover:!text-white focus:!text-white",
-                                                    inputWrapper: "max-h-[40px] bg-transparant border text-white",
+                                                    label: "!text-black dark:!text-white",
+                                                    input: "!text-black dark:!text-white hover:!text-black focus:!text-black",
+                                                    inputWrapper: "max-h-[40px] bg-transparant border text-black",
                                                 }}
                                                 startContent={
                                                     <div className="pointer-events-none flex items-center">
@@ -180,9 +180,9 @@ export default function CreateMenuDataForm() {
                                                 labelPlacement="outside"
                                                 className=" font-semibold"
                                                 classNames={{
-                                                    label: "!text-black",
-                                                    input: "!text-black hover:!text-white focus:!text-white",
-                                                    inputWrapper: "max-h-[40px] bg-transparant border text-white",
+                                                    label: "!text-black dark:!text-white",
+                                                    input: "!text-black dark:!text-white hover:!text-black focus:!text-black",
+                                                    inputWrapper: "max-h-[40px] bg-transparant border text-black",
                                                 }}
                                                 startContent={
                                                     <div className="pointer-events-none flex items-center">
@@ -197,7 +197,7 @@ export default function CreateMenuDataForm() {
                                             )}
                                         </div>
                                         <div className="mt-3 ">
-                                            <p className="text-black text-sm mb-1 font-semibold">Main Module</p>
+                                            <p className="dark:text-white text-black text-sm mb-1 font-semibold">Main Module</p>
                                             <Select
                                                 variant="bordered"
                                                 selectionMode="single"
@@ -208,27 +208,27 @@ export default function CreateMenuDataForm() {
                                                 classNames={{
                                                     mainWrapper: "rounded",
                                                     listboxWrapper:
-                                                        "bg-white w-full !text-indigo-500 text-center font-bold",
-                                                    popoverContent: "bg-white !text-indigo-500",
+                                                        "bg-black w-full !text-indigo-500 text-center font-bold",
+                                                    popoverContent: "bg-black !text-indigo-500",
                                                     trigger:
-                                                        "border-1 border-gray-200 hover:!bg-gray-100 !text-black",
+                                                        "border-1 border-gray-200 hover:!bg-white dark:hover:!bg-black !text-black dark:!text-white",
                                                 }}
                                                 listboxProps={{
                                                     itemClasses: {
                                                         base: [
                                                             "!text-left",
-                                                            "!bg-white",
+                                                            "!bg-black",
                                                             "text-indigo-500 ",
                                                             "data-[selectable=true]:!text-indigo-500",
                                                             "data-[pressed=true]:text-indigo-500",
                                                             "data-[hover=true]:!text-indigo-300",
                                                         ],
-                                                        wrapper: ["!bg-white border-none"],
+                                                        wrapper: ["!bg-black border-none"],
                                                     },
                                                 }}
                                                 renderValue={(items) => {
                                                     return items.map((item) => (
-                                                        <span key={item.props?.value} className="text-black text-xs">
+                                                        <span key={item.props?.value} className="text-black dark:text-white text-xs">
                                                             {item.textValue}
                                                         </span>
                                                     ));
@@ -244,7 +244,7 @@ export default function CreateMenuDataForm() {
                                             </Select>
                                         </div>
                                         <div className="text-black mt-3">
-                                            <label className="text-black text-sm dark:text-black">Have sub module ?</label>
+                                            <label className="dark:text-white text-black text-sm ">Have sub module ?</label>
                                             <RadioGroup
                                                 orientation="horizontal"
                                                 id="radio-banned"
@@ -252,7 +252,7 @@ export default function CreateMenuDataForm() {
                                                 onChange={handleHaveChildren}
                                                 defaultValue={haveChildren}
                                                 classNames={{
-                                                    label: "!text-black",
+                                                    label: "!text-black dark:!text-white",
                                                     description: "!text-black",
                                                     base: "!text-black",
                                                     wrapper: "!text-black",
@@ -260,7 +260,7 @@ export default function CreateMenuDataForm() {
                                             >
                                                 <Radio
                                                     classNames={{
-                                                        label: "!text-black",
+                                                        label: "!text-black dark:!text-white",
                                                     }}
                                                     value="no"
                                                 >
@@ -268,7 +268,7 @@ export default function CreateMenuDataForm() {
                                                 </Radio>
                                                 <Radio
                                                     classNames={{
-                                                        label: "!text-black",
+                                                        label: "!text-black dark:!text-white",
                                                     }}
                                                     value="yes"
                                                 >
@@ -278,7 +278,7 @@ export default function CreateMenuDataForm() {
                                         </div>
                                         {haveChildren === "yes" && (
                                             <div className="mt-3 ">
-                                                <p className="text-black text-sm mb-1 font-semibold">Sub Module</p>
+                                                <p className="text-black dark:text-white text-sm mb-1 font-semibold">Sub Module</p>
                                                 <Select
                                                     variant="bordered"
                                                     selectionMode="single"
@@ -289,27 +289,27 @@ export default function CreateMenuDataForm() {
                                                     classNames={{
                                                         mainWrapper: "rounded",
                                                         listboxWrapper:
-                                                            "bg-white w-full !text-indigo-500 text-center font-bold",
-                                                        popoverContent: "bg-white !text-indigo-500",
+                                                            "bg-black w-full !text-indigo-500 text-center font-bold",
+                                                        popoverContent: "bg-black !text-indigo-500",
                                                         trigger:
-                                                            "border-1 border-gray-200 hover:!bg-gray-100 !text-black",
+                                                            "border-1 border-gray-200 hover:!bg-white dark:hover:!bg-black !text-white",
                                                     }}
                                                     listboxProps={{
                                                         itemClasses: {
                                                             base: [
                                                                 "!text-left",
-                                                                "!bg-white",
+                                                                "!bg-black",
                                                                 "text-indigo-500 ",
                                                                 "data-[selectable=true]:!text-indigo-500",
                                                                 "data-[pressed=true]:text-indigo-500",
                                                                 "data-[hover=true]:!text-indigo-300",
                                                             ],
-                                                            wrapper: ["!bg-white border-none"],
+                                                            wrapper: ["!bg-black border-none"],
                                                         },
                                                     }}
                                                     renderValue={(items) => {
                                                         return items.map((item) => (
-                                                            <span key={item.props?.value} className="text-black text-xs">
+                                                            <span key={item.props?.value} className="text-black dark:text-white text-xs">
                                                                 {item.textValue}
                                                             </span>
                                                         ));
@@ -326,7 +326,7 @@ export default function CreateMenuDataForm() {
                                             </div>
                                         )}
                                         <div className="text-black mt-3">
-                                            <label className="text-black text-sm dark:text-black">Status</label>
+                                            <label className="text-black dark:text-white text-sm dark:text-black">Status</label>
                                             <RadioGroup
                                                 orientation="horizontal"
                                                 id="radio-banned"
@@ -334,7 +334,7 @@ export default function CreateMenuDataForm() {
                                                 onChange={handleActive}
                                                 defaultValue={active}
                                                 classNames={{
-                                                    label: "!text-black",
+                                                    label: "!text-black dark:!text-white",
                                                     description: "!text-black",
                                                     base: "!text-black",
                                                     wrapper: "!text-black",
@@ -342,7 +342,7 @@ export default function CreateMenuDataForm() {
                                             >
                                                 <Radio
                                                     classNames={{
-                                                        label: "!text-black",
+                                                        label: "!text-black dark:!text-white",
                                                     }}
                                                     value="1"
                                                 >
@@ -350,7 +350,7 @@ export default function CreateMenuDataForm() {
                                                 </Radio>
                                                 <Radio
                                                     classNames={{
-                                                        label: "!text-black",
+                                                        label: "!text-black dark:!text-white",
                                                     }}
                                                     value="2"
                                                 >
diff --git a/components/form/master/master-module/master-module-form.tsx b/components/form/master/master-module/master-module-form.tsx
index cedd20b..774a930 100644
--- a/components/form/master/master-module/master-module-form.tsx
+++ b/components/form/master/master-module/master-module-form.tsx
@@ -138,7 +138,7 @@ export default function CreateMasterModuleForm() {
     return (
         <div className="mx-3 my-5">
             <div className="flex flex-col gap-3 mb-4">
-                <Card className="w-full bg-white">
+                <Card className="w-full ">
                     <div className="w-full mr-2 p-5 ">
                         <form method="POST" onSubmit={handleSubmit(onSubmit)}>
                             <>
@@ -154,9 +154,9 @@ export default function CreateMasterModuleForm() {
                                                 labelPlacement="outside"
                                                 className=" font-semibold"
                                                 classNames={{
-                                                    label: "!text-black",
-                                                    input: "!text-black hover:!text-white focus:!text-white",
-                                                    inputWrapper: "max-h-[40px] bg-transparant border text-white",
+                                                    label: "!text-black dark:!text-white",
+                                                    input: "!text-black dark:!text-white hover:!text-black focus:!text-black",
+                                                    inputWrapper: "max-h-[40px] bg-transparant border text-black",
                                                 }}
                                                 startContent={
                                                     <div className="pointer-events-none flex items-center">
@@ -180,9 +180,9 @@ export default function CreateMasterModuleForm() {
                                                 labelPlacement="outside"
                                                 className=" font-semibold"
                                                 classNames={{
-                                                    label: "!text-black",
-                                                    input: "!text-black hover:!text-white focus:!text-white",
-                                                    inputWrapper: "max-h-[40px] bg-transparant border text-white",
+                                                    label: "!text-black dark:!text-white",
+                                                    input: "!text-black dark:!text-white hover:!text-black focus:!text-black",
+                                                    inputWrapper: "max-h-[40px] bg-transparant border text-black",
                                                 }}
                                                 startContent={
                                                     <div className="pointer-events-none flex items-center">
@@ -206,9 +206,9 @@ export default function CreateMasterModuleForm() {
                                                 labelPlacement="outside"
                                                 className=" font-semibold"
                                                 classNames={{
-                                                    label: "!text-black",
-                                                    input: "!text-black hover:!text-white focus:!text-white",
-                                                    inputWrapper: "max-h-[40px] bg-transparant border text-white",
+                                                    label: "!text-black dark:!text-white",
+                                                    input: "!text-black dark:!text-white hover:!text-black focus:!text-black",
+                                                    inputWrapper: "max-h-[40px] bg-transparant border text-black",
                                                 }}
                                                 startContent={
                                                     <div className="pointer-events-none flex items-center">
@@ -223,7 +223,7 @@ export default function CreateMasterModuleForm() {
                                             )}
                                         </div>
                                         <div className="text-black mt-3">
-                                            <label className="text-black text-sm dark:text-black">Status</label>
+                                            <label className="text-black dark:text-white text-sm ">Status</label>
                                             <RadioGroup
                                                 orientation="horizontal"
                                                 id="radio-banned"
@@ -231,7 +231,7 @@ export default function CreateMasterModuleForm() {
                                                 onChange={handleActive}
                                                 defaultValue={active}
                                                 classNames={{
-                                                    label: "!text-black",
+                                                    label: "!text-black dark:!text-white",
                                                     description: "!text-black",
                                                     base: "!text-black",
                                                     wrapper: "!text-black",
@@ -239,7 +239,7 @@ export default function CreateMasterModuleForm() {
                                             >
                                                 <Radio
                                                     classNames={{
-                                                        label: "!text-black",
+                                                        label: "!text-black dark:!text-white",
                                                     }}
                                                     value="1"
                                                 >
@@ -247,7 +247,7 @@ export default function CreateMasterModuleForm() {
                                                 </Radio>
                                                 <Radio
                                                     classNames={{
-                                                        label: "!text-black",
+                                                        label: "!text-black dark:!text-white",
                                                     }}
                                                     value="2"
                                                 >
diff --git a/components/form/master/master-user-level/master-user-level-form.tsx b/components/form/master/master-user-level/master-user-level-form.tsx
index bafa6e4..4347c71 100644
--- a/components/form/master/master-user-level/master-user-level-form.tsx
+++ b/components/form/master/master-user-level/master-user-level-form.tsx
@@ -155,7 +155,7 @@ export default function CreateMasterUserLevelForm() {
     return (
         <div className="mx-3 my-5">
             <div className="flex flex-col gap-3 mb-4">
-                <Card className="w-full bg-white">
+                <Card className="w-full ">
                     <div className="w-full mr-2 p-5 ">
                         <form method="POST" onSubmit={handleSubmit(onSubmit)}>
                             <>
@@ -171,9 +171,9 @@ export default function CreateMasterUserLevelForm() {
                                                 labelPlacement="outside"
                                                 className=" font-semibold"
                                                 classNames={{
-                                                    label: "!text-black",
-                                                    input: "!text-black hover:!text-white focus:!text-white",
-                                                    inputWrapper: "max-h-[40px] bg-transparant border text-white",
+                                                    label: "!text-black dark:!text-white",
+                                                    input: "!text-black dark:!text-white hover:!text-black focus:!text-black",
+                                                    inputWrapper: "max-h-[40px] bg-transparant border text-black",
                                                 }}
                                                 startContent={
                                                     <div className="pointer-events-none flex items-center">
@@ -197,9 +197,9 @@ export default function CreateMasterUserLevelForm() {
                                                 labelPlacement="outside"
                                                 className=" font-semibold"
                                                 classNames={{
-                                                    label: "!text-black",
-                                                    input: "!text-black hover:!text-white focus:!text-white",
-                                                    inputWrapper: "max-h-[40px] bg-transparant border text-white",
+                                                    label: "!text-black dark:!text-white",
+                                                    input: "!text-black dark:!text-white hover:!text-black focus:!text-black",
+                                                    inputWrapper: "max-h-[40px] bg-transparant border text-black",
                                                 }}
                                                 startContent={
                                                     <div className="pointer-events-none flex items-center">
@@ -213,8 +213,8 @@ export default function CreateMasterUserLevelForm() {
                                                 </p>
                                             )}
                                         </div>
-                                        <div className="mt-3 ">
-                                            <p className="text-black text-sm mb-1 font-semibold">Level Number</p>
+                                        <div className="my-3 ">
+                                            <p className="text-black dark:text-white text-sm mb-1 font-semibold">Level Number</p>
                                             <Select
                                                 variant="bordered"
                                                 labelPlacement="outside"
@@ -225,24 +225,31 @@ export default function CreateMasterUserLevelForm() {
                                                 classNames={{
                                                     mainWrapper: "rounded",
                                                     listboxWrapper:
-                                                        "bg-white w-full !text-indigo-500 text-center font-bold",
-                                                    popoverContent: "bg-white !text-indigo-500",
+                                                        "bg-black w-full !text-indigo-500 text-center font-bold",
+                                                    popoverContent: "bg-black !text-indigo-500",
                                                     trigger:
-                                                        "border-1 border-gray-200 hover:!bg-gray-100 !text-black",
+                                                        "border-1 border-gray-200 hover:!bg-white dark:hover:!bg-black !text-black dark:!text-white",
                                                 }}
                                                 listboxProps={{
                                                     itemClasses: {
                                                         base: [
                                                             "!text-left",
-                                                            "!bg-white",
+                                                            "!bg-black",
                                                             "text-indigo-500 ",
                                                             "data-[selectable=true]:!text-indigo-500",
                                                             "data-[pressed=true]:text-indigo-500",
                                                             "data-[hover=true]:!text-indigo-300",
                                                         ],
-                                                        wrapper: ["!bg-white border-none"],
+                                                        wrapper: ["!bg-black border-none"],
                                                     },
                                                 }}
+                                                renderValue={(items) => {
+                                                    return items.map((item) => (
+                                                        <span key={item.props?.value} className="text-black dark:text-white text-xs">
+                                                            {item.textValue}
+                                                        </span>
+                                                    ));
+                                                }}
                                             >
                                                 <SelectSection showDivider title="List Level">
                                                     {LevelList.map((list: any) => (
@@ -253,8 +260,8 @@ export default function CreateMasterUserLevelForm() {
                                                 </SelectSection>
                                             </Select>
                                         </div>
-                                        {/* <div className="mt-3 ">
-                                            <p className="text-black text-sm mb-1 font-semibold">Parent LevelId</p>
+                                        <div className="mt-3 ">
+                                            <p className="text-black dark:text-white text-sm mb-1 font-semibold">Parent LevelId</p>
                                             <Select
                                                 variant="bordered"
                                                 selectionMode="single"
@@ -265,27 +272,27 @@ export default function CreateMasterUserLevelForm() {
                                                 classNames={{
                                                     mainWrapper: "rounded",
                                                     listboxWrapper:
-                                                        "bg-white w-full !text-indigo-500 text-center font-bold",
-                                                    popoverContent: "bg-white !text-indigo-500",
+                                                        "bg-black w-full !text-indigo-500 text-center font-bold",
+                                                    popoverContent: "bg-black !text-indigo-500",
                                                     trigger:
-                                                        "border-1 border-gray-200 hover:!bg-gray-100 !text-black",
+                                                        "border-1 border-gray-200 hover:!bg-white dark:hover:!bg-black !text-black dark:!text-white",
                                                 }}
                                                 listboxProps={{
                                                     itemClasses: {
                                                         base: [
                                                             "!text-left",
-                                                            "!bg-white",
+                                                            "!bg-black",
                                                             "text-indigo-500 ",
                                                             "data-[selectable=true]:!text-indigo-500",
                                                             "data-[pressed=true]:text-indigo-500",
                                                             "data-[hover=true]:!text-indigo-300",
                                                         ],
-                                                        wrapper: ["!bg-white border-none"],
+                                                        wrapper: ["!bg-black border-none"],
                                                     },
                                                 }}
                                                 renderValue={(items) => {
                                                     return items.map((item) => (
-                                                        <span key={item.props?.value} className="text-black text-xs">
+                                                        <span key={item.props?.value} className="text-black dark:text-white text-xs">
                                                             {item.textValue}
                                                         </span>
                                                     ));
@@ -301,7 +308,7 @@ export default function CreateMasterUserLevelForm() {
                                             </Select>
                                         </div>
                                         <div className="mt-3 ">
-                                            <p className="text-black text-sm mb-1 font-semibold">Provinsi</p>
+                                            <p className="text-black dark:text-white text-sm mb-1 font-semibold">Provinsi</p>
                                             <Select
                                                 variant="bordered"
                                                 selectionMode="single"
@@ -312,27 +319,27 @@ export default function CreateMasterUserLevelForm() {
                                                 classNames={{
                                                     mainWrapper: "rounded",
                                                     listboxWrapper:
-                                                        "bg-white w-full !text-indigo-500 text-center font-bold",
-                                                    popoverContent: "bg-white !text-indigo-500",
+                                                        "bg-black w-full !text-indigo-500 text-center font-bold",
+                                                    popoverContent: "bg-black !text-indigo-500",
                                                     trigger:
-                                                        "border-1 border-gray-200 hover:!bg-gray-100 !text-black",
+                                                        "border-1 border-gray-200 hover:!bg-white dark:hover:!bg-black !text-black dark:!text-white",
                                                 }}
                                                 listboxProps={{
                                                     itemClasses: {
                                                         base: [
                                                             "!text-left",
-                                                            "!bg-white",
+                                                            "!bg-black",
                                                             "text-indigo-500 ",
                                                             "data-[selectable=true]:!text-indigo-500",
                                                             "data-[pressed=true]:text-indigo-500",
                                                             "data-[hover=true]:!text-indigo-300",
                                                         ],
-                                                        wrapper: ["!bg-white border-none"],
+                                                        wrapper: ["!bg-black border-none"],
                                                     },
                                                 }}
                                                 renderValue={(items) => {
                                                     return items.map((item) => (
-                                                        <span key={item.props?.value} className="text-black text-xs">
+                                                        <span key={item.props?.value} className="text-black dark:text-white text-xs">
                                                             {item.textValue}
                                                         </span>
                                                     ));
@@ -347,18 +354,24 @@ export default function CreateMasterUserLevelForm() {
                                                 </SelectSection>
                                             </Select>
                                         </div>
-                                        <div className="text-black">
-                                            <p className=" text-black ">Status</p>
+                                        <div className="text-black mt-3">
+                                            <p className=" text-black dark:text-white ">Status</p>
                                             <RadioGroup
                                                 orientation="horizontal"
                                                 id="radio-banned"
                                                 className="text-gray-950 mb-2"
                                                 onChange={handleActive}
                                                 defaultValue={active}
+                                                classNames={{
+                                                    label: "!text-black dark:!text-white",
+                                                    description: "!text-black",
+                                                    base: "!text-black",
+                                                    wrapper: "!text-black",
+                                                }}
                                             >
                                                 <Radio
                                                     classNames={{
-                                                        label: "!text-black",
+                                                        label: "!text-black dark:!text-white",
                                                     }}
                                                     value="true"
                                                 >
@@ -366,14 +379,14 @@ export default function CreateMasterUserLevelForm() {
                                                 </Radio>
                                                 <Radio
                                                     classNames={{
-                                                        label: "!text-black",
+                                                        label: "!text-black dark:!text-white",
                                                     }}
                                                     value="false"
                                                 >
                                                     Inactive
                                                 </Radio>
                                             </RadioGroup>
-                                        </div> */}
+                                        </div>
                                         <div className="flex flex-row gap-3 my-3">
                                             <Link href="/admin/master/master-user-level">
                                                 <Button
diff --git a/components/icons.tsx b/components/icons.tsx
index a417d7c..14280b0 100644
--- a/components/icons.tsx
+++ b/components/icons.tsx
@@ -1477,3 +1477,22 @@ export const GoogleIcon = ({
 		</path>
 	</svg>
 );
+
+export const TimesIcon = ({
+	size,
+	height = 24,
+	width = 24,
+	fill = "currentColor",
+	...props
+}: IconSvgProps) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		height={size || height}
+		width={size || width}
+		viewBox="0 0 24 24"
+		fill={fill}
+		{...props}
+	>
+		<path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z" />
+	</svg>
+);
diff --git a/components/sidebar/sidebar.tsx b/components/sidebar/sidebar.tsx
index d3f5974..a1c7148 100644
--- a/components/sidebar/sidebar.tsx
+++ b/components/sidebar/sidebar.tsx
@@ -97,7 +97,7 @@ const sideBarDummyData = [
         name: "E-Magazine",
         moduleId: 652,
         moduleName: "Dashboard",
-        modulePathUrl: "/admin/pagination-basic",
+        modulePathUrl: "/admin/magazine",
         parentId: -1,
         icon: <TableIcon />,
         position: 1,
@@ -126,7 +126,7 @@ const sideBarDummyData = [
         name: "Master Menu",
         moduleId: 652,
         moduleName: "Form Custom",
-        modulePathUrl: "/admin/form-costum",
+        modulePathUrl: "/admin/master/master-menu/menu-data",
         parentId: -1,
         icon: <FormCustomIcon />,
         position: 1,
@@ -140,7 +140,7 @@ const sideBarDummyData = [
         name: "Master Module",
         moduleId: 653,
         moduleName: "Form Horizontal",
-        modulePathUrl: "/admin/form-horizontal",
+        modulePathUrl: "/admin/master/master-module",
         parentId: -1,
         icon: <FormHorizontalIcon />,
         position: 1,
@@ -168,7 +168,7 @@ const sideBarDummyData = [
         name: "Master User Levels",
         moduleId: 655,
         moduleName: "Form Layout",
-        modulePathUrl: "/admin/form-layout",
+        modulePathUrl: "/admin/master/master-user-level",
         parentId: -1,
         icon: <FormLayoutIcon />,
         position: 1,
diff --git a/components/table/magazine/magazine-table.tsx b/components/table/magazine/magazine-table.tsx
index a4948eb..8b7d418 100644
--- a/components/table/magazine/magazine-table.tsx
+++ b/components/table/magazine/magazine-table.tsx
@@ -184,7 +184,7 @@ export default function MagazineTable() {
 
     return (
         <>
-            <div className="mx-3 my-5">
+            <div className="mx-3 mb-5 mt-3">
                 <Link href="/admin/magazine/create" >
                     <Button className="my-3 bg-blue-600 text-white" ><CreateIconIon />Create New Magazine</Button>
                 </Link>
diff --git a/components/table/master/master-menu/menu-data/menu-data-table.tsx b/components/table/master/master-menu/menu-data/menu-data-table.tsx
index 7f8f43d..2f43ebd 100644
--- a/components/table/master/master-menu/menu-data/menu-data-table.tsx
+++ b/components/table/master/master-menu/menu-data/menu-data-table.tsx
@@ -193,7 +193,7 @@ export default function MenuDataTable() {
 
     return (
         <>
-            <div className="mx-3 my-5">
+            <div className="mx-3 mb-5 mt-3">
                 <Link href="/admin/master/master-menu/menu-data/create" >
                     <Button className="my-3 bg-blue-600 text-white" ><CreateIconIon />Add Master Menu</Button>
                 </Link>
diff --git a/components/table/master/master-module/master-module-table.tsx b/components/table/master/master-module/master-module-table.tsx
index 3bad23b..7ce8cf7 100644
--- a/components/table/master/master-module/master-module-table.tsx
+++ b/components/table/master/master-module/master-module-table.tsx
@@ -186,7 +186,7 @@ export default function MasterModuleTable() {
 
     return (
         <>
-            <div className="mx-3 my-5">
+            <div className="mx-3 mb-5 mt-3">
                 <Link href="/admin/master/master-module/create" >
                     <Button className="my-3 bg-blue-600 text-white" ><CreateIconIon />Add Master Module</Button>
                 </Link>
diff --git a/components/table/master/master-user-level/master-user-level-table.tsx b/components/table/master/master-user-level/master-user-level-table.tsx
index fa5b6f1..b7a7ae8 100644
--- a/components/table/master/master-user-level/master-user-level-table.tsx
+++ b/components/table/master/master-user-level/master-user-level-table.tsx
@@ -188,7 +188,7 @@ export default function MasterUserLevelTable() {
 
     return (
         <>
-            <div className="mx-3 my-5">
+            <div className="mx-3 mb-5 mt-3">
                 <Link href="/admin/master/master-user-level/create" >
                     <Button className="my-3 bg-blue-600 text-white" ><CreateIconIon />Create New User Level</Button>
                 </Link>