diff --git a/frontend/packages/gitops-plugin/locales/en/gitops-plugin.json b/frontend/packages/gitops-plugin/locales/en/gitops-plugin.json
index 09fdb625831..b03f1b00a0e 100644
--- a/frontend/packages/gitops-plugin/locales/en/gitops-plugin.json
+++ b/frontend/packages/gitops-plugin/locales/en/gitops-plugin.json
@@ -8,6 +8,9 @@
   "Commit details not available": "Commit details not available",
   "Last deployed": "Last deployed",
   "Application environments": "Application environments",
+  "Synced": "Synced",
+  "OutOfSync": "OutOfSync",
+  "Unknown": "Unknown",
   "{{x}} of {{total}} Unhealthy": "{{x}} of {{total}} Unhealthy",
   "{{x}} of {{total}} OutOfSync": "{{x}} of {{total}} OutOfSync",
   "Resources": "Resources",
@@ -28,9 +31,6 @@
   "Environment status": "Environment status",
   "Environment": "Environment",
   "Last deployment": "Last deployment",
-  "Synced": "Synced",
-  "OutOfSync": "OutOfSync",
-  "Unknown": "Unknown",
   "No GitOps manifest URLs found": "No GitOps manifest URLs found",
   "No Application groups found": "No Application groups found",
   "Environment details were not found. Try reloading the page or contacting an administrator.": "Environment details were not found. Try reloading the page or contacting an administrator."
