diff --git a/apps/console/src/public/deployment.config.json b/apps/console/src/public/deployment.config.json
index b3966a691a9..b2ebd31717f 100644
--- a/apps/console/src/public/deployment.config.json
+++ b/apps/console/src/public/deployment.config.json
@@ -657,10 +657,10 @@
                 }
             },
             "identityVerificationProviders": {
-                "enabled": false,
+                "enabled": true,
                 "scopes": {
                     "create": [
-                        "internal_idvp_create"
+                        "internal_idvp_add"
                     ],
                     "delete": [
                         "internal_idvp_delete"
diff --git a/features/admin.connections.v1/components/create/connection-create-wizard-factory.tsx b/features/admin.connections.v1/components/create/connection-create-wizard-factory.tsx
new file mode 100644
index 00000000000..bc636ace78f
--- /dev/null
+++ b/features/admin.connections.v1/components/create/connection-create-wizard-factory.tsx
@@ -0,0 +1,118 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {
+    IdVPCreationModal
+} from "@wso2is/admin.identity-verification-providers.v1/components/modals/idvp-creation-modal";
+import { IdentifiableComponentInterface } from "@wso2is/core/models";
+import React, { FC, ReactElement } from "react";
+import { AuthenticatorCreateWizardFactory } from "./authenticator-create-wizard-factory";
+import {
+    ConnectionTemplateInterface,
+    GenericConnectionCreateWizardPropsInterface
+} from "../../models/connection";
+
+enum ConnectionType {
+    CONNECTION = "connections",
+    IDVP = "identity-verification-providers"
+}
+
+/**
+ * Proptypes for the Authenticator Create Wizard factory.
+ */
+interface ConnectionCreateWizardFactoryPropsInterface extends IdentifiableComponentInterface {
+
+    /**
+     * Show/Hide the wizard
+     */
+    isModalOpen: boolean;
+    /**
+     * Callback to be triggered on modal visibility change.
+     */
+    handleModalVisibility: (isVisible: boolean) => void;
+    /**
+     * Callback to be triggered on wizard close.
+     */
+    onWizardClose: GenericConnectionCreateWizardPropsInterface[ "onWizardClose" ];
+    /**
+     * Callback to be triggered on successful IDP create.
+     */
+    onIDPCreate: GenericConnectionCreateWizardPropsInterface[ "onIDPCreate" ];
+    connectionType: ConnectionType;
+    /**
+     * Type of the wizard.
+     */
+    type: string;
+    /**
+     * Selected template. Added this since this {@link AuthenticatorCreateWizardFactory}
+     * does not support template grouping. If we are introducing the functionality
+     * this must be well tested because it might be a breaking change. For more context
+     * please refer {@link IdentityProviderTemplateSelectPage}
+     */
+    selectedTemplate?: ConnectionTemplateInterface;
+}
+
+/**
+ * Authenticator Create Wizard factory.
+ *
+ * @param props - Props injected to the component.
+ *
+ * @returns ReactElement
+ */
+export const ConnectionCreateWizardFactory: FC<ConnectionCreateWizardFactoryPropsInterface> = (
+    {
+        isModalOpen,
+        handleModalVisibility,
+        onWizardClose,
+        connectionType,
+        type,
+        selectedTemplate,
+        ...rest
+    }: ConnectionCreateWizardFactoryPropsInterface
+): ReactElement => {
+
+    if (!isModalOpen) {
+        return null;
+    }
+
+    switch (connectionType) {
+        case ConnectionType.IDVP:
+            return (
+                <IdVPCreationModal
+                    selectedTemplate={ selectedTemplate }
+                    selectedTemplateId={ selectedTemplate?.id }
+                    onClose={ onWizardClose }
+                />
+            );
+
+        case ConnectionType.CONNECTION:
+            return (
+                <AuthenticatorCreateWizardFactory
+                    isModalOpen={ isModalOpen }
+                    handleModalVisibility={ handleModalVisibility }
+                    type={ type }
+                    selectedTemplate={ selectedTemplate }
+                    onWizardClose={ onWizardClose }
+                    { ...rest }
+                />
+            );
+
+        default:
+            return null;
+    };
+};
diff --git a/features/admin.connections.v1/models/connection.ts b/features/admin.connections.v1/models/connection.ts
index 93d9a1b0a66..656fcd636dd 100644
--- a/features/admin.connections.v1/models/connection.ts
+++ b/features/admin.connections.v1/models/connection.ts
@@ -441,6 +441,7 @@ export interface ConnectionTemplateListItemInterface extends ConnectionTemplateI
  */
 export interface ConnectionTemplateItemInterface {
     id?: string;
+    version?: string;
     name?: string;
     description?: string;
     image?: any;
diff --git a/features/admin.connections.v1/package.json b/features/admin.connections.v1/package.json
index ec2b92f2d8f..8c59e39074d 100644
--- a/features/admin.connections.v1/package.json
+++ b/features/admin.connections.v1/package.json
@@ -29,8 +29,10 @@
         "@wso2is/admin.extensions.v1": "^2.30.0",
         "@wso2is/admin.feature-gate.v1": "^1.1.0",
         "@wso2is/admin.identity-providers.v1": "^2.22.0",
+        "@wso2is/admin.identity-verification-providers.v1": "workspace:^2.22.0",
         "@wso2is/admin.organizations.v1": "^2.22.0",
         "@wso2is/admin.roles.v2": "^2.22.0",
+        "@wso2is/admin.template-core.v1": "^1.0.52",
         "@wso2is/admin.userstores.v1": "^2.21.0",
         "@wso2is/core": "^2.1.0",
         "@wso2is/dynamic-forms": "^2.0.107",
@@ -75,8 +77,7 @@
         "slashes": "^2.0.2",
         "styled-components": "^4.4.1",
         "swr": "^2.0.0",
-        "uuid": "^8.3.0",
-        "@wso2is/admin.template-core.v1": "^1.0.52"
+        "uuid": "^8.3.0"
     },
     "devDependencies": {
         "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
diff --git a/features/admin.connections.v1/pages/connection-templates.tsx b/features/admin.connections.v1/pages/connection-templates.tsx
index 3e56c1f1016..99ccb76e31e 100644
--- a/features/admin.connections.v1/pages/connection-templates.tsx
+++ b/features/admin.connections.v1/pages/connection-templates.tsx
@@ -16,6 +16,7 @@
  * under the License.
  */
 
+import { FeatureAccessConfigInterface, useRequiredScopes } from "@wso2is/access-control";
 import { AppState, EventPublisher, history } from "@wso2is/admin.core.v1";
 import {
     getEmptyPlaceholderIllustrations
@@ -24,8 +25,12 @@ import {
     AppConstants
 } from "@wso2is/admin.core.v1/constants/app-constants";
 import useDeploymentConfig from "@wso2is/admin.core.v1/hooks/use-app-configs";
+import { RequestErrorInterface } from "@wso2is/admin.core.v1/hooks/use-request";
 import useUIConfig from "@wso2is/admin.core.v1/hooks/use-ui-configs";
 import { FeatureStatusLabel } from "@wso2is/admin.feature-gate.v1/models/feature-status";
+import {
+    useGetIdVPTemplateList
+} from "@wso2is/admin.identity-verification-providers.v1/api/use-get-idvp-template-list";
 import { IdentifiableComponentInterface } from "@wso2is/core/models";
 import {
     DocumentationLink,
@@ -36,15 +41,14 @@ import {
     SearchWithFilterLabels,
     useDocumentation
 } from "@wso2is/react-components";
+import { AxiosError } from "axios";
 import union from "lodash-es/union";
-import React, { FC, ReactElement, ReactNode, SyntheticEvent, useEffect, useState } from "react";
+import React, { FC, ReactElement, ReactNode, SyntheticEvent, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 import { RouteComponentProps } from "react-router";
 import { useGetConnectionTemplates } from "../api/use-get-connection-templates";
-import {
-    AuthenticatorCreateWizardFactory
-} from "../components/create/authenticator-create-wizard-factory";
+import { ConnectionCreateWizardFactory } from "../components/create/connection-create-wizard-factory";
 import { CommonAuthenticatorConstants } from "../constants/common-authenticator-constants";
 import { ConnectionUIConstants } from "../constants/connection-ui-constants";
 import {
@@ -86,6 +90,9 @@ const ConnectionTemplatesPage: FC<ConnectionTemplatePagePropsInterface> = (
     const { UIConfig } = useUIConfig();
 
     const productName: string = useSelector((state: AppState) => state?.config?.ui?.productName);
+    const idVPFeatureConfig: FeatureAccessConfigInterface = UIConfig?.features?.identityVerificationProviders;
+    const isIdVPFeatureEnabled: boolean = idVPFeatureConfig?.enabled;
+    const hasIdVPCreatePermissions: boolean = useRequiredScopes(idVPFeatureConfig?.scopes?.create);
 
     // External connection resources URL from the UI config.
     const connectionResourcesUrl: string = UIConfig?.connectionResourcesUrl;
@@ -106,25 +113,47 @@ const ConnectionTemplatesPage: FC<ConnectionTemplatePagePropsInterface> = (
         isValidating: isConnectionTemplatesRequestValidating
     } = useGetConnectionTemplates(null, null, null);
 
+    const {
+        data: fetchedIdVPTemplates,
+        isLoading: isIdVPTemplatesFetchRequestLoading,
+        error: idVPTemplatesFetchRequestError,
+        isValidating: isIdVPTemplatesRequestValidating
+    } = useGetIdVPTemplateList(isIdVPFeatureEnabled && hasIdVPCreatePermissions);
+
+    const isTemplatesLoading: boolean = isConnectionTemplatesFetchRequestLoading || isIdVPTemplatesFetchRequestLoading;
+    const isTemplatesValidating: boolean = isConnectionTemplatesRequestValidating || isIdVPTemplatesRequestValidating;
+    const templatesFetchError: AxiosError<RequestErrorInterface> = connectionTemplatesFetchRequestError
+        || idVPTemplatesFetchRequestError;
+
+    const combinedConnectionTemplates: ConnectionTemplateInterface[] = useMemo(() => {
+        if (isTemplatesLoading || templatesFetchError) {
+            return [];
+        }
+
+        return [ ...fetchedConnectionTemplates, ...fetchedIdVPTemplates ];
+    }, [ isTemplatesLoading, isTemplatesValidating, templatesFetchError ]);
+
     /**
      * Set the filtered connection templates to the component state
      * and set the filter tags lit based on the fetched templates.
      */
     useEffect(() => {
-        if (fetchedConnectionTemplates?.length > 0) {
-            setFilteredConnectionTemplates(fetchedConnectionTemplates);
+        if (isTemplatesLoading) {
+            return;
+        }
 
-            let _filterTagsList: string[] = [];
+        setFilteredConnectionTemplates(combinedConnectionTemplates);
 
-            for (const template of fetchedConnectionTemplates) {
-                if (template.tags?.length > 0) {
-                    _filterTagsList = union(_filterTagsList, template.tags);
-                }
+        let _filterTagsList: string[] = [];
+
+        for (const template of combinedConnectionTemplates) {
+            if (template.tags?.length > 0) {
+                _filterTagsList = union(_filterTagsList, template.tags);
             }
-            setFilterTags(_filterTagsList);
         }
+        setFilterTags(_filterTagsList);
 
-    }, [ isConnectionTemplatesRequestValidating, connectionTemplatesFetchRequestError ]);
+    }, [ isConnectionTemplatesFetchRequestLoading, isIdVPTemplatesFetchRequestLoading ]);
 
     /**
      * Handles the connection template fetch request errors.
@@ -181,6 +210,8 @@ const ConnectionTemplatesPage: FC<ConnectionTemplatePagePropsInterface> = (
             ({ id: templateId }: { id: string }) => (templateId === id));
 
         if (selectedTemplate) {
+            console.log("selectedTemplate", selectedTemplate);
+
             setSelectedTemplate(selectedTemplate);
             eventPublisher.publish("connections-select-template", {
                 type: selectedTemplate.templateId
@@ -224,13 +255,13 @@ const ConnectionTemplatesPage: FC<ConnectionTemplatePagePropsInterface> = (
 
         if (filterLabels.length > 0) {
             // Filter out the templates based on the selected filter labels.
-            for (const connectionTemplate of fetchedConnectionTemplates) {
+            for (const connectionTemplate of combinedConnectionTemplates) {
                 if (connectionTemplate.tags.some((tag: string) => filterLabels.includes(tag))) {
                     _filteredCategorizedTemplates.push(connectionTemplate);
                 }
             }
         } else {
-            _filteredCategorizedTemplates = [ ...fetchedConnectionTemplates ];
+            _filteredCategorizedTemplates = [ ...combinedConnectionTemplates ];
         }
 
         if (query) {
@@ -352,13 +383,14 @@ const ConnectionTemplatesPage: FC<ConnectionTemplatePagePropsInterface> = (
                         onSearch={ handleConnectionTypeSearch }
                         onFilter={ handleConnectionTypeFilter }
                         filterLabels={ filterTags }
+                        isLoading={ isTemplatesLoading }
                     />
                 ) }
-                isLoading={ isConnectionTemplatesFetchRequestLoading }
             >
                 <ResourceGrid
                     isEmpty={ filteredConnectionTemplates?.length === 0 }
                     emptyPlaceholder={ showPlaceholders(filteredConnectionTemplates) }
+                    isLoading={ isTemplatesLoading }
                 >
                     {
                         filteredConnectionTemplates?.map((
@@ -431,9 +463,10 @@ const ConnectionTemplatesPage: FC<ConnectionTemplatePagePropsInterface> = (
             </GridLayout>
             {
                 showWizard && (
-                    <AuthenticatorCreateWizardFactory
+                    <ConnectionCreateWizardFactory
                         isModalOpen={ showWizard }
                         handleModalVisibility={ (isOpen: boolean) => setShowWizard(isOpen) }
+                        connectionType={ selectedTemplate?.type }
                         type={ templateType }
                         selectedTemplate={ selectedTemplate }
                         onIDPCreate={ handleSuccessfulIDPCreation }
diff --git a/features/admin.identity-verification-providers.v1/api/identity-verification-provider.ts b/features/admin.identity-verification-providers.v1/api/identity-verification-provider.ts
index edb6e6a4e10..ead2ec82c8d 100644
--- a/features/admin.identity-verification-providers.v1/api/identity-verification-provider.ts
+++ b/features/admin.identity-verification-providers.v1/api/identity-verification-provider.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
+ * Copyright (c) 2023-2024, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import { AsgardeoSPAClient, HttpClientInstance, HttpResponse } from "@asgardeo/auth-react";
+import { AsgardeoSPAClient, HttpRequestConfig, HttpResponse } from "@asgardeo/auth-react";
 import { store } from "@wso2is/admin.core.v1";
 import useRequest, {
     RequestConfigInterface,
@@ -25,12 +25,18 @@ import useRequest, {
 } from "@wso2is/admin.core.v1/hooks/use-request";
 import { IdentityAppsApiException } from "@wso2is/core/exceptions";
 import { AcceptHeaderValues, ContentTypeHeaderValues, HttpMethods } from "@wso2is/core/models";
-import { AxiosError } from "axios";
-import { IDVPListResponseInterface, IdentityVerificationProviderInterface } from "../models";
-
-const httpClient: HttpClientInstance = AsgardeoSPAClient
-    .getInstance()
-    .httpRequest.bind(AsgardeoSPAClient.getInstance());
+import { AxiosError, AxiosResponse } from "axios";
+import {
+    OldIDVPListResponseInterface,
+    OldIdentityVerificationProviderInterface
+} from "../models/identity-verification-provider";
+import { IdVPListResponseInterface, IdentityVerificationProviderInterface } from "../models/new-models";
+
+const httpClient: (
+    config: HttpRequestConfig
+) => Promise<AxiosResponse> = AsgardeoSPAClient.getInstance().httpRequest.bind(
+    AsgardeoSPAClient.getInstance()
+);
 
 /**
  * Delete an identity verification provider.
@@ -68,7 +74,7 @@ export const deleteIDVP = async (id: string): Promise<HttpResponse> => {
  * @param rest - Rest of the data.
  * @returns - A promise containing the response from the API call.
  */
-export const updateIdentityVerificationProvider = ({ id, ...rest }: IdentityVerificationProviderInterface):
+export const updateIdentityVerificationProvider = ({ id, ...rest }: OldIdentityVerificationProviderInterface):
     Promise<HttpResponse | undefined> => {
 
     const requestConfig: RequestConfigInterface = {
@@ -101,7 +107,7 @@ export const updateIdentityVerificationProvider = ({ id, ...rest }: IdentityVeri
  * @param rest - Rest of the data.
  * @returns - A promise containing the response from the API call.
  */
-export const createIdentityVerificationProvider = (data: IdentityVerificationProviderInterface):
+export const createIdentityVerificationProvider = (data: OldIdentityVerificationProviderInterface):
     Promise<HttpResponse | undefined> => {
 
     const requestConfig: RequestConfigInterface = {
@@ -115,7 +121,7 @@ export const createIdentityVerificationProvider = (data: IdentityVerificationPro
     };
 
     return httpClient(requestConfig)
-        .then((response: HttpResponse) =>  response)
+        .then((response: HttpResponse) => response)
         .catch((error: AxiosError) => {
             throw new IdentityAppsApiException(
                 error.message,
@@ -133,7 +139,7 @@ export const createIdentityVerificationProvider = (data: IdentityVerificationPro
  * @param id - ID of the identity verification provider.
  * @returns - Requested IDVP
  */
-export const useIdentityVerificationProvider = <Data = IdentityVerificationProviderInterface,
+export const useIdentityVerificationProvider = <Data = OldIdentityVerificationProviderInterface,
     Error = RequestErrorInterface>(id: string): RequestResultInterface<Data, Error> => {
 
     const requestConfig: RequestConfigInterface = {
@@ -155,43 +161,56 @@ export const useIdentityVerificationProvider = <Data = IdentityVerificationProvi
 };
 
 /**
- * Hook to get the identity verification provider list with limit and offset.
+ * Gets the Identity Verification Providers list with limit and offset.
  *
- * @param limit - Maximum Limit of the identity verification provider List.
+ * @param limit - Maximum Limit of the application List.
  * @param offset - Offset for get to start.
- * @param filter - Search filter.
- * @param requiredAttributes - Extra attribute to be included in the list response. ex:`isFederationHub`
  *
- * @returns - Requested IDVP list.
+ * @returns A promise containing the response.
  */
-export const useIdentityVerificationProviderList = <Data = IDVPListResponseInterface, Error = RequestErrorInterface>(
-    limit?: number,
-    offset?: number,
-    filter?: string,
-    requiredAttributes?: string
-): RequestResultInterface<Data, Error> => {
-
+export const getIdentityVerificationProvidersList = (
+    limit: number,
+    offset: number
+): Promise<IdVPListResponseInterface> => {
     const requestConfig: RequestConfigInterface = {
         headers: {
-            "Accept": AcceptHeaderValues.APP_JSON,
-            "Content-Type": ContentTypeHeaderValues.APP_JSON
+            "Accept": "application/json",
+            "Access-Control-Allow-Origin": store.getState().config.deployment.clientHost,
+            "Content-Type": "application/json"
         },
         method: HttpMethods.GET,
         params: {
-            filter,
             limit,
-            offset,
-            requiredAttributes
+            offset
         },
         url: store.getState().config.endpoints.identityVerificationProviders
     };
-    const { data, error, isValidating, mutate } = useRequest<Data, Error>(requestConfig);
 
-    return {
-        data,
-        error: error,
-        isLoading: !error && !data,
-        isValidating,
-        mutate
-    };
+    return httpClient(requestConfig)
+        .then((response: AxiosResponse) => {
+            if (response.status !== 200) {
+                return Promise.reject(new Error("Failed to get Identity Verification Providers list."));
+            }
+
+            const idVPListResponse: OldIDVPListResponseInterface = response.data as OldIDVPListResponseInterface;
+            const modifiedIdVPList: IdentityVerificationProviderInterface[] = idVPListResponse
+                .identityVerificationProviders
+                .map((idVP: OldIdentityVerificationProviderInterface) => {
+                    const { Name, Type, ...rest } = idVP;
+
+                    return {
+                        name: Name,
+                        type: Type,
+                        ...rest
+                    };
+                });
+
+            return Promise.resolve({
+                ...idVPListResponse,
+                identityVerificationProviders: modifiedIdVPList
+            });
+        })
+        .catch((error: AxiosError) => {
+            return Promise.reject(error);
+        });
 };
diff --git a/features/admin.identity-verification-providers.v1/api/ui-metadata.ts b/features/admin.identity-verification-providers.v1/api/ui-metadata.ts
index 14879a99d4d..53c539323de 100644
--- a/features/admin.identity-verification-providers.v1/api/ui-metadata.ts
+++ b/features/admin.identity-verification-providers.v1/api/ui-metadata.ts
@@ -23,7 +23,7 @@ import useRequest, {
     RequestResultInterface
 } from "@wso2is/admin.core.v1/hooks/use-request";
 import { AcceptHeaderValues ,HttpMethods } from "@wso2is/core/models";
-import { IDVPTypeMetadataInterface, IdentityVerificationProviderInterface, UIMetaDataForIDVP } from "../models";
+import { IDVPTypeMetadataInterface, OldIdentityVerificationProviderInterface, UIMetaDataForIDVP } from "../models";
 
 /**
  * Hook to get UI metadata for an identity verification provider type
@@ -111,7 +111,7 @@ export const useIDVPTemplateTypeMetadata = <Data = IDVPTypeMetadataInterface, Er
  * @param idvpType - Type of the IDVP
  * @returns - Template of the IDVP
  */
-export const useIDVPTemplate = <Data = IdentityVerificationProviderInterface, Error = RequestErrorInterface>(
+export const useIDVPTemplate = <Data = OldIdentityVerificationProviderInterface, Error = RequestErrorInterface>(
     idvpType: string
 ): RequestResultInterface<Data, Error> => {
     const requestConfig: RequestConfigInterface = {
diff --git a/features/admin.identity-verification-providers.v1/api/use-get-idvp-list.ts b/features/admin.identity-verification-providers.v1/api/use-get-idvp-list.ts
new file mode 100644
index 00000000000..7f7642996de
--- /dev/null
+++ b/features/admin.identity-verification-providers.v1/api/use-get-idvp-list.ts
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import useRequest, {
+    RequestConfigInterface,
+    RequestErrorInterface,
+    RequestResultInterface
+} from "@wso2is/admin.core.v1/hooks/use-request";
+import { store } from "@wso2is/admin.core.v1/store";
+import { AcceptHeaderValues, ContentTypeHeaderValues, HttpMethods } from "@wso2is/core/models";
+import { IdVPListResponseInterface } from "../models/new-models";
+
+/**
+ * Hook to get the identity verification provider list.
+ *
+ * @param limit - Maximum Limit of the identity verification provider List.
+ * @param offset - Offset for get to start.
+ * @param filter - Search filter.
+ * @param requiredAttributes - Extra attribute to be included in the list response. ex:`isFederationHub`
+ *
+ * @returns Requested IdVP list.
+ */
+export const useIdentityVerificationProviderList = <Data = IdVPListResponseInterface, Error = RequestErrorInterface>(
+    limit?: number,
+    offset?: number,
+    filter?: string,
+    requiredAttributes?: string
+): RequestResultInterface<Data, Error> => {
+
+    const requestConfig: RequestConfigInterface = {
+        headers: {
+            "Accept": AcceptHeaderValues.APP_JSON,
+            "Content-Type": ContentTypeHeaderValues.APP_JSON
+        },
+        method: HttpMethods.GET,
+        params: {
+            filter,
+            limit,
+            offset,
+            requiredAttributes
+        },
+        url: store.getState().config.endpoints.identityVerificationProviders
+    };
+    const { data, error, isLoading, isValidating, mutate } = useRequest<Data, Error>(requestConfig);
+
+    return {
+        data,
+        error,
+        isLoading,
+        isValidating,
+        mutate
+    };
+};
diff --git a/features/admin.identity-verification-providers.v1/api/use-get-idvp-metadata.ts b/features/admin.identity-verification-providers.v1/api/use-get-idvp-metadata.ts
new file mode 100644
index 00000000000..19be7c14039
--- /dev/null
+++ b/features/admin.identity-verification-providers.v1/api/use-get-idvp-metadata.ts
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { store } from "@wso2is/admin.core.v1";
+import useRequest, {
+    RequestConfigInterface,
+    RequestErrorInterface,
+    RequestResultInterface
+} from "@wso2is/admin.core.v1/hooks/use-request";
+import { AcceptHeaderValues, HttpMethods } from "@wso2is/core/models";
+import { IdVPTemplateMetadataInterface } from "../models/new-models";
+
+export const useGetIdVPMetadata = <Data = IdVPTemplateMetadataInterface, Error = RequestErrorInterface>(
+    idVPTemplateId: string
+): RequestResultInterface<Data, Error> => {
+    const requestConfig: RequestConfigInterface = {
+        headers: {
+            "Accept": AcceptHeaderValues.APP_JSON
+        },
+        method: HttpMethods.GET,
+        url: `${ store.getState().config.endpoints.IDVPExtensionEndpoint }/${ idVPTemplateId }/metadata`
+    };
+
+    const { data, error, isLoading, isValidating, mutate } = useRequest<Data, Error>(
+        idVPTemplateId? requestConfig : null
+    );
+
+    return {
+        data,
+        error,
+        isLoading,
+        isValidating,
+        mutate
+    };
+};
diff --git a/features/admin.identity-verification-providers.v1/api/use-get-idvp-template-list.ts b/features/admin.identity-verification-providers.v1/api/use-get-idvp-template-list.ts
new file mode 100644
index 00000000000..43294ff13f3
--- /dev/null
+++ b/features/admin.identity-verification-providers.v1/api/use-get-idvp-template-list.ts
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import useRequest, {
+    RequestConfigInterface,
+    RequestErrorInterface,
+    RequestResultInterface
+} from "@wso2is/admin.core.v1/hooks/use-request";
+import { store } from "@wso2is/admin.core.v1/store";
+import { AcceptHeaderValues, HttpMethods } from "@wso2is/core/models";
+import { ConnectionTemplateInterface } from "../../admin.connections.v1";
+
+export const useGetIdVPTemplateList = <
+    Data = ConnectionTemplateInterface[], Error = RequestErrorInterface
+>(shouldFetch: boolean = true): RequestResultInterface<Data, Error> => {
+    const requestConfig: RequestConfigInterface = {
+        headers: {
+            "Accept": AcceptHeaderValues.APP_JSON
+        },
+        method: HttpMethods.GET,
+        url: store.getState().config.endpoints.IDVPExtensionEndpoint
+    };
+
+    const { data, error, isLoading, isValidating, mutate } = useRequest<Data, Error>(
+        shouldFetch ? requestConfig : null
+    );
+
+    if (Array.isArray(data)) {
+        data.sort(
+            (template1: ConnectionTemplateInterface, template2: ConnectionTemplateInterface) =>
+                template1?.displayOrder - template2?.displayOrder
+        );
+    }
+
+    return {
+        data,
+        error,
+        isLoading,
+        isValidating,
+        mutate
+    };
+};
diff --git a/features/admin.identity-verification-providers.v1/api/use-get-idvp-template.ts b/features/admin.identity-verification-providers.v1/api/use-get-idvp-template.ts
new file mode 100644
index 00000000000..217bfc4b6bc
--- /dev/null
+++ b/features/admin.identity-verification-providers.v1/api/use-get-idvp-template.ts
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import useRequest, {
+    RequestConfigInterface,
+    RequestErrorInterface,
+    RequestResultInterface
+} from "@wso2is/admin.core.v1/hooks/use-request";
+import { store } from "@wso2is/admin.core.v1/store";
+import { AcceptHeaderValues, HttpMethods } from "@wso2is/core/models";
+import { OldIdVPTemplateInterface } from "../models/identity-verification-provider";
+import { IdVPTemplateInterface } from "../models/new-models";
+
+export const useGetIdVPTemplate = <Data = IdVPTemplateInterface, Error = RequestErrorInterface>(
+    idVPTemplateId: string
+): RequestResultInterface<Data, Error> => {
+    const requestConfig: RequestConfigInterface = {
+        headers: {
+            "Accept": AcceptHeaderValues.APP_JSON
+        },
+        method: HttpMethods.GET,
+        url: `${ store.getState().config.endpoints.IDVPExtensionEndpoint }/${ idVPTemplateId }/template`
+    };
+
+    const { data, error, isLoading, isValidating, mutate } = useRequest<Data, Error>(
+        idVPTemplateId ? requestConfig : null
+    );
+
+    let modifiedIdVPTemplate: IdVPTemplateInterface = undefined;
+
+    if (data) {
+        const { Name, Type, ...rest } = (data as OldIdVPTemplateInterface).payload;
+
+        modifiedIdVPTemplate = {
+            payload: {
+                name: Name,
+                type: Type,
+                ...rest
+            }
+        };
+    }
+
+    return {
+        data: modifiedIdVPTemplate as Data,
+        error,
+        isLoading,
+        isValidating,
+        mutate
+    };
+};
diff --git a/features/admin.identity-verification-providers.v1/api/use-get-idvp.ts b/features/admin.identity-verification-providers.v1/api/use-get-idvp.ts
new file mode 100644
index 00000000000..7e4e5c957a1
--- /dev/null
+++ b/features/admin.identity-verification-providers.v1/api/use-get-idvp.ts
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import useRequest, {
+    RequestConfigInterface,
+    RequestErrorInterface,
+    RequestResultInterface
+} from "@wso2is/admin.core.v1/hooks/use-request";
+import { store } from "@wso2is/admin.core.v1/store";
+import { AcceptHeaderValues, HttpMethods } from "@wso2is/core/models";
+import { OldIdentityVerificationProviderInterface } from "../models/identity-verification-provider";
+
+/**
+ * Hook to get an identity verification provider.
+ * @param id - ID of the identity verification provider.
+ * @returns Requested IdVP.
+ */
+export const useIdentityVerificationProvider = <Data = OldIdentityVerificationProviderInterface,
+    Error = RequestErrorInterface>(id: string): RequestResultInterface<Data, Error> => {
+
+    const requestConfig: RequestConfigInterface = {
+        headers: {
+            "Accept": AcceptHeaderValues.APP_JSON
+        },
+        method: HttpMethods.GET,
+        url: `${ store.getState().config.endpoints.identityVerificationProviders }/${ id }`
+    };
+    const { data, error, isLoading, isValidating, mutate } = useRequest<Data, Error>(requestConfig);
+
+    return {
+        data,
+        error,
+        isLoading,
+        isValidating,
+        mutate
+    };
+};
diff --git a/features/admin.identity-verification-providers.v1/components/forms/config-settings-form.tsx b/features/admin.identity-verification-providers.v1/components/forms/config-settings-form.tsx
index 503589437f7..c038047999d 100644
--- a/features/admin.identity-verification-providers.v1/components/forms/config-settings-form.tsx
+++ b/features/admin.identity-verification-providers.v1/components/forms/config-settings-form.tsx
@@ -22,7 +22,7 @@ import { EmphasizedSegment } from "@wso2is/react-components";
 import React, { FunctionComponent, ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 import { renderFormUIWithMetadata } from "./helpers/dynamic-ui-helper";
-import { IdentityVerificationProviderInterface, InputFieldMetadata } from "../../models";
+import { OldIdentityVerificationProviderInterface, InputFieldMetadata } from "../../models";
 
 /**
  * Proptypes for the identity verification provider configuration settings form component.
@@ -31,7 +31,7 @@ interface ConfigurationSettingsFormProps extends IdentifiableComponentInterface
     /**
      * IDVP that is being currently edited.
      */
-    identityVerificationProvider: IdentityVerificationProviderInterface;
+    identityVerificationProvider: OldIdentityVerificationProviderInterface;
     /**
      * On submit callback.
      */
diff --git a/features/admin.identity-verification-providers.v1/components/forms/general-details-form.tsx b/features/admin.identity-verification-providers.v1/components/forms/general-details-form.tsx
index 3e53e6763ea..b0346a451bf 100644
--- a/features/admin.identity-verification-providers.v1/components/forms/general-details-form.tsx
+++ b/features/admin.identity-verification-providers.v1/components/forms/general-details-form.tsx
@@ -21,10 +21,10 @@ import { Field, Form } from "@wso2is/form";
 import { EmphasizedSegment } from "@wso2is/react-components";
 import React, { FunctionComponent, ReactElement } from "react";
 import { useTranslation } from "react-i18next";
-import { useIdentityVerificationProviderList } from "../../api";
 import { IdentityVerificationProviderConstants } from "../../constants";
-import { IdentityVerificationProviderInterface } from "../../models";
+import { OldIdentityVerificationProviderInterface } from "../../models";
 import { validateIDVPName } from "../../utils";
+import { useIdentityVerificationProviderList } from "../../api/use-get-idvp-list";
 
 /**
  * Proptypes for the identity verification provider general details form component.
@@ -33,7 +33,7 @@ interface GeneralDetailsFormPopsInterface extends IdentifiableComponentInterface
     /**
      * IDVP that is being currently edited.
      */
-    identityVerificationProvider: IdentityVerificationProviderInterface;
+    identityVerificationProvider: OldIdentityVerificationProviderInterface;
     /**
      * On submit callback.
      */
diff --git a/features/admin.identity-verification-providers.v1/components/forms/helpers/dynamic-ui-helper.tsx b/features/admin.identity-verification-providers.v1/components/forms/helpers/dynamic-ui-helper.tsx
index 5d9da25656b..13349014e1f 100644
--- a/features/admin.identity-verification-providers.v1/components/forms/helpers/dynamic-ui-helper.tsx
+++ b/features/admin.identity-verification-providers.v1/components/forms/helpers/dynamic-ui-helper.tsx
@@ -23,7 +23,7 @@ import { MetaDataInputTypes } from "../../../constants";
 import {
     DropdownOptionsInterface,
     IDVPConfigPropertiesInterface,
-    IdentityVerificationProviderInterface,
+    OldIdentityVerificationProviderInterface,
     InputFieldMetadata
 } from "../../../models";
 
@@ -43,7 +43,7 @@ type InputFieldValue = string | boolean | number | DropdownOptionsInterface ;
  */
 export const renderFormUIWithMetadata = (
     uiMetaData: InputFieldMetadata[],
-    idvp?: IdentityVerificationProviderInterface,
+    idvp?: OldIdentityVerificationProviderInterface,
     isReadOnly: boolean = false,
     padBetweenElements: boolean = false
 ): ReactElement => {
diff --git a/features/admin.identity-verification-providers.v1/components/identity-verification-provider-edit.tsx b/features/admin.identity-verification-providers.v1/components/identity-verification-provider-edit.tsx
index 646d8e45b02..b3b83ea12e8 100644
--- a/features/admin.identity-verification-providers.v1/components/identity-verification-provider-edit.tsx
+++ b/features/admin.identity-verification-providers.v1/components/identity-verification-provider-edit.tsx
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ * Copyright (c) 2023-2024, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -26,7 +26,7 @@ import { IdentityVerificationProviderConstants } from "../constants";
 import {
     IDVPClaimMappingInterface,
     IDVPClaimsInterface,
-    IdentityVerificationProviderInterface,
+    OldIdentityVerificationProviderInterface,
     UIMetaDataForIDVP
 } from "../models";
 import { getContentLoader } from "../utils";
@@ -38,7 +38,7 @@ interface EditIdentityVerificationProviderPropsInterface extends IdentifiableCom
     /**
      * IDVP that is being edited.
      */
-    identityVerificationProvider: IdentityVerificationProviderInterface;
+    identityVerificationProvider: OldIdentityVerificationProviderInterface;
     /**
      * Is the data still loading.
      */
@@ -147,7 +147,7 @@ export const EditIdentityVerificationProvider: FunctionComponent<EditIdentityVer
                 isLoading={ isLoading }
                 onUpdate={ onUpdate }
                 data-componentid={ `${ componentId }-configuration-settings` }
-                uiMetaData={ uiMetaData.pages.edit.settings }
+                uiMetaData={ uiMetaData?.common?.configProperties }
                 isReadOnly={ isReadOnly }
                 loader={ getContentLoader }
             />
diff --git a/features/admin.identity-verification-providers.v1/components/identity-verification-provider-list.tsx b/features/admin.identity-verification-providers.v1/components/identity-verification-provider-list.tsx
index fb778c71eaa..c8e8c543703 100644
--- a/features/admin.identity-verification-providers.v1/components/identity-verification-provider-list.tsx
+++ b/features/admin.identity-verification-providers.v1/components/identity-verification-provider-list.tsx
@@ -43,7 +43,7 @@ import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 import { Header, Icon, SemanticICONS } from "semantic-ui-react";
 import { deleteIDVP } from "../api";
-import { IDVPListResponseInterface, IDVPTemplateItemInterface, IdentityVerificationProviderInterface } from "../models";
+import { IDVPListResponseInterface, IDVPTemplateItemInterface, OldIdentityVerificationProviderInterface } from "../models";
 import { handleIDVPDeleteError, handleIDVPDeleteSuccess } from "../utils";
 
 /**
@@ -77,7 +77,7 @@ interface IdentityVerificationProviderListPropsInterface extends LoadableCompone
      * @param idvp - Selected IDVP
      * @returns void
      */
-    onListItemClick?: (event: SyntheticEvent, idvp: IdentityVerificationProviderInterface) => void;
+    onListItemClick?: (event: SyntheticEvent, idvp: OldIdentityVerificationProviderInterface) => void;
     /**
      * Enable selection styles.
      */
@@ -113,7 +113,7 @@ export const IdentityVerificationProviderList: FunctionComponent<IdentityVerific
 
     const [ showDeleteConfirmationModal, setShowDeleteConfirmationModal ] = useState<boolean>(false);
     const [ selectedIdvpToBeDeleted, setSelectedIdvpToBeDeleted ] =
-        useState<IdentityVerificationProviderInterface>(undefined);
+        useState<OldIdentityVerificationProviderInterface>(undefined);
     const [ loading, setLoading ] = useState<boolean>(false);
 
     const { t } = useTranslation();
@@ -138,8 +138,8 @@ export const IdentityVerificationProviderList: FunctionComponent<IdentityVerific
      * @returns void
      */
     const showIDVPDeleteConfirmationModal = (idvpId: string): void => {
-        const selectedIDVP: IdentityVerificationProviderInterface = idvpList.identityVerificationProviders
-            .find((idvp: IdentityVerificationProviderInterface) => idvp.id === idvpId);
+        const selectedIDVP: OldIdentityVerificationProviderInterface = idvpList.identityVerificationProviders
+            .find((idvp: OldIdentityVerificationProviderInterface) => idvp.id === idvpId);
 
         setSelectedIdvpToBeDeleted(selectedIDVP);
         setShowDeleteConfirmationModal(true);
@@ -213,7 +213,7 @@ export const IdentityVerificationProviderList: FunctionComponent<IdentityVerific
                 dataIndex: "name",
                 id: "name",
                 key: "name",
-                render: (idvp: IdentityVerificationProviderInterface): ReactNode => {
+                render: (idvp: OldIdentityVerificationProviderInterface): ReactNode => {
                     const templateType: IDVPTemplateItemInterface= idvpTemplateTypeList?.find(
                         (template:IDVPTemplateItemInterface) => template.id === idvp.Type
                     );
@@ -296,7 +296,7 @@ export const IdentityVerificationProviderList: FunctionComponent<IdentityVerific
 
                     return hasUpdateScopes ? "pencil alternate" : "eye";
                 },
-                onClick: (e: SyntheticEvent, idvp: IdentityVerificationProviderInterface): void => {
+                onClick: (e: SyntheticEvent, idvp: OldIdentityVerificationProviderInterface): void => {
                     handleIdentityVerificationProviderEdit(idvp.id);
                 },
                 popupText: (): string => {
@@ -320,7 +320,7 @@ export const IdentityVerificationProviderList: FunctionComponent<IdentityVerific
                     );
                 },
                 icon: (): SemanticICONS => "trash alternate",
-                onClick: (e: SyntheticEvent, idvp: IdentityVerificationProviderInterface): void => {
+                onClick: (e: SyntheticEvent, idvp: OldIdentityVerificationProviderInterface): void => {
                     showIDVPDeleteConfirmationModal(idvp.id);
                 },
                 popupText: (): string => t("common:delete"),
@@ -370,7 +370,7 @@ export const IdentityVerificationProviderList: FunctionComponent<IdentityVerific
 
     return (
         <>
-            <DataTable<IdentityVerificationProviderInterface>
+            <DataTable<OldIdentityVerificationProviderInterface>
                 className="identity-providers-table"
                 isLoading={ isLoading }
                 loadingStateOptions={ {
@@ -380,7 +380,7 @@ export const IdentityVerificationProviderList: FunctionComponent<IdentityVerific
                 actions={ resolveTableActions() }
                 columns={ resolveTableColumns() }
                 data={ idvpList?.identityVerificationProviders }
-                onRowClick={ (e: SyntheticEvent, idvp: IdentityVerificationProviderInterface): void => {
+                onRowClick={ (e: SyntheticEvent, idvp: OldIdentityVerificationProviderInterface): void => {
                     handleIdentityVerificationProviderEdit(idvp.id);
                     onListItemClick && onListItemClick(e, idvp);
                 } }
diff --git a/features/admin.identity-verification-providers.v1/components/modals/idvp-creation-modal.tsx b/features/admin.identity-verification-providers.v1/components/modals/idvp-creation-modal.tsx
new file mode 100644
index 00000000000..31896bcf11b
--- /dev/null
+++ b/features/admin.identity-verification-providers.v1/components/modals/idvp-creation-modal.tsx
@@ -0,0 +1,136 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ResourceCreateWizard } from "@wso2is/admin.template-core.v1/components/resource-create-wizard";
+import { IdentifiableComponentInterface } from "@wso2is/core/models";
+import React, { FunctionComponent, ReactElement, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { ConnectionTemplateInterface } from "../../../admin.connections.v1";
+import { createIdentityVerificationProvider } from "../../api/identity-verification-provider";
+import { useGetIdVPMetadata } from "../../api/use-get-idvp-metadata";
+import { useGetIdVPTemplate } from "../../api/use-get-idvp-template";
+import useInitializeHandlers from "../../hooks/use-custom-initialize-handlers";
+import useValidationHandlers from "../../hooks/use-custom-validation-handlers";
+import { IDVPConfigPropertiesInterface, OldIdentityVerificationProviderInterface } from "../../models";
+import { IdVPClaimsInterface, IdVPConfigPropertiesInterface } from "../../models/new-models";
+
+interface IdVPCreationModalPropsInterface extends IdentifiableComponentInterface {
+    selectedTemplate: ConnectionTemplateInterface
+    selectedTemplateId: string;
+    onClose: () => void;
+}
+
+export const IdVPCreationModal: FunctionComponent<IdVPCreationModalPropsInterface> = ({
+    onClose,
+    selectedTemplate,
+    ["data-componentid"]: componentId = "idvp-create-modal"
+}: IdVPCreationModalPropsInterface): ReactElement => {
+    const { t } = useTranslation();
+
+    const {
+        data: fetchedTemplateData,
+        isLoading: isTemplateDataFetchRequestLoading,
+        error: templateDataFetchRequestError
+    } = useGetIdVPTemplate(selectedTemplate?.id);
+
+    const {
+        data: fetchedMetadata,
+        isLoading: isMetadataFetchRequestLoading,
+        error: metadataFetchRequestError
+    } = useGetIdVPMetadata(selectedTemplate?.id);
+
+    const { customInitializers } = useInitializeHandlers();
+    const { customValidations } = useValidationHandlers();
+
+    const initialFormValues: Record<string, unknown> = useMemo(() => {
+        if (!fetchedTemplateData) {
+            return {};
+        }
+
+        const configPropertiesInitialValues: Record<string, unknown> = fetchedTemplateData.payload.configProperties
+            .reduce((defaultValues: Record<string, unknown>, { key, value }: IdVPConfigPropertiesInterface) => {
+                defaultValues[key] = value;
+
+                return defaultValues;
+            }, {} as Record<string, unknown>);
+
+        return {
+            claims: fetchedTemplateData.payload.claims,
+            configProperties: configPropertiesInitialValues,
+            isEnabled: true,
+            templateId: selectedTemplate?.id,
+            templateVersion: selectedTemplate?.version
+        };
+
+    }, [ fetchedTemplateData ]);
+
+    const handleFormSubmission = (
+        values: Record<string, unknown>,
+        callback: (errorMsg: string, errorDescription: string) => void
+    ): void => {
+        const configPropertiesFormValues: Record<string, string | boolean> = values
+            .configProperties as Record<string, string | boolean>;
+        const configProperties: IDVPConfigPropertiesInterface[] = [];
+
+        for (const [ key, value ] of Object.entries(configPropertiesFormValues)) {
+            configProperties.push({
+                key,
+                value
+            });
+        }
+
+        const payload: OldIdentityVerificationProviderInterface = {
+            Name: values.name as string,
+            Type: values.templateId as string,
+            claims: values.claims as IdVPClaimsInterface[],
+            configProperties,
+            description: values.description as string,
+            isEnabled: true
+        };
+
+        createIdentityVerificationProvider(payload)
+            .then(() => {
+                console.log("Identity verification provider created successfully");
+                callback(null, null);
+            })
+            .catch((error) => {
+                console.log("Error occurred while creating identity verification provider", error);
+                callback("Error", null);
+            });
+    };
+
+    return (
+        <ResourceCreateWizard
+            showWizard={ true }
+            onClose={ onClose }
+            form={ fetchedMetadata?.create?.form }
+            customInitializers={ customInitializers }
+            customValidations={ customValidations }
+            guide={ fetchedMetadata?.create?.guide }
+            initialFormValues={ initialFormValues }
+            templateId={ selectedTemplate?.id }
+            templateName={ fetchedTemplateData?.payload?.name }
+            templateDescription={ fetchedTemplateData?.payload?.description }
+            templatePayload={ fetchedTemplateData?.payload as unknown as Record<string, unknown> }
+            buttonText={ t("common:create") }
+            onFormSubmit={ handleFormSubmission }
+            isLoading={ isTemplateDataFetchRequestLoading || isMetadataFetchRequestLoading }
+            data-componentid={ componentId }
+        />
+    );
+};
diff --git a/features/admin.identity-verification-providers.v1/components/settings/attribute-settings.tsx b/features/admin.identity-verification-providers.v1/components/settings/attribute-settings.tsx
index 73db0a42cbe..c532bc9110f 100644
--- a/features/admin.identity-verification-providers.v1/components/settings/attribute-settings.tsx
+++ b/features/admin.identity-verification-providers.v1/components/settings/attribute-settings.tsx
@@ -31,7 +31,7 @@ import { AttributesSelection } from "./attribute-management/attribute-selection"
 import {
     IDVPClaimMappingInterface,
     IDVPClaimsInterface,
-    IdentityVerificationProviderInterface
+    OldIdentityVerificationProviderInterface
 } from "../../models";
 import { updateIDVP } from "../../utils";
 
@@ -42,7 +42,7 @@ interface AttributeSettingsPropsInterface extends IdentifiableComponentInterface
     /**
      * Identity verification provider that is being edited.
      */
-    idvp: IdentityVerificationProviderInterface;
+    idvp: OldIdentityVerificationProviderInterface;
     /**
      * Initial claims of the IDVP.
      */
diff --git a/features/admin.identity-verification-providers.v1/components/settings/configuration-settings.tsx b/features/admin.identity-verification-providers.v1/components/settings/configuration-settings.tsx
index a2f20a12bf9..45b4f610ea3 100644
--- a/features/admin.identity-verification-providers.v1/components/settings/configuration-settings.tsx
+++ b/features/admin.identity-verification-providers.v1/components/settings/configuration-settings.tsx
@@ -19,7 +19,7 @@
 import { IdentifiableComponentInterface } from "@wso2is/core/models";
 import React, { FunctionComponent, ReactElement, useState } from "react";
 import { Divider } from "semantic-ui-react";
-import { IDVPConfigPropertiesInterface, IdentityVerificationProviderInterface, InputFieldMetadata } from "../../models";
+import { IDVPConfigPropertiesInterface, OldIdentityVerificationProviderInterface, InputFieldMetadata } from "../../models";
 import { updateIDVP } from "../../utils";
 import { ConfigurationSettingsForm } from "../forms";
 
@@ -30,7 +30,7 @@ interface ConfigurationSettingsInterface extends IdentifiableComponentInterface
     /**
      * IDVP that is being edited.
      */
-    idvp: IdentityVerificationProviderInterface;
+    idvp: OldIdentityVerificationProviderInterface;
     /**
      * Is the IDVP info request loading.
      */
diff --git a/features/admin.identity-verification-providers.v1/components/settings/general-settings.tsx b/features/admin.identity-verification-providers.v1/components/settings/general-settings.tsx
index 1df3627ff3c..54662717b43 100644
--- a/features/admin.identity-verification-providers.v1/components/settings/general-settings.tsx
+++ b/features/admin.identity-verification-providers.v1/components/settings/general-settings.tsx
@@ -26,7 +26,7 @@ import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 import { CheckboxProps, Divider } from "semantic-ui-react";
 import { deleteIDVP } from "../../api";
-import { IdentityVerificationProviderInterface } from "../../models";
+import { OldIdentityVerificationProviderInterface } from "../../models";
 import {
     handleIDVPDeleteError,
     handleIDVPDeleteSuccess,
@@ -41,7 +41,7 @@ interface GeneralSettingsInterface extends IdentifiableComponentInterface {
     /**
      * IDVP that is being edited.
      */
-    idvp: IdentityVerificationProviderInterface;
+    idvp: OldIdentityVerificationProviderInterface;
     /**
      * Is the IDVP info request loading.
      */
@@ -127,7 +127,7 @@ export const GeneralSettings: FunctionComponent<GeneralSettingsInterface> = (
      * @param updatedDetails - Form values.
      * @returns void
      */
-    const handleFormSubmit = (updatedDetails: IdentityVerificationProviderInterface): void => {
+    const handleFormSubmit = (updatedDetails: OldIdentityVerificationProviderInterface): void => {
 
         for (const key in updatedDetails) {
             if (updatedDetails[key] !== undefined) {
diff --git a/features/admin.identity-verification-providers.v1/components/wizards/idvp-create-wizard.tsx b/features/admin.identity-verification-providers.v1/components/wizards/idvp-create-wizard.tsx
index 208cdce5c3c..dfaead43805 100644
--- a/features/admin.identity-verification-providers.v1/components/wizards/idvp-create-wizard.tsx
+++ b/features/admin.identity-verification-providers.v1/components/wizards/idvp-create-wizard.tsx
@@ -39,7 +39,6 @@ import { Grid, Icon } from "semantic-ui-react";
 import {
     createIdentityVerificationProvider,
     useIDVPTemplate,
-    useIdentityVerificationProviderList,
     useUIMetadata
 } from "../../api";
 import { getIDVPCreateWizardStepIcons } from "../../configs/ui";
@@ -47,7 +46,7 @@ import { IdentityVerificationProviderConstants } from "../../constants";
 import {
     IDVPClaimMappingInterface,
     IDVPTypeMetadataInterface,
-    IdentityVerificationProviderInterface
+    OldIdentityVerificationProviderInterface
 } from "../../models";
 import {
     getInitialClaimMappingsFromTemplate,
@@ -59,6 +58,7 @@ import {
 } from "../../utils";
 import { performValidations, renderFormUIWithMetadata } from "../forms/helpers/dynamic-ui-helper";
 import { AttributesSelectionWizardPage } from "../settings/attribute-management/attribute-selection-wizard-page";
+import { useIdentityVerificationProviderList } from "../../api/use-get-idvp-list";
 
 /**
  * Enum for representing the wizard steps.
@@ -214,7 +214,7 @@ export const IdvpCreateWizard: FunctionComponent<IDVPCreateWizardInterface> = (
      * @param modifiedIDVPTemplate - IDVP template with user modifications.
      * @returns void
      */
-    const createNewIDVP = (modifiedIDVPTemplate: IdentityVerificationProviderInterface): void => {
+    const createNewIDVP = (modifiedIDVPTemplate: OldIdentityVerificationProviderInterface): void => {
 
         setIsSubmitting(true);
 
@@ -375,7 +375,7 @@ export const IdvpCreateWizard: FunctionComponent<IDVPCreateWizardInterface> = (
                 return nameValidationError;
             }
 
-            for(const setting of uiMetaData?.pages?.edit?.settings) {
+            for(const setting of uiMetaData?.common?.configProperties) {
                 const configurationValidationError: string = performValidations( values[setting.name], setting);
 
                 if(configurationValidationError) {
@@ -406,7 +406,7 @@ export const IdvpCreateWizard: FunctionComponent<IDVPCreateWizardInterface> = (
                     data-componentid={ `${ componentId }-form-wizard-idvp-name` }
                     hint={ t("idvp:forms.generalDetails.name.hint") }
                 />
-                { renderFormUIWithMetadata(uiMetaData?.pages?.edit?.settings, idvpTemplate) }
+                { renderFormUIWithMetadata(uiMetaData?.common?.configProperties, idvpTemplate) }
             </WizardPage>);
     };
 
@@ -437,7 +437,7 @@ export const IdvpCreateWizard: FunctionComponent<IDVPCreateWizardInterface> = (
 
         // Update the name and description on the template with the values from the form.
         idvpTemplate.Name = values?.name ?? idvpTemplate.Name;
-        idvpTemplate.description = values?.description ?? idvpTemplate.description;
+        idvpTemplate.description = values?.description;
 
         // Update the config properties on the template with the values from the form.
         for(const configs of idvpTemplate?.configProperties) {
diff --git a/features/admin.identity-verification-providers.v1/hooks/use-custom-initialize-handlers.tsx b/features/admin.identity-verification-providers.v1/hooks/use-custom-initialize-handlers.tsx
new file mode 100644
index 00000000000..57e72622657
--- /dev/null
+++ b/features/admin.identity-verification-providers.v1/hooks/use-custom-initialize-handlers.tsx
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { CustomInitializeFunction } from
+    "@wso2is/admin.template-core.v1/hooks/use-initialize-handlers";
+import {
+    DynamicFieldHandlerInterface,
+    DynamicFieldInterface
+} from "@wso2is/admin.template-core.v1/models/dynamic-fields";
+import get from "lodash-es/get";
+import useUniqueIdVPName from "./use-unique-idvp-name";
+import { IdVPTemplateInitializeHandlers } from "../models/dynamic-fields";
+
+/**
+ * Hook for custom initialize handlers.
+ *
+ * @returns Custom initialize functions.
+ */
+const useInitializeHandlers = (): { customInitializers: CustomInitializeFunction } => {
+
+    const { generateUniqueName } = useUniqueIdVPName();
+
+    /**
+     * Custom initializer functions to initialize the field based on the handler.
+     *
+     * @param formValues - The form values to be initialized.
+     * @param field - Metadata of the form field.
+     * @param handler - Handler definition.
+     * @param templatePayload - Template payload values.
+     */
+    const customInitializers = async (
+        formValues: Record<string, unknown>,
+        field: DynamicFieldInterface,
+        handler: DynamicFieldHandlerInterface,
+        templatePayload: Record<string, unknown>
+    ): Promise<void> => {
+        switch (handler?.name) {
+            case IdVPTemplateInitializeHandlers.UNIQUE_IdVP_NAME:
+                await generateUniqueName(
+                    get(templatePayload, field?.name)?.toString()?.trim(),
+                    formValues,
+                    field?.name
+                );
+
+                break;
+        }
+    };
+
+    return { customInitializers };
+};
+
+export default useInitializeHandlers;
diff --git a/features/admin.identity-verification-providers.v1/hooks/use-custom-validation-handlers.tsx b/features/admin.identity-verification-providers.v1/hooks/use-custom-validation-handlers.tsx
new file mode 100644
index 00000000000..1fe8106029c
--- /dev/null
+++ b/features/admin.identity-verification-providers.v1/hooks/use-custom-validation-handlers.tsx
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { CustomValidationsFunction } from
+    "@wso2is/admin.template-core.v1/hooks/use-validation-handlers";
+import {
+    DynamicFieldHandlerInterface,
+    DynamicFieldInterface
+} from "@wso2is/admin.template-core.v1/models/dynamic-fields";
+import get from "lodash-es/get";
+import useIdVPNameValidation from "./use-idvp-name-validation";
+import { IdVPTemplateValidationHandlers } from "../models/dynamic-fields";
+
+/**
+ * Hook for custom validation handlers.
+ *
+ * @returns Custom validation functions.
+ */
+const useValidationHandlers = (): { customValidations: CustomValidationsFunction } => {
+
+    const { validateName } = useIdVPNameValidation();
+
+    /**
+     * Custom validation function to validate the field based on the handler.
+     *
+     * @param formValues - The form values to be validated.
+     * @param field - Metadata of the form field.
+     * @param handler - Handler definition.
+     * @returns An error message if validation fails, or `null` if validation succeeds.
+     */
+    const customValidations = async (
+        formValues: Record<string, unknown>,
+        field: DynamicFieldInterface,
+        handler: DynamicFieldHandlerInterface
+    ): Promise<string | null> => {
+        let validationResult: string = null;
+
+        switch (handler?.name) {
+            case IdVPTemplateValidationHandlers.IdVP_NAME:
+                validationResult = await validateName(
+                    get(formValues, field?.name)?.toString()?.trim(),
+                    get(formValues, "id") as string
+                );
+
+                break;
+        }
+
+        return validationResult;
+    };
+
+    return { customValidations };
+};
+
+export default useValidationHandlers;
diff --git a/features/admin.identity-verification-providers.v1/hooks/use-idvp-name-validation.tsx b/features/admin.identity-verification-providers.v1/hooks/use-idvp-name-validation.tsx
new file mode 100644
index 00000000000..d4b6a3c3ac5
--- /dev/null
+++ b/features/admin.identity-verification-providers.v1/hooks/use-idvp-name-validation.tsx
@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import debounce, { DebouncedFunc } from "lodash-es/debounce";
+import { MutableRefObject, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { getIdentityVerificationProvidersList } from "../api";
+import { IdVPListResponseInterface, IdentityVerificationProviderInterface } from "../models/new-models";
+
+/**
+ * Hook for validate the IdVP name.
+ *
+ * @returns The IdVP name validation function.
+ */
+const useIdVPNameValidation = (): {
+    validateName: (name: string, id: string) => Promise<string | null>
+} => {
+    const { t } = useTranslation();
+
+    const previouslyValidatedName: MutableRefObject<string> = useRef(null);
+    const [ isNameAlreadyReserved, setIsNameAlreadyReserved ] = useState<boolean>(false);
+
+    /**
+     * Check if there is any IdVP with the given name.
+     *
+     * @param name - Name to be searched.
+     * @param id - Id of the editing IdVP.
+     */
+    const isNameAlreadyExist: DebouncedFunc<(name: string, id: string) => Promise<void>> = debounce(
+        async (name: string, id: string) => {
+            if (previouslyValidatedName?.current !== name) {
+                previouslyValidatedName.current = name;
+
+                const response: IdVPListResponseInterface = await getIdentityVerificationProvidersList(null, null);
+
+                const existingIdVP: IdentityVerificationProviderInterface = response?.identityVerificationProviders
+                    .find((
+                        idVP: IdentityVerificationProviderInterface
+                    ) => idVP.name.toLocaleLowerCase() === name.toLocaleLowerCase());
+
+                setIsNameAlreadyReserved(existingIdVP && existingIdVP?.id !== id);
+            }
+        },
+        600
+    );
+
+    /**
+     * Checks whether the IdVP name is valid.
+     *
+     * @param name - The value need to be validated.
+     * @returns Whether the provided value is a valid or not.
+     */
+    const validateIdVPName = async (name: string, id: string): Promise<string | null> => {
+        await isNameAlreadyExist(name, id);
+
+        if (isNameAlreadyReserved) {
+            return t("applications:forms.generalDetails.fields.name.validations.duplicate");
+        }
+
+        return null;
+    };
+
+    return {
+        validateName: validateIdVPName
+    };
+};
+
+export default useIdVPNameValidation;
diff --git a/features/admin.identity-verification-providers.v1/hooks/use-unique-idvp-name.tsx b/features/admin.identity-verification-providers.v1/hooks/use-unique-idvp-name.tsx
new file mode 100644
index 00000000000..c737259edc5
--- /dev/null
+++ b/features/admin.identity-verification-providers.v1/hooks/use-unique-idvp-name.tsx
@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import set from "lodash-es/set";
+import { MutableRefObject, useRef } from "react";
+import { getIdentityVerificationProvidersList } from "../api/identity-verification-provider";
+import { IdVPListResponseInterface, IdentityVerificationProviderInterface } from "../models/new-models";
+
+/**
+ * Interface for duplicate application list cache.
+ */
+interface DuplicateIdVPListCache {
+    /**
+     * Application list response for recently searched application name.
+     */
+    idVPList: IdVPListResponseInterface;
+    /**
+     * Recently searched application name.
+     */
+    idVPName: string;
+}
+
+/**
+ * Hook to generate a unique application name.
+ *
+ * @returns The function to generate unique application names.
+ */
+const useUniqueIdVPName = (): {
+    generateUniqueName: (
+        initialName: string,
+        formValues: Record<string, unknown>,
+        fieldName: string
+    ) => Promise<void>
+} => {
+    const duplicateListCache: MutableRefObject<DuplicateIdVPListCache> =
+        useRef<DuplicateIdVPListCache>(null);
+
+    /**
+     * Generate the next unique name by appending 1-based index number to the provided initial value.
+     *
+     * @param initialName - Initial value for the IdVP name.
+     * @returns A unique name from the provided list of names.
+     */
+    const generateUniqueName = async (
+        initialName: string,
+        formValues: Record<string, unknown>,
+        fieldName: string
+    ): Promise<void> => {
+        let idVPName: string = initialName?.trim();
+        let possibleListOfDuplicates: IdVPListResponseInterface =
+            duplicateListCache?.current?.idVPList;
+
+        if (duplicateListCache?.current?.idVPName !== idVPName) {
+            possibleListOfDuplicates = await getIdentityVerificationProvidersList(null, null);
+            duplicateListCache.current = {
+                idVPList: possibleListOfDuplicates,
+                idVPName
+            };
+        }
+
+        if (possibleListOfDuplicates?.totalResults > 0) {
+            const nameList: string[] = possibleListOfDuplicates?.identityVerificationProviders
+                ?.map((item: IdentityVerificationProviderInterface) => item?.name);
+
+            for (let i: number = 2; ; i++) {
+                if (!nameList?.includes(idVPName)) {
+                    break;
+                }
+
+                idVPName = initialName + " " +  i;
+            }
+        }
+
+        set(formValues, fieldName, idVPName);
+    };
+
+    return { generateUniqueName };
+};
+
+export default useUniqueIdVPName;
diff --git a/features/admin.identity-verification-providers.v1/models/dynamic-fields.ts b/features/admin.identity-verification-providers.v1/models/dynamic-fields.ts
new file mode 100644
index 00000000000..887e5c80b95
--- /dev/null
+++ b/features/admin.identity-verification-providers.v1/models/dynamic-fields.ts
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * Supported custom validation handlers for IdVP templates.
+ */
+export enum IdVPTemplateValidationHandlers {
+    IdVP_NAME = "identityVerificationProviderName",
+}
+
+/**
+ * Supported custom initialize handlers for IdVP templates.
+ */
+export enum IdVPTemplateInitializeHandlers {
+    UNIQUE_IdVP_NAME = "uniqueIdentityVerificationProviderName",
+};
diff --git a/features/admin.identity-verification-providers.v1/models/identity-verification-provider.ts b/features/admin.identity-verification-providers.v1/models/identity-verification-provider.ts
index 3ade72b20bf..3e20997f254 100644
--- a/features/admin.identity-verification-providers.v1/models/identity-verification-provider.ts
+++ b/features/admin.identity-verification-providers.v1/models/identity-verification-provider.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ * Copyright (c) 2023-2024, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -19,22 +19,22 @@
 /**
  * Interface that represent the response returned by the list IDVPs GET request.
  */
-export interface IDVPListResponseInterface {
+export interface OldIDVPListResponseInterface {
     totalResults?: number;
     startIndex?: number;
     count?: number;
-    identityVerificationProviders?: IdentityVerificationProviderInterface[];
+    identityVerificationProviders?: OldIdentityVerificationProviderInterface[];
 }
 
 /**
  * Interface for representing an identity verification provider.
  */
-export interface IdentityVerificationProviderInterface {
+export interface OldIdentityVerificationProviderInterface {
     id?: string;
     Name?: string;
     Type?: string;
     description?: string;
-    isEnabled?: boolean;
+    isEnabled: boolean;
     image?: string;
     templateId?: string;
     claims?: IDVPClaimsInterface[];
@@ -83,7 +83,7 @@ export interface IDVPClaimMappingInterface {
 export interface IDVPConfigPropertiesInterface {
     key: string;
     value: string | boolean;
-    isSecret: boolean;
+    isSecret?: boolean;
 }
 
 export interface IDVPTemplateItemInterface {
@@ -93,7 +93,7 @@ export interface IDVPTemplateItemInterface {
     image?: any;
     category?: string;
     displayOrder?: number;
-    idvp?: IdentityVerificationProviderInterface;
+    idvp?: OldIdentityVerificationProviderInterface;
     disabled?: boolean;
     type?: string;
     templateGroup?: string;
@@ -103,6 +103,13 @@ export interface IDVPTemplateItemInterface {
     templateId?: string;
 }
 
+export interface OldIdVPTemplateInterface {
+    /**
+     * Payload of the IdVP creation.
+     */
+    payload: OldIdentityVerificationProviderInterface;
+}
+
 /**
  * Enum for Identity Verification Provider Tab types
  */
diff --git a/features/admin.identity-verification-providers.v1/models/new-models.ts b/features/admin.identity-verification-providers.v1/models/new-models.ts
new file mode 100644
index 00000000000..b9da7780b78
--- /dev/null
+++ b/features/admin.identity-verification-providers.v1/models/new-models.ts
@@ -0,0 +1,150 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { DynamicFormInterface } from "@wso2is/admin.template-core.v1/models/dynamic-fields";
+
+/**
+ * Interface that represent the response returned by the list IDVPs GET request.
+ */
+export interface IdVPListResponseInterface {
+    totalResults?: number;
+    startIndex?: number;
+    count?: number;
+    identityVerificationProviders?: IdentityVerificationProviderInterface[];
+}
+
+export interface IdVPConfigPropertiesInterface {
+    key: string;
+    value: string | boolean;
+}
+
+/**
+ * Interface that represent a claim (attribute) mapping in the IDVP context. This is
+ * the claims mapping format expected by the IDVP backend APIs.This is mostly used
+ * outside the attribute management components
+ */
+export interface IdVPClaimsInterface {
+    localClaim: string;
+    idvpClaim: string;
+}
+
+/**
+ * Interface for representing an identity verification provider.
+ */
+export interface IdentityVerificationProviderInterface {
+    id?: string;
+    name: string;
+    type?: string;
+    description?: string;
+    isEnabled: boolean;
+    image?: string;
+    templateId?: string;
+    claims?: IdVPClaimsInterface[];
+    configProperties?: IdVPConfigPropertiesInterface[];
+}
+
+/**
+ * Possible Content Types for IdVP editing tabs.
+ */
+export enum IdVPEditTabContentType {
+    FORM = "form",
+    GUIDE = "guide"
+}
+
+/**
+ * Interface to generate a tab in the IdVP editing section.
+ */
+export interface IdVPEditTabMetadataInterface {
+    /**
+     * Unique identifier for the tab.
+     */
+    id: string;
+    /**
+     * Display name of the tab.
+     */
+    displayName?: string;
+    /**
+     * Content Types for current tab.
+     */
+    contentType?: IdVPEditTabContentType;
+    /**
+     * Dynamic input fields which should be rendered in the current tab.
+     */
+    form?: DynamicFormInterface;
+    /**
+     * Guide content for application editing section.
+     */
+    guide?: string;
+    /**
+     * Component IDs that need to be hidden from a predefined tab.
+     * This is only effective if the `contentType` is not defined.
+     */
+    hiddenComponents?: string[];
+}
+
+export interface IdVPTemplateMetadataInterface {
+    /**
+     * Creation related metadata.
+     */
+    create?: {
+        /**
+         * Dynamic input fields should be rendered in the create wizard.
+         */
+        form?: DynamicFormInterface;
+        /**
+         * IdVP creation guide metadata.
+         */
+        guide?: string[];
+    },
+    /**
+     * Editing section related metadata.
+     */
+    edit?: {
+        /**
+         * The metadata for tabs needs to be rendered on the edit page.
+         */
+        tabs: IdVPEditTabMetadataInterface[],
+        /**
+         * Tab id of the default active tab.
+         */
+        defaultActiveTabId?: string;
+    }
+};
+
+/**
+ * Interface for IdVP template payload.
+ */
+export interface IdVPTemplateInterface {
+    /**
+     * Payload of the IdVP creation.
+     */
+    payload: IdentityVerificationProviderInterface;
+}
+
+export interface IdVPTemplateResponseInterface {
+    payload: {
+        Name: string;
+        Type?: string;
+        description?: string;
+        isEnabled: boolean;
+        image?: string;
+        templateId?: string;
+        claims?: IdVPClaimsInterface[];
+        configProperties?: IdVPConfigPropertiesInterface[];
+    }
+}
diff --git a/features/admin.identity-verification-providers.v1/models/ui-metadata.ts b/features/admin.identity-verification-providers.v1/models/ui-metadata.ts
index 2f35ad6f4de..f891339a9cd 100644
--- a/features/admin.identity-verification-providers.v1/models/ui-metadata.ts
+++ b/features/admin.identity-verification-providers.v1/models/ui-metadata.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ * Copyright (c) 2023-2024, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -15,6 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
 import { FormFieldMessage } from "@wso2is/form";
 
 /**
@@ -44,12 +45,8 @@ export interface InputFieldMetadata {
  * to render the configuration settings section when creating and editing an IDVP.
  */
 export interface UIMetaDataForIDVP {
-    pages: {
-        edit: {
-            settings: InputFieldMetadata[];
-            general?: InputFieldMetadata[];
-            attributes?: InputFieldMetadata[];
-        };
+    common: {
+        configProperties: InputFieldMetadata[];
     }
 }
 
@@ -57,8 +54,8 @@ export interface UIMetaDataForIDVP {
  * Model that represents a dropdown option
  */
 export interface DropdownOptionsInterface {
-     label: string;
-     value: string
+    label: string;
+    value: string
 }
 
 /**
diff --git a/features/admin.identity-verification-providers.v1/package.json b/features/admin.identity-verification-providers.v1/package.json
index 33b294efd44..ab52f1443bc 100644
--- a/features/admin.identity-verification-providers.v1/package.json
+++ b/features/admin.identity-verification-providers.v1/package.json
@@ -24,6 +24,7 @@
         "@wso2is/admin.claims.v1": "^2.21.0",
         "@wso2is/admin.core.v1": "^2.30.0",
         "@wso2is/admin.feature-gate.v1": "^1.1.0",
+        "@wso2is/admin.template-core.v1": "workspace:^1.0.52",
         "@wso2is/core": "^2.1.0",
         "@wso2is/dynamic-forms": "^2.0.107",
         "@wso2is/form": "^2.1.15",
diff --git a/features/admin.identity-verification-providers.v1/pages/identity-verification-provider-edit.tsx b/features/admin.identity-verification-providers.v1/pages/identity-verification-provider-edit.tsx
index 7c44f5ec82b..2447b6f5a63 100644
--- a/features/admin.identity-verification-providers.v1/pages/identity-verification-provider-edit.tsx
+++ b/features/admin.identity-verification-providers.v1/pages/identity-verification-provider-edit.tsx
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
+ * Copyright (c) 2023-2024, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -16,8 +16,8 @@
  * under the License.
  */
 
+import { useRequiredScopes } from "@wso2is/access-control";
 import { AppConstants, AppState, FeatureConfigInterface, history } from "@wso2is/admin.core.v1";
-import { hasRequiredScopes } from "@wso2is/core/helpers";
 import { IdentifiableComponentInterface } from "@wso2is/core/models";
 import {
     AnimatedAvatar,
@@ -28,7 +28,6 @@ import React, {
     FunctionComponent,
     ReactElement,
     useEffect,
-    useMemo,
     useState
 } from "react";
 import { useTranslation } from "react-i18next";
@@ -95,22 +94,11 @@ const IdentityVerificationProviderEditPage: FunctionComponent<IDVPEditPagePropsI
     } = useIDVPTemplateTypeMetadata(idvp?.Type);
 
     const featureConfig: FeatureConfigInterface = useSelector((state: AppState) => state.config.ui.features);
-    const allowedScopes: string = useSelector((state: AppState) => state?.auth?.allowedScopes);
-    const isReadOnly: boolean = useMemo(() => {
-        return !hasRequiredScopes(
-            featureConfig?.identityVerificationProviders,
-            featureConfig?.identityVerificationProviders?.scopes?.update,
-            allowedScopes
-        );
-    }, [ featureConfig, allowedScopes ]);
 
-    const isDeletePermitted: boolean = useMemo(() => {
-        return hasRequiredScopes(
-            featureConfig?.identityVerificationProviders,
-            featureConfig?.identityVerificationProviders?.scopes?.delete,
-            allowedScopes
-        );
-    }, [ featureConfig, allowedScopes ]);
+    const hasIdVPUpdatePermissions: boolean = useRequiredScopes(
+        featureConfig?.identityVerificationProviders?.scopes?.update);
+    const hasIdVPDeletePermissions: boolean = useRequiredScopes(
+        featureConfig?.identityVerificationProviders?.scopes?.delete);
 
     /**
      * Checks if the user needs to go to a specific tab index.
@@ -254,8 +242,8 @@ const IdentityVerificationProviderEditPage: FunctionComponent<IDVPEditPagePropsI
                     onDelete={ onIdentityVerificationProviderDelete }
                     onUpdate={ onIdentityVerificationProviderUpdate }
                     data-testid={ componentId }
-                    isReadOnly={ isReadOnly }
-                    isDeletePermitted={ isDeletePermitted }
+                    isReadOnly={ !hasIdVPUpdatePermissions }
+                    isDeletePermitted={ hasIdVPDeletePermissions }
                     isAutomaticTabRedirectionEnabled={ isAutomaticTabRedirectionEnabled }
                     tabIdentifier={ tabIdentifier }
                     uiMetaData={ uiMetaData }
diff --git a/features/admin.identity-verification-providers.v1/pages/identity-verification-providers.tsx b/features/admin.identity-verification-providers.v1/pages/identity-verification-providers.tsx
index 29421084037..8f39f5087f2 100644
--- a/features/admin.identity-verification-providers.v1/pages/identity-verification-providers.tsx
+++ b/features/admin.identity-verification-providers.v1/pages/identity-verification-providers.tsx
@@ -24,7 +24,8 @@ import React, { FunctionComponent, MouseEvent, SyntheticEvent, useEffect, useSta
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 import { DropdownProps, Icon, PaginationProps } from "semantic-ui-react";
-import { useIDVPTemplateTypeMetadataList, useIdentityVerificationProviderList } from "../api";
+import { useIDVPTemplateTypeMetadataList } from "../api";
+import { useIdentityVerificationProviderList } from "../api/use-get-idvp-list";
 import { IdentityVerificationProviderList } from "../components";
 import { IdentityVerificationProviderConstants } from "../constants";
 import { handleIDVPTemplateRequestError, handleIdvpListFetchRequestError } from "../utils";
diff --git a/features/admin.identity-verification-providers.v1/utils/common-utils.tsx b/features/admin.identity-verification-providers.v1/utils/common-utils.tsx
index c9189447297..11e472ca1bf 100644
--- a/features/admin.identity-verification-providers.v1/utils/common-utils.tsx
+++ b/features/admin.identity-verification-providers.v1/utils/common-utils.tsx
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ * Copyright (c) 2023-2024, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -21,7 +21,7 @@ import { ContentLoader, EmphasizedSegment } from "@wso2is/react-components";
 import React, { ReactElement } from "react";
 import { handleIDVPUpdateError, handleIDVPUpdateSuccess } from "./notification-utils";
 import { updateIdentityVerificationProvider } from "../api";
-import { IdentityVerificationProviderInterface } from "../models";
+import { OldIdentityVerificationProviderInterface } from "../models";
 
 /**
  * Updates an Identity Verification Provider with given data and displays the
@@ -33,7 +33,7 @@ import { IdentityVerificationProviderInterface } from "../models";
  * @returns void.
  */
 export const updateIDVP = (
-    idvp: IdentityVerificationProviderInterface,
+    idvp: OldIdentityVerificationProviderInterface,
     setIsSubmitting: (boolean) => void,
     onUpdate: () => void
 ) : void => {
diff --git a/features/admin.identity-verification-providers.v1/utils/validation-utils.ts b/features/admin.identity-verification-providers.v1/utils/validation-utils.ts
index 5da9dfef543..44508be3c3d 100644
--- a/features/admin.identity-verification-providers.v1/utils/validation-utils.ts
+++ b/features/admin.identity-verification-providers.v1/utils/validation-utils.ts
@@ -18,7 +18,7 @@
 
 import { I18n } from "@wso2is/i18n";
 import { FormValidation } from "@wso2is/validation";
-import { IdentityVerificationProviderInterface } from "../models";
+import { OldIdentityVerificationProviderInterface } from "../models";
 
 /**
  * Performs required, invalid and duplicate validations for IDVP name.
@@ -30,8 +30,8 @@ import { IdentityVerificationProviderInterface } from "../models";
  */
 export const validateIDVPName = (
     value: string,
-    idvpList: IdentityVerificationProviderInterface[],
-    currentIDVP?: IdentityVerificationProviderInterface
+    idvpList: OldIdentityVerificationProviderInterface[],
+    currentIDVP?: OldIdentityVerificationProviderInterface
 ): string => {
 
     if (!value) {
@@ -59,16 +59,16 @@ export const validateIDVPName = (
  */
 const isIDVPNameAlreadyTaken = (
     value: string,
-    idvpList: IdentityVerificationProviderInterface[],
-    currentIDVP?: IdentityVerificationProviderInterface
+    idvpList: OldIdentityVerificationProviderInterface[],
+    currentIDVP?: OldIdentityVerificationProviderInterface
 ):boolean => {
 
     if (!idvpList) {
         return false;
     }
 
-    const existingIDVP: IdentityVerificationProviderInterface = idvpList.find(
-        (idvp: IdentityVerificationProviderInterface) => {
+    const existingIDVP: OldIdentityVerificationProviderInterface = idvpList.find(
+        (idvp: OldIdentityVerificationProviderInterface) => {
             if (currentIDVP) {
                 // Current IDVP is available on edit IDVP scenario. In that case, we need to skip the
                 // current IDVP name when validating the name
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d06d97c73ea..93a13508511 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5148,6 +5148,9 @@ importers:
       '@wso2is/admin.identity-providers.v1':
         specifier: ^2.22.0
         version: link:../admin.identity-providers.v1
+      '@wso2is/admin.identity-verification-providers.v1':
+        specifier: workspace:^2.22.0
+        version: link:../admin.identity-verification-providers.v1
       '@wso2is/admin.organizations.v1':
         specifier: ^2.22.0
         version: link:../admin.organizations.v1
@@ -9428,7 +9431,7 @@ importers:
     dependencies:
       '@asgardeo/auth-react':
         specifier: ^5.1.2
-        version: 5.1.2(@babel/runtime-corejs3@7.25.6)(react-dom@18.3.1)(react@18.3.1)
+        version: 5.1.2(@babel/runtime-corejs3@7.25.6)(react-dom@16.14.0)(react@16.14.0)
       '@emotion/react':
         specifier: ^11.11.0
         version: 11.13.3(@types/react@18.0.18)(react@18.3.1)
@@ -9480,6 +9483,9 @@ importers:
       '@wso2is/admin.feature-gate.v1':
         specifier: ^1.1.0
         version: link:../admin.feature-gate.v1
+      '@wso2is/admin.template-core.v1':
+        specifier: workspace:^1.0.52
+        version: link:../admin.template-core.v1
       '@wso2is/core':
         specifier: ^2.1.0
         version: link:../../modules/core
@@ -9575,7 +9581,7 @@ importers:
         version: 2.9.2(@types/react@18.0.18)(react-dom@18.3.1)(react@18.3.1)
       react-notification-system:
         specifier: ^0.4.0
-        version: 0.4.0(react-dom@18.3.1)(react@18.3.1)
+        version: 0.4.0(react-dom@16.14.0)(react@16.14.0)
       react-redux:
         specifier: ^7.2.9
         version: 7.2.9(react-dom@18.3.1)(react@18.3.1)
@@ -40368,8 +40374,6 @@ packages:
     peerDependenciesMeta:
       webpack:
         optional: true
-      webpack-sources:
-        optional: true
     dependencies:
       webpack: 5.84.1(@swc/core@1.3.99)(esbuild@0.18.20)(webpack-cli@4.10.0)
       webpack-sources: 3.2.3