diff --git a/cypress/e2e/get-credentials.cy.js b/cypress/e2e/get-credentials.cy.js
index 46de0183e1..e6da4b28ee 100644
--- a/cypress/e2e/get-credentials.cy.js
+++ b/cypress/e2e/get-credentials.cy.js
@@ -13,7 +13,7 @@ function init(route) {
 }
 
 function checkRequestAccessEdgeCase() {
-  cy.get('a[data-cy="accessDetails-edgeCase-btn"]').should('be.visible');
+  cy.get('[data-cy="accessDetails-edgeCase-btn"]').should('be.visible');
 };
 
 function getIframeBody() {
@@ -47,7 +47,12 @@ function checkReturnFlow(credentialType) {
 
   // verify clicking on cancel button closes the form
   cy.get('[data-cy="cancel-new-credential"]').click();
-  cy.get('[data-cy="return-flow"]').should('be.visible');
+  // cy.get('[data-cy="return-flow"]').should('be.visible');
+  cy.get('body').then(($body) => {
+    if ($body.find('[data-cy="return-flow"]').length) {
+      cy.get('[data-cy="return-flow"]').should('be.visible');
+    }
+  });
 
   // verify clicking on manage projects console button exists
   cy.get('[data-cy="manage-projects-console"]').should('exist');
@@ -60,6 +65,14 @@ function checkReturnFlow(credentialType) {
 };
 
 function checkAPIKey() {
+
+  // Check if the collapse open button is present and click it if it is
+  cy.get('body').then(($body) => {
+    if ($body.find('[data-cy="collapse-open"]').length) {
+      cy.get('[data-cy="collapse-open"]').click();
+    }
+  });
+
   // verify API key is visible
   cy.contains('API Key').should('be.visible');
 
@@ -75,7 +88,19 @@ function checkAPIKey() {
 }
 
 function checkOAuthS2S() {
-  cy.get('div[data-cy="generate-token"]').should('be.visible');
+
+  // Check if the collapse open button is present and click it if it is
+  cy.get('body').then(($body) => {
+    if ($body.find('[data-cy="collapse-open"]').length) {
+      cy.get('[data-cy="collapse-open"]').click();
+    }
+  });
+
+  cy.get('body').then(($body) => {
+    if ($body.find('[data-cy="generate-token"]').length) {
+      cy.get('[data-cy="generate-token"]').should('be.visible');
+    }
+  });
   // cy.get('button[data-cy="copy-token"]').should('exist');
   cy.get('[data-cy="credentialName-link"]').should('exist');
   cy.get('[data-cy="ClientId-copyIcon"]').should('exist');
@@ -119,7 +144,11 @@ function addCredential(credentialType) {
   cy.get('[data-cy="create-credential-btn"]').should('be.enabled');
   cy.get('[data-cy="create-credential-btn"]').click();
   if (credentialType === API_KEY) {
-    cy.get('button[data-cy="restart-download"]').should('be.visible').should('be.enabled').click();
+    cy.get('body').then(($body) => {
+      if ($body.find('button[data-cy="restart-download"]').length) {
+        cy.get('button[data-cy="restart-download"]').should('be.visible').should('be.enabled').click();
+      }
+    });
   }
   checkCredential(credentialType);
   cy.get('[data-cy="Restart-new-credential"]').click();
diff --git a/example/src/pages/credential/GetCredentialApiKey.js b/example/src/pages/credential/GetCredentialApiKey.js
index 0c4e1b1eb0..199ba3d0a7 100644
--- a/example/src/pages/credential/GetCredentialApiKey.js
+++ b/example/src/pages/credential/GetCredentialApiKey.js
@@ -59,7 +59,7 @@ const GetCredentialApiKey = () => {
 
         <GetCredential.Card.DevConsoleLink heading="Developer Console Project" />
 
-        <GetCredential.Card.CredentialDetails heading="Credential details">
+        <GetCredential.Card.CredentialDetails heading="Credential details" orderBy="APIKey,OrganizationName,ImsOrgID,AllowedOrigins">
           <GetCredential.Card.CredentialDetails.APIKey heading="API Key" />
           <GetCredential.Card.CredentialDetails.AllowedOrigins heading="Allowed domains" />
           <GetCredential.Card.CredentialDetails.OrganizationName heading="Organization" />
@@ -68,7 +68,7 @@ const GetCredentialApiKey = () => {
 
       </GetCredential.Card>
 
-      <GetCredential.Return title="Previously created projects" paragraph="Select a project and access your existing credentials for Firefly - Firefly and Creative Cloud Automation." className="card_developer_console" nextStepsLabel="Next steps" nextStepsHref="/credentials/nextsteps">
+      <GetCredential.Return title="Previously created projects" paragraph="Select a project and access your existing credentials for Firefly - Firefly and Creative Cloud Automation." className="card_developer_console" nextStepsLabel="Next steps" nextStepsHref="/credentials/nextsteps" isCollapsable="true" >
 
         <GetCredential.Return.Side>
           <GetCredential.Return.Side.Custom>
@@ -80,7 +80,7 @@ const GetCredentialApiKey = () => {
           <GetCredential.Return.Side.NewCredential heading="Need another credential?" buttonLabel="Create new credential" />
         </GetCredential.Return.Side>
 
-        <GetCredential.Return.CredentialDetails heading="Credential details">
+        <GetCredential.Return.CredentialDetails heading="Credential details" orderBy="APIKey,OrganizationName,ImsOrgID,AllowedOrigins">
           <GetCredential.Return.CredentialDetails.APIKey heading="API Key" />
           <GetCredential.Return.CredentialDetails.AllowedOrigins heading="Allowed domains" />
           <GetCredential.Return.CredentialDetails.OrganizationName heading="Organization" />
diff --git a/example/src/pages/credential/GetCredentialOAuthS2s.js b/example/src/pages/credential/GetCredentialOAuthS2s.js
index 47b190015f..8095c86279 100644
--- a/example/src/pages/credential/GetCredentialOAuthS2s.js
+++ b/example/src/pages/credential/GetCredentialOAuthS2s.js
@@ -106,7 +106,7 @@ const GetCredentialOAuthS2s = () => {
 
         <GetCredential.Card.AccessToken helpText="" buttonLabel="Generate and copy token" heading="Access Token" />
 
-        <GetCredential.Card.CredentialDetails heading="Credential details">
+        <GetCredential.Card.CredentialDetails heading="Credential details" orderBy="ClientId,Scopes,ClientSecret,ImsOrgID">
           <GetCredential.Card.CredentialDetails.ClientId heading="ClientId" />
           <GetCredential.Card.CredentialDetails.ClientSecret heading="Client Secret" buttonLabel="Retrieve and copy client secret" />
           <GetCredential.Card.CredentialDetails.Scopes heading="Scopes" scope="openid, AdobeID, read_organizations, firefly_api, ff_apis" />
@@ -115,7 +115,7 @@ const GetCredentialOAuthS2s = () => {
 
       </GetCredential.Card>
 
-      <GetCredential.Return title="Previously created projects" paragraph="Select a project and access your existing credentials for Firefly - Firefly and Creative Cloud Automation." devConsoleDirection="/console" nextStepsLabel="Next steps" nextStepsHref="/credentials/nextsteps" developerConsoleManage="Manage on Developer Console" className="card_developer_console">
+      <GetCredential.Return title="Previously created projects" paragraph="Select a project and access your existing credentials for Firefly - Firefly and Creative Cloud Automation." devConsoleDirection="/console" nextStepsLabel="Next steps" nextStepsHref="/credentials/nextsteps" developerConsoleManage="Manage on Developer Console" className="card_developer_console" isCollapsable="true">
 
         <GetCredential.Return.Side>
           <GetCredential.Return.Side.Custom>
@@ -127,7 +127,7 @@ const GetCredentialOAuthS2s = () => {
           <GetCredential.Return.Side.NewCredential heading="Need another credential?" buttonLabel="Create new credential" />
         </GetCredential.Return.Side>
 
-        <GetCredential.Return.CredentialDetails heading="Credential details">
+        <GetCredential.Return.CredentialDetails heading="Credential details" orderBy="ClientId,Scopes,ClientSecret,ImsOrgID">
           <GetCredential.Return.CredentialDetails.ClientId heading="ClientId" />
           <GetCredential.Return.CredentialDetails.ClientSecret heading="Client Secret" buttonLabel="Retrieve and copy client secret" />
           <GetCredential.Return.CredentialDetails.Scopes heading="Scopes" scope="openid, AdobeID, read_organizations, firefly_api, ff_apis" />
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardAPIKey.js b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardAPIKey.js
index 235d2e1009..cb8243b4d2 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardAPIKey.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardAPIKey.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import ShowCard from './ShowCard';
 
-const CardAPIKey = ({ val: { heading, apiKey } }) => {
+const CardAPIKey = ({ cardAPIKey, apiKey }) => {
   return (
-    heading && <ShowCard heading={heading} value={apiKey} />
+    <ShowCard heading={cardAPIKey?.heading} value={apiKey} />
   )
 }
 
-export { CardAPIKey };
\ No newline at end of file
+export { CardAPIKey };
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardAllowedOrigins.js b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardAllowedOrigins.js
index 3cb2b09732..0ba25ac27c 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardAllowedOrigins.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardAllowedOrigins.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import ShowCard from './ShowCard';
 
-const CardAllowedOrigins = ({ val: { heading, allowedOrigins } }) => {
+const CardAllowedOrigins = ({ cardAllowedOrigins, allowedOrigins }) => {
   return (
-    heading && <ShowCard heading={heading} value={allowedOrigins} />
+    <ShowCard heading={cardAllowedOrigins?.heading} value={allowedOrigins} />
   )
 }
 
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientDetails.js b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientDetails.js
index 2882dd83e1..0eae54b4a4 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientDetails.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientDetails.js
@@ -9,16 +9,6 @@ import { CardScopes } from './CardScopes';
 import { CardImsOrgID } from './CardImsOrgID';
 import GetCredentialContext from '../GetCredentialContext';
 
-const COMPONENT_MAP = {
-  "CardAPIKey": CardAPIKey,
-  "CardAllowedOrigins": CardAllowedOrigins,
-  "CardClientId": CardClientId,
-  "CardClientSecret": CardClientSecret,
-  "CardOrganizationName": CardOrganizationName,
-  "CardScopes": CardScopes,
-  "CardImsOrgID": CardImsOrgID
-};
-
 const CardClientDetails = ({
   clientDetails,
   clientIdDetails,
@@ -30,42 +20,12 @@ const CardClientDetails = ({
   organizationName,
   allowedOrigins,
   response,
-  imsOrgID,
-  myCredentialFields
+  imsOrgID
 }) => {
 
   const { selectedOrganization } = useContext(GetCredentialContext);
 
-  const cardCompDetails = {
-    "CardAPIKey": {
-      heading: apiKeyDetails?.heading,
-      apiKey: response?.['apiKey']
-    },
-    "CardAllowedOrigins": {
-      heading: allowedOrigins?.heading,
-      allowedOrigins: allowedOriginsDetails,
-    },
-    "CardClientId": {
-      heading: clientIdDetails?.heading,
-      clientId: response?.['apiKey']
-    },
-    "CardClientSecret": {
-      cardClientSecret: clientSecretDetails,
-      response
-    },
-    "CardOrganizationName": {
-      heading: organizationDetails?.heading,
-      organization: organizationName?.name
-    },
-    "CardScopes": {
-      heading: scopesDetails?.heading,
-      scope: scopesDetails?.scope
-    },
-    "CardImsOrgID": {
-      heading: imsOrgID?.heading,
-      imsOrgId: selectedOrganization?.code
-    }
-  };
+  const splitedOrderBy = clientDetails?.orderBy ? clientDetails?.orderBy?.split(',') : [];
 
   return (
     <div
@@ -75,10 +35,46 @@ const CardClientDetails = ({
         gap: 32px;
       `}>
       <h4 className="spectrum-Heading spectrum-Heading--sizeS">{clientDetails?.heading}</h4>
-      {myCredentialFields?.[CardClientDetails]?.children.map(({ type }, index) => {
-        const Component = COMPONENT_MAP[type?.name];
-        return Component ? <Component key={index} val={cardCompDetails[type?.name]} /> : null;
-      })}
+
+      {
+        splitedOrderBy?.length > 0 ?
+          <>
+            {splitedOrderBy?.map((list) => {
+              if (list === "APIKey") {
+                return apiKeyDetails && <CardAPIKey cardClientDetails={clientDetails} cardAPIKey={apiKeyDetails} apiKey={response?.['apiKey']} />
+              }
+              if (list === "AllowedOrigins") {
+                return allowedOrigins && <CardAllowedOrigins cardClientDetails={clientDetails} cardAllowedOrigins={allowedOrigins} allowedOrigins={allowedOriginsDetails} />
+              }
+              if (list === "ImsOrgID") {
+                return imsOrgID && <CardImsOrgID cardClientDetails={clientDetails} cardImsOrgID={imsOrgID} imsOrgId={selectedOrganization?.code} />
+              }
+              if (list === "OrganizationName") {
+                return organizationDetails && <CardOrganizationName cardClientDetails={clientDetails} cardOrganizationName={organizationDetails} organization={organizationName?.name} />
+              }
+              if (list === "ClientId") {
+                return clientIdDetails && <CardClientId cardClientDetails={clientDetails} cardClientId={clientIdDetails} clientId={response?.['apiKey']} />
+              }
+              if (list === "ClientSecret") {
+                return clientSecretDetails && <CardClientSecret cardClientDetails={clientDetails} cardClientSecret={clientSecretDetails} response={response} />
+              }
+              if (list === "Scopes") {
+                return scopesDetails && <CardScopes cardClientDetails={clientDetails} cardScopes={scopesDetails} />
+              }
+            })}
+          </>
+          :
+          <>
+            {apiKeyDetails && (<CardAPIKey cardClientDetails={clientDetails} cardAPIKey={apiKeyDetails} apiKey={response?.['apiKey']} />)}
+            {clientIdDetails && (<CardClientId cardClientDetails={clientDetails} cardClientId={clientIdDetails} clientId={response?.['apiKey']} />)}
+            {allowedOrigins && (<CardAllowedOrigins cardClientDetails={clientDetails} cardAllowedOrigins={allowedOrigins} allowedOrigins={allowedOriginsDetails} />)}
+            {clientSecretDetails && (<CardClientSecret cardClientDetails={clientDetails} cardClientSecret={clientSecretDetails} response={response} />)}
+            {organizationDetails && (<CardOrganizationName cardClientDetails={clientDetails} cardOrganizationName={organizationDetails} organization={organizationName?.name} />)}
+            {scopesDetails && <CardScopes cardClientDetails={clientDetails} cardScopes={scopesDetails} />}
+            {imsOrgID && (<CardImsOrgID cardClientDetails={clientDetails} cardImsOrgID={imsOrgID} imsOrgId={selectedOrganization?.code} />)}
+          </>
+      }
+
     </div>
   );
 };
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientId.js b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientId.js
index 5768f735fc..f8a024fb10 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientId.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientId.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import ShowCard from './ShowCard'
 
-const CardClientId = ({ val: { heading, clientId } }) => {
+const CardClientId = ({ cardClientId, clientId }) => {
   return (
-    heading && <ShowCard heading={heading} value={clientId} />
+    <ShowCard heading={cardClientId?.heading} value={clientId} />
   )
 }
 
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientSecret.js b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientSecret.js
index fd532163fa..b9a93a9491 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientSecret.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientSecret.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import ShowCard from './ShowCard';
 
-const CardClientSecret = ({ val : { cardClientSecret, response }}) => {
+const CardClientSecret = ({ cardClientSecret, response }) => {
   return (
-    cardClientSecret && <ShowCard heading={cardClientSecret?.heading} isClientSecret buttonLabel={cardClientSecret?.buttonLabel} response={response} />
+    <ShowCard heading={cardClientSecret?.heading} isClientSecret buttonLabel={cardClientSecret?.buttonLabel} response={response} />
   )
 }
 
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardImsOrgID.js b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardImsOrgID.js
index 5b570ff6f8..7b42d88442 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardImsOrgID.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardImsOrgID.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import ShowCard from './ShowCard';
 
-const CardImsOrgID = ({ val: { heading, imsOrgId } }) => {
-  return heading && <ShowCard heading={heading} value={imsOrgId} />
+const CardImsOrgID = ({ cardImsOrgID, imsOrgId }) => {
+  return <ShowCard heading={cardImsOrgID?.heading} value={imsOrgId} />;
 };
 
 export { CardImsOrgID };
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardOrganizationName.js b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardOrganizationName.js
index bf24961c40..7ed147c6ff 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardOrganizationName.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardOrganizationName.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import ShowCard from './ShowCard';
 
-const CardOrganizationName = ({ val: { heading, organization } }) => {
+const CardOrganizationName = ({ cardOrganizationName, organization }) => {
   return (
-    heading && <ShowCard heading={heading} value={organization} isOraganization />
+    <ShowCard heading={cardOrganizationName?.heading} value={organization} isOraganization />
   )
 }
 
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardScopes.js b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardScopes.js
index 867d4d59ba..9c370c71fa 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardScopes.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardScopes.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import ShowCard from './ShowCard';
 
-const CardScopes = ({ val: { heading, scope } }) => {
+const CardScopes = ({ cardScopes }) => {
   return (
-    heading && <ShowCard heading={heading} value={scope} />
+    <ShowCard heading={cardScopes?.heading} value={cardScopes?.scope} />
   )
 }
 export { CardScopes };
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/CredentialDetailsCard.js b/packages/gatsby-theme-aio/src/components/GetCredential/CredentialDetailsCard.js
index b1aba267d0..54031b31df 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/CredentialDetailsCard.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/CredentialDetailsCard.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { MAX_TABLET_SCREEN_WIDTH, MIN_MOBILE_WIDTH } from './FormFields';
 import { css } from '@emotion/react';
 import { AccessToken } from './Card/AccessToken';
@@ -19,7 +19,7 @@ import { ReturnScopes } from './Return/ReturnScopes';
 import { ReturnAPIKey } from './Return/ReturnAPIKey';
 import { ReturnAllowedOrigins } from './Return/ReturnAllowedOrigins';
 import { ReturnOrganizationName } from './Return/ReturnOrganizationName';
-import { KeyIcon, LinkOut } from './Icons';
+import { ArrowDown, ArrowRight, KeyIcon, LinkOut } from './Icons';
 import { CardImsOrgID } from './Card/CardImsOrgID';
 
 export const CredentialDetailsCard = ({
@@ -37,10 +37,11 @@ export const CredentialDetailsCard = ({
   developerConsoleManage,
   response,
   myCredentialFields,
-  returnFields
+  returnFields,
+  collapse
 }) => {
 
-  let accessToken, devConsoleLinkHeading, clientDetails, clientIdDetails, clientSecretDetails, organizationDetails, scopesDetails, apiKeyDetails, allowedOrigins , imsOrgID;
+  let accessToken, devConsoleLinkHeading, clientDetails, clientIdDetails, clientSecretDetails, organizationDetails, scopesDetails, apiKeyDetails, allowedOrigins, imsOrgID;
   if (myCredentialFields) {
     accessToken = myCredentialFields[AccessToken];
     devConsoleLinkHeading = myCredentialFields[DevConsoleLink]?.heading;
@@ -66,6 +67,19 @@ export const CredentialDetailsCard = ({
     imsOrgID = returnFields?.[CardImsOrgID];
   }
 
+  const bool = collapse === "true" ? true : false;
+  const [isCollapse, setIsCollapse] = useState(false);
+
+  const handleCollapse = () => {
+    setIsCollapse(!isCollapse);
+  }
+
+  useEffect(() => {
+    if (!bool) {
+      setIsCollapse(true);
+    }
+  }, [bool])
+
   return (
     <>
       <div
@@ -91,70 +105,87 @@ export const CredentialDetailsCard = ({
             css={css`
               display: flex;
               gap: 20px;
-              align-items: flex-start;
+              align-items: center;
+              justify-content: space-between;
             `}>
-            <KeyIcon />
             <div
               css={css`
+              display: flex;
+              gap: 20px;
+              align-items: flex-start;
+            `}
+            >
+              <KeyIcon />
+              <div
+                css={css`
                 display: flex;
                 flex-direction: column;
                 gap: 8px;
               `}>
-              <h3 className="spectrum-Heading spectrum-Heading--sizeM">{credentialName}</h3>
-              <div
-                css={css`
+                <h3 className="spectrum-Heading spectrum-Heading--sizeM">{credentialName}</h3>
+                <div
+                  css={css`
                   display: flex;
                   gap: 10px;
                   align-items: center;
                 `}>
-                {productList && <ProductComponent productList={productList} />}
+                  {productList && <ProductComponent productList={productList} />}
+                </div>
               </div>
             </div>
+            {
+              bool &&
+              <div role="button" css={css`cursor:pointer`} data-cy="collapse-open" onClick={handleCollapse}>
+                {isCollapse ? <ArrowDown /> : <ArrowRight />}
+              </div>
+            }
           </div>
 
-          <hr
-            css={css`
-              margin: 0;
-              border: none;
-              border-top: 1px solid #d0d0d0 !important;
-            `}
-          />
-          <div
-            css={css`
+          {isCollapse &&
+            <>
+              <hr
+                css={css`
+                  margin: 0;
+                  border: none;
+                  border-top: 1px solid #d0d0d0 !important;
+                `}
+              />
+              <div
+                css={css`
               display: flex;
               flex-direction: column;
               gap: 32px;
             `}>
-            {accessToken && <AccessTokenComponent accessToken={accessToken} response={response} scopesDetails={scopesDetails} />}
+                {accessToken && <AccessTokenComponent accessToken={accessToken} response={response} scopesDetails={scopesDetails} />}
 
-            {devConsoleLinkHeading && (
-              <DevConsoleLinkComponent
-                devConsoleLinkHeading={devConsoleLinkHeading}
-                credentialName={credentialName}
-                projectId={response?.projectId ? response?.projectId : response?.id}
-              />
-            )}
+                {devConsoleLinkHeading && (
+                  <DevConsoleLinkComponent
+                    devConsoleLinkHeading={devConsoleLinkHeading}
+                    credentialName={credentialName}
+                    projectId={response?.projectId ? response?.projectId : response?.id}
+                  />
+                )}
 
-            {clientDetails && (
-              <ClientDetailsComponent
-                clientDetails={clientDetails}
-                clientIdDetails={clientIdDetails}
-                clientSecretDetails={clientSecretDetails}
-                organizationDetails={organizationDetails}
-                scopesDetails={scopesDetails}
-                apiKeyDetails={apiKeyDetails}
-                allowedOriginsDetails={allowedOriginsDetails}
-                organizationName={organizationName}
-                allowedOrigins={allowedOrigins}
-                response={response}
-                imsOrgID={imsOrgID}
-                returnFields={returnFields}
-                myCredentialFields={myCredentialFields}
-              />
-            )}
+                {clientDetails && (
+                  <ClientDetailsComponent
+                    clientDetails={clientDetails}
+                    clientIdDetails={clientIdDetails}
+                    clientSecretDetails={clientSecretDetails}
+                    organizationDetails={organizationDetails}
+                    scopesDetails={scopesDetails}
+                    apiKeyDetails={apiKeyDetails}
+                    allowedOriginsDetails={allowedOriginsDetails}
+                    organizationName={organizationName}
+                    allowedOrigins={allowedOrigins}
+                    response={response}
+                    imsOrgID={imsOrgID}
+                    returnFields={returnFields}
+                    myCredentialFields={myCredentialFields}
+                  />
+                )}
 
-            <div
-              css={css`
+                <div
+                  css={css`
                 display: flex;
                 gap: 24px;
                 align-items: end;
@@ -164,49 +195,51 @@ export const CredentialDetailsCard = ({
                   align-items: start;
                 }
               `}>
-              {nextButtonLabel &&
-                <a href={nextButtonLink} target="_blank" rel="noreferrer" data-cy="next-step-button">
-                  <button
-                    className={`spectrum-Button spectrum-Button--outline spectrum-Button--primary spectrum-Button--sizeM`}
-                    css={css`
+                  {nextButtonLabel &&
+                    <a href={nextButtonLink} target="_blank" rel="noreferrer" data-cy="next-step-button">
+                      <button
+                        className={`spectrum-Button spectrum-Button--outline spectrum-Button--primary spectrum-Button--sizeM`}
+                        css={css`
                     width: fit-content;
                     margin-top: 10px;
                   `}>
-                    <span className="spectrum-Button-label">{nextButtonLabel}</span>
-                  </button>
-                </a>}
-              {developerConsoleManage &&
-                <a
-                  href={devConsoleLink}
-                  target="_blank"
-                  rel="noreferrer"
-                  css={css`
+                        <span className="spectrum-Button-label">{nextButtonLabel}</span>
+                      </button>
+                    </a>}
+                  {developerConsoleManage &&
+                    <a
+                      href={devConsoleLink}
+                      target="_blank"
+                      rel="noreferrer"
+                      css={css`
                   color: var(--spectrum-global-color-gray-800);
                   margin: 2px 0;
                   &:hover {
                     color: var(--spectrum-global-color-gray-900);
                   }
                 `}
-                  data-cy="Manage-Dev-Console-link">
-                  <div
-                    css={css`
+                      data-cy="Manage-Dev-Console-link">
+                      <div
+                        css={css`
                     display: flex;
                   `}>
-                    <div className='spectrum-Body spectrum-Body--sizeS'>{developerConsoleManage}</div>
-                    <div
-                      css={css`
+                        <div className='spectrum-Body spectrum-Body--sizeS'>{developerConsoleManage}</div>
+                        <div
+                          css={css`
                       margin-left:10px;
                       @media screen and (min-width:${MIN_MOBILE_WIDTH}) and (max-width:${MAX_TABLET_SCREEN_WIDTH}){
                         display:none;
                       }
                     }`}>
-                      <LinkOut />
-                    </div>
-                  </div>
-                </a>
-              }
-            </div>
-          </div>
+                          <LinkOut />
+                        </div>
+                      </div>
+                    </a>
+                  }
+                </div>
+              </div>
+            </>
+          }
         </div>
       </div>
     </>
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Icons.js b/packages/gatsby-theme-aio/src/components/GetCredential/Icons.js
index 765c8f03f9..5cf4c542d0 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Icons.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Icons.js
@@ -63,3 +63,19 @@ export const AlertIcon = () => {
     </svg>
   )
 }
+
+export const ArrowDown = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" height="25" viewBox="0 0 18 18" width="25">
+      <rect id="Canvas" fill="#ff13dc" opacity="0" width="25" height="25" /><path class="fill" d="M4,7.01a1,1,0,0,1,1.7055-.7055l3.289,3.286,3.289-3.286a1,1,0,0,1,1.437,1.3865l-.0245.0245L9.7,11.7075a1,1,0,0,1-1.4125,0L4.293,7.716A.9945.9945,0,0,1,4,7.01Z" />
+    </svg>
+  )
+}
+
+export const ArrowRight = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" height="25" viewBox="0 0 18 18" width="25">
+      <rect id="Canvas" fill="#ff13dc" opacity="0" width="25" height="25" /><path class="fill" d="M12,9a.994.994,0,0,1-.2925.7045l-3.9915,3.99a1,1,0,1,1-1.4355-1.386l.0245-.0245L9.5905,9,6.3045,5.715A1,1,0,0,1,7.691,4.28l.0245.0245,3.9915,3.99A.994.994,0,0,1,12,9Z" />
+    </svg>
+  )
+}
\ No newline at end of file
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/PreviousCredential.js b/packages/gatsby-theme-aio/src/components/GetCredential/PreviousCredential.js
index d04243f1bf..b062bf563c 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/PreviousCredential.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/PreviousCredential.js
@@ -18,7 +18,7 @@ const PreviousCredential = ({ setIsCreateNewCredential }) => {
   const returnProps = getCredentialData;
 
   const [isShow, setIsShow] = useState(false);
-  const credentialHeader = returnProps[CredentialForm];
+  const credentialHeader = returnProps?.[CredentialForm];
   const { selectedOrganization } = useContext(GetCredentialContext);
 
   const returnFields = {};
@@ -144,6 +144,7 @@ const PreviousCredential = ({ setIsCreateNewCredential }) => {
             <PreviousProject
               returnFields={returnFields}
               productList={productList}
+              collapse = { returnProps?.[PreviousProject]?.isCollapsable}
             />
           </div>
         </div>
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/PreviousProject.js b/packages/gatsby-theme-aio/src/components/GetCredential/PreviousProject.js
index 02d676635d..6d5520d7f3 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/PreviousProject.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/PreviousProject.js
@@ -12,7 +12,7 @@ import { CardProducts } from './Products';
 import GetCredentialContext from './GetCredentialContext';
 import { CredentialDetailsCard } from './CredentialDetailsCard';
 
-const PreviousProject = ({ returnFields, productList }) => {
+const PreviousProject = ({ returnFields, productList, collapse }) => {
 
   const { getCredentialData: returnProps, selectedOrganization, previousProjectDetail } = useContext(GetCredentialContext);
 
@@ -27,7 +27,7 @@ const PreviousProject = ({ returnFields, productList }) => {
   const projectDetails = previousProjectsDetails?.[selectedIndex];
   const manageProps = returnProps[PreviousProject];
 
-  const allowedDomains = projectDetails?.workspaces[0]?.credentials[0]?.metadata?.["adobeid.domain"];  
+  const allowedDomains = projectDetails?.workspaces[0]?.credentials[0]?.metadata?.["adobeid.domain"];
 
   return (
     <>
@@ -63,6 +63,7 @@ const PreviousProject = ({ returnFields, productList }) => {
           nextButtonLink={previousProject?.nextStepsHref}
           devConsoleLink={manageProps?.devConsoleDirection}
           returnFields={returnFields}
+          collapse={collapse}
         />
 
       </div>
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnAPIKey.js b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnAPIKey.js
index 8c101a0729..f182924348 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnAPIKey.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnAPIKey.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import ShowCard from '../Card/ShowCard';
 
-const ReturnAPIKey = ({ val: { heading, apiKey } }) => {
+const ReturnAPIKey = ({ returnCredentialDetails , returnAPIKey, apiKey }) => {
   return (
-    heading && <ShowCard heading={heading} value={apiKey} />
+    <ShowCard heading={returnAPIKey?.heading} value={apiKey} />
   )
 }
 
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnAllowedOrigins.js b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnAllowedOrigins.js
index 05e26e6423..dc53b5a46c 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnAllowedOrigins.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnAllowedOrigins.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import ShowCard from '../Card/ShowCard';
 
-const ReturnAllowedOrigins = ({ val: { allowedOrigins, heading } }) => {
+const ReturnAllowedOrigins = ({ returnAllowedOrigins, allowedOrigins }) => {
   return (
-    heading && <ShowCard heading={heading} value={allowedOrigins} />
+    <ShowCard heading={returnAllowedOrigins?.heading} value={allowedOrigins} />
   )
 }
 
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnClientId.js b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnClientId.js
index aad7a1fef7..edfd4c430c 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnClientId.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnClientId.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import ShowCard from '../Card/ShowCard';
 
-const ReturnClientId = ({ val: { heading, clientId } }) => {
+const ReturnClientId = ({ returnClientId, clientId }) => {
   return (
-    heading && <ShowCard heading={heading} value={clientId} />
+    <ShowCard heading={returnClientId?.heading} value={clientId} />
   )
 }
 export { ReturnClientId };
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnClientSecret.js b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnClientSecret.js
index c0956c0133..02b32bbea4 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnClientSecret.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnClientSecret.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import ShowCard from '../Card/ShowCard';
 
-const ReturnClientSecret = ({ val: { returnClientSecret, response } }) => {
+const ReturnClientSecret = ({ returnClientSecret, response }) => {
   return (
-    returnClientSecret && <ShowCard heading={returnClientSecret?.heading} isClientSecret buttonLabel={returnClientSecret?.buttonLabel} response={response} />
+    <ShowCard heading={returnClientSecret?.heading} isClientSecret buttonLabel={returnClientSecret?.buttonLabel} response={response} />
   )
 }
 
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnCredentialDetails.js b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnCredentialDetails.js
index 513d8a47d3..a6fd631032 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnCredentialDetails.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnCredentialDetails.js
@@ -9,77 +9,61 @@ import { ReturnScopes } from './ReturnScopes';
 import GetCredentialContext from '../GetCredentialContext';
 import { CardImsOrgID } from '../Card/CardImsOrgID';
 
-const COMPONENT_MAP = {
-  "ReturnAPIKey": ReturnAPIKey,
-  "ReturnAllowedOrigins": ReturnAllowedOrigins,
-  "ReturnClientId": ReturnClientId,
-  "ReturnClientSecret": ReturnClientSecret,
-  "ReturnOrganizationName": ReturnOrganizationName,
-  "ReturnScopes": ReturnScopes,
-  "CardImsOrgID": CardImsOrgID
-};
-
-const ReturnCredentialDetails = ({
-  clientDetails,
-  apiKeyDetails,
-  clientIdDetails,
-  clientSecretDetails,
-  organizationDetails,
-  scopesDetails,
-  allowedOriginsDetails,
-  organizationName,
-  allowedOrigins,
-  response,
-  imsOrgID,
-  returnFields
-}) => {
+const ReturnCredentialDetails = ({ clientDetails, clientIdDetails, clientSecretDetails, organizationDetails, scopesDetails, apiKeyDetails, allowedOriginsDetails, organizationName, allowedOrigins, response, imsOrgID }) => {
 
   const { selectedOrganization } = useContext(GetCredentialContext);
 
-  const returnCompDetails = {
-    "ReturnAPIKey": {
-      heading: apiKeyDetails?.heading,
-      apiKey: response?.workspaces[0]?.credentials[0]?.clientId,
-    },
-    "ReturnAllowedOrigins": {
-      heading: allowedOrigins?.heading,
-      allowedOrigins: allowedOriginsDetails,
-    },
-    "ReturnClientId": {
-      heading: clientIdDetails?.heading,
-      clientId: response?.workspaces[0]?.credentials[0]?.clientId,
-    },
-    "ReturnClientSecret": {
-      returnClientSecret: clientSecretDetails,
-      response
-    },
-    "ReturnOrganizationName": {
-      heading: organizationDetails?.heading,
-      organization: organizationName?.name
-    },
-    "ReturnScopes": {
-      heading: scopesDetails?.heading,
-      scope: scopesDetails?.scope
-    },
-    "CardImsOrgID": {
-      heading: imsOrgID?.heading,
-      imsOrgId: selectedOrganization?.code
-    }
-  };
+  const splitedOrderBy = clientDetails?.orderBy ? clientDetails?.orderBy?.split(',') : [];
 
-  return (
-    <div css={css`
+return (
+  <div css={css`
         display : flex;
         flex-direction : column;  
         gap: 32px;
       `}>
-      <h4 className="spectrum-Heading spectrum-Heading--sizeS">{clientDetails?.heading}</h4>
-      {returnFields?.[ReturnCredentialDetails]?.children.map(({ type }, index) => {
-        const Component = COMPONENT_MAP[type?.name];
-        return Component ? <Component key={index} val={returnCompDetails[type?.name]} /> : null;
-      })}
-    </div>
-  );
-};
+
+    <h4 className="spectrum-Heading spectrum-Heading--sizeS">{clientDetails?.heading} </h4>
+    {
+      splitedOrderBy?.length > 0 ?
+        <>
+          {splitedOrderBy?.map((list) => {
+            if (list === "APIKey") {
+              return apiKeyDetails && <ReturnAPIKey returnCredentialDetails={clientDetails} returnAPIKey={apiKeyDetails} apiKey={response?.workspaces[0]?.credentials[0]?.clientId} />
+            }
+            if (list === "AllowedOrigins") {
+              return allowedOrigins && <ReturnAllowedOrigins returnCredentialDetails={clientDetails} allowedOrigins={allowedOriginsDetails} returnAllowedOrigins={allowedOrigins} />
+            }
+            if (list === "ImsOrgID") {
+              return imsOrgID && <CardImsOrgID returnCredentialDetails={clientDetails} cardImsOrgID={imsOrgID} imsOrgId={selectedOrganization?.code} />
+            }
+            if (list === "OrganizationName") {
+              return organizationDetails && <ReturnOrganizationName returnCredentialDetails={clientDetails} returnOrganizationName={organizationDetails} organization={organizationName?.name} />
+            }
+            if (list === "ClientId") {
+              return clientIdDetails && <ReturnClientId returnCredentialDetails={clientDetails} returnClientId={clientIdDetails} clientId={response?.workspaces[0]?.credentials[0]?.clientId} />
+            }
+            if (list === "ClientSecret") {
+              return clientSecretDetails && <ReturnClientSecret returnCredentialDetails={clientDetails} returnClientSecret={clientSecretDetails} response={response} />
+            }
+            if (list === "Scopes") {
+              return scopesDetails && <ReturnScopes returnCredentialDetails={clientDetails} returnScopes={scopesDetails} />
+            }
+          })}
+        </> :
+        <>
+          {apiKeyDetails && <ReturnAPIKey returnCredentialDetails={clientDetails} returnAPIKey={apiKeyDetails} apiKey={response?.workspaces[0]?.credentials[0]?.clientId} />}
+          {allowedOrigins && <ReturnAllowedOrigins returnCredentialDetails={clientDetails} allowedOrigins={allowedOriginsDetails} returnAllowedOrigins={allowedOrigins} />}
+          {clientIdDetails && <ReturnClientId returnCredentialDetails={clientDetails} returnClientId={clientIdDetails} clientId={response?.workspaces[0]?.credentials[0]?.clientId} />}
+          {clientSecretDetails && <ReturnClientSecret returnCredentialDetails={clientDetails} returnClientSecret={clientSecretDetails} response={response} />}
+          {organizationDetails && <ReturnOrganizationName returnCredentialDetails={clientDetails} returnOrganizationName={organizationDetails} organization={organizationName?.name} />}
+          {scopesDetails && <ReturnScopes returnCredentialDetails={clientDetails} returnScopes={scopesDetails} />}
+          {imsOrgID && <CardImsOrgID returnCredentialDetails={clientDetails} cardImsOrgID={imsOrgID} imsOrgId={selectedOrganization?.code} />}
+
+        </>
+    }
+
+  </div>
+)
+}
 
 export { ReturnCredentialDetails };
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnOrganizationName.js b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnOrganizationName.js
index 4aabb3ecee..10264695ca 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnOrganizationName.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnOrganizationName.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import ShowCard from '../Card/ShowCard';
 
-const ReturnOrganizationName = ({ val: { heading, organization } }) => {
+const ReturnOrganizationName = ({ returnOrganizationName, organization }) => {
   return (
-    heading && <ShowCard heading={heading} value={organization} isOraganization />
+    <ShowCard heading={returnOrganizationName?.heading} value={organization} isOraganization />
   )
 }
 
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnScopes.js b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnScopes.js
index 20ea8d858b..f0a6ea6302 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnScopes.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnScopes.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import ShowCard from '../Card/ShowCard';
 
-const ReturnScopes = ({ val: { heading, scope } }) => {
+const ReturnScopes = ({ returnScopes }) => {
   return (
-    heading && <ShowCard heading={heading} value={scope} />
+    <ShowCard heading={returnScopes?.heading} value={returnScopes?.scope} />
   )
 }
 
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/index.js b/packages/gatsby-theme-aio/src/components/GetCredential/index.js
index 997f8d1fa1..e7ed8233fd 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/index.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/index.js
@@ -304,7 +304,7 @@ const GetCredential = ({ templateId, productName = "Firefly Service", children,
               className={classNames(className)}
               css={css`
                 background: #f8f8f8;
-                padding: var(--spectrum-global-dimension-size-800) 0 var(--spectrum-global-dimension-size-800) 0;
+                padding: var(--spectrum-global-dimension-size-500) 0 var(--spectrum-global-dimension-size-500) 0;
 
                 button , input[type = checkbox] , a{
                   cursor:pointer !important;