diff --git a/app/admin/magazine/create/page.tsx b/app/(admin)/admin/e-magazine/create/page.tsx
similarity index 100%
rename from app/admin/magazine/create/page.tsx
rename to app/(admin)/admin/e-magazine/create/page.tsx
diff --git a/app/admin/magazine/detail/page.tsx b/app/(admin)/admin/e-magazine/detail/page.tsx
similarity index 100%
rename from app/admin/magazine/detail/page.tsx
rename to app/(admin)/admin/e-magazine/detail/page.tsx
diff --git a/app/admin/magazine/page.tsx b/app/(admin)/admin/e-magazine/page.tsx
similarity index 100%
rename from app/admin/magazine/page.tsx
rename to app/(admin)/admin/e-magazine/page.tsx
diff --git a/app/admin/master/master-menu/menu-data/create/page.tsx b/app/(admin)/admin/master-menu/create/page.tsx
similarity index 100%
rename from app/admin/master/master-menu/menu-data/create/page.tsx
rename to app/(admin)/admin/master-menu/create/page.tsx
diff --git a/app/(admin)/admin/master-menu/page.tsx b/app/(admin)/admin/master-menu/page.tsx
index b55c9bd..b780a00 100644
--- a/app/(admin)/admin/master-menu/page.tsx
+++ b/app/(admin)/admin/master-menu/page.tsx
@@ -1,7 +1,11 @@
+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'
 
