diff --git a/src/app/(pages)/desa/[sub]/page.tsx b/src/app/(pages)/desa/[sub]/page.tsx
new file mode 100644
index 00000000..68bde865
--- /dev/null
+++ b/src/app/(pages)/desa/[sub]/page.tsx
@@ -0,0 +1,5 @@
+export default function Page({ params }: { params: { sub: string } }) {
+    return <div>
+        {params.sub}
+    </div>
+}
\ No newline at end of file
diff --git a/src/app/desa/page.tsx b/src/app/(pages)/desa/page.tsx
similarity index 100%
rename from src/app/desa/page.tsx
rename to src/app/(pages)/desa/page.tsx
diff --git a/src/app/(pages)/ekonomi/[sub]/page.tsx b/src/app/(pages)/ekonomi/[sub]/page.tsx
new file mode 100644
index 00000000..a340d73b
--- /dev/null
+++ b/src/app/(pages)/ekonomi/[sub]/page.tsx
@@ -0,0 +1,5 @@
+export default function Page() {
+    return <div>
+        ekonomi
+    </div>
+}
\ No newline at end of file
diff --git a/src/app/(pages)/ekonomi/page.tsx b/src/app/(pages)/ekonomi/page.tsx
new file mode 100644
index 00000000..870674ed
--- /dev/null
+++ b/src/app/(pages)/ekonomi/page.tsx
@@ -0,0 +1,7 @@
+import { Stack } from "@mantine/core";
+
+export default function Page({ params }: { params: { sub: string } }) {
+    return <Stack>
+        {params.sub}
+    </Stack>
+}
\ No newline at end of file
diff --git a/src/app/(pages)/inovasi/[sub]/page.tsx b/src/app/(pages)/inovasi/[sub]/page.tsx
new file mode 100644
index 00000000..9b5f43e3
--- /dev/null
+++ b/src/app/(pages)/inovasi/[sub]/page.tsx
@@ -0,0 +1,7 @@
+export default function Page({ params }: { params: { sub: string } }) {
+    return (
+        <div>
+            <h1>{params.sub}</h1>
+        </div>
+    );
+}   
\ No newline at end of file
diff --git a/src/app/inovasi/page.tsx b/src/app/(pages)/inovasi/page.tsx
similarity index 100%
rename from src/app/inovasi/page.tsx
rename to src/app/(pages)/inovasi/page.tsx
diff --git a/src/app/(pages)/keamanan/[sub]/page.tsx b/src/app/(pages)/keamanan/[sub]/page.tsx
new file mode 100644
index 00000000..ad3d710f
--- /dev/null
+++ b/src/app/(pages)/keamanan/[sub]/page.tsx
@@ -0,0 +1,7 @@
+export default function Page({ params }: { params: { sub: string } }) {
+    return (
+        <div>
+            <h1>{params.sub}</h1>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/app/keamanan/page.tsx b/src/app/(pages)/keamanan/page.tsx
similarity index 100%
rename from src/app/keamanan/page.tsx
rename to src/app/(pages)/keamanan/page.tsx
diff --git a/src/app/(pages)/kesehatan/[sub]/page.tsx b/src/app/(pages)/kesehatan/[sub]/page.tsx
new file mode 100644
index 00000000..8e92ba69
--- /dev/null
+++ b/src/app/(pages)/kesehatan/[sub]/page.tsx
@@ -0,0 +1,7 @@
+export default function Page() {
+    return (
+        <div>
+            <h1>Keamanan</h1>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/app/kesehatan/page.tsx b/src/app/(pages)/kesehatan/page.tsx
similarity index 100%
rename from src/app/kesehatan/page.tsx
rename to src/app/(pages)/kesehatan/page.tsx
diff --git a/src/app/(pages)/lingkungan/[sub]/page.tsx b/src/app/(pages)/lingkungan/[sub]/page.tsx
new file mode 100644
index 00000000..9b5f43e3
--- /dev/null
+++ b/src/app/(pages)/lingkungan/[sub]/page.tsx
@@ -0,0 +1,7 @@
+export default function Page({ params }: { params: { sub: string } }) {
+    return (
+        <div>
+            <h1>{params.sub}</h1>
+        </div>
+    );
+}   
\ No newline at end of file
diff --git a/src/app/(pages)/lingkungan/page.tsx b/src/app/(pages)/lingkungan/page.tsx
new file mode 100644
index 00000000..870674ed
--- /dev/null
+++ b/src/app/(pages)/lingkungan/page.tsx
@@ -0,0 +1,7 @@
+import { Stack } from "@mantine/core";
+
+export default function Page({ params }: { params: { sub: string } }) {
+    return <Stack>
+        {params.sub}
+    </Stack>
+}
\ No newline at end of file
diff --git a/src/app/(pages)/pendidikan/[sub]/page.tsx b/src/app/(pages)/pendidikan/[sub]/page.tsx
new file mode 100644
index 00000000..ad3d710f
--- /dev/null
+++ b/src/app/(pages)/pendidikan/[sub]/page.tsx
@@ -0,0 +1,7 @@
+export default function Page({ params }: { params: { sub: string } }) {
+    return (
+        <div>
+            <h1>{params.sub}</h1>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/app/pendidikan/page.tsx b/src/app/(pages)/pendidikan/page.tsx
similarity index 100%
rename from src/app/pendidikan/page.tsx
rename to src/app/(pages)/pendidikan/page.tsx
diff --git a/src/app/ekonomi/page.tsx b/src/app/ekonomi/page.tsx
deleted file mode 100644
index 6599ef48..00000000
--- a/src/app/ekonomi/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Stack } from "@mantine/core";
-
-export default function Page() {
-    return <Stack>
-        ekonomi
-    </Stack>
-}
\ No newline at end of file
diff --git a/src/app/lingkungan/page.tsx b/src/app/lingkungan/page.tsx
deleted file mode 100644
index 82fa317e..00000000
--- a/src/app/lingkungan/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Stack } from "@mantine/core";
-
-export default function Page() {
-    return <Stack>
-        lingkungan
-    </Stack>
-}
\ No newline at end of file
diff --git a/src/com/MainLayout.tsx b/src/com/MainLayout.tsx
index aa7b3971..20d7f921 100644
--- a/src/com/MainLayout.tsx
+++ b/src/com/MainLayout.tsx
@@ -1,16 +1,19 @@
-import { Space, Stack } from "@mantine/core";
-import { Navbar } from "./Navbar";
+import colors from "@/con/colors";
+import { Box, Space, Stack } from "@mantine/core";
 import Footer from "./Footer";
+import { Navbar } from "./Navbar";
 
 export function MainLayout({ children }: { children: React.ReactNode }) {
     return (
-        <Stack gap={0}>
+        <Stack gap={0} bg={colors.grey[1]}>
             <Navbar />
             <Space h={{
                 base: "2.2rem",
                 md: "2.5rem"
             }} />
-            {children}
+            <Box>
+                {children}
+            </Box>
             <Footer />
         </Stack>
     )
diff --git a/src/com/main-page/content-1/ModuleView.tsx b/src/com/main-page/content-1/ModuleView.tsx
index f5e9d2cd..fb925da5 100644
--- a/src/com/main-page/content-1/ModuleView.tsx
+++ b/src/com/main-page/content-1/ModuleView.tsx
@@ -1,8 +1,9 @@
 import images from "@/con/images";
 import stateNav from "@/state/state-nav";
-import { Card, Image, SimpleGrid, Stack } from "@mantine/core";
+import { Card, SimpleGrid } from "@mantine/core";
 import { useHover } from "@mantine/hooks";
-import { useTransitionRouter } from 'next-view-transitions'
+import { useTransitionRouter } from 'next-view-transitions';
+import Image from 'next/image';
 
 
 const listImageModule = Object.values(images.module);
@@ -16,6 +17,7 @@ function ModuleItem({ item }: { item: string }) {
         stateNav.module = item;
         router.push("/module");
       }}
+      h={100}
       ref={ref}
       p={"md"}
       bg={"white"}
@@ -24,9 +26,13 @@ function ModuleItem({ item }: { item: string }) {
         border: `2px solid ${hovered ? "lightgray" : "transparent"}`,
       }}
     >
-      <Stack justify="end" h={"100%"}>
-        <Image src={item} alt="icon" fit="contain" loading="lazy" />
-      </Stack>
+      <Image src={item} alt="icon"
+        fill
+        quality={10}
+        objectFit="contain"
+        objectPosition="center"
+        priority={true}
+         />
     </Card>
   );
 }
@@ -35,8 +41,8 @@ function ModuleView() {
   return (
     <SimpleGrid
       cols={{
-        base: 3,
-        md: 4,
+        base: 2,
+        md: 3,
       }}
     >
       {listImageModule.map((item, k) => {
diff --git a/src/com/main-page/content-1/index.tsx b/src/com/main-page/content-1/index.tsx
index 2571cb2f..78cdba77 100644
--- a/src/com/main-page/content-1/index.tsx
+++ b/src/com/main-page/content-1/index.tsx
@@ -1,22 +1,21 @@
 "use client";
 import colors from "@/con/colors";
 import {
-  BackgroundImage,
-  Flex,
   Box,
-  Card,
-  Stack,
-  Image,
-  Text,
   Button,
-  Title,
+  Card,
+  Flex,
+  Stack,
+  Text,
+  Title
 } from "@mantine/core";
+import Image from 'next/image';
 import ModuleView from "./ModuleView";
 import SosmedView from "./SosmedView";
 
 function Content1() {
   return (
-    <BackgroundImage src={"/assets/images/bg-blur.png"}>
+    <Stack bg={colors["blue-button"]}>
       <Flex
         gap={"md"}
         wrap={{
@@ -30,7 +29,6 @@ function Content1() {
             base: "100%",
             md: "60%",
           }}
-          h={820}
           py={{
             base: "xs",
             md: "72",
@@ -58,6 +56,7 @@ function Content1() {
               >
                 <Flex gap={"md"} flex={1}>
                   <Box
+                    pos={"relative"}
                     bg={"white"}
                     w={{
                       base: 64,
@@ -75,11 +74,15 @@ function Content1() {
                     <Image
                       src={"/assets/images/darmasaba-icon.png"}
                       alt="icon"
-                      loading="lazy"
-                      fit="contain"
+                      quality={10}
+                      priority={true}
+                      fill
+                      objectFit="contain"
+                      objectPosition="center"
                     />
                   </Box>
                   <Box
+                    pos={"relative"}
                     w={{
                       base: 64,
                       md: 72,
@@ -97,8 +100,11 @@ function Content1() {
                     <Image
                       src={"/assets/images/pudak-icon.png"}
                       alt="icon"
-                      fit="contain"
-                      loading="lazy"
+                      fill
+                      quality={10}
+                      priority={true}
+                      objectFit="contain"
+                      objectPosition="center"
                     />
                   </Box>
                 </Flex>
@@ -112,23 +118,13 @@ function Content1() {
                     Pemerintah Desa
                   </Text>
                   <Title>DARMASABA</Title>
-                  {/* <Text
-                    fw={"bold"}
-                    fz={{
-                      base: "3rem",
-                      md: "3rem",
-                      sm: ""
-                    }}
-                  >
-                    DARMASABA
-                  </Text> */}
                 </Stack>
               </Flex>
               <ModuleView />
               <SosmedView />
             </Stack>
           </Card>
-          <Stack 
+          <Stack
             align="center"
             justify={"center"}
           >
@@ -164,13 +160,12 @@ function Content1() {
           <Image
             src={"/assets/images/perbekel.png"}
             alt="perbekel"
-            fit="contain" // Menyesuaikan gambar agar sesuai dengan kontainer
-            width={"100%"}
-            h={{
-              base: "500",
-              md: "100%",
-            }}
-            loading="lazy"
+            fill
+            quality={70}
+            objectFit="contain"
+            objectPosition="bottom"
+            placeholder="empty"
+            priority={true}
           />
           <Box
             pos={"absolute"}
@@ -196,7 +191,7 @@ function Content1() {
           </Box>
         </Stack>
       </Flex>
-    </BackgroundImage>
+    </Stack >
   );
 }