diff --git a/frontend/packages/gitops-plugin/src/components/GitOpsEmptyState.scss b/frontend/packages/gitops-plugin/src/components/GitOpsEmptyState.scss
index 8ac243ec06e..d60a78251cb 100644
--- a/frontend/packages/gitops-plugin/src/components/GitOpsEmptyState.scss
+++ b/frontend/packages/gitops-plugin/src/components/GitOpsEmptyState.scss
@@ -1,4 +1,4 @@
-.odc-gitops-empty-state {
+.gop-gitops-empty-state {
   &__icon {
     height: var(--pf-c-empty-state__icon--FontSize);
     max-width: 100%;
diff --git a/frontend/packages/gitops-plugin/src/components/GitOpsListPage.scss b/frontend/packages/gitops-plugin/src/components/GitOpsListPage.scss
index 8ef1461ee04..a073ab2c57e 100644
--- a/frontend/packages/gitops-plugin/src/components/GitOpsListPage.scss
+++ b/frontend/packages/gitops-plugin/src/components/GitOpsListPage.scss
@@ -1,4 +1,4 @@
-.odc-gitops-list-page-heading {
+.gop-gitops-list-page-heading {
   align-items: center;
   font-size: 12px;
 }
diff --git a/frontend/packages/gitops-plugin/src/components/details/GitOpsDetails.scss b/frontend/packages/gitops-plugin/src/components/details/GitOpsDetails.scss
index c9d3e3d3415..a824e74973d 100644
--- a/frontend/packages/gitops-plugin/src/components/details/GitOpsDetails.scss
+++ b/frontend/packages/gitops-plugin/src/components/details/GitOpsDetails.scss
@@ -1,4 +1,4 @@
-.odc-gitops-details {
+.gop-gitops-details {
   padding: var(--pf-global--spacer--xl);
   height: 100%;
   display: flex;
diff --git a/frontend/packages/gitops-plugin/src/components/details/GitOpsDetails.tsx b/frontend/packages/gitops-plugin/src/components/details/GitOpsDetails.tsx
index a762060577d..9baa919ac7b 100644
--- a/frontend/packages/gitops-plugin/src/components/details/GitOpsDetails.tsx
+++ b/frontend/packages/gitops-plugin/src/components/details/GitOpsDetails.tsx
@@ -18,13 +18,9 @@ import { ExternalLink, Timestamp } from '@console/internal/components/utils';
 import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
 import { ConsoleLinkModel } from '@console/internal/models';
 import { K8sResourceKind, referenceForModel } from '@console/internal/module/k8s';
-import {
-  GreenCheckCircleIcon,
-  YellowExclamationTriangleIcon,
-  GrayUnknownIcon,
-} from '@console/shared';
 import * as argoIcon from '../../images/argo.png';
 import { GitOpsEnvironment } from '../utils/gitops-types';
+import GitOpsRenderStatusLabel from './GitOpsRenderStatusLabel';
 import GitOpsResourcesSection from './GitOpsResourcesSection';
 import './GitOpsDetails.scss';
 
@@ -46,45 +42,19 @@ const GitOpsDetails: React.FC<GitOpsDetailsProps> = ({ envs, appName }) => {
       link.metadata?.name === 'argocd' && link.spec?.location === 'ApplicationMenu',
   );
 
-  // eslint-disable-next-line no-shadow
-  const renderStatusLabel = (status: string) => {
-    switch (status) {
-      case 'Synced':
-        return (
-          <Label icon={<GreenCheckCircleIcon />} isTruncated>
-            Synced
-          </Label>
-        );
-      case 'OutOfSync':
-        return (
-          <Label icon={<YellowExclamationTriangleIcon />} isTruncated>
-            OutOfSync
-          </Label>
-        );
-      case 'Unknown':
-        return (
-          <Label icon={<GrayUnknownIcon />} isTruncated>
-            Unknown
-          </Label>
-        );
-      default:
-        return '';
-    }
-  };
-
   let oldAPI = false;
   if (envs && envs.length > 0) {
     oldAPI = envs[0] && envs[0].deployments ? envs[0].deployments === null : true;
   }
 
   return (
-    <div className="odc-gitops-details">
+    <div className="gop-gitops-details">
       {oldAPI && (
         <>
           <Alert
             isInline
             title={t('gitops-plugin~Compatibility Issue')}
-            className="odc-gitops-details__operator-upgrade-alert"
+            className="gop-gitops-details__operator-upgrade-alert"
           >
             {t('gitops-plugin~Compatibility Issue Message')}
           </Alert>
@@ -94,13 +64,13 @@ const GitOpsDetails: React.FC<GitOpsDetailsProps> = ({ envs, appName }) => {
         envs,
         (env) =>
           env && (
-            <Stack className="odc-gitops-details__env-section" key={env.environment}>
+            <Stack className="gop-gitops-details__env-section" key={env.environment}>
               <StackItem>
                 <Card>
-                  <CardTitle className="odc-gitops-details__env-section__header">
+                  <CardTitle className="gop-gitops-details__env-section__header">
                     <Stack>
                       <StackItem>
-                        <h2 className="co-section-heading co-truncate co-nowrap odc-gitops-details__env-section__app-name">
+                        <h2 className="co-section-heading co-truncate co-nowrap gop-gitops-details__env-section__app-name">
                           <Tooltip content={env.environment}>
                             <span>{env.environment}</span>
                           </Tooltip>
@@ -109,44 +79,44 @@ const GitOpsDetails: React.FC<GitOpsDetailsProps> = ({ envs, appName }) => {
                       <StackItem className="co-truncate co-nowrap">
                         {env.cluster ? (
                           <ExternalLink
-                            additionalClassName="odc-gitops-details__env-section__cluster-url"
+                            additionalClassName="gop-gitops-details__env-section__cluster-url"
                             href={env.cluster}
                           >
                             {env.cluster}
                           </ExternalLink>
                         ) : (
-                          <div className="odc-gitops-details__env-section__cluster-url-empty-state">
+                          <div className="gop-gitops-details__env-section__cluster-url-empty-state">
                             {t('gitops-plugin~Cluster URL not available')}
                           </div>
                         )}
                       </StackItem>
                       {env.status && (
-                        <StackItem className="odc-gitops-details__env-section__status-label">
+                        <StackItem className="gop-gitops-details__env-section__status-label">
                           <Tooltip content="Sync status">
-                            <span>{renderStatusLabel(env.status)}</span>
+                            <GitOpsRenderStatusLabel status={env.status} />
                           </Tooltip>
                         </StackItem>
                       )}
                     </Stack>
                   </CardTitle>
                   <CardBody>
-                    <Stack className="odc-gitops-details__revision">
+                    <Stack className="gop-gitops-details__revision">
                       {env.revision ? (
                         <>
                           {env.revision.message && (
-                            <StackItem className="odc-gitops-details__message">
+                            <StackItem className="gop-gitops-details__message">
                               {t('gitops-plugin~{{message}}', { message: env.revision.message })}
                             </StackItem>
                           )}
-                          <StackItem className="odc-gitops-details__author-sha">
+                          <StackItem className="gop-gitops-details__author-sha">
                             {env.revision.author && (
-                              <span className="odc-gitops-details__author">
+                              <span className="gop-gitops-details__author">
                                 {t('gitops-plugin~by {{author}}', { author: env.revision.author })}{' '}
                               </span>
                             )}
                             {env.revision.revision && (
                               <Label
-                                className="odc-gitops-details__sha"
+                                className="gop-gitops-details__sha"
                                 color="blue"
                                 icon={<GitAltIcon />}
                                 variant="outline"
@@ -160,20 +130,20 @@ const GitOpsDetails: React.FC<GitOpsDetailsProps> = ({ envs, appName }) => {
                         <span>{t('gitops-plugin~Commit details not available')}</span>
                       )}
                       {env.lastDeployed && (
-                        <StackItem className="co-truncate co-nowrap odc-gitops-details__env-section__time">
+                        <StackItem className="co-truncate co-nowrap gop-gitops-details__env-section__time">
                           {t('gitops-plugin~Last deployed')}&nbsp;
                           <Timestamp timestamp={env.lastDeployed} />
                         </StackItem>
                       )}
                       {argocdLink && (
                         <StackItem>
-                          <Split className="odc-gitops-details__env-section__deployment-history">
+                          <Split className="gop-gitops-details__env-section__deployment-history">
                             <Tooltip content="Argo CD">
-                              <SplitItem className="odc-gitops-details__env-section__deployment-history__argocd-link">
+                              <SplitItem className="gop-gitops-details__env-section__deployment-history__argocd-link">
                                 <ExternalLink
                                   href={`${argocdLink.spec.href}/applications/${env.environment}-${appName}`}
                                 >
-                                  <span className="odc-gitops-details__env-section__argo-external-link">
+                                  <span className="gop-gitops-details__env-section__argo-external-link">
                                     <img
                                       loading="lazy"
                                       src={argoIcon}
diff --git a/frontend/packages/gitops-plugin/src/components/details/GitOpsDetailsPageHeading.scss b/frontend/packages/gitops-plugin/src/components/details/GitOpsDetailsPageHeading.scss
index 2cedf1d36cc..91a6bae9aa7 100644
--- a/frontend/packages/gitops-plugin/src/components/details/GitOpsDetailsPageHeading.scss
+++ b/frontend/packages/gitops-plugin/src/components/details/GitOpsDetailsPageHeading.scss
@@ -1,4 +1,4 @@
-.odc-gitops-details-page-heading {
+.gop-gitops-details-page-heading {
   &__repo {
     align-items: center;
     font-weight: bold;
diff --git a/frontend/packages/gitops-plugin/src/components/details/GitOpsDetailsPageHeading.tsx b/frontend/packages/gitops-plugin/src/components/details/GitOpsDetailsPageHeading.tsx
index 02ee305789a..e6cca93697e 100644
--- a/frontend/packages/gitops-plugin/src/components/details/GitOpsDetailsPageHeading.tsx
+++ b/frontend/packages/gitops-plugin/src/components/details/GitOpsDetailsPageHeading.tsx
@@ -30,7 +30,7 @@ const GitOpsDetailsPageHeading: React.FC<GitOpsDetailsPageHeadingProps> = ({
   ];
 
   return (
-    <div className="odc-gitops-details-page-heading co-m-nav-title co-m-nav-title--breadcrumbs">
+    <div className="gop-gitops-details-page-heading co-m-nav-title co-m-nav-title--breadcrumbs">
       <BreadCrumbs breadcrumbs={breadcrumbs} />
       <h1 className="co-m-pane__heading" style={{ marginRight: 'var(--pf-global--spacer--sm)' }}>
         <div className="co-m-pane__name co-resource-item">
diff --git a/frontend/packages/gitops-plugin/src/components/details/GitOpsRenderStatusLabel.tsx b/frontend/packages/gitops-plugin/src/components/details/GitOpsRenderStatusLabel.tsx
new file mode 100644
index 00000000000..02e8511fa07
--- /dev/null
+++ b/frontend/packages/gitops-plugin/src/components/details/GitOpsRenderStatusLabel.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { Label } from '@patternfly/react-core';
+import { useTranslation } from 'react-i18next';
+import {
+  GreenCheckCircleIcon,
+  YellowExclamationTriangleIcon,
+  GrayUnknownIcon,
+} from '@console/shared';
+
+interface GitOpsRenderStatusLabelProps {
+  status: string;
+}
+
+const GitOpsRenderStatusLabel: React.FC<GitOpsRenderStatusLabelProps> = ({ status }) => {
+  const { t } = useTranslation();
+  switch (status) {
+    case 'Synced':
+      return (
+        <Label icon={<GreenCheckCircleIcon />} isTruncated>
+          {t('gitops-plugin~Synced')}
+        </Label>
+      );
+    case 'OutOfSync':
+      return (
+        <Label icon={<YellowExclamationTriangleIcon />} isTruncated>
+          {t('gitops-plugin~OutOfSync')}
+        </Label>
+      );
+    case 'Unknown':
+      return (
+        <Label icon={<GrayUnknownIcon />} isTruncated>
+          {t('gitops-plugin~Unknown')}
+        </Label>
+      );
+    default:
+      return null;
+  }
+};
+
+export default GitOpsRenderStatusLabel;
diff --git a/frontend/packages/gitops-plugin/src/components/details/GitOpsResourceRow.tsx b/frontend/packages/gitops-plugin/src/components/details/GitOpsResourceRow.tsx
new file mode 100644
index 00000000000..143cdb2071c
--- /dev/null
+++ b/frontend/packages/gitops-plugin/src/components/details/GitOpsResourceRow.tsx
@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { Split, SplitItem, Tooltip } from '@patternfly/react-core';
+import { HeartBrokenIcon, ExclamationTriangleIcon } from '@patternfly/react-icons';
+import {
+  global_danger_color_100 as RedColor,
+  global_warning_color_100 as YellowColor,
+} from '@patternfly/react-tokens';
+import { useTranslation } from 'react-i18next';
+import { GitOpsEnvironmentService, GitOpsHealthResources } from '../utils/gitops-types';
+import './GitOpsResourcesSection.scss';
+
+interface GitOpsResourceRowProps {
+  resources: GitOpsHealthResources[] | GitOpsEnvironmentService[];
+  degradedResources: string[] | null;
+  nonSyncedResources: string[];
+}
+
+const GitOpsResourceRow: React.FC<GitOpsResourceRowProps> = ({
+  resources,
+  degradedResources,
+  nonSyncedResources,
+}) => {
+  const { t } = useTranslation();
+  return (
+    <Split hasGutter>
+      {degradedResources?.length > 0 && (
+        <Tooltip
+          content={t('gitops-plugin~{{x}} of {{total}} Unhealthy', {
+            x: degradedResources.length.toString(),
+            total: resources?.length.toString() ?? '0',
+          })}
+        >
+          <SplitItem>
+            <>
+              {degradedResources.length}{' '}
+              <HeartBrokenIcon color={RedColor.value} className="co-icon-space-r" />
+            </>
+          </SplitItem>
+        </Tooltip>
+      )}
+      {nonSyncedResources.length > 0 && (
+        <Tooltip
+          content={t('gitops-plugin~{{x}} of {{total}} OutOfSync', {
+            x: nonSyncedResources.length.toString(),
+            total: resources?.length.toString() ?? '0',
+          })}
+        >
+          <SplitItem>
+            <>
+              {nonSyncedResources.length}{' '}
+              <ExclamationTriangleIcon color={YellowColor.value} className="co-icon-space-r" />
+            </>
+          </SplitItem>
+        </Tooltip>
+      )}
+      {(degradedResources === null || degradedResources.length === 0) &&
+        nonSyncedResources.length === 0 && <>&nbsp;</>}
+    </Split>
+  );
+};
+
+export default GitOpsResourceRow;
diff --git a/frontend/packages/gitops-plugin/src/components/details/GitOpsResourcesSection.scss b/frontend/packages/gitops-plugin/src/components/details/GitOpsResourcesSection.scss
index 4f23d99501e..98d3ba94ede 100644
--- a/frontend/packages/gitops-plugin/src/components/details/GitOpsResourcesSection.scss
+++ b/frontend/packages/gitops-plugin/src/components/details/GitOpsResourcesSection.scss
@@ -1,4 +1,4 @@
-.odc-gitops-resources {
+.gop-gitops-resources {
   &__title {
     font-weight: 400;
     font-size: 16px;
diff --git a/frontend/packages/gitops-plugin/src/components/details/GitOpsResourcesSection.tsx b/frontend/packages/gitops-plugin/src/components/details/GitOpsResourcesSection.tsx
index ce86a2d7219..dee3acf0bf9 100644
--- a/frontend/packages/gitops-plugin/src/components/details/GitOpsResourcesSection.tsx
+++ b/frontend/packages/gitops-plugin/src/components/details/GitOpsResourcesSection.tsx
@@ -1,22 +1,10 @@
 import * as React from 'react';
-import {
-  Stack,
-  StackItem,
-  Split,
-  SplitItem,
-  Card,
-  CardBody,
-  Tooltip,
-} from '@patternfly/react-core';
-import { HeartBrokenIcon, ExclamationTriangleIcon } from '@patternfly/react-icons';
-import {
-  global_danger_color_100 as RedColor,
-  global_warning_color_100 as YellowColor,
-} from '@patternfly/react-tokens';
+import { Stack, StackItem, Split, SplitItem, Card, CardBody } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 import { ResourceIcon } from '@console/internal/components/utils';
 import { GitOpsEnvironmentService, GitOpsHealthResources } from '../utils/gitops-types';
 import './GitOpsResourcesSection.scss';
+import GitOpsResourceRow from './GitOpsResourceRow';
 
 interface GitOpsResourcesSectionProps {
   services: GitOpsEnvironmentService[];
@@ -28,11 +16,18 @@ interface GitOpsResourcesSectionProps {
   clusterRoleBindings: GitOpsHealthResources[];
 }
 
+export enum HealthStatus {
+  DEGRADED = 'Degraded',
+  PROGRESSING = 'Progressing',
+  MISSING = 'Missing',
+  UNKNOWN = 'Unknown',
+}
+
 const getUnhealthyResources = () => (acc: string[], current: GitOpsHealthResources): string[] =>
-  current.health === 'Degraded' ||
-  current.health === 'Progressing' ||
-  current.health === 'Missing' ||
-  current.health === 'Unknown'
+  current.health === HealthStatus.DEGRADED ||
+  current.health === HealthStatus.PROGRESSING ||
+  current.health === HealthStatus.MISSING ||
+  current.health === HealthStatus.UNKNOWN
     ? [...acc, current.health]
     : acc;
 
@@ -74,58 +69,14 @@ const GitOpsResourcesSection: React.FC<GitOpsResourcesSectionProps> = ({
     ? clusterRoleBindings.reduce(getNonSyncedResources(), [])
     : [];
 
-  const renderResource = (
-    resources: GitOpsHealthResources[] | GitOpsEnvironmentService[],
-    degradedResources: string[] | null,
-    nonSyncedResources: string[],
-  ) => {
-    return (
-      <Split hasGutter>
-        {degradedResources?.length > 0 && (
-          <Tooltip
-            content={t('gitops-plugin~{{x}} of {{total}} Unhealthy', {
-              x: degradedResources.length.toString(),
-              total: resources?.length.toString() ?? '0',
-            })}
-          >
-            <SplitItem>
-              <>
-                {degradedResources.length}
-                &nbsp;
-                <HeartBrokenIcon color={RedColor.value} className="co-icon-space-r" />
-              </>
-            </SplitItem>
-          </Tooltip>
-        )}
-        {nonSyncedResources.length > 0 && (
-          <Tooltip
-            content={t('gitops-plugin~{{x}} of {{total}} OutOfSync', {
-              x: nonSyncedResources.length.toString(),
-              total: resources?.length.toString() ?? '0',
-            })}
-          >
-            <SplitItem>
-              <>
-                {nonSyncedResources.length}
-                &nbsp;
-                <ExclamationTriangleIcon color={YellowColor.value} className="co-icon-space-r" />
-              </>
-            </SplitItem>
-          </Tooltip>
-        )}
-        {(degradedResources === null || degradedResources.length === 0) &&
-          nonSyncedResources.length === 0 && <>&nbsp;</>}
-      </Split>
-    );
-  };
   return (
     <>
-      <StackItem className="odc-gitops-resources">
+      <StackItem className="gop-gitops-resources">
         <Card>
-          <h3 className="odc-gitops-resources__title co-nowrap">{t('gitops-plugin~Resources')}</h3>
+          <h3 className="gop-gitops-resources__title co-nowrap">{t('gitops-plugin~Resources')}</h3>
           <CardBody>
             <Split hasGutter>
-              <span className="odc-gitops-resources__list">
+              <span className="gop-gitops-resources__list">
                 <SplitItem>
                   <Stack style={{ marginRight: 'var(--pf-global--spacer--sm)' }}>
                     <StackItem>{deployments ? deployments.length : 'N/A'}</StackItem>
@@ -168,13 +119,41 @@ const GitOpsResourcesSection: React.FC<GitOpsResourcesSectionProps> = ({
               </span>
               <SplitItem>
                 <Stack style={{ alignItems: 'flex-end' }}>
-                  {renderResource(deployments, degradedDeployments, nonSyncedDeployments)}
-                  {renderResource(secrets, degradedSecrets, nonSyncedSecrets)}
-                  {renderResource(services, degradedServices, nonSyncedSyncServices)}
-                  {renderResource(routes, degradedRoutes, nonSyncedRoutes)}
-                  {renderResource(roleBindings, null, nonSyncedRoleBindings)}
-                  {renderResource(clusterRoles, null, nonSyncedClusterRoles)}
-                  {renderResource(clusterRoleBindings, null, nonSyncedClusterRoleBindings)}
+                  <GitOpsResourceRow
+                    resources={deployments}
+                    degradedResources={degradedDeployments}
+                    nonSyncedResources={nonSyncedDeployments}
+                  />
+                  <GitOpsResourceRow
+                    resources={secrets}
+                    degradedResources={degradedSecrets}
+                    nonSyncedResources={nonSyncedSecrets}
+                  />
+                  <GitOpsResourceRow
+                    resources={services}
+                    degradedResources={degradedServices}
+                    nonSyncedResources={nonSyncedSyncServices}
+                  />
+                  <GitOpsResourceRow
+                    resources={routes}
+                    degradedResources={degradedRoutes}
+                    nonSyncedResources={nonSyncedRoutes}
+                  />
+                  <GitOpsResourceRow
+                    resources={roleBindings}
+                    degradedResources={null}
+                    nonSyncedResources={nonSyncedRoleBindings}
+                  />
+                  <GitOpsResourceRow
+                    resources={clusterRoles}
+                    degradedResources={null}
+                    nonSyncedResources={nonSyncedClusterRoles}
+                  />
+                  <GitOpsResourceRow
+                    resources={clusterRoleBindings}
+                    degradedResources={null}
+                    nonSyncedResources={nonSyncedClusterRoleBindings}
+                  />
                 </Stack>
               </SplitItem>
             </Split>
diff --git a/frontend/packages/gitops-plugin/src/components/details/deploymentHistory/GitOpsDeploymentHistory.tsx b/frontend/packages/gitops-plugin/src/components/details/deploymentHistory/GitOpsDeploymentHistory.tsx
index a903e943b52..c8761ae5b4b 100644
--- a/frontend/packages/gitops-plugin/src/components/details/deploymentHistory/GitOpsDeploymentHistory.tsx
+++ b/frontend/packages/gitops-plugin/src/components/details/deploymentHistory/GitOpsDeploymentHistory.tsx
@@ -14,7 +14,7 @@ const GitOpsDeploymentHistory: React.FC<GitOpsDeploymentHistoryProps> = ({
   customData: { envs, appName },
 }) => {
   return (
-    <div className="odc-gitops-details">
+    <div className="gop-gitops-details">
       {_.map(
         envs,
         (env) =>
diff --git a/frontend/packages/gitops-plugin/src/components/list/GitOpsList.scss b/frontend/packages/gitops-plugin/src/components/list/GitOpsList.scss
index 5aa809261e3..681a45a0edc 100644
--- a/frontend/packages/gitops-plugin/src/components/list/GitOpsList.scss
+++ b/frontend/packages/gitops-plugin/src/components/list/GitOpsList.scss
@@ -1,4 +1,4 @@
-.odc-gitops-list {
+.gop-gitops-list {
   padding: var(--pf-global--spacer--lg);
   flex: 1;
   border-top: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
diff --git a/frontend/packages/gitops-plugin/src/components/list/GitOpsList.tsx b/frontend/packages/gitops-plugin/src/components/list/GitOpsList.tsx
index 94e2ee9f758..fe68352d1f0 100644
--- a/frontend/packages/gitops-plugin/src/components/list/GitOpsList.tsx
+++ b/frontend/packages/gitops-plugin/src/components/list/GitOpsList.tsx
@@ -26,7 +26,7 @@ const GitOpsList: React.FC<GitOpsListProps> = ({ appGroups, emptyStateMsg }) =>
       ({ sync_status }) => sync_status /* eslint-disable-line @typescript-eslint/camelcase */,
     ) || false;
   return (
-    <div className="odc-gitops-list">
+    <div className="gop-gitops-list">
       {!emptyStateMsg && appGroups ? (
         <>
           <div className="co-m-pane__filter-row">
diff --git a/frontend/packages/gitops-plugin/src/components/list/GitOpsTableRow.scss b/frontend/packages/gitops-plugin/src/components/list/GitOpsTableRow.scss
index 91942524926..7f4bbfcba61 100644
--- a/frontend/packages/gitops-plugin/src/components/list/GitOpsTableRow.scss
+++ b/frontend/packages/gitops-plugin/src/components/list/GitOpsTableRow.scss
@@ -1,9 +1,9 @@
-.odc-gitops-syncStatus {
-    max-width: '100px'
+.gop-gitops-syncStatus {
+  max-width: '100px';
 }
-.odc-gitops-lastDeploymentTime {
-    color: var(--pf-global--palette--black-600);
+.gop-gitops-lastDeploymentTime {
+  color: var(--pf-global--palette--black-600);
+}
+.gop-gitops-tooltip-text {
+  color: white;
 }
-.odc-gitops-tooltip-text {
-    color: white;
-}
\ No newline at end of file
diff --git a/frontend/packages/gitops-plugin/src/components/list/GitOpsTableRow.tsx b/frontend/packages/gitops-plugin/src/components/list/GitOpsTableRow.tsx
index b50add40d0b..be2aa4c2345 100644
--- a/frontend/packages/gitops-plugin/src/components/list/GitOpsTableRow.tsx
+++ b/frontend/packages/gitops-plugin/src/components/list/GitOpsTableRow.tsx
@@ -70,10 +70,10 @@ const GitOpsTableRow: React.FC<RowFunctionArgs<GitOpsAppGroupData>> = (props) =>
       </TableData>
       <TableData className={classNames(tableColumnClasses[2], 'pf-u-text-nowrap')}>
         {syncStatuses.length > 0 ? (
-          <Flex className="odc-gitops-syncStatus">
+          <Flex className="gop-gitops-syncStatus">
             <GitOpsSyncFragment
               tooltip={syncedEnvs.map((env) => (
-                <Split className="odc-gitops-tooltip-text" hasGutter key={`${name}-${env}`}>
+                <Split className="gop-gitops-tooltip-text" hasGutter key={`${name}-${env}`}>
                   <SplitItem>
                     <GreenCheckCircleIcon />
                   </SplitItem>
@@ -86,7 +86,7 @@ const GitOpsTableRow: React.FC<RowFunctionArgs<GitOpsAppGroupData>> = (props) =>
             />
             <GitOpsSyncFragment
               tooltip={outOfSyncEnvs.map((env) => (
-                <Split className="odc-gitops-tooltip-text" hasGutter key={`${name}-${env}`}>
+                <Split className="gop-gitops-tooltip-text" hasGutter key={`${name}-${env}`}>
                   <SplitItem>
                     <YellowExclamationTriangleIcon />
                   </SplitItem>
@@ -99,7 +99,7 @@ const GitOpsTableRow: React.FC<RowFunctionArgs<GitOpsAppGroupData>> = (props) =>
             />
             <GitOpsSyncFragment
               tooltip={unknownEnvs.map((env) => (
-                <Split className="odc-gitops-tooltip-text" hasGutter key={`${name}-${env}`}>
+                <Split className="gop-gitops-tooltip-text" hasGutter key={`${name}-${env}`}>
                   <SplitItem>
                     <GrayUnknownIcon />
                   </SplitItem>
@@ -118,7 +118,7 @@ const GitOpsTableRow: React.FC<RowFunctionArgs<GitOpsAppGroupData>> = (props) =>
       <TableData className={tableColumnClasses[3]}>
         {latestDeployedTime !== '' ? (
           <Flex>
-            <FlexItem className="odc-gitops-lastDeploymentTime" spacer={{ default: 'spacerXs' }}>
+            <FlexItem className="gop-gitops-lastDeploymentTime" spacer={{ default: 'spacerXs' }}>
               <span>
                 <Timestamp timestamp={latestDeployedTime} />
               </span>