diff --git a/src/app/makuro/page.tsx b/src/app/makuro/page.tsx
index 4ddb4c78..1ea65b4f 100644
--- a/src/app/makuro/page.tsx
+++ b/src/app/makuro/page.tsx
@@ -5,12 +5,14 @@ import {
   Button,
   Center,
   Paper,
+  ScrollArea,
   SimpleGrid,
   Stack,
   Text,
   TextInput,
   Title,
 } from "@mantine/core";
+import _ from "lodash";
 // import ViewMakuro from "./_server/makuro_view";
 // import mqtt_client from "@/util/mqtt_client";
 // import { useState } from "react";
@@ -69,17 +71,38 @@ import {
 
 export default function Page() {
   return (
-    <Stack>
-      <Center>
+    <Box>
+      <Box
+        style={{
+          zIndex: 99,
+        }}
+        w={"100%"}
+        bg={"green"}
+        pos={"sticky"}
+        top={0}
+        h={"10vh"}
+      >
+        satu
+      </Box>
+      <Box bg={"red"} pos={"static"}>
         <Stack>
-          <Title>LOGIN</Title>
-          <TextInput />
-          <TextInput />
-          <TextInput />
-          <TextInput />
-          <Button>LOGIN</Button>
+          {Array.from(new Array(300)).map((v, k) => (
+            <Title key={k}>INI DIMANA {k+1}</Title>
+          ))}
         </Stack>
-      </Center>
-    </Stack>
+      </Box>
+      <Text
+        style={{
+          zIndex: 98,
+        }}
+        w={"100%"}
+        bg={"blue"}
+        pos={"sticky"}
+        bottom={0}
+        h={"10vh"}
+      >
+        satu
+      </Text>
+    </Box>
   );
 }
diff --git a/src/app_modules/auth/index.ts b/src/app_modules/auth/index.ts
index 04c1a5f0..97d3dd97 100644
--- a/src/app_modules/auth/index.ts
+++ b/src/app_modules/auth/index.ts
@@ -4,7 +4,6 @@ import Validasi from "./validasi/view";
 import LayoutValidasi from "./validasi/layout";
 import Register from "./register/view";
 import User_Logout from "./logout/view";
-import LayoutLogin from "./login/layout";
 
 export {
   SplashScreen,
@@ -13,5 +12,4 @@ export {
   Register,
   User_Logout as Logout,
   LayoutValidasi,
-  LayoutLogin,
 };
diff --git a/src/app_modules/auth/login/layout.tsx b/src/app_modules/auth/login/layout.tsx
deleted file mode 100644
index 3142b38e..00000000
--- a/src/app_modules/auth/login/layout.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-"use client";
-
-import {
-  AppShell,
-  Center,
-  Footer,
-  Header,
-  Image,
-  Paper,
-  Text,
-  Title,
-} from "@mantine/core";
-import React from "react";
-
-export default function LayoutLogin({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return <>
-  {children}</>;
-}
diff --git a/src/app_modules/auth/validasi/layout.tsx b/src/app_modules/auth/validasi/layout.tsx
index bf18b6f3..56e952a4 100644
--- a/src/app_modules/auth/validasi/layout.tsx
+++ b/src/app_modules/auth/validasi/layout.tsx
@@ -13,8 +13,16 @@ export default function LayoutValidasi({
   const router = useRouter();
 
   return (
-    <Stack>
-      <Box p={"md"}>
+    <Stack >
+      <Box
+        bg={"white"}
+        p={"md"}
+        style={{
+          position: "sticky",
+          top: 0,
+          zIndex: 99,
+        }}
+      >
         <ActionIcon variant="transparent" onClick={() => router.back()}>
           <IconChevronLeft />
         </ActionIcon>
diff --git a/src/app_modules/auth/validasi/view.tsx b/src/app_modules/auth/validasi/view.tsx
index dc449706..440bc596 100644
--- a/src/app_modules/auth/validasi/view.tsx
+++ b/src/app_modules/auth/validasi/view.tsx
@@ -105,53 +105,8 @@ export default function Validasi({ dataOtp }: { dataOtp: any }) {
 
   return (
     <>
-      {/* <Flex
-        align={"center"}
-        justify={"center"}
-        direction={"column"}
-        gap={50}
-        h={"80vh"}
-      >
-        <Title order={4}>Validasi Kode OTP</Title>
-        <IconCircleLetterH size={150} />
-        <Flex direction={"column"} gap={"xl"} align={"center"}>
-          <Flex
-            justify={"center"}
-            gap={1}
-            direction={"column"}
-            align={"center"}
-          >
-            <Text>Enter the 4-digit OTP , we’ve just sent</Text>
-            <Text>to  +{nomor}</Text>
-          </Flex>
-          <PinInput
-          ref={focusTrapRef}
-            spacing={"md"}
-            mt={"md"}
-            onChange={(val) => {
-              setInputOtp(val);
-            }}
-          />
-          <Button
-            w={100}
-            mt={"md"}
-            compact
-            radius={50}
-            bg={Warna.hijau_tua}
-            color="green"
-            onClick={() => {
-              onValid();
-              // myConsole("ok")
-            }}
-          >
-            Submit
-          </Button>
-        </Flex>
-      </Flex> */}
 
-      {/* <pre>{JSON.stringify(code)}</pre> */}
-
-      <Center h={"80%"}>
+      <Center h={"100vh"}>
         <Stack px={"lg"} spacing={"xl"} w={{ base: 400 }} justify="center">
           <Center>
             <IconCloudLockOpen size={130} />
diff --git a/src/app_modules/home/layout.tsx b/src/app_modules/home/layout.tsx
index e0ab35e9..60f3e8f2 100644
--- a/src/app_modules/home/layout.tsx
+++ b/src/app_modules/home/layout.tsx
@@ -3,6 +3,7 @@ import {
   ActionIcon,
   AppShell,
   Avatar,
+  Box,
   Center,
   Flex,
   Footer,
@@ -14,6 +15,7 @@ import {
   Stack,
   Text,
   ThemeIcon,
+  Title,
 } from "@mantine/core";
 import { HomeView } from ".";
 import {
@@ -40,7 +42,7 @@ export default function HomeLayout({
 }) {
   const router = useRouter();
   const [user, setUser] = useState(dataUser);
-  const [loading, setLoading] = useState(false);
+  const [loadingProfil, setLoadingProfile] = useState(false);
   const [loadingUS, setLoadingUS] = useState(false);
   const listFooter = [
     {
@@ -57,33 +59,226 @@ export default function HomeLayout({
     },
   ];
 
+  const Compo_Footer = (
+    <Footer height={70} w={"100%"} bg={"black"}>
+      <Grid p={"xs"}>
+        <Grid.Col span={"auto"}>
+          {loadingUS ? (
+            <Center>
+              <Loader />
+            </Center>
+          ) : (
+            <Center>
+              <Stack
+                align="center"
+                spacing={0}
+                onClick={() => {
+                  if (user?.Profile === null) {
+                    ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile");
+                  } else {
+                    setLoadingUS(true);
+                    // router.push(RouterProfile.katalog + `${user.Profile.id}`);
+                    router.push(RouterUserSearch.main);
+                  }
+                }}
+              >
+                <ActionIcon variant={"transparent"}>
+                  <IconUserSearch color="white" />
+                </ActionIcon>
+                <Text fz={"xs"} c={"white"}>
+                  Temukan pengguna
+                </Text>
+              </Stack>
+            </Center>
+          )}
+        </Grid.Col>
+        <Grid.Col span={"auto"}>
+          {loadingProfil ? (
+            <Center>
+              <Loader />
+            </Center>
+          ) : (
+            <Center>
+              <Stack
+                align="center"
+                spacing={2}
+                onClick={() => {
+                  setLoadingProfile(true);
+                  if (user?.Profile === null) {
+                    router.push(RouterProfile.create + `${user.id}`);
+                  } else {
+                    router.push(RouterProfile.katalog + `${user.Profile.id}`);
+                  }
+                }}
+              >
+                <ActionIcon variant={"transparent"}>
+                  {user?.Profile === null ? (
+                    <IconUserCircle color="white" />
+                  ) : (
+                    <Avatar
+                      radius={"xl"}
+                      size={25}
+                      sx={{
+                        borderStyle: "solid",
+                        borderWidth: "0.5px",
+                        borderColor: "white",
+                      }}
+                      src={
+                        RouterProfile.api_foto_profile +
+                        `${user?.Profile.imagesId}`
+                      }
+                    />
+                  )}
+                </ActionIcon>
+                <Text fz={"xs"} c={"white"}>
+                  Profile
+                </Text>
+              </Stack>
+            </Center>
+          )}
+        </Grid.Col>
+      </Grid>
+    </Footer>
+  );
+
+  return (
+    <>
+      <Box>
+        <Box
+          style={{
+            zIndex: 99,
+          }}
+          w={"100%"}
+          bg={"black"}
+          pos={"sticky"}
+          top={0}
+          h={50}
+        >
+          <Center h={"100%"}>
+            <Title order={4} c={"white"}>
+              HIPMI
+            </Title>
+          </Center>
+        </Box>
+        <Box p={"sm"} pos={"static"}>
+          {children}
+        </Box>
+
+        <Box
+          style={{
+            zIndex: 98,
+          }}
+          w={"100%"}
+          bg={"black"}
+          pos={"sticky"}
+          bottom={0}
+          h={"10vh"}
+        >
+          <SimpleGrid cols={2}>
+            <Center h={"10vh"}>
+              {loadingUS ? (
+                <Center>
+                  <Loader />
+                </Center>
+              ) : (
+                <Center>
+                  <Stack
+                    align="center"
+                    spacing={0}
+                    onClick={() => {
+                      if (user?.Profile === null) {
+                        ComponentGlobal_NotifikasiPeringatan(
+                          "Lengkapi Profile"
+                        );
+                      } else {
+                        setLoadingUS(true);
+                        // router.push(RouterProfile.katalog + `${user.Profile.id}`);
+                        router.push(RouterUserSearch.main);
+                      }
+                    }}
+                  >
+                    <ActionIcon variant={"transparent"}>
+                      <IconUserSearch color="white" />
+                    </ActionIcon>
+                    <Text fz={"xs"} c={"white"}>
+                      Temukan pengguna
+                    </Text>
+                  </Stack>
+                </Center>
+              )}
+            </Center>
+
+            <Center h={"10vh"}>
+              {loadingProfil ? (
+                <Center>
+                  <Loader />
+                </Center>
+              ) : (
+                <Center>
+                  <Stack
+                    align="center"
+                    spacing={2}
+                    onClick={() => {
+                      setLoadingProfile(true);
+                      if (user?.Profile === null) {
+                        router.push(RouterProfile.create + `${user.id}`);
+                      } else {
+                        router.push(
+                          RouterProfile.katalog + `${user.Profile.id}`
+                        );
+                      }
+                    }}
+                  >
+                    <ActionIcon variant={"transparent"}>
+                      {user?.Profile === null ? (
+                        <IconUserCircle color="white" />
+                      ) : (
+                        <Avatar
+                          radius={"xl"}
+                          size={25}
+                          sx={{
+                            borderStyle: "solid",
+                            borderWidth: "0.5px",
+                            borderColor: "white",
+                          }}
+                          src={
+                            RouterProfile.api_foto_profile +
+                            `${user?.Profile.imagesId}`
+                          }
+                        />
+                      )}
+                    </ActionIcon>
+                    <Text fz={"xs"} c={"white"}>
+                      Profile
+                    </Text>
+                  </Stack>
+                </Center>
+              )}
+            </Center>
+          </SimpleGrid>
+        </Box>
+      </Box>
+    </>
+  );
+
   return (
     <>
       <AppShell
         header={
           <Header height={50} bg={"dark"}>
             <Group position="center" align="center" h={50} p={"sm"}>
-              {/* <Group spacing={"sm"}>
-                <ActionIcon>
-                  <IconAward />
-                </ActionIcon>
-              </Group> */}
               <Text color="white" fw={"bold"}>
                 HIPMI
               </Text>
               {/* <Logout/> */}
-              {/* <Group spacing={"sm"}>
-                <ActionIcon>
-                  <IconQrcode />
-                </ActionIcon>
-              </Group> */}
             </Group>
           </Header>
         }
         footer={
           <Footer height={70} bg={"dark"}>
-            <Grid p={"xs"}>
+            <Grid p={"xs"} bg={"blue"}>
               <Grid.Col
+                bg={"red"}
                 span={"auto"}
                 onClick={() => {
                   if (user?.Profile === null) {
@@ -111,9 +306,10 @@ export default function HomeLayout({
                 )}
               </Grid.Col>
               <Grid.Col
+                bg={"cyan"}
                 span={"auto"}
                 onClick={() => {
-                  setLoading(true);
+                  setLoadingProfile(true);
                   if (user?.Profile === null) {
                     router.push(RouterProfile.create + `${user.id}`);
                   } else {
@@ -121,7 +317,7 @@ export default function HomeLayout({
                   }
                 }}
               >
-                {loading ? (
+                {loadingProfil ? (
                   <Center>
                     <Loader />
                   </Center>
diff --git a/src/app_modules/home/view.tsx b/src/app_modules/home/view.tsx
index 57b746b9..1142e38b 100644
--- a/src/app_modules/home/view.tsx
+++ b/src/app_modules/home/view.tsx
@@ -105,8 +105,8 @@ export default function HomeView({ dataUser }: { dataUser: MODEL_USER }) {
     <>
       {visible ? <ComponentGlobal_V2_LoadingPage /> : ""}
 
-      <Box>
-        <Paper bg={"dark"} radius={5} my={"xs"}>
+      <Box h={"100%"}>
+        <Paper bg={"dark"} radius={5} mb={"xs"}>
           <Image alt="logo" src={"/aset/home/home-hipmi.png"} />
         </Paper>
 
@@ -157,7 +157,7 @@ export default function HomeView({ dataUser }: { dataUser: MODEL_USER }) {
                   >
                     {e.icon}
                   </ActionIcon>
-                  <Text c={e.link === "" ? "gray" : "teal"}>{e.name}</Text>
+                  <Text c={e.link === "" ? "gray" : "teal"} fz={"sm"}>{e.name}</Text>
                 </Flex>
               </Paper>
             ))}