-export default function MasterMenuPage() {
+const AdminMenuData = () => {
     return (
-        <div>MasterMenuPage</div>
+        <div><MenuDataTable /></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-module/create/page.tsx
similarity index 100%
rename from app/admin/master/master-module/create/page.tsx
rename to app/(admin)/admin/master-module/create/page.tsx
diff --git a/app/admin/master/master-module/page.tsx b/app/(admin)/admin/master-module/page.tsx
similarity index 100%
rename from app/admin/master/master-module/page.tsx
rename to app/(admin)/admin/master-module/page.tsx
diff --git a/app/(admin)/admin/master-role/detail/[id]/page.tsx b/app/(admin)/admin/master-role/detail/[id]/page.tsx
new file mode 100644
index 0000000..0fec0be
--- /dev/null
+++ b/app/(admin)/admin/master-role/detail/[id]/page.tsx
@@ -0,0 +1,10 @@
+import FormDetailMasterUserRole from '@/components/form/form-detail-master-user-role'
+import { Card } from '@nextui-org/react'
+
+export default function DetailMasterRolePage() {
+    return (
+        <Card className="h-[96vh] rounded-md my- ml-3 border bg-transparent">
+            <FormDetailMasterUserRole />
+        </Card>
+    )
+}
diff --git a/app/admin/master/master-user-level/create/page.tsx b/app/(admin)/admin/master-user-level/create/page.tsx
similarity index 100%
rename from app/admin/master/master-user-level/create/page.tsx
rename to app/(admin)/admin/master-user-level/create/page.tsx
diff --git a/app/admin/master/master-user-level/page.tsx b/app/(admin)/admin/master-user-level/page.tsx
similarity index 100%
rename from app/admin/master/master-user-level/page.tsx
rename to app/(admin)/admin/master-user-level/page.tsx
diff --git a/app/(admin)/dashboard-old/page.tsx b/app/(admin)/dashboard-old/page.tsx
deleted file mode 100644
index f4f0d25..0000000
--- a/app/(admin)/dashboard-old/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-const AdminDasboard = () => {
-    return (
-        <div>AdminDasboard</div>
-    )
-}
-
-export default AdminDasboard
\ 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/app/admin/page.tsx b/app/admin/page.tsx
deleted file mode 100644
index bda639f..0000000
--- a/app/admin/page.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-
-export default function AdminHumasPage() {
-    return (
-        <div className=''>
-            <div>1</div>
-            <div>1</div>
-        </div>
-    )
-}
diff --git a/components/form/form-article.tsx b/components/form/form-article.tsx
index b024a95..72ddd67 100644
--- a/components/form/form-article.tsx
+++ b/components/form/form-article.tsx
@@ -17,7 +17,7 @@ const articleSchema = z.object({
     article: z.string().min(1, { message: "Required" }),
     slug: z.string().min(1, { message: "Required" }),
     tags: z.string().min(0, { message: "Required" }).optional(),
-    description: z.string().min(1, { message: "Required" }).optional(),
+    description: z.string().min(0, { message: "Required" }).optional(),
 
 });
 
diff --git a/components/form/form-detail-article.tsx b/components/form/form-detail-article.tsx
index 66e8fbc..065cc3c 100644
--- a/components/form/form-detail-article.tsx
+++ b/components/form/form-detail-article.tsx
@@ -30,6 +30,7 @@ export default function FormDetailArticle() {
     const [content, setContent] = useState('');
     const MySwal = withReactContent(Swal);
     const [article, setArticle] = useState<any>();
+    const [typeArticle, setTypeArticle] = useState<any>([]);
     const pathname = usePathname();
     const splitPathname = pathname.split('/');
     const id = splitPathname[splitPathname.length - 1];
@@ -98,7 +99,11 @@ export default function FormDetailArticle() {
             const res = await getArticleById(id);
             setArticle(res.data?.data);
             setTitle(res.data?.data?.title)
-            console.log("Data Aritcle", res.data?.data);
+            setTypeArticle(res.data.data?.type_id)
+            const tagsArray = res.data.data?.tags ? res.data.data.tags.split(",") : [];
+            setTags(tagsArray);
+
+            console.log("Data Aritcle", tagsArray);
         }
 
         initState();
@@ -165,11 +170,10 @@ export default function FormDetailArticle() {
                         <Select
                             label="Jenis Artikel"
                             {...register("article")}
-                            value={article?.type_id}
                             variant="bordered"
                             labelPlacement='outside'
                             placeholder="Select"
-                            // selectedKeys={article}
+                            // selectedKeys={typeArticle}
                             className="max-w-xs"
                         // onSelectionChange={setArticle}
                         >
@@ -216,9 +220,11 @@ export default function FormDetailArticle() {
                             {(tags.length === 0 && errors.tags) && errors.tags.message}
                         </div>
                         <div className="flex gap-2 border border-inherit mt-2 rounded-md p-1 items-center h-11">
-                            <Chip color='primary' onClose={() => handleClose("close")}>
-                                {article?.tags}
-                            </Chip>
+                            {tags.map((tag, index) => (
+                                <Chip key={index} color='primary' onClose={() => handleClose('')}>
+                                    {tag}
+                                </Chip>
+                            ))}
                         </div>
                     </div>
                     <div>
@@ -272,7 +278,7 @@ export default function FormDetailArticle() {
                         </div>
                     </div>
                     <div className='flex justify-end gap-3'>
-                        <Link href={`/admin/article`}>
+                        <Link href={`/admin/master-role`}>
                             <Button
                                 color='danger'
                                 variant="ghost"
diff --git a/components/form/form-detail-master-user-role.tsx b/components/form/form-detail-master-user-role.tsx
new file mode 100644
index 0000000..e3e4670
--- /dev/null
+++ b/components/form/form-detail-master-user-role.tsx
@@ -0,0 +1,184 @@
+'use client'
+import { error } from '@/config/swal';
+import { createMasterUserRole, getMasterUserRoleById } from '@/service/master-user-role';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Button, Card, Input, Textarea } from '@nextui-org/react';
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import Swal from 'sweetalert2';
+import withReactContent from 'sweetalert2-react-content';
+import { z } from 'zod';
+
+const masterUserSchema = z.object({
+    code: z.string().min(1, { message: "Required" }),
+    description: z.string().min(1, { message: "Required" }),
+    levelNumber: z.string().min(1, { message: "Required" }),
+    name: z.string().min(1, { message: "Required" }),
+});
+
+export default function FormDetailMasterUserRole() {
+    const router = useRouter();
+    const MySwal = withReactContent(Swal);
+    const [userRole, setUserRole] = useState<any>();
+    const [code, setCode] = useState<string>();
+    const [description, setDescription] = useState<string>();
+    const [levelNumber, setLevelNumber] = useState<any>(1);
+    const [name, setName] = useState<string>();
+    const pathname = usePathname();
+    const splitPathname = pathname.split('/');
+    const id = splitPathname[splitPathname.length - 1];
+
+    const formOptions = { resolver: zodResolver(masterUserSchema) };
+    type MicroIssueSchema = z.infer<typeof masterUserSchema>;
+    const {
+        register,
+        control,
+        handleSubmit,
+        setValue,
+        formState: { errors },
+    } = useForm<MicroIssueSchema>(formOptions);
+
+
+    useEffect(() => {
+        async function initState() {
+            const res = await getMasterUserRoleById(id);
+            setUserRole(res.data?.data);
+            setCode(res.data?.data?.code)
+            setName(res.data.data?.name)
+            setDescription(res.data.data?.description)
+            setLevelNumber(res.data.data?.level_number)
+
+            console.log("Data MasterUser", userRole);
+        }
+
+        initState();
+    }, []);
+
+
+    async function save(data: any) {
+        const formData = {
+            code: code,
+            description: description,
+            level_number: levelNumber,
+            name: name,
+        };
+
+        console.log("Form MasterUser:", formData);
+        const response = await createMasterUserRole(formData);
+
+        if (response?.error) {
+            error(response.message);
+            return false;
+        }
+
+        successSubmit("/admin/master-role");
+    };
+
+    function successSubmit(redirect: any) {
+        MySwal.fire({
+            title: "Sukses",
+            icon: "success",
+            confirmButtonColor: "#3085d6",
+            confirmButtonText: "OK",
+        }).then((result) => {
+            if (result.isConfirmed) {
+                router.push(redirect);
+            }
+        });
+    }
+
+    async function onSubmit(data: any) {
+        MySwal.fire({
+            title: "Simpan Data",
+            text: "",
+            icon: "warning",
+            showCancelButton: true,
+            cancelButtonColor: "#d33",
+            confirmButtonColor: "#3085d6",
+            confirmButtonText: "Simpan",
+        }).then((result) => {
+            if (result.isConfirmed) {
+                save(data);
+            }
+        });
+    }
+
+    return (
+        <div className='mx-5 my-5 overflow-y-auto'>
+            <form method="POST" onSubmit={handleSubmit(onSubmit)}>
+                <Card className='rounded-md p-5 space-y-5'>
+                    <div>
+                        <Input
+                            isReadOnly
+                            type="text"
+                            {...register("code")}
+                            label="Code"
+                            variant='bordered'
+                            placeholder="Enter Text"
+                            labelPlacement='outside'
+                            value={code}
+                            onChange={(e) => setCode(e.target.value)}
+                        />
+                        {errors.code?.message}
+                    </div>
+                    <div>
+                        <Input
+                            isReadOnly
+                            type="text"
+                            {...register("name")}
+                            label="Role"
+                            variant='bordered'
+                            placeholder="Enter Text"
+                            labelPlacement='outside'
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
+                        />
+                        {errors.name?.message}
+                    </div>
+                    <div>
+                        <Textarea
+                            isReadOnly
+                            label="Description"
+                            {...register("description")}
+                            labelPlacement="outside"
+                            placeholder="Enter Text"
+                            value={description}
+                            onValueChange={setDescription}
+                        />
+                    </div>
+                    <div>
+                        <Input
+                            type="text"
+                            {...register("levelNumber")}
+                            label="Level Number"
+                            variant='bordered'
+                            placeholder="Enter Text"
+                            labelPlacement='outside'
+                            value={levelNumber}
+                        />
+                        {errors.code?.message}
+                    </div>
+                    <div className='flex justify-end gap-3'>
+                        <Link href={`/admin/master-role`}>
+                            <Button
+                                color='primary'
+                                variant="ghost"
+                            >
+                                Back
+                            </Button>
+                        </Link>
+                        {/* <Button
+                            type="submit"
+                            color='primary'
+                            variant="solid"
+                        >
+                            Save
+                        </Button> */}
+                    </div>
+                </Card>
+            </form>
+        </div >
+    )
+}
diff --git a/components/form/form-edit-article.tsx b/components/form/form-edit-article.tsx
index b3531ee..9d50f69 100644
--- a/components/form/form-edit-article.tsx
+++ b/components/form/form-edit-article.tsx
@@ -1,11 +1,11 @@
 'use client'
 import { getArticleById } from '@/service/article';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Button, Card, Chip, Input, Select, SelectItem } from '@nextui-org/react';
+import { Button, Card, Chip, Input, Select, SelectItem, Selection } from '@nextui-org/react';
 import JoditEditor from 'jodit-react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import Swal from 'sweetalert2';
 import withReactContent from 'sweetalert2-react-content';
@@ -30,6 +30,7 @@ export default function FormUpdateArticle() {
     const [content, setContent] = useState('');
     const MySwal = withReactContent(Swal);
     const [article, setArticle] = useState<any>();
+    const [typeId, setTypeId] = React.useState<Selection>(new Set([]));
     const pathname = usePathname();
     const splitPathname = pathname.split('/');
     const id = splitPathname[splitPathname.length - 1];
@@ -98,6 +99,11 @@ export default function FormUpdateArticle() {
             const res = await getArticleById(id);
             setArticle(res.data?.data);
             setTitle(res.data?.data?.title)
+            setTypeId(res.data?.data?.typeId)
+            setSlug(res.data?.data?.slug)
+            const tagsArray = res.data.data?.tags ? res.data.data.tags.split(",") : [];
+            setTags(tagsArray);
+
             console.log("Data Aritcle", res.data?.data);
         }
 
@@ -156,21 +162,19 @@ export default function FormUpdateArticle() {
                             labelPlacement='outside'
                         />
                         <div className="text-sm text-red-500">
-                            {(title?.length === 0 && errors.title) && errors.title.message}
-
+                            {(title?.length > 0 && errors.title) && errors.title.message}
                         </div>
                     </div>
                     <div>
                         <Select
                             label="Jenis Artikel"
                             {...register("article")}
-                            value={article?.type_id}
+                            selectedKeys={typeId}
+                            onSelectionChange={setTypeId}
                             variant="bordered"
                             labelPlacement='outside'
                             placeholder="Select"
-                            // selectedKeys={article}
                             className="max-w-xs"
-                        // onSelectionChange={setArticle}
                         >
                             {TypeId.map((data) => (
                                 <SelectItem key={data.key} value={data.key}>
@@ -185,23 +189,21 @@ export default function FormUpdateArticle() {
                     </div>
                     <div>
                         <Input
-                            isReadOnly
                             type="text"
                             {...register("slug")}
-                            value={article?.slug}
-                            onChange={(e) => setSlug(e.target.value)}
+                            value={slug}
+                            onValueChange={setSlug}
                             label="Slug"
                             variant='bordered'
                             placeholder="Enter Text"
                             labelPlacement='outside'
                         />
                         <div className="text-sm text-red-500">
-                            {(slug.length === 0 && errors.slug) && errors.slug.message}
+                            {(slug?.length > 0 && errors.slug) && errors.slug.message}
                         </div>
                     </div>
                     <div>
-                        <p className='text-sm'>Tags</p>
-                        {/* <Input
+                        <Input
                             label="Tags (Optional)"
                             {...register("tags")}
                             labelPlacement='outside'
@@ -210,14 +212,16 @@ export default function FormUpdateArticle() {
                             onChange={(e) => setNewTags(e.target.value)}
                             onKeyDown={handleKeyDown}
                             placeholder="Tambahkan tag baru dan tekan Enter"
-                        /> */}
+                        />
                         <div className="text-sm text-red-500">
                             {(tags.length === 0 && errors.tags) && errors.tags.message}
                         </div>
                         <div className="flex gap-2 border border-inherit mt-2 rounded-md p-1 items-center h-11">
-                            <Chip color='primary' onClose={() => handleClose("close")}>
-                                {article?.tags}
-                            </Chip>
+                            {tags.map((tag, index) => (
+                                <Chip key={index} color='primary' onClose={() => handleClose(tag)}>
+                                    {tag}
+                                </Chip>
+                            ))}
                         </div>
                     </div>
                     <div>
diff --git a/components/sidebar/sidebar.tsx b/components/sidebar/sidebar.tsx
index a8b3a2f..e5551df 100644
--- a/components/sidebar/sidebar.tsx
+++ b/components/sidebar/sidebar.tsx
@@ -165,9 +165,9 @@ const sideBarDummyData = [
     },
     {
         id: 9,
-        name: "Master User Levels",
+        name: "Master User Level",
         moduleId: 655,
-        moduleName: "Form Layout",
+        moduleName: "Form User Level",
         modulePathUrl: "/admin/master-user-level",
         parentId: -1,
         icon: <FormLayoutIcon />,
diff --git a/components/table/master-role-table.tsx b/components/table/master-role-table.tsx
index 66c546d..2d5c0d3 100644
--- a/components/table/master-role-table.tsx
+++ b/components/table/master-role-table.tsx
@@ -205,7 +205,7 @@ export default function MasterRoleTable() {
                                     >
 
                                         <Link
-                                            href={`/admin/article/detail/${role.id}`}
+                                            href={`/admin/master-role/detail/${role.id}`}
                                         >
                                             <EyeIconMdi className="inline mr-2 mb-1" />
                                             Detail
@@ -217,7 +217,7 @@ export default function MasterRoleTable() {
                                     >
 
                                         <Link
-                                            href={`/admin/article/edit/${role.id}`}
+                                            href={`/admin/master-role/edit/${role.id}`}
 
                                         >
                                             <CreateIconIon className="inline mr-2 mb-1" />
diff --git a/service/master-user-role.ts b/service/master-user-role.ts
index c02290c..c8c8789 100644
--- a/service/master-user-role.ts
+++ b/service/master-user-role.ts
@@ -15,6 +15,13 @@ export async function createMasterUserRole(data: any) {
     return await httpPost(pathUrl, headers, data);
 }
 
+export async function getMasterUserRoleById(id: any) {
+    const headers = {
+        "content-type": "application/json",
+    };
+    return await httpGet(`/user-roles/${id}`, headers);
+}
+
 export async function deleteMasterUserRole(id: string) {
     return await httpDeleteInterceptor(`/user-roles/${id}`);
 }
\ No newline at end of file