diff --git a/deepfence_frontend/apps/dashboard/src/features/integrations/components/report-form/AdvanceFilter.tsx b/deepfence_frontend/apps/dashboard/src/features/integrations/components/report-form/AdvanceFilter.tsx
index 5028773992..0bcc1f099f 100644
--- a/deepfence_frontend/apps/dashboard/src/features/integrations/components/report-form/AdvanceFilter.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/integrations/components/report-form/AdvanceFilter.tsx
@@ -1,6 +1,11 @@
+import { upperCase } from 'lodash-es';
 import { useMemo, useState } from 'react';
 import { Listbox, ListboxOption } from 'ui-components';
 
+import {
+  UtilsReportFiltersNodeTypeEnum,
+  UtilsReportFiltersScanTypeEnum,
+} from '@/api/generated';
 import { SearchableCloudAccountsList } from '@/components/forms/SearchableCloudAccountsList';
 import { SearchableClusterList } from '@/components/forms/SearchableClusterList';
 import { SearchableContainerList } from '@/components/forms/SearchableContainerList';
@@ -30,11 +35,11 @@ const getNodeTypeByProviderName = (providerName: string): string | undefined =>
 const API_SCAN_TYPE_MAP: {
   [key: string]: ScanTypeEnum;
 } = {
-  Vulnerability: ScanTypeEnum.VulnerabilityScan,
-  Secret: ScanTypeEnum.SecretScan,
-  Malware: ScanTypeEnum.MalwareScan,
-  Compliance: ScanTypeEnum.ComplianceScan,
-  CloudCompliance: ScanTypeEnum.CloudComplianceScan,
+  [UtilsReportFiltersScanTypeEnum.Vulnerability]: ScanTypeEnum.VulnerabilityScan,
+  [UtilsReportFiltersScanTypeEnum.Secret]: ScanTypeEnum.SecretScan,
+  [UtilsReportFiltersScanTypeEnum.Malware]: ScanTypeEnum.MalwareScan,
+  [UtilsReportFiltersScanTypeEnum.Compliance]: ScanTypeEnum.ComplianceScan,
+  [UtilsReportFiltersScanTypeEnum.CloudCompliance]: ScanTypeEnum.CloudComplianceScan,
 };
 
 export const AdvancedFilter = ({
@@ -50,6 +55,7 @@ export const AdvancedFilter = ({
 
   const [maskedType, setMaskedType] = useState([]);
   const [status, setStatus] = useState([]);
+
   const nodeType = useMemo(
     () => getNodeTypeByProviderName(provider.toLowerCase()),
     [provider],
@@ -71,7 +77,7 @@ export const AdvancedFilter = ({
           <div className="grid grid-cols-2 gap-x-8 gap-y-6 pt-4">
             {isCloudNode(nodeType) && (
               <SearchableCloudAccountsList
-                label={`${provider} Account`}
+                label={`${upperCase(provider)} Account`}
                 triggerVariant="select"
                 defaultSelectedAccounts={selectedCloudAccounts}
                 cloudProvider={provider.toLowerCase() as 'aws' | 'gcp' | 'azure'}
@@ -83,7 +89,7 @@ export const AdvancedFilter = ({
                 }}
               />
             )}
-            {nodeType === 'host' ? (
+            {nodeType === UtilsReportFiltersNodeTypeEnum.Host ? (
               <>
                 <div>
                   <SearchableHostList
@@ -103,7 +109,7 @@ export const AdvancedFilter = ({
               </>
             ) : null}
 
-            {provider === 'ContainerImage' ? (
+            {provider === UtilsReportFiltersNodeTypeEnum.ContainerImage ? (
               <>
                 <div>
                   <SearchableImageList
@@ -122,7 +128,7 @@ export const AdvancedFilter = ({
               </>
             ) : null}
 
-            {provider === 'Container' ? (
+            {provider === UtilsReportFiltersNodeTypeEnum.Container ? (
               <>
                 <div>
                   <SearchableContainerList
@@ -141,7 +147,7 @@ export const AdvancedFilter = ({
               </>
             ) : null}
 
-            {resourceType !== 'CloudCompliance' ? (
+            {resourceType !== UtilsReportFiltersScanTypeEnum.CloudCompliance ? (
               <>
                 <div>
                   <SearchableClusterList
diff --git a/deepfence_frontend/apps/dashboard/src/features/integrations/components/report-form/CloudComplianceForm.tsx b/deepfence_frontend/apps/dashboard/src/features/integrations/components/report-form/CloudComplianceForm.tsx
index 109b86adb1..72c62752c8 100644
--- a/deepfence_frontend/apps/dashboard/src/features/integrations/components/report-form/CloudComplianceForm.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/integrations/components/report-form/CloudComplianceForm.tsx
@@ -1,7 +1,12 @@
+import { upperCase } from 'lodash-es';
 import { useEffect, useState } from 'react';
 import { Listbox, ListboxOption } from 'ui-components';
 
-import { getReportBenchmarkList } from '@/features/integrations/pages/DownloadReport';
+import { UtilsReportFiltersScanTypeEnum } from '@/api/generated';
+import {
+  getReportBenchmarkList,
+  getReportNodeType,
+} from '@/features/integrations/pages/DownloadReport';
 
 export const CloudComplianceForm = ({
   setProvider,
@@ -27,21 +32,19 @@ export const CloudComplianceForm = ({
           setProvider(value);
         }}
         getDisplayValue={() => {
-          return (
-            ['Aws', 'Gcp', 'Azure'].find((_provider) => {
-              return _provider === provider;
-            }) ?? ''
-          );
+          return upperCase(provider);
         }}
         placeholder="Select Provider"
       >
-        {['Aws', 'Gcp', 'Azure'].map((resource) => {
-          return (
-            <ListboxOption value={resource} key={resource}>
-              {resource}
-            </ListboxOption>
-          );
-        })}
+        {getReportNodeType(UtilsReportFiltersScanTypeEnum.CloudCompliance).map(
+          (resource) => {
+            return (
+              <ListboxOption value={resource} key={resource}>
+                {upperCase(resource)}
+              </ListboxOption>
+            );
+          },
+        )}
       </Listbox>
 
       {provider && (
diff --git a/deepfence_frontend/apps/dashboard/src/features/integrations/components/report-form/CommonForm.tsx b/deepfence_frontend/apps/dashboard/src/features/integrations/components/report-form/CommonForm.tsx
index ae1d1b29e4..601f6d04cf 100644
--- a/deepfence_frontend/apps/dashboard/src/features/integrations/components/report-form/CommonForm.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/integrations/components/report-form/CommonForm.tsx
@@ -1,9 +1,17 @@
+import { upperFirst } from 'lodash-es';
 import { useEffect, useMemo, useState } from 'react';
 import { Listbox, ListboxOption } from 'ui-components';
 
+import { UtilsReportFiltersNodeTypeEnum } from '@/api/generated';
 import { getReportNodeType } from '@/features/integrations/pages/DownloadReport';
 
 const severities = ['Critical', 'High', 'Medium', 'Low'];
+const getDisplayNodeTypeValue = (nodeType: string) => {
+  if (nodeType === UtilsReportFiltersNodeTypeEnum.ContainerImage) {
+    return 'Container Image';
+  }
+  return upperFirst(nodeType);
+};
 export const CommonForm = ({
   setProvider,
   resource,
@@ -21,7 +29,7 @@ export const CommonForm = ({
     setSeverity([]);
   }, [resource, provider]);
 
-  const nodeType = useMemo(() => {
+  const nodeTypes = useMemo(() => {
     return getReportNodeType(resource);
   }, [resource]);
 
@@ -39,14 +47,14 @@ export const CommonForm = ({
         }}
         placeholder="Select node type"
         getDisplayValue={() => {
-          return provider;
+          return getDisplayNodeTypeValue(provider) ?? '';
         }}
         required
       >
-        {Object.keys(nodeType).map((resource) => {
+        {nodeTypes.map((type) => {
           return (
-            <ListboxOption value={resource} key={resource}>
-              {resource}
+            <ListboxOption value={type} key={type}>
+              {getDisplayNodeTypeValue(type)}
             </ListboxOption>
           );
         })}
diff --git a/deepfence_frontend/apps/dashboard/src/features/integrations/components/report-form/ComplianceForm.tsx b/deepfence_frontend/apps/dashboard/src/features/integrations/components/report-form/ComplianceForm.tsx
index 91b97f7785..cd5135547f 100644
--- a/deepfence_frontend/apps/dashboard/src/features/integrations/components/report-form/ComplianceForm.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/integrations/components/report-form/ComplianceForm.tsx
@@ -1,11 +1,20 @@
+import { upperCase, upperFirst } from 'lodash-es';
 import { useEffect, useState } from 'react';
 import { Listbox, ListboxOption } from 'ui-components';
 
+import { UtilsReportFiltersScanTypeEnum } from '@/api/generated';
 import {
   getReportBenchmarkList,
   getReportNodeType,
 } from '@/features/integrations/pages/DownloadReport';
 
+const getDisplayNodeTypeValue = (resource: string, nodeType: string) => {
+  if (resource === UtilsReportFiltersScanTypeEnum.CloudCompliance) {
+    return upperCase(nodeType);
+  }
+  return upperFirst(nodeType);
+};
+
 export const ComplianceForm = ({
   setProvider,
   resource,
@@ -33,13 +42,13 @@ export const ComplianceForm = ({
         }}
         placeholder="Select node type"
         getDisplayValue={() => {
-          return provider;
+          return getDisplayNodeTypeValue(resource, provider) ?? '';
         }}
       >
-        {Object.keys(getReportNodeType(resource)).map((resource) => {
+        {getReportNodeType(resource).map((resource) => {
           return (
             <ListboxOption value={resource} key={resource}>
-              {resource}
+              {getDisplayNodeTypeValue(resource, resource)}
             </ListboxOption>
           );
         })}
diff --git a/deepfence_frontend/apps/dashboard/src/features/integrations/pages/CreateReport.tsx b/deepfence_frontend/apps/dashboard/src/features/integrations/pages/CreateReport.tsx
index f61b84d2a2..d50326b5ca 100644
--- a/deepfence_frontend/apps/dashboard/src/features/integrations/pages/CreateReport.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/integrations/pages/CreateReport.tsx
@@ -1,3 +1,4 @@
+import { upperFirst } from 'lodash-es';
 import { useState } from 'react';
 import { ActionFunctionArgs, useFetcher } from 'react-router-dom';
 import {
@@ -24,7 +25,6 @@ import { AdvancedFilter } from '@/features/integrations/components/report-form/A
 import { CloudComplianceForm } from '@/features/integrations/components/report-form/CloudComplianceForm';
 import { CommonForm } from '@/features/integrations/components/report-form/CommonForm';
 import { ComplianceForm } from '@/features/integrations/components/report-form/ComplianceForm';
-import { NODE_TYPES } from '@/features/integrations/pages/DownloadReport';
 import { ActionEnumType } from '@/features/integrations/pages/IntegrationAdd';
 import { SuccessModalContent } from '@/features/settings/components/SuccessModalContent';
 import { invalidateAllQueries } from '@/queries';
@@ -42,13 +42,13 @@ export const DURATION: { [k: string]: ModelGenerateReportReqDurationEnum } = {
   'Last 180 Days': ModelGenerateReportReqDurationEnum.NUMBER_180,
   'All Documents': 0 as ModelGenerateReportReqDurationEnum,
 };
-const RESOURCES: { [k: string]: UtilsReportFiltersScanTypeEnum } = {
-  Vulnerability: UtilsReportFiltersScanTypeEnum.Vulnerability,
-  Secret: UtilsReportFiltersScanTypeEnum.Secret,
-  Malware: UtilsReportFiltersScanTypeEnum.Malware,
-  Compliance: UtilsReportFiltersScanTypeEnum.Compliance,
-  'Cloud Compliance': UtilsReportFiltersScanTypeEnum.CloudCompliance,
-};
+const RESOURCES = [
+  UtilsReportFiltersScanTypeEnum.Vulnerability,
+  UtilsReportFiltersScanTypeEnum.Secret,
+  UtilsReportFiltersScanTypeEnum.Malware,
+  UtilsReportFiltersScanTypeEnum.Compliance,
+  UtilsReportFiltersScanTypeEnum.CloudCompliance,
+];
 const REPORT_TYPES: { [k: string]: ModelGenerateReportReqReportTypeEnum } = {
   PDF: ModelGenerateReportReqReportTypeEnum.Pdf,
   XLSX: ModelGenerateReportReqReportTypeEnum.Xlsx,
@@ -67,14 +67,10 @@ const action = async ({ request }: ActionFunctionArgs): Promise<ActionData> => {
   const reportType = body.downloadType.toString();
   const _reportType: ModelGenerateReportReqReportTypeEnum = REPORT_TYPES[reportType];
 
-  const resource = body.resource.toString();
-  const _resource: UtilsReportFiltersScanTypeEnum = RESOURCES[resource];
+  const _resource = body.resource as UtilsReportFiltersScanTypeEnum;
 
-  let nodeType = body.nodeType.toString();
-  if (nodeType.toString() === 'Kubernetes') {
-    nodeType = 'Cluster';
-  }
-  const _nodeType: UtilsReportFiltersNodeTypeEnum = NODE_TYPES[nodeType];
+  const _nodeType: UtilsReportFiltersNodeTypeEnum =
+    body.nodeType as UtilsReportFiltersNodeTypeEnum;
 
   const masked = formData.getAll('mask[]');
   const status = formData.getAll('status[]');
@@ -226,6 +222,14 @@ const Header = () => {
     </SlidingModalHeader>
   );
 };
+
+const getResourceDisplayValue = (resource: string) => {
+  if (resource === UtilsReportFiltersScanTypeEnum.CloudCompliance) {
+    return 'Cloud Compliance';
+  }
+  return resource;
+};
+
 const ReportForm = () => {
   const [resource, setResource] = useState('');
   const [provider, setProvider] = useState('');
@@ -263,21 +267,21 @@ const ReportForm = () => {
                 setProvider('');
               }}
               getDisplayValue={(item) => {
-                return Object.keys(RESOURCES).find((resource) => resource === item) ?? '';
+                return item ? upperFirst(getResourceDisplayValue(item)) : '';
               }}
               placeholder="Select resource"
               required
             >
-              {Object.keys(RESOURCES).map((resource) => {
+              {RESOURCES.map((resource) => {
                 return (
                   <ListboxOption value={resource} key={resource}>
-                    {resource}
+                    {upperFirst(getResourceDisplayValue(resource))}
                   </ListboxOption>
                 );
               })}
             </Listbox>
 
-            {resource === 'Compliance' ? (
+            {resource === UtilsReportFiltersScanTypeEnum.Compliance ? (
               <ComplianceForm
                 setProvider={setProvider}
                 provider={provider}
@@ -285,11 +289,12 @@ const ReportForm = () => {
               />
             ) : null}
 
-            {resource === 'CloudCompliance' ? (
+            {resource === UtilsReportFiltersScanTypeEnum.CloudCompliance ? (
               <CloudComplianceForm setProvider={setProvider} provider={provider} />
             ) : null}
 
-            {resource !== 'CloudCompliance' && resource !== 'Compliance' ? (
+            {resource !== UtilsReportFiltersScanTypeEnum.CloudCompliance &&
+            resource !== UtilsReportFiltersScanTypeEnum.Compliance ? (
               <CommonForm
                 setProvider={setProvider}
                 resource={resource}
@@ -341,7 +346,7 @@ const ReportForm = () => {
                 setDownloadType(value);
               }}
               placeholder="Download type"
-              getDisplayValue={(item) => {
+              getDisplayValue={() => {
                 return downloadType;
               }}
               required
diff --git a/deepfence_frontend/apps/dashboard/src/features/integrations/pages/DownloadReport.tsx b/deepfence_frontend/apps/dashboard/src/features/integrations/pages/DownloadReport.tsx
index d3e231ed67..8dde6db1b1 100644
--- a/deepfence_frontend/apps/dashboard/src/features/integrations/pages/DownloadReport.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/integrations/pages/DownloadReport.tsx
@@ -4,7 +4,10 @@ import { ActionFunctionArgs, Outlet, useFetcher } from 'react-router-dom';
 import { Breadcrumb, BreadcrumbLink, Button, Modal, TableSkeleton } from 'ui-components';
 
 import { getReportsApiClient } from '@/api/api';
-import { UtilsReportFiltersNodeTypeEnum } from '@/api/generated';
+import {
+  UtilsReportFiltersNodeTypeEnum,
+  UtilsReportFiltersScanTypeEnum,
+} from '@/api/generated';
 import { ModelExportReport } from '@/api/generated/models/ModelExportReport';
 import { DFLink } from '@/components/DFLink';
 import { ErrorStandardLineIcon } from '@/components/icons/common/ErrorStandardLine';
@@ -27,48 +30,37 @@ export enum ActionEnumType {
 }
 export const getReportBenchmarkList = (nodeType: string) => {
   switch (nodeType) {
-    case 'Aws':
+    case UtilsReportFiltersNodeTypeEnum.Aws:
       return complianceType.aws;
-    case 'Gcp':
+    case UtilsReportFiltersNodeTypeEnum.Gcp:
       return complianceType.gcp;
-    case 'Azure':
+    case UtilsReportFiltersNodeTypeEnum.Azure:
       return complianceType.azure;
-    case 'Host':
+    case UtilsReportFiltersNodeTypeEnum.Host:
       return complianceType.host;
-    case 'Kubernetes':
+    case UtilsReportFiltersNodeTypeEnum.Cluster:
       return complianceType.kubernetes_cluster;
     default:
       console.error('Provider type should be matched');
       return [];
   }
 };
-export const NODE_TYPES: { [k: string]: UtilsReportFiltersNodeTypeEnum } = {
-  AWS: UtilsReportFiltersNodeTypeEnum.Aws,
-  AZURE: UtilsReportFiltersNodeTypeEnum.Azure,
-  GCP: UtilsReportFiltersNodeTypeEnum.Gcp,
-  Host: UtilsReportFiltersNodeTypeEnum.Host,
-  Cluster: UtilsReportFiltersNodeTypeEnum.Cluster,
-  'Container Image': UtilsReportFiltersNodeTypeEnum.ContainerImage,
-  Container: UtilsReportFiltersNodeTypeEnum.Container,
-};
+
 export const getReportNodeType = (resourceType: string) => {
-  if (resourceType === 'Cloud Compliance') {
-    return {
-      AWS: NODE_TYPES.AWS,
-      AZURE: NODE_TYPES.AZURE,
-      GCP: NODE_TYPES.GCP,
-    };
-  } else if (resourceType === 'Compliance') {
-    return {
-      Host: NODE_TYPES.Host,
-      Kubernetes: NODE_TYPES.Cluster,
-    };
+  if (resourceType === UtilsReportFiltersScanTypeEnum.CloudCompliance) {
+    return [
+      UtilsReportFiltersNodeTypeEnum.Aws,
+      UtilsReportFiltersNodeTypeEnum.Azure,
+      UtilsReportFiltersNodeTypeEnum.Gcp,
+    ];
+  } else if (resourceType === UtilsReportFiltersScanTypeEnum.Compliance) {
+    return [UtilsReportFiltersNodeTypeEnum.Host, UtilsReportFiltersNodeTypeEnum.Cluster];
   }
-  return {
-    Host: NODE_TYPES.Host,
-    Container: NODE_TYPES.Container,
-    'Container Image': NODE_TYPES['Container Image'],
-  };
+  return [
+    UtilsReportFiltersNodeTypeEnum.Host,
+    UtilsReportFiltersNodeTypeEnum.Container,
+    UtilsReportFiltersNodeTypeEnum.ContainerImage,
+  ];
 };
 
 export const useGetReports = () => {
diff --git a/deepfence_frontend/packages/ui-components/src/components/select/Listbox.tsx b/deepfence_frontend/packages/ui-components/src/components/select/Listbox.tsx
index 24702952da..6a476564a6 100644
--- a/deepfence_frontend/packages/ui-components/src/components/select/Listbox.tsx
+++ b/deepfence_frontend/packages/ui-components/src/components/select/Listbox.tsx
@@ -259,20 +259,16 @@ export function Listbox<TType, TActualType>({
                 </PopoverPrimitive.Trigger>
                 <PopoverPrimitive.Portal>
                   <PopoverPrimitive.Content align="start" sideOffset={2} asChild>
-                    <div className="data-[side=top]:animate-slide-up data-[side=bottom]:animate-slide-down w-[var(--radix-popper-anchor-width)]">
+                    <div className="data-[side=top]:animate-slide-up data-[side=bottom]:animate-slide-down w-[var(--radix-popper-anchor-width)] dark:bg-bg-card dark:border dark:border-bg-grid-border rounded-[5px] overflow-hidden">
                       <HUIListbox.Options>
                         <div
                           className={cn(
-                            // bg
-                            'max-h-60 overflow-auto',
-                            'bg-bg-card dark:bg-bg-card',
+                            'max-h-60 w-full select-none',
                             'text-p7',
-                            // border
-                            'border border-bg-grid-border dark:border-bg-grid-border',
-                            'rounded-[5px]',
-                            'select-none',
+                            'overflow-auto',
+                            'focus:visible:outline-none',
                             // text
-                            'text-text-text-and-icon dark:text-text-text-and-icon outline-none focus:outline-none',
+                            'text-text-text-and-icon dark:text-text-text-and-icon',
                           )}
                         >
                           <OptionsWrapper noDataText={noDataText}>
@@ -299,7 +295,7 @@ export function Listbox<TType, TActualType>({
                                   onClick={() => {
                                     onClearAll?.();
                                   }}
-                                  className="flex gap-1.5 dark:text-accent-accent items-center text-p6"
+                                  className="flex dark:text-accent-accent items-center text-p6"
                                 >
                                   {clearAll}
                                 </button>