diff --git a/src/components/appointment/AppointmentCard.tsx b/src/components/appointment/AppointmentCard.tsx
index a26b58759..04a9a22da 100644
--- a/src/components/appointment/AppointmentCard.tsx
+++ b/src/components/appointment/AppointmentCard.tsx
@@ -1,7 +1,7 @@
-import { gql, useApolloClient, useQuery } from '@apollo/client'
+import { gql, useApolloClient, useMutation, useQuery } from '@apollo/client'
 import { Icon } from '@chakra-ui/icons'
-import { SkeletonCircle, SkeletonText, Spinner, Textarea } from '@chakra-ui/react'
-import { Button, Dropdown, Form, Icon as AntdIcon, Menu, message, Modal } from 'antd'
+import { Button, ButtonGroup, SkeletonCircle, SkeletonText, Spinner, Textarea } from '@chakra-ui/react'
+import { Divider, Dropdown, Form, Icon as AntdIcon, Menu, message, Modal } from 'antd'
 import { FormComponentProps } from 'antd/lib/form'
 import axios from 'axios'
 import BraftEditor from 'braft-editor'
@@ -15,12 +15,14 @@ import { useIntl } from 'react-intl'
 import styled from 'styled-components'
 import hasura from '../../hasura'
 import { dateRangeFormatter } from '../../helpers'
-import { useCancelAppointment, useUpdateAppointmentIssue } from '../../hooks/appointment'
+import { useAppointmentPlan, useCancelAppointment, useUpdateAppointmentIssue } from '../../hooks/appointment'
 import DefaultAvatar from '../../images/avatar.svg'
 import { ReactComponent as CalendarOIcon } from '../../images/calendar-alt-o.svg'
 import { ReactComponent as UserOIcon } from '../../images/user-o.svg'
+import { AppointmentPlan } from '../../types/appointment'
 import { CustomRatioImage } from '../common/Image'
 import { BREAK_POINT } from '../common/Responsive'
