diff --git a/src/app/admin/(dashboard)/inovasi/ajukan-ide-inovatif/page.tsx b/src/app/admin/(dashboard)/inovasi/ajukan-ide-inovatif/page.tsx
index 6ff04673..fa50fbcf 100644
--- a/src/app/admin/(dashboard)/inovasi/ajukan-ide-inovatif/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/ajukan-ide-inovatif/page.tsx
@@ -1,28 +1,43 @@
 import colors from '@/con/colors';
 import { Box, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title } from '@mantine/core';
+import { IconSearch } from '@tabler/icons-react';
 import React from 'react';
+import HeaderSearch from '../../_com/header';
 
-function Page() {
+function AjukanIdeInofativ() {
+  return (
+    <Box>
+      <HeaderSearch
+        title='Ajukan Ide Inovatif'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListAjukanIdeInovatif />
+    </Box>
+  );
+}
+
+function ListAjukanIdeInovatif() {
   return (
     <Box py={5}>
-    <Paper bg={colors['white-1']} p={'md'}>
-      <Stack gap={"xs"}>
-        <Title order={3}>Ajukan Ide Inovatif</Title>
-        <Box>
-          <Table striped withRowBorders withColumnBorders withTableBorder>
-            <TableThead>
-              <TableTr>
-                <TableTh>No</TableTh>
-                <TableTh>Nama</TableTh>
-                <TableTh>Alamat</TableTh>
-                <TableTh>Nama Ide Inovatif</TableTh>
-                <TableTh>Deskripsi</TableTh>
-                <TableTh>Masalah yang ingin diatasi</TableTh>
-                <TableTh>Benefit</TableTh>
-              </TableTr>
-            </TableThead>
-            <TableTbody>
-              
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>List Ajukan Ide Inovatif</Title>
+          <Box>
+            <Table striped withRowBorders withColumnBorders withTableBorder>
+              <TableThead>
+                <TableTr>
+                  <TableTh>No</TableTh>
+                  <TableTh>Nama</TableTh>
+                  <TableTh>Alamat</TableTh>
+                  <TableTh>Nama Ide Inovatif</TableTh>
+                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>Masalah yang ingin diatasi</TableTh>
+                  <TableTh>Benefit</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+
                 <TableTr>
                   <TableTd>1</TableTd>
                   <TableTd>nama</TableTd>
@@ -32,13 +47,13 @@ function Page() {
                   <TableTd>masalah</TableTd>
                   <TableTd>benefit</TableTd>
                 </TableTr>
-              
-            </TableTbody>
-          </Table> </Box>
-      </Stack>
-    </Paper>
-  </Box>
-  );
+
+              </TableTbody>
+            </Table> </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
 }
 
-export default Page;
+export default AjukanIdeInofativ;
diff --git a/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/create/page.tsx b/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/create/page.tsx
index 101f56e2..8da1f73f 100644
--- a/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/create/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/create/page.tsx
@@ -1,34 +1,44 @@
+'use client'
 import colors from '@/con/colors';
 import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconImageInPicture } from '@tabler/icons-react';
-import React from 'react';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+
 
 function CreateInfoTeknologiTepatGuna() {
+  const router = useRouter();
   return (
     <Box>
-      <Stack gap={'xs'}>
-        <Paper w={{base: "100%", md: "50%"}} p={"md"} bg={colors['white-1']}>
-          <Stack gap={"xs"}>
-            <Title order={4}>Create Info Teknologi Tepat Guna</Title>
-            <Box>
-              <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
-              <IconImageInPicture size={24}/>
-            </Box>
-            <TextInput
-              label={<Text fz={"sm"} fw={"bold"}>Nama Info Teknologi Tepat Guna</Text>}
-              placeholder="Masukkan nama info teknologi tepat guna"
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Info Teknologi Tepat Guna</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Info Teknologi Tepat Guna</Text>}
+          placeholder='Masukkan nama info teknologi tepat guna'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Info Teknologi Tepat Guna</Text>
+            <KeamananEditor
+              showSubmit={false}
             />
-            <TextInput
-              label={<Text fz={"sm"} fw={"bold"}>Deskripsi Info Teknologi Tepat Guna</Text>}
-              placeholder="Masukkan deskripsi info teknologi tepat guna"
-            />
-            <Group>
-              <Button bg={colors['blue-button']}>Submit</Button>
-            </Group>
-          </Stack>
-        </Paper>
-      </Stack>
-    </Box>
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
   );
 }
 
