diff --git a/packages/app-headless-cms/src/admin/plugins/apiInformationDialog.tsx b/packages/app-headless-cms/src/admin/plugins/apiInformationDialog.tsx
index 1aab405fc2e..08e4349a335 100644
--- a/packages/app-headless-cms/src/admin/plugins/apiInformationDialog.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/apiInformationDialog.tsx
@@ -1,127 +1,13 @@
-import React, { useState } from "react";
-import { useQuery } from '@apollo/react-hooks';
-import { css } from "emotion";
-import { ApiInformationDialog } from "@webiny/app-admin/types";
-import { CopyButton } from "@webiny/ui/Button";
-import { useCms } from "@webiny/app-headless-cms/admin/hooks";
-import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
-import { LIST_ENVIRONMENT_ALIASES } from "../views/EnvironmentAliases/graphql";
-import { Typography } from "@webiny/ui/Typography";
-import { toLower } from "lodash";
-import ReactGraphqlUrl from "@webiny/app-headless-cms/admin/components/ReactGraphqlUrl";
+import React from "react";
+import { ApiInformationDialogPlugin } from "@webiny/app-admin/types";
+import HeadlessCmsApiUrls from "./apiInformationDialog/HeadlessCmsApiUrls";
 
-const style = {
-    apiUrl: css({
-        display: "flex",
-        alignItems: "center"
-    }),
-    aliasTitle: css({
-        minWidth: "200px"
-    }),
-    aliasContainer: css({
-        marginTop: "10px"
-    })
-};
-
-const plugin: ApiInformationDialog = {
+const plugin: ApiInformationDialogPlugin = {
     type: "admin-api-information-dialog",
     name: "admin-api-information-dialog-headless-cms",
-    render({ name, type }) {
-        const { showSnackbar } = useSnackbar();
-        const graphqlApiUrl = process.env.REACT_APP_API_URL;
-        const [totalAliases, setTotalAliases] = useState([]);
-        const {
-            environments: { currentEnvironment }
-        } = useCms();
-
-        useQuery(LIST_ENVIRONMENT_ALIASES, {
-            onCompleted: data => {
-                setTotalAliases(data.cms.environmentAliases.data);
-            }
-        });
-
-        return (
-            <div>
-                {
-                    type === "api" && [
-                        <ReactGraphqlUrl key="graphql-api-url"/>,
-                        <br key="graphql-break"></br>
-                    ]
-                }
-                <Typography use={"headline6"} style={{fontSize: "1.4rem"}}>
-                    Headless CMS - {name}
-                </Typography>
-                {
-                    totalAliases.filter((elem) => {
-                        if (type === "aliases") {
-                            return elem.name === name;
-                        } else if (type === "environment"){
-                            return elem.environment.name === name;
-                        } else {
-                            return elem.environment.name === currentEnvironment.name;
-                        }
-                    }).map((elem) => {
-                        return(
-                            <div key={elem.id} className={style.aliasContainer}>
-                                <Typography use={"headline6"}>
-                                    Alias: {elem.name}
-                                </Typography>
-                                <div className={style.apiUrl} >
-                                    <Typography use={"subtitle1"} className={style.aliasTitle}>
-                                        Content Delivery API:
-                                    </Typography>
-                                    <a
-                                        href={`${graphqlApiUrl}/cms/read/${toLower(elem.name)}`}
-                                        rel="noopener noreferrer"
-                                        target="_blank"
-                                    >
-                                        {`${graphqlApiUrl}/cms/read/${toLower(elem.name)}`}
-                                    </a>
-                                    <CopyButton
-                                        value={`${graphqlApiUrl}/cms/read/${toLower(elem.name)}`}
-                                        onCopy={() => showSnackbar("Successfully copied!")}
-                                    />
-                                </div>
-                                <div className={style.apiUrl}>
-                                    <Typography use={"subtitle1"} className={style.aliasTitle}>
-                                        Content Preview API:
-                                    </Typography>
-                                    <a
-                                        href={`${graphqlApiUrl}/cms/preview/${toLower(elem.name)}`}
-                                        rel="noopener noreferrer"
-                                        target="_blank"
-                                    >
-                                        {`${graphqlApiUrl}/cms/preview/${toLower(elem.name)}`}
-                                    </a>
-                                    <CopyButton
-                                        value={`${graphqlApiUrl}/cms/preview/${toLower(elem.name)}`}
-                                        onCopy={() => showSnackbar("Successfully copied!")}
-                                    />
-                                </div>
-                                <div className={style.apiUrl}>
-                                    <Typography use={"subtitle1"} className={style.aliasTitle}>
-                                        Content Management API:
-                                    </Typography>
-                                    <a
-                                        href={`${graphqlApiUrl}/cms/manage/${toLower(elem.name)}`}
-                                        rel="noopener noreferrer"
-                                        target="_blank"
-                                    >
-                                        {`${graphqlApiUrl}/cms/manage/${toLower(elem.name)}`}
-                                    </a>
-                                    <CopyButton
-                                        value={`${graphqlApiUrl}/cms/manage/${toLower(elem.name)}`}
-                                        onCopy={() => showSnackbar("Successfully copied!")}
-                                    />
-                                </div>
-                                <br></br>
-                            </div>
-                        )
-                    })
-                }
-            </div>
-        )
+    render() {
+        return <HeadlessCmsApiUrls />;
     }
 };
 
-export default plugin;
\ No newline at end of file
+export default plugin;
diff --git a/packages/app-headless-cms/src/admin/views/EnvironmentAliases/EnvironmentAliasesDataList.tsx b/packages/app-headless-cms/src/admin/views/EnvironmentAliases/EnvironmentAliasesDataList.tsx
index a27e5a02cb4..0542d09d119 100644
--- a/packages/app-headless-cms/src/admin/views/EnvironmentAliases/EnvironmentAliasesDataList.tsx
+++ b/packages/app-headless-cms/src/admin/views/EnvironmentAliases/EnvironmentAliasesDataList.tsx
@@ -6,7 +6,9 @@ import { ReactComponent as InformationIcon } from "../../icons/info.svg";
 import { css } from "emotion";
 import { useCrud } from "@webiny/app-admin/hooks/useCrud";
 import { Typography } from "@webiny/ui/Typography";
-import EnvironmentInfoDialog from "@webiny/app-admin/components/EnvironmentInfoDialog";
+import ApiUrlsDialog from "@webiny/app-headless-cms/admin/components/ApiUrlsDialog";
+
+
 import {
     DataList,
     List,
@@ -71,7 +73,7 @@ const EnvironmentAliasesDataList = () => {
                 <List data-testid="default-data-list">
                     {
                         selectedInfo.name &&
-                            <EnvironmentInfoDialog
+                            <ApiUrlsDialog
                                 open={infoOpened}
                                 onClose={() => setInfoOpened(false)}
                                 name={selectedInfo.name}
diff --git a/packages/app-headless-cms/src/admin/views/Environments/EnvironmentsDataList.tsx b/packages/app-headless-cms/src/admin/views/Environments/EnvironmentsDataList.tsx
index 6a9c1fe4f94..bb45851cb25 100644
--- a/packages/app-headless-cms/src/admin/views/Environments/EnvironmentsDataList.tsx
+++ b/packages/app-headless-cms/src/admin/views/Environments/EnvironmentsDataList.tsx
@@ -16,9 +16,9 @@ import {
 import { ReactComponent as InformationIcon } from "../../icons/info.svg";
 import { Link } from "@webiny/react-router";
 import { ConfirmationDialogWithInput } from "./ConfirmationDialogWithInput";
-import EnvironmentInfoDialog from "@webiny/app-admin/components/EnvironmentInfoDialog";
 import styled from "@emotion/styled";
 import { css } from "emotion";
+import ApiUrlsDialog from "@webiny/app-headless-cms/admin/components/ApiUrlsDialog";
 
 const t = i18n.ns("app-headless-cms/admin/environments/data-list");
 
@@ -92,7 +92,7 @@ const EnvironmentsDataList = () => {
                     <List data-testid="default-data-list">
                         {
                             selectedInfo.name &&
-                                <EnvironmentInfoDialog
+                                <ApiUrlsDialog
                                     open={infoOpened}
                                     onClose={() => setInfoOpened(false)}
                                     name={selectedInfo.name}