diff --git a/src/module/group/components/list_group.tsx b/src/module/group/components/list_group.tsx
index a91983c..b757893 100644
--- a/src/module/group/components/list_group.tsx
+++ b/src/module/group/components/list_group.tsx
@@ -1,8 +1,10 @@
-import { WARNA } from '@/module/_global';
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
 import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core';
+import { useAtom } from 'jotai';
 import React from 'react';
 import { HiOutlineOfficeBuilding } from 'react-icons/hi';
 import { HiMagnifyingGlass } from 'react-icons/hi2';
+import EditDrawerGroup from './ui/edit_drawer_group';
 
 const dataGroup = [
   {
@@ -62,7 +64,7 @@ export default function ListGroup() {
               border: `1px solid ${"#DCEED8"}`,
               padding: 10,
               borderRadius: 10
-            }}>
+            }} >
               <Box>
                 <ActionIcon variant="light" bg={'#DCEED8'} size={50} radius={100} aria-label="icon">
                   <HiOutlineOfficeBuilding color={WARNA.biruTua} size={25} />
@@ -75,6 +77,9 @@ export default function ListGroup() {
           </Box>
         )
       })}
+      {/* <LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title="LEMBAGA PENGKREDITAN DESA">
+        <EditDrawerGroup />
+      </LayoutDrawer> */}
     </Box>
   );
 }
diff --git a/src/module/group/components/ui/edit_drawer_group.tsx b/src/module/group/components/ui/edit_drawer_group.tsx
new file mode 100644
index 0000000..93b6328
--- /dev/null
+++ b/src/module/group/components/ui/edit_drawer_group.tsx
@@ -0,0 +1,72 @@
+'use client'
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { useAtom } from 'jotai';
+import React, { useState } from 'react';
+import { IoAddCircle } from "react-icons/io5";
+
+export default function EditDrawerGroup() {
+  // const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
+  // const [openDrawer, setOpenDrawer] = useAtom(isDrawer)
+
+  // function onCLose() {
+  //   setOpenDrawerGroup(false)
+  //   setOpenDrawer(false)
+  // }
+  return (
+    <Box>
+      {/* <Stack pt={10}>
+        <SimpleGrid
+          cols={{ base: 3, sm: 3, lg: 3 }}
+          onClick={() => setOpenDrawerGroup(true)}
+        >
+          <Flex justify={'center'} align={'center'} direction={'column'} >
+            <Box>
+              <IoAddCircle size={30} color={WARNA.biruTua} />
+            </Box>
+            <Box>
+              <Text c={WARNA.biruTua}>Tidak Aktif</Text>
+            </Box>
+          </Flex>
+          <Flex justify={'center'} align={'center'} direction={'column'} >
+            <Box>
+              <IoAddCircle size={30} color={WARNA.biruTua} />
+            </Box>
+            <Box>
+              <Text c={WARNA.biruTua}>Edit</Text>
+            </Box>
+          </Flex>
+        </SimpleGrid>
+      </Stack>
+      <LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'EDIT GRUP'}>
+        <Box pt={10}>
+          <TextInput
+            styles={{
+              input: {
+                color: WARNA.biruTua,
+                borderRadius: WARNA.biruTua,
+                borderColor: WARNA.biruTua,
+              },
+            }}
+            size="lg"
+            radius={10}
+            placeholder="Edit Grup"
+          />
+          <Box mt={'xl'}>
+            <Button
+              c={"white"}
+              bg={WARNA.biruTua}
+              size="lg"
+              radius={30}
+              fullWidth
+              onClick={onCLose}
+            >
+              EDIT
+            </Button>
+          </Box>
+        </Box>
+      </LayoutDrawer> */}
+    </Box>
+  );
+}
+