diff --git a/web/src/components/ApiResponseButton/ApiResponseButton.tsx b/web/src/components/ApiResponseButton/ApiResponseButton.tsx
index d374fca..b5d4d55 100644
--- a/web/src/components/ApiResponseButton/ApiResponseButton.tsx
+++ b/web/src/components/ApiResponseButton/ApiResponseButton.tsx
@@ -6,7 +6,7 @@ type ApiResponseButtonProps = {
   link: string
 }
 
-const ApiResponseButton = ({ link }: ApiResponseButtonProps): JSX.Element => {
+const ApiResponseButton = ({ link }: ApiResponseButtonProps): React.JSX.Element => {
   return (
     <Button
       as='link'
diff --git a/web/src/modules/Clusters/Clusters.tsx b/web/src/modules/Clusters/Clusters.tsx
index 577fa99..860c1d2 100644
--- a/web/src/modules/Clusters/Clusters.tsx
+++ b/web/src/modules/Clusters/Clusters.tsx
@@ -24,7 +24,7 @@ import {
 import { useQueryState } from 'nuqs'
 import { FilterStatesType } from '@patterninc/react-ui/dist/components/Filter/FilterMenu'
 
-const Cluster = (): JSX.Element => {
+const Cluster = (): React.JSX.Element => {
   const { updateBreadcrumbs } = useContext(BreadcrumbContext)
 
   const [clusterId, setClusterId] = useQueryState('id', { defaultValue: '' })
diff --git a/web/src/modules/Clusters/ClustersDetails/ClusterInformationPane.tsx b/web/src/modules/Clusters/ClustersDetails/ClusterInformationPane.tsx
index 456a9ec..71dec7d 100644
--- a/web/src/modules/Clusters/ClustersDetails/ClusterInformationPane.tsx
+++ b/web/src/modules/Clusters/ClustersDetails/ClusterInformationPane.tsx
@@ -12,7 +12,7 @@ export type ClusterDataTypeProps = {
 const ClusterInformationPane = ({
   clusterData,
   isLoading,
-}: ClusterDataTypeProps): JSX.Element => {
+}: ClusterDataTypeProps): React.JSX.Element => {
   const data = useMemo(() => clusterData?.[0], [clusterData])
   const clusterDetailsData = [
     {
diff --git a/web/src/modules/Clusters/ClustersDetails/ClustersDetails.tsx b/web/src/modules/Clusters/ClustersDetails/ClustersDetails.tsx
index cfdf294..052b18d 100644
--- a/web/src/modules/Clusters/ClustersDetails/ClustersDetails.tsx
+++ b/web/src/modules/Clusters/ClustersDetails/ClustersDetails.tsx
@@ -12,7 +12,7 @@ type ClusterDetailsProps = {
   id: string
 }
 
-const ClustersDetails = ({ id }: ClusterDetailsProps): JSX.Element => {
+const ClustersDetails = ({ id }: ClusterDetailsProps): React.JSX.Element => {
   const { updateBreadcrumbs } = useContext(BreadcrumbContext)
   useEffect(() => {
     updateBreadcrumbs({
diff --git a/web/src/modules/Clusters/ClustersDetails/ClustersDetailsHeader.tsx b/web/src/modules/Clusters/ClustersDetails/ClustersDetailsHeader.tsx
index 726f68a..12d2198 100644
--- a/web/src/modules/Clusters/ClustersDetails/ClustersDetailsHeader.tsx
+++ b/web/src/modules/Clusters/ClustersDetails/ClustersDetailsHeader.tsx
@@ -10,7 +10,7 @@ import ApiResponseButton from '@/components/ApiResponseButton/ApiResponseButton'
 const ClustersDetailsHeader = ({
   clusterData,
   isLoading,
-}: ClusterDataTypeProps): JSX.Element => {
+}: ClusterDataTypeProps): React.JSX.Element => {
   const [yamlContext, setYamlContext] = useState<string>()
   const [tags, setTags] = useState<string>()
 
diff --git a/web/src/modules/Commands/CommandDetails/CommandDetails.tsx b/web/src/modules/Commands/CommandDetails/CommandDetails.tsx
index f941a5e..0a326e4 100644
--- a/web/src/modules/Commands/CommandDetails/CommandDetails.tsx
+++ b/web/src/modules/Commands/CommandDetails/CommandDetails.tsx
@@ -12,7 +12,7 @@ import CommandDetailsHeader from './CommandDetailsHeader'
 type CommandDetailsProp = {
   id: string
 }
-export const CommandDetails = ({ id }: CommandDetailsProp): JSX.Element => {
+export const CommandDetails = ({ id }: CommandDetailsProp): React.JSX.Element => {
   const { updateBreadcrumbs } = useContext(BreadcrumbContext)
   useEffect(() => {
     updateBreadcrumbs({
diff --git a/web/src/modules/Commands/CommandDetails/CommandDetailsHeader.tsx b/web/src/modules/Commands/CommandDetails/CommandDetailsHeader.tsx
index 134753b..cfde345 100644
--- a/web/src/modules/Commands/CommandDetails/CommandDetailsHeader.tsx
+++ b/web/src/modules/Commands/CommandDetails/CommandDetailsHeader.tsx
@@ -17,7 +17,7 @@ import ApiResponseButton from '@/components/ApiResponseButton/ApiResponseButton'
 const CommandDetailsHeader = ({
   commandData,
   isLoading,
-}: CommandDetailsProps): JSX.Element => {
+}: CommandDetailsProps): React.JSX.Element => {
   const [yamlContext, setYamlContext] = useState<string>()
   const [tags, setTags] = useState<string>()
   const [clusterTag, setClusterTag] = useState<string>()
diff --git a/web/src/modules/Commands/CommandDetails/CommandInformationPane.tsx b/web/src/modules/Commands/CommandDetails/CommandInformationPane.tsx
index f9c9f27..dea05d9 100644
--- a/web/src/modules/Commands/CommandDetails/CommandInformationPane.tsx
+++ b/web/src/modules/Commands/CommandDetails/CommandInformationPane.tsx
@@ -14,7 +14,7 @@ export type CommandDetailsProps = {
 const CommandInformationPane = ({
   commandData,
   isLoading,
-}: CommandDetailsProps): JSX.Element => {
+}: CommandDetailsProps): React.JSX.Element => {
   const data = useMemo(() => commandData[0], [commandData])
   const commandDetailsData = [
     {
diff --git a/web/src/modules/Commands/Commands.tsx b/web/src/modules/Commands/Commands.tsx
index 24904ae..03fecc0 100644
--- a/web/src/modules/Commands/Commands.tsx
+++ b/web/src/modules/Commands/Commands.tsx
@@ -25,7 +25,7 @@ import {
   sortData,
 } from '@/common/Services'
 
-const Commands = (): JSX.Element => {
+const Commands = (): React.JSX.Element => {
   const { updateBreadcrumbs } = useContext(BreadcrumbContext)
   const [commandId, setCommandId] = useQueryState('id', { defaultValue: '' })
   const [commandName, setCommandName] = useQueryState('name', {
diff --git a/web/src/modules/Jobs/JobDetails/JobDetails.tsx b/web/src/modules/Jobs/JobDetails/JobDetails.tsx
index 3e4a860..1137d1f 100644
--- a/web/src/modules/Jobs/JobDetails/JobDetails.tsx
+++ b/web/src/modules/Jobs/JobDetails/JobDetails.tsx
@@ -15,7 +15,7 @@ type JobDetailsProp = {
   id: string
 }
 
-const JobDetails = ({ id }: JobDetailsProp): JSX.Element => {
+const JobDetails = ({ id }: JobDetailsProp): React.JSX.Element => {
   const { updateBreadcrumbs } = useContext(BreadcrumbContext)
   const pathname = usePathname()
 
diff --git a/web/src/modules/Jobs/JobDetails/JobDetailsHeader.tsx b/web/src/modules/Jobs/JobDetails/JobDetailsHeader.tsx
index 86be3ae..8220bb3 100644
--- a/web/src/modules/Jobs/JobDetails/JobDetailsHeader.tsx
+++ b/web/src/modules/Jobs/JobDetails/JobDetailsHeader.tsx
@@ -9,7 +9,7 @@ import yaml from 'js-yaml'
 import { github } from 'react-syntax-highlighter/dist/esm/styles/hljs'
 import ApiResponseButton from '@/components/ApiResponseButton/ApiResponseButton'
 
-const JobDetailsHeader = ({ jobData }: JobDataTypesProps): JSX.Element => {
+const JobDetailsHeader = ({ jobData }: JobDataTypesProps): React.JSX.Element => {
   const [sql, setSql] = useState<string>()
   const [yamlContext, setYamlContext] = useState<string>()
   const [tags, setTags] = useState<string>()
diff --git a/web/src/modules/Jobs/JobDetails/JobInformationPane.tsx b/web/src/modules/Jobs/JobDetails/JobInformationPane.tsx
index d198087..753eac1 100644
--- a/web/src/modules/Jobs/JobDetails/JobInformationPane.tsx
+++ b/web/src/modules/Jobs/JobDetails/JobInformationPane.tsx
@@ -11,7 +11,7 @@ import styles from './_job-Details.module.scss'
 const JobInformationPane = ({
   jobData,
   isLoading,
-}: JobDataTypesProps): JSX.Element => {
+}: JobDataTypesProps): React.JSX.Element => {
   const router = useRouter()
   const jobdetailsData = [
     { label: 'Version', data: jobData?.version, check: !!jobData?.version },
diff --git a/web/src/modules/Jobs/Jobs.tsx b/web/src/modules/Jobs/Jobs.tsx
index 2475850..f3ee20c 100644
--- a/web/src/modules/Jobs/Jobs.tsx
+++ b/web/src/modules/Jobs/Jobs.tsx
@@ -34,7 +34,7 @@ type FilterType = {
   status: string[]
 }
 
-const Jobs = (): JSX.Element => {
+const Jobs = (): React.JSX.Element => {
   const { updateBreadcrumbs } = useContext(BreadcrumbContext)
 
   const [jobId, setJobId] = useQueryState('id', { defaultValue: '' })