diff --git a/public/assets/img/banner/bg-10.png b/public/assets/img/banner/bg-10.png
new file mode 100644
index 0000000..1077397
Binary files /dev/null and b/public/assets/img/banner/bg-10.png differ
diff --git a/src/module/banner/index.ts b/src/module/banner/index.ts
index 1aa792a..0198acc 100644
--- a/src/module/banner/index.ts
+++ b/src/module/banner/index.ts
@@ -1,6 +1,9 @@
+import { IDataBanner } from './lib/type_banner';
+import { funGetAllBanner } from './lib/api_banner';
 import NavbarBanner from "./ui/navbar_banner";
 import ListBanner from "./ui/list_banner";
 import CreateBanner from "./ui/create_banner";
 import EditBanner from "./ui/edit_banner";
 import ViewfileBanner from "./ui/viewfile_banner";
-export { NavbarBanner, ListBanner, CreateBanner, EditBanner, ViewfileBanner }
+export { NavbarBanner, ListBanner, CreateBanner, EditBanner, ViewfileBanner, funGetAllBanner };
+export type { IDataBanner };
\ No newline at end of file
diff --git a/src/module/banner/ui/git.keep b/src/module/banner/ui/git.keep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/module/division_new/ui/carousel_division.tsx b/src/module/division_new/ui/carousel_division.tsx
index 5b85c22..f314ea4 100644
--- a/src/module/division_new/ui/carousel_division.tsx
+++ b/src/module/division_new/ui/carousel_division.tsx
@@ -1,13 +1,46 @@
 'use client'
-import React, { useRef } from 'react';
-import { Carousel } from '@mantine/carousel';
 import { TEMA } from '@/module/_global';
-import Autoplay from 'embla-carousel-autoplay';
-import { Flex, Text } from '@mantine/core';
+import { funGetAllBanner, IDataBanner } from '@/module/banner';
+import { funGetHome } from '@/module/home';
 import { useHookstate } from '@hookstate/core';
