diff --git a/src/module/calender/ui/date_event_division.tsx b/src/module/calender/ui/date_event_division.tsx
index ea708fb..56699eb 100644
--- a/src/module/calender/ui/date_event_division.tsx
+++ b/src/module/calender/ui/date_event_division.tsx
@@ -1,5 +1,5 @@
 import { WARNA } from '@/module/_global';
-import { Box, Divider, Group, Indicator, Text } from '@mantine/core';
+import { Box, Divider, Group, Indicator, Skeleton, Text } from '@mantine/core';
 import { DatePicker, DatePickerProps } from '@mantine/dates';
 import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
@@ -7,6 +7,7 @@ import { funGetAllCalender } from '../lib/api_calender';
 import { useSetState, useShallowEffect } from '@mantine/hooks';
 import { IDataCalender } from '../lib/type_calender';
 import moment from 'moment';
+import _ from 'lodash';
 
 
 export default function DateEventDivision() {
@@ -14,13 +15,18 @@ export default function DateEventDivision() {
   const router = useRouter()
   const param = useParams<{ id: string, detail: string }>()
   const [isDate, setDate] = useSetState<any>(moment().format('YYYY-MM-DD'))
+  const [loading, setLoading] = useState(true)
 
   const getData = async (tgl: any) => {
     try {
+      setLoading(true)
       const response = await funGetAllCalender('?division=' + param.id + '&date=' + tgl)
       setData(response.data)
+      setLoading(false)
     } catch (error) {
       console.log(error)
+    } finally {
+      setLoading(false)
     }
   }
 
@@ -60,30 +66,42 @@ export default function DateEventDivision() {
         <Text mb={10} mt={20} fw={"bold"}>
           Event
         </Text>
-        {isData.length > 0 ? (
-          isData.map((event, index) => {
-            const bgColor = ['#D8D8F1', '#FED6C5'][index % 2]
-            const colorDivider = ['#535FCA', '#A7A7A7'][index % 2]
-            return (
-              <Box key={event.id} mt={10}>
-                <Box onClick={() => router.push(`/division/${param.id}/calender/${event.id}`)} bg={bgColor} pl={15} p={10} style={{
-                  borderRadius: 10
-                }} h={113}>
-                  <Group>
-                    <Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
-                    <Box>
-                      <Text>{event.timeStart} - {event.timeEnd}</Text>
-                      <Text fw={"bold"}>{event.title}</Text>
-                      <Text>Dibuat oleh : {event.user_name}</Text>
-                    </Box>
-                  </Group>
+        {loading ? 
+          Array(6)
+          .fill(null)
+          .map((_, i) => (
+            <Box key={i} mb={10}>
+              <Skeleton height={100} width={"100%"} radius={"md"} />
+            </Box>
+          ))
+          :
+          _.isEmpty(isData)
+            ?
+            <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '20vh' }}>
+              <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada event</Text>
+            </Box>
+            :
+            isData.map((event, index) => {
+              const bgColor = ['#D8D8F1', '#FED6C5'][index % 2]
+              const colorDivider = ['#535FCA', '#A7A7A7'][index % 2]
+              return (
+                <Box key={event.id} mt={10}>
+                  <Box onClick={() => router.push(`/division/${param.id}/calender/${event.id}`)} bg={bgColor} pl={15} p={10} style={{
+                    borderRadius: 10
+                  }} h={113}>
+                    <Group>
+                      <Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
+                      <Box>
+                        <Text>{event.timeStart} - {event.timeEnd}</Text>
+                        <Text fw={"bold"}>{event.title}</Text>
+                        <Text>Dibuat oleh : {event.user_name}</Text>
+                      </Box>
+                    </Group>
+                  </Box>
                 </Box>
-              </Box>
-            )
-          })
-        ) : (
-          <Text c={WARNA.biruTua}>Tidak ada event</Text>
-        )}
+              )
+            })
+        }
       </Box>
     </Box>
   );
diff --git a/src/module/calender/ui/history_division_calender.tsx b/src/module/calender/ui/history_division_calender.tsx
index 84bb9d3..329d680 100644
--- a/src/module/calender/ui/history_division_calender.tsx
+++ b/src/module/calender/ui/history_division_calender.tsx
@@ -1,6 +1,6 @@
 "use client"
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
-import { Box, Center, Flex, Grid, Group, Text, TextInput } from '@mantine/core';
+import { Box, Center, Flex, Grid, Group, Skeleton, Text, TextInput } from '@mantine/core';
 import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import { HiMagnifyingGlass } from 'react-icons/hi2';
