diff --git a/monitoring-dashboard/components/org.wso2.micro.integrator.dashboard.web/web-app/src/commons/sideDrawers/ApiSideDrawer.js b/monitoring-dashboard/components/org.wso2.micro.integrator.dashboard.web/web-app/src/commons/sideDrawers/ApiSideDrawer.js
index 964689c44..99861b5af 100644
--- a/monitoring-dashboard/components/org.wso2.micro.integrator.dashboard.web/web-app/src/commons/sideDrawers/ApiSideDrawer.js
+++ b/monitoring-dashboard/components/org.wso2.micro.integrator.dashboard.web/web-app/src/commons/sideDrawers/ApiSideDrawer.js
@@ -26,7 +26,7 @@ import Box from '@material-ui/core/Box';
 import Grid from '@material-ui/core/Grid';
 import { Table, TableCell, TableBody, TableRow } from '@material-ui/core';
 import HeadingSection from './commons/HeadingSection'
-import CopyToClipboardCell from './commons/CopyToClipBoardCell'
+import CopyToClipboardRow from './commons/CopyToClipboardRow'
 import TracingRow from './commons/TracingRow'
 import SourceViewSection from './commons/SourceViewSection'
 import ExpansionPanel from '@material-ui/core/ExpansionPanel';
@@ -74,6 +74,7 @@ function ApiDetailTable(props) {
     const { nodeData, retrieveUpdatedArtifact } = props;
     const artifactName = nodeData.details.name
     const pageId = "apis";
+    const urls = nodeData.details.urlList;
 
     return <Table>
         <TableRow>
@@ -86,7 +87,13 @@ function ApiDetailTable(props) {
         </TableRow>
         <TableRow>
             <TableCell>URL</TableCell>
-            <CopyToClipboardCell text={nodeData.details.url} />
+            <TableCell>
+                <Table>
+                    {urls.map(url =>
+                        <CopyToClipboardRow text={url} />
+                    )}
+                </Table>
+            </TableCell>
         </TableRow>
         <TableRow>
             <TableCell>Statistics</TableCell>
diff --git a/monitoring-dashboard/components/org.wso2.micro.integrator.dashboard.web/web-app/src/commons/sideDrawers/commons/CopyToClipBoardCell.js b/monitoring-dashboard/components/org.wso2.micro.integrator.dashboard.web/web-app/src/commons/sideDrawers/commons/CopyToClipBoardCell.js
index a0dcc4837..bb53dc7df 100644
--- a/monitoring-dashboard/components/org.wso2.micro.integrator.dashboard.web/web-app/src/commons/sideDrawers/commons/CopyToClipBoardCell.js
+++ b/monitoring-dashboard/components/org.wso2.micro.integrator.dashboard.web/web-app/src/commons/sideDrawers/commons/CopyToClipBoardCell.js
@@ -18,40 +18,13 @@
  *
  */
 import React from 'react';
-import { Button, TableCell } from '@material-ui/core';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
-import FileCopyIcon from '@material-ui/icons/FileCopy';
-import { makeStyles } from '@material-ui/core/styles';
-import Tooltip from '@material-ui/core/Tooltip';
+import { TableCell } from '@material-ui/core';
+import CopyToClipBoardWithTooltip from './CopyToClipBoardWithTooltip'
 
 export default function CopyToClipboardCell(props) {
-    const [copyMessage, setCopyMessage] = React.useState('Copy to Clipboard');
-
-    const onCopy = () => {
-        setCopyMessage('Copied');
-        const caller = function () {
-            setCopyMessage('Copy to Clipboard');
-        };
-        setTimeout(caller, 2000);
-    }
     const text = props.text;
-    const classes = useStyles();
 
     return <TableCell>{text}
-        <CopyToClipboard
-            text={text}
-            className={classes.clipboard}
-            onCopy={onCopy}
-        >
-            <Tooltip title={copyMessage}>
-                <Button><FileCopyIcon /></Button>
-            </Tooltip>
-        </CopyToClipboard>
+        <CopyToClipBoardWithTooltip text={text} />
     </TableCell>
 }
-
-const useStyles = makeStyles((theme) => ({
-    clipboard: {
-        color: '#3f51b5'
-    }
-}));
diff --git a/monitoring-dashboard/components/org.wso2.micro.integrator.dashboard.web/web-app/src/commons/sideDrawers/commons/CopyToClipBoardWithTooltip.js b/monitoring-dashboard/components/org.wso2.micro.integrator.dashboard.web/web-app/src/commons/sideDrawers/commons/CopyToClipBoardWithTooltip.js
new file mode 100644
index 000000000..9108e84c5
--- /dev/null
+++ b/monitoring-dashboard/components/org.wso2.micro.integrator.dashboard.web/web-app/src/commons/sideDrawers/commons/CopyToClipBoardWithTooltip.js
@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) 2024, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. 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 React from 'react';
+import { Button } from '@material-ui/core';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import FileCopyIcon from '@material-ui/icons/FileCopy';
+import { makeStyles } from '@material-ui/core/styles';
+import Tooltip from '@material-ui/core/Tooltip';
+
+export default function CopyToClipBoardWithTooltip(props) {
+    const [copyMessage, setCopyMessage] = React.useState('Copy to Clipboard');
+
+    const onCopy = () => {
+        setCopyMessage('Copied');
+        const caller = function () {
+            setCopyMessage('Copy to Clipboard');
+        };
+        setTimeout(caller, 2000);
+    }
+    const text = props.text;
+    const classes = useStyles();
+
+    return <CopyToClipboard
+            text={text}
+            className={classes.clipboard}
+            onCopy={onCopy}
+        >
+            <Tooltip title={copyMessage}>
+                <Button><FileCopyIcon /></Button>
+            </Tooltip>
+        </CopyToClipboard>
+}
+
+const useStyles = makeStyles((theme) => ({
+    clipboard: {
+        color: '#3f51b5'
+    }
+}));
diff --git a/monitoring-dashboard/components/org.wso2.micro.integrator.dashboard.web/web-app/src/commons/sideDrawers/commons/CopyToClipboardRow.js b/monitoring-dashboard/components/org.wso2.micro.integrator.dashboard.web/web-app/src/commons/sideDrawers/commons/CopyToClipboardRow.js
new file mode 100644
index 000000000..d6c7c45c8
--- /dev/null
+++ b/monitoring-dashboard/components/org.wso2.micro.integrator.dashboard.web/web-app/src/commons/sideDrawers/commons/CopyToClipboardRow.js
@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2024, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. 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 React from 'react';
+import { TableRow } from '@material-ui/core';
+import CopyToClipBoardWithTooltip from './CopyToClipBoardWithTooltip'
+
+export default function CopyToClipboardRow(props) {
+    const text = props.text;
+
+    return <TableRow>{text}
+        <CopyToClipBoardWithTooltip text={text} />
+    </TableRow>
+}