diff --git a/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/detail/page.tsx b/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/detail/page.tsx
new file mode 100644
index 00000000..13733e19
--- /dev/null
+++ b/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/detail/page.tsx
@@ -0,0 +1,62 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
+import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailInfoTeknologiTepatGuna() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Info Teknologi Tepat Guna</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Info Teknologi Tepat Guna</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                <Image src={"/"} alt="gambar" />
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                <Text fz={"lg"} >Test Deskripsi</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/inovasi/info-teknologi-tepat-guna/edit')} color="green">
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus potensi ini?"
+      /> */}
+    </Box>
+  );
+}
+
+export default DetailInfoTeknologiTepatGuna;
diff --git a/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/edit/page.tsx b/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/edit/page.tsx
new file mode 100644
index 00000000..c69b8370
--- /dev/null
+++ b/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/edit/page.tsx
@@ -0,0 +1,45 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+
+
+function EditInfoTeknologiTepatGuna() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Edit Info Teknologi Tepat Guna</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Info Teknologi Tepat Guna</Text>}
+          placeholder='Masukkan nama info teknologi tepat guna'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Info Teknologi Tepat Guna</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditInfoTeknologiTepatGuna;
diff --git a/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/listData/page.tsx b/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/listData/page.tsx
deleted file mode 100644
index 45f080e9..00000000
--- a/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/listData/page.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Paper, SimpleGrid, Stack, Title } from '@mantine/core';
-import React from 'react';
-
-function ListDataInfoTeknologiTepatGuna() {
-  return (
-    <Box>
-      <Stack gap={'xs'}>
-        <Paper p={'md'} bg={colors['BG-trans']}>
-          <Title order={4}>List Data Info Teknologi Tepat Guna</Title>
-          <SimpleGrid py={10} cols={{ base: 1, md: 4 }}>
-            <Paper p={'md'} bg={colors['white-1']}>
-              Data 1
-            </Paper>
-            <Paper p={'md'} bg={colors['white-1']}>
-              Data 2
-            </Paper>
-            <Paper p={'md'} bg={colors['white-1']}>
-              Data 3
-            </Paper>
-            <Paper p={'md'} bg={colors['white-1']}>
-              Data 4
-            </Paper>
-          </SimpleGrid>
-        </Paper>
-      </Stack>
-    </Box>
-  );
-}
-
-export default ListDataInfoTeknologiTepatGuna;
diff --git a/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/page.tsx b/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/page.tsx
index 68273de5..0d842475 100644
--- a/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/page.tsx
@@ -1,18 +1,58 @@
-import { Box, Stack, Title } from '@mantine/core';
-import React from 'react';
-import CreateInfoTeknologiTepatGuna from './create/page';
-import ListDataInfoTeknologiTepatGuna from './listData/page';
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
+import { useRouter } from 'next/navigation';
 
