From 443d946c38b91ac53d1bbadcd5df88f669242596 Mon Sep 17 00:00:00 2001
From: vijay151096 <94220135+vijay151096@users.noreply.github.com>
Date: Wed, 4 Oct 2023 15:31:31 +0530
Subject: [PATCH] refactor(inji-416):  Refactoring Openid4vci components &
 fixing issues (#889)

* refactor(inji-416): merged esignetvcitem and existingvcitem

* refactor(inji-416): remove the vc tag feature

* refactor(inji-416): wallet binding fixes with vc store key modification

* refactor(inji-416): display the vc's in the share vc screen

* fix(INJI-416): display issuer logo in VC downloaded via eSignet

Co-authored-by: Vijay <94220135+vijay151096@users.noreply.github.com>

* fix(INJI-416): display formatted generatedOn date

Co-authored-by: Vijay <94220135+vijay151096@users.noreply.github.com>

* refactor(INJI-416): add kebab popup operations events in esignetVcItemMachine

Co-authored-by: Vijay <94220135+vijay151096@users.noreply.github.com>

* fix(INJI-416): vc activation in secure keystore existient android device

vc unique identifier UIN is passed to generate keypair while wallet binding

* fix(INJI-416): display VC id in removal log

Co-authored-by: Vijay <94220135+vijay151096@users.noreply.github.com>

* fix(INJI-416): display dateOfBirth in vcDetails in Android

date parsing is causing issue in Android device due to JavaScript VM, thus using date-fns to parse.

* refactor(INJI-416): modify check for isOpenId4VCIEnabled

Co-authored-by: Vijay <94220135+vijay151096@users.noreply.github.com>

* refactor(INJI-416): extract method for face image source

* fix(INJI-416): show wallet binding success toaster appropriately on secure keystore available devices

* refactor(INJI-416): change locale value for download vc description

---------

Co-authored-by: Kiruthika Jeyashankar <81218987+KiruthikaJeyashankar@users.noreply.github.com>
---
 components/KebabPopUp.tsx                     |   1 +
 components/KebabPopUpController.tsx           |  77 +++-
 .../EsignetMosipVCItem/EsignetMosipVCItem.tsx | 113 -----
 .../EsignetMosipVCItemActivationStatus.tsx    | 127 ------
 .../EsignetMosipVCItemContent.tsx             | 309 -------------
 .../ExistingMosipVCItemDetails.tsx            | 413 ------------------
 .../MosipVCItem.tsx}                          |  90 ++--
 .../MosipVCItemActivationStatus.tsx}          |   2 +-
 .../MosipVCItemContent.tsx}                   | 115 +++--
 .../MosipVCItemDetails.tsx}                   | 156 ++++---
 components/VC/VcDetailsContainer.tsx          |  17 +-
 components/VC/VcItemContainer.tsx             |  14 +-
 locales/ara.json                              |   2 +-
 locales/en.json                               |   2 +-
 locales/fil.json                              |   2 +-
 locales/hin.json                              |   2 +-
 locales/kan.json                              |   2 +-
 locales/spa.json                              |   3 +-
 locales/tam.json                              |   2 +-
 .../EsignetMosipVCItemMachine.ts              | 158 +++++--
 .../EsignetMosipVCItemMachine.typegen.ts      |  23 +-
 .../ExistingMosipVCItemMachine.ts             |  54 +--
 .../ExistingMosipVCItemMachine.typegen.ts     |  10 +-
 machines/bleShare/request/requestMachine.ts   |   2 +-
 machines/bleShare/scan/scanMachine.ts         |   5 +-
 machines/issuersMachine.ts                    | 100 ++---
 machines/issuersMachine.typegen.ts            |   1 +
 machines/vc.ts                                |   4 +-
 machines/vc.typegen.ts                        |   2 +
 screens/Home/MyVcs/WalletBinding.tsx          |   2 +
 screens/Home/MyVcsTab.tsx                     |  40 +-
 screens/Home/ViewVcModal.strings.json         |   3 +-
 screens/Home/ViewVcModal.tsx                  |  15 -
 screens/Home/ViewVcModalController.ts         |   5 -
 shared/VCMetadata.ts                          |  16 +-
 shared/openId4VCI/Utils.ts                    |   1 +
 shared/vcjs/verifyCredential.ts               |   2 +-
 types/VC/EsignetMosipVC/vc.ts                 |   5 +
 38 files changed, 554 insertions(+), 1343 deletions(-)
 delete mode 100644 components/VC/EsignetMosipVCItem/EsignetMosipVCItem.tsx
 delete mode 100644 components/VC/EsignetMosipVCItem/EsignetMosipVCItemActivationStatus.tsx
 delete mode 100644 components/VC/EsignetMosipVCItem/EsignetMosipVCItemContent.tsx
 delete mode 100644 components/VC/ExistingMosipVCItem/ExistingMosipVCItemDetails.tsx
 rename components/VC/{ExistingMosipVCItem/ExistingMosipVCItem.tsx => MosipVCItem/MosipVCItem.tsx} (58%)
 rename components/VC/{ExistingMosipVCItem/ExistingMosipVCItemActivationStatus.tsx => MosipVCItem/MosipVCItemActivationStatus.tsx} (98%)
 rename components/VC/{ExistingMosipVCItem/ExistingMosipVCItemContent.tsx => MosipVCItem/MosipVCItemContent.tsx} (75%)
 rename components/VC/{EsignetMosipVCItem/EsignetMosipVCItemDetails.tsx => MosipVCItem/MosipVCItemDetails.tsx} (80%)