@@ -9,63 +9,25 @@ import { funGetAllCalender, funGetHostory } from '../lib/api_calender';
 import { useShallowEffect } from '@mantine/hooks';
 import moment from 'moment';
 import "moment/locale/id";
-
-const history = [
-  {
-    dateStart: "21",
-    data: [
-      {
-        id: 1,
-        title: "Pembahasan Mengenai Darmasaba",
-        timeEnd: "10:00",
-        timeStart: "10.00",
-        status: "Selesai",
-      },
-      {
-        id: 2,
-        title: "Pembahasan Mengenai Darmasaba",
-        timeEnd: "10:00",
-        timeStart: "13.00 - 14.00",
-      },
-    ]
-  },
-  {
-    dateStart: "21",
-    data: [
-      {
-        id: 1,
-        title: "Pembahasan Mengenai Darmasaba",
-        timeEnd: "10:00",
-        timeStart: "10.00",
-      },
-      {
-        id: 1,
-        title: "Pembahasan Mengenai Darmasaba",
-        timeEnd: "10:00",
-        timeStart: "13.00",
-      },
-      {
-        id: 1,
-        title: "Pembahasan Mengenai Darmasaba",
-        timeEnd: "10:00",
-        timeStart: "15.00",
-      },
-    ]
-  },
-]
+import _ from 'lodash';
 
 export default function HistoryDivisionCalender() {
   const [isData, setData] = useState<IHistoryCalender[]>([])
   const router = useRouter()
   const param = useParams<{ id: string, detail: string }>()
   const [searchQuery, setSearchQuery] = useState('')
+  const [loading, setLoading] = useState(true)
 
   const getData = async () => {
     try {
+      setLoading(true)
       const response = await funGetHostory('?division=' + param.id + '&search=' + searchQuery)
       setData(response.data)
+      setLoading(false)
     } catch (error) {
       console.log(error)
+    } finally {
+      setLoading(false)
     }
   }
 
@@ -74,7 +36,7 @@ export default function HistoryDivisionCalender() {
   }, [searchQuery])
   return (
     <Box>
-      <LayoutNavbarNew back="/calender" title="Riwayat kalender" menu />
+      <LayoutNavbarNew back={`/division/${param.id}/calender/`} title="Riwayat kalender" menu />
       <Box p={20}>
         <TextInput
           styles={{
@@ -96,28 +58,59 @@ export default function HistoryDivisionCalender() {
             borderRadius: 10,
             padding: 20
           }}>
-            {isData.map((v, i) => {
-              return (
-                <Grid key={i}>
-                  <Grid.Col span={2}>
+            {loading ?
+              Array(6)
+                .fill(null)
+                .map((_, i) => (
+                  <Box key={i} mb={10}>
+                    <Grid >
+                      <Grid.Col span={2}>
+                        <Flex justify={"center"} direction={'column'}>
+                          <Skeleton height={30} width={"100%"} radius={"md"} />
+                          <Skeleton height={20} width={"100%"} radius={"md"} mt={10} />
+                        </Flex>
+                      </Grid.Col>
+                      <Grid.Col span={'auto'}>
+                        {[...Array(1)].map((_, x) => (
+                          <Box mb={10} key={x}>
+                            <Skeleton height={20} width={"100%"} radius={"md"} />
+                            <Skeleton height={20} width={"100%"} radius={"md"} mt={10} />
+                          </Box>
+                        ))}
+                      </Grid.Col>
+                    </Grid>
+                  </Box>
+                ))
+              :
+              _.isEmpty(isData)
+              ?
+              <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
+                 <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada history</Text>
+              </Box>
+              :
+              isData.map((v, i) => {
+                return (
+                  <Grid key={i}>
+                    <Grid.Col span={2}>
                       <Flex justify={"center"} direction={'column'}>
                         <Text ta={"center"} fz={20} fw={'bold'}>{moment(v.dateStart).format('D MMM')}</Text>
                         <Text ta={"center"} fz={15}>{moment(v.dateStart).format('dddd')}</Text>
                       </Flex>
-                  </Grid.Col>
-                  <Grid.Col span={'auto'}>
-                    {v.data.map((d, x) => {
-                      return (
-                        <Box mb={10} key={x} >
-                          <Text fw={"bold"}>{d.title}</Text>
-                          <Text>{d.timeStart} | {d.timeEnd}</Text>
-                        </Box>
-                      )
-                    })}
-                  </Grid.Col>
-                </Grid>
-              )
-            })}
+                    </Grid.Col>
+                    <Grid.Col span={'auto'}>
+                      {v.data.map((d, x) => {
+                        return (
+                          <Box mb={10} key={x} >
+                            <Text fw={"bold"}>{d.title}</Text>
+                            <Text>{d.timeStart} | {d.timeEnd}</Text>
+                          </Box>
+                        )
+                      })}
+                    </Grid.Col>
+                  </Grid>
+                )
+              })
+            }
           </Box>
         </Box>
       </Box>
diff --git a/src/module/calender/ui/navbar_create_division_calender.tsx b/src/module/calender/ui/navbar_create_division_calender.tsx
index 01720d3..5fd9e6d 100644
--- a/src/module/calender/ui/navbar_create_division_calender.tsx
+++ b/src/module/calender/ui/navbar_create_division_calender.tsx
@@ -22,6 +22,15 @@ export default function NavbarCreateDivisionCalender() {
   const memberValue = memberUser.get() as IFormMemberCalender[]
   const [openMember, setOpenMember] = useState(false)
   const param = useParams<{ id: string, detail: string }>()
+  const [touched, setTouched] = useState({
+    title: false,
+    dateStart: false,
+    timeStart: false,
+    timeEnd: false,
+    linkMeet: false,
+    repeatEventTyper: false,
+    desc: false
+  })
   const [isData, setData] = useState({
     idDivision: "",
     title: "",
@@ -50,7 +59,7 @@ export default function NavbarCreateDivisionCalender() {
           desc: isData.desc,
           member: memberValue
         })
-  
+
         if (response.success) {
           setModal(false)
           router.push(`/division/${param.id}/calender`)
@@ -69,7 +78,7 @@ export default function NavbarCreateDivisionCalender() {
         } else {
           toast.error(response.message)
           setModal(false)
-        } 
+        }
       }
     } catch (error) {
       console.log(error)
@@ -89,6 +98,7 @@ export default function NavbarCreateDivisionCalender() {
       <Box p={20}>
         <Stack>
           <TextInput
+            required
             styles={{
               input: {
                 border: `1px solid ${"#D6D8F6"}`,
@@ -96,12 +106,19 @@ export default function NavbarCreateDivisionCalender() {
               },
             }}
             size="md"
-            placeholder="Event Nama"
-            label="Event Nama"
+            placeholder="Nama Acara"
+            label="Nama Acara"
             value={isData.title}
             onChange={(event) => setData({ ...isData, title: event.target.value })}
+            onBlur={() => setTouched({ ...touched, title: true })}
+            error={
+              touched.title && (
+                isData.title == "" ? "Nama Acara Tidak Boleh Kosong" : null
+              )
+            }
           />
           <DateInput
+            required
             styles={{
               input: {
                 border: `1px solid ${"#D6D8F6"}`,
@@ -117,11 +134,18 @@ export default function NavbarCreateDivisionCalender() {
             placeholder="Input Tanggal"
             label="Tanggal"
             minDate={new Date()}
+            onBlur={() => setTouched({ ...touched, dateStart: true })}
+            error={
+              touched.dateStart && (
+                isData.dateStart == "" ? "Tanggal Tidak Boleh Kosong" : null
+              )
+            }
           />
           <SimpleGrid
             cols={{ base: 2, sm: 2, lg: 2 }}
           >
             <TimeInput
+              required
               styles={{
                 input: {
                   border: `1px solid ${"#D6D8F6"}`,
@@ -132,8 +156,15 @@ export default function NavbarCreateDivisionCalender() {
               label="Waktu Awal"
               value={isData.timeStart}
               onChange={(event) => setData({ ...isData, timeStart: event.target.value })}
+              onBlur={() => setTouched({ ...touched, timeStart: true })}
+              error={
+                touched.timeStart && (
+                  isData.timeStart == "" ? "Waktu Awal Tidak Boleh Kosong" : null
+                )
+              }
             />
             <TimeInput
+              required
               styles={{
                 input: {
                   border: `1px solid ${"#D6D8F6"}`,
@@ -144,9 +175,16 @@ export default function NavbarCreateDivisionCalender() {
               label="Waktu Akhir"
               value={isData.timeEnd}
               onChange={(event) => setData({ ...isData, timeEnd: event.target.value })}
+              onBlur={() => setTouched({ ...touched, timeEnd: true })}
+              error={
+                touched.timeEnd && (
+                  isData.timeEnd == "" ? "Waktu Akhir Tidak Boleh Kosong" : null
+                )
+              }
             />
           </SimpleGrid>
           <TextInput
+            required
             styles={{
               input: {
                 border: `1px solid ${"#D6D8F6"}`,
@@ -158,8 +196,15 @@ export default function NavbarCreateDivisionCalender() {
             label="Link Meet"
             value={isData.linkMeet}
             onChange={(event) => setData({ ...isData, linkMeet: event.target.value })}
+            onBlur={() => setTouched({ ...touched, linkMeet: true })}
+            error={
+              touched.linkMeet && (
+                isData.linkMeet == "" ? "Link Meet Tidak Boleh Kosong" : null
+              )
+            }
           />
           <Select
+            required
             styles={{
               input: {
                 border: `1px solid ${"#D6D8F6"}`,
@@ -180,20 +225,13 @@ export default function NavbarCreateDivisionCalender() {
             onChange={(val: any) =>
               setData({ ...isData, repeatEventTyper: val })
             }
+            onBlur={() => setTouched({ ...touched, repeatEventTyper: true })}
+            error={
+              touched.repeatEventTyper && (
+                isData.repeatEventTyper == "" ? "Ulangi Event Tidak Boleh Kosong" : null
+              )
+            }
           />
-          <Box mt={5} onClick={() => setOpenMember(true)}>
-            <Group
-              justify="space-between"
-              p={10}
-              style={{
-                border: `1px solid ${"#D6D8F6"}`,
-                borderRadius: 10,
-              }}
-            >
-              <Text>Tambah Anggota</Text>
-              <IoIosArrowDropright size={25} />
-            </Group>
-          </Box>
           <Textarea styles={{
             input: {
               border: `1px solid ${"#D6D8F6"}`,
@@ -204,6 +242,19 @@ export default function NavbarCreateDivisionCalender() {
             size="md" placeholder='Deskripsi' label="Deskripsi"
             onChange={(event) => setData({ ...isData, desc: event.target.value })}
           />
+          <Box mt={5} onClick={() => setOpenMember(true)}>
+            <Group
+              justify="space-between"
+              p={10}
+              style={{
+                border: `1px solid ${"#D6D8F6"}`,
+                borderRadius: 10,
+              }}
+            >
+              <Text>Tambah Anggota *</Text>
+              <IoIosArrowDropright size={25} />
+            </Group>
+          </Box>
           {
             memberUser.length > 0 &&
             <Box pt={30}>
@@ -248,7 +299,6 @@ export default function NavbarCreateDivisionCalender() {
               </Box>
             </Box>
           }
-
           <Box mt={"xl"}>
             <Button
               c={"white"}
@@ -256,7 +306,20 @@ export default function NavbarCreateDivisionCalender() {
               size="lg"
               radius={30}
               fullWidth
-              onClick={() => setModal(true)}
+              onClick={() => {
+                if (
+                  isData.title !== "" &&
+                  isData.dateStart !== " " &&
+                  isData.timeStart !== "" &&
+                  isData.timeEnd !== "" &&
+                  isData.linkMeet !== "" &&
+                  isData.repeatEventTyper !== ""
+                ) {
+                  setModal(true);
+                } else {
+                  toast.error("Mohon lengkapi semua form");
+                }
+              }}
             >
               Simpan
             </Button>
diff --git a/src/module/discussion/ui/detail_discussion.tsx b/src/module/discussion/ui/detail_discussion.tsx
index 3d0789a..8ae14b6 100644
--- a/src/module/discussion/ui/detail_discussion.tsx
+++ b/src/module/discussion/ui/detail_discussion.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, Skeleton, Text, TextInput } from "@mantine/core";
+import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
 import { SkeletonDetailDiscussionComment, SkeletonDetailDiscussionMember, SkeletonSingle, WARNA } from "@/module/_global";
 import { GrChatOption } from "react-icons/gr";
 import { LuSendHorizonal } from "react-icons/lu";
@@ -10,7 +10,7 @@ import { useShallowEffect } from "@mantine/hooks";
 import { IDetailDiscussion } from "../lib/type_discussion";
 import moment from "moment";
 import "moment/locale/id";
-import { useParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import toast from "react-hot-toast";
 
 export default function DetailDiscussion({ id, idDivision }: { id: string, idDivision: string }) {
@@ -18,6 +18,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
    const [isComent, setIsComent] = useState("")
    const param = useParams<{ id: string, detail: string }>()
    const [isLoad, setIsLoad] = useState(true)
+   const router = useRouter()
 
    const getData = async () => {
       try {
@@ -77,8 +78,8 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
                               <Group>
                                  <Skeleton width={60} height={60} radius={100} />
                                  <Box>
-                                    <Skeleton width={"50%"} height={20} radius={"md"} />
-                                    <Skeleton width={"50%"} height={20} radius={"md"} />
+                                    <Skeleton width={100} height={20} radius={"md"} />
+                                    <Skeleton mt={8} width={60} height={20} radius={"md"} />
                                  </Box>
                               </Group>
                               <Skeleton width={"50%"} height={20} radius={"md"} />
@@ -109,7 +110,16 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
                      <Text c={"grey"} fz={13}>{isData?.createdAt}</Text>
                   </Flex>
                   <Box mt={10}>
-                     <Text fw={"bold"}>{isData?.desc}</Text>
+                     <Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
+                        <Text
+                           style={{
+                              overflowWrap: "break-word"
+                           }}
+                           fw={"bold"}
+                        >
+                           {isData?.desc}
+                        </Text>
+                     </Spoiler>
                   </Box>
                   <Group justify="space-between" mt={20} c={'#8C8C8C'}>
                      {isData?.totalComments ? <Group gap={5} align="center">
@@ -135,8 +145,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
                                  <Group>
                                     <Skeleton width={40} height={40} radius={100} />
                                     <Box>
-                                       <Skeleton width={"50%"} height={20} radius={"md"} />
-                                       <Skeleton width={"50%"} height={20} radius={"md"} />
+                                       <Skeleton width={60} height={20} radius={"md"} />
                                     </Box>
                                  </Group>
                                  <Skeleton width={"50%"} height={20} radius={"md"} />
@@ -170,7 +179,17 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
                               </Group>
                               <Text c={"grey"} fz={13}>{moment(v.createdAt).format("LL")}</Text>
                            </Flex>
-                           <Box mt={10}>{v.comment}</Box>
+                           <Box mt={10}>
+                              <Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
+                                 <Text
+                                    style={{
+                                       overflowWrap: "break-word"
+                                    }}
+                                 >
+                                    {v.comment}
+                                 </Text>
+                              </Spoiler>
+                           </Box>
                            <Box mt={20}>
                               <Divider size={"xs"} />
                            </Box>
@@ -179,48 +198,52 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
                   })
                }
             </Box>
-            {isLoad ? 
-             <Skeleton width={"100%"} height={50} radius={100} />
-            :
-            <Box h={60} pos={"fixed"} bottom={20} w={{ base: "90%", md: "35.5%" }} style={{
-               zIndex: 999
-            }}>
-                  <Group justify="flex-end">
-                     <Text fz={13}>{300 - isComent.length} karakter tersisa</Text>
-                  </Group>
-               <Grid bg={"white"} style={{
-                  border: '1px solid gray',
-                  borderRadius: 40
-               }} justify="center" align="center">
-                     <Grid.Col span={10}>
-                     <TextInput
-                        styles={{
-                           input: {
-                              color: WARNA.biruTua,
-                              border: "none",
-                              backgroundColor: "transparent"
-                           },
-                        }}
-                        size="md"
-                        placeholder="Kirim Komentar"
-                        disabled={isData?.status === 2}
-                        onChange={(e) => setIsComent(e.target.value)}
-                           value={isComent}
-                           maxLength={300}
-                        />
-                        
-                  </Grid.Col>
-                  <Grid.Col span={2}>
-                     <Center>
-                        <ActionIcon
-                           onClick={sendComent}
-                           variant="subtle" aria-label="submit" disabled={isData?.status === 2}>
-                           <LuSendHorizonal size={30} />
-                        </ActionIcon>
-                     </Center>
-                  </Grid.Col>
-               </Grid>
-            </Box>
+            {isLoad ?
+               <Skeleton width={"100%"} height={50} radius={100} />
+               :
+               <Box pos={"fixed"} bottom={0} w={{ base: "90%", md: "35.5%" }} style={{
+                  zIndex: 999
+               }} bg={WARNA.bgWhite}>
+                  <Box bg={WARNA.bgWhite} >
+                     <Group justify="flex-end">
+                        <Text fz={13}>{300 - isComent.length} karakter tersisa</Text>
+                     </Group>
+                     <Box mb={20} bg={WARNA.bgWhite}>
+                        <Grid bg={"white"} style={{
+                           border: '1px solid gray',
+                           borderRadius: 40
+                        }} justify="center" align="center">
+                           <Grid.Col span={10}>
+                              <TextInput
+                                 styles={{
+                                    input: {
+                                       color: WARNA.biruTua,
+                                       border: "none",
+                                       backgroundColor: "transparent"
+                                    },
+                                 }}
+                                 size="md"
+                                 placeholder="Kirim Komentar"
+                                 disabled={isData?.status === 2}
+                                 onChange={(e) => setIsComent(e.target.value)}
+                                 value={isComent}
+                                 maxLength={300}
+                              />
+
+                           </Grid.Col>
+                           <Grid.Col span={2}>
+                              <Center>
+                                 <ActionIcon
+                                    onClick={sendComent}
+                                    variant="subtle" aria-label="submit" disabled={isData?.status === 2}>
+                                    <LuSendHorizonal size={30} />
+                                 </ActionIcon>
+                              </Center>
+                           </Grid.Col>
+                        </Grid>
+                     </Box>
+                  </Box>
+               </Box>
             }
          </Box>
       </>
diff --git a/src/module/discussion/ui/drawer_detail_discussion.tsx b/src/module/discussion/ui/drawer_detail_discussion.tsx
index a5db5a2..87ebbb4 100644
--- a/src/module/discussion/ui/drawer_detail_discussion.tsx
+++ b/src/module/discussion/ui/drawer_detail_discussion.tsx
@@ -66,6 +66,8 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi
          <Stack pt={10}>
             <SimpleGrid
                cols={{ base: 3, sm: 3, lg: 3 }}
+               spacing={{ base: 10, sm: 'xl' }}
+               verticalSpacing={{ base: 'md', sm: 'xl' }}
             >
                <Flex onClick={() => setValModal(true)} justify={'center'} align={'center'} direction={'column'} >
                   <Box>
diff --git a/src/module/discussion/ui/form_create_discussion.tsx b/src/module/discussion/ui/form_create_discussion.tsx
index 1db0571..8728565 100644
--- a/src/module/discussion/ui/form_create_discussion.tsx
+++ b/src/module/discussion/ui/form_create_discussion.tsx
@@ -5,34 +5,32 @@ import { Avatar, Box, Button, Center, Grid, Group, Text, Textarea } from "@manti
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { funCreateDiscussion } from "../lib/api_discussion";
+import { useParams, useRouter } from "next/navigation";
 
-export default function FormCreateDiscussion({id}: {id: string}) {
+export default function FormCreateDiscussion({ id }: { id: string }) {
    const [isValModal, setValModal] = useState(false)
+   const router = useRouter()
+   const param = useParams<{ id: string }>()
    const [isData, setData] = useState({
       desc: "",
       idDivision: id
    })
 
-
-   function onTrue(val: boolean) {
-      if (val) {
-         toast.success("Sukses! Data tersimpan");
-      }
-      setValModal(false)
-   }
-
    async function createDiscussion(val: boolean) {
       try {
-         const response = await funCreateDiscussion({
-            desc: isData.desc,
-            idDivision: id
-         })
-
-         if (response.success) {
-            toast.success(response.message)
-            onTrue(true)
-         } else {
-            toast.error(response.message)
+         if (val) {
+            const response = await funCreateDiscussion({
+               desc: isData.desc,
+               idDivision: id
+            })
+   
+            if (response.success) {
+               toast.success(response.message)
+               router.push(`/division/${response.data.id}/discussion/`)
+               setValModal(false)
+            } else {
+               toast.error(response.message)
+            }
          }
       } catch (error) {
          console.log(error);
@@ -45,36 +43,41 @@ export default function FormCreateDiscussion({id}: {id: string}) {
 
 
    return (
-      <Box>
-         <Box p={20}>
-            <Group>
-               <Avatar src={'https://i.pravatar.cc/1000?img=32'} alt="it's me" size="lg" />
-               <Box>
-                  <Textarea
-                     placeholder="Tuliskan apa yang ingin anda diskusikan"
-                     w={"100%"}
-                     styles={{
-                        input: {
-                           border: 'none',
-                           backgroundColor: 'transparent',
-                        }
-                     }}
-                     onChange={(e) => setData({ ...isData, desc: e.target.value })}
-                  />
-               </Box>
-            </Group>
-            <Box mt="xl">
-               <Button
-                  color="white"
-                  bg={WARNA.biruTua}
-                  size="lg"
-                  radius={30}
-                  fullWidth
-                  onClick={() => setValModal(true)}
-               >
-                  Simpan
-               </Button>
-            </Box>
+      <Box pos={"relative"} h={"89vh"}>
+         <Box p={20} >
+            <Grid gutter={0} pt={10}>
+               <Grid.Col span={"auto"}>
+                  <Avatar src={'https://i.pravatar.cc/1000?img=32'} alt="it's me" size="lg" />
+               </Grid.Col>
+               <Grid.Col span={10}>
+                  <Box>
+                     <Textarea
+                        placeholder="Tuliskan apa yang ingin anda diskusikan"
+                        styles={{
+                           input: {
+                              border: 'none',
+                              backgroundColor: 'transparent',
+                              height: "60vh"
+                           }
+                        }}
+                        value={isData.desc}
+                        onChange={(e) => setData({ ...isData, desc: e.target.value })}
+                     />
+                  </Box>
+               </Grid.Col>
+            </Grid>
+         <Box pos={"absolute"} bottom={10} left={0} right={0} p={20}>
+            <Button
+               color="white"
+               bg={WARNA.biruTua}
+               size="lg"
+               radius={30}
+               fullWidth
+               onClick={() => setValModal(true)}
+            >
+               Simpan
+            </Button>
+         </Box>
          </Box>
 
          <LayoutModal opened={isValModal} onClose={() => setValModal(false)}
diff --git a/src/module/discussion/ui/form_edit_discussion.tsx b/src/module/discussion/ui/form_edit_discussion.tsx
index 3476a53..f404f24 100644
--- a/src/module/discussion/ui/form_edit_discussion.tsx
+++ b/src/module/discussion/ui/form_edit_discussion.tsx
@@ -75,7 +75,6 @@ export default function FormEditDiscussion() {
                      />
                   </Box>
                </Grid.Col>
-
             </Grid>
             <Box mt="xl">
                <Button
diff --git a/src/module/discussion/ui/list_discussion.tsx b/src/module/discussion/ui/list_discussion.tsx
index d02fb88..7b44fac 100644
--- a/src/module/discussion/ui/list_discussion.tsx
+++ b/src/module/discussion/ui/list_discussion.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { WARNA } from "@/module/_global";
-import { Avatar, Badge, Box, Divider, Flex, Group, Skeleton, Text, TextInput } from "@mantine/core";
+import { Avatar, Badge, Box, Divider, Flex, Group, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
 import { useState } from "react";
 import { GrChatOption } from "react-icons/gr";
@@ -62,20 +62,20 @@ export default function ListDiscussion({ id }: { id: string }) {
                            mt={20}
                         >
                            <Group>
-                              <Skeleton width={40} height={40} radius={"md"} />
+                              <Skeleton width={60} height={60} radius={100} />
                               <Box>
-                                 <Skeleton width={"50%"} height={20} radius={"md"} />
-                                 <Skeleton width={"50%"} height={20} radius={"md"} />
+                                 <Skeleton width={100} height={20} radius={"md"} />
+                                 <Skeleton mt={8} width={60} height={20} radius={"md"} />
                               </Box>
                            </Group>
-                           <Skeleton width={"50%"} height={20} radius={"md"} />
+                           <Skeleton width={"40%"} height={20} radius={"md"} />
                         </Flex>
                         <Box mt={10}>
                            <Skeleton width={"100%"} height={100} radius={"md"} />
                         </Box>
                         <Group justify="space-between" mt={20} c={'#8C8C8C'}>
-                           <Skeleton width={"30%"} height={20} radius={"md"} />
-                           <Skeleton width={"30%"} height={20} radius={"md"} />
+                           <Skeleton width={"20%"} height={20} radius={"md"} />
+                           <Skeleton width={"20%"} height={20} radius={"md"} />
                         </Group>
                         <Box mt={20}>
                            <Skeleton width={"100%"} height={1} radius={"md"} />
@@ -86,15 +86,14 @@ export default function ListDiscussion({ id }: { id: string }) {
             :
             isData.map((v, i) => {
                return (
-                  <Box key={i} pl={10} pr={10}
-                     onClick={() => {
-                        router.push(`/division/${param.id}/discussion/${v.id}`)
-                     }}
-                  >
+                  <Box key={i} pl={10} pr={10}>
                      <Flex
                         justify={"space-between"}
                         align={"center"}
                         mt={20}
+                        onClick={() => {
+                           router.push(`/division/${param.id}/discussion/${v.id}`)
+                        }}
                      >
                         <Group>
                            <Avatar alt="it's me" size="lg" />
@@ -107,8 +106,21 @@ export default function ListDiscussion({ id }: { id: string }) {
                         </Group>
                         <Text c={"grey"} fz={13}>{v.createdAt}</Text>
                      </Flex>
-                     <Box mt={10}>{v.desc}</Box>
-                     <Group justify="space-between" mt={20} c={'#8C8C8C'}>
+                     <Box mt={10}>
+                        <Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
+                           <Text
+                              style={{
+                                 overflowWrap: "break-word"
+                              }}
+                              onClick={() => {
+                                 router.push(`/division/${param.id}/discussion/${v.id}`)
+                              }}
+                           >
+                              {v.desc}
+                           </Text>
+                        </Spoiler>
+                     </Box>
+                     <Group justify="space-between" mt={40} c={'#8C8C8C'}>
                         <Group gap={5} align="center">
                            <GrChatOption size={18} />
                            <Text fz={13}>Diskusikan</Text>
diff --git a/src/module/discussion/ui/navbar_detail_discussion.tsx b/src/module/discussion/ui/navbar_detail_discussion.tsx
index c43eb99..31ec216 100644
--- a/src/module/discussion/ui/navbar_detail_discussion.tsx
+++ b/src/module/discussion/ui/navbar_detail_discussion.tsx
@@ -4,12 +4,14 @@ import { ActionIcon } from "@mantine/core";
 import { useState } from "react";
 import { HiMenu } from "react-icons/hi";
 import DrawerDetailDiscussion from "./drawer_detail_discussion";
+import { useParams } from "next/navigation";
 
 export default function NavbarDetailDiscussion({id, status, idDivision}: {id: string, status: number, idDivision:string}) {
    const [openDrawer, setOpenDrawer] = useState(false)
+   const param = useParams<{ id: string }>()
    return (
       <>
-         <LayoutNavbarNew back="" title="Diskusi "
+         <LayoutNavbarNew back={`/division/${param.id}/discussion/`} title="Diskusi "
             menu={
                <ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
                   <HiMenu size={20} color='white' />
diff --git a/src/module/discussion/ui/navbar_list_discussion.tsx b/src/module/discussion/ui/navbar_list_discussion.tsx
index f4dadcd..754bee7 100644
--- a/src/module/discussion/ui/navbar_list_discussion.tsx
+++ b/src/module/discussion/ui/navbar_list_discussion.tsx
@@ -4,12 +4,14 @@ import { ActionIcon } from "@mantine/core";
 import { HiMenu } from "react-icons/hi";
 import { useState } from "react";
 import DrawerListDiscussion from "./drawer_list_discussion";
+import { useParams } from "next/navigation";
 
 export default function NavbarListDiscussion() {
    const [openDrawer, setOpenDrawer] = useState(false)
+   const param = useParams<{ id: string }>()
    return (
       <>
-         <LayoutNavbarNew back="" title="Diskusi"
+         <LayoutNavbarNew back={`/division/${param.id}`} title="Diskusi"
             menu={
                <ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
                   <HiMenu size={20} color='white' />
diff --git a/src/module/division_new/ui/edit_division.tsx b/src/module/division_new/ui/edit_division.tsx
index 8ff6084..1a0f00a 100644
--- a/src/module/division_new/ui/edit_division.tsx
+++ b/src/module/division_new/ui/edit_division.tsx
@@ -77,18 +77,10 @@ export default function EditDivision() {
   }, [param.id])
 
   return (
-    <Box>
+    <Box pos={"relative"} h={"100vh"}>
       <LayoutNavbarNew back="" title="Edit Divisi" menu />
       <Box p={20}>
-
         <Stack>
-          {/* <Select
-            placeholder="Grup"
-            label="Grup"
-            size="md"
-            required
-            radius={40}
-          /> */}
           <TextInput
             placeholder="Judul"
             label="Judul"
@@ -101,8 +93,14 @@ export default function EditDivision() {
           <Textarea placeholder="Deskripsi" label="Deskripsi" size="md" radius={10}
             value={body.desc}
             onChange={(e) => { setBody({ ...body, desc: e.currentTarget.value }) }}
+            styles={{
+              input: {
+                 height: "40vh"
+              }
+           }}
           />
-          <Box mt="xl">
+        </Stack>
+          <Box pos={"absolute"} bottom={10} left={0} right={0} p={20}>
             <Button
               color="white"
               bg={WARNA.biruTua}
@@ -114,7 +112,6 @@ export default function EditDivision() {
               Simpan
             </Button>
           </Box>
-        </Stack>
       </Box>
       <LayoutModal opened={openModal} onClose={() => setOpenModal(false)} description='Apakah Anda yakin ingin edit data'
         onYes={(val) => {
diff --git a/src/module/division_new/ui/information_division.tsx b/src/module/division_new/ui/information_division.tsx
index 6a327b8..c39520b 100644
--- a/src/module/division_new/ui/information_division.tsx
+++ b/src/module/division_new/ui/information_division.tsx
@@ -141,7 +141,10 @@ export default function InformationDivision() {
                 <Group
                   align="center"
                   style={{
+                    border: `1px solid ${"#DCEED8"}`,
                     padding: 10,
+                    borderRadius: 10,
+                    cursor: "pointer",
                   }}
                 >
                   <Box>