diff --git a/src/client/index.ts b/src/client/index.ts
index 5552541..8e169d3 100644
--- a/src/client/index.ts
+++ b/src/client/index.ts
@@ -160,11 +160,6 @@ export interface SchemaUpdateUser {
   /** @maxLength 100 */
   name: string
   need_promotion?: boolean
-  /**
-   * @minLength 8
-   * @maxLength 100
-   */
-  password: string
   /** @maxLength 20 */
   phone: string
   /** @maxLength 100 */
@@ -211,6 +206,12 @@ export interface SchemaUser {
   username?: string
 }
 
+export interface SchemaUserChangePassword {
+  currentPassword?: string
+  newPassword?: string
+  username?: string
+}
+
 export interface SchemaUserDetail {
   address?: string
   address2?: string
@@ -242,6 +243,11 @@ export interface SchemaUserListResponse {
   offset?: number
 }
 
+export interface SchemaUserResetPassword {
+  newPassword?: string
+  username?: string
+}
+
 export type QueryParamsType = Record<string | number, any>
 export type ResponseFormat = keyof Omit<Body, 'body' | 'bodyUsed'>
 
@@ -642,6 +648,56 @@ export class Api<
         ...params
       }),
 
+    /**
+     * @description Change the user's password.
+     *
+     * @tags Auth
+     * @name V1AuthChangepasswordCreate
+     * @summary change password
+     * @request POST:/api/v1/auth/changepassword
+     */
+    v1AuthChangepasswordCreate: (
+      changePassword: SchemaUserChangePassword,
+      query?: {
+        /** Redirect url after login */
+        redirect_url?: string
+      },
+      params: RequestParams = {}
+    ) =>
+      this.request<SchemaUserChangePassword, SchemaErrorResponse>({
+        path: `/api/v1/auth/changepassword`,
+        method: 'POST',
+        query: query,
+        body: changePassword,
+        type: ContentType.Json,
+        format: 'json',
+        ...params
+      }),
+
+    /**
+     * @description Initiate the password reset process.
+     *
+     * @tags Auth
+     * @name V1AuthForgotpasswordCreate
+     * @summary forgot password
+     * @request POST:/api/v1/auth/forgotpassword
+     */
+    v1AuthForgotpasswordCreate: (
+      query?: {
+        /** Email */
+        email?: string
+      },
+      params: RequestParams = {}
+    ) =>
+      this.request<object, SchemaErrorResponse>({
+        path: `/api/v1/auth/forgotpassword`,
+        method: 'POST',
+        query: query,
+        type: ContentType.Json,
+        format: 'json',
+        ...params
+      }),
+
     /**
      * @description Get current JWT.
      *
@@ -725,6 +781,32 @@ export class Api<
         type: ContentType.Json,
         format: 'json',
         ...params
+      }),
+
+    /**
+     * @description Reset the user's password.
+     *
+     * @tags Auth
+     * @name V1AuthResetpasswordCreate
+     * @summary reset password
+     * @request POST:/api/v1/auth/resetpassword
+     */
+    v1AuthResetpasswordCreate: (
+      resetPassword: SchemaUserResetPassword,
+      query?: {
+        /** Redirect url after login */
+        redirect_url?: string
+      },
+      params: RequestParams = {}
+    ) =>
+      this.request<SchemaUserResetPassword, SchemaErrorResponse>({
+        path: `/api/v1/auth/resetpassword`,
+        method: 'POST',
+        query: query,
+        body: resetPassword,
+        type: ContentType.Json,
+        format: 'json',
+        ...params
       })
   }
   movie = {
@@ -856,6 +938,26 @@ export class Api<
         type: ContentType.Json,
         format: 'json',
         ...params
+      }),
+
+    /**
+     * @description update user info.
+     *
+     * @tags User
+     * @name V1UsersMeUpdate
+     * @summary update user info.
+     * @request PUT:/api/v1/users/me
+     * @secure
+     */
+    v1UsersMeUpdate: (user: SchemaUpdateUser, params: RequestParams = {}) =>
+      this.request<SchemaUserDetail, SchemaErrorResponse>({
+        path: `/api/v1/users/me`,
+        method: 'PUT',
+        body: user,
+        secure: true,
+        type: ContentType.Json,
+        format: 'json',
+        ...params
       })
   }
   misc = {
diff --git a/src/pages/ChangePassword/index.tsx b/src/pages/ChangePassword/index.tsx
new file mode 100644
index 0000000..104f514
--- /dev/null
+++ b/src/pages/ChangePassword/index.tsx
@@ -0,0 +1,122 @@
+import { useRequest } from 'ahooks'
+import PageContainer from 'components/PageContainer'
+import { useAuth } from 'hooks/useAuth'
+import { useState } from 'react'
+import { Col, Row } from 'react-bootstrap'
+import Button from 'react-bootstrap/Button'
+import Form from 'react-bootstrap/Form'
+import { Navigate, useNavigate, useSearchParams } from 'react-router-dom'
+import { DOMAIN_HOST } from 'utils/constants'
+import Backend from 'utils/service'
+
+const ChangeForm: React.FC = () => {
+  const { user } = useAuth()
+  const [searchParams] = useSearchParams()
+  const [username, setUsername] = useState('')
+  const [currentPassword, setCurrentPassword] = useState('')
+  const [newPassword, setNewPassword] = useState('')
+  const navigate = useNavigate()
+  const { run: changePasssword } = useRequest(
+    async () => {
+      const from = searchParams.get('from') ?? '/'
+      return Backend.auth.v1AuthChangepasswordCreate(
+        {
+          username,
+          currentPassword,
+          newPassword
+        },
+        {
+          redirect_url: `${DOMAIN_HOST}${from}`
+        }
+      )
+    },
+    {
+      manual: true,
+      onSuccess: () => {
+        navigate('/logout') // Navigate to the login page
+      }
+    }
+  )
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    changePasssword()
+  }
+
+  return user ? (
+    <>
+      <div className='text-center'>
+        <h1>Reset Password</h1>
+      </div>
+      <Col xs={12} md={8} lg={6} className='mx-auto mt-3'>
+        <Form onSubmit={handleSubmit} validated>
+          <Form.Group as={Row} className='mb-3' controlId='formBasicEmail'>
+            <Form.Label className='text-sm-end' column sm={2}>
+              Username
+            </Form.Label>
+            <Col sm={10}>
+              <Form.Control
+                required
+                type='text'
+                placeholder='Username'
+                defaultValue={username}
+                onChange={e => {
+                  setUsername(e.target.value)
+                }}
+              />
+            </Col>
+          </Form.Group>
+          <Form.Group as={Row} className='mb-3' controlId='formBasicPassword'>
+            <Form.Label className='text-sm-end' column sm={2}>
+              Current Password
+            </Form.Label>
+            <Col sm={10}>
+              <Form.Control
+                required
+                type='password'
+                placeholder='Current Password'
+                defaultValue={currentPassword}
+                onChange={e => {
+                  setCurrentPassword(e.target.value)
+                }}
+              />
+            </Col>
+          </Form.Group>
+          <Form.Group as={Row} className='mb-3' controlId='formBasicPassword'>
+            <Form.Label className='text-sm-end' column sm={2}>
+              New Password
+            </Form.Label>
+            <Col sm={10}>
+              <Form.Control
+                required
+                type='password'
+                placeholder='Password'
+                defaultValue={newPassword}
+                onChange={e => {
+                  setNewPassword(e.target.value)
+                }}
+              />
+            </Col>
+          </Form.Group>
+          <Form.Group as={Row} className='mb-3'>
+            <Col sm={{ span: 10, offset: 2 }}>
+              <Button variant='primary' type='submit'>
+                Submit
+              </Button>
+            </Col>
+          </Form.Group>
+        </Form>
+      </Col>
+    </>
+  ) : (
+    <Navigate to='/' />
+  )
+}
+
+const Index: React.FC = () => (
+  <PageContainer>
+    <ChangeForm />
+  </PageContainer>
+)
+
+export default Index
diff --git a/src/pages/EditProfile/index.tsx b/src/pages/EditProfile/index.tsx
index 3e80974..3ab7772 100644
--- a/src/pages/EditProfile/index.tsx
+++ b/src/pages/EditProfile/index.tsx
@@ -1,22 +1,120 @@
 import { useRequest } from 'ahooks'
