diff --git a/src/app/(tambahan)/layanan/[sub]/page.tsx b/src/app/(tambahan)/layanan/[sub]/page.tsx
new file mode 100644
index 00000000..535f2fba
--- /dev/null
+++ b/src/app/(tambahan)/layanan/[sub]/page.tsx
@@ -0,0 +1,10 @@
+import { Stack } from "@mantine/core";
+
+export default async function Page({ params }: { params: Promise<{ sub: string }> }) {
+    const { sub } = await params
+    return (
+        <Stack>
+            {sub}
+        </Stack>
+    )
+}
\ No newline at end of file
diff --git a/src/app/(tambahan)/layanan/_com/BackButto.tsx b/src/app/(tambahan)/layanan/_com/BackButto.tsx
new file mode 100644
index 00000000..80b90b42
--- /dev/null
+++ b/src/app/(tambahan)/layanan/_com/BackButto.tsx
@@ -0,0 +1,14 @@
+'use client'
+
+import { ActionIcon } from "@mantine/core";
+import { IconArrowLeft } from "@tabler/icons-react";
+import { useTransitionRouter } from 'next-view-transitions';
+
+export default function BackButton() {
+    const router = useTransitionRouter()
+    return (
+        <ActionIcon variant="transparent" onClick={() => router.back()}>
+            <IconArrowLeft />
+        </ActionIcon>
+    );
+}
\ No newline at end of file
diff --git a/src/app/(tambahan)/layanan/page.tsx b/src/app/(tambahan)/layanan/page.tsx
new file mode 100644
index 00000000..055c01a5
--- /dev/null
+++ b/src/app/(tambahan)/layanan/page.tsx
@@ -0,0 +1,7 @@
+import { Stack } from "@mantine/core";
+
+export default function Page() {
+    return <Stack>
+        layanan
+    </Stack>
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 36cf9048..a8bf3681 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -7,6 +7,7 @@ import Content6 from "@/com/main-page/content-6";
 import colors from "@/con/colors";
 // import ApiFetch from "@/lib/api-fetch";
 import { Stack } from "@mantine/core";
+import Content7 from "@/com/main-page/content-7";
 
 export default function Page() {
   return (
@@ -17,6 +18,7 @@ export default function Page() {
       <Content4 />
       <Content5 />
       <Content6 />
+      <Content7 />
     </Stack>
   );
 }
diff --git a/src/com/Footer.tsx b/src/com/Footer.tsx
index c605978f..9f498093 100644
--- a/src/com/Footer.tsx
+++ b/src/com/Footer.tsx
@@ -1,8 +1,9 @@
 
+import colors from "@/con/colors";
 import { Stack, Container, Center, Text } from "@mantine/core";
 
 function Footer() {
-    return <Stack>
+    return <Stack bg={colors["blue-button"]} c={colors["white-trans-1"]}>
         <Container w={{ base: "100%", md: "80%" }} p={"xl"} h={720} >
             <Center>
                 <Text fz={"3.4rem"}>Footer</Text>
diff --git a/src/com/main-page/content-5/index.tsx b/src/com/main-page/content-5/index.tsx
index 5587052b..9f619f8e 100644
--- a/src/com/main-page/content-5/index.tsx
+++ b/src/com/main-page/content-5/index.tsx
@@ -1,21 +1,13 @@
 "use client";
 import { Center, Container, Stack, Text } from "@mantine/core";
-import { useRef } from "react";
-
-const name = process.env.NEXT_PUBLIC_NAME;
 
 function Content5() {
-  const ref = useRef(null);
-
   return (
-    <Stack ref={ref}>
-      ini name
-      {name && <Text>{name}</Text>}
+    <Stack>
       <Container w={{ base: "100%", md: "80%" }} p={"xl"} h={720}>
         <Center>
-          <Text fz={"3.4rem"}>CONTENT 5</Text>
+          <Text fz={"3.4rem"}>Berkolaborasi membangun desa</Text>
         </Center>
-
       </Container>
     </Stack>
   );
diff --git a/src/com/main-page/content-6/Count.tsx b/src/com/main-page/content-6/Count.tsx
deleted file mode 100644
index 8ececf39..00000000
--- a/src/com/main-page/content-6/Count.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-"use client";
-
-import { Stack } from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
-import { animate, motion, useMotionValue, useTransform } from "motion/react";
-
-export default function Count() {
-  const count = useMotionValue(0);
-  const rounded = useTransform(() => Math.round(count.get()));
-
-  useShallowEffect(() => {
-    const controls = animate(count, 100, { duration: 5 });
-    return () => controls.stop();
-  }, []);
-
-  return (
-    <Stack>
-        <motion.pre style={text}>{rounded}</motion.pre>
-    </Stack>
-  );
-}
-
-/**
- * ==============   Styles   ================
- */
-
-const text = {
-  fontSize: 64,
-  color: "#4ff0b7",
-};
diff --git a/src/com/main-page/content-6/index.tsx b/src/com/main-page/content-6/index.tsx
index f811b088..21bd3049 100644
--- a/src/com/main-page/content-6/index.tsx
+++ b/src/com/main-page/content-6/index.tsx
@@ -1,15 +1,15 @@
 "use client";
 import { Stack, Container, Center, Text } from "@mantine/core";
-import Count from "./Count";
+
 
 function Content6() {
   return (
     <Stack>
       <Container w={{ base: "100%", md: "80%" }} p={"xl"} h={720}>
         <Center>
-          <Text fz={"3.4rem"}>CONTENT 6</Text>
+          <Text fz={"3.4rem"}>Indeks Kepuasan Masyarakat</Text>
         </Center>
-        <Count />
+
       </Container>
     </Stack>
   );
diff --git a/src/com/main-page/content-7/index.tsx b/src/com/main-page/content-7/index.tsx
new file mode 100644
index 00000000..019f2342
--- /dev/null
+++ b/src/com/main-page/content-7/index.tsx
@@ -0,0 +1,13 @@
+import { Stack, Container, Center, Text } from "@mantine/core";
+
+export default function Content7() {
+    return (
+        <Stack>
+            <Container w={{ base: "100%", md: "80%" }} p={"xl"} h={720}>
+                <Center>
+                    <Text fz={"3.4rem"}>APBDES Darmasaba</Text>
+                </Center>
+            </Container>
+        </Stack>
+    );
+}
\ No newline at end of file
diff --git a/src/com/main-page/layanan/index.tsx b/src/com/main-page/layanan/index.tsx
index 41454111..b1436c2c 100644
--- a/src/com/main-page/layanan/index.tsx
+++ b/src/com/main-page/layanan/index.tsx
@@ -22,6 +22,7 @@ import {
 import { useMediaQuery } from "@mantine/hooks";
 import Autoplay from "embla-carousel-autoplay";
 import _ from "lodash";
+import { useTransitionRouter } from "next-view-transitions";
 import { useRef } from "react";
 import useSWR from "swr";
 
@@ -42,6 +43,8 @@ function Content3() {
     }
   );
 
+  const router = useTransitionRouter()
+
   return (
     <Stack pos={"relative"} bg={colors.grey[1]} gap={"42"} py={"xl"}>
       <Container w={{ base: "100%", md: "50%" }} p={"xl"}>
@@ -57,7 +60,9 @@ function Content3() {
             {textHeading.des}
           </Text>
           <Box p={"md"}>
-            <Button variant="filled" bg={"dark"} radius={100}>
+            <Button onClick={() => {
+              router.push("/layanan")
+            }} variant="filled" bg={"dark"} radius={100}>
               Lanjutkan
             </Button>
           </Box>
@@ -74,6 +79,7 @@ function Slider({ data }: { data: DataSlider[] }) {
   const theme = useMantineTheme();
   const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
   const autoplay = useRef(Autoplay({ delay: 2000 }));
+  const router = useTransitionRouter()
 
   const slides = data.map((item) => (
     <Carousel.Slide key={item.id} >
@@ -97,7 +103,9 @@ function Slider({ data }: { data: DataSlider[] }) {
             </Text>
           </Box>
           <Group justify="center">
-            <Button px={46} radius={"100"} size="md">
+            <Button onClick={() => {
+              router.push(`/layanan/${item.id}`)
+            }} px={46} radius={"100"} size="md">
               Detail
             </Button>
           </Group>