diff --git a/new-lamassu-admin/src/components/buttons/ActionButton.styles.js b/new-lamassu-admin/src/components/buttons/ActionButton.styles.js
index 32582425..f924347a 100644
--- a/new-lamassu-admin/src/components/buttons/ActionButton.styles.js
+++ b/new-lamassu-admin/src/components/buttons/ActionButton.styles.js
@@ -1,11 +1,11 @@
 import typographyStyles from 'src/components/typography/styles'
 import {
   white,
-  fontColor,
   subheaderColor,
   subheaderDarkColor,
   offColor,
   offDarkColor,
+  offDarkerColor,
   secondaryColor,
   secondaryColorDark,
   secondaryColorDarker,
@@ -56,10 +56,9 @@ export default {
     }
   },
   secondary: {
-    extend: colors(offColor, offDarkColor, white),
+    extend: colors(offColor, offDarkColor, offDarkerColor),
     color: white,
     '&:active': {
-      color: fontColor,
       '& $actionButtonIcon': {
         display: 'flex'
       },
diff --git a/new-lamassu-admin/src/pages/Customers/CustomerData.js b/new-lamassu-admin/src/pages/Customers/CustomerData.js
index 5b7ddf41..482aff9f 100644
--- a/new-lamassu-admin/src/pages/Customers/CustomerData.js
+++ b/new-lamassu-admin/src/pages/Customers/CustomerData.js
@@ -26,6 +26,7 @@ import { URI } from 'src/utils/apollo'
 
 import styles from './CustomerData.styles.js'
 import { EditableCard } from './components'
+import { getName } from './helper.js'
 
 const useStyles = makeStyles(styles)
 
@@ -59,7 +60,6 @@ const Photo = ({ show, src }) => {
 const CustomerData = ({
   customer,
   updateCustomer,
-  replacePhoto,
   editCustomer,
   deleteEditedData
 }) => {
@@ -68,6 +68,7 @@ const CustomerData = ({
 
   const idData = R.path(['idCardData'])(customer)
   const rawExpirationDate = R.path(['expirationDate'])(idData)
+  const country = R.path(['country'])(idData)
   const rawDob = R.path(['dateOfBirth'])(idData)
 
   const sanctions = R.path(['sanctions'])(customer)
@@ -83,43 +84,54 @@ const CustomerData = ({
 
   const isEven = elem => elem % 2 === 0
 
-  const getVisibleCards = _.filter(elem => elem.isAvailable)
+  const getVisibleCards = _.filter(
+    elem =>
+      !_.isEmpty(elem.fields) ||
+      (!_.isNil(elem.children) && !_.isNil(elem.state))
+  )
+
+  const getAvailableFields = _.filter(({ value }) => value !== '')
 
   const schemas = {
     idScan: Yup.object().shape({
-      firstName: Yup.string().required(),
-      lastName: Yup.string().required(),
-      documentNumber: Yup.string().required(),
-      dateOfBirth: Yup.string().required(),
-      gender: Yup.string().required(),
-      country: Yup.string().required(),
-      expirationDate: Yup.string().required()
+      name: Yup.string(),
+      idNumber: Yup.string(),
+      birthDate: Yup.string(),
+      age: Yup.string(),
+      gender: Yup.string(),
+      state: Yup.string(),
+      expirationDate: Yup.string()
     }),
     usSsn: Yup.object().shape({
-      usSsn: Yup.string().required()
+      usSsn: Yup.string()
     }),
     idCardPhoto: Yup.object().shape({
-      idCardPhoto: Yup.mixed().required()
+      idCardPhoto: Yup.mixed()
     }),
     frontCamera: Yup.object().shape({
-      frontCamera: Yup.mixed().required()
+      frontCamera: Yup.mixed()
     })
   }
 
   const idScanElements = [
     {
-      name: 'firstName',
-      label: 'First name',
+      name: 'name',
+      label: 'Name',
       component: TextInput
     },
     {
-      name: 'documentNumber',
+      name: 'idNumber',
       label: 'ID number',
       component: TextInput
     },
     {
-      name: 'dateOfBirth',
-      label: 'Birthdate',
+      name: 'birthDate',
+      label: 'Birth Date',
+      component: TextInput
+    },
+    {
+      name: 'age',
+      label: 'Age',
       component: TextInput
     },
     {
@@ -128,19 +140,14 @@ const CustomerData = ({
       component: TextInput
     },
     {
-      name: 'lastName',
-      label: 'Last name',
+      name: 'state',
+      label: country === 'Canada' ? 'Province' : 'State',
       component: TextInput
     },
     {
       name: 'expirationDate',
       label: 'Expiration Date',
       component: TextInput
-    },
-    {
-      name: 'country',
-      label: 'Country',
-      component: TextInput
     }
   ]
 
@@ -158,14 +165,27 @@ const CustomerData = ({
 
   const initialValues = {
     idScan: {
-      firstName: R.path(['firstName'])(idData) ?? '',
-      lastName: R.path(['lastName'])(idData) ?? '',
-      documentNumber: R.path(['documentNumber'])(idData) ?? '',
-      dateOfBirth: (rawDob && format('yyyy-MM-dd', rawDob)) ?? '',
+      name: getName(customer) ?? '',
+      idNumber: R.path(['documentNumber'])(idData) ?? '',
+      birthDate:
+        (rawDob &&
+          format('yyyy-MM-dd')(parse(new Date(), 'yyyyMMdd', rawDob))) ??
+        '',
+      age:
+        (rawDob &&
+          differenceInYears(
+            parse(new Date(), 'yyyyMMdd', rawDob),
+            new Date()
+          )) ??
+        '',
       gender: R.path(['gender'])(idData) ?? '',
-      country: R.path(['country'])(idData) ?? '',
+      state: R.path(['state'])(idData) ?? '',
       expirationDate:
-        (rawExpirationDate && format('yyyy-MM-dd', rawExpirationDate)) ?? ''
+        (rawExpirationDate &&
+          format('yyyy-MM-dd')(
+            parse(new Date(), 'yyyyMMdd', rawExpirationDate)
+          )) ??
+        ''
     },
     usSsn: {
       usSsn: customer.usSsn ?? ''
@@ -180,34 +200,31 @@ const CustomerData = ({
 
   const cards = [
     {
-      fields: idScanElements,
+      fields: getAvailableFields(idScanElements),
       title: 'ID Scan',
-      titleIcon: <CardIcon className={classes.cardIcon} />,
+      titleIcon: <PhoneIcon className={classes.cardIcon} />,
       state: R.path(['idCardDataOverride'])(customer),
       authorize: () =>
         updateCustomer({ idCardDataOverride: OVERRIDE_AUTHORIZED }),
       reject: () => updateCustomer({ idCardDataOverride: OVERRIDE_REJECTED }),
       deleteEditedData: () => deleteEditedData({ idCardData: null }),
-      save: values => editCustomer({ idCardData: _.merge(idData, values) }),
+      save: values => editCustomer({ idCardData: values }),
       validationSchema: schemas.idScan,
-      initialValues: initialValues.idScan,
-      isAvailable: !_.isNil(idData)
+      initialValues: initialValues.idScan
     },
     {
       title: 'SMS Confirmation',
-      titleIcon: <PhoneIcon className={classes.cardIcon} />,
+      titleIcon: <CardIcon className={classes.cardIcon} />,
       authorize: () => {},
       reject: () => {},
-      save: () => {},
-      isAvailable: false
+      save: () => {}
     },
     {
       title: 'Name',
       titleIcon: <EditIcon className={classes.editIcon} />,
       authorize: () => {},
       reject: () => {},
-      save: () => {},
-      isAvailable: false
+      save: () => {}
     },
     {
       title: 'Sanctions check',
@@ -216,22 +233,17 @@ const CustomerData = ({
       authorize: () =>
         updateCustomer({ sanctionsOverride: OVERRIDE_AUTHORIZED }),
       reject: () => updateCustomer({ sanctionsOverride: OVERRIDE_REJECTED }),
-      children: <Info3>{sanctionsDisplay}</Info3>,
-      isAvailable: !_.isNil(sanctions)
+      children: <Info3>{sanctionsDisplay}</Info3>
     },
     {
-      fields: frontCameraElements,
+      fields: getAvailableFields(frontCameraElements),
       title: 'Front facing camera',
       titleIcon: <EditIcon className={classes.editIcon} />,
       state: R.path(['frontCameraOverride'])(customer),
       authorize: () =>
         updateCustomer({ frontCameraOverride: OVERRIDE_AUTHORIZED }),
       reject: () => updateCustomer({ frontCameraOverride: OVERRIDE_REJECTED }),
-      save: values =>
-        replacePhoto({
-          newPhoto: values.frontCamera,
-          photoType: 'frontCamera'
-        }),
+      save: values => editCustomer({ frontCamera: values.frontCamera }),
       deleteEditedData: () => deleteEditedData({ frontCamera: null }),
       children: customer.frontCameraPath ? (
         <Photo
@@ -243,22 +255,17 @@ const CustomerData = ({
       ) : null,
       hasImage: true,
       validationSchema: schemas.frontCamera,
-      initialValues: initialValues.frontCamera,
-      isAvailable: !_.isNil(customer.frontCameraPath)
+      initialValues: initialValues.frontCamera
     },
     {
-      fields: idCardPhotoElements,
+      fields: getAvailableFields(idCardPhotoElements),
       title: 'ID card image',
       titleIcon: <EditIcon className={classes.editIcon} />,
       state: R.path(['idCardPhotoOverride'])(customer),
       authorize: () =>
         updateCustomer({ idCardPhotoOverride: OVERRIDE_AUTHORIZED }),
       reject: () => updateCustomer({ idCardPhotoOverride: OVERRIDE_REJECTED }),
-      save: values =>
-        replacePhoto({
-          newPhoto: values.idCardPhoto,
-          photoType: 'idCardPhoto'
-        }),
+      save: values => editCustomer({ idCardPhoto: values.idCardPhoto }),
       deleteEditedData: () => deleteEditedData({ idCardPhoto: null }),
       children: customer.idCardPhotoPath ? (
         <Photo
@@ -268,11 +275,10 @@ const CustomerData = ({
       ) : null,
       hasImage: true,
       validationSchema: schemas.idCardPhoto,
-      initialValues: initialValues.idCardPhoto,
-      isAvailable: !_.isNil(customer.idCardPhotoPath)
+      initialValues: initialValues.idCardPhoto
     },
     {
-      fields: usSsnElements,
+      fields: getAvailableFields(usSsnElements),
       title: 'US SSN',
       titleIcon: <CardIcon className={classes.cardIcon} />,
       state: R.path(['usSsnOverride'])(customer),
@@ -281,8 +287,7 @@ const CustomerData = ({
       save: values => editCustomer({ usSsn: values.usSsn }),
       deleteEditedData: () => deleteEditedData({ usSsn: null }),
       validationSchema: schemas.usSsn,
-      initialValues: initialValues.usSsn,
-      isAvailable: !_.isNil(customer.usSsn)
+      initialValues: initialValues.usSsn
     }
   ]
 
diff --git a/new-lamassu-admin/src/pages/Customers/components/EditableCard.js b/new-lamassu-admin/src/pages/Customers/components/EditableCard.js
index 3587e5c4..0239db8a 100644
--- a/new-lamassu-admin/src/pages/Customers/components/EditableCard.js
+++ b/new-lamassu-admin/src/pages/Customers/components/EditableCard.js
@@ -23,11 +23,8 @@ import { ReactComponent as EditReversedIcon } from 'src/styling/icons/action/edi
 import { ReactComponent as AuthorizeIcon } from 'src/styling/icons/button/authorize/white.svg'
 import { ReactComponent as BlockIcon } from 'src/styling/icons/button/block/white.svg'
 import { ReactComponent as CancelReversedIcon } from 'src/styling/icons/button/cancel/white.svg'
-import { ReactComponent as CancelIcon } from 'src/styling/icons/button/cancel/zodiac.svg'
 import { ReactComponent as ReplaceReversedIcon } from 'src/styling/icons/button/replace/white.svg'
-import { ReactComponent as ReplaceIcon } from 'src/styling/icons/button/replace/zodiac.svg'
 import { ReactComponent as SaveReversedIcon } from 'src/styling/icons/circle buttons/save/white.svg'
-import { ReactComponent as SaveIcon } from 'src/styling/icons/circle buttons/save/zodiac.svg'
 import { comet } from 'src/styling/variables'
 
 import styles from './EditableCard.styles.js'
@@ -237,7 +234,7 @@ const EditableCard = ({
                           <ActionButton
                             color="secondary"
                             type="button"
-                            Icon={ReplaceIcon}
+                            Icon={ReplaceReversedIcon}
                             InverseIcon={ReplaceReversedIcon}
                             onClick={() => triggerInput()}>
                             {
@@ -266,7 +263,7 @@ const EditableCard = ({
                           <div className={classes.button}>
                             <ActionButton
                               color="secondary"
-                              Icon={SaveIcon}
+                              Icon={SaveReversedIcon}
                               InverseIcon={SaveReversedIcon}
                               type="submit">
                               Save
@@ -276,7 +273,7 @@ const EditableCard = ({
                         <div className={classes.button}>
                           <ActionButton
                             color="secondary"
-                            Icon={CancelIcon}
+                            Icon={CancelReversedIcon}
                             InverseIcon={CancelReversedIcon}
                             type="reset">
                             Cancel
diff --git a/new-lamassu-admin/src/styling/variables.js b/new-lamassu-admin/src/styling/variables.js
index 43ea834b..2cb84f7f 100644
--- a/new-lamassu-admin/src/styling/variables.js
+++ b/new-lamassu-admin/src/styling/variables.js
@@ -7,6 +7,7 @@ const spring = '#48f694'
 // Secondary
 const comet = '#5f668a'
 const comet2 = '#72799d'
+const comet3 = '#525772'
 const spring2 = '#44e188'
 const spring3 = '#ecfbef'
 const spring4 = '#3fd07e'
@@ -47,6 +48,7 @@ const disabledColor2 = concrete
 const fontColor = primaryColor
 const offColor = comet
 const offDarkColor = comet2
+const offDarkerColor = comet3
 const placeholderColor = comet
 const errorColor = tomato
 const errorColorDark = tomato1
@@ -146,6 +148,7 @@ export {
   placeholderColor,
   offColor,
   offDarkColor,
+  offDarkerColor,
   fontColor,
   disabledColor,
   disabledColor2,