-import type { SchemaUserDetail } from 'client'
+import type { SchemaUpdateUser, SchemaUserDetail } from 'client'
 import PageContainer from 'components/PageContainer'
 import type React from 'react'
 import { useState } from 'react'
-import { Form, Button, Col, Row, Accordion } from 'react-bootstrap'
+import { Form, Button, Col, Row, Accordion, Alert } from 'react-bootstrap'
+import { useNavigate } from 'react-router-dom'
 import Backend from 'utils/service'
 
 const UserProfileForm: React.FC = () => {
-  // TODO: submit update user
-  const { run: submit } = useRequest(async () => null)
+  const navigate = useNavigate()
+  const [success, setSuccess] = useState('')
+  const [error, setError] = useState('')
+  const [form, setForm] = useState<SchemaUserDetail>({
+    email: '',
+    name: '',
+    username: '',
+    address: '',
+    address2: '',
+    phone: '',
+    need_promotion: false,
+    city: '',
+    state: '',
+    zip: '',
+    card_address: '',
+    card_address2: '',
+    card_city: '',
+    card_state: '',
+    card_zip: '',
+    card_type: '',
+    card_number: '',
+    card_expiration: ''
+  })
+  const usStates = [
+    'AL',
+    'AK',
+    'AZ',
+    'AR',
+    'CA',
+    'CO',
+    'CT',
+    'DE',
+    'FL',
+    'GA',
+    'HI',
+    'ID',
+    'IL',
+    'IN',
+    'IA',
+    'KS',
+    'KY',
+    'LA',
+    'ME',
+    'MD',
+    'MA',
+    'MI',
+    'MN',
+    'MS',
+    'MO',
+    'MT',
+    'NE',
+    'NV',
+    'NH',
+    'NJ',
+    'NM',
+    'NY',
+    'NC',
+    'ND',
+    'OH',
+    'OK',
+    'OR',
+    'PA',
+    'RI',
+    'SC',
+    'SD',
+    'TN',
+    'TX',
+    'UT',
+    'VT',
+    'VA',
+    'WA',
+    'WV',
+    'WI',
+    'WY'
+  ]
+  const handleChange = (
+    event: React.ChangeEvent<{ name?: string; value: unknown }>
+  ) => {
+    const { name, value } = event.target as { name?: string; value: unknown }
+    if (name === 'need_promotion') {
+      setForm(changeForm => ({
+        ...changeForm,
+        need_promotion: !changeForm.need_promotion
+      }))
+    } else if (typeof name === 'string') {
+      setForm(changeForm => ({ ...changeForm, [name]: value }))
+    }
+  }
+  const { run: submit } = useRequest(
+    async () => Backend.user.v1UsersMeUpdate(form as SchemaUpdateUser),
+    {
+      manual: true,
+      onSuccess: () => {
+        setSuccess('Done!')
+      },
+      onError: () => {
+        setError('Update profile failed. Please try again.')
+      }
+    }
+  )
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
     submit()
   }
