diff --git a/src/client/error.d.ts b/src/client/error.d.ts
new file mode 100644
index 0000000..832fa3e
--- /dev/null
+++ b/src/client/error.d.ts
@@ -0,0 +1,4 @@
+export interface ErrorResponse extends Error {
+  status: number
+  error: { msg: string }
+}
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
index 235b63e..bbdadca 100644
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -1,8 +1,9 @@
 import { useRequest } from 'ahooks'
+import type { ErrorResponse } from 'client/error'
 import PageContainer from 'components/PageContainer'
 import { useAuth } from 'hooks/useAuth'
 import { useState } from 'react'
-import { Col, Row } from 'react-bootstrap'
+import { Alert, Col, Row } from 'react-bootstrap'
 import Button from 'react-bootstrap/Button'
 import Form from 'react-bootstrap/Form'
 import { Navigate, useSearchParams } from 'react-router-dom'
@@ -11,6 +12,7 @@ import Backend from 'utils/service'
 
 const LoginForm: React.FC = () => {
   const { user } = useAuth()
+  const [error, setError] = useState('')
   const [searchParams] = useSearchParams()
   const [username, setUsername] = useState('demo')
   const [password, setPassword] = useState('123456')
@@ -33,6 +35,9 @@ const LoginForm: React.FC = () => {
         if (res.data.redirect_url) {
           window.location.href = res.data.redirect_url
         }
+      },
+      onError: err => {
+        setError((err as ErrorResponse).error.msg)
       }
     }
   )
@@ -49,6 +54,7 @@ const LoginForm: React.FC = () => {
         <h1>Login</h1>
       </div>
       <Col xs={12} md={8} lg={6} className='mx-auto mt-3'>
+        {error ? <Alert variant='danger'>{error}</Alert> : null}
         <Form onSubmit={handleSubmit} validated>
           <Form.Group as={Row} className='mb-3' controlId='formBasicEmail'>
             <Form.Label className='text-sm-end' column sm={2}>
diff --git a/src/pages/Register/index.tsx b/src/pages/Register/index.tsx
index 66212dc..d959ac8 100644
--- a/src/pages/Register/index.tsx
+++ b/src/pages/Register/index.tsx
@@ -1,5 +1,6 @@
 import './style.module.css'
 import { useRequest } from 'ahooks'
+import type { ErrorResponse } from 'client/error'
 import PageContainer from 'components/PageContainer'
 import type React from 'react'
 import { useState } from 'react'
@@ -107,16 +108,13 @@ const RegistrationForm = () => {
         navigate('/register/confirm')
       },
       onError: err => {
-        // eslint-disable-next-line
-        console.log(err)
-        if (err.status === 409) {
+        setError('Registration failed. Please try again.')
+        if ((err as ErrorResponse).status === 409) {
           setError(
             'This email or username is already registered. Please try again.'
           )
-        } else if (err.status === 400) {
+        } else if ((err as ErrorResponse).status === 400) {
           setError('Invalid input. Please try again.')
-        } else {
-          setError('Registration failed. Please try again.')
         }
       }
     }