diff --git a/.changeset/eighty-bees-breathe.md b/.changeset/eighty-bees-breathe.md
new file mode 100644
index 00000000000..7b677fca056
--- /dev/null
+++ b/.changeset/eighty-bees-breathe.md
@@ -0,0 +1,5 @@
+---
+"@wso2is/features": patch
+---
+
+add componentId for audit logs
diff --git a/features/admin-extensions-v1/components/audit-logs/audit-logs.tsx b/features/admin-extensions-v1/components/audit-logs/audit-logs.tsx
index 632ee82584d..5e1c4a73a3c 100644
--- a/features/admin-extensions-v1/components/audit-logs/audit-logs.tsx
+++ b/features/admin-extensions-v1/components/audit-logs/audit-logs.tsx
@@ -21,7 +21,6 @@ import { EmptyPlaceholder,
     LinkButton,
     Message,
     PrimaryButton } from "@wso2is/react-components";
-import { getEmptyPlaceholderIllustrations } from "../../../admin-core-v1";
 import React, {
     MutableRefObject,
     ReactElement,
@@ -32,6 +31,7 @@ import React, {
 } from "react";
 import { useTranslation } from "react-i18next";
 import { Icon, Label } from "semantic-ui-react";
+import { getEmptyPlaceholderIllustrations } from "../../../admin-core-v1";
 import InfiniteScrollContainer from "../logs/components/infinite-scroll-container";
 import TimeRangeSelector from "../logs/components/time-range-selector";
 import { LogsConstants } from "../logs/constants";
@@ -548,3 +548,13 @@ export const AuditLogsPage = (props: AuditPagePropsInterface) : ReactElement =>
         </div>
     );
 };
+
+
+/**
+ * Default props for the component.
+ */
+AuditLogsPage.defaultProps = {
+    "data-componentid": "audit-logs"
+};
+
+export default AuditLogsPage;
diff --git a/features/admin-extensions-v1/components/logs/components/infinite-scroll-container.tsx b/features/admin-extensions-v1/components/logs/components/infinite-scroll-container.tsx
index 4078a4c5a73..de97ae5ca65 100644
--- a/features/admin-extensions-v1/components/logs/components/infinite-scroll-container.tsx
+++ b/features/admin-extensions-v1/components/logs/components/infinite-scroll-container.tsx
@@ -251,6 +251,7 @@ const InfiniteScrollContainer = (props: InfiniteScrollContainerPropsInterface):
                                 <td className="view-data-button">
                                     <Link
                                         data-testid={ `${ componentId }-${ logObject["id"] }-view-data-button` }
+                                        data-componentid={ `${ componentId }-view-data-button` }
                                         underline="hover"
                                         onClick={ () => handleLogDataViewOpen(logObject) }
                                     >
@@ -261,6 +262,7 @@ const InfiniteScrollContainer = (props: InfiniteScrollContainerPropsInterface):
                                 <td className="download-data-button">
                                     <Link
                                         data-testid={ `${ componentId }-${ logObject["id"] }-download-data-button` }
+                                        data-componentid={ `${ componentId }-download-data-button` }
                                         underline="hover"
                                         onClick={ () => exportDataOfLog(logObject) }
                                     >
@@ -327,7 +329,10 @@ const InfiniteScrollContainer = (props: InfiniteScrollContainerPropsInterface):
     );
 
     const LogViewerToolbar: ReactElement = (
-        <Box className="log-data-viewer-toolbar-container">
+        <Box
+            className="log-data-viewer-toolbar-container"
+            data-componentid={ `${ componentId }-toolbar-container` }
+        >
             <Toolbar variant="dense">
                 <Box>
                     <Typography>
@@ -339,12 +344,14 @@ const InfiniteScrollContainer = (props: InfiniteScrollContainerPropsInterface):
                 <Box className="actions">
                     <Button
                         className="data-viewer-buttons"
+                        data-componentid={ `${ componentId }-log-data-viewer-panel-download-button` }
                         onClick={ exportCurrentLog }
                         startIcon={ <DownloadIcon /> }
                     >
                         { t("extensions:develop.monitor.logView.logDataviewer.download") }
                     </Button>
                     <Button
+                        data-componentid={ `${ componentId }-log-data-viewer-panel-copy-button` }
                         className="data-viewer-buttons"
                         onClick={ copyCurrentLog }
                         startIcon={ <CopyIcon /> }
@@ -352,6 +359,7 @@ const InfiniteScrollContainer = (props: InfiniteScrollContainerPropsInterface):
                         { t("extensions:develop.monitor.logView.logDataviewer.copy") }
                     </Button>
                     <IconButton
+                        data-componentid={ `${ componentId }-log-data-viewer-panel-close-button` }
                         size="small"
                         onClick={ handleLogDataViewClose }
                     >
@@ -407,7 +415,10 @@ const InfiniteScrollContainer = (props: InfiniteScrollContainerPropsInterface):
                                 style={ { padding: "0px" } }
                             >
                                 <div className="log-row">
-                                    <Icon name="dropdown" />
+                                    <Icon
+                                        name="dropdown"
+                                        data-componentid={ `${ componentId }-dropdown-button` }
+                                    />
                                     <div className="log-time-container">
                                         { getDateFromTimestamp(log.recordedAt) }
                                         <span className="log-time">
@@ -531,4 +542,12 @@ const InfiniteScrollContainer = (props: InfiniteScrollContainerPropsInterface):
     );
 };
 
+/**
+ * Default props for the component.
+ */
+InfiniteScrollContainer.defaultProps = {
+    "data-componentid": "logs-container"
+};
+
+
 export default InfiniteScrollContainer;