-function Page() {
+function InfoTeknologiTepatGuna() {
   return (
     <Box>
-      <Stack gap={'xs'}>
-        <Title order={3}>Info Teknologi Tepat Guna</Title>
-        <CreateInfoTeknologiTepatGuna/>
-        <ListDataInfoTeknologiTepatGuna/>
-      </Stack>
+      <HeaderSearch
+        title='Info Teknologi Tepat Guna'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListInfoTeknologiTepatGuna/>
     </Box>
   );
 }
 
-export default Page;
+function ListInfoTeknologiTepatGuna() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Info Teknologi Tepat Guna'
+          href='/admin/inovasi/info-teknologi-tepat-guna/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Info Teknologi Tepat Guna</TableTh>
+              <TableTh>Image</TableTh>
+              <TableTh>Deskripsi</TableTh>
+              <TableTh>Detail</TableTh>
+              </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Info Teknologi Tepat Guna 1</TableTd>
+              <TableTd>Image</TableTd>
+              <TableTd>Deskripsi</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/inovasi/info-teknologi-tepat-guna/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default InfoTeknologiTepatGuna;
diff --git a/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/create/page.tsx b/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/create/page.tsx
new file mode 100644
index 00000000..4bfdf210
--- /dev/null
+++ b/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/create/page.tsx
@@ -0,0 +1,50 @@
+'use client'
+import { KeamananEditor } from '@/app/admin/(dashboard)/keamanan/_com/keamananEditor';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+
+function CreateKolaborasiInovasi() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Kolaborasi Inovasi</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Kolaborasi Inovasi</Text>}
+          placeholder='Masukkan nama kolaborasi inovasi'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat Kolaborasi Inovasi</Text>}
+          placeholder='Masukkan deskripsi singkat kolaborasi inovasi'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Kolaborasi Inovasi</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreateKolaborasiInovasi;
diff --git a/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/detail/page.tsx b/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/detail/page.tsx
new file mode 100644
index 00000000..b52fe1e8
--- /dev/null
+++ b/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/detail/page.tsx
@@ -0,0 +1,66 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
+import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailKolaborasiInovasi() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Kolaborasi Inovasi</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Kolaborasi Inovasi</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                <Image src={"/"} alt="gambar" />
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi Singkat</Text>
+                <Text fz={"lg"}>Test Deskripsi Singkat</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                <Text fz={"lg"} >Test Deskripsi</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/inovasi/kolaborasi-inovasi/edit')} color="green">
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus potensi ini?"
+      /> */}
+    </Box>
+  );
+}
+
+export default DetailKolaborasiInovasi;
diff --git a/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/edit/page.tsx b/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/edit/page.tsx
new file mode 100644
index 00000000..b3553f4e
--- /dev/null
+++ b/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/edit/page.tsx
@@ -0,0 +1,49 @@
+'use client'
+import { KeamananEditor } from '@/app/admin/(dashboard)/keamanan/_com/keamananEditor';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+function EditKolaborasiInovasi() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Edit Kolaborasi Inovasi</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Kolaborasi Inovasi</Text>}
+          placeholder='Masukkan nama kolaborasi inovasi'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat Kolaborasi Inovasi</Text>}
+          placeholder='Masukkan deskripsi singkat kolaborasi inovasi'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Kolaborasi Inovasi</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditKolaborasiInovasi;
diff --git a/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/page.tsx b/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/page.tsx
index 9ffe9a5d..7344cdb1 100644
--- a/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/page.tsx
@@ -1,35 +1,58 @@
+'use client'
 import colors from '@/con/colors';
-import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
-import React from 'react';
-import KolaborasiInovasi from './ui/kolaborasiInovasi/page';
-import MitraKolaborasi from './ui/mitraKolaborasi/page';
+import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
+import { useRouter } from 'next/navigation';
 
