diff --git a/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/AddressDisplay.tsx b/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/AddressDisplay.tsx
new file mode 100644
index 000000000..a2f96279a
--- /dev/null
+++ b/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/AddressDisplay.tsx
@@ -0,0 +1,38 @@
+import { formatAddress } from '@/utils/format';
+import { copyToClipboard } from '@/utils/string';
+import { DocumentDuplicateIcon } from '@heroicons/react/24/outline';
+import { Tooltip } from '@nextui-org/react';
+import { useTranslations } from 'next-intl';
+
+export const AddressDisplay = ({ address }: { address: string }) => {
+  const t = useTranslations('AddressDisplay');
+  return (
+    <div className="flex flex-col space-y-0.5">
+      <h2 className="dark:text-navy-blue-200 pr-2 font-bold text-gray-800">
+        {t('title')}:
+      </h2>
+      <div className="flex">
+        <Tooltip
+          className="border-navy-blue-300 bg-navy-blue-100 text-navy-blue-700"
+          content={t('tooltip')}
+        >
+          <a
+            href={`https://etherscan.io/address/${address}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-md animated-transition dark:text-navy-blue-300 cursor-pointer font-normal text-gray-700 underline underline-offset-2"
+          >
+            {formatAddress(address)}
+          </a>
+        </Tooltip>
+        <button
+          type="button"
+          className="pl-1"
+          onClick={() => copyToClipboard(address)}
+        >
+          <DocumentDuplicateIcon className="animated-transition dark:text-navy-blue-300 ml-1 h-5 w-5 text-gray-700 hover:text-gray-700" />
+        </button>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/CredentialPanel.tsx b/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/CredentialPanel.tsx
index 27d58ee3a..61765c331 100644
--- a/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/CredentialPanel.tsx
+++ b/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/CredentialPanel.tsx
@@ -2,135 +2,28 @@
 
 import {
   CheckCircleIcon,
-  DocumentDuplicateIcon,
   ExclamationCircleIcon,
 } from '@heroicons/react/24/outline';
 import { Tooltip } from '@nextui-org/react';
 import type { VerifiableCredential } from '@veramo/core';
-import clsx from 'clsx';
 import { useTranslations } from 'next-intl';
 import { usePathname, useRouter } from 'next/navigation';
-import { Fragment, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
-import { DIDDisplay } from '@/components/DIDDisplay';
 import JsonModal from '@/components/JsonModal';
-import { formatAddress, getFirstWord } from '@/utils/format';
-import { convertTypes, copyToClipboard } from '@/utils/string';
-import { ImageLink } from '@/components/ImageLink';
+import { getFirstWord } from '@/utils/format';
+import { convertTypes } from '@/utils/string';
+import { Normal } from './templates/Normal';
+import { EduCTX } from './templates/EduCTX';
 
 interface FormattedPanelProps {
   credential: VerifiableCredential;
 }
 
-const AddressDisplay = ({ address }: { address: string }) => {
-  const t = useTranslations('AddressDisplay');
-  return (
-    <div className="flex flex-col space-y-0.5">
-      <h2 className="dark:text-navy-blue-200 pr-2 font-bold text-gray-800">
-        {t('title')}:
-      </h2>
-      <div className="flex">
-        <Tooltip
-          className="border-navy-blue-300 bg-navy-blue-100 text-navy-blue-700"
-          content={t('tooltip')}
-        >
-          <a
-            href={`https://etherscan.io/address/${address}`}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-md animated-transition dark:text-navy-blue-300 cursor-pointer font-normal text-gray-700 underline underline-offset-2"
-          >
-            {formatAddress(address)}
-          </a>
-        </Tooltip>
-        <button
-          type="button"
-          className="pl-1"
-          onClick={() => copyToClipboard(address)}
-        >
-          <DocumentDuplicateIcon className="animated-transition dark:text-navy-blue-300 ml-1 h-5 w-5 text-gray-700 hover:text-gray-700" />
-        </button>
-      </div>
-    </div>
-  );
-};
-
-const DisplayDate = ({ text, date }: { text: string; date: string }) => (
-  <div className="flex flex-col items-start space-y-0.5">
-    <h2 className="dark:text-navy-blue-200 pr-2 font-bold text-gray-800">
-      {text}:
-    </h2>
-    <h3 className="text-md dark:text-navy-blue-200 text-gray-700">
-      {new Date(Date.parse(date)).toDateString()}
-    </h3>
-  </div>
-);
-
-const CredentialSubject = ({
-  data,
-  viewJsonText,
-  selectJsonData,
-}: {
-  data: Record<string, any>;
-  viewJsonText: string;
-  selectJsonData: React.Dispatch<React.SetStateAction<any>>;
-}) => (
-  <>
-    {Object.entries(data).map(([key, value]: [string, any]) => {
-      if (value === null || value === '') return null;
-      return (
-        <Fragment key={key}>
-          {(() => {
-            if (key === 'id') {
-              return (
-                <>
-                  <div className="flex flex-col space-y-0.5">
-                    <div className="flex">
-                      <DIDDisplay did={value} />
-                    </div>
-                  </div>
-                </>
-              );
-            }
-
-            if (key === 'address') return <AddressDisplay address={value} />;
-            if (key === 'image') return <ImageLink value={value} />;
-
-            const isObject = !(
-              typeof value === 'string' || typeof value === 'number'
-            );
-            key = key.replace(/([A-Z])/g, ' $1').trim();
-            return (
-              <div
-                className={clsx(
-                  'flex w-full overflow-clip',
-                  isObject ? 'items-center' : 'flex-col items-start space-y-0.5'
-                )}
-              >
-                <h2 className="dark:text-navy-blue-200 pr-2 font-bold capitalize text-gray-800">
-                  {key}:
-                </h2>
-                <div className="text-md dark:text-navy-blue-300 w-full truncate font-normal text-gray-700">
-                  {isObject ? (
-                    <button
-                      type="button"
-                      className="dark:border-navy-blue-300 dark:hover:border-navy-blue-400 dark:focus:ring-navy-blue-500 rounded-md border border-gray-300 px-2 py-0.5 text-sm hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
-                      onClick={() => selectJsonData(value)}
-                    >
-                      {viewJsonText}
-                    </button>
-                  ) : (
-                    value
-                  )}
-                </div>
-              </div>
-            );
-          })()}
-        </Fragment>
-      );
-    })}
-  </>
-);
+enum Templates {
+  Normal = 0,
+  EduCTX = 1,
+}
 
 const CredentialPanel = ({ credential }: FormattedPanelProps) => {
   const t = useTranslations('CredentialPanel');
@@ -153,6 +46,47 @@ const CredentialPanel = ({ credential }: FormattedPanelProps) => {
     setJsonModalOpen(true);
   };
 
+  const template = useMemo(() => {
+    const credentialTypes = Array.isArray(credential.type)
+      ? credential.type
+      : [credential.type];
+
+    if (credentialTypes.includes('EducationCredential')) {
+      return Templates.EduCTX;
+    }
+
+    return Templates.Normal;
+  }, [credential]);
+
+  const renderTemplate = useMemo(() => {
+    switch (template) {
+      case Templates.EduCTX:
+        return (
+          <EduCTX
+            credential={credential}
+            title={{
+              subject: t('subject'),
+              issuer: t('issuer'),
+              dates: t('dates'),
+            }}
+          />
+        );
+      default:
+        return (
+          <Normal
+            credential={credential}
+            title={{
+              subject: t('subject'),
+              issuer: t('issuer'),
+              dates: t('dates'),
+            }}
+            viewJsonText={t('view-json')}
+            selectJsonData={selectJsonData}
+          />
+        );
+    }
+  }, [credential, template]);
+
   return (
     <>
       <div className="flex flex-col space-y-8">
@@ -193,53 +127,7 @@ const CredentialPanel = ({ credential }: FormattedPanelProps) => {
             </div>
           </div>
         </div>
-        <div className="flex flex-col space-y-8 px-6 md:flex-row md:space-x-16 md:space-y-0">
-          <div className="flex w-full flex-col items-start space-y-2 md:max-w-[50%]">
-            <h1 className="text-md dark:text-orange-accent-dark font-medium text-pink-500">
-              {t('subject')}
-            </h1>
-            <CredentialSubject
-              data={credential.credentialSubject}
-              viewJsonText={t('view-json')}
-              selectJsonData={selectJsonData}
-            />
-          </div>
-          <div className="flex flex-1">
-            <div className="flex flex-col space-y-8">
-              <div className="flex flex-col items-start justify-center space-y-2 ">
-                <h1 className="text-md dark:text-orange-accent-dark font-medium text-pink-500">
-                  {t('issuer')}
-                </h1>
-                <div className="flex flex-col space-y-0.5">
-                  <div className="flex">
-                    <DIDDisplay
-                      did={
-                        typeof credential.issuer === 'string'
-                          ? credential.issuer
-                          : credential.issuer.id
-                      }
-                    />
-                  </div>
-                </div>
-              </div>
-              <div className="flex flex-col items-start space-y-2">
-                <h1 className="text-md dark:text-orange-accent-dark font-medium text-pink-500">
-                  {t('dates')}
-                </h1>
-                <DisplayDate
-                  text="Issuance date"
-                  date={credential.issuanceDate}
-                />
-                {credential.expirationDate && (
-                  <DisplayDate
-                    text="Expiration date"
-                    date={credential.expirationDate}
-                  />
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
+        {renderTemplate}
         <div
           className="text-md dark:text-navy-blue-200 cursor-pointer px-6 font-medium text-gray-700"
           onClick={() => {
diff --git a/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/DisplayDate.tsx b/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/DisplayDate.tsx
new file mode 100644
index 000000000..3ef25789d
--- /dev/null
+++ b/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/DisplayDate.tsx
@@ -0,0 +1,13 @@
+export const DisplayDate = ({ text, date }: { text: string; date: string }) => {
+  const parsed = Date.parse(date);
+  return (
+    <div className="flex flex-col items-start space-y-0.5">
+      <h2 className="dark:text-navy-blue-200 pr-2 font-bold text-gray-800">
+        {text}:
+      </h2>
+      <h3 className="text-md dark:text-navy-blue-200 text-gray-700">
+        {!Number.isNaN(parsed) ? new Date(parsed).toLocaleDateString() : date}
+      </h3>
+    </div>
+  );
+};
diff --git a/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/DisplayText.tsx b/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/DisplayText.tsx
new file mode 100644
index 000000000..0a9a7a4c3
--- /dev/null
+++ b/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/DisplayText.tsx
@@ -0,0 +1,25 @@
+import { Tooltip } from '@nextui-org/react';
+
+export const DisplayText = ({
+  text,
+  value,
+  tooltip,
+}: { text: string; value: string; tooltip?: string }) => (
+  <div className="flex flex-col items-start space-y-0.5">
+    <h2 className="dark:text-navy-blue-200 pr-2 font-bold text-gray-800">
+      {text}:
+    </h2>
+    {tooltip ? (
+      <Tooltip
+        content={tooltip}
+        className="border-navy-blue-300 bg-navy-blue-100 text-navy-blue-700"
+      >
+        <h3 className="text-md dark:text-navy-blue-200 text-gray-700">
+          {value}
+        </h3>
+      </Tooltip>
+    ) : (
+      <h3 className="text-md dark:text-navy-blue-200 text-gray-700">{value}</h3>
+    )}
+  </div>
+);
diff --git a/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/FormattedView.tsx b/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/FormattedView.tsx
index 354265443..296e99985 100644
--- a/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/FormattedView.tsx
+++ b/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/FormattedView.tsx
@@ -7,46 +7,91 @@ import {
   InformationCircleIcon,
 } from '@heroicons/react/24/outline';
 import { Pagination, Tooltip } from '@nextui-org/react';
-import type { IVerifyResult, VerifiableCredential } from '@veramo/core';
+import type {
+  VerifiableCredential,
+  VerifiablePresentation,
+} from '@veramo/core';
 import { useTranslations } from 'next-intl';
 import { usePathname, useRouter } from 'next/navigation';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { VerificationInfoModal } from '@/components/VerificationInfoModal';
 import { copyToClipboard } from '@/utils/string';
 import CredentialPanel from './CredentialPanel';
 import { formatDid } from '@/utils/format';
+import {
+  type VerificationResult,
+  VerificationService,
+} from '@blockchain-lab-um/extended-verification';
+import { isError } from '@blockchain-lab-um/masca-connector';
+import { useToastStore } from '@/stores';
+
+const verifyPresentation = async (presentation: VerifiablePresentation) => {
+  await VerificationService.init();
+
+  const verifiedResult = await VerificationService.verify(presentation);
+
+  if (isError(verifiedResult)) {
+    console.error('Failed to verify presentation');
+    setTimeout(() => {
+      useToastStore.setState({
+        open: true,
+        title: 'Failed to verify presentation',
+        type: 'error',
+        loading: false,
+        link: null,
+      });
+    }, 200);
+    return { verified: false } as VerificationResult;
+  }
 
-export const FormattedView = ({
+  return verifiedResult.data;
+};
+
+export const FormattedView = async ({
   credential,
-  holder,
-  expirationDate,
-  issuanceDate,
+  presentation,
   page,
   total,
-  verificationResult,
 }: {
   credential: VerifiableCredential;
-  holder: string;
-  expirationDate: string | undefined;
-  issuanceDate: string | undefined;
+  presentation: VerifiablePresentation;
   page: string;
   total: number;
-  verificationResult: IVerifyResult;
 }) => {
   const t = useTranslations('FormattedView');
 
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const { holder, expirationDate, issuanceDate } = presentation;
+
   const [verificationInfoModalOpen, setVerificationInfoModalOpen] =
     useState(false);
 
-  const router = useRouter();
-  const pathname = usePathname();
+  const [verificationResult, setVerificationResult] =
+    useState<VerificationResult | null>(null);
 
   const isValid = useMemo(() => {
     if (!expirationDate) return true;
     return Date.parse(expirationDate) > Date.now();
   }, [expirationDate]);
 
+  useEffect(() => {
+    verifyPresentation(presentation)
+      .then((result) => setVerificationResult(result))
+      .catch((error) => {
+        console.error(error);
+        useToastStore.setState({
+          open: true,
+          title: t('verify-failed'),
+          type: 'error',
+          loading: false,
+          link: null,
+        });
+      });
+  }, [presentation]);
+
   return (
     <>
       <div className="dark:bg-navy-blue-800 relative h-full w-full rounded-3xl bg-white shadow-lg">
diff --git a/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/page.tsx b/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/page.tsx
index aec4abff8..8173fbafe 100644
--- a/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/page.tsx
+++ b/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/page.tsx
@@ -1,9 +1,7 @@
-import type { VerifiablePresentation } from '@veramo/core';
 import { decodeCredentialToObject } from '@veramo/utils';
 import { normalizeCredential } from 'did-jwt-vc';
 import { notFound } from 'next/navigation';
 
-import { getAgent } from '@/app/api/veramoSetup';
 import JsonPanel from '@/components/CredentialDisplay/JsonPanel';
 import { convertTypes } from '@/utils/string';
 import { FormattedView } from './FormattedView';
@@ -12,16 +10,6 @@ import { NormalViewButton } from './NormalViewButton';
 
 export const revalidate = 0;
 
-const verifyPresentation = async (presentation: VerifiablePresentation) => {
-  const agent = await getAgent();
-
-  const result = await agent.verifyPresentation({
-    presentation,
-  });
-
-  return result;
-};
-
 export default async function Page({
   params: { id },
   searchParams,
@@ -48,20 +36,15 @@ export default async function Page({
   const page = searchParams.page ?? '1';
   const view = searchParams.view ?? 'Normal';
 
-  const verificationResult = await verifyPresentation(presentation);
-
   return (
     <div className="flex w-full flex-1 items-start justify-center">
       <div className="max-w-full flex-1 md:max-w-3xl">
         {view === 'Normal' && (
           <FormattedView
             credential={credentials[Number.parseInt(page, 10) - 1]}
-            holder={presentation.holder}
-            expirationDate={presentation.expirationDate}
-            issuanceDate={presentation.issuanceDate}
+            presentation={presentation}
             page={page}
             total={credentials.length ?? 1}
-            verificationResult={verificationResult}
           />
         )}
         {view === 'Json' && (
diff --git a/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/templates/EduCTX.tsx b/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/templates/EduCTX.tsx
new file mode 100644
index 000000000..6e2a83643
--- /dev/null
+++ b/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/templates/EduCTX.tsx
@@ -0,0 +1,97 @@
+import type { VerifiableCredential } from '@veramo/core';
+import { DisplayDate } from '../DisplayDate';
+import { DisplayText } from '../DisplayText';
+import { DIDDisplay } from '@/components/DIDDisplay';
+
+const CredentialSubject = ({
+  data,
+}: {
+  data: Record<string, any>;
+}) => (
+  <>
+    <DisplayText text="Given Name" value={data?.currentGivenName} />
+    <DisplayText text="Family Name" value={data?.currentFamilyName} />
+    <DisplayText text="Achieved" value={data?.achieved?.title} />
+    <DisplayDate
+      text="Specified by"
+      date={data?.achieved?.specifiedBy?.title}
+    />
+    <DisplayText
+      text="Grade"
+      value={data?.achieved?.wasDerivedFrom?.grade}
+      tooltip={data?.achieved?.wasDerivedFrom?.title}
+    />
+  </>
+);
+
+type EduCTXProps = {
+  credential: VerifiableCredential;
+  title: {
+    subject: string;
+    issuer: string;
+    dates: string;
+  };
+};
+
+export const EduCTX = ({ credential, title }: EduCTXProps) => {
+  return (
+    <div className="flex flex-col space-y-8 px-6 md:flex-row md:space-x-16 md:space-y-0">
+      <div className="flex w-full flex-col items-start space-y-2 md:max-w-[50%]">
+        <h1 className="text-md dark:text-orange-accent-dark font-medium text-pink-500">
+          {title.subject}
+        </h1>
+        <CredentialSubject data={credential.credentialSubject} />
+      </div>
+      <div className="flex flex-1">
+        <div className="flex flex-col space-y-8">
+          <div className="flex flex-col items-start justify-center space-y-2 ">
+            <h1 className="text-md dark:text-orange-accent-dark font-medium text-pink-500">
+              {title.issuer}
+            </h1>
+            <DisplayText
+              text={'Awarding body'}
+              value={
+                credential.credentialSubject?.achieved?.wasAwardedBy
+                  ?.awardingBody
+              }
+              tooltip={
+                credential.credentialSubject?.achieved?.wasAwardedBy
+                  ?.awardingBodyDescription
+              }
+            />
+            <div className="flex flex-col space-y-0.5">
+              <div className="flex">
+                <DIDDisplay
+                  did={
+                    typeof credential.issuer === 'string'
+                      ? credential.issuer
+                      : credential.issuer.id
+                  }
+                />
+              </div>
+            </div>
+          </div>
+          <div className="flex flex-col items-start space-y-2">
+            <h1 className="text-md dark:text-orange-accent-dark font-medium text-pink-500">
+              {title.dates}
+            </h1>
+            <DisplayDate text="Issuance date" date={credential.issuanceDate} />
+            <DisplayDate
+              text="Awarding date"
+              date={
+                credential.credentialSubject?.achieved?.wasAwardedBy
+                  ?.awardingDate
+              }
+            />
+            {credential.expirationDate && (
+              <DisplayDate
+                text="Expiration date"
+                date={credential.expirationDate}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/templates/Normal.tsx b/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/templates/Normal.tsx
new file mode 100644
index 000000000..b245490e8
--- /dev/null
+++ b/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/templates/Normal.tsx
@@ -0,0 +1,138 @@
+import { DIDDisplay } from '@/components/DIDDisplay';
+import { Fragment } from 'react';
+import { AddressDisplay } from '../AddressDisplay';
+import { ImageLink } from '@/components/ImageLink';
+import clsx from 'clsx';
+import type { VerifiableCredential } from '@veramo/core';
+import { DisplayDate } from '../DisplayDate';
+
+const CredentialSubject = ({
+  data,
+  viewJsonText,
+  selectJsonData,
+}: {
+  data: Record<string, any>;
+  viewJsonText: string;
+  selectJsonData: React.Dispatch<React.SetStateAction<any>>;
+}) => (
+  <>
+    {Object.entries(data).map(([key, value]: [string, any]) => {
+      if (value === null || value === '') return null;
+      return (
+        <Fragment key={key}>
+          {(() => {
+            if (key === 'id') {
+              return (
+                <>
+                  <div className="flex flex-col space-y-0.5">
+                    <div className="flex">
+                      <DIDDisplay did={value} />
+                    </div>
+                  </div>
+                </>
+              );
+            }
+
+            if (key === 'address') return <AddressDisplay address={value} />;
+            if (key === 'image') return <ImageLink value={value} />;
+
+            const isObject = !(
+              typeof value === 'string' || typeof value === 'number'
+            );
+            key = key.replace(/([A-Z])/g, ' $1').trim();
+            return (
+              <div
+                className={clsx(
+                  'flex w-full overflow-clip',
+                  isObject ? 'items-center' : 'flex-col items-start space-y-0.5'
+                )}
+              >
+                <h2 className="dark:text-navy-blue-200 pr-2 font-bold capitalize text-gray-800">
+                  {key}:
+                </h2>
+                <div className="text-md dark:text-navy-blue-300 w-full truncate font-normal text-gray-700">
+                  {isObject ? (
+                    <button
+                      type="button"
+                      className="dark:border-navy-blue-300 dark:hover:border-navy-blue-400 dark:focus:ring-navy-blue-500 rounded-md border border-gray-300 px-2 py-0.5 text-sm hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
+                      onClick={() => selectJsonData(value)}
+                    >
+                      {viewJsonText}
+                    </button>
+                  ) : (
+                    value
+                  )}
+                </div>
+              </div>
+            );
+          })()}
+        </Fragment>
+      );
+    })}
+  </>
+);
+
+type NormalProps = {
+  credential: VerifiableCredential;
+  title: {
+    subject: string;
+    issuer: string;
+    dates: string;
+  };
+  viewJsonText: string;
+  selectJsonData: (data: any) => void;
+};
+
+export const Normal = ({
+  credential,
+  title,
+  viewJsonText,
+  selectJsonData,
+}: NormalProps) => {
+  return (
+    <div className="flex flex-col space-y-8 px-6 md:flex-row md:space-x-16 md:space-y-0">
+      <div className="flex w-full flex-col items-start space-y-2 md:max-w-[50%]">
+        <h1 className="text-md dark:text-orange-accent-dark font-medium text-pink-500">
+          {title.subject}
+        </h1>
+        <CredentialSubject
+          data={credential.credentialSubject}
+          viewJsonText={viewJsonText}
+          selectJsonData={selectJsonData}
+        />
+      </div>
+      <div className="flex flex-1">
+        <div className="flex flex-col space-y-8">
+          <div className="flex flex-col items-start justify-center space-y-2 ">
+            <h1 className="text-md dark:text-orange-accent-dark font-medium text-pink-500">
+              {title.issuer}
+            </h1>
+            <div className="flex flex-col space-y-0.5">
+              <div className="flex">
+                <DIDDisplay
+                  did={
+                    typeof credential.issuer === 'string'
+                      ? credential.issuer
+                      : credential.issuer.id
+                  }
+                />
+              </div>
+            </div>
+          </div>
+          <div className="flex flex-col items-start space-y-2">
+            <h1 className="text-md dark:text-orange-accent-dark font-medium text-pink-500">
+              {title.dates}
+            </h1>
+            <DisplayDate text="Issuance date" date={credential.issuanceDate} />
+            {credential.expirationDate && (
+              <DisplayDate
+                text="Expiration date"
+                date={credential.expirationDate}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/dapp/src/messages/en.json b/packages/dapp/src/messages/en.json
index 335a45b84..6d37707da 100644
--- a/packages/dapp/src/messages/en.json
+++ b/packages/dapp/src/messages/en.json
@@ -282,15 +282,15 @@
     "invalid": "Invalid",
     "presentation-status": "Status",
     "presentation-valid": "Presentation is valid",
-    "presentation-invalid": "Presentation is invalid"
+    "presentation-invalid": "Presentation is invalid",
+    "verify-failed": "Failed to verify presentation"
   },
   "CredentialPanel": {
     "title": "Credential",
     "status": "Status",
     "dates": "DATES",
-    "expiration-date": "Expiration Date",
     "issuer": "ISSUER",
-    "isuance-date": "Issuance Date",
+    "issuance-date": "Issuance Date",
     "subject": "SUBJECT",
     "view-json": "View JSON",
     "credential-valid": "Credential is valid",