-  const [user, setUser] = useState<SchemaUserDetail>()
   const { loading } = useRequest(async () => Backend.user.v1UsersMeList(), {
     onSuccess: res => {
-      setUser(res.data)
+      setForm(res.data)
     }
   })
 
@@ -31,187 +129,108 @@ const UserProfileForm: React.FC = () => {
             <Form.Group as={Col} controlId='formGridEmail'>
               <Form.Label className='required'>Email</Form.Label>
               <Form.Control
+                name='email'
                 type='email'
                 placeholder='Enter email'
-                value={user?.email ?? ''}
+                value={form.email}
                 disabled
               />
             </Form.Group>
-            <Form.Group as={Col} controlId='formGridPassword'>
-              <Form.Label className='required'>Password</Form.Label>
-              <Form.Control
-                type='password'
-                placeholder='Password'
-                onChange={e => {
-                  setUser(prevUser => ({
-                    ...prevUser,
-                    password: e.target.value
-                  }))
-                }}
-              />
+            <Form.Group as={Col} controlId='formGridEmail'>
+              <Form.Label>Password</Form.Label>
+              <Button
+                type='button'
+                className='form-control'
+                onClick={() => navigate('/changePassword', { replace: true })}
+              >
+                Change Password
+              </Button>
             </Form.Group>
           </Row>
           <Row className='mb-3'>
             <Form.Group as={Col} controlId='formGridName'>
               <Form.Label className='required'>Name</Form.Label>
               <Form.Control
+                name='name'
                 required
-                value={user?.name ?? ''}
-                onChange={e => {
-                  setUser(prevUser => ({
-                    ...prevUser,
-                    name: e.target.value
-                  }))
-                }}
+                value={form.name}
+                onChange={handleChange}
               />
             </Form.Group>
 
             <Form.Group as={Col} controlId='formGridPhone'>
               <Form.Label className='required'>Phone</Form.Label>
               <Form.Control
+                name='phone'
                 required
-                value={user?.phone ?? ''}
-                onChange={e => {
-                  setUser(prevUser => ({
-                    ...prevUser,
-                    phone: e.target.value
-                  }))
-                }}
+                value={form.phone}
+                onChange={handleChange}
               />
             </Form.Group>
           </Row>
           <Form.Group className='mb-3' controlId='formGridAddress1'>
             <Form.Label className='required'>Address</Form.Label>
             <Form.Control
+              name='address'
               placeholder='1234 Main St'
               required
-              value={user?.address ?? ''}
-              onChange={e => {
-                setUser(prevUser => ({
-                  ...prevUser,
-                  address: e.target.value
-                }))
-              }}
+              value={form.address}
+              onChange={handleChange}
             />
           </Form.Group>
           <Form.Group className='mb-3' controlId='formGridAddress2'>
             <Form.Label className='required'>Address 2</Form.Label>
             <Form.Control
+              name='address2'
               placeholder='Apartment, studio, or floor'
-              value={user?.address2 ?? ''}
-              onChange={e => {
-                setUser(prevUser => ({
-                  ...prevUser,
-                  address2: e.target.value
-                }))
-              }}
+              value={form.address2}
+              onChange={handleChange}
             />
           </Form.Group>
           <Row className='mb-3'>
             <Form.Group as={Col} controlId='formGridCity'>
               <Form.Label className='required'>City</Form.Label>
               <Form.Control
+                name='city'
                 required
-                value={user?.city ?? ''}
-                onChange={e => {
-                  setUser(prevUser => ({
-                    ...prevUser,
-                    city: e.target.value
-                  }))
-                }}
+                value={form.city}
+                onChange={handleChange}
               />
             </Form.Group>
             <Form.Group as={Col} controlId='formGridState'>
               <Form.Label className='required'>State</Form.Label>
               <Form.Select
-                defaultValue='GA'
-                required
-                value={user?.state ?? ''}
-                onChange={e => {
-                  setUser(prevUser => ({
-                    ...prevUser,
-                    state: e.target.value
-                  }))
-                }}
+                name='state'
+                defaultValue='Choose...'
+                onChange={handleChange}
+                value={form.state}
               >
-                <option value='AL'>Alabama</option>
-                <option value='AK'>Alaska</option>
-                <option value='AZ'>Arizona</option>
-                <option value='AR'>Arkansas</option>
-                <option value='CA'>California</option>
-                <option value='CO'>Colorado</option>
-                <option value='CT'>Connecticut</option>
-                <option value='DE'>Delaware</option>
-                <option value='DC'>District Of Columbia</option>
-                <option value='FL'>Florida</option>
-                <option value='GA'>Georgia</option>
-                <option value='HI'>Hawaii</option>
-                <option value='ID'>Idaho</option>
-                <option value='IL'>Illinois</option>
-                <option value='IN'>Indiana</option>
-                <option value='IA'>Iowa</option>
-                <option value='KS'>Kansas</option>
-                <option value='KY'>Kentucky</option>
-                <option value='LA'>Louisiana</option>
-                <option value='ME'>Maine</option>
-                <option value='MD'>Maryland</option>
-                <option value='MA'>Massachusetts</option>
-                <option value='MI'>Michigan</option>
-                <option value='MN'>Minnesota</option>
-                <option value='MS'>Mississippi</option>
-                <option value='MO'>Missouri</option>
-                <option value='MT'>Montana</option>
-                <option value='NE'>Nebraska</option>
-                <option value='NV'>Nevada</option>
-                <option value='NH'>New Hampshire</option>
-                <option value='NJ'>New Jersey</option>
-                <option value='NM'>New Mexico</option>
-                <option value='NY'>New York</option>
-                <option value='NC'>North Carolina</option>
-                <option value='ND'>North Dakota</option>
-                <option value='OH'>Ohio</option>
-                <option value='OK'>Oklahoma</option>
-                <option value='OR'>Oregon</option>
-                <option value='PA'>Pennsylvania</option>
-                <option value='RI'>Rhode Island</option>
-                <option value='SC'>South Carolina</option>
-                <option value='SD'>South Dakota</option>
-                <option value='TN'>Tennessee</option>
-                <option value='TX'>Texas</option>
-                <option value='UT'>Utah</option>
-                <option value='VT'>Vermont</option>
-                <option value='VA'>Virginia</option>
-                <option value='WA'>Washington</option>
-                <option value='WV'>West Virginia</option>
-                <option value='WI'>Wisconsin</option>
-                <option value='WY'>Wyoming</option>
+                <option>Choose...</option>
+                {usStates.map((state, index) => (
+                  <option key={index} value={state}>
+                    {' '}
+                    {state}
+                  </option>
+                ))}
               </Form.Select>
             </Form.Group>
             <Form.Group as={Col} md={3} controlId='formGridZip'>
               <Form.Label className='required'>Zip</Form.Label>
               <Form.Control
+                name='zip'
                 required
-                value={user?.zip ?? ''}
-                onChange={e => {
-                  setUser(prevUser => ({
-                    ...prevUser,
-                    zip: e.target.value
-                  }))
-                }}
+                value={form.zip}
+                onChange={handleChange}
               />
             </Form.Group>
           </Row>
           <Row className='mb-3'>
             <Form.Check
+              name='need_promotion'
               type='checkbox'
               label='Email me promotion'
-              checked={user?.need_promotion ?? false}
-              onChange={e => {
-                setUser(prevUser => ({
-                  ...prevUser,
-                  need_promotion: e.target.checked
-                }))
-              }}
+              checked={form.need_promotion ?? false}
+              onChange={handleChange}
             />
           </Row>
           <Accordion>
@@ -222,13 +241,9 @@ const UserProfileForm: React.FC = () => {
                   <Form.Group as={Col} md={3} controlId='formGridEmail'>
                     <Form.Label>Card Type</Form.Label>
                     <Form.Select
-                      value={user?.card_type ?? ''}
-                      onChange={e => {
-                        setUser(prevUser => ({
-                          ...prevUser,
-                          card_type: e.target.value
-                        }))
-                      }}
+                      name='card_type'
+                      value={form.card_type}
+                      onChange={handleChange}
                     >
                       <option value=''>Select card type</option>
                       <option value='Visa'>Visa</option>
@@ -241,157 +256,93 @@ const UserProfileForm: React.FC = () => {
                   <Form.Group as={Col} md={6} controlId='formGridCardNumber'>
                     <Form.Label>Card Number</Form.Label>
                     <Form.Control
-                      value={user?.card_number ?? ''}
-                      onChange={e => {
-                        setUser(prevUser => ({
-                          ...prevUser,
-                          card_number: e.target.value
-                        }))
-                      }}
+                      name='card_number'
+                      value={form.card_number}
+                      onChange={handleChange}
                     />
                   </Form.Group>
                   <Form.Group as={Col} md={3} controlId='formGridCardExp'>
                     <Form.Label>Card Expiration</Form.Label>
                     <Form.Control
+                      name='card_expiration'
                       type='text'
                       placeholder='01/28'
-                      value={user?.card_expiration ?? ''}
-                      onChange={e => {
-                        setUser(prevUser => ({
-                          ...prevUser,
-                          card_expiration: e.target.value
-                        }))
-                      }}
+                      value={form.card_expiration}
+                      onChange={handleChange}
                     />
                   </Form.Group>
                 </Row>
                 <Form.Group className='mb-3' controlId='formGridAddress1'>
                   <Form.Label>Address</Form.Label>
                   <Form.Control
+                    name='card_address'
                     placeholder='1234 Main St'
-                    value={user?.card_address ?? ''}
-                    onChange={e => {
-                      setUser(prevUser => ({
-                        ...prevUser,
-                        card_address: e.target.value
-                      }))
-                    }}
+                    value={form.card_address}
+                    onChange={handleChange}
                   />
                 </Form.Group>
                 <Form.Group className='mb-3' controlId='formGridAddress2'>
                   <Form.Label>Address 2</Form.Label>
                   <Form.Control
+                    name='card_address2'
                     placeholder='Apartment, studio, or floor'
-                    value={user?.card_address2 ?? ''}
-                    onChange={e => {
-                      setUser(prevUser => ({
-                        ...prevUser,
-                        card_address2: e.target.value
-                      }))
-                    }}
+                    value={form.card_address2}
+                    onChange={handleChange}
                   />
                 </Form.Group>
                 <Row className='mb-3'>
                   <Form.Group as={Col} controlId='formGridCity'>
                     <Form.Label>City</Form.Label>
                     <Form.Control
-                      value={user?.card_city ?? ''}
-                      onChange={e => {
-                        setUser(prevUser => ({
-                          ...prevUser,
-                          card_city: e.target.value
-                        }))
-                      }}
+                      name='card_city'
+                      value={form.card_city}
+                      onChange={handleChange}
                     />
                   </Form.Group>
                   <Form.Group as={Col} controlId='formGridState'>
                     <Form.Label>State</Form.Label>
                     <Form.Select
-                      defaultValue='GA'
-                      required
-                      value={user?.card_state ?? ''}
-                      onChange={e => {
-                        setUser(prevUser => ({
-                          ...prevUser,
-                          card_state: e.target.value
-                        }))
-                      }}
+                      name='card_state'
+                      defaultValue='Choose...'
+                      onChange={handleChange}
+                      value={form.card_state}
                     >
-                      <option value='AL'>Alabama</option>
-                      <option value='AK'>Alaska</option>
-                      <option value='AZ'>Arizona</option>
-                      <option value='AR'>Arkansas</option>
-                      <option value='CA'>California</option>
-                      <option value='CO'>Colorado</option>
-                      <option value='CT'>Connecticut</option>
-                      <option value='DE'>Delaware</option>
-                      <option value='DC'>District Of Columbia</option>
-                      <option value='FL'>Florida</option>
-                      <option value='GA'>Georgia</option>
-                      <option value='HI'>Hawaii</option>
-                      <option value='ID'>Idaho</option>
-                      <option value='IL'>Illinois</option>
-                      <option value='IN'>Indiana</option>
-                      <option value='IA'>Iowa</option>
-                      <option value='KS'>Kansas</option>
-                      <option value='KY'>Kentucky</option>
-                      <option value='LA'>Louisiana</option>
-                      <option value='ME'>Maine</option>
-                      <option value='MD'>Maryland</option>
-                      <option value='MA'>Massachusetts</option>
-                      <option value='MI'>Michigan</option>
-                      <option value='MN'>Minnesota</option>
-                      <option value='MS'>Mississippi</option>
-                      <option value='MO'>Missouri</option>
-                      <option value='MT'>Montana</option>
-                      <option value='NE'>Nebraska</option>
-                      <option value='NV'>Nevada</option>
-                      <option value='NH'>New Hampshire</option>
-                      <option value='NJ'>New Jersey</option>
-                      <option value='NM'>New Mexico</option>
-                      <option value='NY'>New York</option>
-                      <option value='NC'>North Carolina</option>
-                      <option value='ND'>North Dakota</option>
-                      <option value='OH'>Ohio</option>
-                      <option value='OK'>Oklahoma</option>
-                      <option value='OR'>Oregon</option>
-                      <option value='PA'>Pennsylvania</option>
-                      <option value='RI'>Rhode Island</option>
-                      <option value='SC'>South Carolina</option>
-                      <option value='SD'>South Dakota</option>
-                      <option value='TN'>Tennessee</option>
-                      <option value='TX'>Texas</option>
-                      <option value='UT'>Utah</option>
-                      <option value='VT'>Vermont</option>
-                      <option value='VA'>Virginia</option>
-                      <option value='WA'>Washington</option>
-                      <option value='WV'>West Virginia</option>
-                      <option value='WI'>Wisconsin</option>
-                      <option value='WY'>Wyoming</option>
+                      <option>Choose...</option>
+                      {usStates.map((state, index) => (
+                        <option key={index} value={state}>
+                          {' '}
+                          {state}
+                        </option>
+                      ))}
                     </Form.Select>
                   </Form.Group>
                   <Form.Group as={Col} md={3} controlId='formGridZip'>
                     <Form.Label>Zip</Form.Label>
                     <Form.Control
-                      value={user?.card_zip ?? ''}
-                      onChange={e => {
-                        setUser(prevUser => ({
-                          ...prevUser,
-                          card_zip: e.target.value
-                        }))
-                      }}
+                      name='card_zip'
+                      value={form.card_zip}
+                      onChange={handleChange}
                     />
                   </Form.Group>
                 </Row>
               </Accordion.Body>
             </Accordion.Item>
           </Accordion>
-
           <Form.Group as={Row} className='mt-3'>
             <Button variant='primary' type='submit' disabled={loading}>
               Submit
             </Button>
           </Form.Group>
+          {success ? (
+            <Alert variant='success' className='mt-3'>
+              {success}
+            </Alert>
+          ) : null}
+          {error ? (
+            <Alert variant='danger' className='mt-3'>
+              {error}
+            </Alert>
+          ) : null}
         </Form>
       </Col>
     </>
diff --git a/src/pages/ForgotPassword/index.tsx b/src/pages/ForgotPassword/index.tsx
new file mode 100644
index 0000000..06ec760
--- /dev/null
+++ b/src/pages/ForgotPassword/index.tsx
@@ -0,0 +1,58 @@
+import { useRequest } from 'ahooks'
+import PageContainer from 'components/PageContainer'
+import { useState } from 'react'
+import { Col, Row, Form, Button, Alert } from 'react-bootstrap'
+import Backend from 'utils/service'
+
+const ForgotPassword: React.FC = () => {
+  const [email, setEmail] = useState('')
+  const [info, setInfo] = useState('')
+  const { run } = useRequest(
+    async () => Backend.auth.v1AuthForgotpasswordCreate({ email }),
+    {
+      manual: true,
+      onSuccess: () => {
+        setInfo('Done! Check you email!')
+      }
+    }
+  )
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    run()
+  }
+  return (
+    <PageContainer>
+      <div className='text-center'>
+        <h1>Forgot Password</h1>
+      </div>
+      <Col xs={12} md={8} lg={6} className='mx-auto mt-3'>
+        {info ? <Alert variant='success'>{info}</Alert> : null}
+        <Form onSubmit={handleSubmit}>
+          <Form.Group as={Row} className='mb-3' controlId='formBasicEmail'>
+            <Form.Label className='text-sm-end' column sm={2}>
+              Email
+            </Form.Label>
+            <Col sm={10}>
+              <Form.Control
+                required
+                type='email'
+                placeholder='Enter your email'
+                value={email}
+                onChange={e => setEmail(e.target.value)}
+              />
+            </Col>
+          </Form.Group>
+          <Form.Group as={Row} className='mb-3'>
+            <Col sm={{ span: 10, offset: 2 }}>
+              <Button variant='primary' type='submit'>
+                Send Reset Email
+              </Button>
+            </Col>
+          </Form.Group>
+        </Form>
+      </Col>
+    </PageContainer>
+  )
+}
+
+export default ForgotPassword
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
index da8bc36..30dff13 100644
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -25,8 +25,8 @@ const LoginForm: React.FC = () => {
       return Backend.auth.v1AuthLoginCreate(
         {
           username,
-          password,
-          remember
+          password
+          // remember
         },
         {
           redirect_url: `${DOMAIN_HOST}${from}`
diff --git a/src/pages/Register/index.tsx b/src/pages/Register/index.tsx
index d959ac8..946e308 100644
--- a/src/pages/Register/index.tsx
+++ b/src/pages/Register/index.tsx
@@ -214,7 +214,6 @@ const RegistrationForm = () => {
               name='address2'
               type='address2'
               placeholder='Apartment, studio, or floor'
-              required
               value={form.address2}
               onChange={handleChange}
             />
@@ -239,6 +238,7 @@ const RegistrationForm = () => {
                 defaultValue='Choose...'
                 onChange={handleChange}
                 name='state'
+                value={form.state}
               >
                 <option>Choose...</option>
                 {usStates.map((state, index) => (
@@ -296,7 +296,6 @@ const RegistrationForm = () => {
                     <Form.Control
                       name='card_number'
                       type='card_number'
-                      required
                       value={form.card_number}
                       onChange={handleChange}
                     />
@@ -307,7 +306,6 @@ const RegistrationForm = () => {
                     <Form.Control
                       name='card_expiration'
                       type='card_expiration'
-                      required
                       placeholder='01/28'
                       value={form.card_expiration}
                       onChange={handleChange}
@@ -320,7 +318,6 @@ const RegistrationForm = () => {
                   <Form.Control
                     name='card_address'
                     type='card_address'
-                    required
                     placeholder='1234 Main St'
                     value={form.card_address}
                     onChange={handleChange}
@@ -332,7 +329,6 @@ const RegistrationForm = () => {
                   <Form.Control
                     name='card_address2'
                     type='card_address2'
-                    required
                     placeholder='Apartment, studio, or floor'
                     value={form.card_address2}
                     onChange={handleChange}
@@ -345,7 +341,6 @@ const RegistrationForm = () => {
                     <Form.Control
                       name='card_city'
                       type='card_city'
-                      required
                       placeholder='City'
                       value={form.card_city}
                       onChange={handleChange}
@@ -358,6 +353,7 @@ const RegistrationForm = () => {
                       defaultValue='Choose...'
                       onChange={handleChange}
                       name='card_state'
+                      value={form.card_state}
                     >
                       <option>Choose...</option>
                       {usStates.map((state, index) => (
diff --git a/src/pages/ResetPassword/index.tsx b/src/pages/ResetPassword/index.tsx
new file mode 100644
index 0000000..1c4e831
--- /dev/null
+++ b/src/pages/ResetPassword/index.tsx
@@ -0,0 +1,104 @@
+import { useRequest } from 'ahooks'
+import PageContainer from 'components/PageContainer'
+import { useAuth } from 'hooks/useAuth'
+import { useState } from 'react'
+import { Col, Row } from 'react-bootstrap'
+import Button from 'react-bootstrap/Button'
+import Form from 'react-bootstrap/Form'
+import { Navigate, useNavigate, useSearchParams } from 'react-router-dom'
+import { DOMAIN_HOST } from 'utils/constants'
+import Backend from 'utils/service'
+
+const ResetForm: React.FC = () => {
+  const { user } = useAuth()
+  const [searchParams] = useSearchParams()
+  const [username, setUsername] = useState('')
+  const [newPassword, setNewPassword] = useState('')
+  const navigate = useNavigate()
+  const { run: resetPassword } = useRequest(
+    async () => {
+      const from = searchParams.get('from') ?? '/'
+      return Backend.auth.v1AuthResetpasswordCreate(
+        {
+          username,
+          newPassword
+        },
+        {
+          redirect_url: `${DOMAIN_HOST}${from}`
+        }
+      )
+    },
+    {
+      manual: true,
+      onSuccess: () => {
+        navigate('/login') // Navigate to the Login page
+      }
+    }
+  )
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    resetPassword()
+  }
+
+  return user ? (
+    <Navigate to='/' />
+  ) : (
+    <>
+      <div className='text-center'>
+        <h1>Reset Password</h1>
+      </div>
+      <Col xs={12} md={8} lg={6} className='mx-auto mt-3'>
+        <Form onSubmit={handleSubmit} validated>
+          <Form.Group as={Row} className='mb-3' controlId='formBasicEmail'>
+            <Form.Label className='text-sm-end' column sm={2}>
+              Username
+            </Form.Label>
+            <Col sm={10}>
+              <Form.Control
+                required
+                type='text'
+                placeholder='Username'
+                defaultValue={username}
+                onChange={e => {
+                  setUsername(e.target.value)
+                }}
+              />
+            </Col>
+          </Form.Group>
+          <Form.Group as={Row} className='mb-3' controlId='formBasicPassword'>
+            <Form.Label className='text-sm-end' column sm={2}>
+              New Password
+            </Form.Label>
+            <Col sm={10}>
+              <Form.Control
+                required
+                type='password'
+                placeholder='Password'
+                defaultValue={newPassword}
+                onChange={e => {
+                  setNewPassword(e.target.value)
+                }}
+              />
+            </Col>
+          </Form.Group>
+          <Form.Group as={Row} className='mb-3'>
+            <Col sm={{ span: 10, offset: 2 }}>
+              <Button variant='primary' type='submit'>
+                Submit
+              </Button>
+            </Col>
+          </Form.Group>
+        </Form>
+      </Col>
+    </>
+  )
+}
+
+const Index: React.FC = () => (
+  <PageContainer>
+    <ResetForm />
+  </PageContainer>
+)
+
+export default Index
diff --git a/src/routes.tsx b/src/routes.tsx
index d968f8f..394112a 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -1,8 +1,10 @@
 import { ProtectedRoute } from 'components/ProtectedRoute'
 import Activate from 'pages/Activate'
 import Admin from 'pages/Admin'
+import ChangePassword from 'pages/ChangePassword'
 import Checkout from 'pages/Checkout'
 import EditProfile from 'pages/EditProfile'
+import ForgotPassword from 'pages/ForgotPassword'
 import Login from 'pages/Login'
 import Logout from 'pages/Logout'
 import Main from 'pages/Main'
@@ -15,6 +17,7 @@ import OrderSummary from 'pages/OrderSummary'
 import PromoManage from 'pages/PromoManage'
 import Register from 'pages/Register'
 import RegisterConfirmation from 'pages/RegisterConfirmation'
+import ResetPassword from 'pages/ResetPassword'
 import UserManage from 'pages/UserManage'
 import type { RouteObject } from 'react-router-dom'
 
@@ -32,12 +35,16 @@ const children: RouteObject[] = [
     element: <Register />
   },
   {
-    path: '/activate',
-    element: <Activate />
+    path: '/forgotPassword',
+    element: <ForgotPassword />
   },
   {
-    path: '/profile/edit',
-    element: <EditProfile />
+    path: '/resetPassword',
+    element: <ResetPassword />
+  },
+  {
+    path: '/activate',
+    element: <Activate />
   },
   {
     path: '/register/confirm',
@@ -65,6 +72,14 @@ const children: RouteObject[] = [
       {
         path: '/admin/promo',
         element: <PromoManage />
+      },
+      {
+        path: '/profile/edit',
+        element: <EditProfile />
+      },
+      {
+        path: '/changePassword',
+        element: <ChangePassword />
       }
     ]
   },