diff --git a/src/pages/auth/SignIn.jsx b/src/pages/auth/SignIn.jsx
index cbac2a3..fa27d98 100644
--- a/src/pages/auth/SignIn.jsx
+++ b/src/pages/auth/SignIn.jsx
@@ -7,111 +7,155 @@ import sypiu_ggcp from 'assets/sypiu_ggcp.jpg';
 import logo from 'assets/freepik/LOGOPIU.png';
 
 const SignIn = () => {
-  const [captchaSvg, setCaptchaSvg] = useState('');
-  const [captchaText, setCaptchaText] = useState('');
-  const [loading, setLoading] = useState(false);
-  const navigate = useNavigate();
+    const [captchaSvg, setCaptchaSvg] = useState('');
+    const [captchaText, setCaptchaText] = useState('');
+    const [loading, setLoading] = useState(false);
+    const navigate = useNavigate();
 
-  const moveToSignUp = () => {
-    navigate("/signup");
-  };
+    const moveToSignUp = () => {
+        navigate('/signup');
+    };
 
-  // ambil captcha
-  const fetchCaptcha = async () => {
-    try {
-      const res = await SendRequest({ method: 'get', prefix: 'auth/generate-captcha', token: false });
-      setCaptchaSvg(res.data.svg || '');
-      setCaptchaText(res.data.text || '');
-    } catch (err) {
-      console.error('Error fetching captcha:', err);
-    }
-  };
+    // ambil captcha
+    const fetchCaptcha = async () => {
+        try {
+            const res = await SendRequest({
+                method: 'get',
+                prefix: 'auth/generate-captcha',
+                token: false,
+            });
+            setCaptchaSvg(res.data.svg || '');
+            setCaptchaText(res.data.text || '');
+        } catch (err) {
+            console.error('Error fetching captcha:', err);
+        }
+    };
 
-  useEffect(() => { fetchCaptcha(); }, []);
-
-  const handleOnSubmit = async (values) => {
-    setLoading(true);
-    try {
-      const res = await SendRequest({
-        method: 'post',
-        prefix: 'auth/login',
-        params: {
-          email: values.email,
-          password: values.password,
-          captcha: values.captcha,
-          captchaText: captchaText,
-        },
-        withCredentials: true
-      });
-
-      const user = res?.data?.user || res?.user;
-      const accessToken = res?.data?.accessToken || res?.tokens?.accessToken;
-
-      if (user && accessToken) {
-        localStorage.setItem('token', accessToken);
-        localStorage.setItem('user', JSON.stringify(user));
-
-        NotifOk({
-          icon: 'success',
-          title: 'Login Berhasil',
-          message: res?.message || 'Selamat datang!',
-        });
-
-        navigate('/dashboard/home');
-      } else {
-        NotifAlert({
-          icon: 'error',
-          title: 'Login Gagal',
-          message: res?.message || 'Terjadi kesalahan',
-        });
+    useEffect(() => {
         fetchCaptcha();
-      }
-    } catch (err) {
-      console.error(err);
-      NotifAlert({ icon: 'error', title: 'Login Gagal', message: err?.message || 'Terjadi kesalahan' });
-      fetchCaptcha();
-    } finally { setLoading(false); }
-  };
+    }, []);
 
-  return (
-    <Flex align="center" justify="center" style={{ height: '100vh', backgroundImage: `url(${sypiu_ggcp})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
-      <Card style={{ boxShadow: '0px 4px 8px rgba(0,0,0,0.1)' }}>
-        <Flex align="center" justify="center">
-          <Image src={logo} height={150} width={220} preview={false} alt="logo" />
-        </Flex>
-        <br />
-        <Form layout="vertical" style={{ width: '250px' }} onFinish={handleOnSubmit}>
-          <Form.Item label="Email" name="email" rules={[{ required: true, type: 'email', message: 'Email tidak boleh kosong' }]}>
-            <Input placeholder="Email" size="large" />
-          </Form.Item>
+    const handleOnSubmit = async (values) => {
+        setLoading(true);
+        try {
+            const res = await SendRequest({
+                method: 'post',
+                prefix: 'auth/login',
+                params: {
+                    email: values.email,
+                    password: values.password,
+                    captcha: values.captcha,
+                    captchaText: captchaText,
+                },
+                withCredentials: true,
+            });
 
-          <Form.Item label="Password" name="password" rules={[{ required: true, message: 'Password tidak boleh kosong' }]}>
-            <Input.Password placeholder="Password" size="large" />
-          </Form.Item>
+            const user = res?.data?.user || res?.user;
+            const accessToken = res?.data?.accessToken || res?.tokens?.accessToken;
 
-          <div dangerouslySetInnerHTML={{ __html: captchaSvg }} />
+            if (user && accessToken) {
+                localStorage.setItem('token', accessToken);
+                localStorage.setItem('user', JSON.stringify(user));
 
-          <Form.Item label="CAPTCHA" name="captcha" rules={[{ required: true, message: 'Silahkan masukkan CAPTCHA' }]}>
-            <Input placeholder="Masukkan CAPTCHA" size="large" />
-          </Form.Item>
+                NotifOk({
+                    icon: 'success',
+                    title: 'Login Berhasil',
+                    message: res?.message || 'Selamat datang!',
+                });
 
-          <Form.Item>
-            <Space direction="vertical" style={{ width: '100%' }}>
-              <Button type="primary" htmlType="submit" loading={loading} style={{ width: '100%' }}>Sign In</Button>
-            </Space>
-          </Form.Item>
-        </Form>
-        <Button
-          type="primary"
-          htmlType="submit"
-          style={{ width: '100%' }}
-          onClick={() => moveToSignUp()}
+                navigate('/dashboard/home');
+            }
+        } catch (err) {
+            // hanya handle invalid captcha disini
+            if (err?.response?.data?.message?.toLowerCase().includes('captcha')) {
+                NotifAlert({
+                    icon: 'warning',
+                    title: 'Peringatan',
+                    message: 'Invalid captcha',
+                });
+                fetchCaptcha();
+            } else {
+                NotifAlert({
+                    icon: 'error',
+                    title: 'Login Gagal',
+                    message: err?.message || 'Terjadi kesalahan',
+                });
+                fetchCaptcha();
+            }
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <Flex
+            align="center"
+            justify="center"
+            style={{
+                height: '100vh',
+                backgroundImage: `url(${sypiu_ggcp})`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+            }}
         >
-          Registration
-        </Button>
-      </Card>
-    </Flex>
-  );
+            <Card style={{ boxShadow: '0px 4px 8px rgba(0,0,0,0.1)' }}>
+                <Flex align="center" justify="center">
+                    <Image src={logo} height={150} width={220} preview={false} alt="logo" />
+                </Flex>
+                <br />
+                <Form layout="vertical" style={{ width: '250px' }} onFinish={handleOnSubmit}>
+                    <Form.Item
+                        label="Email"
+                        name="email"
+                        rules={[
+                            { required: true, type: 'email', message: 'Email tidak boleh kosong' },
+                        ]}
+                    >
+                        <Input placeholder="Email" size="large" />
+                    </Form.Item>
+
+                    <Form.Item
+                        label="Password"
+                        name="password"
+                        rules={[{ required: true, message: 'Password tidak boleh kosong' }]}
+                    >
+                        <Input.Password placeholder="Password" size="large" />
+                    </Form.Item>
+
+                    <div dangerouslySetInnerHTML={{ __html: captchaSvg }} />
+
+                    <Form.Item
+                        label="CAPTCHA"
+                        name="captcha"
+                        rules={[{ required: true, message: 'Silahkan masukkan CAPTCHA' }]}
+                    >
+                        <Input placeholder="Masukkan CAPTCHA" size="large" />
+                    </Form.Item>
+
+                    <Form.Item>
+                        <Space direction="vertical" style={{ width: '100%' }}>
+                            <Button
+                                type="primary"
+                                htmlType="submit"
+                                loading={loading}
+                                style={{ width: '100%' }}
+                            >
+                                Sign In
+                            </Button>
+                        </Space>
+                    </Form.Item>
+                </Form>
+                <Button
+                    type="primary"
+                    htmlType="submit"
+                    style={{ width: '100%' }}
+                    onClick={() => moveToSignUp()}
+                >
+                    Registration
+                </Button>
+            </Card>
+        </Flex>
+    );
 };
 
 export default SignIn;