-function Page() {
+function KolaborasiInovasi() {
   return (
     <Box>
-      <Stack>
-      <Title order={3}>Kolaborasi Inovasi</Title>
-        <Tabs color={colors['blue-button']} variant='pills' defaultValue={"Kolaborasi Inovasi"}>
-          <TabsList p={"xs"} bg={"#BBC8E7FF"}>
-            <TabsTab value="Kolaborasi Inovasi">
-               Kolaborasi Inovasi
-            </TabsTab>
-            <TabsTab value="Mitra Kolaborasi">
-              Mitra Kolaborasi
-            </TabsTab>
-          </TabsList>
-
-          <TabsPanel value="Kolaborasi Inovasi">
-            <KolaborasiInovasi/>
-          </TabsPanel>
-
-          <TabsPanel value="Mitra Kolaborasi">
-            <MitraKolaborasi/>
-          </TabsPanel>
-        </Tabs>
-      </Stack>
+      <HeaderSearch
+        title='Kolaborasi Inovasi'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListKolaborasiInovasi/>
     </Box>
   );
 }
 
-export default Page;
+function ListKolaborasiInovasi() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Kolaborasi Inovasi'
+          href='/admin/inovasi/kolaborasi-inovasi/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Kolaborasi Inovasi</TableTh>
+              <TableTh>Image</TableTh>
+              <TableTh>Deskripsi Singkat</TableTh>
+              <TableTh>Detail</TableTh>
+              </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Kolaborasi Inovasi 1</TableTd>
+              <TableTd>Image</TableTd>
+              <TableTd>Deskripsi Singkat</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/inovasi/kolaborasi-inovasi/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default KolaborasiInovasi;
diff --git a/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/ui/kolaborasiInovasi/page.tsx b/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/ui/kolaborasiInovasi/page.tsx
deleted file mode 100644
index 06233369..00000000
--- a/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/ui/kolaborasiInovasi/page.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
-import React from 'react';
-
-function KolaborasiInovasi() {
-  return (
-    <Box py={15}>
-      <Stack gap={"xs"}>
-        <Box>
-          <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-            <Stack gap={"xs"}>
-              <Title order={4}>Create Kolaborasi Inovasi</Title>
-              <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Tahun</Text>}
-                placeholder="Masukkan tahun"
-              />
-              <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Nama Kolaborasi Inovasi</Text>}
-                placeholder="Masukkan nama kolaborasi inovasi"
-              />
-              <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Deskripsi Kolaborasi Inovasi</Text>}
-                placeholder="Masukkan deskripsi kolaborasi inovasi"
-              />
-
-            </Stack>
-          </Paper>
-        </Box>
-        <Box>
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Title order={4}>List Data Kolaborasi Inovasi</Title>
-            <SimpleGrid py={10} cols={{ base: 1, md: 4 }}>
-              <Paper p={'md'} bg={colors['white-1']}>
-                Data 1
-              </Paper>
-              <Paper p={'md'} bg={colors['white-1']}>
-                Data 2
-              </Paper>
-              <Paper p={'md'} bg={colors['white-1']}>
-                Data 3
-              </Paper>
-              <Paper p={'md'} bg={colors['white-1']}>
-                Data 4
-              </Paper>
-            </SimpleGrid>
-          </Paper>
-        </Box>
-      </Stack>
-    </Box>
-  );
-}
-
-export default KolaborasiInovasi;
diff --git a/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/ui/mitraKolaborasi/page.tsx b/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/ui/mitraKolaborasi/page.tsx
deleted file mode 100644
index bb82016e..00000000
--- a/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/ui/mitraKolaborasi/page.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
-import colors from '@/con/colors';
-import { IconImageInPicture } from '@tabler/icons-react';
-
-function MitraKolaborasi() {
-  return (
-    <Box py={15}>
-      <Stack gap={'xs'}>
-        <Box>
-        <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-          <Stack gap={'xs'}>
-            <Title order={4}>Create Mitra Kolaborasi</Title>
-            <TextInput
-              label={<Text fz={"sm"} fw={"bold"}>Nama Mitra Kolaborasi</Text>}
-              placeholder="Masukkan nama mitra kolaborasi"
-            />
-            <Box>
-              <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
-              <IconImageInPicture size={50}/>
-            </Box>
-            <Group>
-              <Button bg={colors['blue-button']}>Submit</Button>
-            </Group>
-          </Stack>
-        </Paper>
-        </Box>
-        <Box>
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Title order={4}>List Data Kolaborasi Inovasi</Title>
-            <SimpleGrid py={10} cols={{ base: 1, md: 4 }}>
-              <Paper p={'md'} bg={colors['white-1']}>
-                Foto 1
-              </Paper>
-              <Paper p={'md'} bg={colors['white-1']}>
-                Foto 2
-              </Paper>
-              <Paper p={'md'} bg={colors['white-1']}>
-                Foto 3
-              </Paper>
-              <Paper p={'md'} bg={colors['white-1']}>
-                Foto 4
-              </Paper>
-            </SimpleGrid>
-          </Paper>
-        </Box>
-      </Stack>
-    </Box>
-  );
-}
-
-export default MitraKolaborasi;
diff --git a/src/app/admin/(dashboard)/inovasi/layanan-online-desa/create/page.tsx b/src/app/admin/(dashboard)/inovasi/layanan-online-desa/create/page.tsx
new file mode 100644
index 00000000..a5a78206
--- /dev/null
+++ b/src/app/admin/(dashboard)/inovasi/layanan-online-desa/create/page.tsx
@@ -0,0 +1,44 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+
+function CreateLayananOnlineDesa() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Layanan Online Desa</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Layanan Online Desa</Text>}
+          placeholder='Masukkan nama LayananOnlineDesa'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Layanan Online Desa</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreateLayananOnlineDesa;
diff --git a/src/app/admin/(dashboard)/inovasi/layanan-online-desa/detail/page.tsx b/src/app/admin/(dashboard)/inovasi/layanan-online-desa/detail/page.tsx
new file mode 100644
index 00000000..ffa68d5e
--- /dev/null
+++ b/src/app/admin/(dashboard)/inovasi/layanan-online-desa/detail/page.tsx
@@ -0,0 +1,66 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
+import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailLayananOnlineDesa() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Layanan Online Desa</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                <Image src={"/"} alt="gambar" />
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Layanan Online Desa</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                <Text fz={"lg"}>Test Deskripsi</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Konten</Text>
+                <Text fz={"lg"} >Test Konten</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/inovasi/layanan-online-desa/edit')} color="green">
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus potensi ini?"
+      /> */}
+    </Box>
+  );
+}
+
+export default DetailLayananOnlineDesa;
diff --git a/src/app/admin/(dashboard)/inovasi/layanan-online-desa/edit/page.tsx b/src/app/admin/(dashboard)/inovasi/layanan-online-desa/edit/page.tsx
new file mode 100644
index 00000000..3f844e7f
--- /dev/null
+++ b/src/app/admin/(dashboard)/inovasi/layanan-online-desa/edit/page.tsx
@@ -0,0 +1,42 @@
+'use client'
+import colors from "@/con/colors";
+import { Box, Button, Paper, Stack, Title, TextInput, Group, Text } from "@mantine/core";
+import { IconArrowBack, IconImageInPicture } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { KeamananEditor } from "../../../keamanan/_com/keamananEditor";
+
+export default function EditLayananOnlineDesa() {
+    const router = useRouter();
+    return (
+      <Box>
+        <Box mb={10}>
+          <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+            <IconArrowBack color={colors['blue-button']} size={25}/>
+          </Button>
+        </Box>
+  
+        <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+          <Stack gap={"xs"}>
+            <Title order={4}>Edit Layanan Online Desa</Title>
+            <Box>
+              <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+              <IconImageInPicture size={50} />
+            </Box>
+            <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Nama Layanan Online Desa</Text>}
+            placeholder='Masukkan nama LayananOnlineDesa'
+            />
+            <Box>
+              <Text fw={"bold"} fz={"sm"}>Deskripsi Layanan Online Desa</Text>
+              <KeamananEditor
+                showSubmit={false}
+              />
+            </Box>
+            <Group>
+              <Button bg={colors['blue-button']}>Submit</Button>
+            </Group>
+         </Stack>
+        </Paper>
+     </Box>
+    );
+  }
\ No newline at end of file
diff --git a/src/app/admin/(dashboard)/inovasi/layanan-online-desa/page.tsx b/src/app/admin/(dashboard)/inovasi/layanan-online-desa/page.tsx
index 6274543f..2db5b2f7 100644
--- a/src/app/admin/(dashboard)/inovasi/layanan-online-desa/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/layanan-online-desa/page.tsx
@@ -1,41 +1,56 @@
+'use client'
 import colors from '@/con/colors';