+import { Carousel } from '@mantine/carousel';
+import { Flex, Image, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import Autoplay from 'embla-carousel-autoplay';
+import { useRef, useState } from 'react';
+import toast from 'react-hot-toast';
 export default function CarouselDivision() {
   const autoplay = useRef(Autoplay({ delay: 5000 }));
   const tema = useHookstate(TEMA)
+  const [isDesa, setDesa] = useState("")
+  const [isData, setData] = useState<IDataBanner[]>([])
+
+
+  const fetchData = async () => {
+    try {
+      const res_banner = await funGetAllBanner()
+      if (res_banner.success) {
+        setData(res_banner.data)
+      } else {
+        toast.error(res_banner.message);
+      }
+      const response = await funGetHome('?cat=header')
+      if (response.success) {
+        setDesa(response.data.village)
+      } else {
+        toast.error(response.message);
+      }
+    } catch (error) {
+      toast.error("Gagal mendapatkan data, coba lagi nanti");
+      console.error(error);
+    }
+  };
+
+
+  useShallowEffect(() => {
+    fetchData();
+  }, []);
+
   return (
     <>
       <Carousel
@@ -17,21 +50,22 @@ export default function CarouselDivision() {
         onMouseEnter={autoplay.current.stop}
         onMouseLeave={autoplay.current.reset}
       >
-        <Carousel.Slide bg={tema.get().utama} style={{ borderRadius: 10 }}>
-          <Flex justify={'center'} h={"100%"} align={'center'}>
-            <Text c={"white"}>INFORMASI DARMASABA</Text>
-          </Flex>
-        </Carousel.Slide>
-        <Carousel.Slide bg={tema.get().utama} style={{ borderRadius: 10 }}>
-          <Flex justify={'center'} h={"100%"} align={'center'}>
-            <Text c={"white"}>INFORMASI DARMASABA</Text>
-          </Flex>
-        </Carousel.Slide>
-        <Carousel.Slide bg={tema.get().utama} style={{ borderRadius: 10 }}>
-          <Flex justify={'center'} h={"100%"} align={'center'}>
-            <Text c={"white"}>INFORMASI DARMASABA</Text>
-          </Flex>
-        </Carousel.Slide>
+        {
+          isData.length > 0 ?
+            isData.map((item, index) => (
+              <Carousel.Slide key={index} bg={tema.get().utama} style={{ borderRadius: 10 }}>
+                <Image alt={item.title} h={"100%"} style={{ borderRadius: 10 }} src={`https://wibu-storage.wibudev.com/api/files/${item.image}`} />
+              </Carousel.Slide>
+            ))
+            :
+            [...Array(3)].map((_, index) => (
+              <Carousel.Slide key={index} bg={tema.get().utama} style={{ borderRadius: 10 }}>
+                <Flex justify={'center'} h={"100%"} align={'center'}>
+                  <Text c={"white"}>INFORMASI {isDesa.toUpperCase()}</Text>
+                </Flex>
+              </Carousel.Slide>
+            ))
+        }
       </Carousel>
     </>
   );
diff --git a/src/module/home/index.ts b/src/module/home/index.ts
index 1ff8487..ebd8e75 100644
--- a/src/module/home/index.ts
+++ b/src/module/home/index.ts
@@ -1,3 +1,4 @@
+import { funGetHome } from "./lib/api_home";
 import ViewDetailFeature from "./ui/view_detail_feature";
 import ViewHome from "./ui/view_home";
 import ViewNotification from "./ui/view_notification";
@@ -6,4 +7,5 @@ import ViewSearch from "./ui/view_search";
 export { ViewHome }
 export { ViewDetailFeature }
 export { ViewSearch }
-export { ViewNotification }
\ No newline at end of file
+export { ViewNotification }
+export { funGetHome }
\ No newline at end of file
diff --git a/src/module/home/ui/carosole.tsx b/src/module/home/ui/carosole.tsx
index 5f8fdb5..91ee799 100644
--- a/src/module/home/ui/carosole.tsx
+++ b/src/module/home/ui/carosole.tsx
@@ -1,13 +1,46 @@
 'use client'
-import React, { useRef } from 'react';
-import { Carousel } from '@mantine/carousel';
-import { TEMA, WARNA } from '@/module/_global';
-import Autoplay from 'embla-carousel-autoplay';
-import { Flex, Text } from '@mantine/core';
+import { TEMA } from '@/module/_global';
+import { funGetAllBanner, IDataBanner } from '@/module/banner';
 import { useHookstate } from '@hookstate/core';
+import { Carousel } from '@mantine/carousel';
+import { Flex, Image, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import Autoplay from 'embla-carousel-autoplay';
+import { useRef, useState } from 'react';
+import toast from 'react-hot-toast';
+import { funGetHome } from '../lib/api_home';
 export default function Carosole() {
   const autoplay = useRef(Autoplay({ delay: 5000 }));
   const tema = useHookstate(TEMA)
+  const [isDesa, setDesa] = useState("")
+  const [isData, setData] = useState<IDataBanner[]>([])
+
+
+  const fetchData = async () => {
+    try {
+      const res_banner = await funGetAllBanner()
+      if (res_banner.success) {
+        setData(res_banner.data)
+      } else {
+        toast.error(res_banner.message);
+      }
+      const response = await funGetHome('?cat=header')
+      if (response.success) {
+        setDesa(response.data.village)
+      } else {
+        toast.error(response.message);
+      }
+    } catch (error) {
+      toast.error("Gagal mendapatkan data, coba lagi nanti");
+      console.error(error);
+    }
+  };
+
+
+  useShallowEffect(() => {
+    fetchData();
+  }, []);
+
   return (
     <>
       <Carousel
@@ -17,21 +50,22 @@ export default function Carosole() {
         onMouseEnter={autoplay.current.stop}
         onMouseLeave={autoplay.current.reset}
       >
-        <Carousel.Slide bg={tema.get().utama} style={{ borderRadius: 10 }}>
-          <Flex justify={'center'} h={"100%"} align={'center'}>
-          <Text c={"white"}>INFORMASI DARMASABA</Text>
-          </Flex>
-        </Carousel.Slide>
-        <Carousel.Slide bg={tema.get().utama} style={{ borderRadius: 10 }}>
-          <Flex justify={'center'} h={"100%"} align={'center'}>
-          <Text c={"white"}>INFORMASI DARMASABA</Text>
-          </Flex>
-        </Carousel.Slide>
-        <Carousel.Slide bg={tema.get().utama} style={{ borderRadius: 10 }}>
-          <Flex justify={'center'} h={"100%"} align={'center'}>
-          <Text c={"white"}>INFORMASI DARMASABA</Text>
-          </Flex>
-        </Carousel.Slide>
+        {
+          isData.length > 0 ?
+            isData.map((item, index) => (
+              <Carousel.Slide key={index} bg={tema.get().utama} style={{ borderRadius: 10 }}>
+                <Image alt={item.title} h={"100%"} style={{ borderRadius: 10 }} src={`https://wibu-storage.wibudev.com/api/files/${item.image}`} />
+              </Carousel.Slide>
+            ))
+            :
+            [...Array(3)].map((_, index) => (
+              <Carousel.Slide key={index} bg={tema.get().utama} style={{ borderRadius: 10 }}>
+                <Flex justify={'center'} h={"100%"} align={'center'}>
+                  <Text c={"white"}>INFORMASI {isDesa.toUpperCase()}</Text>
+                </Flex>
+              </Carousel.Slide>
+            ))
+        }
       </Carousel>
     </>
   );