diff --git a/components/KebabPopUp.tsx b/components/KebabPopUp.tsx
index 11c1ae01..504acaeb 100644
--- a/components/KebabPopUp.tsx
+++ b/components/KebabPopUp.tsx
@@ -59,6 +59,7 @@ export const KebabPopUp: React.FC<KebabPopUpProps> = props => {
             label={t('offlineAuthenticationDisabled!')}
             content={t('offlineAuthDisabledMessage')}
             service={props.service}
+            vcMetadata={props.vcMetadata}
           />
 
           <HistoryTab
diff --git a/components/KebabPopUpController.tsx b/components/KebabPopUpController.tsx
index 854b28b8..8c5d0b24 100644
--- a/components/KebabPopUpController.tsx
+++ b/components/KebabPopUpController.tsx
@@ -15,14 +15,26 @@ import {
   selectShowWalletBindingError,
   selectWalletBindingError,
 } from '../machines/VCItemMachine/ExistingMosipVCItem/ExistingMosipVCItemMachine';
+
+import {
+  EsignetMosipVCItemEvents,
+  EsignetMosipVCItemMachine,
+  selectEmptyWalletBindingId as esignetSelectEmptyWalletBindingId,
+  selectIsPinned as esignetSelectIsPinned,
+  selectKebabPopUp as esignetSelectKebabPopUp,
+  selectKebabPopUpAcceptingBindingOtp as esignetSelectKebabPopUpAcceptingBindingOtp,
+  selectKebabPopUpBindingWarning as esignetSelectKebabPopUpBindingWarning,
+  selectKebabPopUpWalletBindingInProgress as esignetSelectKebabPopUpWalletBindingInProgress,
+  selectOtpError as esignetSelectOtpError,
+  selectRemoveWalletWarning as esignetSelectRemoveWalletWarning,
+  selectShowActivities as esignetSelectShowActivities,
+  selectShowWalletBindingError as esignetSelectShowWalletBindingError,
+  selectWalletBindingError as esignetSelectWalletBindingError,
+} from '../machines/VCItemMachine/EsignetMosipVCItem/EsignetMosipVCItemMachine';
 import {selectActivities} from '../machines/activityLog';
 import {GlobalContext} from '../shared/GlobalContext';
 import {useContext} from 'react';
 import {VCMetadata} from '../shared/VCMetadata';
-import {
-  EsignetMosipVCItemEvents,
-  EsignetMosipVCItemMachine,
-} from '../machines/VCItemMachine/EsignetMosipVCItem/EsignetMosipVCItemMachine';
 
 export function useKebabPopUp(props) {
   const service = props.service as
@@ -44,26 +56,55 @@ export function useKebabPopUp(props) {
   const SHOW_ACTIVITY = () => service.send(vcEvents.SHOW_ACTIVITY());
   const INPUT_OTP = (otp: string) => service.send(vcEvents.INPUT_OTP(otp));
   const RESEND_OTP = () => service.send(vcEvents.RESEND_OTP());
-  const isPinned = useSelector(service, selectIsPinned);
-  const isBindingWarning = useSelector(service, selectKebabPopUpBindingWarning);
-  const isRemoveWalletWarning = useSelector(service, selectRemoveWalletWarning);
-  const isAcceptingOtpInput = useSelector(
+  let isPinned = useSelector(service, selectIsPinned);
+  let isBindingWarning = useSelector(service, selectKebabPopUpBindingWarning);
+  let isRemoveWalletWarning = useSelector(service, selectRemoveWalletWarning);
+  let isAcceptingOtpInput = useSelector(
     service,
     selectKebabPopUpAcceptingBindingOtp,
   );
-  const isWalletBindingError = useSelector(
-    service,
-    selectShowWalletBindingError,
-  );
-  const otpError = useSelector(service, selectOtpError);
-  const walletBindingError = useSelector(service, selectWalletBindingError);
-  const WalletBindingInProgress = useSelector(
+  let isWalletBindingError = useSelector(service, selectShowWalletBindingError);
+  let otpError = useSelector(service, selectOtpError);
+  let walletBindingError = useSelector(service, selectWalletBindingError);
+  let WalletBindingInProgress = useSelector(
     service,
     selectKebabPopUpWalletBindingInProgress,
   );
-  const emptyWalletBindingId = useSelector(service, selectEmptyWalletBindingId);
-  const isKebabPopUp = useSelector(service, selectKebabPopUp);
-  const isShowActivities = useSelector(service, selectShowActivities);
+  let emptyWalletBindingId = useSelector(service, selectEmptyWalletBindingId);
+  let isKebabPopUp = useSelector(service, selectKebabPopUp);
+  let isShowActivities = useSelector(service, selectShowActivities);
+
+  if (props.vcMetadata.isFromOpenId4VCI()) {
+    isPinned = useSelector(service, esignetSelectIsPinned);
+    isBindingWarning = useSelector(
+      service,
+      esignetSelectKebabPopUpBindingWarning,
+    );
+    isRemoveWalletWarning = useSelector(
+      service,
+      esignetSelectRemoveWalletWarning,
+    );
+    isAcceptingOtpInput = useSelector(
+      service,
+      esignetSelectKebabPopUpAcceptingBindingOtp,
+    );
+    isWalletBindingError = useSelector(
+      service,
+      esignetSelectShowWalletBindingError,
+    );
+    otpError = useSelector(service, esignetSelectOtpError);
+    walletBindingError = useSelector(service, esignetSelectWalletBindingError);
+    WalletBindingInProgress = useSelector(
+      service,
+      esignetSelectKebabPopUpWalletBindingInProgress,
+    );
+    emptyWalletBindingId = useSelector(
+      service,
+      esignetSelectEmptyWalletBindingId,
+    );
+    isKebabPopUp = useSelector(service, esignetSelectKebabPopUp);
+    isShowActivities = useSelector(service, esignetSelectShowActivities);
+  }
   const {appService} = useContext(GlobalContext);
   const activityLogService = appService.children.get('activityLog');
 
diff --git a/components/VC/EsignetMosipVCItem/EsignetMosipVCItem.tsx b/components/VC/EsignetMosipVCItem/EsignetMosipVCItem.tsx
deleted file mode 100644
index 7cbe09b6..00000000
--- a/components/VC/EsignetMosipVCItem/EsignetMosipVCItem.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import React, {useContext, useEffect, useRef} from 'react';
-import {useInterpret, useSelector} from '@xstate/react';
-import {Pressable, View} from 'react-native';
-import {ActorRefFrom} from 'xstate';
-import {GlobalContext} from '../../../shared/GlobalContext';
-import {Theme} from '../../ui/styleUtils';
-import {Row} from '../../ui';
-import {KebabPopUp} from '../../KebabPopUp';
-import {VCMetadata} from '../../../shared/VCMetadata';
-import {EsignetMosipVCItemContent} from './EsignetMosipVCItemContent';
-import {EsignetMosipVCActivationStatus} from './EsignetMosipVCItemActivationStatus';
-import {
-  createEsignetMosipVCItemMachine,
-  EsignetMosipVCItemEvents,
-  EsignetMosipVCItemMachine,
-  selectContext,
-  selectGeneratedOn,
-  selectKebabPopUp,
-  selectVerifiableCredentials,
-} from '../../../machines/VCItemMachine/EsignetMosipVCItem/EsignetMosipVCItemMachine';
-
-export const EsignetMosipVCItem: React.FC<EsignetMosipVCItemProps> = props => {
-  const {appService} = useContext(GlobalContext);
-  const machine = useRef(
-    createEsignetMosipVCItemMachine(
-      appService.getSnapshot().context.serviceRefs,
-      props.vcMetadata,
-    ),
-  );
-
-  const service = useInterpret(machine.current, {devTools: __DEV__});
-
-  useEffect(() => {
-    service.send(EsignetMosipVCItemEvents.UPDATE_VC_METADATA(props.vcMetadata));
-  }, [props.vcMetadata]);
-
-  const context = useSelector(service, selectContext);
-
-  const isKebabPopUp = useSelector(service, selectKebabPopUp);
-  const DISMISS = () => service.send(EsignetMosipVCItemEvents.DISMISS());
-  const KEBAB_POPUP = () =>
-    service.send(EsignetMosipVCItemEvents.KEBAB_POPUP());
-
-  const credentials = useSelector(service, selectVerifiableCredentials);
-  const generatedOn = useSelector(service, selectGeneratedOn);
-
-  return (
-    <React.Fragment>
-      <Pressable
-        accessible={false}
-        onPress={() => props.onPress(service)}
-        disabled={!credentials}
-        style={
-          props.selected
-            ? Theme.Styles.selectedBindedVc
-            : Theme.Styles.closeCardBgContainer
-        }>
-        <EsignetMosipVCItemContent
-          context={context}
-          credential={credentials}
-          generatedOn={generatedOn}
-          selectable={props.selectable}
-          selected={props.selected}
-          service={service}
-          iconName={props.iconName}
-          iconType={props.iconType}
-          onPress={() => props.onPress(service)}
-        />
-        <View style={Theme.Styles.horizontalLine} />
-        {props.isSharingVc ? null : (
-          <Row style={Theme.Styles.activationTab}>
-            {props.activeTab !== 'receivedVcsTab' &&
-              props.activeTab != 'sharingVcScreen' && (
-                <EsignetMosipVCActivationStatus
-                  verifiableCredential={credentials}
-                  showOnlyBindedVc={props.showOnlyBindedVc}
-                  emptyWalletBindingId
-                />
-              )}
-            <View style={Theme.Styles.verticalLine} />
-            <Row style={Theme.Styles.kebabIcon}>
-              <Pressable onPress={KEBAB_POPUP} accessible={false}>
-                <KebabPopUp
-                  testID="ellipsis"
-                  vcMetadata={props.vcMetadata}
-                  iconName="dots-three-horizontal"
-                  iconType="entypo"
-                  isVisible={isKebabPopUp}
-                  onDismiss={DISMISS}
-                  service={service}
-                />
-              </Pressable>
-            </Row>
-          </Row>
-        )}
-      </Pressable>
-    </React.Fragment>
-  );
-};
-
-export interface EsignetMosipVCItemProps {
-  vcMetadata: VCMetadata;
-  margin?: string;
-  selectable?: boolean;
-  selected?: boolean;
-  showOnlyBindedVc?: boolean;
-  onPress?: (vcRef?: ActorRefFrom<typeof EsignetMosipVCItemMachine>) => void;
-  onShow?: (vcRef?: ActorRefFrom<typeof EsignetMosipVCItemMachine>) => void;
-  activeTab?: string;
-  iconName?: string;
-  iconType?: string;
-  isSharingVc?: boolean;
-}
diff --git a/components/VC/EsignetMosipVCItem/EsignetMosipVCItemActivationStatus.tsx b/components/VC/EsignetMosipVCItem/EsignetMosipVCItemActivationStatus.tsx
deleted file mode 100644
index 9d79cf59..00000000
--- a/components/VC/EsignetMosipVCItem/EsignetMosipVCItemActivationStatus.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import React from 'react';
-import {useTranslation} from 'react-i18next';
-import {Dimensions} from 'react-native';
-import {Icon} from 'react-native-elements';
-import {Theme} from '../../ui/styleUtils';
-import {Row, Text} from '../../ui';
-import {VerifiableCredential} from '../../../types/VC/EsignetMosipVC/vc';
-
-const WalletUnverifiedIcon: React.FC = () => {
-  return (
-    <Icon
-      name="shield-alert"
-      color={Theme.Colors.Icon}
-      size={Theme.ICON_MID_SIZE}
-      type="material-community"
-      containerStyle={{marginStart: 10, bottom: 1, marginLeft: 10}}
-    />
-  );
-};
-
-const WalletVerifiedIcon: React.FC = () => {
-  return (
-    <Icon
-      name="verified-user"
-      color={Theme.Colors.VerifiedIcon}
-      size={Theme.ICON_MID_SIZE}
-      containerStyle={{marginStart: 10, bottom: 1, marginLeft: 10}}
-    />
-  );
-};
-
-const WalletUnverifiedActivationDetails: React.FC<
-  WalletUnVerifiedDetailsProps
-> = props => {
-  const {t} = useTranslation('VcDetails');
-  return (
-    <Row
-      width={Dimensions.get('screen').width * 0.8}
-      align="space-between"
-      crossAlign="center">
-      <Row
-        crossAlign="center"
-        style={{
-          flex: 1,
-        }}>
-        {props.verifiableCredential && <WalletUnverifiedIcon />}
-        <Text
-          color={Theme.Colors.Details}
-          testID="activationPending"
-          weight="regular"
-          margin="8 10 10 5"
-          style={
-            !props.verifiableCredential
-              ? Theme.Styles.loadingTitle
-              : Theme.Styles.statusLabel
-          }
-          children={t('offlineAuthDisabledHeader')}></Text>
-      </Row>
-    </Row>
-  );
-};
-
-const WalletVerifiedActivationDetails: React.FC<
-  WalletVerifiedDetailsProps
-> = props => {
-  const {t} = useTranslation('WalletBinding');
-  return (
-    <Row
-      width={Dimensions.get('screen').width * 0.8}
-      align="space-between"
-      crossAlign="center">
-      <Row
-        crossAlign="center"
-        style={{
-          flex: 1,
-        }}>
-        <WalletVerifiedIcon />
-        <Text
-          color={Theme.Colors.statusLabel}
-          testID="activated"
-          weight="regular"
-          size="smaller"
-          margin="8 10 10 5"
-          style={
-            !props.verifiableCredential
-              ? Theme.Styles.loadingTitle
-              : Theme.Styles.statusLabel
-          }
-          children={t('profileAuthenticated')}></Text>
-      </Row>
-    </Row>
-  );
-};
-
-export const EsignetMosipVCActivationStatus: React.FC<
-  EsignetMosipVCActivationStatusProps
-> = props => {
-  return (
-    <Row margin="0 0 0 -6">
-      {props.emptyWalletBindingId ? (
-        <WalletUnverifiedActivationDetails
-          verifiableCredential={props.verifiableCredential}
-        />
-      ) : (
-        <WalletVerifiedActivationDetails
-          verifiableCredential={props.verifiableCredential}
-          showOnlyBindedVc={props.showOnlyBindedVc}
-        />
-      )}
-    </Row>
-  );
-};
-
-export interface EsignetMosipVCActivationStatusProps {
-  showOnlyBindedVc: boolean;
-  verifiableCredential: VerifiableCredential;
-  emptyWalletBindingId: boolean;
-}
-
-interface WalletVerifiedDetailsProps {
-  showOnlyBindedVc: boolean;
-  verifiableCredential: VerifiableCredential;
-}
-
-interface WalletUnVerifiedDetailsProps {
-  verifiableCredential: VerifiableCredential;
-}
diff --git a/components/VC/EsignetMosipVCItem/EsignetMosipVCItemContent.tsx b/components/VC/EsignetMosipVCItem/EsignetMosipVCItemContent.tsx
deleted file mode 100644
index 1761cb40..00000000
--- a/components/VC/EsignetMosipVCItem/EsignetMosipVCItemContent.tsx
+++ /dev/null
@@ -1,309 +0,0 @@
-import React from 'react';
-import {useTranslation} from 'react-i18next';
-import {Image, ImageBackground} from 'react-native';
-import {CheckBox, Icon} from 'react-native-elements';
-import {Column, Row, Text} from '../../ui';
-import {Theme} from '../../ui/styleUtils';
-import VerifiedIcon from '../../VerifiedIcon';
-import {getLocalizedField} from '../../../i18n';
-import {
-  Credential,
-  VerifiableCredential,
-} from '../../../types/VC/EsignetMosipVC/vc';
-import testIDProps from '../../../shared/commonUtil';
-
-const getDetails = (arg1: string, arg2: string, credential: Credential) => {
-  if (arg1 === 'Status') {
-    return (
-      <Column>
-        <Text
-          testID="status"
-          weight="bold"
-          size="smaller"
-          color={
-            !credential
-              ? Theme.Colors.LoadingDetailsLabel
-              : Theme.Colors.DetailsLabel
-          }>
-          {arg1}
-        </Text>
-        <Row
-          style={{
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            marginLeft: 9,
-          }}>
-          {!credential ? null : <VerifiedIcon />}
-          <Text
-            testID="valid"
-            numLines={1}
-            color={Theme.Colors.Details}
-            weight="semibold"
-            size="smaller"
-            style={
-              !credential
-                ? Theme.Styles.loadingTitle
-                : Theme.Styles.detailsValue
-            }>
-            {!credential ? '' : arg2}
-          </Text>
-        </Row>
-      </Column>
-    );
-  } else {
-    return (
-      <Column>
-        <Text
-          color={
-            !credential
-              ? Theme.Colors.LoadingDetailsLabel
-              : Theme.Colors.DetailsLabel
-          }
-          size="smaller"
-          weight="regular"
-          style={Theme.Styles.vcItemLabelHeader}>
-          {arg1}
-        </Text>
-        <Text
-          numLines={4}
-          color={Theme.Colors.Details}
-          weight="bold"
-          size="smaller"
-          style={
-            !credential ? Theme.Styles.loadingTitle : Theme.Styles.subtitle
-          }>
-          {!credential ? '' : arg2}
-        </Text>
-      </Column>
-    );
-  }
-};
-
-function getIdNumber(id: string) {
-  if (id) {
-    return '*'.repeat(id.length - 4) + id.slice(-4);
-  }
-}
-
-export const EsignetMosipVCItemContent: React.FC<
-  EsignetMosipVCItemContentProps
-> = props => {
-  //Assigning the UIN and VID from the VC details to display the idtype label
-  const uin = props.credential?.credential?.credentialSubject.UIN;
-  const vid = props.credential?.credential?.credentialSubject.VID;
-  const fullName = !props.credential?.credential
-    ? ''
-    : getLocalizedField(
-        props.credential?.credential.credentialSubject.fullName,
-      );
-  const {t} = useTranslation('VcDetails');
-  const isvalid = !props.credential?.credential ? '' : t('valid');
-  const selectableOrCheck = props.selectable ? (
-    <CheckBox
-      checked={props.selected}
-      checkedIcon={<Icon name="radio-button-checked" />}
-      uncheckedIcon={<Icon name="radio-button-unchecked" />}
-      onPress={() => props.onPress()}
-    />
-  ) : null;
-
-  return (
-    <ImageBackground
-      source={!props.credential?.credential ? null : Theme.CloseCard}
-      resizeMode="stretch"
-      style={
-        !props.credential?.credential
-          ? Theme.Styles.vertloadingContainer
-          : Theme.Styles.backgroundImageContainer
-      }>
-      <Column>
-        <Row align="space-between">
-          <Row margin="5 0 0 5">
-            <ImageBackground
-              imageStyle={Theme.Styles.faceImage}
-              source={
-                !props.credential?.credential
-                  ? Theme.ProfileIcon
-                  : {uri: props.credential.credential.credentialSubject.face}
-              }
-              style={Theme.Styles.closeCardImage}>
-              {props.iconName && (
-                <Image
-                  source={Theme.PinIcon}
-                  style={Theme.Styles.pinIcon}
-                  {...testIDProps('pinIcon')}
-                />
-              )}
-            </ImageBackground>
-
-            <Column margin="0 0 10 20" height={96} align="space-between">
-              <Column>
-                <Text
-                  testID="fullNameTitle"
-                  weight="regular"
-                  size="smaller"
-                  color={
-                    !props.credential?.credential
-                      ? Theme.Colors.LoadingDetailsLabel
-                      : Theme.Colors.DetailsLabel
-                  }>
-                  {t('fullName')}
-                </Text>
-                <Text
-                  testID="fullNameValue"
-                  weight="semibold"
-                  style={
-                    !props.credential?.credential
-                      ? Theme.Styles.loadingTitle
-                      : Theme.Styles.detailsValue
-                  }>
-                  {fullName}
-                </Text>
-              </Column>
-
-              <Column>
-                <Text
-                  testID="idType"
-                  color={
-                    !props.credential?.credential
-                      ? Theme.Colors.LoadingDetailsLabel
-                      : Theme.Colors.DetailsLabel
-                  }
-                  weight="regular"
-                  size="smaller"
-                  align="left">
-                  {t('idType')}
-                </Text>
-                <Text
-                  testID="nationalCard"
-                  weight="semibold"
-                  color={Theme.Colors.Details}
-                  style={
-                    !props.credential?.credential
-                      ? Theme.Styles.loadingTitle
-                      : Theme.Styles.detailsValue
-                  }>
-                  {t('nationalCard')}
-                </Text>
-              </Column>
-            </Column>
-          </Row>
-
-          <Column>
-            {props.credential?.credential ? selectableOrCheck : null}
-          </Column>
-        </Row>
-
-        <Row
-          align="space-between"
-          margin="9 10 0 7"
-          style={
-            !props.credential?.credential ? Theme.Styles.loadingContainer : null
-          }>
-          <Column>
-            {uin ? (
-              <Column margin="0 0 9 0">
-                <Text
-                  testID="uin"
-                  weight="regular"
-                  size="smaller"
-                  color={Theme.Colors.DetailsLabel}>
-                  {t('uin')}
-                </Text>
-                <Text
-                  testID="uinNumber"
-                  weight="semibold"
-                  size="extraSmall"
-                  color={Theme.Colors.statusLabel}>
-                  {getIdNumber(uin)}
-                </Text>
-              </Column>
-            ) : null}
-
-            {vid ? (
-              <Column margin="0 0 9 0">
-                <Text
-                  testID="vid"
-                  weight="regular"
-                  size="smaller"
-                  color={Theme.Colors.DetailsLabel}>
-                  {t('vid')}
-                </Text>
-                <Text
-                  testID="vidNumber"
-                  weight="semibold"
-                  size="extraSmall"
-                  color={Theme.Colors.Details}>
-                  {getIdNumber(vid)}
-                </Text>
-              </Column>
-            ) : null}
-            {!props.credential?.credential
-              ? getDetails(t('id'), uin | vid, props.credential?.credential)
-              : null}
-          </Column>
-        </Row>
-
-        <Row
-          style={{flexDirection: 'row', flex: 1}}
-          align="space-between"
-          margin="0 8 5 8">
-          <Column margin="9 0 0 0">
-            <Text
-              testID="generatedOnTitle"
-              weight="regular"
-              size="smaller"
-              color={
-                !props.credential?.credential
-                  ? Theme.Colors.LoadingDetailsLabel
-                  : Theme.Colors.DetailsLabel
-              }>
-              {t('generatedOn')}
-            </Text>
-            <Text
-              testID="generatedOnValue"
-              weight="semibold"
-              style={
-                !props.credential?.credential
-                  ? Theme.Styles.loadingTitle
-                  : Theme.Styles.subtitle
-              }>
-              {props.generatedOn}
-            </Text>
-          </Column>
-          <Column margin="0 35 0 0">
-            {props.credential?.credential
-              ? getDetails(t('status'), isvalid, props.credential?.credential)
-              : null}
-          </Column>
-          <Column
-            testID="logo"
-            style={{
-              display: props.credential?.credential ? 'flex' : 'none',
-              justifyContent: 'center',
-              alignItems: 'center',
-            }}>
-            <Image
-              src={props.credential?.issuerLogo}
-              style={Theme.Styles.issuerLogo}
-              resizeMethod="scale"
-              resizeMode="contain"
-            />
-          </Column>
-        </Row>
-      </Column>
-    </ImageBackground>
-  );
-};
-
-interface EsignetMosipVCItemContentProps {
-  context: any;
-  credential: VerifiableCredential;
-  generatedOn: string;
-  selectable: boolean;
-  selected: boolean;
-  iconName?: string;
-  iconType?: string;
-  service: any;
-  onPress?: () => void;
-}
diff --git a/components/VC/ExistingMosipVCItem/ExistingMosipVCItemDetails.tsx b/components/VC/ExistingMosipVCItem/ExistingMosipVCItemDetails.tsx
deleted file mode 100644
index 5e3a2971..00000000
--- a/components/VC/ExistingMosipVCItem/ExistingMosipVCItemDetails.tsx
+++ /dev/null
@@ -1,413 +0,0 @@
-import {formatDistanceToNow} from 'date-fns';
-import React from 'react';
-import * as DateFnsLocale from 'date-fns/locale';
-import {useTranslation} from 'react-i18next';
-import {Image, ImageBackground, View} from 'react-native';
-import {Icon} from 'react-native-elements';
-import {VC, CredentialSubject} from '../../../types/VC/ExistingMosipVC/vc';
-import {Button, Column, Row, Text} from '../../ui';
-import {Theme} from '../../ui/styleUtils';
-import {TextItem} from '../../ui/TextItem';
-import {VcItemTags} from '../common/VcItemTags';
-import VerifiedIcon from '../../VerifiedIcon';
-import {getLocalizedField} from '../../../i18n';
-import {CREDENTIAL_REGISTRY_EDIT} from 'react-native-dotenv';
-import {QrCodeOverlay} from '../../QrCodeOverlay';
-
-export const ExistingMosipVCItemDetails: React.FC<
-  ExistingMosipVCItemDetailsProps
-> = props => {
-  const {t, i18n} = useTranslation('VcDetails');
-
-  //Assigning the UIN and VID from the VC details to display the idtype label
-  const uin = props.vc?.verifiableCredential.credentialSubject.UIN;
-  const vid = props.vc?.verifiableCredential.credentialSubject.VID;
-
-  if (props.vc?.verifiableCredential == null) {
-    return <Text align="center">Loading details...</Text>;
-  }
-
-  return (
-    <Column margin="10">
-      <ImageBackground
-        imageStyle={{width: '100%'}}
-        resizeMethod="scale"
-        resizeMode="stretch"
-        style={Theme.Styles.openCardBgContainer}
-        source={Theme.OpenCard}>
-        <Row align="space-between" padding="10" margin="0 10 0 10">
-          <Column align="space-evenly" crossAlign="center">
-            <Image
-              source={
-                props.vc?.credential.biometrics?.face
-                  ? {uri: props.vc?.credential.biometrics.face}
-                  : Theme.ProfileIcon
-              }
-              style={Theme.Styles.openCardImage}
-            />
-
-            <QrCodeOverlay qrCodeDetailes={String(props.vc.credential)} />
-            <Column margin="20 0 0 0">
-              <Image
-                source={Theme.MosipLogo}
-                style={Theme.Styles.vcDetailsLogo}
-              />
-            </Column>
-          </Column>
-          <Column align="space-evenly" padding="10">
-            <Column>
-              <Text
-                testID="fullNameTitle"
-                weight="regular"
-                size="smaller"
-                color={Theme.Colors.DetailsLabel}>
-                {t('fullName')}
-              </Text>
-              <Text
-                testID="fullNameValue"
-                weight="semibold"
-                size="smaller"
-                color={Theme.Colors.Details}>
-                {getLocalizedField(
-                  props.vc?.verifiableCredential.credentialSubject.fullName,
-                )}
-              </Text>
-            </Column>
-            <Row>
-              <Column>
-                <Column margin="20 0 0 0">
-                  <Text
-                    testID="gender"
-                    weight="regular"
-                    size="smaller"
-                    color={Theme.Colors.DetailsLabel}>
-                    {t('gender')}
-                  </Text>
-                  <Text
-                    testID="genderValue"
-                    weight="semibold"
-                    size="smaller"
-                    color={Theme.Colors.Details}>
-                    {getLocalizedField(
-                      props.vc?.verifiableCredential.credentialSubject.gender,
-                    )}
-                  </Text>
-                </Column>
-                <Column margin="25 0 0 0">
-                  <Text
-                    testID="idType"
-                    weight="regular"
-                    size="smaller"
-                    color={Theme.Colors.DetailsLabel}>
-                    {t('idType')}
-                  </Text>
-                  <Text
-                    testID="nationalCard"
-                    weight="bold"
-                    size="smaller"
-                    color={Theme.Colors.Details}>
-                    {t('nationalCard')}
-                  </Text>
-                </Column>
-                {uin ? (
-                  <Column margin="25 0 0 0">
-                    <Text
-                      testID="uin"
-                      weight="regular"
-                      size="smaller"
-                      color={Theme.Colors.DetailsLabel}>
-                      {t('uin')}
-                    </Text>
-                    <Text
-                      testID="uinNumber"
-                      weight="semibold"
-                      size="smaller"
-                      color={Theme.Colors.Details}>
-                      {uin}
-                    </Text>
-                  </Column>
-                ) : null}
-
-                {vid ? (
-                  <Column margin="25 0 0 0">
-                    <Text
-                      testID="vid"
-                      weight="regular"
-                      size="smaller"
-                      color={Theme.Colors.DetailsLabel}>
-                      {t('vid')}
-                    </Text>
-                    <Text
-                      testID="vidNumber"
-                      weight="semibold"
-                      size="smaller"
-                      color={Theme.Colors.Details}>
-                      {vid}
-                    </Text>
-                  </Column>
-                ) : null}
-                <Column margin="30 0 0 0">
-                  <Text
-                    testID="generatedOnTitle"
-                    weight="regular"
-                    size="smaller"
-                    color={Theme.Colors.DetailsLabel}>
-                    {t('generatedOn')}
-                  </Text>
-                  <Text
-                    testID="generatedOnValue"
-                    weight="semibold"
-                    size="smaller"
-                    color={Theme.Colors.Details}>
-                    {new Date(props.vc?.generatedOn).toLocaleDateString()}
-                  </Text>
-                </Column>
-              </Column>
-              <Column margin="0 0 0 40">
-                <Column margin="20 0 0 0">
-                  <Text
-                    testID="dateOfBirth"
-                    weight="regular"
-                    size="smaller"
-                    color={Theme.Colors.DetailsLabel}>
-                    {t('dateOfBirth')}
-                  </Text>
-                  <Text
-                    testID="dateOfBirthValue"
-                    weight="semibold"
-                    size="smaller"
-                    color={Theme.Colors.Details}>
-                    {new Date(
-                      getLocalizedField(
-                        props.vc?.verifiableCredential.credentialSubject
-                          .dateOfBirth,
-                      ),
-                    ).toLocaleDateString()}
-                  </Text>
-                </Column>
-                <Column margin="25 0 0 0">
-                  <Text
-                    testID="status"
-                    weight="regular"
-                    size="smaller"
-                    color={Theme.Colors.DetailsLabel}>
-                    {t('status')}
-                  </Text>
-                  <Row
-                    style={{
-                      justifyContent: 'flex-start',
-                      alignItems: 'center',
-                    }}>
-                    {props.vc?.isVerified && <VerifiedIcon />}
-                    <Text
-                      testID="valid"
-                      weight="semibold"
-                      size="smaller"
-                      color={Theme.Colors.Details}>
-                      {t('valid')}
-                    </Text>
-                  </Row>
-                </Column>
-                <Column margin="92 0 0 0">
-                  <Text
-                    testID="phoneNumber"
-                    weight="regular"
-                    size="smaller"
-                    color={Theme.Colors.DetailsLabel}>
-                    {t('phoneNumber')}
-                  </Text>
-                  <Text
-                    testID="phoneNumberValue"
-                    weight="semibold"
-                    size="smaller"
-                    color={Theme.Colors.Details}>
-                    {getLocalizedField(
-                      props.vc?.verifiableCredential.credentialSubject.phone,
-                    )}
-                  </Text>
-                </Column>
-              </Column>
-            </Row>
-          </Column>
-        </Row>
-        <View style={Theme.Styles.hrLine}></View>
-        <Column padding="10">
-          <Column fill style={Theme.Styles.labelPart}>
-            <Text
-              testID="emailId"
-              weight="regular"
-              size="smaller"
-              color={Theme.Colors.DetailsLabel}>
-              {t('email')}
-            </Text>
-            <Row>
-              <Text
-                testID="emailIdValue"
-                style={
-                  props.vc?.verifiableCredential.credentialSubject.email
-                    .length > 25
-                    ? {flex: 1}
-                    : {flex: 0}
-                }
-                weight="semibold"
-                size="smaller"
-                color={Theme.Colors.Details}>
-                {getLocalizedField(
-                  props.vc?.verifiableCredential.credentialSubject.email,
-                )}
-              </Text>
-            </Row>
-          </Column>
-
-          <Column style={Theme.Styles.labelPart}>
-            <Text
-              testID="address"
-              weight="regular"
-              size="smaller"
-              color={Theme.Colors.DetailsLabel}>
-              {t('address')}
-            </Text>
-            <Row>
-              <Text
-                testID="addressValue"
-                style={{flex: 1}}
-                weight="semibold"
-                size="smaller"
-                color={Theme.Colors.Details}>
-                {getFullAddress(
-                  props.vc?.verifiableCredential.credentialSubject,
-                )}
-              </Text>
-            </Row>
-          </Column>
-          {CREDENTIAL_REGISTRY_EDIT === 'true' && (
-            <Column fill style={Theme.Styles.labelPart}>
-              <Text
-                testID="credentialRegistry"
-                weight="regular"
-                size="smaller"
-                color={Theme.Colors.DetailsLabel}>
-                {t('credentialRegistry')}
-              </Text>
-              <Text
-                testID="credentialRegistryValue"
-                weight="semibold"
-                size="smaller"
-                color={Theme.Colors.Details}>
-                {props.vc?.credentialRegistry}
-              </Text>
-            </Column>
-          )}
-        </Column>
-        <VcItemTags tag={props.vc?.tag} />
-      </ImageBackground>
-
-      {props.vc?.reason?.length > 0 && (
-        <Text
-          testID="reasonForSharingTitle"
-          margin="24 24 16 24"
-          weight="semibold">
-          {t('reasonForSharing')}
-        </Text>
-      )}
-
-      {props.vc?.reason?.map((reason, index) => (
-        <TextItem
-          testID="reason"
-          key={index}
-          divider
-          label={formatDistanceToNow(reason.timestamp, {
-            addSuffix: true,
-            locale: DateFnsLocale[i18n.language],
-          })}
-          text={reason.message}
-        />
-      ))}
-
-      {props.activeTab !== 1 ? (
-        props.isBindingPending ? (
-          <Column style={Theme.Styles.openCardBgContainer} padding="10">
-            <Column margin={'0 0 4 0'} crossAlign={'flex-start'}>
-              <Image source={Theme.activationPending}></Image>
-              <Text
-                testID="offlineAuthDisabledHeader"
-                style={{flex: 1}}
-                weight="semibold"
-                size="small"
-                margin={'5 0 0 0'}
-                color={Theme.Colors.statusLabel}>
-                {t('offlineAuthDisabledHeader')}
-              </Text>
-            </Column>
-            <Text
-              testID="offlineAuthDisabledMessage"
-              style={{flex: 1, lineHeight: 17}}
-              weight="regular"
-              size="small"
-              margin={'3 0 0 0'}
-              color={Theme.Colors.statusMessage}>
-              {t('offlineAuthDisabledMessage')}
-            </Text>
-
-            <Button
-              testID="enableVerification"
-              title={t('enableVerification')}
-              onPress={props.onBinding}
-              type="gradient"
-              styles={{width: '100%'}}
-            />
-          </Column>
-        ) : (
-          <Column style={Theme.Styles.openCardBgContainer} padding="10">
-            <Row crossAlign="center">
-              <Icon
-                name="verified-user"
-                color={Theme.Colors.VerifiedIcon}
-                size={28}
-                containerStyle={{marginStart: 4, bottom: 1}}
-              />
-              <Text
-                testID="profileAuthenticated"
-                numLines={1}
-                color={Theme.Colors.statusLabel}
-                weight="bold"
-                size="smaller"
-                margin="10 10 10 10"
-                children={t('profileAuthenticated')}></Text>
-            </Row>
-          </Column>
-        )
-      ) : (
-        <></>
-      )}
-    </Column>
-  );
-};
-
-export interface ExistingMosipVCItemDetailsProps {
-  vc: VC;
-  isBindingPending: boolean;
-  onBinding?: () => void;
-  activeTab?: Number;
-}
-
-function getFullAddress(credential: CredentialSubject) {
-  if (!credential) {
-    return '';
-  }
-
-  const fields = [
-    'addressLine1',
-    'addressLine2',
-    'addressLine3',
-    'city',
-    'province',
-    'region',
-  ];
-
-  return fields
-    .map(field => getLocalizedField(credential[field]))
-    .concat(credential.postalCode)
-    .filter(Boolean)
-    .join(', ');
-}
diff --git a/components/VC/ExistingMosipVCItem/ExistingMosipVCItem.tsx b/components/VC/MosipVCItem/MosipVCItem.tsx
similarity index 58%
rename from components/VC/ExistingMosipVCItem/ExistingMosipVCItem.tsx
rename to components/VC/MosipVCItem/MosipVCItem.tsx
index 1ab6f337..38d99841 100644
--- a/components/VC/ExistingMosipVCItem/ExistingMosipVCItem.tsx
+++ b/components/VC/MosipVCItem/MosipVCItem.tsx
@@ -8,7 +8,6 @@ import {
   selectGeneratedOn,
   ExistingMosipVCItemMachine,
   selectContext,
-  selectTag,
   selectEmptyWalletBindingId,
   selectIsSavingFailedInIdle,
   selectKebabPopUp,
@@ -17,22 +16,37 @@ import {ExistingMosipVCItemEvents} from '../../../machines/VCItemMachine/Existin
 import {ErrorMessageOverlay} from '../../MessageOverlay';
 import {Theme} from '../../ui/styleUtils';
 import {GlobalContext} from '../../../shared/GlobalContext';
-import {ExistingMosipVCItemContent} from './ExistingMosipVCItemContent';
-import {ExistingMosipVCItemActivationStatus} from './ExistingMosipVCItemActivationStatus';
+import {MosipVCItemContent} from './MosipVCItemContent';
+import {MosipVCItemActivationStatus} from './MosipVCItemActivationStatus';
 import {Row} from '../../ui';
 import {KebabPopUp} from '../../KebabPopUp';
 import {VCMetadata} from '../../../shared/VCMetadata';
 import {format} from 'date-fns';
+import {
+  createEsignetMosipVCItemMachine,
+  EsignetMosipVCItemEvents,
+  EsignetMosipVCItemMachine,
+  selectContext as esignetSelectContext,
+  selectEmptyWalletBindingId as esignetSelectEmptyWalletBindingId,
+  selectGeneratedOn as esignetSelectGeneratedOn,
+  selectKebabPopUp as esignetSelectKebabPopUp,
+  selectVerifiableCredentials as esignetSelectVerifiableCredentials,
+} from '../../../machines/VCItemMachine/EsignetMosipVCItem/EsignetMosipVCItemMachine';
 
-export const ExistingMosipVCItem: React.FC<
-  ExistingMosipVCItemProps
+export const MosipVCItem: React.FC<
+  ExistingMosipVCItemProps | EsignetMosipVCItemProps
 > = props => {
   const {appService} = useContext(GlobalContext);
   const machine = useRef(
-    createExistingMosipVCItemMachine(
-      appService.getSnapshot().context.serviceRefs,
-      props.vcMetadata,
-    ),
+    !props.vcMetadata.isFromOpenId4VCI()
+      ? createExistingMosipVCItemMachine(
+          appService.getSnapshot().context.serviceRefs,
+          props.vcMetadata,
+        )
+      : createEsignetMosipVCItemMachine(
+          appService.getSnapshot().context.serviceRefs,
+          props.vcMetadata,
+        ),
   );
 
   const service = useInterpret(machine.current, {devTools: __DEV__});
@@ -43,21 +57,32 @@ export const ExistingMosipVCItem: React.FC<
     );
   }, [props.vcMetadata]);
 
-  const context = useSelector(service, selectContext);
-  const verifiableCredential = useSelector(service, selectVerifiableCredential);
-  const emptyWalletBindingId = useSelector(service, selectEmptyWalletBindingId);
-  const isKebabPopUp = useSelector(service, selectKebabPopUp);
-  const DISMISS = () => service.send(ExistingMosipVCItemEvents.DISMISS());
-  const KEBAB_POPUP = () =>
-    service.send(ExistingMosipVCItemEvents.KEBAB_POPUP());
+  let context = useSelector(service, selectContext);
+  let verifiableCredential = useSelector(service, selectVerifiableCredential);
+  let emptyWalletBindingId = useSelector(service, selectEmptyWalletBindingId);
+  let isKebabPopUp = useSelector(service, selectKebabPopUp);
+  let DISMISS = () => service.send(ExistingMosipVCItemEvents.DISMISS());
+  let KEBAB_POPUP = () => service.send(ExistingMosipVCItemEvents.KEBAB_POPUP());
   const isSavingFailedInIdle = useSelector(service, selectIsSavingFailedInIdle);
-
   const storeErrorTranslationPath = 'errors.savingFailed';
-
-  const generatedOn = useSelector(service, selectGeneratedOn);
-  const formattedDate = format(new Date(generatedOn), 'MM/dd/yyyy');
-  const tag = useSelector(service, selectTag);
-
+  let generatedOn = useSelector(service, selectGeneratedOn);
+  if (props.vcMetadata.isFromOpenId4VCI()) {
+    context = useSelector(service, esignetSelectContext);
+    isKebabPopUp = useSelector(service, esignetSelectKebabPopUp);
+    generatedOn = useSelector(service, esignetSelectGeneratedOn);
+    emptyWalletBindingId = useSelector(
+      service,
+      esignetSelectEmptyWalletBindingId,
+    );
+    DISMISS = () => service.send(EsignetMosipVCItemEvents.DISMISS());
+    KEBAB_POPUP = () => service.send(EsignetMosipVCItemEvents.KEBAB_POPUP());
+    verifiableCredential = useSelector(
+      service,
+      esignetSelectVerifiableCredentials,
+    );
+  }
+  let formattedDate =
+    generatedOn && format(new Date(generatedOn), 'MM/dd/yyyy');
   return (
     <React.Fragment>
       <Pressable
@@ -69,11 +94,11 @@ export const ExistingMosipVCItem: React.FC<
             ? Theme.Styles.selectedBindedVc
             : Theme.Styles.closeCardBgContainer
         }>
-        <ExistingMosipVCItemContent
+        <MosipVCItemContent
+          vcMetadata={props.vcMetadata}
           context={context}
           verifiableCredential={verifiableCredential}
           generatedOn={formattedDate}
-          tag={tag}
           selectable={props.selectable}
           selected={props.selected}
           service={service}
@@ -86,7 +111,8 @@ export const ExistingMosipVCItem: React.FC<
           <Row style={Theme.Styles.activationTab}>
             {props.activeTab !== 'receivedVcsTab' &&
               props.activeTab != 'sharingVcScreen' && (
-                <ExistingMosipVCItemActivationStatus
+                <MosipVCItemActivationStatus
+                  vcMetadata={props.vcMetadata}
                   verifiableCredential={verifiableCredential}
                   emptyWalletBindingId={emptyWalletBindingId}
                   onPress={() => props.onPress(service)}
@@ -132,3 +158,17 @@ export interface ExistingMosipVCItemProps {
   iconType?: string;
   isSharingVc?: boolean;
 }
+
+export interface EsignetMosipVCItemProps {
+  vcMetadata: VCMetadata;
+  margin?: string;
+  selectable?: boolean;
+  selected?: boolean;
+  showOnlyBindedVc?: boolean;
+  onPress?: (vcRef?: ActorRefFrom<typeof EsignetMosipVCItemMachine>) => void;
+  onShow?: (vcRef?: ActorRefFrom<typeof EsignetMosipVCItemMachine>) => void;
+  activeTab?: string;
+  iconName?: string;
+  iconType?: string;
+  isSharingVc?: boolean;
+}
diff --git a/components/VC/ExistingMosipVCItem/ExistingMosipVCItemActivationStatus.tsx b/components/VC/MosipVCItem/MosipVCItemActivationStatus.tsx
similarity index 98%
rename from components/VC/ExistingMosipVCItem/ExistingMosipVCItemActivationStatus.tsx
rename to components/VC/MosipVCItem/MosipVCItemActivationStatus.tsx
index 55b3cee1..6862447d 100644
--- a/components/VC/ExistingMosipVCItem/ExistingMosipVCItemActivationStatus.tsx
+++ b/components/VC/MosipVCItem/MosipVCItemActivationStatus.tsx
@@ -94,7 +94,7 @@ const WalletVerifiedActivationDetails: React.FC<
   );
 };
 
-export const ExistingMosipVCItemActivationStatus: React.FC<
+export const MosipVCItemActivationStatus: React.FC<
   ExistingMosipVCItemActivationStatusProps
 > = props => {
   return (
diff --git a/components/VC/ExistingMosipVCItem/ExistingMosipVCItemContent.tsx b/components/VC/MosipVCItem/MosipVCItemContent.tsx
similarity index 75%
rename from components/VC/ExistingMosipVCItem/ExistingMosipVCItemContent.tsx
rename to components/VC/MosipVCItem/MosipVCItemContent.tsx
index ef9e556c..bfce812a 100644
--- a/components/VC/ExistingMosipVCItem/ExistingMosipVCItemContent.tsx
+++ b/components/VC/MosipVCItem/MosipVCItemContent.tsx
@@ -3,7 +3,6 @@ import {useTranslation} from 'react-i18next';
 import {Image, ImageBackground, View} from 'react-native';
 import {getLocalizedField} from '../../../i18n';
 import {VerifiableCredential} from '../../../types/VC/ExistingMosipVC/vc';
-import {VcItemTags} from '../common/VcItemTags';
 import VerifiedIcon from '../../VerifiedIcon';
 import {Column, Row, Text} from '../../ui';
 import {Theme} from '../../ui/styleUtils';
@@ -88,17 +87,42 @@ function getIdNumber(id: string) {
   return '*'.repeat(id.length - 4) + id.slice(-4);
 }
 
-export const ExistingMosipVCItemContent: React.FC<
-  ExistingMosipVCItemContentProps
+const getIssuerLogo = (isOpenId4VCI: boolean, issuerLogo: string) => {
+  if (isOpenId4VCI) {
+    return (
+      <Image
+        src={issuerLogo}
+        style={Theme.Styles.issuerLogo}
+        resizeMethod="scale"
+        resizeMode="contain"
+      />
+    );
+  }
+  return (
+    <Image
+      source={Theme.MosipSplashLogo}
+      style={Theme.Styles.logo}
+      resizeMethod="scale"
+      resizeMode="contain"
+    />
+  );
+};
+
+export const MosipVCItemContent: React.FC<
+  ExistingMosipVCItemContentProps | EsignetMosipVCItemContentProps
 > = props => {
+  const verifiableCredential = props.vcMetadata.isFromOpenId4VCI()
+    ? props.verifiableCredential?.credential
+    : props.verifiableCredential;
+
   //Assigning the UIN and VID from the VC details to display the idtype label
-  const uin = props.verifiableCredential?.credentialSubject.UIN;
-  const vid = props.verifiableCredential?.credentialSubject.VID;
-  const fullName = !props.verifiableCredential
+  const uin = verifiableCredential?.credentialSubject.UIN;
+  const vid = verifiableCredential?.credentialSubject.VID;
+  const fullName = !verifiableCredential
     ? ''
-    : getLocalizedField(props.verifiableCredential.credentialSubject.fullName);
+    : getLocalizedField(verifiableCredential?.credentialSubject.fullName);
   const {t} = useTranslation('VcDetails');
-  const isvalid = !props.verifiableCredential ? '' : t('valid');
+  const isvalid = !verifiableCredential ? '' : t('valid');
   const selectableOrCheck = props.selectable ? (
     <CheckBox
       checked={props.selected}
@@ -110,10 +134,10 @@ export const ExistingMosipVCItemContent: React.FC<
 
   return (
     <ImageBackground
-      source={!props.verifiableCredential ? null : Theme.CloseCard}
+      source={!verifiableCredential ? null : Theme.CloseCard}
       resizeMode="stretch"
       style={
-        !props.verifiableCredential
+        !verifiableCredential
           ? Theme.Styles.vertloadingContainer
           : Theme.Styles.backgroundImageContainer
       }>
@@ -122,11 +146,7 @@ export const ExistingMosipVCItemContent: React.FC<
           <Row margin="5 0 0 5">
             <ImageBackground
               imageStyle={Theme.Styles.faceImage}
-              source={
-                !props.verifiableCredential
-                  ? Theme.ProfileIcon
-                  : {uri: props.context.credential.biometrics.face}
-              }
+              source={faceImageSource()}
               style={Theme.Styles.closeCardImage}>
               {props.iconName && (
                 <Image
@@ -144,7 +164,7 @@ export const ExistingMosipVCItemContent: React.FC<
                   weight="regular"
                   size="smaller"
                   color={
-                    !props.verifiableCredential
+                    !verifiableCredential
                       ? Theme.Colors.LoadingDetailsLabel
                       : Theme.Colors.DetailsLabel
                   }>
@@ -154,7 +174,7 @@ export const ExistingMosipVCItemContent: React.FC<
                   testID="fullNameValue"
                   weight="semibold"
                   style={
-                    !props.verifiableCredential
+                    !verifiableCredential
                       ? Theme.Styles.loadingTitle
                       : Theme.Styles.detailsValue
                   }>
@@ -166,7 +186,7 @@ export const ExistingMosipVCItemContent: React.FC<
                 <Text
                   testID="idType"
                   color={
-                    !props.verifiableCredential
+                    !verifiableCredential
                       ? Theme.Colors.LoadingDetailsLabel
                       : Theme.Colors.DetailsLabel
                   }
@@ -180,7 +200,7 @@ export const ExistingMosipVCItemContent: React.FC<
                   weight="semibold"
                   color={Theme.Colors.Details}
                   style={
-                    !props.verifiableCredential
+                    !verifiableCredential
                       ? Theme.Styles.loadingTitle
                       : Theme.Styles.detailsValue
                   }>
@@ -190,17 +210,13 @@ export const ExistingMosipVCItemContent: React.FC<
             </Column>
           </Row>
 
-          <Column>
-            {props.verifiableCredential ? selectableOrCheck : null}
-          </Column>
+          <Column>{verifiableCredential ? selectableOrCheck : null}</Column>
         </Row>
 
         <Row
           align="space-between"
           margin="9 10 0 7"
-          style={
-            !props.verifiableCredential ? Theme.Styles.loadingContainer : null
-          }>
+          style={!verifiableCredential ? Theme.Styles.loadingContainer : null}>
           <Column>
             {uin ? (
               <Column margin="0 0 9 0">
@@ -239,8 +255,8 @@ export const ExistingMosipVCItemContent: React.FC<
                 </Text>
               </Column>
             ) : null}
-            {!props.verifiableCredential
-              ? getDetails(t('id'), uin || vid, props.verifiableCredential)
+            {!verifiableCredential
+              ? getDetails(t('id'), uin || vid, verifiableCredential)
               : null}
           </Column>
         </Row>
@@ -255,7 +271,7 @@ export const ExistingMosipVCItemContent: React.FC<
               weight="regular"
               size="smaller"
               color={
-                !props.verifiableCredential
+                !verifiableCredential
                   ? Theme.Colors.LoadingDetailsLabel
                   : Theme.Colors.DetailsLabel
               }>
@@ -265,7 +281,7 @@ export const ExistingMosipVCItemContent: React.FC<
               testID="generatedOnValue"
               weight="semibold"
               style={
-                !props.verifiableCredential
+                !verifiableCredential
                   ? Theme.Styles.loadingTitle
                   : Theme.Styles.subtitle
               }>
@@ -273,37 +289,54 @@ export const ExistingMosipVCItemContent: React.FC<
             </Text>
           </Column>
           <Column margin="0 35 0 0">
-            {props.verifiableCredential
-              ? getDetails(t('status'), isvalid, props.verifiableCredential)
+            {verifiableCredential
+              ? getDetails(t('status'), isvalid, verifiableCredential)
               : null}
           </Column>
           <Column
             testID="logo"
             style={{
-              display: props.verifiableCredential ? 'flex' : 'none',
+              display: verifiableCredential ? 'flex' : 'none',
               justifyContent: 'center',
               alignItems: 'center',
             }}>
-            <Image
-              source={Theme.MosipSplashLogo}
-              style={Theme.Styles.logo}
-              resizeMethod="scale"
-              resizeMode="contain"
-            />
+            {getIssuerLogo(
+              props.vcMetadata.isFromOpenId4VCI(),
+              props.verifiableCredential?.issuerLogo,
+            )}
           </Column>
         </Row>
       </Column>
-
-      <VcItemTags tag={props.tag} />
     </ImageBackground>
   );
+
+  function faceImageSource() {
+    return !verifiableCredential
+      ? Theme.ProfileIcon
+      : {
+          uri: props.vcMetadata.isFromOpenId4VCI()
+            ? verifiableCredential?.credentialSubject.face
+            : props.context.credential.biometrics.face,
+        };
+  }
 };
 
 interface ExistingMosipVCItemContentProps {
   context: any;
   verifiableCredential: VerifiableCredential;
   generatedOn: string;
-  tag: string;
+  selectable: boolean;
+  selected: boolean;
+  iconName?: string;
+  iconType?: string;
+  service: any;
+  onPress?: () => void;
+}
+
+export interface EsignetMosipVCItemContentProps {
+  context: any;
+  credential: VerifiableCredential;
+  generatedOn: string;
   selectable: boolean;
   selected: boolean;
   iconName?: string;
diff --git a/components/VC/EsignetMosipVCItem/EsignetMosipVCItemDetails.tsx b/components/VC/MosipVCItem/MosipVCItemDetails.tsx
similarity index 80%
rename from components/VC/EsignetMosipVCItem/EsignetMosipVCItemDetails.tsx
rename to components/VC/MosipVCItem/MosipVCItemDetails.tsx
index e78ba3d4..124f8e9e 100644
--- a/components/VC/EsignetMosipVCItem/EsignetMosipVCItemDetails.tsx
+++ b/components/VC/MosipVCItem/MosipVCItemDetails.tsx
@@ -1,33 +1,69 @@
-import React from 'react';
-import {useTranslation} from 'react-i18next';
-import {Button, Column, Row, Text} from '../../ui';
-import {Image, ImageBackground, View} from 'react-native';
-import {Theme} from '../../ui/styleUtils';
-import {QrCodeOverlay} from '../../QrCodeOverlay';
-import {getLocalizedField} from '../../../i18n';
-import VerifiedIcon from '../../VerifiedIcon';
-import {CREDENTIAL_REGISTRY_EDIT} from 'react-native-dotenv';
-import {TextItem} from '../../ui/TextItem';
 import {format, formatDistanceToNow, parse} from 'date-fns';
-import DateFnsLocale from 'date-fns/locale';
+import React from 'react';
+import * as DateFnsLocale from 'date-fns/locale';
+import {useTranslation} from 'react-i18next';
+import {Image, ImageBackground, View} from 'react-native';
 import {Icon} from 'react-native-elements';
-import {WalletBindingResponse} from '../../../shared/cryptoutil/cryptoUtil';
+import {VC, CredentialSubject} from '../../../types/VC/ExistingMosipVC/vc';
+import {Button, Column, Row, Text} from '../../ui';
+import {Theme} from '../../ui/styleUtils';
+import {TextItem} from '../../ui/TextItem';
+import VerifiedIcon from '../../VerifiedIcon';
+import {getLocalizedField} from '../../../i18n';
+import {CREDENTIAL_REGISTRY_EDIT} from 'react-native-dotenv';
+import {QrCodeOverlay} from '../../QrCodeOverlay';
+import {VCMetadata} from '../../../shared/VCMetadata';
 import {
-  CredentialSubject,
   VcIdType,
   VCSharingReason,
   VerifiableCredential,
   VerifiablePresentation,
 } from '../../../types/VC/EsignetMosipVC/vc';
+import {WalletBindingResponse} from '../../../shared/cryptoutil/cryptoUtil';
 
-export const EsignetMosipVCItemDetails: React.FC<
-  EsignetMosipVCItemDetailsProps
+const getIssuerLogo = (isOpenId4VCI: boolean, issuerLogo: string) => {
+  if (isOpenId4VCI) {
+    return <Image src={issuerLogo} style={Theme.Styles.issuerLogo} />;
+  }
+  return <Image source={Theme.MosipLogo} style={Theme.Styles.vcDetailsLogo} />;
+};
+
+const getProfileImage = (
+  props: ExistingMosipVCItemDetailsProps | EsignetMosipVCItemDetailsProps,
+  verifiableCredential,
+  isOpenId4VCI,
+) => {
+  if (isOpenId4VCI) {
+    if (verifiableCredential?.credentialSubject.face) {
+      return {uri: verifiableCredential?.credentialSubject.face};
+    }
+  } else {
+    if (props.vc?.credential?.biometrics?.face) {
+      return {uri: props.vc?.credential.biometrics.face};
+    }
+  }
+  return Theme.ProfileIcon;
+};
+
+export const MosipVCItemDetails: React.FC<
+  ExistingMosipVCItemDetailsProps | EsignetMosipVCItemDetailsProps
 > = props => {
   const {t, i18n} = useTranslation('VcDetails');
 
-  const uin = props.vc?.verifiableCredential.credential.credentialSubject.UIN;
-  const vid = props.vc?.verifiableCredential.credential.credentialSubject.VID;
-  if (props.vc?.verifiableCredential == null) {
+  let isOpenId4VCI = VCMetadata.fromVC(props.vc.vcMetadata).isFromOpenId4VCI();
+  const issuerLogo = getIssuerLogo(
+    isOpenId4VCI,
+    props.vc?.verifiableCredential?.issuerLogo,
+  );
+  const verifiableCredential = isOpenId4VCI
+    ? props.vc?.verifiableCredential.credential
+    : props.vc?.verifiableCredential;
+
+  //Assigning the UIN and VID from the VC details to display the idtype label
+  const uin = verifiableCredential?.credentialSubject.UIN;
+  const vid = verifiableCredential?.credentialSubject.VID;
+
+  if (verifiableCredential == null) {
     return <Text align="center">Loading details...</Text>;
   }
 
@@ -42,27 +78,16 @@ export const EsignetMosipVCItemDetails: React.FC<
         <Row align="space-between" padding="10" margin="0 10 0 10">
           <Column align="space-evenly" crossAlign="center">
             <Image
-              source={
-                props.vc?.verifiableCredential.credential.credentialSubject
-                  ?.face
-                  ? {
-                      uri: props.vc?.verifiableCredential.credential
-                        .credentialSubject.face,
-                    }
-                  : Theme.ProfileIcon
-              }
+              source={getProfileImage(
+                props,
+                verifiableCredential,
+                isOpenId4VCI,
+              )}
               style={Theme.Styles.openCardImage}
             />
 
-            <QrCodeOverlay
-              qrCodeDetailes={String(props.vc.verifiableCredential)}
-            />
-            <Column margin="20 0 0 0">
-              <Image
-                src={props.vc.verifiableCredential.issuerLogo}
-                style={Theme.Styles.issuerLogo}
-              />
-            </Column>
+            <QrCodeOverlay qrCodeDetailes={String(verifiableCredential)} />
+            <Column margin="20 0 0 0">{issuerLogo}</Column>
           </Column>
           <Column align="space-evenly" padding="10">
             <Column>
@@ -79,8 +104,7 @@ export const EsignetMosipVCItemDetails: React.FC<
                 size="smaller"
                 color={Theme.Colors.Details}>
                 {getLocalizedField(
-                  props.vc?.verifiableCredential.credential.credentialSubject
-                    .fullName,
+                  verifiableCredential?.credentialSubject.fullName,
                 )}
               </Text>
             </Column>
@@ -100,8 +124,7 @@ export const EsignetMosipVCItemDetails: React.FC<
                     size="smaller"
                     color={Theme.Colors.Details}>
                     {getLocalizedField(
-                      props.vc?.verifiableCredential.credential
-                        .credentialSubject.gender,
+                      verifiableCredential?.credentialSubject.gender,
                     )}
                   </Text>
                 </Column>
@@ -189,7 +212,7 @@ export const EsignetMosipVCItemDetails: React.FC<
                     weight="semibold"
                     size="smaller"
                     color={Theme.Colors.Details}>
-                    {getFormattedDateOfBirth()}
+                    {formattedDateOfBirth()}
                   </Text>
                 </Column>
                 <Column margin="25 0 0 0">
@@ -205,7 +228,7 @@ export const EsignetMosipVCItemDetails: React.FC<
                       justifyContent: 'flex-start',
                       alignItems: 'center',
                     }}>
-                    <VerifiedIcon />
+                    {props.vc?.isVerified && <VerifiedIcon />}
                     <Text
                       testID="valid"
                       weight="semibold"
@@ -229,8 +252,7 @@ export const EsignetMosipVCItemDetails: React.FC<
                     size="smaller"
                     color={Theme.Colors.Details}>
                     {getLocalizedField(
-                      props.vc?.verifiableCredential.credential
-                        .credentialSubject.phone,
+                      verifiableCredential?.credentialSubject.phone,
                     )}
                   </Text>
                 </Column>
@@ -252,8 +274,7 @@ export const EsignetMosipVCItemDetails: React.FC<
               <Text
                 testID="emailIdValue"
                 style={
-                  props.vc?.verifiableCredential.credential.credentialSubject
-                    .email.length > 25
+                  verifiableCredential?.credentialSubject.email.length > 25
                     ? {flex: 1}
                     : {flex: 0}
                 }
@@ -261,8 +282,7 @@ export const EsignetMosipVCItemDetails: React.FC<
                 size="smaller"
                 color={Theme.Colors.Details}>
                 {getLocalizedField(
-                  props.vc?.verifiableCredential.credential.credentialSubject
-                    .email,
+                  verifiableCredential?.credentialSubject.email,
                 )}
               </Text>
             </Row>
@@ -283,21 +303,21 @@ export const EsignetMosipVCItemDetails: React.FC<
                 weight="semibold"
                 size="smaller"
                 color={Theme.Colors.Details}>
-                {getFullAddress(
-                  props.vc?.verifiableCredential.credential.credentialSubject,
-                )}
+                {getFullAddress(verifiableCredential?.credentialSubject)}
               </Text>
             </Row>
           </Column>
           {CREDENTIAL_REGISTRY_EDIT === 'true' && (
             <Column fill style={Theme.Styles.labelPart}>
               <Text
-                weight="semibold"
+                testID="credentialRegistry"
+                weight="regular"
                 size="smaller"
                 color={Theme.Colors.DetailsLabel}>
                 {t('credentialRegistry')}
               </Text>
               <Text
+                testID="credentialRegistryValue"
                 weight="semibold"
                 size="smaller"
                 color={Theme.Colors.Details}>
@@ -389,32 +409,34 @@ export const EsignetMosipVCItemDetails: React.FC<
     </Column>
   );
 
-  function getFormattedDateOfBirth(): React.ReactNode {
-    return format(
-      parse(
-        getLocalizedField(
-          props.vc?.verifiableCredential.credential.credentialSubject
-            .dateOfBirth,
-        ),
-        'yyyy/MM/dd',
-        new Date(),
-      ),
-      'MM/dd/yyyy',
-    );
+  function formattedDateOfBirth() {
+    const dateOfBirth = verifiableCredential?.credentialSubject.dateOfBirth;
+    const formatString =
+      dateOfBirth.split('/').length === 1 ? 'yyyy' : 'yyyy/MM/dd';
+
+    const parsedDate = parse(dateOfBirth, formatString, new Date());
+
+    return format(parsedDate, 'MM/dd/yyyy');
   }
 };
 
-export interface EsignetMosipVCItemDetailsProps {
+export interface ExistingMosipVCItemDetailsProps {
   vc: VC;
   isBindingPending: boolean;
   onBinding?: () => void;
+  activeTab?: Number;
+}
+
+export interface EsignetMosipVCItemDetailsProps {
+  vc: EsignetVC;
+  isBindingPending: boolean;
+  onBinding?: () => void;
   activeTab?: number;
 }
 
-export interface VC {
+export interface EsignetVC {
   id: string;
   idType: VcIdType;
-  tag: string;
   verifiableCredential: VerifiableCredential;
   verifiablePresentation?: VerifiablePresentation;
   generatedOn: Date;
diff --git a/components/VC/VcDetailsContainer.tsx b/components/VC/VcDetailsContainer.tsx
index 5ddb30fd..51fe02e2 100644
--- a/components/VC/VcDetailsContainer.tsx
+++ b/components/VC/VcDetailsContainer.tsx
@@ -1,19 +1,12 @@
 import React from 'react';
 import {
-  EsignetMosipVCItemDetails,
-  EsignetMosipVCItemDetailsProps,
-} from './EsignetMosipVCItem/EsignetMosipVCItemDetails';
-import {VCMetadata} from '../../shared/VCMetadata';
-import {
-  ExistingMosipVCItemDetails,
+  MosipVCItemDetails,
   ExistingMosipVCItemDetailsProps,
-} from './ExistingMosipVCItem/ExistingMosipVCItemDetails';
+  EsignetMosipVCItemDetailsProps,
+} from './MosipVCItem/MosipVCItemDetails';
 
 export const VcDetailsContainer: React.FC<
-  EsignetMosipVCItemDetailsProps | ExistingMosipVCItemDetailsProps
+  ExistingMosipVCItemDetailsProps | EsignetMosipVCItemDetailsProps
 > = props => {
-  if (VCMetadata.fromVC(props.vc.vcMetadata).isFromOpenId4VCI()) {
-    return <EsignetMosipVCItemDetails {...props} />;
-  }
-  return <ExistingMosipVCItemDetails {...props} />;
+  return <MosipVCItemDetails {...props} />;
 };
diff --git a/components/VC/VcItemContainer.tsx b/components/VC/VcItemContainer.tsx
index d65485b0..2dd0377b 100644
--- a/components/VC/VcItemContainer.tsx
+++ b/components/VC/VcItemContainer.tsx
@@ -1,18 +1,12 @@
-import {
-  EsignetMosipVCItem,
-  EsignetMosipVCItemProps,
-} from './EsignetMosipVCItem/EsignetMosipVCItem';
 import React from 'react';
 import {
-  ExistingMosipVCItem,
+  EsignetMosipVCItemProps,
+  MosipVCItem,
   ExistingMosipVCItemProps,
-} from './ExistingMosipVCItem/ExistingMosipVCItem';
+} from './MosipVCItem/MosipVCItem';
 
 export const VcItemContainer: React.FC<
   ExistingMosipVCItemProps | EsignetMosipVCItemProps
 > = props => {
-  if (props.vcMetadata.isFromOpenId4VCI()) {
-    return <EsignetMosipVCItem {...props} />;
-  }
-  return <ExistingMosipVCItem {...props} />;
+  return <MosipVCItem {...props} />;
 };
diff --git a/locales/ara.json b/locales/ara.json
index 486ea3aa..fceecff0 100644
--- a/locales/ara.json
+++ b/locales/ara.json
@@ -270,6 +270,7 @@
   "MyVcsTab": {
     "bringYourDigitalID": "أحضر هويتك الرقمية",
     "generateVcDescription": "اضغط على \"إضافة بطاقة \" أدناه لتنزيل بطاقتك",
+    "generateVcFABDescription": "اضغط على \"+\" أدناه لتنزيل بطاقتك",
     "downloadCard": "تحميل البطاقة",
     "downloadingYourCard": "تنزيل بطاقتك ، قد يستغرق هذا ما يصل إلى 5 دقائق",
     "activated": "يتم تمكين بيانات الاعتماد للمصادقة عبر الإنترنت.",
@@ -325,7 +326,6 @@
     "revoke": "سحب او إبطال",
     "revoking": "تحتوي محفظتك على بيانات اعتماد مع VID {{vid}}. سيؤدي إبطال هذا إلى حذفه تلقائيًا من المحفظة. هل انت متأكد انك تريد المتابعة؟",
     "requestingOtp": "جارٍ طلب OTP ...",
-    "editTag": "إعادة تسمية",
     "activated": "يتم تمكين بيانات الاعتماد للمصادقة عبر الإنترنت.",
     "redirecting": "إعادة توجيه...",
     "success": {
diff --git a/locales/en.json b/locales/en.json
index aac8a181..ed503227 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -277,6 +277,7 @@
   "MyVcsTab": {
     "bringYourDigitalID": "Bring your digital identity",
     "generateVcDescription": "Tap on \"Download card\" below to download your card",
+    "generateVcFABDescription": "Tap on  \"+\" below to download your card",
     "downloadCard": "Download Card",
     "downloadingYourCard": "Downloading your card, this can take upto 5 minutes",
     "activated": "Credentials are enabled for online authentication.",
@@ -332,7 +333,6 @@
     "revoke": "Revoke",
     "revoking": "Your wallet contains a credential with VID {{vid}}. Revoking this will automatically remove the same from the wallet. Are you sure you want to proceed?",
     "requestingOtp": "Requesting OTP...",
-    "editTag": "Rename",
     "activated": "Credentials are enabled for online authentication.",
     "redirecting": "Redirecting...",
     "success": {
diff --git a/locales/fil.json b/locales/fil.json
index c07c3777..e46e0c0b 100644
--- a/locales/fil.json
+++ b/locales/fil.json
@@ -270,6 +270,7 @@
   "MyVcsTab": {
     "bringYourDigitalID": "Dalhin ang Iyong Digital ID",
     "generateVcDescription": "Upang i-download ang iyong card i-tap ang I-download card sa ibaba",
+    "generateVcFABDescription": "Upang i-download ang iyong card i-tap ang + sa ibaba",
     "downloadCard": "I-download ang Card",
     "downloadingYourCard": "Ang pagda-download ng iyong card, maaari itong tumagal nang hanggang 5 minuto",
     "activated": "Ang mga kredensyal ay pinagana para sa online na pagpapatotoo.",
@@ -325,7 +326,6 @@
     "revoke": "Bawiin",
     "revoking": "Ang iyong wallet ay naglalaman ng kredensyal na may VID {{vid}}. Ang pagbawi nito ay awtomatikong mag-aalis ng pareho sa wallet. Sigurado ka bang gusto mong magpatuloy?",
     "requestingOtp": "Humihiling ng OTP...",
-    "editTag": "Palitan ang pangalan",
     "activated": "Ang mga kredensyal ay pinagana para sa online na pagpapatotoo.",
     "redirecting": "Nire-redirect...",
     "success": {
diff --git a/locales/hin.json b/locales/hin.json
index 35085000..3c983fbe 100644
--- a/locales/hin.json
+++ b/locales/hin.json
@@ -269,6 +269,7 @@
     "downloadCard": "डाउनलोड कार्ड",
     "bringYourDigitalID": "अपनी डिजिटल आईडी लाओ",
     "generateVcDescription": "अपना कार्ड डाउनलोड करने के लिए नीचे डाउनलोड कार्ड टैप करें",
+    "generateVcFABDescription": "अपना कार्ड डाउनलोड करने के लिए नीचे + कार्ड टैप करें",
     "downloadingYourCard": "आपका कार्ड डाउनलोड करने में 5 मिनट तक का समय लग सकता है",
     "activated": "ऑनलाइन प्रमाणीकरण के लिए क्रेडेंशियल सक्षम हैं।",
     "errors": {
@@ -324,7 +325,6 @@
     "revoke": "रद्द करना",
     "revoking": "आपके वॉलेट में VID {{vid}} के साथ एक क्रेडेंशियल है। इसे रद्द करने से यह अपने आप वॉलेट से हट जाएगा। क्या आप सुनिश्चित रूप से आगे बढ़ना चाहते हैं?",
     "requestingOtp": "ओटीपी का अनुरोध...",
-    "editTag": "नाम बदलें",
     "activated": "ऑनलाइन प्रमाणीकरण के लिए क्रेडेंशियल सक्षम हैं।",
     "redirecting": "पुन: निर्देशित...",
     "success": {
diff --git a/locales/kan.json b/locales/kan.json
index 5912de7a..3b79c739 100644
--- a/locales/kan.json
+++ b/locales/kan.json
@@ -267,6 +267,7 @@
     "downloadCard": "ಕಾರ್ಡ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ",
     "bringYourDigitalID": "ನಿಮ್ಮ ಡಿಜಿಟಲ್ ಐಡಿ ತನ್ನಿ",
     "generateVcDescription": "ನಿಮ್ಮ ಕಾರ್ಡ್ ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು ಕೆಳಗಿನ ಡೌನ್‌ಲೋಡ್ ಕಾರ್ಡ್ ಅನ್ನು ಟ್ಯಾಪ್ ಮಾಡಿ",
+    "generateVcFABDescription": "ನಿಮ್ಮ ಕಾರ್ಡ್ ಡೌನ್ ಲೋಡ್ ಮಾಡಲು + ಕೆಳಗೆ ಟ್ಯಾಪ್ ಮಾಡಿ",
     "downloadingYourCard": "ನಿಮ್ಮ ಕಾರ್ಡ್ ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಲಾಗುತ್ತಿದೆ, ಇದು 5 ನಿಮಿಷಗಳವರೆಗೆ ತೆಗೆದುಕೊಳ್ಳಬಹುದು",
     "activated": "ಆನ್‌ಲೈನ್ ದೃಢೀಕರಣಕ್ಕಾಗಿ ರುಜುವಾತುಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ.",
     "errors": {
@@ -321,7 +322,6 @@
     "revoke": "ಹಿಂತೆಗೆದುಕೊಳ್ಳಿ",
     "revoking": "ನಿಮ್ಮ ವ್ಯಾಲೆಟ್ VID {{vid}} ಜೊತೆಗೆ ರುಜುವಾತುಗಳನ್ನು ಒಳಗೊಂಡಿದೆ. ಇದನ್ನು ಹಿಂತೆಗೆದುಕೊಳ್ಳುವುದರಿಂದ ಅದನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ವ್ಯಾಲೆಟ್‌ನಿಂದ ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ. ನೀವು ಮುಂದುವರೆಯಲು ಖಚಿತವಾಗಿ ಬಯಸುವಿರಾ?",
     "requestingOtp": "ಒಟಿಪಿಯನ್ನು ವಿನಂತಿಸಲಾಗುತ್ತಿದೆ...",
-    "editTag": "ಟ್ಯಾಗ್ ಸಂಪಾದಿಸು",
     "activated": "ಆನ್‌ಲೈನ್ ದೃಢೀಕರಣಕ್ಕಾಗಿ ರುಜುವಾತುಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ.",
     "redirecting": "ಮರುನಿರ್ದೇಶಿಸಲಾಗುತ್ತಿದೆ...",
     "success": {
diff --git a/locales/spa.json b/locales/spa.json
index ecaba1c4..c59dbde4 100644
--- a/locales/spa.json
+++ b/locales/spa.json
@@ -225,7 +225,6 @@
 		"revoke": "Revocar",
 		"revoking": "Tu billetera contiene una credencial con VID {{vid}}. Revocar esto eliminará automáticamente la misma de la billetera. ¿Estás seguro de que deseas continuar?",
 		"requestingOtp": "Solicitando OTP...",
-		"editTag": "Renombrar",
 		"activated": "Las credenciales están habilitadas para la autenticación en línea.",
 		"redirecting": "Redirigiendo...",
 		"inProgress": "Cargando...",
@@ -658,6 +657,7 @@
     "addVcButton": "Agregar Tarjeta",
     "generateVc": "Genera tus Tarjetas",
     "generateVcDescription": "Toca en \"Agregar Tarjeta\" a continuación para descargar tu Tarjeta",
+	"generateVcFABDescription": "Toca en \"+\" a continuación para descargar tu Tarjeta",
     "errors": {
       "savingFailed": {
         "title": "Error al guardar la Tarjeta",
@@ -704,7 +704,6 @@
     "revoke": "Revocar",
     "revoking": "Tu billetera contiene una credencial con VID {{vid}}. Revocar esto eliminará automáticamente la misma de la billetera. ¿Estás seguro de que deseas continuar?",
     "requestingOtp": "Solicitando OTP...",
-    "editTag": "Renombrar",
     "redirecting": "Redirigiendo...",
     "inProgress": "Cargando...",
     "success": {
diff --git a/locales/tam.json b/locales/tam.json
index 81bcdee4..b95b3ecd 100644
--- a/locales/tam.json
+++ b/locales/tam.json
@@ -266,6 +266,7 @@
   "MyVcsTab": {
     "bringYourDigitalID": "உங்கள் டிஜிட்டல் ஐடியைக் கொண்டு வாருங்கள்",
     "generateVcDescription": "உங்கள் அட்டை ஐப் பதிவிறக்க, கீழே உள்ள பதிவிறக்கு அட்டை என்பதைத் தட்டவும்",
+    "generateVcFABDescription": "உங்கள் அட்டை ஐப் பதிவிறக்க, கீழே உள்ள + என்பதைத் தட்டவும்",
     "downloadCard": "கார்டைப் பதிவிறக்கவும்",
     "downloadingYourCard": "உங்கள் கார்டைப் பதிவிறக்க, இதற்கு 5 நிமிடங்கள் வரை ஆகலாம்",
     "activated": "ஆன்லைன் அங்கீகாரத்திற்காக நற்சான்றிதழ்கள் இயக்கப்பட்டுள்ளன.",
@@ -321,7 +322,6 @@
     "revoke": "திரும்பப்பெறு",
     "revoking": "உங்கள் பணப்பையில் VID {{vid}} உடன் நற்சான்றிதழ் உள்ளது. இதைத் திரும்பப் பெறுவது வாலட்டில் இருந்து தானாகவே அகற்றப்படும்.நீங்கள் நிச்சயமாக தொடர விரும்புகிறீர்களா?",
     "requestingOtp": "ஓடிபியைக் கோருகிறது...",
-    "editTag": "திருத்து குறி",
     "activated": "ஆன்லைன் அங்கீகாரத்திற்காக நற்சான்றிதழ்கள் இயக்கப்பட்டுள்ளன.",
     "redirecting": "வழிமாற்று...",
     "success": {
diff --git a/machines/VCItemMachine/EsignetMosipVCItem/EsignetMosipVCItemMachine.ts b/machines/VCItemMachine/EsignetMosipVCItem/EsignetMosipVCItemMachine.ts
index a3672c34..2d0f6f5a 100644
--- a/machines/VCItemMachine/EsignetMosipVCItem/EsignetMosipVCItemMachine.ts
+++ b/machines/VCItemMachine/EsignetMosipVCItem/EsignetMosipVCItemMachine.ts
@@ -35,7 +35,7 @@ const model = createModel(
 
     publicKey: '',
     privateKey: '',
-    myVcs: [] as string[],
+
     otp: '',
     otpError: '',
     idError: '',
@@ -58,6 +58,7 @@ const model = createModel(
       GET_VC_RESPONSE: (vc: VC) => ({vc}),
       VERIFY: () => ({}),
       LOCK_VC: () => ({}),
+      RESEND_OTP: () => ({}),
       INPUT_OTP: (otp: string) => ({otp}),
       REFRESH: () => ({}),
       REVOKE_VC: () => ({}),
@@ -118,7 +119,7 @@ export const EsignetMosipVCItemMachine = model.createMachine(
         description: 'Check if VC data is in secured local storage.',
         on: {
           STORE_RESPONSE: {
-            actions: ['setVerifiableCredential', 'setGeneratedOn', 'updateVc'],
+            actions: ['setVerifiableCredential', 'setContext', 'updateVc'],
             target: 'idle',
           },
         },
@@ -168,6 +169,23 @@ export const EsignetMosipVCItemMachine = model.createMachine(
             target: 'idle',
             actions: ['clearOtp', 'clearTransactionId'],
           },
+          RESEND_OTP: {
+            target: '.resendOTP',
+          },
+        },
+        initial: 'idle',
+        states: {
+          idle: {},
+          resendOTP: {
+            invoke: {
+              src: 'requestOtp',
+              onDone: [
+                {
+                  target: 'idle',
+                },
+              ],
+            },
+          },
         },
       },
       addKeyPair: {
@@ -341,6 +359,23 @@ export const EsignetMosipVCItemMachine = model.createMachine(
                 target: '#vc-item-openid4vci.kebabPopUp',
                 actions: ['clearOtp', 'clearTransactionId'],
               },
+              RESEND_OTP: {
+                target: '.resendOTP',
+              },
+            },
+            initial: 'idle',
+            states: {
+              idle: {},
+              resendOTP: {
+                invoke: {
+                  src: 'requestOtp',
+                  onDone: [
+                    {
+                      target: 'idle',
+                    },
+                  ],
+                },
+              },
             },
           },
           addKeyPair: {
@@ -381,6 +416,7 @@ export const EsignetMosipVCItemMachine = model.createMachine(
                     'storeContext',
                     'updateVc',
                     'setWalletBindingErrorEmpty',
+                    'sendWalletBindingSuccess',
                     'logWalletBindingSuccess',
                   ],
                 },
@@ -481,7 +517,8 @@ export const EsignetMosipVCItemMachine = model.createMachine(
           const {verifiableCredential} = context;
           return {
             type: 'VC_DOWNLOADED_FROM_OPENID4VCI',
-            verifiableCredential,
+            vc: verifiableCredential,
+            vcMetadata: context.vcMetadata,
           };
         },
         {
@@ -492,15 +529,26 @@ export const EsignetMosipVCItemMachine = model.createMachine(
       setVerifiableCredential: model.assign({
         verifiableCredential: (_, event) => {
           if (event.type === 'GET_VC_RESPONSE') {
-            return event.vc;
+            return event.vc.verifiableCredential;
           }
-          return event.response;
+          return event.response.verifiableCredential;
         },
       }),
 
+      setContext: model.assign((context, event) => {
+        if (event.type === 'STORE_RESPONSE') {
+          const {verifiableCredential, ...data} = event.response;
+          return {...context, ...data};
+        }
+        return context;
+      }),
+
       setGeneratedOn: model.assign({
-        generatedOn: (context, _event) => {
-          return context.verifiableCredential.generatedOn;
+        generatedOn: (_context, event) => {
+          if (event.type === 'GET_VC_RESPONSE') {
+            return event.vc.generatedOn;
+          }
+          return event.response.generatedOn;
         },
       }),
 
@@ -509,7 +557,7 @@ export const EsignetMosipVCItemMachine = model.createMachine(
           const {serviceRefs, ...data} = context;
           data.credentialRegistry = MIMOTO_BASE_URL;
           return StoreEvents.SET(
-            VCMetadata.fromVC(context, true).getVcKey(),
+            VCMetadata.fromVC(context.vcMetadata).getVcKey(),
             data,
           );
         },
@@ -616,29 +664,14 @@ export const EsignetMosipVCItemMachine = model.createMachine(
           to: context => context.serviceRefs.vc,
         },
       ),
-      logDownloaded: send(
-        context => {
-          const {serviceRefs, ...data} = context;
-          return ActivityLogEvents.LOG_ACTIVITY({
-            _vcKey: VCMetadata.fromVC(data, true).getVcKey(),
-            type: 'VC_DOWNLOADED',
-            timestamp: Date.now(),
-            deviceName: '',
-            vcLabel: data.id,
-          });
-        },
-        {
-          to: context => context.serviceRefs.activityLog,
-        },
-      ),
       logWalletBindingSuccess: send(
         context =>
           ActivityLogEvents.LOG_ACTIVITY({
-            _vcKey: VCMetadata.fromVC(context, true).getVcKey(),
+            _vcKey: VCMetadata.fromVC(context.vcMetadata).getVcKey(),
             type: 'WALLET_BINDING_SUCCESSFULL',
             timestamp: Date.now(),
             deviceName: '',
-            vcLabel: context.id,
+            vcLabel: VCMetadata.fromVC(context.vcMetadata).id,
           }),
         {
           to: context => context.serviceRefs.activityLog,
@@ -648,11 +681,11 @@ export const EsignetMosipVCItemMachine = model.createMachine(
       logWalletBindingFailure: send(
         context =>
           ActivityLogEvents.LOG_ACTIVITY({
-            _vcKey: VCMetadata.fromVC(context, true).getVcKey(),
+            _vcKey: VCMetadata.fromVC(context.vcMetadata).getVcKey(),
             type: 'WALLET_BINDING_FAILURE',
             timestamp: Date.now(),
             deviceName: '',
-            vcLabel: context.id,
+            vcLabel: VCMetadata.fromVC(context.vcMetadata).id,
           }),
         {
           to: context => context.serviceRefs.activityLog,
@@ -683,11 +716,11 @@ export const EsignetMosipVCItemMachine = model.createMachine(
       logVCremoved: send(
         (context, _) =>
           ActivityLogEvents.LOG_ACTIVITY({
-            _vcKey: VCMetadata.fromVC(context).getVcKey(),
+            _vcKey: VCMetadata.fromVC(context.vcMetadata).getVcKey(),
             type: 'VC_REMOVED',
             timestamp: Date.now(),
             deviceName: '',
-            vcLabel: context.id,
+            vcLabel: VCMetadata.fromVC(context.vcMetadata).id,
           }),
         {
           to: context => context.serviceRefs.activityLog,
@@ -733,7 +766,9 @@ export const EsignetMosipVCItemMachine = model.createMachine(
         );
         const certificate = response.response.certificate;
         await savePrivateKey(
-          getBindingCertificateConstant(context.id),
+          getBindingCertificateConstant(
+            VCMetadata.fromVC(context.vcMetadata).id,
+          ),
           certificate,
         );
 
@@ -751,7 +786,7 @@ export const EsignetMosipVCItemMachine = model.createMachine(
         }
         const isBiometricsEnabled = SecureKeystore.hasBiometricsEnabled();
         return SecureKeystore.generateKeyPair(
-          context.id,
+          VCMetadata.fromVC(context.vcMetadata).id,
           isBiometricsEnabled,
           0,
         );
@@ -814,9 +849,68 @@ export function selectContext(state: State) {
 }
 
 export function selectGeneratedOn(state: State) {
-  return new Date(state.context.generatedOn).toLocaleDateString();
+  return state.context.generatedOn;
 }
 
 export function selectWalletBindingSuccess(state: State) {
   return state.context.walletBindingSuccess;
 }
+
+export function selectEmptyWalletBindingId(state: State) {
+  var val = state.context.walletBindingResponse
+    ? state.context.walletBindingResponse.walletBindingId
+    : undefined;
+  return val == undefined || val == null || val.length <= 0 ? true : false;
+}
+
+export function selectWalletBindingError(state: State) {
+  return state.context.walletBindingError;
+}
+
+export function selectKebabPopUpAcceptingBindingOtp(state: State) {
+  return state.matches('kebabPopUp.acceptingBindingOtp');
+}
+
+export function selectKebabPopUpShowWalletBindingError(state: State) {
+  return state.matches('kebabPopUp.showingWalletBindingError');
+}
+
+export function selectKebabPopUpWalletBindingInProgress(state: State) {
+  return state.matches('kebabPopUp.requestingBindingOtp') ||
+    state.matches('kebabPopUp.addingWalletBindingId') ||
+    state.matches('kebabPopUp.addKeyPair') ||
+    state.matches('kebabPopUp.updatingPrivateKey')
+    ? true
+    : false;
+}
+
+export function selectKebabPopUpBindingWarning(state: State) {
+  return state.matches('kebabPopUp.showBindingWarning');
+}
+
+export function selectRemoveWalletWarning(state: State) {
+  return state.matches('kebabPopUp.removeWallet');
+}
+
+export function selectIsPinned(state: State) {
+  return state.context.isPinned;
+}
+
+export function selectOtpError(state: State) {
+  return state.context.otpError;
+}
+
+export function selectShowActivities(state: State) {
+  return state.matches('kebabPopUp.showActivities');
+}
+
+export function selectShowWalletBindingError(state: State) {
+  return (
+    state.matches('showingWalletBindingError') ||
+    state.matches('kebabPopUp.showingWalletBindingError')
+  );
+}
+
+export function selectLogoUrl(state: State) {
+  return state.context.logoUrl;
+}
diff --git a/machines/VCItemMachine/EsignetMosipVCItem/EsignetMosipVCItemMachine.typegen.ts b/machines/VCItemMachine/EsignetMosipVCItem/EsignetMosipVCItemMachine.typegen.ts
index fa7a2e08..75db6f0f 100644
--- a/machines/VCItemMachine/EsignetMosipVCItem/EsignetMosipVCItemMachine.typegen.ts
+++ b/machines/VCItemMachine/EsignetMosipVCItem/EsignetMosipVCItemMachine.typegen.ts
@@ -87,6 +87,9 @@ export interface Typegen0 {
     requestBindingOtp:
       | 'done.invoke.vc-item-openid4vci.kebabPopUp.requestingBindingOtp:invocation[0]'
       | 'done.invoke.vc-item-openid4vci.requestingBindingOtp:invocation[0]';
+    requestOtp:
+      | 'done.invoke.vc-item-openid4vci.acceptingBindingOtp.resendOTP:invocation[0]'
+      | 'done.invoke.vc-item-openid4vci.kebabPopUp.acceptingBindingOtp.resendOTP:invocation[0]';
     updatePrivateKey:
       | 'done.invoke.vc-item-openid4vci.kebabPopUp.updatingPrivateKey:invocation[0]'
       | 'done.invoke.vc-item-openid4vci.updatingPrivateKey:invocation[0]';
@@ -95,7 +98,7 @@ export interface Typegen0 {
     actions: 'clearTransactionId';
     delays: never;
     guards: never;
-    services: never;
+    services: 'requestOtp';
   };
   eventsCausingActions: {
     VcUpdated: 'STORE_RESPONSE';
@@ -120,8 +123,13 @@ export interface Typegen0 {
     removedVc: 'STORE_RESPONSE';
     requestStoredContext: 'GET_VC_RESPONSE' | 'REFRESH';
     requestVcContext: 'DISMISS' | 'xstate.init';
+    resetWalletBindingSuccess: 'DISMISS';
     sendVcUpdated: 'STORE_RESPONSE';
-    setGeneratedOn: 'GET_VC_RESPONSE' | 'STORE_RESPONSE';
+    sendWalletBindingSuccess:
+      | 'done.invoke.vc-item-openid4vci.kebabPopUp.addingWalletBindingId:invocation[0]'
+      | 'done.invoke.vc-item-openid4vci.kebabPopUp.updatingPrivateKey:invocation[0]';
+    setContext: 'STORE_RESPONSE';
+    setGeneratedOn: 'GET_VC_RESPONSE';
     setOtp: 'INPUT_OTP';
     setPinCard: 'PIN_CARD';
     setPrivateKey:
@@ -134,6 +142,7 @@ export interface Typegen0 {
       | 'done.invoke.vc-item-openid4vci.addingWalletBindingId:invocation[0]'
       | 'done.invoke.vc-item-openid4vci.kebabPopUp.addingWalletBindingId:invocation[0]';
     setVcKey: 'REMOVE';
+    setVcMetadata: 'UPDATE_VC_METADATA';
     setVerifiableCredential: 'GET_VC_RESPONSE' | 'STORE_RESPONSE';
     setWalletBindingError:
       | 'error.platform.vc-item-openid4vci.addKeyPair:invocation[0]'
@@ -153,6 +162,7 @@ export interface Typegen0 {
     setWalletBindingId:
       | 'done.invoke.vc-item-openid4vci.addingWalletBindingId:invocation[0]'
       | 'done.invoke.vc-item-openid4vci.kebabPopUp.addingWalletBindingId:invocation[0]';
+    setWalletBindingSuccess: 'done.invoke.vc-item-openid4vci.updatingPrivateKey:invocation[0]';
     storeContext:
       | 'PIN_CARD'
       | 'done.invoke.vc-item-openid4vci.addingWalletBindingId:invocation[0]'
@@ -184,12 +194,15 @@ export interface Typegen0 {
       | 'done.invoke.vc-item-openid4vci.kebabPopUp.addKeyPair:invocation[0]';
     generateKeyPair: 'INPUT_OTP';
     requestBindingOtp: 'CONFIRM';
+    requestOtp: 'RESEND_OTP';
     updatePrivateKey:
       | 'done.invoke.vc-item-openid4vci.addingWalletBindingId:invocation[0]'
       | 'done.invoke.vc-item-openid4vci.kebabPopUp.addingWalletBindingId:invocation[0]';
   };
   matchesStates:
     | 'acceptingBindingOtp'
+    | 'acceptingBindingOtp.idle'
+    | 'acceptingBindingOtp.resendOTP'
     | 'addKeyPair'
     | 'addingWalletBindingId'
     | 'checkingStore'
@@ -197,6 +210,8 @@ export interface Typegen0 {
     | 'idle'
     | 'kebabPopUp'
     | 'kebabPopUp.acceptingBindingOtp'
+    | 'kebabPopUp.acceptingBindingOtp.idle'
+    | 'kebabPopUp.acceptingBindingOtp.resendOTP'
     | 'kebabPopUp.addKeyPair'
     | 'kebabPopUp.addingWalletBindingId'
     | 'kebabPopUp.idle'
@@ -213,6 +228,7 @@ export interface Typegen0 {
     | 'showingWalletBindingError'
     | 'updatingPrivateKey'
     | {
+        acceptingBindingOtp?: 'idle' | 'resendOTP';
         kebabPopUp?:
           | 'acceptingBindingOtp'
           | 'addKeyPair'
@@ -224,7 +240,8 @@ export interface Typegen0 {
           | 'showActivities'
           | 'showBindingWarning'
           | 'showingWalletBindingError'
-          | 'updatingPrivateKey';
+          | 'updatingPrivateKey'
+          | {acceptingBindingOtp?: 'idle' | 'resendOTP'};
       };
   tags: never;
 }
diff --git a/machines/VCItemMachine/ExistingMosipVCItem/ExistingMosipVCItemMachine.ts b/machines/VCItemMachine/ExistingMosipVCItem/ExistingMosipVCItemMachine.ts
index 072f7d17..639624d4 100644
--- a/machines/VCItemMachine/ExistingMosipVCItem/ExistingMosipVCItemMachine.ts
+++ b/machines/VCItemMachine/ExistingMosipVCItem/ExistingMosipVCItemMachine.ts
@@ -1,10 +1,6 @@
 import {assign, ErrorPlatformEvent, EventFrom, send, StateFrom} from 'xstate';
 import {createModel} from 'xstate/lib/model';
-import {
-  HOST,
-  MIMOTO_BASE_URL,
-  MY_VCS_STORE_KEY,
-} from '../../../shared/constants';
+import {MIMOTO_BASE_URL, MY_VCS_STORE_KEY} from '../../../shared/constants';
 import {AppServices} from '../../../shared/GlobalContext';
 import {CredentialDownloadResponse, request} from '../../../shared/request';
 import {
@@ -46,7 +42,6 @@ const model = createModel(
     serviceRefs: {} as AppServices,
     id: '',
     idType: '' as VcIdType,
-    tag: '',
     vcMetadata: {} as VCMetadata,
     myVcs: [] as string[],
     generatedOn: null as Date,
@@ -76,8 +71,6 @@ const model = createModel(
     events: {
       KEY_RECEIVED: (key: string) => ({key}),
       KEY_ERROR: (error: Error) => ({error}),
-      EDIT_TAG: () => ({}),
-      SAVE_TAG: (tag: string) => ({tag}),
       STORE_READY: () => ({}),
       DISMISS: () => ({}),
       CREDENTIAL_DOWNLOADED: (vc: VC) => ({vc}),
@@ -247,9 +240,6 @@ export const ExistingMosipVCItemMachine =
         idle: {
           entry: ['clearTransactionId', 'clearOtp'],
           on: {
-            EDIT_TAG: {
-              target: 'editingTag',
-            },
             VERIFY: {
               target: 'verifyingCredential',
             },
@@ -388,6 +378,7 @@ export const ExistingMosipVCItemMachine =
                       'storeContext',
                       'updateVc',
                       'setWalletBindingErrorEmpty',
+                      'sendWalletBindingSuccess',
                       'logWalletBindingSuccess',
                     ],
                   },
@@ -457,26 +448,6 @@ export const ExistingMosipVCItemMachine =
             },
           },
         },
-        editingTag: {
-          on: {
-            DISMISS: {
-              target: 'idle',
-            },
-            SAVE_TAG: {
-              actions: 'setTag',
-              target: 'storingTag',
-            },
-          },
-        },
-        storingTag: {
-          entry: 'storeTag',
-          on: {
-            STORE_RESPONSE: {
-              actions: 'updateVc',
-              target: 'idle',
-            },
-          },
-        },
         verifyingCredential: {
           invoke: {
             src: 'verifyCredential',
@@ -996,10 +967,6 @@ export const ExistingMosipVCItemMachine =
           },
         ),
 
-        setTag: model.assign({
-          tag: (_, event) => event.tag,
-        }),
-
         incrementDownloadCounter: model.assign({
           downloadCounter: ({downloadCounter}) => downloadCounter + 1,
         }),
@@ -1044,7 +1011,7 @@ export const ExistingMosipVCItemMachine =
               type: 'VC_DOWNLOADED',
               timestamp: Date.now(),
               deviceName: '',
-              vcLabel: data.tag || data.id,
+              vcLabel: data.id,
             });
           },
           {
@@ -1059,7 +1026,7 @@ export const ExistingMosipVCItemMachine =
               type: 'WALLET_BINDING_SUCCESSFULL',
               timestamp: Date.now(),
               deviceName: '',
-              vcLabel: context.tag || context.vcMetadata.id,
+              vcLabel: context.vcMetadata.id,
             }),
           {
             to: context => context.serviceRefs.activityLog,
@@ -1073,7 +1040,7 @@ export const ExistingMosipVCItemMachine =
               type: 'WALLET_BINDING_FAILURE',
               timestamp: Date.now(),
               deviceName: '',
-              vcLabel: context.tag || context.vcMetadata.id,
+              vcLabel: context.vcMetadata.id,
             }),
           {
             to: context => context.serviceRefs.activityLog,
@@ -1087,7 +1054,7 @@ export const ExistingMosipVCItemMachine =
               type: 'VC_REVOKED',
               timestamp: Date.now(),
               deviceName: '',
-              vcLabel: context.tag || context.vcMetadata.id,
+              vcLabel: context.vcMetadata.id,
             }),
           {
             to: context => context.serviceRefs.activityLog,
@@ -1324,7 +1291,6 @@ export const ExistingMosipVCItemMachine =
                   generatedOn: new Date(),
                   id: context.vcMetadata.id,
                   idType: context.vcMetadata.idType,
-                  tag: '',
                   requestId: context.vcMetadata.requestId,
                   isVerified: false,
                   lastVerifiedOn: null,
@@ -1457,10 +1423,6 @@ export function selectIdType(state: State) {
   return state.context.vcMetadata.idType;
 }
 
-export function selectTag(state: State) {
-  return state.context.tag;
-}
-
 export function selectCredential(state: State) {
   return state.context.credential;
 }
@@ -1473,10 +1435,6 @@ export function selectContext(state: State) {
   return state.context;
 }
 
-export function selectIsEditingTag(state: State) {
-  return state.matches('editingTag');
-}
-
 export function selectIsOtpError(state: State) {
   return state.context.otpError;
 }
diff --git a/machines/VCItemMachine/ExistingMosipVCItem/ExistingMosipVCItemMachine.typegen.ts b/machines/VCItemMachine/ExistingMosipVCItem/ExistingMosipVCItemMachine.typegen.ts
index 1695b27e..3625c7f7 100644
--- a/machines/VCItemMachine/ExistingMosipVCItem/ExistingMosipVCItemMachine.typegen.ts
+++ b/machines/VCItemMachine/ExistingMosipVCItem/ExistingMosipVCItemMachine.typegen.ts
@@ -215,8 +215,12 @@ export interface Typegen0 {
     removedVc: 'STORE_RESPONSE';
     requestStoredContext: 'GET_VC_RESPONSE' | 'REFRESH';
     requestVcContext: 'DISMISS' | 'xstate.init';
+    resetWalletBindingSuccess: 'DISMISS';
     revokeVID: 'done.invoke.vc-item.requestingRevoke:invocation[0]';
     sendVcUpdated: 'PIN_CARD';
+    sendWalletBindingSuccess:
+      | 'done.invoke.vc-item.kebabPopUp.addingWalletBindingId:invocation[0]'
+      | 'done.invoke.vc-item.kebabPopUp.updatingPrivateKey:invocation[0]';
     setCredential: 'GET_VC_RESPONSE' | 'STORE_RESPONSE';
     setDownloadInterval: 'done.invoke.vc-item.checkingServerData.verifyingDownloadLimitExpiry:invocation[0]';
     setLock: 'done.invoke.vc-item.requestingLock:invocation[0]';
@@ -234,7 +238,6 @@ export interface Typegen0 {
       | 'done.invoke.vc-item.kebabPopUp.addKeyPair:invocation[0]';
     setRevoke: 'done.invoke.vc-item.requestingRevoke:invocation[0]';
     setStoreVerifiableCredential: 'CREDENTIAL_DOWNLOADED';
-    setTag: 'SAVE_TAG';
     setThumbprintForWalletBindingId:
       | 'done.invoke.vc-item.addingWalletBindingId:invocation[0]'
       | 'done.invoke.vc-item.kebabPopUp.addingWalletBindingId:invocation[0]';
@@ -245,6 +248,7 @@ export interface Typegen0 {
       | 'error.platform.vc-item.requestingLock:invocation[0]'
       | 'error.platform.vc-item.requestingRevoke:invocation[0]';
     setVcKey: 'REMOVE';
+    setVcMetadata: 'UPDATE_VC_METADATA';
     setVerifiableCredential: 'STORE_RESPONSE';
     setWalletBindingError:
       | 'error.platform.vc-item.addKeyPair:invocation[0]'
@@ -264,6 +268,7 @@ export interface Typegen0 {
     setWalletBindingId:
       | 'done.invoke.vc-item.addingWalletBindingId:invocation[0]'
       | 'done.invoke.vc-item.kebabPopUp.addingWalletBindingId:invocation[0]';
+    setWalletBindingSuccess: 'done.invoke.vc-item.updatingPrivateKey:invocation[0]';
     storeContext:
       | 'CREDENTIAL_DOWNLOADED'
       | 'done.invoke.vc-item.addingWalletBindingId:invocation[0]'
@@ -272,7 +277,6 @@ export interface Typegen0 {
       | 'done.invoke.vc-item.updatingPrivateKey:invocation[0]'
       | 'done.invoke.vc-item.verifyingCredential:invocation[0]';
     storeLock: 'done.invoke.vc-item.requestingLock:invocation[0]';
-    storeTag: 'SAVE_TAG';
     updatePrivateKey:
       | 'done.invoke.vc-item.kebabPopUp.updatingPrivateKey:invocation[0]'
       | 'done.invoke.vc-item.updatingPrivateKey:invocation[0]';
@@ -332,7 +336,6 @@ export interface Typegen0 {
     | 'checkingStore'
     | 'checkingVc'
     | 'checkingVerificationStatus'
-    | 'editingTag'
     | 'idle'
     | 'invalid'
     | 'invalid.backend'
@@ -359,7 +362,6 @@ export interface Typegen0 {
     | 'revokingVc'
     | 'showBindingWarning'
     | 'showingWalletBindingError'
-    | 'storingTag'
     | 'updatingPrivateKey'
     | 'verifyingCredential'
     | {
diff --git a/machines/bleShare/request/requestMachine.ts b/machines/bleShare/request/requestMachine.ts
index 964d8103..5b12b9fa 100644
--- a/machines/bleShare/request/requestMachine.ts
+++ b/machines/bleShare/request/requestMachine.ts
@@ -647,7 +647,7 @@ export const requestMachine =
               timestamp: Date.now(),
               deviceName:
                 context.senderInfo.name || context.senderInfo.deviceName,
-              vcLabel: context.incomingVc.tag || context.incomingVc.id,
+              vcLabel: context.incomingVc.id,
             }),
           {to: context => context.serviceRefs.activityLog},
         ),
diff --git a/machines/bleShare/scan/scanMachine.ts b/machines/bleShare/scan/scanMachine.ts
index 03200af9..f299b4c1 100644
--- a/machines/bleShare/scan/scanMachine.ts
+++ b/machines/bleShare/scan/scanMachine.ts
@@ -816,7 +816,7 @@ export const scanMachine =
               timestamp: Date.now(),
               deviceName:
                 context.receiverInfo.name || context.receiverInfo.deviceName,
-              vcLabel: context.selectedVc.tag || context.selectedVc.id,
+              vcLabel: context.selectedVc.id,
             }),
           {to: context => context.serviceRefs.activityLog},
         ),
@@ -829,7 +829,7 @@ export const scanMachine =
               timestamp: Date.now(),
               deviceName:
                 context.receiverInfo.name || context.receiverInfo.deviceName,
-              vcLabel: context.selectedVc.tag || context.selectedVc.id,
+              vcLabel: context.selectedVc.id,
             }),
           {to: context => context.serviceRefs.activityLog},
         ),
@@ -1020,7 +1020,6 @@ export const scanMachine =
           const vp = context.createdVp;
           const vc = {
             ...(vp != null ? vp : context.selectedVc),
-            tag: '',
           };
 
           const reason = [];
diff --git a/machines/issuersMachine.ts b/machines/issuersMachine.ts
index fa30f34d..b85b622d 100644
--- a/machines/issuersMachine.ts
+++ b/machines/issuersMachine.ts
@@ -1,7 +1,6 @@
 import {authorize, AuthorizeResult} from 'react-native-app-auth';
 import {assign, EventFrom, send, sendParent, StateFrom} from 'xstate';
 import {createModel} from 'xstate/lib/model';
-import {Theme} from '../components/ui/styleUtils';
 import {MY_VCS_STORE_KEY} from '../shared/constants';
 import {request} from '../shared/request';
 import {StoreEvents} from './store';
@@ -17,7 +16,10 @@ import {log} from 'xstate/lib/actions';
 import {verifyCredential} from '../shared/vcjs/verifyCredential';
 import {getBody, getIdentifier} from '../shared/openId4VCI/Utils';
 import {VCMetadata} from '../shared/VCMetadata';
-import {VerifiableCredential} from '../types/VC/EsignetMosipVC/vc';
+import {
+  CredentialWrapper,
+  VerifiableCredential,
+} from '../types/VC/EsignetMosipVC/vc';
 
 const model = createModel(
   {
@@ -27,6 +29,7 @@ const model = createModel(
     errorMessage: '' as string,
     loadingReason: 'displayIssuers' as string,
     verifiableCredential: null as VerifiableCredential | null,
+    credentialWrapper: {} as CredentialWrapper,
     serviceRefs: {} as AppServices,
 
     publicKey: ``,
@@ -165,7 +168,7 @@ export const IssuersMachine = model.createMachine(
         invoke: {
           src: 'downloadCredential',
           onDone: {
-            actions: 'setVerifiableCredential',
+            actions: ['setVerifiableCredential', 'setCredentialWrapper'],
             target: 'verifyingCredential',
           },
           onError: {
@@ -266,36 +269,19 @@ export const IssuersMachine = model.createMachine(
       ),
 
       storeVerifiableCredentialMeta: send(
-        context => {
-          const [issuer, protocol, id] =
-            context.verifiableCredential?.identifier.split(':');
-          return StoreEvents.PREPEND(
-            MY_VCS_STORE_KEY,
-            VCMetadata.fromVC({
-              id: id ? id : null,
-              issuer: issuer,
-              protocol: protocol,
-            }),
-          );
-        },
+        context =>
+          StoreEvents.PREPEND(MY_VCS_STORE_KEY, getVCMetadata(context)),
         {
           to: context => context.serviceRefs.store,
         },
       ),
 
       storeVerifiableCredentialData: send(
-        context => {
-          const [issuer, protocol, id] =
-            context.verifiableCredential?.identifier.split(':');
-          return StoreEvents.SET(
-            VCMetadata.fromVC({
-              id: id ? id : null,
-              issuer: issuer,
-              protocol: protocol,
-            }).getVcKey(),
-            context.verifiableCredential,
-          );
-        },
+        context =>
+          StoreEvents.SET(
+            getVCMetadata(context).getVcKey(),
+            context.credentialWrapper,
+          ),
         {
           to: context => context.serviceRefs.store,
         },
@@ -303,16 +289,9 @@ export const IssuersMachine = model.createMachine(
 
       storeVcMetaContext: send(
         context => {
-          const [issuer, protocol, id] =
-            context.verifiableCredential?.identifier.split(':');
-
           return {
             type: 'VC_ADDED',
-            vcMetadata: VCMetadata.fromVC({
-              id: id ? id : null,
-              issuer: issuer,
-              protocol: protocol,
-            }),
+            vcMetadata: getVCMetadata(context),
           };
         },
         {
@@ -322,16 +301,10 @@ export const IssuersMachine = model.createMachine(
 
       storeVcsContext: send(
         context => {
-          const [issuer, protocol, id] =
-            context.verifiableCredential?.identifier.split(':');
           return {
             type: 'VC_DOWNLOADED_FROM_OPENID4VCI',
-            vcMetadata: VCMetadata.fromVC({
-              id: id ? id : null,
-              issuer: issuer,
-              protocol: protocol,
-            }),
-            vc: context.verifiableCredential,
+            vcMetadata: getVCMetadata(context),
+            vc: context.credentialWrapper,
           };
         },
         {
@@ -348,6 +321,11 @@ export const IssuersMachine = model.createMachine(
       }),
       setVerifiableCredential: model.assign({
         verifiableCredential: (_, event) => {
+          return event.data.verifiableCredential;
+        },
+      }),
+      setCredentialWrapper: model.assign({
+        credentialWrapper: (_, event) => {
           return event.data;
         },
       }),
@@ -367,15 +345,12 @@ export const IssuersMachine = model.createMachine(
 
       logDownloaded: send(
         context => {
-          const [issuer, protocol, id] =
-            context.verifiableCredential?.identifier.split(':');
-
           return ActivityLogEvents.LOG_ACTIVITY({
-            _vcKey: id,
+            _vcKey: getVCMetadata(context).getVcKey(),
             type: 'VC_DOWNLOADED',
             timestamp: Date.now(),
             deviceName: '',
-            vcLabel: '',
+            vcLabel: getVCMetadata(context).id,
           });
         },
         {
@@ -482,12 +457,25 @@ interface issuerType {
 }
 
 const updateCredentialInformation = (context, credential) => {
-  credential.identifier = getIdentifier(context, credential);
-  credential.generatedOn = new Date();
-  credential.issuerLogo = context.selectedIssuer.logoUrl;
-  console.log(
-    'Response from downloadCredential',
-    JSON.stringify(credential, null, 4),
-  );
-  return credential;
+  let credentialWrapper: CredentialWrapper = {};
+  credentialWrapper.verifiableCredential = credential;
+  credentialWrapper.verifiableCredential.issuerLogo =
+    context.selectedIssuer.logoUrl;
+  credentialWrapper.identifier = getIdentifier(context, credential);
+  credentialWrapper.generatedOn = new Date();
+  credentialWrapper.issuerLogo = context.selectedIssuer.logoUrl;
+  return credentialWrapper;
+};
+
+const getVCMetadata = context => {
+  const [issuer, protocol, requestId] =
+    context.credentialWrapper?.identifier.split(':');
+  return VCMetadata.fromVC({
+    requestId: requestId ? requestId : null,
+    issuer: issuer,
+    protocol: protocol,
+    id: context.verifiableCredential?.credential.credentialSubject.UIN
+      ? context.verifiableCredential?.credential.credentialSubject.UIN
+      : context.verifiableCredential?.credential.credentialSubject.VID,
+  });
 };
diff --git a/machines/issuersMachine.typegen.ts b/machines/issuersMachine.typegen.ts
index 1bcad0d3..b07dc261 100644
--- a/machines/issuersMachine.typegen.ts
+++ b/machines/issuersMachine.typegen.ts
@@ -62,6 +62,7 @@ export interface Typegen0 {
     loadKeyPair: 'done.invoke.issuersMachine.performAuthorization:invocation[0]';
     logDownloaded: 'done.invoke.issuersMachine.verifyingCredential:invocation[0]';
     resetError: 'RESET_ERROR' | 'TRY_AGAIN';
+    setCredentialWrapper: 'done.invoke.issuersMachine.downloadCredentials:invocation[0]';
     setError: 'error.platform.issuersMachine.displayIssuers:invocation[0]';
     setIssuers: 'done.invoke.issuersMachine.displayIssuers:invocation[0]';
     setPrivateKey: 'done.invoke.issuersMachine.generateKeyPair:invocation[0]';
diff --git a/machines/vc.ts b/machines/vc.ts
index fb0f1e27..25880620 100644
--- a/machines/vc.ts
+++ b/machines/vc.ts
@@ -267,7 +267,9 @@ export const vcMachine =
           inProgressVcDownloads: new Set<string>(),
         }),
         setDownloadedVCFromOpenId4VCI: (context, event) => {
-          if (event.vc) context.vcs[event.vcMetadata.getVcKey()] = event.vc;
+          if (event.vc)
+            context.vcs[VCMetadata.fromVC(event.vcMetadata).getVcKey()] =
+              event.vc;
         },
 
         setVcUpdate: (context, event) => {
diff --git a/machines/vc.typegen.ts b/machines/vc.typegen.ts
index ab039ee4..b107f493 100644
--- a/machines/vc.typegen.ts
+++ b/machines/vc.typegen.ts
@@ -24,12 +24,14 @@ export interface Typegen0 {
     removeVcFromInProgressDownlods: 'REMOVE_VC_FROM_IN_PROGRESS_DOWNLOADS';
     removeVcFromMyVcs: 'REMOVE_VC_FROM_CONTEXT';
     resetAreAllVcsDownloaded: 'RESET_ARE_ALL_VCS_DOWNLOADED';
+    resetWalletBindingSuccess: 'RESET_WALLET_BINDING_SUCCESS';
     setDownloadedVCFromOpenId4VCI: 'VC_DOWNLOADED_FROM_OPENID4VCI';
     setDownloadedVc: 'VC_DOWNLOADED';
     setMyVcs: 'STORE_RESPONSE';
     setReceivedVcs: 'STORE_RESPONSE';
     setUpdatedVcMetadatas: 'VC_METADATA_UPDATED';
     setVcUpdate: 'VC_UPDATE';
+    setWalletBindingSuccess: 'WALLET_BINDING_SUCCESS';
     updateMyVcs: 'VC_METADATA_UPDATED';
   };
   eventsCausingDelays: {};
diff --git a/screens/Home/MyVcs/WalletBinding.tsx b/screens/Home/MyVcs/WalletBinding.tsx
index 46a280cf..dfce5cc0 100644
--- a/screens/Home/MyVcs/WalletBinding.tsx
+++ b/screens/Home/MyVcs/WalletBinding.tsx
@@ -11,6 +11,7 @@ import {Dimensions} from 'react-native';
 import {ActorRefFrom} from 'xstate';
 import {ExistingMosipVCItemMachine} from '../../../machines/VCItemMachine/ExistingMosipVCItem/ExistingMosipVCItemMachine';
 import testIDProps from '../../../shared/commonUtil';
+import {VCMetadata} from '../../../shared/VCMetadata';
 
 export const WalletBinding: React.FC<WalletBindingProps> = props => {
   const controller = useKebabPopUp(props);
@@ -104,4 +105,5 @@ interface WalletBindingProps {
   content?: string;
   Icon?: string;
   service: ActorRefFrom<typeof ExistingMosipVCItemMachine>;
+  vcMetadata: VCMetadata;
 }
diff --git a/screens/Home/MyVcsTab.tsx b/screens/Home/MyVcsTab.tsx
index 8ee7d9da..681d6b2f 100644
--- a/screens/Home/MyVcsTab.tsx
+++ b/screens/Home/MyVcsTab.tsx
@@ -116,21 +116,33 @@ export const MyVcsTab: React.FC<HomeScreenTabProps> = props => {
                   lineHeight={1}>
                   {t('bringYourDigitalID')}
                 </Text>
-                <Text
-                  style={Theme.TextStyles.bold}
-                  color={Theme.Colors.textLabel}
-                  align="center"
-                  margin="0 12 30 12">
-                  {t('generateVcDescription')}
-                </Text>
+
+                {isOpenId4VCIEnabled() && (
+                  <Text
+                    style={Theme.TextStyles.bold}
+                    color={Theme.Colors.textLabel}
+                    align="center"
+                    margin="0 12 30 12">
+                    {t('generateVcFABDescription')}
+                  </Text>
+                )}
                 {!isOpenId4VCIEnabled() && (
-                  <Button
-                    testID="downloadCard"
-                    type="gradient"
-                    disabled={controller.isRefreshingVcs}
-                    title={t('downloadCard')}
-                    onPress={controller.DOWNLOAD_ID}
-                  />
+                  <React.Fragment>
+                    <Text
+                      style={Theme.TextStyles.bold}
+                      color={Theme.Colors.textLabel}
+                      align="center"
+                      margin="0 12 30 12">
+                      {t('generateVcDescription')}
+                    </Text>
+                    <Button
+                      testID="downloadCard"
+                      type="gradient"
+                      disabled={controller.isRefreshingVcs}
+                      title={t('downloadCard')}
+                      onPress={controller.DOWNLOAD_ID}
+                    />
+                  </React.Fragment>
                 )}
               </Column>
             </React.Fragment>
diff --git a/screens/Home/ViewVcModal.strings.json b/screens/Home/ViewVcModal.strings.json
index 6824949b..95806862 100644
--- a/screens/Home/ViewVcModal.strings.json
+++ b/screens/Home/ViewVcModal.strings.json
@@ -7,11 +7,10 @@
   "revoke": "Revoke",
   "revoking": "Your wallet contains a credential with VID {{vid}}. Revoking this will automatically remove the same from the wallet. Are you sure you want to proceed?",
   "requestingOtp": "Requesting OTP...",
-  "editTag": "Rename",
   "redirecting": "Redirecting...",
   "success": {
     "unlocked": "Card successfully unlocked",
     "locked": "Card successfully locked",
     "revoked": "VID {{vid}} has been revoked. Any credential containing the same will be removed automatically from the wallet"
   }
-}
\ No newline at end of file
+}
diff --git a/screens/Home/ViewVcModal.tsx b/screens/Home/ViewVcModal.tsx
index 9d01fdd4..d82baf02 100644
--- a/screens/Home/ViewVcModal.tsx
+++ b/screens/Home/ViewVcModal.tsx
@@ -24,11 +24,6 @@ export const ViewVcModal: React.FC<ViewVcModalProps> = props => {
       icon: 'close-circle-outline',
       onPress: controller.CONFIRM_REVOKE_VC,
     },
-    {
-      label: t('editTag'),
-      icon: 'pencil',
-      onPress: controller.EDIT_TAG,
-    },
   ];
 
   return (
@@ -54,16 +49,6 @@ export const ViewVcModal: React.FC<ViewVcModalProps> = props => {
           />
         </Column>
       </Column>
-      {controller.isEditingTag && (
-        <TextEditOverlay
-          isVisible={controller.isEditingTag}
-          label={t('editTag')}
-          value={controller.vc.tag}
-          maxLength={12}
-          onDismiss={controller.DISMISS}
-          onSave={controller.SAVE_TAG}
-        />
-      )}
 
       {controller.isAcceptingRevokeInput && (
         <OIDcAuthenticationModal
diff --git a/screens/Home/ViewVcModalController.ts b/screens/Home/ViewVcModalController.ts
index cc1af26f..f4dbd015 100644
--- a/screens/Home/ViewVcModalController.ts
+++ b/screens/Home/ViewVcModalController.ts
@@ -9,7 +9,6 @@ import {
   selectOtpError,
   selectIsAcceptingOtpInput,
   selectIsAcceptingRevokeInput,
-  selectIsEditingTag,
   selectIsLockingVc,
   selectIsRevokingVc,
   selectIsLoggingRevoke,
@@ -116,7 +115,6 @@ export function useViewVcModal({
     reAuthenticating,
     isRevoking,
 
-    isEditingTag: useSelector(vcItemActor, selectIsEditingTag),
     isLockingVc,
     isAcceptingOtpInput: useSelector(vcItemActor, selectIsAcceptingOtpInput),
     isAcceptingRevokeInput: useSelector(
@@ -164,9 +162,6 @@ export function useViewVcModal({
     ADD_WALLET: () =>
       vcItemActor.send(ExistingMosipVCItemEvents.ADD_WALLET_BINDING_ID()),
     onSuccess,
-    EDIT_TAG: () => vcItemActor.send(ExistingMosipVCItemEvents.EDIT_TAG()),
-    SAVE_TAG: (tag: string) =>
-      vcItemActor.send(ExistingMosipVCItemEvents.SAVE_TAG(tag)),
     DISMISS: () => vcItemActor.send(ExistingMosipVCItemEvents.DISMISS()),
     LOCK_VC: () => vcItemActor.send(ExistingMosipVCItemEvents.LOCK_VC()),
     INPUT_OTP: (otp: string) =>
diff --git a/shared/VCMetadata.ts b/shared/VCMetadata.ts
index fa4e7732..d07b542c 100644
--- a/shared/VCMetadata.ts
+++ b/shared/VCMetadata.ts
@@ -1,7 +1,7 @@
 import {VC, VcIdType} from '../types/VC/ExistingMosipVC/vc';
 
 const VC_KEY_PREFIX = 'VC';
-const VC_ITEM_STORE_KEY_REGEX = '^VC_[a-z0-9-]+$';
+const VC_ITEM_STORE_KEY_REGEX = '^VC_[a-zA-Z0-9_-]+$';
 
 export class VCMetadata {
   idType: VcIdType | string = '';
@@ -24,9 +24,7 @@ export class VCMetadata {
     this.idType = idType;
     this.requestId = requestId;
     this.isPinned = isPinned;
-
     this.id = id;
-
     this.protocol = protocol;
     this.issuer = issuer;
   }
@@ -37,9 +35,7 @@ export class VCMetadata {
       idType: vc.idType,
       requestId: vc.requestId,
       isPinned: vc.isPinned || false,
-
       id: vc.id,
-
       protocol: vc.protocol,
       issuer: vc.issuer,
     });
@@ -57,12 +53,7 @@ export class VCMetadata {
   }
 
   static isVCKey(key: string): boolean {
-    //TODO: Check for VC downloaded via esignet as well
-    const [issuer, protocol, id] = key.split(':');
-
-    return (
-      key.startsWith('ESignet') || VCMetadata.vcKeyRegExp.exec(key) != null
-    );
+    return VCMetadata.vcKeyRegExp.exec(key) != null;
   }
 
   isFromOpenId4VCI() {
@@ -72,9 +63,6 @@ export class VCMetadata {
   // Used for mmkv storage purposes and as a key for components and vc maps
   // Update VC_ITEM_STORE_KEY_REGEX in case of changes in vckey
   getVcKey(): string {
-    // openid for vc -> issuer:protocol:vcID
-    //TODO: Separators for VC key to be maintained consistently
-    if (this.protocol) return `${this.issuer}_${this.protocol}_${this.id}`;
     return `${VC_KEY_PREFIX}_${this.requestId}`;
   }
 
diff --git a/shared/openId4VCI/Utils.ts b/shared/openId4VCI/Utils.ts
index 737f4b2f..5d9e290e 100644
--- a/shared/openId4VCI/Utils.ts
+++ b/shared/openId4VCI/Utils.ts
@@ -6,6 +6,7 @@ import pem2jwk from 'simple-pem2jwk';
 import {Issuers_Key_Ref} from '../../machines/issuersMachine';
 import {ENABLE_OPENID_FOR_VC} from 'react-native-dotenv';
 
+export const OpenId4VCIProtocol = 'OpenId4VCIProtocol';
 export const isOpenId4VCIEnabled = () => {
   return ENABLE_OPENID_FOR_VC === 'true';
 };
diff --git a/shared/vcjs/verifyCredential.ts b/shared/vcjs/verifyCredential.ts
index 7ce19df6..fe8b726d 100644
--- a/shared/vcjs/verifyCredential.ts
+++ b/shared/vcjs/verifyCredential.ts
@@ -5,7 +5,7 @@ import {Ed25519Signature2018} from '../../lib/jsonld-signatures/suites/ed2551920
 import {AssertionProofPurpose} from '../../lib/jsonld-signatures/purposes/AssertionProofPurpose';
 import {PublicKeyProofPurpose} from '../../lib/jsonld-signatures/purposes/PublicKeyProofPurpose';
 import {VerifiableCredential} from '../../types/VC/ExistingMosipVC/vc';
-import {Credential} from '../../components/VC copy/EsignetMosipVCItem/vc';
+import {Credential} from '../../types/VC/EsignetMosipVC/vc';
 
 // FIXME: Ed25519Signature2018 not fully supported yet.
 const ProofType = {
diff --git a/types/VC/EsignetMosipVC/vc.ts b/types/VC/EsignetMosipVC/vc.ts
index e6fe8e09..38d7d93a 100644
--- a/types/VC/EsignetMosipVC/vc.ts
+++ b/types/VC/EsignetMosipVC/vc.ts
@@ -68,8 +68,13 @@ export interface Credential {
 }
 
 export interface VerifiableCredential {
+  issuerLogo: string;
   format: string;
   credential: Credential;
+}
+
+export interface CredentialWrapper {
+  verifiableCredential: VerifiableCredential;
   identifier: string;
   generatedOn: Date;
   issuerLogo: string;