-import { Box, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconImageInPicture } from '@tabler/icons-react';
-import React from 'react';
+import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
+import { useRouter } from 'next/navigation';
 
-function Page() {
+function LayananOnlineDesa() {
   return (
     <Box>
-      <Stack gap={"xs"}>
-        <Box>
-          <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-            <Stack gap={'xs'}>
-              <Title order={3}>Layanan Online Desa</Title>
-              <TextInput
-                label={<Text fz={'sm'} fw={'bold'}>Nama Layanan</Text>}
-                placeholder="Masukkan nama layanan"
-              />
-              <TextInput
-                label={<Text fz={'sm'} fw={'bold'}>Deskripsi Layanan</Text>}
-                placeholder="Masukkan deskripsi layanan"
-              />
-              <Box>
-                <Text fz={'sm'} fw={'bold'}>Upload Gambar Layanan</Text>
-                <IconImageInPicture size={24} />
-              </Box>
-            </Stack>
-          </Paper>
-        </Box>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'}>
-            <Stack gap={'xs'}>
-              <Title order={3}>List Data Layanan Online Desa</Title>
-            </Stack>
-          </Paper>
-        </Box>
-      </Stack>
+      <HeaderSearch
+        title='Layanan Online Desa'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListLayananOnlineDesa/>
     </Box>
   );
 }
 
-export default Page;
+function ListLayananOnlineDesa() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Layanan Online Desa'
+          href='/admin/inovasi/layanan-online-desa/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Layanan</TableTh>
+              <TableTh>Deskripsi</TableTh>
+              <TableTh>Detail</TableTh>
+              </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Layanan Online Desa 1</TableTd>
+              <TableTd>Deskripsi Layanan Online Desa 1</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/inovasi/layanan-online-desa/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default LayananOnlineDesa;
diff --git a/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/create/page.tsx b/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/create/page.tsx
index 73761550..9894191c 100644
--- a/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/create/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/create/page.tsx
@@ -1,37 +1,49 @@
+'use client'
 import colors from '@/con/colors';
 import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconImageInPicture } from '@tabler/icons-react';