+import AppointmentItem from './AppointmentItem'
 import appointmentMessages from './translation'
 
 const StyledCard = styled.div`
@@ -73,12 +75,7 @@ const StyledCanceledText = styled.span`
   color: var(--gray-dark);
   font-size: 14px;
 `
-const StyledModal = styled(Modal)`
-  && .ant-modal-footer {
-    border-top: 0;
-    padding: 0 1.5rem 1.5rem;
-  }
-`
+
 const StyledModalTitle = styled.div`
   ${CommonTitleMixin}
 `
@@ -100,28 +97,119 @@ const StyledLabel = styled.div`
   letter-spacing: 0.4px;
 `
 
+const StyledScheduleTitle = styled.h3`
+  margin-bottom: 1.25rem;
+  display: block;
+  font-size: 16px;
+  font-weight: bold;
+  letter-spacing: 0.2px;
+  color: var(--gray-darker);
+`
+
+const StyledMeta = styled.div`
+  color: var(--gray-dark);
+  font-size: 12px;
+`
+
+const CustomMenu = styled(Menu)`
+  && .ant-dropdown-menu-item:hover,
+  .ant-dropdown-menu-submenu-title:hover {
+    color: #ffffff !important;
+    background-color: 'primary' !important;
+  }
+`
+
 type AppointmentCardProps = FormComponentProps & {
   orderProductId: string
   appointmentPlanId: string
+  memberId: string
   onRefetch?: () => void
   loadingCreator?: boolean
 }
 
-const AppointmentCard: React.VFC<AppointmentCardProps> = ({ orderProductId, appointmentPlanId, onRefetch, form }) => {
+type AppointmentCardCreatorBlockProps = {
+  creator: {
+    avatarUrl: string | null
+    name: string | null
+  }
+  appointmentPlan: AppointmentPlan | null
+  loadingAppointmentPlan: boolean
+}
+
+const AppointmentCardCreatorBlock: React.FC<AppointmentCardCreatorBlockProps> = ({
+  creator,
+  appointmentPlan,
+  loadingAppointmentPlan,
+}) => {
+  const { formatMessage } = useIntl()
+
+  return (
+    <>
+      <div className="d-flex align-self-start mb-4">
+        <div className="flex-shrink-0">
+          <CustomRatioImage
+            width="5rem"
+            ratio={1}
+            src={creator.avatarUrl || DefaultAvatar}
+            shape="circle"
+            className="mr-3"
+          />
+        </div>
+        <div className="flex-grow-1">
+          <StyledTitle className="mb-1">{creator.name}</StyledTitle>
+          <StyledMeta>
+            {formatMessage(appointmentMessages.AppointmentCard.periodDurationAtMost, {
+              duration: appointmentPlan?.duration,
+            })}
+          </StyledMeta>
+        </div>
+      </div>
+      {!loadingAppointmentPlan && (
+        <StyledModalTitle className="mb-4">
+          {formatMessage(appointmentMessages.AppointmentCard.rescheduleAppointmentPlanTitle, {
+            title: appointmentPlan?.title,
+          })}
+        </StyledModalTitle>
+      )}
+      <Divider />
+    </>
+  )
+}
+
+const AppointmentCard: React.VFC<AppointmentCardProps> = ({
+  orderProductId,
+  appointmentPlanId,
+  memberId,
+  onRefetch,
+  form,
+}) => {
   const { id: appId, enabledModules } = useApp()
   const { formatMessage } = useIntl()
   const { authToken, currentMemberId } = useAuth()
   const apolloClient = useApolloClient()
   const [issueModalVisible, setIssueModalVisible] = useState(false)
   const [cancelModalVisible, setCancelModalVisible] = useState(false)
+  const [rescheduleModalVisible, setRescheduleModalVisible] = useState(false)
   const [canceledReason, setCanceledReason] = useState('')
+  const [rescheduleAppointment, setRescheduleAppointment] = useState<{
+    rescheduleAppointment: boolean
+    periodStartedAt: Date | null
+    periodEndedAt: Date | null
+    appointmentPlanId: string
+  }>()
   const [loading, setLoading] = useState(false)
-  const { loading: loadingOrderProduct, orderProduct } = useOrderProduct(orderProductId)
+  const { loading: loadingOrderProduct, orderProduct, refetchOrderProduct } = useOrderProduct(orderProductId)
   const { loading: loadingAppointmentPlanPreview, appointmentPlanPreview } =
     useAppointmentPlanPreview(appointmentPlanId)
+  const { loadingAppointmentPlan, appointmentPlan, refetchAppointmentPlan } = useAppointmentPlan(
+    appointmentPlanId,
+    memberId || '',
+  )
   const { loading: loadingCreator, creator } = useCreator(appointmentPlanPreview.creatorId)
   const updateAppointmentIssue = useUpdateAppointmentIssue(orderProductId, orderProduct.options)
   const cancelAppointment = useCancelAppointment(orderProductId, orderProduct.options)
+  const updateAppointmentPeriod = useUpdateAppointmentPeriod(orderProductId, orderProduct.options)
+  const [confirm, setConfirm] = useState(false)
 
   const handleSubmit = () => {
     form.validateFields((errors, values) => {
@@ -134,7 +222,7 @@ const AppointmentCard: React.VFC<AppointmentCardProps> = ({ orderProductId, appo
         .then(() => {
           onRefetch && onRefetch()
           setIssueModalVisible(false)
-          message.success(appointmentMessages['*'].saveSuccessfully)
+          message.success(formatMessage(appointmentMessages['*'].saveSuccessfully))
         })
         .finally(() => setLoading(false))
     })
@@ -145,11 +233,53 @@ const AppointmentCard: React.VFC<AppointmentCardProps> = ({ orderProductId, appo
     cancelAppointment(canceledReason)
       .then(() => {
         onRefetch && onRefetch()
+        refetchOrderProduct()
+        refetchAppointmentPlan()
         setCancelModalVisible(false)
       })
       .finally(() => setLoading(false))
   }
 
+  const handleReschedule = async () => {
+    setLoading(true)
+
+    try {
+      if (rescheduleAppointment) {
+        await updateAppointmentPeriod(
+          rescheduleAppointment.periodStartedAt,
+          rescheduleAppointment.periodEndedAt,
+          orderProduct.startedAt,
+          currentMemberId || '',
+        )
+        onRefetch && onRefetch()
+        await refetchAppointmentPlan()
+        setRescheduleModalVisible(false)
+        handleRescheduleCancel()
+        await refetchOrderProduct()
+        setConfirm(true)
+        setLoading(false)
+        await axios.post(
+          `${process.env.REACT_APP_API_BASE_ROOT}/product/${orderProductId}/reschedule`,
+          {},
+          {
+            headers: { authorization: `Bearer ${authToken}` },
+          },
+        )
+      }
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  const handleRescheduleCancel = () => {
+    setRescheduleAppointment({
+      rescheduleAppointment: false,
+      periodStartedAt: null,
+      periodEndedAt: null,
+      appointmentPlanId: '',
+    })
+  }
+
   if (loadingOrderProduct) {
     return (
       <StyledCard>
@@ -199,31 +329,30 @@ const AppointmentCard: React.VFC<AppointmentCardProps> = ({ orderProductId, appo
       </StyledInfo>
 
       <StyledStatusBar className="d-flex align-items-center">
+        <Button
+          variant="link"
+          color="black"
+          fontSize="14px"
+          marginRight="16px"
+          onClick={() => setIssueModalVisible(true)}
+        >
+          {formatMessage(appointmentMessages.AppointmentCard.appointmentIssue)}
+        </Button>
         {isCanceled ? (
           <StyledCanceledText>
-            <Button type="link" size="small" className="mr-3" onClick={() => setIssueModalVisible(true)}>
-              {formatMessage(appointmentMessages.AppointmentCard.appointmentIssue)}
-            </Button>
             {formatMessage(appointmentMessages.AppointmentCard.appointmentCanceledNotation, {
               time: moment(orderProduct.canceledAt).format('MM/DD(dd) HH:mm'),
             })}
           </StyledCanceledText>
         ) : isFinished ? (
-          <>
-            <Button type="link" size="small" className="mr-3" onClick={() => setIssueModalVisible(true)}>
-              {formatMessage(appointmentMessages.AppointmentCard.appointmentIssue)}
-            </Button>
-            <StyledBadge>{formatMessage(appointmentMessages['*'].finished)}</StyledBadge>
-          </>
+          <StyledBadge>{formatMessage(appointmentMessages['*'].finished)}</StyledBadge>
         ) : (
           <>
-            <Button type="link" size="small" className="mr-3" onClick={() => setIssueModalVisible(true)}>
-              {formatMessage(appointmentMessages.AppointmentCard.appointmentIssue)}
-            </Button>
             <Button
-              type="link"
-              size="small"
-              className="mr-3"
+              variant="link"
+              fontSize="14px"
+              marginRight="16px"
+              color="black"
               onClick={() =>
                 window.open(
                   'https://calendar.google.com/calendar/event?action=TEMPLATE&text={{TITLE}}&dates={{STARTED_AT}}/{{ENDED_AT}}&details={{DETAILS}}'
@@ -243,7 +372,7 @@ const AppointmentCard: React.VFC<AppointmentCardProps> = ({ orderProductId, appo
               <StyledLabel>尚未設定連結</StyledLabel>
             ) : (
               <Button
-                type="primary"
+                colorScheme="primary"
                 onClick={async () => {
                   const joinUrl =
                     orderProduct.options?.joinUrl ||
@@ -297,11 +426,16 @@ const AppointmentCard: React.VFC<AppointmentCardProps> = ({ orderProductId, appo
             )}
             <Dropdown
               overlay={
-                <Menu>
+                <CustomMenu>
+                  {appointmentPlan?.rescheduleAmount !== -1 && (
+                    <Menu.Item onClick={() => setRescheduleModalVisible(true)}>
+                      {formatMessage(appointmentMessages.AppointmentCard.rescheduleAppointment)}
+                    </Menu.Item>
+                  )}
                   <Menu.Item onClick={() => setCancelModalVisible(true)}>
                     {formatMessage(appointmentMessages.AppointmentCard.cancelAppointment)}
                   </Menu.Item>
-                </Menu>
+                </CustomMenu>
               }
               trigger={['click']}
             >
@@ -312,16 +446,7 @@ const AppointmentCard: React.VFC<AppointmentCardProps> = ({ orderProductId, appo
       </StyledStatusBar>
 
       {/* issue modal */}
-      <StyledModal
-        width={660}
-        visible={issueModalVisible}
-        footer={isFinished ? null : undefined}
-        okText={formatMessage(appointmentMessages['*'].save)}
-        cancelText={formatMessage(appointmentMessages['*'].cancel)}
-        okButtonProps={{ loading }}
-        onOk={handleSubmit}
-        onCancel={() => setIssueModalVisible(false)}
-      >
+      <Modal width={660} visible={issueModalVisible} footer={null} onCancel={() => setIssueModalVisible(false)}>
         <StyledModalTitle className="mb-3">
           {formatMessage(appointmentMessages.AppointmentCard.appointmentIssue)}
         </StyledModalTitle>
@@ -342,7 +467,7 @@ const AppointmentCard: React.VFC<AppointmentCardProps> = ({ orderProductId, appo
           <div>{formatMessage(appointmentMessages.AppointmentCard.appointmentIssueDescription)}</div>
         </div>
 
-        <Form colon={false} className={isFinished ? 'd-none' : ''}>
+        <Form colon={false} className={isFinished || isCanceled ? 'd-none' : ''}>
           <Form.Item>
             {form.getFieldDecorator('appointmentIssue', {
               initialValue: BraftEditor.createEditorState(orderProduct.appointmentIssue),
@@ -375,18 +500,26 @@ const AppointmentCard: React.VFC<AppointmentCardProps> = ({ orderProductId, appo
         </Form>
 
         {isFinished && <BraftContent>{orderProduct.appointmentIssue}</BraftContent>}
-      </StyledModal>
+        {isCanceled && <BraftContent>{orderProduct.appointmentIssue}</BraftContent>}
+        {!isFinished && !isCanceled && (
+          <ButtonGroup display="flex" marginTop="24px" justifyContent="flex-end">
+            <Button variant="outline" marginRight="8px" onClick={() => setIssueModalVisible(false)}>
+              {formatMessage(appointmentMessages['*'].cancel)}
+            </Button>
+            <Button isLoading={loading} colorScheme="primary" onClick={handleSubmit}>
+              {formatMessage(appointmentMessages['*'].save)}
+            </Button>
+          </ButtonGroup>
+        )}
+      </Modal>
 
       {/* cancel modal */}
-      <StyledModal
+      <Modal
         width={384}
         centered
         visible={cancelModalVisible}
-        okText={formatMessage(appointmentMessages.AppointmentCard.cancelAppointment)}
-        cancelText={formatMessage(appointmentMessages['*'].back)}
-        okButtonProps={{ loading, type: 'danger', disabled: !canceledReason }}
-        onOk={() => handleCancel()}
         onCancel={() => setCancelModalVisible(false)}
+        footer={null}
       >
         <StyledModalTitle className="mb-4">
           {formatMessage(appointmentMessages.AppointmentCard.confirmCancelAlert)}
@@ -394,7 +527,154 @@ const AppointmentCard: React.VFC<AppointmentCardProps> = ({ orderProductId, appo
         <div className="mb-4">{formatMessage(appointmentMessages.AppointmentCard.confirmCancelNotation)}</div>
         <StyledModalSubTitle>{formatMessage(appointmentMessages.AppointmentCard.canceledReason)}</StyledModalSubTitle>
         <Textarea onChange={e => setCanceledReason(e.target.value)} />
-      </StyledModal>
+        <ButtonGroup marginTop="24px" display="flex" justifyContent="flex-end">
+          <Button variant="outline" marginRight="8px" onClick={() => setCancelModalVisible(false)}>
+            {formatMessage(appointmentMessages['*'].back)}
+          </Button>
+          <Button isLoading={loading} disabled={!canceledReason} onClick={handleCancel} colorScheme="danger">
+            {formatMessage(appointmentMessages.AppointmentCard.cancelAppointment)}
+          </Button>
+        </ButtonGroup>
+      </Modal>
+
+      {/* reschedule modal */}
+      <Modal
+        width={384}
+        centered
+        visible={rescheduleModalVisible}
+        footer={null}
+        onCancel={() => setRescheduleModalVisible(false)}
+      >
+        <AppointmentCardCreatorBlock
+          creator={creator}
+          loadingAppointmentPlan={loadingAppointmentPlan}
+          appointmentPlan={appointmentPlan}
+        />
+        {loadingAppointmentPlan ? (
+          <SkeletonText noOfLines={1} spacing="4" w="90px" />
+        ) : appointmentPlan?.periods.length === 0 ? (
+          <StyledInfo>{formatMessage(appointmentMessages.AppointmentCard.notRescheduleAppointmentPeriod)}</StyledInfo>
+        ) : (
+          <>
+            {appointmentPlan?.periods.map(period => (
+              <div key={period.id}>
+                <StyledScheduleTitle>{moment(period.startedAt).format('YYYY-MM-DD(dd)')}</StyledScheduleTitle>
+                <AppointmentItem
+                  id={period.id}
+                  startedAt={period.startedAt}
+                  isEnrolled={period.currentMemberBooked}
+                  isExcluded={period.isBookedReachLimit || period.available}
+                  onClick={() =>
+                    !period.currentMemberBooked && !period.isBookedReachLimit && !period.available
+                      ? setRescheduleAppointment({
+                          rescheduleAppointment: true,
+                          periodStartedAt: period.startedAt,
+                          periodEndedAt: period.endedAt,
+                          appointmentPlanId: appointmentPlanId,
+                        })
+                      : null
+                  }
+                />
+              </div>
+            ))}
+          </>
+        )}
+        <ButtonGroup w="100%" display="flex" marginTop="24px" justifyContent="flex-end">
+          <Button variant="outline" onClick={() => setRescheduleModalVisible(false)}>
+            {formatMessage(appointmentMessages['*'].back)}
+          </Button>
+        </ButtonGroup>
+      </Modal>
+
+      {/* rescheduleConfirm modal  */}
+      <Modal
+        width={384}
+        centered
+        visible={rescheduleAppointment?.rescheduleAppointment}
+        footer={null}
+        onCancel={handleRescheduleCancel}
+      >
+        <AppointmentCardCreatorBlock
+          creator={creator}
+          loadingAppointmentPlan={loadingAppointmentPlan}
+          appointmentPlan={appointmentPlan}
+        />
+        <StyledInfo>{formatMessage(appointmentMessages.AppointmentCard.rescheduleOriginScheduled)}</StyledInfo>
+        <StyledScheduleTitle>
+          {orderProduct.startedAt && orderProduct.endedAt ? (
+            <span>
+              {dateRangeFormatter({
+                startedAt: orderProduct.startedAt,
+                endedAt: orderProduct.endedAt,
+                dateFormat: 'MM/DD(dd)',
+              })}
+            </span>
+          ) : null}
+        </StyledScheduleTitle>
+        <StyledInfo>{formatMessage(appointmentMessages.AppointmentCard.rescheduled)}</StyledInfo>
+        <StyledScheduleTitle>
+          {rescheduleAppointment?.periodStartedAt && rescheduleAppointment?.periodEndedAt ? (
+            <span>
+              {dateRangeFormatter({
+                startedAt: rescheduleAppointment.periodStartedAt,
+                endedAt: rescheduleAppointment.periodEndedAt,
+                dateFormat: 'MM/DD(dd)',
+              })}
+            </span>
+          ) : null}
+        </StyledScheduleTitle>
+        <Button variant="outline" marginRight="8px" width="100%" onClick={handleRescheduleCancel}>
+          {formatMessage(appointmentMessages.AppointmentCard.rescheduleCancel)}
+        </Button>
+        <Button isLoading={loading} onClick={handleReschedule} width="100%" marginTop="16px" colorScheme="primary">
+          {formatMessage(appointmentMessages.AppointmentCard.rescheduleConfirm)}
+        </Button>
+      </Modal>
+
+      <Modal
+        width={384}
+        centered
+        visible={confirm}
+        bodyStyle={{ textAlign: 'center' }}
+        footer={null}
+        onCancel={() => setConfirm(false)}
+      >
+        <AntdIcon
+          className="mb-5"
+          type="check-circle"
+          theme="twoTone"
+          twoToneColor="#4ed1b3"
+          style={{ fontSize: '4rem' }}
+        />
+        <StyledModalTitle className="mb-4">
+          {formatMessage(appointmentMessages.AppointmentCard.rescheduleSuccess)}
+        </StyledModalTitle>
+        <StyledInfo>
+          {formatMessage(appointmentMessages.AppointmentCard.rescheduleSuccessAppointmentPlanTitle, {
+            title: appointmentPlan?.title,
+          })}
+        </StyledInfo>
+        <StyledScheduleTitle>
+          {orderProduct.startedAt && orderProduct.endedAt ? (
+            <span>
+              {dateRangeFormatter({
+                startedAt: orderProduct.startedAt,
+                endedAt: orderProduct.endedAt,
+                dateFormat: 'MM/DD(dd)',
+              })}
+            </span>
+          ) : null}
+        </StyledScheduleTitle>
+        <Button
+          isLoading={loading}
+          marginRight="8px"
+          colorScheme="primary"
+          width="100%"
+          onClick={() => setConfirm(false)}
+        >
+          {formatMessage(appointmentMessages.AppointmentCard.confirm)}
+        </Button>
+      </Modal>
     </StyledCard>
   )
 }
@@ -432,8 +712,59 @@ export const useAppointmentPlanPreview = (appointmentPlanId: string) => {
   }
 }
 
+const useUpdateAppointmentPeriod = (orderProductId: string, options: { rescheduleLog: [] }) => {
+  const [updateAppointmentPeriod] = useMutation<
+    hasura.UpdateAppointmentPeriod,
+    hasura.UpdateAppointmentPeriodVariables
+  >(gql`
+    mutation UpdateAppointmentPeriod(
+      $orderProductId: uuid!
+      $startedAt: timestamptz!
+      $endedAt: timestamptz!
+      $data: jsonb
+    ) {
+      update_order_product(
+        where: { id: { _eq: $orderProductId } }
+        _set: { started_at: $startedAt, ended_at: $endedAt, updated_at: "NOW()", options: $data }
+      ) {
+        affected_rows
+      }
+    }
+  `)
+
+  return (startedAt: Date | null, endedAt: Date | null, originStartedAt: Date | null, currentMemberId: string) =>
+    updateAppointmentPeriod({
+      variables: {
+        orderProductId,
+        startedAt,
+        endedAt,
+        data: {
+          ...options,
+          rescheduleLog: options?.rescheduleLog
+            ? [
+                ...options.rescheduleLog,
+                {
+                  rescheduledAt: new Date(),
+                  rescheduleMemberId: currentMemberId,
+                  originScheduledDatetime: originStartedAt,
+                  targetRescheduleDatetime: startedAt,
+                },
+              ]
+            : [
+                {
+                  rescheduledAt: new Date(),
+                  rescheduleMemberId: currentMemberId,
+                  originScheduledDatetime: originStartedAt,
+                  targetRescheduleDatetime: startedAt,
+                },
+              ],
+        },
+      },
+    })
+}
+
 export const useOrderProduct = (orderProductId: string) => {
-  const { loading, data } = useQuery<hasura.GetOrderProduct, hasura.GetOrderProductVariables>(
+  const { loading, data, refetch } = useQuery<hasura.GetOrderProduct, hasura.GetOrderProductVariables>(
     gql`
       query GetOrderProduct($orderProductId: uuid!) {
         order_product_by_pk(id: $orderProductId) {
@@ -475,6 +806,7 @@ export const useOrderProduct = (orderProductId: string) => {
   return {
     loading,
     orderProduct,
+    refetchOrderProduct: refetch,
   }
 }
 
diff --git a/src/components/appointment/AppointmentCollectionTabs.tsx b/src/components/appointment/AppointmentCollectionTabs.tsx
index 7aa2049fa..d3ea8ccd9 100644
--- a/src/components/appointment/AppointmentCollectionTabs.tsx
+++ b/src/components/appointment/AppointmentCollectionTabs.tsx
@@ -157,7 +157,7 @@ const AppointmentCollectionTabs: React.VFC<{
   )
 }
 
-const AppointmentPlanCollection: React.FC<{
+export const AppointmentPlanCollection: React.FC<{
   appointmentPlans: (AppointmentPlan & { periods: AppointmentPeriod[] })[]
 }> = ({ appointmentPlans }) => {
   const { formatMessage } = useIntl()
diff --git a/src/components/appointment/AppointmentItem.tsx b/src/components/appointment/AppointmentItem.tsx
index f9aa5d3c7..d14c0b908 100644
--- a/src/components/appointment/AppointmentItem.tsx
+++ b/src/components/appointment/AppointmentItem.tsx
@@ -13,7 +13,7 @@ const StyledItemWrapper = styled.div<{ variant?: 'default' | 'excluded' | 'disab
   border: solid 1px ${props => (props.variant === 'disabled' ? 'var(--gray-light)' : 'var(--gray-dark)')};
   color: ${props => (props.variant === 'disabled' ? 'var(--gray-dark)' : 'var(--gray-darker)')};
   border-radius: 4px;
-  cursor: ${props => (props.variant === 'disabled' ? 'not-allowed' : 'pointer')};
+  cursor: ${props => (props.variant !== 'default' ? 'not-allowed' : 'pointer')};
 
   ${props =>
     props.variant === 'excluded'
@@ -50,11 +50,12 @@ const AppointmentItem: React.VFC<{
   startedAt: Date
   isEnrolled?: boolean
   isExcluded?: boolean
-}> = ({ id, startedAt, isEnrolled, isExcluded }) => {
+  onClick: () => void
+}> = ({ startedAt, isEnrolled, isExcluded, onClick }) => {
   const { formatMessage } = useIntl()
 
   return (
-    <StyledItemWrapper variant={isEnrolled ? 'disabled' : isExcluded ? 'excluded' : 'default'}>
+    <StyledItemWrapper variant={isEnrolled ? 'disabled' : isExcluded ? 'excluded' : 'default'} onClick={onClick}>
       <StyledItemTitle>
         {startedAt.getHours().toString().padStart(2, '0')}:{startedAt.getMinutes().toString().padStart(2, '0')}
       </StyledItemTitle>
diff --git a/src/components/appointment/AppointmentPeriodCollection.tsx b/src/components/appointment/AppointmentPeriodCollection.tsx
index c813d9f22..50183c369 100644
--- a/src/components/appointment/AppointmentPeriodCollection.tsx
+++ b/src/components/appointment/AppointmentPeriodCollection.tsx
@@ -21,7 +21,7 @@ const AppointmentPeriodCollection: React.VFC<{
   reservationType?: ReservationType
   reservationAmount?: number
   diffPlanBookedTimes?: String[]
-  onClick?: (period: AppointmentPeriod) => void
+  onClick: (period: AppointmentPeriod) => void
 }> = ({ appointmentPeriods, reservationType, reservationAmount, diffPlanBookedTimes, onClick }) => {
   const { setVisible: setAuthModalVisible } = useContext(AuthModalContext)
   const { isAuthenticated } = useAuth()
@@ -57,6 +57,12 @@ const AppointmentPeriodCollection: React.VFC<{
                   id={period.id}
                   startedAt={period.startedAt}
                   isEnrolled={period.currentMemberBooked}
+                  isExcluded={period.isBookedReachLimit || !period.available}
+                  onClick={() =>
+                    !period.currentMemberBooked && !period.isBookedReachLimit && !period.available
+                      ? onClick(period)
+                      : null
+                  }
                 />
               )
 
diff --git a/src/components/appointment/translation.tsx b/src/components/appointment/translation.tsx
index 0b6699ac3..b84afddd4 100644
--- a/src/components/appointment/translation.tsx
+++ b/src/components/appointment/translation.tsx
@@ -9,6 +9,10 @@ const appointmentMessages = {
     finished: { id: 'appointment.*.finished', defaultMessage: '已結束' },
   }),
   AppointmentCard: defineMessages({
+    periodDurationAtMost: {
+      id: 'appointment.text.periodDurationAtMost',
+      defaultMessage: '諮詢一次 {duration} 分鐘為限',
+    },
     attend: { id: 'appointment.AppointmentCard.attend', defaultMessage: '進入會議' },
     toCalendar: { id: 'appointment.AppointmentCard.toCalendar', defaultMessage: '加入行事曆' },
     appointmentIssue: { id: 'appointment.AppointmentCard.appointmentIssue', defaultMessage: '提問單' },
@@ -23,6 +27,37 @@ const appointmentMessages = {
       defaultMessage: '已於 {time} 取消預約',
     },
     cancelAppointment: { id: 'appointment.AppointmentCard.cancelAppointment', defaultMessage: '取消預約' },
+    rescheduleAppointment: {
+      id: 'appointment.AppointmentCard.rescheduleAppointment',
+      defaultMessage: '更換時段',
+    },
+    notRescheduleAppointmentPeriod: {
+      id: 'appointment.AppointmentCard.notRescheduleAppointmentPeriod',
+      defaultMessage: '無可更換的時段',
+    },
+    rescheduleOriginScheduled: {
+      id: 'appointment.AppointmentCard.rescheduleOriginScheduled',
+      defaultMessage: '原時段',
+    },
+    rescheduled: {
+      id: 'appointment.AppointmentCard.rescheduled',
+      defaultMessage: '更換為：',
+    },
+    rescheduleSuccess: {
+      id: 'appointment.AppointmentCard.rescheduleSuccess',
+      defaultMessage: '更換成功',
+    },
+    rescheduleSuccessAppointmentPlanTitle: {
+      id: 'appointment.AppointmentCard.rescheduleSuccessAppointmentPlanTitle',
+      defaultMessage: '{title} 已更換時段為',
+    },
+    rescheduleAppointmentPlanTitle: {
+      id: 'appointment.AppointmentCard.rescheduleAppointmentPlanTitle',
+      defaultMessage: '更換時段：{title}',
+    },
+    rescheduleConfirm: { id: 'appointment.AppointmentCard.rescheduleConfirm', defaultMessage: '確定更換' },
+    rescheduleCancel: { id: 'appointment.AppointmentCard.rescheduleCancel', defaultMessage: '重選時段' },
+    confirm: { id: 'appointment.AppointmentCard.confirm', defaultMessage: '好' },
     confirmCancelAlert: { id: 'appointment.AppointmentCard.confirmCancelAlert', defaultMessage: '確定要取消預約嗎？' },
     confirmCancelNotation: {
       id: 'appointment.AppointmentCard.confirmCancelNotation',
diff --git a/src/components/common/Footer/index.tsx b/src/components/common/Footer/index.tsx
index de1626487..414b4c7cd 100644
--- a/src/components/common/Footer/index.tsx
+++ b/src/components/common/Footer/index.tsx
@@ -86,11 +86,11 @@ export const NavLinks: React.VFC = () => {
         .filter(nav => nav.block === 'footer' && nav.locale === currentLocale)
         .map(nav =>
           nav.external ? (
-            <StyledNavAnchor key={nav.label} href={nav.href} target="_blank" rel="noopener noreferrer">
+            <StyledNavAnchor key={nav.id} href={nav.href} target="_blank" rel="noopener noreferrer">
               {nav.label}
             </StyledNavAnchor>
           ) : (
-            <StyledNavLink key={nav.label} to={nav.href}>
+            <StyledNavLink key={nav.id} to={nav.href}>
               {nav.label}
             </StyledNavLink>
           ),
@@ -106,7 +106,7 @@ export const SocialLinks: React.VFC = () => {
       {navs
         .filter(nav => nav.block === 'social_media')
         .map(socialLink => (
-          <StyledSocialAnchor key={socialLink.label} href={socialLink.href} target="_blank" rel="noopener noreferrer">
+          <StyledSocialAnchor key={socialLink.id} href={socialLink.href} target="_blank" rel="noopener noreferrer">
             {socialLink.label === 'facebook' && <Icon as={FacebookIcon} />}
             {socialLink.label === 'group' && <Icon as={GroupIcon} />}
             {socialLink.label === 'youtube' && <Icon as={YoutubeIcon} />}
diff --git a/src/components/common/MemberProfileButton.tsx b/src/components/common/MemberProfileButton.tsx
index 14dce07cc..7dad45137 100644
--- a/src/components/common/MemberProfileButton.tsx
+++ b/src/components/common/MemberProfileButton.tsx
@@ -128,7 +128,7 @@ export const CustomNavLinks: React.VFC = () => {
       {navs
         .filter(nav => nav.block === 'header')
         .map(nav => {
-          return <CollapseNavLinks nav={nav} />
+          return <CollapseNavLinks key={nav.id} nav={nav} />
         })}
     </>
   )
diff --git a/src/hasura.d.ts b/src/hasura.d.ts
index a8d019f64..146d10ac1 100644
--- a/src/hasura.d.ts
+++ b/src/hasura.d.ts
@@ -11252,6 +11252,10 @@ export type appointment_plan = {
   phone?: Maybe<Scalars['String']>;
   price: Scalars['numeric'];
   published_at?: Maybe<Scalars['timestamptz']>;
+  /** -1 represents no limit */
+  reschedule_amount: Scalars['Int'];
+  /** hour / day */
+  reschedule_type?: Maybe<Scalars['String']>;
   reservation_amount: Scalars['numeric'];
   /** hour / day */
   reservation_type?: Maybe<Scalars['String']>;
@@ -11418,6 +11422,8 @@ export type appointment_plan_avg_fields = {
   /** minutes */
   duration?: Maybe<Scalars['Float']>;
   price?: Maybe<Scalars['Float']>;
+  /** -1 represents no limit */
+  reschedule_amount?: Maybe<Scalars['Float']>;
   reservation_amount?: Maybe<Scalars['Float']>;
 };
 
@@ -11428,6 +11434,8 @@ export type appointment_plan_avg_order_by = {
   /** minutes */
   duration?: InputMaybe<order_by>;
   price?: InputMaybe<order_by>;
+  /** -1 represents no limit */
+  reschedule_amount?: InputMaybe<order_by>;
   reservation_amount?: InputMaybe<order_by>;
 };
 
@@ -11457,6 +11465,8 @@ export type appointment_plan_bool_exp = {
   phone?: InputMaybe<String_comparison_exp>;
   price?: InputMaybe<numeric_comparison_exp>;
   published_at?: InputMaybe<timestamptz_comparison_exp>;
+  reschedule_amount?: InputMaybe<Int_comparison_exp>;
+  reschedule_type?: InputMaybe<String_comparison_exp>;
   reservation_amount?: InputMaybe<numeric_comparison_exp>;
   reservation_type?: InputMaybe<String_comparison_exp>;
   support_locales?: InputMaybe<jsonb_comparison_exp>;
@@ -11572,6 +11582,8 @@ export type appointment_plan_inc_input = {
   /** minutes */
   duration?: InputMaybe<Scalars['numeric']>;
   price?: InputMaybe<Scalars['numeric']>;
+  /** -1 represents no limit */
+  reschedule_amount?: InputMaybe<Scalars['Int']>;
   reservation_amount?: InputMaybe<Scalars['numeric']>;
 };
 
@@ -11598,6 +11610,10 @@ export type appointment_plan_insert_input = {
   phone?: InputMaybe<Scalars['String']>;
   price?: InputMaybe<Scalars['numeric']>;
   published_at?: InputMaybe<Scalars['timestamptz']>;
+  /** -1 represents no limit */
+  reschedule_amount?: InputMaybe<Scalars['Int']>;
+  /** hour / day */
+  reschedule_type?: InputMaybe<Scalars['String']>;
   reservation_amount?: InputMaybe<Scalars['numeric']>;
   /** hour / day */
   reservation_type?: InputMaybe<Scalars['String']>;
@@ -11624,6 +11640,10 @@ export type appointment_plan_max_fields = {
   phone?: Maybe<Scalars['String']>;
   price?: Maybe<Scalars['numeric']>;
   published_at?: Maybe<Scalars['timestamptz']>;
+  /** -1 represents no limit */
+  reschedule_amount?: Maybe<Scalars['Int']>;
+  /** hour / day */
+  reschedule_type?: Maybe<Scalars['String']>;
   reservation_amount?: Maybe<Scalars['numeric']>;
   /** hour / day */
   reservation_type?: Maybe<Scalars['String']>;
@@ -11648,6 +11668,10 @@ export type appointment_plan_max_order_by = {
   phone?: InputMaybe<order_by>;
   price?: InputMaybe<order_by>;
   published_at?: InputMaybe<order_by>;
+  /** -1 represents no limit */
+  reschedule_amount?: InputMaybe<order_by>;
+  /** hour / day */
+  reschedule_type?: InputMaybe<order_by>;
   reservation_amount?: InputMaybe<order_by>;
   /** hour / day */
   reservation_type?: InputMaybe<order_by>;
@@ -11673,6 +11697,10 @@ export type appointment_plan_min_fields = {
   phone?: Maybe<Scalars['String']>;
   price?: Maybe<Scalars['numeric']>;
   published_at?: Maybe<Scalars['timestamptz']>;
+  /** -1 represents no limit */
+  reschedule_amount?: Maybe<Scalars['Int']>;
+  /** hour / day */
+  reschedule_type?: Maybe<Scalars['String']>;
   reservation_amount?: Maybe<Scalars['numeric']>;
   /** hour / day */
   reservation_type?: Maybe<Scalars['String']>;
@@ -11697,6 +11725,10 @@ export type appointment_plan_min_order_by = {
   phone?: InputMaybe<order_by>;
   price?: InputMaybe<order_by>;
   published_at?: InputMaybe<order_by>;
+  /** -1 represents no limit */
+  reschedule_amount?: InputMaybe<order_by>;
+  /** hour / day */
+  reschedule_type?: InputMaybe<order_by>;
   reservation_amount?: InputMaybe<order_by>;
   /** hour / day */
   reservation_type?: InputMaybe<order_by>;
@@ -11747,6 +11779,8 @@ export type appointment_plan_order_by = {
   phone?: InputMaybe<order_by>;
   price?: InputMaybe<order_by>;
   published_at?: InputMaybe<order_by>;
+  reschedule_amount?: InputMaybe<order_by>;
+  reschedule_type?: InputMaybe<order_by>;
   reservation_amount?: InputMaybe<order_by>;
   reservation_type?: InputMaybe<order_by>;
   support_locales?: InputMaybe<order_by>;
@@ -11793,6 +11827,10 @@ export enum appointment_plan_select_column {
   /** column name */
   published_at = 'published_at',
   /** column name */
+  reschedule_amount = 'reschedule_amount',
+  /** column name */
+  reschedule_type = 'reschedule_type',
+  /** column name */
   reservation_amount = 'reservation_amount',
   /** column name */
   reservation_type = 'reservation_type',
@@ -11834,6 +11872,10 @@ export type appointment_plan_set_input = {
   phone?: InputMaybe<Scalars['String']>;
   price?: InputMaybe<Scalars['numeric']>;
   published_at?: InputMaybe<Scalars['timestamptz']>;
+  /** -1 represents no limit */
+  reschedule_amount?: InputMaybe<Scalars['Int']>;
+  /** hour / day */
+  reschedule_type?: InputMaybe<Scalars['String']>;
   reservation_amount?: InputMaybe<Scalars['numeric']>;
   /** hour / day */
   reservation_type?: InputMaybe<Scalars['String']>;
@@ -11850,6 +11892,8 @@ export type appointment_plan_stddev_fields = {
   /** minutes */
   duration?: Maybe<Scalars['Float']>;
   price?: Maybe<Scalars['Float']>;
+  /** -1 represents no limit */
+  reschedule_amount?: Maybe<Scalars['Float']>;
   reservation_amount?: Maybe<Scalars['Float']>;
 };
 
@@ -11860,6 +11904,8 @@ export type appointment_plan_stddev_order_by = {
   /** minutes */
   duration?: InputMaybe<order_by>;
   price?: InputMaybe<order_by>;
+  /** -1 represents no limit */
+  reschedule_amount?: InputMaybe<order_by>;
   reservation_amount?: InputMaybe<order_by>;
 };
 
@@ -11871,6 +11917,8 @@ export type appointment_plan_stddev_pop_fields = {
   /** minutes */
   duration?: Maybe<Scalars['Float']>;
   price?: Maybe<Scalars['Float']>;
+  /** -1 represents no limit */
+  reschedule_amount?: Maybe<Scalars['Float']>;
   reservation_amount?: Maybe<Scalars['Float']>;
 };
 
@@ -11881,6 +11929,8 @@ export type appointment_plan_stddev_pop_order_by = {
   /** minutes */
   duration?: InputMaybe<order_by>;
   price?: InputMaybe<order_by>;
+  /** -1 represents no limit */
+  reschedule_amount?: InputMaybe<order_by>;
   reservation_amount?: InputMaybe<order_by>;
 };
 
@@ -11892,6 +11942,8 @@ export type appointment_plan_stddev_samp_fields = {
   /** minutes */
   duration?: Maybe<Scalars['Float']>;
   price?: Maybe<Scalars['Float']>;
+  /** -1 represents no limit */
+  reschedule_amount?: Maybe<Scalars['Float']>;
   reservation_amount?: Maybe<Scalars['Float']>;
 };
 
@@ -11902,6 +11954,8 @@ export type appointment_plan_stddev_samp_order_by = {
   /** minutes */
   duration?: InputMaybe<order_by>;
   price?: InputMaybe<order_by>;
+  /** -1 represents no limit */
+  reschedule_amount?: InputMaybe<order_by>;
   reservation_amount?: InputMaybe<order_by>;
 };
 
@@ -11931,6 +11985,10 @@ export type appointment_plan_stream_cursor_value_input = {
   phone?: InputMaybe<Scalars['String']>;
   price?: InputMaybe<Scalars['numeric']>;
   published_at?: InputMaybe<Scalars['timestamptz']>;
+  /** -1 represents no limit */
+  reschedule_amount?: InputMaybe<Scalars['Int']>;
+  /** hour / day */
+  reschedule_type?: InputMaybe<Scalars['String']>;
   reservation_amount?: InputMaybe<Scalars['numeric']>;
   /** hour / day */
   reservation_type?: InputMaybe<Scalars['String']>;
@@ -11947,6 +12005,8 @@ export type appointment_plan_sum_fields = {
   /** minutes */
   duration?: Maybe<Scalars['numeric']>;
   price?: Maybe<Scalars['numeric']>;
+  /** -1 represents no limit */
+  reschedule_amount?: Maybe<Scalars['Int']>;
   reservation_amount?: Maybe<Scalars['numeric']>;
 };
 
@@ -11957,6 +12017,8 @@ export type appointment_plan_sum_order_by = {
   /** minutes */
   duration?: InputMaybe<order_by>;
   price?: InputMaybe<order_by>;
+  /** -1 represents no limit */
+  reschedule_amount?: InputMaybe<order_by>;
   reservation_amount?: InputMaybe<order_by>;
 };
 
@@ -11989,6 +12051,10 @@ export enum appointment_plan_update_column {
   /** column name */
   published_at = 'published_at',
   /** column name */
+  reschedule_amount = 'reschedule_amount',
+  /** column name */
+  reschedule_type = 'reschedule_type',
+  /** column name */
   reservation_amount = 'reservation_amount',
   /** column name */
   reservation_type = 'reservation_type',
@@ -12027,6 +12093,8 @@ export type appointment_plan_var_pop_fields = {
   /** minutes */
   duration?: Maybe<Scalars['Float']>;
   price?: Maybe<Scalars['Float']>;
+  /** -1 represents no limit */
+  reschedule_amount?: Maybe<Scalars['Float']>;
   reservation_amount?: Maybe<Scalars['Float']>;
 };
 
@@ -12037,6 +12105,8 @@ export type appointment_plan_var_pop_order_by = {
   /** minutes */
   duration?: InputMaybe<order_by>;
   price?: InputMaybe<order_by>;
+  /** -1 represents no limit */
+  reschedule_amount?: InputMaybe<order_by>;
   reservation_amount?: InputMaybe<order_by>;
 };
 
@@ -12048,6 +12118,8 @@ export type appointment_plan_var_samp_fields = {
   /** minutes */
   duration?: Maybe<Scalars['Float']>;
   price?: Maybe<Scalars['Float']>;
+  /** -1 represents no limit */
+  reschedule_amount?: Maybe<Scalars['Float']>;
   reservation_amount?: Maybe<Scalars['Float']>;
 };
 
@@ -12058,6 +12130,8 @@ export type appointment_plan_var_samp_order_by = {
   /** minutes */
   duration?: InputMaybe<order_by>;
   price?: InputMaybe<order_by>;
+  /** -1 represents no limit */
+  reschedule_amount?: InputMaybe<order_by>;
   reservation_amount?: InputMaybe<order_by>;
 };
 
@@ -12069,6 +12143,8 @@ export type appointment_plan_variance_fields = {
   /** minutes */
   duration?: Maybe<Scalars['Float']>;
   price?: Maybe<Scalars['Float']>;
+  /** -1 represents no limit */
+  reschedule_amount?: Maybe<Scalars['Float']>;
   reservation_amount?: Maybe<Scalars['Float']>;
 };
 
@@ -12079,6 +12155,8 @@ export type appointment_plan_variance_order_by = {
   /** minutes */
   duration?: InputMaybe<order_by>;
   price?: InputMaybe<order_by>;
+  /** -1 represents no limit */
+  reschedule_amount?: InputMaybe<order_by>;
   reservation_amount?: InputMaybe<order_by>;
 };
 
@@ -30750,15 +30828,19 @@ export type media_variance_order_by = {
 /** columns and relationships of "meet" */
 export type meet = {
   __typename?: 'meet';
+  app_id: Scalars['String'];
   auto_recording: Scalars['Boolean'];
   created_at: Scalars['timestamptz'];
   ended_at: Scalars['timestamptz'];
   exp_at?: Maybe<Scalars['timestamptz']>;
   id: Scalars['uuid'];
-  name: Scalars['String'];
+  member_id: Scalars['String'];
   nbf_at?: Maybe<Scalars['timestamptz']>;
   options: Scalars['jsonb'];
   started_at: Scalars['timestamptz'];
+  /** appointment_plan_id, member_task_id */
+  target: Scalars['uuid'];
+  type: Scalars['String'];
   updated_at: Scalars['timestamptz'];
 };
 
@@ -30800,15 +30882,18 @@ export type meet_bool_exp = {
   _and?: InputMaybe<Array<meet_bool_exp>>;
   _not?: InputMaybe<meet_bool_exp>;
   _or?: InputMaybe<Array<meet_bool_exp>>;
+  app_id?: InputMaybe<String_comparison_exp>;
   auto_recording?: InputMaybe<Boolean_comparison_exp>;
   created_at?: InputMaybe<timestamptz_comparison_exp>;
   ended_at?: InputMaybe<timestamptz_comparison_exp>;
   exp_at?: InputMaybe<timestamptz_comparison_exp>;
   id?: InputMaybe<uuid_comparison_exp>;
-  name?: InputMaybe<String_comparison_exp>;
+  member_id?: InputMaybe<String_comparison_exp>;
   nbf_at?: InputMaybe<timestamptz_comparison_exp>;
   options?: InputMaybe<jsonb_comparison_exp>;
   started_at?: InputMaybe<timestamptz_comparison_exp>;
+  target?: InputMaybe<uuid_comparison_exp>;
+  type?: InputMaybe<String_comparison_exp>;
   updated_at?: InputMaybe<timestamptz_comparison_exp>;
 };
 
@@ -30835,41 +30920,53 @@ export type meet_delete_key_input = {
 
 /** input type for inserting data into table "meet" */
 export type meet_insert_input = {
+  app_id?: InputMaybe<Scalars['String']>;
   auto_recording?: InputMaybe<Scalars['Boolean']>;
   created_at?: InputMaybe<Scalars['timestamptz']>;
   ended_at?: InputMaybe<Scalars['timestamptz']>;
   exp_at?: InputMaybe<Scalars['timestamptz']>;
   id?: InputMaybe<Scalars['uuid']>;
-  name?: InputMaybe<Scalars['String']>;
+  member_id?: InputMaybe<Scalars['String']>;
   nbf_at?: InputMaybe<Scalars['timestamptz']>;
   options?: InputMaybe<Scalars['jsonb']>;
   started_at?: InputMaybe<Scalars['timestamptz']>;
+  /** appointment_plan_id, member_task_id */
+  target?: InputMaybe<Scalars['uuid']>;
+  type?: InputMaybe<Scalars['String']>;
   updated_at?: InputMaybe<Scalars['timestamptz']>;
 };
 
 /** aggregate max on columns */
 export type meet_max_fields = {
   __typename?: 'meet_max_fields';
+  app_id?: Maybe<Scalars['String']>;
   created_at?: Maybe<Scalars['timestamptz']>;
   ended_at?: Maybe<Scalars['timestamptz']>;
   exp_at?: Maybe<Scalars['timestamptz']>;
   id?: Maybe<Scalars['uuid']>;
-  name?: Maybe<Scalars['String']>;
+  member_id?: Maybe<Scalars['String']>;
   nbf_at?: Maybe<Scalars['timestamptz']>;
   started_at?: Maybe<Scalars['timestamptz']>;
+  /** appointment_plan_id, member_task_id */
+  target?: Maybe<Scalars['uuid']>;
+  type?: Maybe<Scalars['String']>;
   updated_at?: Maybe<Scalars['timestamptz']>;
 };
 
 /** aggregate min on columns */
 export type meet_min_fields = {
   __typename?: 'meet_min_fields';
+  app_id?: Maybe<Scalars['String']>;
   created_at?: Maybe<Scalars['timestamptz']>;
   ended_at?: Maybe<Scalars['timestamptz']>;
   exp_at?: Maybe<Scalars['timestamptz']>;
   id?: Maybe<Scalars['uuid']>;
-  name?: Maybe<Scalars['String']>;
+  member_id?: Maybe<Scalars['String']>;
   nbf_at?: Maybe<Scalars['timestamptz']>;
   started_at?: Maybe<Scalars['timestamptz']>;
+  /** appointment_plan_id, member_task_id */
+  target?: Maybe<Scalars['uuid']>;
+  type?: Maybe<Scalars['String']>;
   updated_at?: Maybe<Scalars['timestamptz']>;
 };
 
@@ -30898,15 +30995,18 @@ export type meet_on_conflict = {
 
 /** Ordering options when selecting data from "meet". */
 export type meet_order_by = {
+  app_id?: InputMaybe<order_by>;
   auto_recording?: InputMaybe<order_by>;
   created_at?: InputMaybe<order_by>;
   ended_at?: InputMaybe<order_by>;
   exp_at?: InputMaybe<order_by>;
   id?: InputMaybe<order_by>;
-  name?: InputMaybe<order_by>;
+  member_id?: InputMaybe<order_by>;
   nbf_at?: InputMaybe<order_by>;
   options?: InputMaybe<order_by>;
   started_at?: InputMaybe<order_by>;
+  target?: InputMaybe<order_by>;
+  type?: InputMaybe<order_by>;
   updated_at?: InputMaybe<order_by>;
 };
 
@@ -30922,6 +31022,8 @@ export type meet_prepend_input = {
 
 /** select columns of table "meet" */
 export enum meet_select_column {
+  /** column name */
+  app_id = 'app_id',
   /** column name */
   auto_recording = 'auto_recording',
   /** column name */
@@ -30933,7 +31035,7 @@ export enum meet_select_column {
   /** column name */
   id = 'id',
   /** column name */
-  name = 'name',
+  member_id = 'member_id',
   /** column name */
   nbf_at = 'nbf_at',
   /** column name */
@@ -30941,20 +31043,28 @@ export enum meet_select_column {
   /** column name */
   started_at = 'started_at',
   /** column name */
+  target = 'target',
+  /** column name */
+  type = 'type',
+  /** column name */
   updated_at = 'updated_at'
 }
 
 /** input type for updating data in table "meet" */
 export type meet_set_input = {
+  app_id?: InputMaybe<Scalars['String']>;
   auto_recording?: InputMaybe<Scalars['Boolean']>;
   created_at?: InputMaybe<Scalars['timestamptz']>;
   ended_at?: InputMaybe<Scalars['timestamptz']>;
   exp_at?: InputMaybe<Scalars['timestamptz']>;
   id?: InputMaybe<Scalars['uuid']>;
-  name?: InputMaybe<Scalars['String']>;
+  member_id?: InputMaybe<Scalars['String']>;
   nbf_at?: InputMaybe<Scalars['timestamptz']>;
   options?: InputMaybe<Scalars['jsonb']>;
   started_at?: InputMaybe<Scalars['timestamptz']>;
+  /** appointment_plan_id, member_task_id */
+  target?: InputMaybe<Scalars['uuid']>;
+  type?: InputMaybe<Scalars['String']>;
   updated_at?: InputMaybe<Scalars['timestamptz']>;
 };
 
@@ -30968,20 +31078,26 @@ export type meet_stream_cursor_input = {
 
 /** Initial value of the column from where the streaming should start */
 export type meet_stream_cursor_value_input = {
+  app_id?: InputMaybe<Scalars['String']>;
   auto_recording?: InputMaybe<Scalars['Boolean']>;
   created_at?: InputMaybe<Scalars['timestamptz']>;
   ended_at?: InputMaybe<Scalars['timestamptz']>;
   exp_at?: InputMaybe<Scalars['timestamptz']>;
   id?: InputMaybe<Scalars['uuid']>;
-  name?: InputMaybe<Scalars['String']>;
+  member_id?: InputMaybe<Scalars['String']>;
   nbf_at?: InputMaybe<Scalars['timestamptz']>;
   options?: InputMaybe<Scalars['jsonb']>;
   started_at?: InputMaybe<Scalars['timestamptz']>;
+  /** appointment_plan_id, member_task_id */
+  target?: InputMaybe<Scalars['uuid']>;
+  type?: InputMaybe<Scalars['String']>;
   updated_at?: InputMaybe<Scalars['timestamptz']>;
 };
 
 /** update columns of table "meet" */
 export enum meet_update_column {
+  /** column name */
+  app_id = 'app_id',
   /** column name */
   auto_recording = 'auto_recording',
   /** column name */
@@ -30993,7 +31109,7 @@ export enum meet_update_column {
   /** column name */
   id = 'id',
   /** column name */
-  name = 'name',
+  member_id = 'member_id',
   /** column name */
   nbf_at = 'nbf_at',
   /** column name */
@@ -31001,6 +31117,10 @@ export enum meet_update_column {
   /** column name */
   started_at = 'started_at',
   /** column name */
+  target = 'target',
+  /** column name */
+  type = 'type',
+  /** column name */
   updated_at = 'updated_at'
 }
 
@@ -141240,7 +141360,7 @@ export type GET_APPOINTMENT_PLAN_COLLECTIONVariables = Exact<{
 }>;
 
 
-export type GET_APPOINTMENT_PLAN_COLLECTION = { __typename?: 'query_root', appointment_plan: Array<{ __typename?: 'appointment_plan', id: any, title: string, description?: string | null, duration: any, price: any, support_locales?: any | null, is_private: boolean, reservation_amount: any, reservation_type?: string | null, capacity: number, currency: { __typename?: 'currency', id: string, label: string, unit: string, name: string }, appointment_enrollments: Array<{ __typename?: 'appointment_enrollment', member_id?: string | null, appointment_plan_id?: any | null, started_at?: any | null, canceled_at?: string | null }>, appointment_periods: Array<{ __typename?: 'appointment_period', started_at?: any | null, ended_at?: any | null, booked?: any | null, available?: boolean | null }> }> };
+export type GET_APPOINTMENT_PLAN_COLLECTION = { __typename?: 'query_root', appointment_plan: Array<{ __typename?: 'appointment_plan', id: any, title: string, description?: string | null, duration: any, price: any, support_locales?: any | null, is_private: boolean, reservation_amount: any, reservation_type?: string | null, capacity: number, reschedule_amount: number, reschedule_type?: string | null, currency: { __typename?: 'currency', id: string, label: string, unit: string, name: string }, appointment_enrollments: Array<{ __typename?: 'appointment_enrollment', member_id?: string | null, appointment_plan_id?: any | null, started_at?: any | null, canceled_at?: string | null }>, appointment_periods: Array<{ __typename?: 'appointment_period', started_at?: any | null, ended_at?: any | null, booked?: any | null, available?: boolean | null }> }> };
 
 export type GET_APPOINTMENT_PLANVariables = Exact<{
   appointmentPlanId: Scalars['uuid'];
@@ -141249,7 +141369,7 @@ export type GET_APPOINTMENT_PLANVariables = Exact<{
 }>;
 
 
-export type GET_APPOINTMENT_PLAN = { __typename?: 'query_root', appointment_plan_by_pk?: { __typename?: 'appointment_plan', id: any, title: string, description?: string | null, duration: any, price: any, capacity: number, support_locales?: any | null, currency: { __typename?: 'currency', id: string, label: string, unit: string, name: string }, appointment_enrollments: Array<{ __typename?: 'appointment_enrollment', member_id?: string | null, appointment_plan_id?: any | null, started_at?: any | null, canceled_at?: string | null }>, appointment_periods: Array<{ __typename?: 'appointment_period', started_at?: any | null, ended_at?: any | null, booked?: any | null }>, creator?: { __typename?: 'member_public', id?: string | null, abstract?: string | null, picture_url?: string | null, name?: string | null, username?: string | null } | null } | null };
+export type GET_APPOINTMENT_PLAN = { __typename?: 'query_root', appointment_plan_by_pk?: { __typename?: 'appointment_plan', id: any, title: string, description?: string | null, duration: any, price: any, capacity: number, reschedule_amount: number, reschedule_type?: string | null, support_locales?: any | null, currency: { __typename?: 'currency', id: string, label: string, unit: string, name: string }, appointment_enrollments: Array<{ __typename?: 'appointment_enrollment', member_id?: string | null, appointment_plan_id?: any | null, started_at?: any | null, canceled_at?: string | null }>, appointment_periods: Array<{ __typename?: 'appointment_period', started_at?: any | null, ended_at?: any | null, booked?: any | null }>, creator?: { __typename?: 'member_public', id?: string | null, abstract?: string | null, picture_url?: string | null, name?: string | null, username?: string | null } | null } | null };
 
 export type GET_ENROLLED_APPOINTMENT_PLANVariables = Exact<{
   memberId?: InputMaybe<Scalars['String']>;
diff --git a/src/hooks/appointment.ts b/src/hooks/appointment.ts
index 847aafe4d..56a6b2698 100644
--- a/src/hooks/appointment.ts
+++ b/src/hooks/appointment.ts
@@ -21,6 +21,8 @@ export const useAppointmentPlanCollection = (memberId: string, startedAt: Date,
           reservation_amount
           reservation_type
           capacity
+          reschedule_amount
+          reschedule_type
           currency {
             id
             label
@@ -31,6 +33,7 @@ export const useAppointmentPlanCollection = (memberId: string, startedAt: Date,
             member_id
             appointment_plan_id
             started_at
+            canceled_at
           }
           appointment_periods(where: { started_at: { _gt: $startedAt } }, order_by: { started_at: asc }) {
             started_at
@@ -64,17 +67,21 @@ export const useAppointmentPlanCollection = (memberId: string, startedAt: Date,
             unit: appointmentPlan.currency.unit,
             name: appointmentPlan.currency.name,
           },
+          rescheduleAmount: appointmentPlan.reschedule_amount,
+          rescheduleType: appointmentPlan.reschedule_type as ReservationType,
           periods: appointmentPlan.appointment_periods.map(period => ({
             id: `${period.started_at}`,
             startedAt: new Date(period.started_at),
             endedAt: new Date(period.ended_at),
             booked: period.booked,
             available: !!period.available,
+            isBookedReachLimit: appointmentPlan.capacity !== -1 && period.booked >= appointmentPlan.capacity,
             currentMemberBooked: appointmentPlan.appointment_enrollments.some(
               enrollment =>
                 enrollment.member_id === currentMemberId &&
                 enrollment.appointment_plan_id === appointmentPlan.id &&
-                enrollment.started_at === period.started_at,
+                enrollment.started_at === period.started_at &&
+                !enrollment.canceled_at,
             ),
           })),
           isPrivate: appointmentPlan.is_private,
@@ -101,6 +108,8 @@ export const useAppointmentPlan = (appointmentPlanId: string, currentMemberId?:
           duration
           price
           capacity
+          reschedule_amount
+          reschedule_type
           support_locales
           currency {
             id
@@ -112,6 +121,7 @@ export const useAppointmentPlan = (appointmentPlanId: string, currentMemberId?:
             member_id
             appointment_plan_id
             started_at
+            canceled_at
           }
           appointment_periods(
             where: { available: { _eq: true }, started_at: { _gt: $startedAt } }
@@ -162,6 +172,8 @@ export const useAppointmentPlan = (appointmentPlanId: string, currentMemberId?:
           phone: null,
           supportLocales: data.appointment_plan_by_pk.support_locales,
           capacity: data.appointment_plan_by_pk.capacity,
+          rescheduleAmount: data.appointment_plan_by_pk?.reschedule_amount,
+          rescheduleType: (data.appointment_plan_by_pk.reschedule_type as ReservationType) || null,
           currency: {
             id: data.appointment_plan_by_pk.currency.id,
             label: data.appointment_plan_by_pk.currency.label,
@@ -173,11 +185,15 @@ export const useAppointmentPlan = (appointmentPlanId: string, currentMemberId?:
             startedAt: new Date(period.started_at),
             endedAt: new Date(period.ended_at),
             booked: period.booked,
+            isBookedReachLimit: data.appointment_plan_by_pk?.capacity
+              ? data.appointment_plan_by_pk?.capacity !== -1 && period.booked >= data.appointment_plan_by_pk?.capacity
+              : false,
             currentMemberBooked: data.appointment_plan_by_pk?.appointment_enrollments.some(
               enrollment =>
                 enrollment.member_id === currentMemberId &&
                 enrollment.appointment_plan_id === data.appointment_plan_by_pk?.id &&
-                enrollment.started_at === period.started_at,
+                enrollment.started_at === period.started_at &&
+                !enrollment.canceled_at,
             ),
           })),
           creator: {
diff --git a/src/pages/MemberPage/AppointmentPlanCollectionBlock.tsx b/src/pages/MemberPage/AppointmentPlanCollectionBlock.tsx
index 73353eb73..a4a5010b9 100644
--- a/src/pages/MemberPage/AppointmentPlanCollectionBlock.tsx
+++ b/src/pages/MemberPage/AppointmentPlanCollectionBlock.tsx
@@ -21,7 +21,7 @@ const AppointmentPlanCollectionBlock: React.VFC<{ memberId: string }> = ({ membe
       <List>
         {enrolledAppointments.map(appointmentEnrollment => (
           <div key={appointmentEnrollment.orderProductId} className="mb-4">
-            <AppointmentCard {...appointmentEnrollment} onRefetch={refetchEnrolledAppointments} />
+            <AppointmentCard {...appointmentEnrollment} memberId={memberId} onRefetch={refetchEnrolledAppointments} />
           </div>
         ))}
       </List>
diff --git a/src/translations/locales/en-us.json b/src/translations/locales/en-us.json
index 37ab417d8..8abc6321d 100644
--- a/src/translations/locales/en-us.json
+++ b/src/translations/locales/en-us.json
@@ -31,12 +31,23 @@
   "appointment.AppointmentCard.appointmentIssue": "提問單",
   "appointment.AppointmentCard.appointmentIssueDescription": "建議以 1.  2. 方式點列問題，並適時換行讓老師更容易閱讀，若無問題則填寫「無」",
   "appointment.AppointmentCard.attend": "進入會議",
-  "appointment.AppointmentCard.cancelAppointment": "取消預約",
+  "appointment.AppointmentCard.cancelAppointment": "cancel",
+  "appointment.AppointmentCard.rescheduleAppointment":"reschedule",
   "appointment.AppointmentCard.canceledReason": "取消原因",
   "appointment.AppointmentCard.confirmCancelAlert": "確定要取消預約嗎？",
   "appointment.AppointmentCard.confirmCancelNotation": "取消預約後將會寄送通知給諮詢老師，並重新開放此時段，若需退費請主動聯繫平台。",
   "appointment.AppointmentCard.createAppointmentIssue": "我要提問",
   "appointment.AppointmentCard.toCalendar": "加入行事曆",
+  "appointment.AppointmentCard.periodDurationAtMost":"諮詢一次 {duration} 分鐘為限",
+  "appointment.AppointmentCard.notRescheduleAppointmentPeriod":"無可更換的時段",
+  "appointment.AppointmentCard.rescheduleOriginScheduled":"原時段",
+  "appointment.AppointmentCard.rescheduled":"更換為：",
+  "appointment.AppointmentCard.rescheduleSuccess":"更換成功",
+  "appointment.AppointmentCard.rescheduleSuccessAppointmentPlanTitle":"{title} 已更換時段為",
+  "appointment.AppointmentCard.rescheduleAppointmentPlanTitle":"更換時段：{title}",
+  "appointment.AppointmentCard.rescheduleConfirm":"確定更換",
+  "appointment.AppointmentCard.rescheduleCancel":"重選時段",
+  "appointment.AppointmentCard.confirm":"OK",
   "appointment.AppointmentCollectionTabs.timezone": "時間以 {city} (GMT{timezone}) 顯示",
   "appointment.label.contactInformation": "Contact Information",
   "appointment.label.selectDiscount": "Apply Discount",
diff --git a/src/translations/locales/zh-tw.json b/src/translations/locales/zh-tw.json
index de995a751..173808ac3 100644
--- a/src/translations/locales/zh-tw.json
+++ b/src/translations/locales/zh-tw.json
@@ -32,11 +32,22 @@
   "appointment.AppointmentCard.appointmentIssueDescription": "建議以 1.  2. 方式點列問題，並適時換行讓老師更容易閱讀，若無問題則填寫「無」",
   "appointment.AppointmentCard.attend": "進入會議",
   "appointment.AppointmentCard.cancelAppointment": "取消預約",
+  "appointment.AppointmentCard.rescheduleAppointment":"更換時段",
   "appointment.AppointmentCard.canceledReason": "取消原因",
   "appointment.AppointmentCard.confirmCancelAlert": "確定要取消預約嗎？",
   "appointment.AppointmentCard.confirmCancelNotation": "取消預約後將會寄送通知給諮詢老師，並重新開放此時段，若需退費請主動聯繫平台。",
   "appointment.AppointmentCard.createAppointmentIssue": "我要提問",
   "appointment.AppointmentCard.toCalendar": "加入行事曆",
+  "appointment.AppointmentCard.periodDurationAtMost":"諮詢一次 {duration} 分鐘為限",
+  "appointment.AppointmentCard.notRescheduleAppointmentPeriod":"無可更換的時段",
+  "appointment.AppointmentCard.rescheduleOriginScheduled":"原時段",
+  "appointment.AppointmentCard.rescheduled":"更換為：",
+  "appointment.AppointmentCard.rescheduleSuccess":"更換成功",
+  "appointment.AppointmentCard.rescheduleSuccessAppointmentPlanTitle":"{title} 已更換時段為",
+  "appointment.AppointmentCard.rescheduleAppointmentPlanTitle":"更換時段：{title}",
+  "appointment.AppointmentCard.rescheduleConfirm":"確定更換",
+  "appointment.AppointmentCard.rescheduleCancel":"重選時段",
+  "appointment.AppointmentCard.confirm":"好",
   "appointment.AppointmentCollectionTabs.timezone": "時間以 {city} (GMT{timezone}) 顯示",
   "appointment.label.contactInformation": "聯絡資訊",
   "appointment.label.selectDiscount": "使用折扣",
diff --git a/src/types/appointment.ts b/src/types/appointment.ts
index 52bf254ab..873bc59cb 100644
--- a/src/types/appointment.ts
+++ b/src/types/appointment.ts
@@ -13,6 +13,8 @@ export type AppointmentPlan = {
   isPrivate?: boolean
   reservationAmount?: number
   reservationType?: ReservationType | null
+  rescheduleAmount: number
+  rescheduleType: ReservationType | null
   capacity: number
 }
 
@@ -23,6 +25,7 @@ export type AppointmentPeriod = {
   booked: number
   currentMemberBooked: boolean | undefined
   available?: boolean
+  isBookedReachLimit: boolean
 }
 
 export type AppointmentEnrollment = {