diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index cff18aa3..e7de6186 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -54,6 +54,15 @@ model UserSession {
   userId    String   @unique
 }
 
+model KodeOtp {
+  id        String   @id @default(cuid())
+  isActive  Boolean  @default(true)
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  nomor     String
+  otp       Int
+}
+
 model Profile {
   id                 String            @id @default(cuid())
   name               String
diff --git a/public/aset/investasi/home-hipmi.png b/public/aset/home/home-hipmi.png
similarity index 100%
rename from public/aset/investasi/home-hipmi.png
rename to public/aset/home/home-hipmi.png
diff --git a/src/app/api/auth/validasi/route.ts b/src/app/api/auth/validasi/route.ts
index ba849d0e..be2bc349 100644
--- a/src/app/api/auth/validasi/route.ts
+++ b/src/app/api/auth/validasi/route.ts
@@ -4,9 +4,9 @@ import { NextResponse } from "next/server";
 import { cookies } from "next/headers";
 import { sealData, unsealData } from "iron-session";
 import { getConfig } from "@/bin/config";
-import yaml from "yaml";
-import fs from "fs";
 import { revalidatePath } from "next/cache";
+import fs from "fs";
+import yaml from "yaml";
 const config = yaml.parse(fs.readFileSync("config.yaml").toString());
 
 export async function POST(req: Request) {
diff --git a/src/app/api/seeder/route.ts b/src/app/api/seeder/route.ts
index ee22733d..c81e864f 100644
--- a/src/app/api/seeder/route.ts
+++ b/src/app/api/seeder/route.ts
@@ -39,23 +39,23 @@ export async function GET(req: Request) {
       });
     }
 
-    for (let i of userSeeder) {
-      await prisma.user.upsert({
-        where: {
-          nomor: i.nomor,
-        },
-        create: {
-          nomor: i.nomor,
-          username: i.name,
-          masterUserRoleId: i.masterUserRoleId,
-        },
-        update: {
-          nomor: i.nomor,
-          username: i.name,
-          masterUserRoleId: i.masterUserRoleId,
-        },
-      });
-    }
+    // for (let i of userSeeder) {
+    //   await prisma.user.upsert({
+    //     where: {
+    //       nomor: i.nomor,
+    //     },
+    //     create: {
+    //       nomor: i.nomor,
+    //       username: i.name,
+    //       masterUserRoleId: i.masterUserRoleId,
+    //     },
+    //     update: {
+    //       nomor: i.nomor,
+    //       username: i.name,
+    //       masterUserRoleId: i.masterUserRoleId,
+    //     },
+    //   });
+    // }
 
     for (let i of bidangBisnis) {
       await prisma.masterBidangBisnis.upsert({
diff --git a/src/app/dev/auth/login/layout.tsx b/src/app/dev/auth/login/layout.tsx
new file mode 100644
index 00000000..79a8e50e
--- /dev/null
+++ b/src/app/dev/auth/login/layout.tsx
@@ -0,0 +1,14 @@
+import { LayoutLogin } from "@/app_modules/auth";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutLogin>{children}</LayoutLogin>
+    </>
+  );
+}
diff --git a/src/app/dev/auth/login/page.tsx b/src/app/dev/auth/login/page.tsx
index b36236db..9ef15c54 100644
--- a/src/app/dev/auth/login/page.tsx
+++ b/src/app/dev/auth/login/page.tsx
@@ -3,12 +3,10 @@ import { cookies } from "next/headers";
 
 export default function Page() {
   const c = cookies().getAll();
-  const tkn = c;
 
   return (
     <>
-      {/* {JSON.stringify(tkn)} */}
-      <Login />;
+      <Login />
     </>
   );
 }
diff --git a/src/app/dev/auth/register/[id]/page.tsx b/src/app/dev/auth/register/[id]/page.tsx
new file mode 100644
index 00000000..b17e670f
--- /dev/null
+++ b/src/app/dev/auth/register/[id]/page.tsx
@@ -0,0 +1,8 @@
+import { Register } from "@/app_modules/auth";
+import { auth_getKodeOtpById } from "@/app_modules/auth/fun/get_kode_otp_by_id";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  let otpId = params.id
+  const dataOtp = await auth_getKodeOtpById(otpId)
+  return <Register dataOtp={dataOtp} />;
+}
diff --git a/src/app/dev/auth/register/page.tsx b/src/app/dev/auth/register/page.tsx
deleted file mode 100644
index f35d8b13..00000000
--- a/src/app/dev/auth/register/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Register } from "@/app_modules/auth";
-
-export default function Page() {
-  return <Register />;
-}
diff --git a/src/app/dev/auth/validasi/layout.tsx b/src/app/dev/auth/validasi/[id]/layout.tsx
similarity index 100%
rename from src/app/dev/auth/validasi/layout.tsx
rename to src/app/dev/auth/validasi/[id]/layout.tsx
diff --git a/src/app/dev/auth/validasi/[id]/page.tsx b/src/app/dev/auth/validasi/[id]/page.tsx
new file mode 100644
index 00000000..fbd553f8
--- /dev/null
+++ b/src/app/dev/auth/validasi/[id]/page.tsx
@@ -0,0 +1,9 @@
+import { Validasi } from "@/app_modules/auth";
+import { auth_getKodeOtpById } from "@/app_modules/auth/fun/get_kode_otp_by_id";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  let kodeOtpId = params.id;
+  const dataOtp = await auth_getKodeOtpById(kodeOtpId);
+
+  return <Validasi dataOtp={dataOtp} />;
+}
diff --git a/src/app/dev/auth/validasi/page.tsx b/src/app/dev/auth/validasi/page.tsx
deleted file mode 100644
index 9f5a20d0..00000000
--- a/src/app/dev/auth/validasi/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Validasi } from "@/app_modules/auth";
-
-
-export default function Page() {
-
-  return <Validasi  />;
-}
diff --git a/src/app/lib/router_hipmi/router_auth.ts b/src/app/lib/router_hipmi/router_auth.ts
new file mode 100644
index 00000000..6149df2b
--- /dev/null
+++ b/src/app/lib/router_hipmi/router_auth.ts
@@ -0,0 +1,5 @@
+export const RouterAuth = {
+  login: "/dev/auth/login",
+  validasi: "/dev/auth/validasi/",
+  register: "/dev/auth/register/",
+};
diff --git a/src/app_modules/admin/global_state/index.ts b/src/app_modules/admin/global_state/index.ts
index 32e642b8..689ebfa2 100644
--- a/src/app_modules/admin/global_state/index.ts
+++ b/src/app_modules/admin/global_state/index.ts
@@ -5,6 +5,6 @@ import { atomWithStorage } from "jotai/utils";
  * @type number
  * @
  */