-import React from 'react';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
 
-function ProgramKreatifCreate() {
+
+function CreateProgramKreatifDesa() {
+  const router = useRouter();
   return (
     <Box>
-      <Stack gap={"xs"}>
-        <Paper w={{base: "100%", md: "50%"}} p={"md"} bg={colors["white-1"]}>
-          <Stack gap={"xs"}>
-            <Title order={4}>Create Program Kreatif Desa</Title>
-            <Box>
-              <Text fz={"sm"} fw={"bold"}>Gambar</Text>
-              <IconImageInPicture size={24}/>
-            </Box>
-            <TextInput
-            label={<Text fz={"sm"} fw={"bold"}>Nama Program</Text>}
-            placeholder="Masukkan nama program"
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Program Kreatif Desa</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Program Kreatif Desa</Text>}
+          placeholder='Masukkan nama program kreatif desa'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat Program Kreatif Desa</Text>}
+          placeholder='Masukkan deskripsi singkat program kreatif desa'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Program Kreatif Desa</Text>
+            <KeamananEditor
+              showSubmit={false}
             />
-            <TextInput
-            label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>}
-            placeholder="Masukkan deskripsi"
-            />
-            <Group>
-              <Button
-              bg={colors["blue-button"]}
-              >Simpan</Button>
-            </Group>
-          </Stack>
-        </Paper>
-      </Stack>
-    </Box>
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
   );
 }
 
