diff --git a/src/client/index.ts b/src/client/index.ts
index 65c7a00..1ea1947 100644
--- a/src/client/index.ts
+++ b/src/client/index.ts
@@ -14,22 +14,6 @@ export interface SchemaAdminUpdateUser {
   address?: string
   /** @maxLength 150 */
   address2?: string
-  /** @maxLength 150 */
-  card_address?: string
-  /** @maxLength 150 */
-  card_address2?: string
-  /** @maxLength 100 */
-  card_city?: string
-  /** @maxLength 50 */
-  card_expiration?: string
-  /** @maxLength 50 */
-  card_number?: string
-  /** @maxLength 100 */
-  card_state?: string
-  /** @maxLength 50 */
-  card_type?: string
-  /** @maxLength 20 */
-  card_zip?: string
   /** @maxLength 100 */
   city?: string
   /** @maxLength 150 */
@@ -61,6 +45,26 @@ export interface SchemaAuth {
   username?: string
 }
 
+export interface SchemaCard {
+  /** @maxLength 255 */
+  address: string
+  /** @maxLength 255 */
+  address2: string
+  /** @maxLength 255 */
+  city: string
+  /** @maxLength 255 */
+  expiration: string
+  id: string
+  /** @maxLength 255 */
+  number: string
+  /** @maxLength 1023 */
+  state: string
+  /** @maxLength 255 */
+  type: string
+  /** @maxLength 1023 */
+  zip: string
+}
+
 export interface SchemaCreateUser {
   /** @maxLength 150 */
   email: string
@@ -136,26 +140,33 @@ export interface SchemaOrderListResponse {
   offset?: number
 }
 
+export interface SchemaPromoListResponse {
+  count?: number
+  data?: SchemaPromotion[]
+  limit?: number
+  offset?: number
+}
+
+export interface SchemaPromotion {
+  /** @maxLength 255 */
+  description: string
+  discount: number
+  /** @maxLength 255 */
+  expiry_date: string
+  id: string
+  is_expired: boolean
+  /** @maxLength 255 */
+  movie_affected: string
+  /** @maxLength 255 */
+  title: string
+}
+
 export interface SchemaRegisterUser {
   /** @maxLength 150 */
   address: string
   /** @maxLength 150 */
   address2?: string
-  /** @maxLength 150 */
-  card_address?: string
-  /** @maxLength 150 */
-  card_address2?: string
-  /** @maxLength 100 */
-  card_city?: string
-  /** @maxLength 50 */
-  card_expiration?: string
-  /** @maxLength 50 */
-  card_number?: string
-  /** @maxLength 100 */
-  card_state?: string
-  /** @maxLength 50 */
-  card_type?: string
-  card_zip?: string
+  cards: SchemaCard[]
   /** @maxLength 100 */
   city: string
   /** @maxLength 150 */
@@ -179,49 +190,63 @@ export interface SchemaRegisterUser {
   zip: string
 }
 
+export interface SchemaTicket {
+  id?: string
+  price?: number
+  seat?: string
+  show?: string
+  title?: string
+  type?: string
+}
+
 export interface SchemaTokenResponse {
   access_token?: string
   msg?: string
   redirect_url?: string
 }
 
+export interface SchemaUpdateCard {
+  /** @maxLength 255 */
+  address: string
+  /** @maxLength 255 */
+  address2: string
+  /** @maxLength 255 */
+  city: string
+  /** @maxLength 255 */
+  expiration: string
+  /** @maxLength 255 */
+  number: string
+  /** @maxLength 1023 */
+  state: string
+  /** @maxLength 255 */
+  type: string
+  /** @maxLength 1023 */
+  zip: string
+}
+
 export interface SchemaUpdateUser {
   /** @maxLength 150 */
-  address?: string
+  address: string
   /** @maxLength 150 */
   address2?: string
-  /** @maxLength 150 */
-  card_address?: string
-  /** @maxLength 150 */
-  card_address2?: string
-  /** @maxLength 100 */
-  card_city?: string
-  /** @maxLength 50 */
-  card_expiration?: string
-  /** @maxLength 50 */
-  card_number?: string
+  /** @maxItems 3 */
+  cards: SchemaUpdateCard[]
   /** @maxLength 100 */
-  card_state?: string
-  /** @maxLength 50 */
-  card_type?: string
-  /** @maxLength 20 */
-  card_zip?: string
-  /** @maxLength 100 */
-  city?: string
+  city: string
   /** @maxLength 100 */
-  name?: string
+  name: string
   need_promotion?: boolean
   /** @maxLength 20 */
-  phone?: string
+  phone: string
   /** @maxLength 100 */
-  state?: string
+  state: string
   /**
    * @minLength 3
    * @maxLength 50
    */
-  username?: string
+  username: string
   /** @maxLength 20 */
-  zip?: string
+  zip: string
 }
 
 export interface SchemaUpsertMovie {
@@ -248,6 +273,27 @@ export interface SchemaUpsertMovie {
   trailer_video: string
 }
 
+export interface SchemaUpsertPromotion {
+  /** @maxLength 255 */
+  description: string
+  discount: number
+  /** @maxLength 255 */
+  expiry_date: string
+  is_expired: boolean
+  /** @maxLength 255 */
+  movie_affected: string
+  /** @maxLength 255 */
+  title: string
+}
+
+export interface SchemaUpsertTicket {
+  price?: number
+  seat?: string
+  show?: string
+  title?: string
+  type?: string
+}
+
 export interface SchemaUser {
   email?: string
   id: string
@@ -264,27 +310,20 @@ export interface SchemaUserChangePassword {
 }
 
 export interface SchemaUserDetail {
-  address: string
-  address2: string
-  card_address: string
-  card_address2: string
-  card_city: string
-  card_expiration: string
-  card_number: string
-  card_state: string
-  card_type: string
-  card_zip: string
-  city: string
-  email: string
-  id: string
-  is_active: boolean
-  is_admin: boolean
-  name: string
-  need_promotion: boolean
-  phone: string
-  state: string
-  username: string
-  zip: string
+  address?: string
+  address2?: string
+  cards: SchemaCard[]
+  city?: string
+  email?: string
+  id?: string
+  is_active?: boolean
+  is_admin?: boolean
+  name?: string
+  need_promotion?: boolean
+  phone?: string
+  state?: string
+  username?: string
+  zip?: string
 }
 
 export interface SchemaUserDetailListResponse {
@@ -620,7 +659,7 @@ export class Api<
      * @secure
      */
     v1AdminUsersDetail: (id: string, params: RequestParams = {}) =>
-      this.request<SchemaUser, SchemaErrorResponse>({
+      this.request<SchemaUserDetail, SchemaErrorResponse>({
         path: `/api/v1/admin/users/${id}`,
         method: 'GET',
         secure: true,
@@ -860,6 +899,24 @@ export class Api<
         ...params
       })
   }
+  card = {
+    /**
+     * @description a payment card.
+     *
+     * @tags Card
+     * @name V1CardsDetail
+     * @summary get a payment card
+     * @request GET:/api/v1/cards/{id}
+     */
+    v1CardsDetail: (id: string, params: RequestParams = {}) =>
+      this.request<SchemaCard, SchemaErrorResponse>({
+        path: `/api/v1/cards/${id}`,
+        method: 'GET',
+        type: ContentType.Json,
+        format: 'json',
+        ...params
+      })
+  }
   movie = {
     /**
      * @description Get all movies.
@@ -975,6 +1032,146 @@ export class Api<
         ...params
       })
   }
+  promotion = {
+    /**
+     * @description Get all promotions.
+     *
+     * @tags Promotion
+     * @name V1PromotionsList
+     * @summary get all promotions
+     * @request GET:/api/v1/promotions
+     */
+    v1PromotionsList: (
+      query?: {
+        /** search by title */
+        search?: string
+        /** offset */
+        offset?: number
+        /** limit */
+        limit?: number
+      },
+      params: RequestParams = {}
+    ) =>
+      this.request<SchemaPromoListResponse, SchemaErrorResponse>({
+        path: `/api/v1/promotions`,
+        method: 'GET',
+        query: query,
+        type: ContentType.Json,
+        format: 'json',
+        ...params
+      }),
+
+    /**
+     * @description Create a new promotion.
+     *
+     * @tags Promotion
+     * @name V1PromotionsCreate
+     * @summary create a new promotion
+     * @request POST:/api/v1/promotions
+     * @secure
+     */
+    v1PromotionsCreate: (
+      promotion: SchemaUpsertPromotion,
+      params: RequestParams = {}
+    ) =>
+      this.request<SchemaPromotion, SchemaErrorResponse>({
+        path: `/api/v1/promotions`,
+        method: 'POST',
+        body: promotion,
+        secure: true,
+        type: ContentType.Json,
+        format: 'json',
+        ...params
+      }),
+
+    /**
+     * @description update promo
+     *
+     * @tags Promotion
+     * @name V1PromotionsUpdate
+     * @summary update a promo
+     * @request PUT:/api/v1/promotions/{id}
+     * @secure
+     */
+    v1PromotionsUpdate: (
+      id: string,
+      updatepromo: SchemaUpsertPromotion,
+      params: RequestParams = {}
+    ) =>
+      this.request<SchemaPromotion, SchemaErrorResponse>({
+        path: `/api/v1/promotions/${id}`,
+        method: 'PUT',
+        body: updatepromo,
+        secure: true,
+        type: ContentType.Json,
+        format: 'json',
+        ...params
+      })
+  }
+  ticket = {
+    /**
+     * @description Create a new ticket.
+     *
+     * @tags Ticket
+     * @name V1TicketsCreate
+     * @summary create a new ticket
+     * @request POST:/api/v1/tickets
+     * @secure
+     */
+    v1TicketsCreate: (ticket: SchemaUpsertTicket, params: RequestParams = {}) =>
+      this.request<SchemaTicket, SchemaErrorResponse>({
+        path: `/api/v1/tickets`,
+        method: 'POST',
+        body: ticket,
+        secure: true,
+        type: ContentType.Json,
+        format: 'json',
+        ...params
+      }),
+
+    /**
+     * @description Retrieve a ticket by ID.
+     *
+     * @tags Ticket
+     * @name V1TicketsDetail
+     * @summary retrieve a ticket by ID
+     * @request GET:/api/v1/tickets/{id}
+     * @secure
+     */
+    v1TicketsDetail: (id: string, params: RequestParams = {}) =>
+      this.request<SchemaTicket, SchemaErrorResponse>({
+        path: `/api/v1/tickets/${id}`,
+        method: 'GET',
+        secure: true,
+        type: ContentType.Json,
+        format: 'json',
+        ...params
+      }),
+
+    /**
+     * @description Update a ticket.
+     *
+     * @tags Ticket
+     * @name V1TicketsUpdate
+     * @summary update a ticket
+     * @request PUT:/api/v1/tickets/{id}
+     * @secure
+     */
+    v1TicketsUpdate: (
+      id: string,
+      ticket: SchemaUpsertTicket,
+      params: RequestParams = {}
+    ) =>
+      this.request<SchemaTicket, SchemaErrorResponse>({
+        path: `/api/v1/tickets/${id}`,
+        method: 'PUT',
+        body: ticket,
+        secure: true,
+        type: ContentType.Json,
+        format: 'json',
+        ...params
+      })
+  }
   user = {
     /**
      * @description a user me.
diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
new file mode 100644
index 0000000..68616ee
--- /dev/null
+++ b/src/components/Card/index.tsx
@@ -0,0 +1,154 @@
+import type { SchemaCard } from 'client'
+import type React from 'react'
+import { Form, Col, Row } from 'react-bootstrap'
+
+interface CardFormProps {
+  card: SchemaCard
+  onChange: (updatedCard: SchemaCard) => void
+}
+
+const Index: React.FC<CardFormProps> = ({ card, onChange }) => {
+  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 }
+    console.log(name, value, card)
+    if (typeof name === 'string') {
+      onChange({ ...card, [name]: value })
+    }
+  }
+
+  return (
+    <>
+      <Row className='mb-3'>
+        <Form.Group as={Col} md={3} controlId='formGridEmail'>
+          <Form.Label>Card Type</Form.Label>
+          <Form.Select name='type' value={card.type} onChange={handleChange}>
+            <option value=''>Select card type</option>
+            <option value='Visa'>Visa</option>
+            <option value='MasterCard'>MasterCard</option>
+            <option value='American Express'>American Express</option>
+            <option value='Discover'>Discover</option>
+          </Form.Select>
+        </Form.Group>
+
+        <Form.Group as={Col} md={6} controlId='formGridCardNumber'>
+          <Form.Label>Card Number</Form.Label>
+          <Form.Control
+            name='number'
+            value={card.number}
+            onChange={handleChange}
+          />
+        </Form.Group>
+        <Form.Group as={Col} md={3} controlId='formGridCardExp'>
+          <Form.Label>Card Expiration</Form.Label>
+          <Form.Control
+            name='expiration'
+            type='text'
+            placeholder='01/28'
+            value={card.expiration}
+            onChange={handleChange}
+          />
+        </Form.Group>
+      </Row>
+      <Form.Group className='mb-3' controlId='formGridAddress1'>
+        <Form.Label>Address</Form.Label>
+        <Form.Control
+          name='address'
+          placeholder='1234 Main St'
+          value={card.address}
+          onChange={handleChange}
+        />
+      </Form.Group>
+      <Form.Group className='mb-3' controlId='formGridAddress2'>
+        <Form.Label>Address 2</Form.Label>
+        <Form.Control
+          name='address2'
+          placeholder='Apartment, studio, or floor'
+          value={card.address2}
+          onChange={handleChange}
+        />
+      </Form.Group>
+      <Row className='mb-3'>
+        <Form.Group as={Col} controlId='formGridCity'>
+          <Form.Label>City</Form.Label>
+          <Form.Control name='city' value={card.city} onChange={handleChange} />
+        </Form.Group>
+        <Form.Group as={Col} controlId='formGridState'>
+          <Form.Label>State</Form.Label>
+          <Form.Select
+            name='state'
+            defaultValue='Choose...'
+            onChange={handleChange}
+            value={card.state}
+          >
+            <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 name='zip' value={card.zip} onChange={handleChange} />
+        </Form.Group>
+      </Row>
+    </>
+  )
+}
+export default Index
diff --git a/src/pages/Checkout/index.tsx b/src/pages/Checkout/index.tsx
index ae53b3f..dadb1bd 100644
--- a/src/pages/Checkout/index.tsx
+++ b/src/pages/Checkout/index.tsx
@@ -1,8 +1,10 @@
 import './style.module.css'
+import type { SchemaCard } from 'client'
+import Card from 'components/Card'
 import PageContainer from 'components/PageContainer'
 import type React from 'react'
 import { useState } from 'react'
-import { Form, Button, Col, Row, Alert, Accordion } from 'react-bootstrap'
+import { Form, Button, Col, Row, Alert } from 'react-bootstrap'
 import { useNavigate } from 'react-router-dom'
 
 const RegistrationForm = () => {
@@ -14,6 +16,17 @@ const RegistrationForm = () => {
     setError('TODO: Implement Checkout')
     navigate('/order/confirm')
   }
+  const [card, setCard] = useState<SchemaCard>({
+    id: '',
+    number: '',
+    expiration: '',
+    address: '',
+    address2: '',
+    city: '',
+    state: '',
+    zip: '',
+    type: ''
+  })
 
   return (
     <>
@@ -22,106 +35,7 @@ const RegistrationForm = () => {
       </div>
       <Col className='mx-auto mt-3'>
         <Form onSubmit={handleSubmit} validated>
-          <Row className='mb-3'>
-            <Form.Group as={Col} controlId='formGridName'>
-              <Form.Label className='required'>First Name</Form.Label>
-              <Form.Control required />
-            </Form.Group>
-
-            <Form.Group as={Col} controlId='formGridName'>
-              <Form.Label className='required'>Last Name</Form.Label>
-              <Form.Control required />
-            </Form.Group>
-          </Row>
-          <Row className='mb-3'>
-            <Form.Group as={Col} controlId='formGridEmail'>
-              <Form.Label className='required'>Email</Form.Label>
-              <Form.Control type='email' placeholder='Enter email' required />
-            </Form.Group>
-
-            <Form.Group as={Col} controlId='formGridPhone'>
-              <Form.Label className='required'>Phone</Form.Label>
-              <Form.Control required />
-            </Form.Group>
-          </Row>
-          <Form.Group className='mb-3' controlId='formGridAddress1'>
-            <Form.Label className='required'>Address</Form.Label>
-            <Form.Control placeholder='1234 Main St' required />
-          </Form.Group>
-          <Form.Group className='mb-3' controlId='formGridAddress2'>
-            <Form.Label className='required'>Address 2</Form.Label>
-            <Form.Control placeholder='Apartment, studio, or floor' required />
-          </Form.Group>
-          <Row className='mb-3'>
-            <Form.Group as={Col} controlId='formGridCity'>
-              <Form.Label className='required'>City</Form.Label>
-              <Form.Control required />
-            </Form.Group>
-            <Form.Group as={Col} controlId='formGridState'>
-              <Form.Label className='required'>State</Form.Label>
-              <Form.Select defaultValue='Choose...' required>
-                <option>Choose...</option>
-                <option>...</option>
-              </Form.Select>
-            </Form.Group>
-            <Form.Group as={Col} md={3} controlId='formGridZip'>
-              <Form.Label className='required'>Zip</Form.Label>
-              <Form.Control required />
-            </Form.Group>
-          </Row>
-          <Accordion>
-            <Accordion.Item eventKey='0'>
-              <Accordion.Header>Payment Information</Accordion.Header>
-              <Accordion.Body>
-                <Row className='mb-3'>
-                  <Form.Group as={Col} md={3} controlId='formGridEmail'>
-                    <Form.Label>Card Type</Form.Label>
-                    <Form.Select>
-                      <option value=''>Select card type</option>
-                      <option value='Visa'>Visa</option>
-                      <option value='MasterCard'>MasterCard</option>
-                      <option value='American Express'>American Express</option>
-                      <option value='Discover'>Discover</option>
-                    </Form.Select>
-                  </Form.Group>
-
-                  <Form.Group as={Col} md={6} controlId='formGridCardNumber'>
-                    <Form.Label>Card Number</Form.Label>
-                    <Form.Control />
-                  </Form.Group>
-                  <Form.Group as={Col} md={3} controlId='formGridCardExp'>
-                    <Form.Label>Card Expiration</Form.Label>
-                    <Form.Control type='text' placeholder='01/28' />
-                  </Form.Group>
-                </Row>
-                <Form.Group className='mb-3' controlId='formGridAddress1'>
-                  <Form.Label>Address</Form.Label>
-                  <Form.Control placeholder='1234 Main St' />
-                </Form.Group>
-                <Form.Group className='mb-3' controlId='formGridAddress2'>
-                  <Form.Label>Address 2</Form.Label>
-                  <Form.Control placeholder='Apartment, studio, or floor' />
-                </Form.Group>
-                <Row className='mb-3'>
-                  <Form.Group as={Col} controlId='formGridCity'>
-                    <Form.Label>City</Form.Label>
-                    <Form.Control />
-                  </Form.Group>
-                  <Form.Group as={Col} controlId='formGridState'>
-                    <Form.Label>State</Form.Label>
-                    <Form.Select defaultValue='Choose...'>
-                      <option>Choose...</option>
-                      <option>...</option>
-                    </Form.Select>
-                  </Form.Group>
-                  <Form.Group as={Col} md={3} controlId='formGridZip'>
-                    <Form.Label>Zip</Form.Label>
-                    <Form.Control />
-                  </Form.Group>
-                </Row>
-              </Accordion.Body>
-            </Accordion.Item>
-          </Accordion>
+          <Card card={card} onChange={setCard} />
 
           <Form.Group as={Row} className='mt-3'>
             <Button variant='primary' type='submit'>
diff --git a/src/pages/EditProfile/index.tsx b/src/pages/EditProfile/index.tsx
index 04bb1c0..1daaa2e 100644
--- a/src/pages/EditProfile/index.tsx
+++ b/src/pages/EditProfile/index.tsx
@@ -1,5 +1,6 @@
 import { useRequest } from 'ahooks'
-import type { SchemaUpdateUser, SchemaUserDetail } from 'client'
+import type { SchemaCard, SchemaUpdateUser, SchemaUserDetail } from 'client'
+import Card from 'components/Card'
 import PageContainer from 'components/PageContainer'
 import type React from 'react'
 import { useState } from 'react'
@@ -23,16 +24,42 @@ const UserProfileForm: React.FC = () => {
     city: '',
     state: '',
     zip: '',
-    card_address: '',
-    card_address2: '',
-    card_city: '',
-    card_state: '',
-    card_zip: '',
-    card_type: '',
-    card_number: '',
-    card_expiration: '',
     is_active: false,
-    is_admin: false
+    is_admin: false,
+    cards: []
+  })
+  const [card1, setCard1] = useState<SchemaCard>({
+    id: '',
+    number: '',
+    expiration: '',
+    address: '',
+    address2: '',
+    city: '',
+    state: '',
+    zip: '',
+    type: ''
+  })
+  const [card2, setCard2] = useState<SchemaCard>({
+    id: '',
+    number: '',
+    expiration: '',
+    address: '',
+    address2: '',
+    city: '',
+    state: '',
+    zip: '',
+    type: ''
+  })
+  const [card3, setCard3] = useState<SchemaCard>({
+    id: '',
+    number: '',
+    expiration: '',
+    address: '',
+    address2: '',
+    city: '',
+    state: '',
+    zip: '',
+    type: ''
   })
   const usStates = [
     'AL',
@@ -100,13 +127,22 @@ const UserProfileForm: React.FC = () => {
     }
   }
   const { run: submit } = useRequest(
-    async () => Backend.user.v1UsersMeUpdate(form as SchemaUpdateUser),
+    async () => {
+      const user = { ...form } as SchemaUpdateUser
+      user.cards = []
+      if (card1.type !== '') user.cards.push(card1)
+      if (card2.type !== '') user.cards.push(card2)
+      if (card3.type !== '') user.cards.push(card3)
+      return Backend.user.v1UsersMeUpdate(user)
+    },
     {
       manual: true,
       onSuccess: () => {
         setSuccess('Done!')
+        setError('')
       },
       onError: () => {
+        setSuccess('')
         setError('Update profile failed. Please try again.')
       }
     }
@@ -118,6 +154,10 @@ const UserProfileForm: React.FC = () => {
   const { loading } = useRequest(async () => Backend.user.v1UsersMeList(), {
     onSuccess: res => {
       setForm(res.data)
+      const cardCount = res.data.cards.length
+      if (cardCount > 0) setCard1(res.data.cards[0])
+      if (cardCount > 1) setCard2(res.data.cards[1])
+      if (cardCount > 2) setCard3(res.data.cards[2])
     }
   })
 
@@ -238,96 +278,25 @@ const UserProfileForm: React.FC = () => {
           </Row>
           <Accordion>
             <Accordion.Item eventKey='0'>
-              <Accordion.Header>Payment Information</Accordion.Header>
+              <Accordion.Header>Payment Card 1 Information</Accordion.Header>
               <Accordion.Body>
-                <Row className='mb-3'>
-                  <Form.Group as={Col} md={3} controlId='formGridEmail'>
-                    <Form.Label>Card Type</Form.Label>
-                    <Form.Select
-                      name='card_type'
-                      value={form.card_type}
-                      onChange={handleChange}
-                    >
-                      <option value=''>Select card type</option>
-                      <option value='Visa'>Visa</option>
-                      <option value='MasterCard'>MasterCard</option>
-                      <option value='American Express'>American Express</option>
-                      <option value='Discover'>Discover</option>
-                    </Form.Select>
-                  </Form.Group>
-
-                  <Form.Group as={Col} md={6} controlId='formGridCardNumber'>
-                    <Form.Label>Card Number</Form.Label>
-                    <Form.Control
-                      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={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={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={form.card_address2}
-                    onChange={handleChange}
-                  />
-                </Form.Group>
-                <Row className='mb-3'>
-                  <Form.Group as={Col} controlId='formGridCity'>
-                    <Form.Label>City</Form.Label>
-                    <Form.Control
-                      name='card_city'
-                      value={form.card_city}
-                      onChange={handleChange}
-                    />
-                  </Form.Group>
-                  <Form.Group as={Col} controlId='formGridState'>
-                    <Form.Label>State</Form.Label>
-                    <Form.Select
-                      name='card_state'
-                      defaultValue='Choose...'
-                      onChange={handleChange}
-                      value={form.card_state}
-                    >
-                      <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
-                      name='card_zip'
-                      value={form.card_zip}
-                      onChange={handleChange}
-                    />
-                  </Form.Group>
-                </Row>
+                <Card card={card1} onChange={setCard1} />
+              </Accordion.Body>
+            </Accordion.Item>
+          </Accordion>
+          <Accordion>
+            <Accordion.Item eventKey='1'>
+              <Accordion.Header>Payment Card 2 Information</Accordion.Header>
+              <Accordion.Body>
+                <Card card={card2} onChange={setCard2} />
+              </Accordion.Body>
+            </Accordion.Item>
+          </Accordion>
+          <Accordion>
+            <Accordion.Item eventKey='2'>
+              <Accordion.Header>Payment Card 3 Information</Accordion.Header>
+              <Accordion.Body>
+                <Card card={card3} onChange={setCard3} />
               </Accordion.Body>
             </Accordion.Item>
           </Accordion>
diff --git a/src/pages/Register/index.tsx b/src/pages/Register/index.tsx
index 946e308..736b319 100644
--- a/src/pages/Register/index.tsx
+++ b/src/pages/Register/index.tsx
@@ -1,6 +1,8 @@
 import './style.module.css'
 import { useRequest } from 'ahooks'
+import type { SchemaCard, SchemaRegisterUser } from 'client'
 import type { ErrorResponse } from 'client/error'
+import Card from 'components/Card'
 import PageContainer from 'components/PageContainer'
 import type React from 'react'
 import { useState } from 'react'
@@ -23,14 +25,18 @@ const RegistrationForm = () => {
     city: '',
     state: '',
     zip: '',
-    card_address: '',
-    card_address2: '',
-    card_city: '',
-    card_state: '',
-    card_zip: '',
-    card_type: '',
-    card_number: '',
-    card_expiration: ''
+    cards: []
+  })
+  const [card1, setCard1] = useState<SchemaCard>({
+    id: '',
+    number: '',
+    expiration: '',
+    address: '',
+    address2: '',
+    city: '',
+    state: '',
+    zip: '',
+    type: ''
   })
   const usStates = [
     'AL',
@@ -101,7 +107,14 @@ const RegistrationForm = () => {
   }
 
   const { run: registerUser } = useRequest(
-    async () => Backend.auth.v1AuthRegisterCreate(form),
+    async () => {
+      const user = { ...form } as SchemaRegisterUser
+      user.cards = []
+      if (card1.type !== '') {
+        user.cards.push(card1)
+      }
+      return Backend.auth.v1AuthRegisterCreate(user)
+    },
     {
       manual: true,
       onSuccess: () => {
@@ -275,106 +288,7 @@ const RegistrationForm = () => {
             <Accordion.Item eventKey='0'>
               <Accordion.Header>Payment Information</Accordion.Header>
               <Accordion.Body>
-                <Row className='mb-3'>
-                  <Form.Group as={Col} md={3} controlId='formGridCardType'>
-                    <Form.Label>Card Type</Form.Label>
-                    <Form.Select
-                      defaultValue='Choose...'
-                      onChange={handleChange}
-                      name='card_type'
-                    >
-                      <option value=''>Select card type</option>
-                      <option value='Visa'>Visa</option>
-                      <option value='MasterCard'>MasterCard</option>
-                      <option value='American Express'>American Express</option>
-                      <option value='Discover'>Discover</option>
-                    </Form.Select>
-                  </Form.Group>
-
-                  <Form.Group as={Col} md={6} controlId='formGridCardNumber'>
-                    <Form.Label>Card Number</Form.Label>
-                    <Form.Control
-                      name='card_number'
-                      type='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='card_expiration'
-                      placeholder='01/28'
-                      value={form.card_expiration}
-                      onChange={handleChange}
-                    />
-                  </Form.Group>
-                </Row>
-
-                <Form.Group className='mb-3' controlId='formGridCardAddress1'>
-                  <Form.Label>Address</Form.Label>
-                  <Form.Control
-                    name='card_address'
-                    type='card_address'
-                    placeholder='1234 Main St'
-                    value={form.card_address}
-                    onChange={handleChange}
-                  />
-                </Form.Group>
-
-                <Form.Group className='mb-3' controlId='formGridCardAddress2'>
-                  <Form.Label>Address 2</Form.Label>
-                  <Form.Control
-                    name='card_address2'
-                    type='card_address2'
-                    placeholder='Apartment, studio, or floor'
-                    value={form.card_address2}
-                    onChange={handleChange}
-                  />
-                </Form.Group>
-
-                <Row className='mb-3'>
-                  <Form.Group as={Col} controlId='formGridCardCity'>
-                    <Form.Label>City</Form.Label>
-                    <Form.Control
-                      name='card_city'
-                      type='card_city'
-                      placeholder='City'
-                      value={form.card_city}
-                      onChange={handleChange}
-                    />
-                  </Form.Group>
-
-                  <Form.Group as={Col} controlId='formGridCardState'>
-                    <Form.Label>State</Form.Label>
-                    <Form.Select
-                      defaultValue='Choose...'
-                      onChange={handleChange}
-                      name='card_state'
-                      value={form.card_state}
-                    >
-                      <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='formGridCardZip'>
-                    <Form.Label>Zip</Form.Label>
-                    <Form.Control
-                      name='card_zip'
-                      type='card_zip'
-                      value={form.card_zip}
-                      onChange={handleChange}
-                    />
-                  </Form.Group>
-                </Row>
+                <Card card={card1} onChange={setCard1} />
               </Accordion.Body>
             </Accordion.Item>
           </Accordion>