-export const gs_admin_hotMenu = atomWithStorage("gs_admin_hotMenu", 0)
+export const gs_admin_hotMenu = atomWithStorage("gs_admin_hotMenu", 1)
 
 export const gs_admin_subMenu = atomWithStorage<number | null>("gs_admin_subMenu",null)
\ No newline at end of file
diff --git a/src/app_modules/admin/layout.tsx b/src/app_modules/admin/layout.tsx
index cda67e17..0a3ca7e1 100644
--- a/src/app_modules/admin/layout.tsx
+++ b/src/app_modules/admin/layout.tsx
@@ -52,8 +52,6 @@ export default function AdminLayout({
   const [active, setActive] = useAtom(gs_admin_hotMenu);
   const [activeChild, setActiveChild] = useAtom(gs_admin_subMenu);
 
-
-
   const navbarItems = listAdminPage.map((e, i) => (
     <Box key={e.id}>
       <NavLink
diff --git a/src/app_modules/auth/fun/fun_edit_aktivasi_kode_otp_by_id.ts b/src/app_modules/auth/fun/fun_edit_aktivasi_kode_otp_by_id.ts
new file mode 100644
index 00000000..5a533f04
--- /dev/null
+++ b/src/app_modules/auth/fun/fun_edit_aktivasi_kode_otp_by_id.ts
@@ -0,0 +1,18 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+
+export async function auth_funEditAktivasiKodeOtpById(otpId: string) {
+  console.log(otpId);
+  const updt = await prisma.kodeOtp.update({
+    where: {
+      id: otpId,
+    },
+    data: {
+      isActive: false,
+    },
+  });
+
+  if (!updt) return { status: 400, message: "Gagal Update Aktivasi Kode OTP" };
+  return { status: 200, message: "Berhasil Update Aktivasi Kode OTP" };
+}
diff --git a/src/app_modules/auth/fun/fun_login.ts b/src/app_modules/auth/fun/fun_login.ts
new file mode 100644
index 00000000..06c73958
--- /dev/null
+++ b/src/app_modules/auth/fun/fun_login.ts
@@ -0,0 +1,58 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { randomOTP } from "./rondom_otp";
+
+export async function auth_funLogin(nomor: string) {
+  const codeOtp = randomOTP();
+
+  // const res = await fetch(
+  //   `https://wa.wibudev.com/code?nom=${nomor}&text=Masukan Kode OTP:${codeOtp}`
+  // );
+
+  // const sendWa = await res.json();
+  // if (sendWa.status !== "success")
+  //   return { status: 400, message: "WA Tidak Terdaftar" };
+
+  // const createOtpId = await prisma.kodeOtp.create({
+  //   data: {
+  //     nomor: nomor,
+  //     otp: codeOtp,
+  //   },
+  // });
+
+  // if (!createOtpId) return { status: 400, message: "Gagal Membuat Kode OTP" };
+
+  // return {
+  //   status: 200,
+  //   message: "Kode Verifikasi Dikirim",
+  //   kodeOtpId: createOtpId.id
+  // };
+
+  try {
+    const res = await fetch(
+      `https://wa.wibudev.com/code?nom=${nomor}&text=Masukan Kode OTP:${codeOtp}`
+    );
+
+    const sendWa = await res.json();
+    if (sendWa.status !== "success")
+      return { status: 400, message: "WA Tidak Terdaftar" };
+
+    const createOtpId = await prisma.kodeOtp.create({
+      data: {
+        nomor: nomor,
+        otp: codeOtp,
+      },
+    });
+
+    if (!createOtpId) return { status: 400, message: "Gagal Membuat Kode OTP" };
+
+    return {
+      status: 200,
+      message: "Kode Verifikasi Dikirim",
+      kodeOtpId: createOtpId.id,
+    };
+  } catch (error) {
+    return { status: 500, message: "Server Error !!!" };
+  }
+}
diff --git a/src/app_modules/auth/fun/fun_logout.ts b/src/app_modules/auth/fun/fun_logout.ts
new file mode 100644
index 00000000..f7986639
--- /dev/null
+++ b/src/app_modules/auth/fun/fun_logout.ts
@@ -0,0 +1,25 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { cookies } from "next/headers";
+
+export async function auth_Logout(kodeId: string) {
+  cookies().set({
+    name: "ssn",
+    value: "",
+    maxAge: 0,
+  });
+
+  const c = cookies().get("ssn");
+  if (c?.value !== "") return { status: 400, message: "Gagal Logout" };
+
+  const del = await prisma.kodeOtp.delete({
+    where: {
+      id: kodeId,
+    },
+  });
+
+  if (!del) return { status: 400, message: "Gagal Hapus Kode OTP Id" };
+  
+  return { status: 200, message: "Logout Berhasil" };
+}
diff --git a/src/app_modules/auth/fun/fun_register.ts b/src/app_modules/auth/fun/fun_register.ts
new file mode 100644
index 00000000..33bf5b30
--- /dev/null
+++ b/src/app_modules/auth/fun/fun_register.ts
@@ -0,0 +1,49 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { sealData } from "iron-session";
+import { cookies } from "next/headers";
+
+import fs from "fs";
+import yaml from "yaml";
+const config = yaml.parse(fs.readFileSync("config.yaml").toString());
+
+export async function Auth_funRegister(data: any) {
+  const cekUsername = await prisma.user.findUnique({
+    where: {
+      username: data.username,
+    },
+  });
+
+  if (cekUsername != null)
+    return {
+      status: 400,
+      message: "Username sudah terdaftar",
+    };
+
+  const create = await prisma.user.create({
+    data: {
+      username: data.username,
+      nomor: data.nomor,
+    },
+  });
+  if (!create) return { status: 400, message: "Gagal Mendaftar" };
+
+  const seal = await sealData(
+    JSON.stringify({
+      id: data.id,
+      username: data.username,
+    }),
+    {
+      password: await config.server.password,
+    }
+  );
+
+  cookies().set({
+    name: "ssn",
+    value: seal,
+    maxAge: 60 * 60 * 24 * 7,
+  });
+
+  return { status: 200, message: "Berhasil Mendaftar" };
+}
diff --git a/src/app_modules/auth/fun/fun_validasi.ts b/src/app_modules/auth/fun/fun_validasi.ts
new file mode 100644
index 00000000..3a4c5bd6
--- /dev/null
+++ b/src/app_modules/auth/fun/fun_validasi.ts
@@ -0,0 +1,46 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { sealData } from "iron-session";
+import fs from "fs";
+import yaml from "yaml";
+import { cookies } from "next/headers";
+import { revalidatePath } from "next/cache";
+import { RouterHome } from "@/app/lib/router_hipmi/router_home";
+const config = yaml.parse(fs.readFileSync("config.yaml").toString());
+
+export async function auth_funValidasi(nomor: string) {
+  const cek = await prisma.user.findUnique({
+    where: {
+      nomor: nomor,
+    },
+    select: {
+      id: true,
+      nomor: true,
+      username: true,
+    },
+  });
+
+  if (cek === null) return { status: 400, message: "Nomor Belum Terdaftar" };
+  if (cek) {
+    const res = await sealData(
+      JSON.stringify({
+        id: cek.id,
+        username: cek.username,
+      }),
+      {
+        password: await config.server.password,
+      }
+    );
+
+    cookies().set({
+      name: "ssn",
+      value: res,
+      maxAge: 60 * 60 * 24 * 7,
+    });
+
+    revalidatePath(RouterHome.main_home);
+  }
+
+  return { status: 200, message: "Nomor Terverivikasi" };
+}
diff --git a/src/app_modules/auth/fun/get_kode_otp_by_id.ts b/src/app_modules/auth/fun/get_kode_otp_by_id.ts
new file mode 100644
index 00000000..8b0849ae
--- /dev/null
+++ b/src/app_modules/auth/fun/get_kode_otp_by_id.ts
@@ -0,0 +1,13 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+
+export async function auth_getKodeOtpById(otpId: string) {
+  const data = await prisma.kodeOtp.findFirst({
+    where: {
+      id: otpId,
+    },
+  });
+
+  return data
+}
diff --git a/src/app/fun/rondom_otp.ts b/src/app_modules/auth/fun/rondom_otp.ts
similarity index 100%
rename from src/app/fun/rondom_otp.ts
rename to src/app_modules/auth/fun/rondom_otp.ts
diff --git a/src/app_modules/auth/index.ts b/src/app_modules/auth/index.ts
index ccb5b9fb..04c1a5f0 100644
--- a/src/app_modules/auth/index.ts
+++ b/src/app_modules/auth/index.ts
@@ -4,5 +4,14 @@ 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, Login, Validasi, Register, User_Logout as Logout, LayoutValidasi };
+export {
+  SplashScreen,
+  Login,
+  Validasi,
+  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
new file mode 100644
index 00000000..2bc4c164
--- /dev/null
+++ b/src/app_modules/auth/login/layout.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import {
+  AppShell,
+  Center,
+  Footer,
+  Header,
+  Image,
+  Paper,
+  Text,
+} from "@mantine/core";
+import React from "react";
+
+export default function LayoutLogin({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell
+        // header={
+        //   <Header height={180} sx={{ borderStyle: "none" }}>
+        //     <Paper h={180} sx={{ borderRadius: "0 0 30px 30px" }}>
+        //       <Center h={"100%"}>
+        //         <Image
+        //         mt={"xl"}
+        //           height={130}
+        //           width={130}
+        //           alt="logo"
+        //           src={"/aset/logo/logo-hipmi.png"}
+        //         />
+        //       </Center>
+        //     </Paper>
+        //   </Header>
+        // }
+        
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}
diff --git a/src/app_modules/auth/login/view.tsx b/src/app_modules/auth/login/view.tsx
index 77be0cff..bd93903c 100644
--- a/src/app_modules/auth/login/view.tsx
+++ b/src/app_modules/auth/login/view.tsx
@@ -1,101 +1,135 @@
 "use client";
 
 import { myConsole } from "@/app/fun/my_console";
-import { randomOTP } from "@/app/fun/rondom_otp";
+import { randomOTP } from "@/app_modules/auth/fun/rondom_otp";
 import { ApiHipmi } from "@/app/lib/api";
 import { Warna } from "@/app/lib/warna";
-import { Button, Center, Flex, Stack, TextInput, Title } from "@mantine/core";
+import {
+  Button,
+  Center,
+  Flex,
+  Grid,
+  Group,
+  Image,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+} from "@mantine/core";
 import { getHotkeyHandler, useFocusTrap, useHotkeys } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import toast from "react-simple-toasts";
 import { useAtom } from "jotai";
-import { gs_otp, gs_nomor } from "../state/state";
-import { IconCircleLetterH } from "@tabler/icons-react";
+import { gs_otp, gs_nomor, gs_kodeId } from "../state/state";
 import { RouterAdminDashboard } from "@/app/lib/router_hipmi/router_admin";
 import { NotifBerhasil } from "@/app_modules/donasi/component/notifikasi/notif_berhasil";
 import { NotifGagal } from "@/app_modules/donasi/component/notifikasi/notif_gagal";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
+import { auth_funLogin } from "@/app_modules/auth/fun/fun_login";
+import { RouterAuth } from "@/app/lib/router_hipmi/router_auth";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
 
 export default function Login() {
   const router = useRouter();
   const [nomor, setNomor] = useState("");
-  const [inputNumber, setInputNumber] = useAtom(gs_nomor);
-  const [code, setCode] = useAtom(gs_otp);
+  const [kodeId, setKodeId] = useAtom(gs_kodeId);
   const focusTrapRef = useFocusTrap();
 
-  const onLogin = async () => {
-    const body = {
-      nomor: nomor,
-      otp: randomOTP(),
-    };
+  async function onLogin() {
+    if (nomor.length < 10)
+      return ComponentGlobal_NotifikasiPeringatan("Nomor minimal 10 digit");
+    if (nomor.length > 13)
+      return ComponentGlobal_NotifikasiPeringatan("Nomor maximal 13 digit");
 
-    if (body.nomor.length < 10) return toast("Nomor minimal 10 digit");
-    if (body.nomor.length > 13) return toast("Nomor maximal 13 digit");
 
-    await fetch(ApiHipmi.login, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(body),
-    })
-      .then((res) => res.json())
-      .then((val) => {
-        // console.log(val);
-        if (val.success === true) {
-          router.push(RouterAdminDashboard.splash_admin);
-        } else {
-          if (val.status == 200) {
-            setCode(val.body.otp);
-            setInputNumber(val.body.nomor);
-            router.push("/dev/auth/validasi");
-           return NotifBerhasil("Nomor OTP terkirim");
-          } else {
-            NotifGagal(val.message);
-          }
-        }
-      });
-  };
+    await auth_funLogin(nomor).then((res) => {
+      if (res.status === 200) {
+        ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
+        setKodeId(res.kodeOtpId);
+        router.push(RouterAuth.validasi + res.kodeOtpId);
+      } else {
+        ComponentGlobal_NotifikasiPeringatan(res.message);
+      }
+    });
+
+    // await fetch(ApiHipmi.login, {
+    //   method: "POST",
+    //   headers: {
+    //     "Content-Type": "application/json",
+    //   },
+    //   body: JSON.stringify(body),
+    // })
+    //   .then((res) => res.json())
+    //   .then((val) => {
+    //     // console.log(val);
+    //     if (val.success === true) {
+    //       router.push(RouterAdminDashboard.splash_admin);
+    //     } else {
+    //       if (val.status == 200) {
+    //         setCode(val.body.otp);
+    //         setInputNumber(val.body.nomor);
+    //         router.push("/dev/auth/validasi");
+    //         return NotifBerhasil("Nomor OTP terkirim");
+    //       } else {
+    //         NotifGagal(val.message);
+    //       }
+    //     }
+    //   });
+  }
 
   return (
     <>
-      <Flex
-        h={"100vh"}
-        direction={"column"}
-        justify={"center"}
-        align={"center"}
-        gap={"lg"}
-      >
-        <IconCircleLetterH size={150} />
-        <Title>Login</Title>
 
-        <TextInput
-        ref={focusTrapRef}
-          label="Phone Number"
-          w={250}
-          type="number"
-          placeholder="62 xx xxx xxx xxx"
-          // value={nomor}
-          onChange={(val) => {
-            setNomor(val.target.value);
-          }}
-        />
+      <Center h={"80%"}>
+        <Stack px={"lg"} spacing={"xl"} w={{ base: 400 }} justify="center">
+          <Center h={"100%"}>
+            <Image
+              mt={"xl"}
+              height={130}
+              width={130}
+              alt="logo"
+              src={"/aset/logo/logo-hipmi.png"}
+            />
+          </Center>
+          <Stack spacing={0}>
+            <Title order={4}>Selamat Datang di HIPMI App</Title>
+            <Text fs={"italic"} fz={"sm"}>
+              Silahkan masukan nomor telepon anda untuk masuk !
+            </Text>
+          </Stack>
 
-        <Button
-          mt={"xs"}
-          h={30}
-          w={250}
-          radius={50}
-          compact
-          bg={Warna.hijau_muda}
-          color={"green"}
-          onClick={() => {
-            onLogin();
-          }}
-        >
-          Login
-        </Button>
-      </Flex>
+          <Grid>
+            <Grid.Col span={"content"}>
+              <Center h={"100%"}>
+                <Text fw={"bold"}>+62</Text>
+              </Center>
+            </Grid.Col>
+            <Grid.Col span={"auto"}>
+              <TextInput
+                ref={focusTrapRef}
+                w={"100%"}
+                type="number"
+                placeholder="xx xxx xxx xxx"
+                onChange={(val) => {
+                  setNomor(62 + val.target.value);
+                }}
+              />
+            </Grid.Col>
+          </Grid>
+
+          <Button
+            radius={"md"}
+            compact
+            h={40}
+            color={"teal"}
+            onClick={() => {
+              onLogin();
+            }}
+          >
+            <Text>LOGIN</Text>
+          </Button>
+        </Stack>
+      </Center>
     </>
   );
 }
diff --git a/src/app_modules/auth/logout/view.tsx b/src/app_modules/auth/logout/view.tsx
index 58ffe935..89f282b2 100644
--- a/src/app_modules/auth/logout/view.tsx
+++ b/src/app_modules/auth/logout/view.tsx
@@ -1,36 +1,45 @@
 "use client";
-import { myConsole } from "@/app/fun/my_console";
-import { ApiHipmi } from "@/app/lib/api";
+
 import { ActionIcon, Button, Group, Modal, Stack, Title } from "@mantine/core";
 import { useRouter } from "next/navigation";
 import { useAtom } from "jotai";
-import { gs_nomor, gs_otp } from "../state/state";
+import { gs_kodeId, gs_nomor, gs_otp } from "../state/state";
 import { IconLogout } from "@tabler/icons-react";
 import { Warna } from "@/app/lib/warna";
 import { useDisclosure } from "@mantine/hooks";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import { auth_Logout } from "../fun/fun_logout";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
 
 export default function User_Logout() {
   const router = useRouter();
-  const [nomor, setnomor] = useAtom(gs_nomor);
-  const [code, setCode] = useAtom(gs_otp);
-
   const [opened, { toggle }] = useDisclosure(false);
+  const [kodeId, setKodeId] = useAtom(gs_kodeId);
 
   const onLogout = async () => {
-    await fetch(ApiHipmi.logout)
-      .then((res) => res.json())
-      .then((val) => {
-        if (val.status == 200) {
-          setnomor(null);
-          setCode(null);
-
-          ComponentGlobal_NotifikasiBerhasil("Anda Berhasil Logout")
-          return router.push("/dev/auth/login");
-        }
-      });
+    // await fetch(ApiHipmi.logout)
+    //   .then((res) => res.json())
+    //   .then((val) => {
+    //     if (val.status == 200) {
+    //       setnomor(null);
+    //       setCode(null);
+    //       ComponentGlobal_NotifikasiBerhasil("Anda Berhasil Logout")
+    //       return router.push("/dev/auth/login");
+    //     }
+    //   });
   };
 
+  async function onClickLogout() {
+    await auth_Logout(kodeId).then((res) => {
+      if (res.status === 200) {
+        setKodeId("");
+        ComponentGlobal_NotifikasiBerhasil(res.message);
+      } else {
+        ComponentGlobal_NotifikasiPeringatan(res.message);
+      }
+    });
+  }
+
   return (
     <>
       <Modal opened={opened} onClose={toggle} centered withCloseButton={false}>
@@ -45,7 +54,7 @@ export default function User_Logout() {
               radius={50}
               bg={Warna.merah}
               color="red"
-              onClick={() => onLogout()}
+              onClick={() => onClickLogout()}
             >
               Keluar
             </Button>
diff --git a/src/app_modules/auth/register/view.tsx b/src/app_modules/auth/register/view.tsx
index 9fa289ca..6e44c0ee 100644
--- a/src/app_modules/auth/register/view.tsx
+++ b/src/app_modules/auth/register/view.tsx
@@ -1,8 +1,17 @@
 "use client";
 
 import { Warna } from "@/app/lib/warna";
-import { Flex, Title, TextInput, Button, Text } from "@mantine/core";
-import { IconCircleLetterH } from "@tabler/icons-react";
+import {
+  Flex,
+  Title,
+  TextInput,
+  Button,
+  Text,
+  Center,
+  PinInput,
+  Stack,
+} from "@mantine/core";
+import { IconCircleLetterH, IconCloudLockOpen } from "@tabler/icons-react";
 import { gs_nomor } from "../state/state";
 import { useAtom } from "jotai";
 import { useState } from "react";
@@ -12,46 +21,79 @@ import { ApiHipmi } from "@/app/lib/api";
 import { useRouter } from "next/navigation";
 import _ from "lodash";
 import { useFocusTrap } from "@mantine/hooks";
+import { Auth_funRegister } from "../fun/fun_register";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import { IconPencilCheck } from "@tabler/icons-react";
+import { RouterHome } from "@/app/lib/router_hipmi/router_home";
+import { auth_funEditAktivasiKodeOtpById } from "../fun/fun_edit_aktivasi_kode_otp_by_id";
 
-export default function Register() {
-  const route = useRouter();
-  const [nomor, setNomor] = useAtom(gs_nomor);
+export default function Register({ dataOtp }: { dataOtp: any }) {
+  const router = useRouter();
+  const [nomor, setNomor] = useState(dataOtp.nomor);
   const [value, setValue] = useState("");
   const focusTrapRef = useFocusTrap();
 
-  const onRegister = async () => {
-    myConsole(value);
+  // const onRegister = async () => {
+  //   myConsole(value);
 
+  //   const body = {
+  //     username: _.lowerCase(value),
+  //     nomor: nomor,
+  //   };
+
+  //   if (!body) return toast("Lengkapi username");
+  //   if (body.username.length < 5) return toast("Username minimal 5 karakter");
+
+  //   await fetch(ApiHipmi.register, {
+  //     method: "POST",
+  //     headers: {
+  //       "Content-Type": "application/json",
+  //     },
+  //     body: JSON.stringify(body),
+  //   })
+  //     .then((res) => res.json())
+  //     .then((val) => {
+  //       myConsole(val);
+  //       if (val.status == 201) {
+  //         toast("Pendaftaran Berhasil");
+  //         return route.push("/dev/home");
+  //       } else {
+  //         return toast(val.message);
+  //       }
+  //     });
+  // };
+
+  async function onRegistarsi() {
     const body = {
       username: _.lowerCase(value),
       nomor: nomor,
     };
 
-    if (!body) return toast("Lengkapi username");
-    if (body.username.length < 5) return toast("Username minimal 5 karakter");
+    if (_.values(body.username).includes(""))
+      return ComponentGlobal_NotifikasiPeringatan("Lengkapi Username");
+    if (body.username.length < 5)
+      return ComponentGlobal_NotifikasiPeringatan("Username minimal 5 krakter");
 
-    await fetch(ApiHipmi.register, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(body),
-    })
-      .then((res) => res.json())
-      .then((val) => {
-        myConsole(val);
-        if (val.status == 201) {
-          toast("Pendaftaran Berhasil");
-          return route.push("/dev/home");
-        } else {
-          return toast(val.message);
-        }
-      });
-  };
+    await Auth_funRegister(body).then(async (res) => {
+      if (res.status === 200) {
+        await auth_funEditAktivasiKodeOtpById(dataOtp.id).then((val) => {
+          if (val.status === 200) {
+            ComponentGlobal_NotifikasiBerhasil(res.message);
+            router.push(RouterHome.main_home);
+          } else {
+            ComponentGlobal_NotifikasiPeringatan(val.message);
+          }
+        });
+      } else {
+        ComponentGlobal_NotifikasiPeringatan(res.message);
+      }
+    });
+  }
 
   return (
     <>
-      <Flex
+      {/* <Flex
         align={"center"}
         justify={"center"}
         direction={"column"}
@@ -63,7 +105,7 @@ export default function Register() {
         <Flex direction={"column"} gap={"xl"} align={"center"}>
           <Flex direction={"column"}>
             <TextInput
-            ref={focusTrapRef}
+              ref={focusTrapRef}
               w={250}
               label="Username"
               placeholder="Username"
@@ -88,7 +130,59 @@ export default function Register() {
             Register
           </Button>
         </Flex>
-      </Flex>
+      </Flex> */}
+
+      {/* <pre>{JSON.stringify(dataOtp,null,2)}</pre> */}
+
+      <Center>
+        <Stack
+          px={"lg"}
+          spacing={70}
+          w={{ base: 400 }}
+          justify="center"
+          h={"80vh"}
+        >
+          <Center>
+            <IconPencilCheck size={120} />
+          </Center>
+
+          <Stack spacing={"lg"}>
+            <Stack spacing={0}>
+              <Title order={4}>REGISTRASI</Title>
+              <Text fz={"xs"}>Masukan username anda !</Text>
+            </Stack>
+            <Stack spacing={0}>
+              <TextInput
+                ref={focusTrapRef}
+                placeholder="Masukan Username"
+                onChange={(val) => {
+                  setValue(val.currentTarget.value);
+                }}
+              />
+              <Text fz={10} c={"gray"}>
+                Anda akan terdaftar dengan nomor berikut{" "}
+                <Text inherit span fw={"bold"}>
+                  +{nomor}
+                </Text>
+              </Text>
+            </Stack>
+
+            <Stack>
+              <Button
+                radius={"md"}
+                compact
+                h={40}
+                color={"teal"}
+                onClick={() => {
+                  onRegistarsi();
+                }}
+              >
+                <Text>DAFTAR</Text>
+              </Button>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Center>
     </>
   );
 }
diff --git a/src/app_modules/auth/state/state.ts b/src/app_modules/auth/state/state.ts
index 04c96225..1ce89583 100644
--- a/src/app_modules/auth/state/state.ts
+++ b/src/app_modules/auth/state/state.ts
@@ -1,4 +1,6 @@
 import { atomWithStorage } from 'jotai/utils'
 
 export const gs_nomor = atomWithStorage<any | null>("nomorHp", null)
-export const gs_otp = atomWithStorage<any | null>("code_otp", null)
\ No newline at end of file
+export const gs_otp = atomWithStorage<any | null>("code_otp", null)
+
+export const gs_kodeId = atomWithStorage<string | any>("gs_kodeId", "");
\ No newline at end of file
diff --git a/src/app_modules/auth/validasi/view.tsx b/src/app_modules/auth/validasi/view.tsx
index aa7e8284..d84e8d71 100644
--- a/src/app_modules/auth/validasi/view.tsx
+++ b/src/app_modules/auth/validasi/view.tsx
@@ -15,7 +15,11 @@ import { gs_nomor, gs_otp } from "../state/state";
 import { Warna } from "@/app/lib/warna";
 import { useState } from "react";
 import { myConsole } from "@/app/fun/my_console";
-import { IconChevronLeft, IconCircleLetterH } from "@tabler/icons-react";
+import {
+  IconChevronLeft,
+  IconCircleLetterH,
+  IconCloudLockOpen,
+} from "@tabler/icons-react";
 import toast from "react-simple-toasts";
 import { ApiHipmi } from "@/app/lib/api";
 import { useRouter } from "next/navigation";
@@ -24,12 +28,18 @@ import { useFocusTrap } from "@mantine/hooks";
 import { NotifBerhasil } from "@/app_modules/donasi/component/notifikasi/notif_berhasil";
 import { NotifGagal } from "@/app_modules/donasi/component/notifikasi/notif_gagal";
 import { NotifPeringatan } from "@/app_modules/donasi/component/notifikasi/notif_peringatan";
+import Countdown from "react-countdown";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
+import { auth_funValidasi } from "../fun/fun_validasi";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import { RouterAuth } from "@/app/lib/router_hipmi/router_auth";
+import { RouterHome } from "@/app/lib/router_hipmi/router_home";
+import { auth_funEditAktivasiKodeOtpById } from "../fun/fun_edit_aktivasi_kode_otp_by_id";
 
-export default function Validasi() {
+export default function Validasi({ dataOtp }: { dataOtp: any }) {
   const router = useRouter();
-  const [nomor, setnomor] = useAtom(gs_nomor);
-  const [code, setCode] = useAtom(gs_otp);
-
+  const [nomor, setnomor] = useState(dataOtp.nomor);
+  const [code, setCode] = useState(dataOtp.otp);
   const [inputCode, setInputOtp] = useState("");
   const focusTrapRef = useFocusTrap();
 
@@ -43,34 +53,53 @@ export default function Validasi() {
     if (!inputCode) return toast("Lengkapi Kode");
     if (body.otp != inputCode) return toast("Kode Salah");
 
-    await fetch(ApiHipmi.validasi, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(body),
-    })
-      .then((res) => res.json())
-      .then((val) => {
-        myConsole(val);
-        if (val.status == 200) {
-          setTimeout(() => router.push("/dev/home"), 2000);
-          funGetUserProfile(val.data.id);
-          NotifBerhasil("Berhasil Login");
-        } else {
-          router.push("/dev/auth/register");
-          NotifPeringatan("Silahkan Registrasi");
-        }
-      });
+    // await fetch(ApiHipmi.validasi, {
+    //   method: "POST",
+    //   headers: {
+    //     "Content-Type": "application/json",
+    //   },
+    //   body: JSON.stringify(body),
+    // })
+    //   .then((res) => res.json())
+    //   .then((val) => {
+    //     myConsole(val);
+    //     if (val.status == 200) {
+    //       setTimeout(() => router.push("/dev/home"), 2000);
+    //       funGetUserProfile(val.data.id);
+    //       NotifBerhasil("Berhasil Login");
+    //     } else {
+    //       router.push("/dev/auth/register");
+    //       NotifPeringatan("Silahkan Registrasi");
+    //     }
+    //   });
   };
 
+  async function onVerifikasi() {
+    if (!inputCode)
+      return ComponentGlobal_NotifikasiPeringatan("Lengkapi Kode");
+    if (code != inputCode)
+      return ComponentGlobal_NotifikasiPeringatan("Kode Salah");
+
+    await auth_funValidasi(nomor).then(async (res) => {
+      if (res.status === 200) {
+        await auth_funEditAktivasiKodeOtpById(dataOtp.id).then((val) => {
+          if (val.status === 200) {
+            ComponentGlobal_NotifikasiBerhasil(res.message);
+            router.push(RouterHome.main_home);
+          } else {
+            ComponentGlobal_NotifikasiPeringatan(val.message);
+          }
+        });
+      } else {
+        ComponentGlobal_NotifikasiBerhasil(res.message);
+        router.push(RouterAuth.register + dataOtp.id);
+      }
+    });
+  }
+
   return (
     <>
-      {/* {JSON.stringify(nomor)}
-      {JSON.stringify(code)} */}
-     
-
-      <Flex
+      {/* <Flex
         align={"center"}
         justify={"center"}
         direction={"column"}
@@ -112,7 +141,53 @@ export default function Validasi() {
             Submit
           </Button>
         </Flex>
-      </Flex>
+      </Flex> */}
+
+      {/* <pre>{JSON.stringify(code)}</pre> */}
+
+      <Center h={"80%"}>
+        <Stack px={"lg"} spacing={"xl"} w={{ base: 400 }} justify="center">
+          <Center>
+            <IconCloudLockOpen size={130} />
+          </Center>
+
+          <Stack spacing={50}>
+            <Stack spacing={0}>
+              <Title order={4}>Verifikasi Kode OTP</Title>
+              <Text fs={"italic"} fz={"xs"}>
+                Silahkan masukan 4 digit kode otp yang dikirim ke{" "}
+                <Text span inherit fw={"bold"}>
+                  +{nomor}
+                </Text>
+              </Text>
+            </Stack>
+
+            <Center>
+              <PinInput
+                ref={focusTrapRef}
+                spacing={"md"}
+                mt={"md"}
+                onChange={(val) => {
+                  setInputOtp(val);
+                }}
+              />
+            </Center>
+            <Stack>
+              <Button
+                radius={"md"}
+                compact
+                h={40}
+                color={"teal"}
+                onClick={() => {
+                  onVerifikasi();
+                }}
+              >
+                <Text>VERIFIKASI</Text>
+              </Button>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Center>
     </>
   );
 }
diff --git a/src/app_modules/fun_global/get_user_token.ts b/src/app_modules/fun_global/get_user_token.ts
index ed8e890f..5c22838d 100644
--- a/src/app_modules/fun_global/get_user_token.ts
+++ b/src/app_modules/fun_global/get_user_token.ts
@@ -5,11 +5,12 @@ import yaml from "yaml";
 import fs from "fs";
 import { unsealData } from "iron-session";
 import { redirect } from "next/navigation";
+import { RouterAuth } from "@/app/lib/router_hipmi/router_auth";
 const config = yaml.parse(fs.readFileSync("config.yaml").toString());
 
 export async function User_getUserId() {
   const c = cookies().get("ssn");
-  if (!c?.value) return redirect("/dev/auth/login");
+  if (!c?.value) return redirect(RouterAuth.login);
 
   const token = JSON.parse(
     await unsealData(c?.value as string, {
diff --git a/src/app_modules/home/layout.tsx b/src/app_modules/home/layout.tsx
index 0ad27c8c..88ac839b 100644
--- a/src/app_modules/home/layout.tsx
+++ b/src/app_modules/home/layout.tsx
@@ -68,6 +68,7 @@ export default function HomeLayout({
               <Text color="white" fw={"bold"}>
                 HIPMI
               </Text>
+              <Logout/>
               {/* <Group spacing={"sm"}>
                 <ActionIcon>
                   <IconQrcode />
diff --git a/src/app_modules/home/view.tsx b/src/app_modules/home/view.tsx
index ac100e7d..0a210a90 100644
--- a/src/app_modules/home/view.tsx
+++ b/src/app_modules/home/view.tsx
@@ -96,7 +96,7 @@ export default function HomeView({ dataUser }: { dataUser: MODEL_USER }) {
     <>
       <Box>
         <Paper bg={"dark"} radius={5} my={"xs"}>
-          <Image alt="logo" src={"/aset/investasi/home-hipmi.png"} />
+          <Image alt="logo" src={"/aset/home/home-hipmi.png"} />
         </Paper>
 
         {/* <pre>{JSON.stringify(stateUser, null, 2)}</pre> */}