-export default ProgramKreatifCreate;
+export default CreateProgramKreatifDesa;
diff --git a/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/detail/page.tsx b/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/detail/page.tsx
new file mode 100644
index 00000000..aa154fd2
--- /dev/null
+++ b/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/detail/page.tsx
@@ -0,0 +1,66 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
+import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailProgramKreatifDesa() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Program Kreatif Desa</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Program Kreatif Desa</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                <Image src={"/"} alt="gambar" />
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi Singkat</Text>
+                <Text fz={"lg"}>Test Deskripsi Singkat</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                <Text fz={"lg"} >Test Deskripsi</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/inovasi/program-kreatif-desa/edit')} color="green">
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus potensi ini?"
+      /> */}
+    </Box>
+  );
+}
+
+export default DetailProgramKreatifDesa;
diff --git a/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/edit/page.tsx b/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/edit/page.tsx
new file mode 100644
index 00000000..7368cb26
--- /dev/null
+++ b/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/edit/page.tsx
@@ -0,0 +1,49 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+
+
+function EditProgramKreatifDesa() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Edit Program Kreatif Desa</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Program Kreatif Desa</Text>}
+          placeholder='Masukkan nama Program Kreatif Desa'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat Program Kreatif Desa</Text>}
+          placeholder='Masukkan deskripsi singkat program kreatif desa'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Program Kreatif Desa</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditProgramKreatifDesa;
diff --git a/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/listData/page.tsx b/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/listData/page.tsx
deleted file mode 100644
index 4089bed5..00000000
--- a/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/listData/page.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Paper, SimpleGrid, Stack, Title } from '@mantine/core';
-import React from 'react';
-
-function ListDataProgramKreatifDesa() {
-  return (
-    <Box>
-      <Stack gap={"xs"}>
-        <Title order={3}>List Data Program Kreatif Desa</Title>
-        <SimpleGrid cols={{ base: 1, md: 4 }}>
-          <Paper p={"md"} bg={colors["white-1"]}>
-          Data 1
-          </Paper>
-          <Paper p={"md"} bg={colors["white-1"]}>
-          Data 2
-          </Paper>
-          <Paper p={"md"} bg={colors["white-1"]}>
-          Data 3
-          </Paper>
-          <Paper p={"md"} bg={colors["white-1"]}>
-          Data 4
-          </Paper>
-        </SimpleGrid>
-      </Stack>
-    </Box>
-  );
-}
-
-export default ListDataProgramKreatifDesa;
diff --git a/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/page.tsx b/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/page.tsx
index c529c95d..50ed41fc 100644
--- a/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/page.tsx
@@ -1,18 +1,58 @@
-import { Box, Stack, Title } from '@mantine/core';
-import React from 'react';
-import ProgramKreatifCreate from './create/page';
-import ListDataProgramKreatifDesa from './listData/page';
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
+import { useRouter } from 'next/navigation';
 
-function Page() {
+function ProgramKreatifDesa() {
   return (
     <Box>
-      <Stack gap={"xs"}>
-        <Title order={3}>Program Kreatif Desa</Title>
-        <ProgramKreatifCreate />
-        <ListDataProgramKreatifDesa />
-      </Stack>
+      <HeaderSearch
+        title='Program Kreatif Desa'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListProgramKreatifDesa/>
     </Box>
   );
 }
 
-export default Page;
+function ListProgramKreatifDesa() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Program Kreatif Desa'
+          href='/admin/inovasi/program-kreatif-desa/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Program Kreatif Desa</TableTh>
+              <TableTh>Image</TableTh>
+              <TableTh>Deskripsi Singkat</TableTh>
+              <TableTh>Detail</TableTh>
+              </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Program Kreatif Desa 1</TableTd>
+              <TableTd>Image</TableTd>
+              <TableTd>Deskripsi Singkat</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/inovasi/program-kreatif-desa/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default ProgramKreatifDesa;