diff --git a/Modules/Client/Http/Controllers/Api/AuthController.php b/Modules/Client/Http/Controllers/Api/AuthController.php
index b0596e59..977302d6 100755
--- a/Modules/Client/Http/Controllers/Api/AuthController.php
+++ b/Modules/Client/Http/Controllers/Api/AuthController.php
@@ -12,7 +12,7 @@ use Symfony\Component\HttpFoundation\Response;
 
 class AuthController extends Controller
 {
-    public function requestOtp(Request $request)
+    public function login(Request $request)
     {
         $request->validate([
             'phoneOrEmail' => 'required'
diff --git a/frontend/client-portal/src/pages/auth/OtpValidation.tsx b/frontend/client-portal/src/pages/auth/OtpValidation.tsx
deleted file mode 100755
index cf427ea9..00000000
--- a/frontend/client-portal/src/pages/auth/OtpValidation.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import { capitalCase } from 'change-case';
-// @mui
-import { styled } from '@mui/material/styles';
-import {
-  Box,
-  Button,
-  Card,
-  Divider,
-  Grid,
-  Link,
-  Stack,
-  IconButton,
-  Typography,
-} from '@mui/material';
-// hooks
-import useAuth from '../../hooks/useAuth';
-// components
-import Page from '../../components/Page';
-import Image from '../../components/Image';
-import Iconify from '../../components/Iconify';
-// sections
-import { VerifyCodeForm } from '../../sections/auth/verify-code';
-// react
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-// ----------------------------------------------------------------------
-
-const RootStyle = styled('div')(({ theme }) => ({
-  [theme.breakpoints.up('md')]: {
-    display: 'flex',
-  },
-  minHeight: '100vh',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'center',
-}));
-
-const ContentStyle = styled(Card)(({ theme }) => ({
-  [theme.breakpoints.up('md')]: {
-    maxHeight: '600px',
-    maxWidth: '1000px',
-  },
-}));
-
-// ----------------------------------------------------------------------
-
-export default function OtpValidation() {
-  const { method } = useAuth();
-  const navigate = useNavigate();
-  const formPhone = false;
-
-  const handlerChange = (event: any, setForm: boolean) => {
-    event.preventDefault();
-    // setFormPhone(setForm);
-    navigate('/auth/login', { state: { setForm: setForm } });
-  };
-
-  const otpRequestHandler = (event: any) => {
-    event.preventDefault();
-    alert('otp sudah dikirim ulang!');
-  };
-
-  return (
-    <Page title="Login">
-      <RootStyle>
-        <ContentStyle>
-          <Grid container>
-            <Grid item xs={6}>
-              <Image visibleByDefault disabledEffect src="/images/login-image.gif" alt="login" />
-            </Grid>
-            <Grid item xs={6} sx={{ padding: 3 }}>
-              <Stack direction="column" justifyContent="flex-start" sx={{ mb: 5 }}>
-                <Stack direction="row" alignItems="center">
-                  <IconButton sx={{ marginRight: '10px' }}>
-                    <Iconify icon="heroicons-outline:arrow-narrow-left" sx={{ color: '#424242' }} />
-                  </IconButton>
-                  <Typography variant="h5">Verifikasi OTP</Typography>
-                </Stack>
-
-                {/* <Box sx={{ flexGrow: 1 }}> */}
-                <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-                  Masukkan kode OTP anda disini
-                </Typography>
-                {/* </Box> */}
-              </Stack>
-
-              <VerifyCodeForm />
-
-              <Stack alignItems="center" sx={{ marginTop: 5 }}>
-                <Typography variant="caption" sx={{ color: 'text.secondary' }} gutterBottom>
-                  Tidak Mendapatkan Kode?
-                </Typography>
-                <Link
-                  variant="subtitle2"
-                  href=""
-                  align="center"
-                  underline="hover"
-                  onClick={(event) => otpRequestHandler(event)}
-                >
-                  Kirim Ulang Kode OTP
-                </Link>
-              </Stack>
-
-              <Divider sx={{ marginTop: 5 }}>Atau</Divider>
-
-              <Stack sx={{ marginTop: 5 }}>
-                {formPhone === false ? (
-                  <Link
-                    href=""
-                    align="center"
-                    underline="hover"
-                    onClick={(event) => handlerChange(event, true)}
-                  >
-                    Masuk menggunakan nomor handphone
-                  </Link>
-                ) : (
-                  <Link
-                    href=""
-                    align="center"
-                    underline="hover"
-                    onClick={(event) => handlerChange(event, false)}
-                  >
-                    Masuk menggunakan email
-                  </Link>
-                )}
-              </Stack>
-            </Grid>
-          </Grid>
-        </ContentStyle>
-      </RootStyle>
-    </Page>
-  );
-}
diff --git a/frontend/client-portal/src/pages/auth/VerifyCode.tsx b/frontend/client-portal/src/pages/auth/VerifyCode.tsx
new file mode 100755
index 00000000..4aaf2cbd
--- /dev/null
+++ b/frontend/client-portal/src/pages/auth/VerifyCode.tsx
@@ -0,0 +1,107 @@
+import { useLocation, useNavigate } from 'react-router-dom';
+// @mui
+import { styled } from '@mui/material/styles';
+import { Box, Card, Divider, IconButton, Grid, Link, Stack, Typography } from '@mui/material';
+// components
+import Page from '../../components/Page';
+import Image from '../../components/Image';
+import Iconify from '../../components/Iconify';
+// sections
+import { VerifyCodeForm } from '../../sections/auth/verify-code';
+import { useEffect } from 'react';
+
+// ----------------------------------------------------------------------
+
+const RootStyle = styled('div')(({ theme }) => ({
+  [theme.breakpoints.up('md')]: {
+    display: 'flex',
+  },
+  minHeight: '100vh',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
+const ContentStyle = styled(Card)(({ theme }) => ({
+  [theme.breakpoints.up('md')]: {
+    maxHeight: '600px',
+    maxWidth: '1000px',
+  },
+}));
+// ----------------------------------------------------------------------
+
+export default function VerifyCode() {
+  const { state } = useLocation();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (state === null) {
+      navigate('/auth/login');
+    }
+  }, [state, navigate]);
+
+  return (
+    <Page title="Login">
+      <RootStyle>
+        <ContentStyle>
+          <Grid container>
+            <Grid item xs={6}>
+              <Image visibleByDefault disabledEffect src="/images/login-image.gif" alt="login" />
+            </Grid>
+            <Grid item xs={6} sx={{ padding: 3, textAlign: 'center' }}>
+              <Stack direction="column" sx={{ mb: 5 }}>
+                <Stack direction="row" alignItems="center">
+                  <IconButton
+                    onClick={() =>
+                      navigate('/auth/login', { state: { formPhone: state.formPhone } })
+                    }
+                  >
+                    <Iconify
+                      icon="heroicons-outline:arrow-narrow-left"
+                      sx={{ marginRight: '10px' }}
+                    />
+                  </IconButton>
+                  <Typography variant="h4" gutterBottom>
+                    Verifikasi OTP
+                  </Typography>
+                </Stack>
+                <Box sx={{ flexGrow: 1 }}>
+                  <Typography variant="body1" sx={{ color: 'text.secondary', textAlign: 'left' }}>
+                    Masukkan kode OTP anda disini
+                  </Typography>
+                </Box>
+              </Stack>
+
+              <VerifyCodeForm phoneOrEmail={state.phoneOrEmail} />
+
+              <Typography sx={{ marginTop: 5 }}>Tidak mendapatkan kode?</Typography>
+              <Link sx={{ marginTop: 1 }}>Kirim Ulang Kode OTP</Link>
+
+              <Divider sx={{ marginTop: 5 }}>Atau</Divider>
+
+              <Stack sx={{ marginTop: 5 }}>
+                {state.formPhone ? (
+                  <Link
+                    align="center"
+                    underline="hover"
+                    onClick={() => navigate('/auth/login', { state: { formPhone: false } })}
+                  >
+                    Masuk menggunakan email
+                  </Link>
+                ) : (
+                  <Link
+                    align="center"
+                    underline="hover"
+                    onClick={() => navigate('/auth/login', { state: { formPhone: true } })}
+                  >
+                    Masuk menggunakan nomor handphone
+                  </Link>
+                )}
+              </Stack>
+            </Grid>
+          </Grid>
+        </ContentStyle>
+      </RootStyle>
+    </Page>
+  );
+}