diff --git a/deepfence_frontend/apps/dashboard/package.json b/deepfence_frontend/apps/dashboard/package.json
index 0b421f28da..1fb7253378 100644
--- a/deepfence_frontend/apps/dashboard/package.json
+++ b/deepfence_frontend/apps/dashboard/package.json
@@ -20,6 +20,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/user-event": "^14.4.3",
     "classnames": "^2.3.2",
+    "lodash-es": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.7.1",
@@ -32,6 +33,7 @@
     "@openapitools/openapi-generator-cli": "^2.5.2",
     "@playwright/test": "^1.28.1",
     "@testing-library/react": "^13.4.0",
+    "@types/lodash-es": "^4.17.6",
     "@types/react": "^18.0.24",
     "@types/react-dom": "^18.0.8",
     "@types/testing-library__jest-dom": "^5.14.5",
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/components/ConnectorHeader.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/components/ConnectorHeader.tsx
index 7296b6c1cc..ecb3d507a5 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/components/ConnectorHeader.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/components/ConnectorHeader.tsx
@@ -6,28 +6,33 @@ import { Breadcrumb, BreadcrumbLink, Typography } from 'ui-components';
 type ConnectorHeaderProps = {
   title: string;
   description: string;
+  endComponent?: JSX.Element;
 };
 
 const canRoute = (pathname: string) => {
   const path = {
     addConnector: '/onboard/connectors/add-connectors',
-    scanResult: '',
+    configureScan: '',
     viewResult: '',
   };
-  if (pathname.includes('view-scan-results')) {
-    path.viewResult = '/onboard/view-scan-results';
-    path.scanResult = '/onboard/scan-infrastructure';
-  } else if (pathname.includes('scan-infrastructure')) {
-    path.scanResult = '/onboard/scan-infrastructure';
+  if (pathname.includes('view-summary')) {
+    path.viewResult = '/onboard/scan/view-summary';
+    path.configureScan = '#';
+  } else if (pathname.includes('scan/configure')) {
+    path.configureScan = '#';
     path.viewResult = '#';
   } else if (pathname.includes('connectors')) {
-    path.scanResult = '#';
+    path.configureScan = '#';
     path.viewResult = '#';
   }
   return path;
 };
 
-export const ConnectorHeader = ({ title, description }: ConnectorHeaderProps) => {
+export const ConnectorHeader = ({
+  title,
+  description,
+  endComponent,
+}: ConnectorHeaderProps) => {
   const location = useLocation();
 
   const isAddConnectorRoutePath = () => {
@@ -38,15 +43,18 @@ export const ConnectorHeader = ({ title, description }: ConnectorHeaderProps) =>
   };
 
   const isScanRoutePath = () => {
-    return location.pathname.includes('scan-infrastructure');
+    return (
+      location.pathname.startsWith('/onboard/scan/choose') ||
+      location.pathname.startsWith('/onboard/scan/configure')
+    );
   };
 
-  const isViewResultsRoutePath = () => {
-    return location.pathname.includes('view-scan-results');
+  const isViewScanSummaryRoutePath = () => {
+    return location.pathname.includes('scan/view-summary');
   };
 
   return (
-    <div className="pt-6 mb-8">
+    <div className="pt-6 mb-4">
       <div className="mb-4 -mx-5">
         <Breadcrumb separator={<HiChevronRight />} transparent>
           <BreadcrumbLink>
@@ -61,7 +69,7 @@ export const ConnectorHeader = ({ title, description }: ConnectorHeaderProps) =>
           </BreadcrumbLink>
           <BreadcrumbLink>
             <Link
-              to={canRoute(location.pathname).scanResult}
+              to={'#'}
               className={cx({
                 ['text-blue-600 dark:text-blue-500']: isScanRoutePath(),
               })}
@@ -73,7 +81,7 @@ export const ConnectorHeader = ({ title, description }: ConnectorHeaderProps) =>
             <Link
               to={canRoute(location.pathname).viewResult}
               className={cx({
-                ['text-blue-600 dark:text-blue-500']: isViewResultsRoutePath(),
+                ['text-blue-600 dark:text-blue-500']: isViewScanSummaryRoutePath(),
               })}
             >
               View Scan Results
@@ -81,12 +89,17 @@ export const ConnectorHeader = ({ title, description }: ConnectorHeaderProps) =>
           </BreadcrumbLink>
         </Breadcrumb>
       </div>
-      <h1 className={`text-[32px] text-black dark:text-white`}>{title}</h1>
-      <p
-        className={`${Typography.size.base} ${Typography.weight.normal} mt-1.5 mb-4 dark:text-gray-400 text-gray-900`}
-      >
-        {description}
-      </p>
+      <div className="flex items-center">
+        <div>
+          <h1 className={`text-[32px] text-black dark:text-white`}>{title}</h1>
+          <p
+            className={`${Typography.size.base} ${Typography.weight.normal} mt-1.5 mb-4 dark:text-gray-400 text-gray-900`}
+          >
+            {description}
+          </p>
+        </div>
+        {endComponent ? <div className="ml-auto">{endComponent}</div> : null}
+      </div>
     </div>
   );
 };
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/components/connectors/registries/AmazonECRConnectionForm.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/components/connectors/registries/AmazonECRConnectionForm.tsx
index 027da86397..92f5fa4c5b 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/components/connectors/registries/AmazonECRConnectionForm.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/components/connectors/registries/AmazonECRConnectionForm.tsx
@@ -66,8 +66,8 @@ export const AmazonECRConnectorForm = () => {
               placeholder="AWS Region"
             />
           </div>
-          <Button color="primary" size="xs" className="ml-auto mt-4">
-            Save Credentials And Go To Connectors
+          <Button color="primary" size="xs" className="ml-auto mt-6">
+            Save And Go To Connectors
           </Button>
         </Card>
       </Step>
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AmazonECRConnector.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AmazonECRConnector.tsx
index cabd5f067b..66d84a78c1 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AmazonECRConnector.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AmazonECRConnector.tsx
@@ -15,7 +15,7 @@ export const AmazonECRConnector = () => {
       <AmazonECRConnectorForm />
       <div className="flex mt-16">
         <Button onClick={goBack} size="xs">
-          Cancel
+          Go Back
         </Button>
       </div>
     </div>
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AzureConnector.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AzureConnector.tsx
index 6cc84c68fe..b1c56e82ac 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AzureConnector.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AzureConnector.tsx
@@ -15,7 +15,7 @@ export const AzureConnector = () => {
       />
       <AzureConnectorForm />
       <Button onClick={goBack} size="xs" className="mt-16" color="default">
-        Cancel
+        Go Back
       </Button>
     </div>
   );
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ChooseScan.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ChooseScan.tsx
new file mode 100644
index 0000000000..5376da1744
--- /dev/null
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ChooseScan.tsx
@@ -0,0 +1,141 @@
+import { HiSwitchHorizontal } from 'react-icons/hi';
+import { Button, Card, Separator, Typography } from 'ui-components';
+
+import LogoAws from '@/assets/logo-aws.svg';
+import LogoAwsWhite from '@/assets/logo-aws-white.svg';
+import { ConnectorHeader } from '@/features/onboard/components/ConnectorHeader';
+import { useTheme } from '@/theme/ThemeContext';
+import { usePageNavigation } from '@/utils/usePageNavigation';
+
+type ScanTypeListProps = {
+  scanType: string;
+  description: string;
+  lastScaned: string;
+  buttonText: string;
+  redirect: string;
+};
+
+const scanTypes: ScanTypeListProps[] = [
+  {
+    scanType: 'Vulnerability Scan',
+    description: `A few words about the compliance scan and why you need to use it.`,
+    lastScaned: '3:00pm on 11/22/2022',
+    buttonText: 'Configure Vulnerability Scan',
+    redirect: '/vulnerability',
+  },
+  {
+    scanType: 'Compliance Scan',
+    description: `A few words about the compliance scan and why you need to use it.`,
+    lastScaned: '3:00pm on 11/22/2022',
+    buttonText: 'Configure Compliance Scan',
+    redirect: '/compliance',
+  },
+  {
+    scanType: 'Secrets Scan',
+    description: `A few words about the compliance scan and why you need to use it.`,
+    lastScaned: '3:00pm on 11/22/2022',
+    buttonText: 'Configure Secret Scan',
+    redirect: '/secret',
+  },
+];
+
+const SelectedAccount = () => {
+  const { mode } = useTheme();
+  const { navigate } = usePageNavigation();
+  return (
+    <div className="flex w-fit p-3 pt-0 items-center mb-8">
+      <span className="mr-6">
+        <img src={mode === 'dark' ? LogoAwsWhite : LogoAws} alt="logo" />
+      </span>
+      <div className="flex flex-col mr-20">
+        <span
+          className={`${Typography.size.lg} ${Typography.weight.medium} text-gray-700 dark:text-gray-100`}
+        >
+          Amazon Web Services (AWS)
+        </span>
+        <span
+          className={`${Typography.size.base} ${Typography.weight.medium} text-gray-500 dark:text-gray-400`}
+        >
+          Account Id: 22222
+        </span>
+      </div>
+      <div>
+        <Button
+          className="ml-auto bg-gray-100 px-2 py-1"
+          size="sm"
+          startIcon={<HiSwitchHorizontal />}
+          onClick={() => {
+            navigate('/onboard/connectors/my-connectors');
+          }}
+        >
+          Switch connector
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const ScanType = () => {
+  const { navigate } = usePageNavigation();
+  const goNext = (path: string) => {
+    navigate(path);
+  };
+
+  return (
+    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-5">
+      {scanTypes.map(
+        ({
+          scanType,
+          description,
+          lastScaned,
+          buttonText,
+          redirect,
+        }: ScanTypeListProps) => {
+          return (
+            <Card key={scanType} className="p-5">
+              <h2
+                className={`${Typography.size.lg} ${Typography.weight.medium} text-gray-700 dark:text-gray-100 pb-2`}
+              >
+                {scanType}
+              </h2>
+              <Separator />
+              <p className={`${Typography.size.sm} ${Typography.weight.normal} py-2`}>
+                {description}
+              </p>
+              <div
+                className={`mb-4 text-gray-500 dark:text-gray-400 ${Typography.size.sm} ${Typography.weight.normal}`}
+              >
+                Last scan:&nbsp;{lastScaned}
+              </div>
+              <Button
+                size="xs"
+                color="primary"
+                onClick={() => {
+                  goNext(`../configure${redirect}`);
+                }}
+              >
+                {buttonText}
+              </Button>
+            </Card>
+          );
+        },
+      )}
+    </div>
+  );
+};
+export const ChooseScan = () => {
+  const { goBack } = usePageNavigation();
+  return (
+    <>
+      <ConnectorHeader
+        title="Choose your scan type"
+        description="Choose from the below options to perform your first scan."
+      />
+      <SelectedAccount />
+      <ScanType />
+      <Button onClick={goBack} outline size="xs" className="mt-16">
+        Go Back
+      </Button>
+    </>
+  );
+};
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ComplianceScanConfigure.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ComplianceScanConfigure.tsx
new file mode 100644
index 0000000000..70ae264f6b
--- /dev/null
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ComplianceScanConfigure.tsx
@@ -0,0 +1,361 @@
+import { filter, find, isEmpty } from 'lodash-es';
+import { useEffect, useMemo, useState } from 'react';
+import { HiBan, HiLightBulb, HiMinusCircle, HiPlusCircle } from 'react-icons/hi';
+import {
+  Button,
+  createColumnHelper,
+  getRowSelectionColumn,
+  Switch,
+  Table,
+  Tabs,
+  Tooltip,
+  Typography,
+} from 'ui-components';
+
+import { ConnectorHeader } from '@/features/onboard/components/ConnectorHeader';
+import { usePageNavigation } from '@/utils/usePageNavigation';
+
+type ColumnType = {
+  id: number;
+  test_category: string;
+  test_desc: string;
+  status: string;
+  is_enabled: boolean;
+};
+const complianceTableData = [
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 1,
+    is_enabled: true,
+    test_category: 'CloudWatch',
+    test_desc:
+      '4.1 Ensure a log metric filter and alarm exist for unauthorized API calls',
+    test_number: 'control.cis_v140_4_1',
+    status: 'Active',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 2,
+    is_enabled: true,
+    test_category: 'CloudWatch',
+    test_desc:
+      '4.2 Ensure a log metric filter and alarm exist for Management Console sign-in without MFA',
+    test_number: 'control.cis_v140_4_2',
+    status: 'Active',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 3,
+    is_enabled: true,
+    test_category: 'CloudWatch',
+    test_desc:
+      "4.3 Ensure a log metric filter and alarm exist for usage of 'root' account",
+    test_number: 'control.cis_v140_4_3',
+    status: 'Active',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 4,
+    is_enabled: true,
+    test_category: 'CloudWatch',
+    test_desc: '4.4 Ensure a log metric filter and alarm exist for IAM policy changes',
+    test_number: 'control.cis_v140_4_4',
+    status: 'Active',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 5,
+    is_enabled: true,
+    test_category: 'CloudWatch',
+    test_desc:
+      '4.5 Ensure a log metric filter and alarm exist for CloudTrail configuration changes',
+    test_number: 'control.cis_v140_4_5',
+    status: 'Active',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 6,
+    is_enabled: true,
+    test_category: 'CloudWatch',
+    test_desc:
+      '4.6 Ensure a log metric filter and alarm exist for AWS Management Console authentication failures',
+    test_number: 'control.cis_v140_4_6',
+    status: 'Active',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 7,
+    is_enabled: true,
+    test_category: 'CloudWatch',
+    test_desc:
+      '4.7 Ensure a log metric filter and alarm exist for disabling or scheduled deletion of customer created CMKs',
+    test_number: 'control.cis_v140_4_7',
+    status: 'Active',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 8,
+    is_enabled: true,
+    test_category: 'CloudWatch',
+    test_desc:
+      '4.8 Ensure a log metric filter and alarm exist for S3 bucket policy changes',
+    test_number: 'control.cis_v140_4_8',
+    status: 'Active',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 9,
+    is_enabled: true,
+    test_category: 'CloudWatch',
+    test_desc:
+      '4.9 Ensure a log metric filter and alarm exist for AWS Config configuration changes',
+    test_number: 'control.cis_v140_4_9',
+    status: 'Active',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 10,
+    is_enabled: true,
+    test_category: 'CloudWatch',
+    test_desc:
+      '4.10 Ensure a log metric filter and alarm exist for security group changes',
+    test_number: 'control.cis_v140_4_10',
+    status: 'Active',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 11,
+    is_enabled: true,
+    test_category: 'CloudWatch',
+    test_desc:
+      '4.11 Ensure a log metric filter and alarm exist for changes to Network Access Control Lists (NACL)',
+    test_number: 'control.cis_v140_4_11',
+    status: 'Active',
+  },
+];
+
+const ComplianceTable = () => {
+  const columnHelper = createColumnHelper<ColumnType>();
+  const [tableData, setTableData] = useState(complianceTableData);
+
+  const [rowSelectionState, setRowSelectionState] = useState<any>({});
+
+  const onToggleChange = (rowData: any, flag: boolean) => {
+    setTableData((data) => {
+      data[rowData.row.index].is_enabled = flag;
+
+      return [...data];
+    });
+  };
+  const columns = useMemo(
+    () => [
+      getRowSelectionColumn(columnHelper, {
+        maxSize: 10,
+      }),
+      columnHelper.accessor('id', {
+        cell: (info) => info.getValue(),
+        header: () => '#',
+        maxSize: 20,
+      }),
+      columnHelper.accessor((row) => row.test_category, {
+        id: 'category',
+        cell: (info) => info.getValue(),
+        header: () => <span>Category</span>,
+        maxSize: 50,
+      }),
+      columnHelper.accessor('test_desc', {
+        header: () => 'Description',
+        cell: (info) => info.renderValue(),
+        minSize: 500,
+      }),
+      columnHelper.accessor('status', {
+        header: () => 'Status',
+        cell: (info) => info.renderValue(),
+        maxSize: 50,
+      }),
+      columnHelper.accessor('is_enabled', {
+        header: () => 'Enabled',
+        cell: (info) => (
+          <Switch
+            checked={!!info.renderValue()}
+            onCheckedChange={(e) => {
+              onToggleChange(info, e);
+            }}
+          />
+        ),
+        maxSize: 50,
+      }),
+    ],
+    [],
+  );
+  return (
+    <div>
+      <div className="py-2 text-gray-500">
+        {isEmpty(rowSelectionState) ? (
+          <span className="mb-3 block">No rows selected</span>
+        ) : (
+          <div className="flex gap-2">
+            <Button size="xs" startIcon={<HiBan />}>
+              Disable Selected
+            </Button>
+            <Button size="xs" startIcon={<HiLightBulb />}>
+              Enable Selected
+            </Button>
+          </div>
+        )}
+      </div>
+      <Table
+        size="sm"
+        data={tableData}
+        columns={columns}
+        enableRowSelection
+        onRowSelectionChange={setRowSelectionState}
+        rowSelectionState={rowSelectionState}
+      />
+    </div>
+  );
+};
+
+const scanType = ['CIS', 'GDPR', 'HIPPA', 'PIC', 'SOC2', 'NIST'];
+
+type TabsType = {
+  label: string;
+  value: string;
+};
+
+const hasTypeSelected = (prevTabs: TabsType[], value: string) => {
+  return find(prevTabs, ['value', value]);
+};
+
+const SelectedAccountComponent = ({
+  type,
+  accounts,
+}: {
+  type: string;
+  accounts: string[];
+}) => {
+  return (
+    <span className={`${Typography.size.sm} text-gray-600 dark:text-gray-400`}>
+      {accounts.length > 0 ? `Account: ${type} / ${accounts[0]}` : null}
+      &nbsp;
+      {accounts.length > 1 && (
+        <Tooltip content={accounts.slice(1).join(', ')}>
+          <span className={`${Typography.size.sm} text-blue-500 dark:text-blue-400`}>
+            +{accounts.length - 1} more
+          </span>
+        </Tooltip>
+      )}
+    </span>
+  );
+};
+
+export const ComplianceScanConfigure = () => {
+  const { goBack } = usePageNavigation();
+  const [selectedTab, setSelectedTab] = useState('');
+  const [tabs, setTabs] = useState<TabsType[] | []>([]);
+  const { navigate } = usePageNavigation();
+
+  const onScanTypeSelection = (name: string) => {
+    setTabs((prevTabs) => {
+      const found = hasTypeSelected(prevTabs, name);
+      if (found) {
+        return [...filter(prevTabs, (tab: TabsType) => tab.value !== found.value)];
+      } else {
+        return [
+          ...prevTabs,
+          {
+            label: name,
+            value: name,
+          },
+        ];
+      }
+    });
+  };
+
+  useEffect(() => {
+    // set selected tab by last compliance type
+    if (tabs.length > 0) {
+      setSelectedTab(tabs[tabs.length - 1].value);
+    } else {
+      setSelectedTab('');
+    }
+  }, [tabs]);
+
+  return (
+    <>
+      <ConnectorHeader
+        title="Configure Compliance Scan"
+        description="Choose from the below options to perform your first scan."
+        endComponent={
+          <SelectedAccountComponent
+            accounts={[
+              '234HTY6643',
+              'dummy',
+              'dummy',
+              'dummy',
+              'dummy',
+              'dummy',
+              'dummy',
+              'dummy',
+              'dummy',
+            ]}
+            type={'AWS'}
+          />
+        }
+      />
+      <div className="mt-6 flex gap-4 mb-6">
+        {scanType.map((type) => (
+          <Button
+            color="primary"
+            outline={hasTypeSelected(tabs, type) ? false : true}
+            size="xs"
+            key={type}
+            onClick={() => {
+              onScanTypeSelection(type);
+            }}
+            endIcon={hasTypeSelected(tabs, type) ? <HiMinusCircle /> : <HiPlusCircle />}
+            className="self-start"
+          >
+            {type}
+          </Button>
+        ))}
+        <Button
+          size="sm"
+          color="primary"
+          className="ml-auto"
+          disabled={tabs.length === 0}
+          onClick={() => navigate('/onboard/scan/view-summary')}
+        >
+          Start Scan
+        </Button>
+      </div>
+      <div
+        className={`${Typography.size.sm} ${Typography.weight.medium} mt-4 dark:text-white`}
+      >
+        {selectedTab === '' ? (
+          <p>Please select at least one compliance type to start your scan.</p>
+        ) : (
+          <Tabs value={selectedTab} tabs={tabs} onValueChange={(v) => setSelectedTab(v)}>
+            <div className="h-full p-2 dark:text-white">
+              <ComplianceTable />
+            </div>
+          </Tabs>
+        )}
+      </div>
+      <Button onClick={goBack} size="xs" className="mt-16">
+        Go Back
+      </Button>
+    </>
+  );
+};
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/DockerConnector.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/DockerConnector.tsx
index 2f145325f5..8fc1eeec7b 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/DockerConnector.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/DockerConnector.tsx
@@ -16,7 +16,7 @@ export const DockerConnector = () => {
       <DockerConnectorForm />
 
       <Button onClick={goBack} size="xs" className="mt-16" color="default">
-        Cancel
+        Go Back
       </Button>
     </div>
   );
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/GCPConnector.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/GCPConnector.tsx
index a51361ada7..5fe16bbd40 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/GCPConnector.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/GCPConnector.tsx
@@ -16,7 +16,7 @@ export const GCPConnector = () => {
       <GCPConnectorForm />
 
       <Button onClick={goBack} size="xs" className="mt-16" color="default">
-        Cancel
+        Go Back
       </Button>
     </div>
   );
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/K8sConnector.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/K8sConnector.tsx
index aed78fc391..de7a3c5f99 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/K8sConnector.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/K8sConnector.tsx
@@ -18,7 +18,7 @@ export const K8sConnector = () => {
       </div>
       <div className="flex flex-row mt-16">
         <Button onClick={goBack} size="xs">
-          Cancel
+          Go Back
         </Button>
       </div>
     </div>
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/LinuxConnector.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/LinuxConnector.tsx
index d6a2fa0310..88383be4f1 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/LinuxConnector.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/LinuxConnector.tsx
@@ -16,7 +16,7 @@ export const LinuxConnector = () => {
       <LinuxConnectorForm />
 
       <Button onClick={goBack} size="xs" className="mt-16" color="default">
-        Cancel
+        Go Back
       </Button>
     </div>
   );
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/SecretScanConfigure.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/SecretScanConfigure.tsx
new file mode 100644
index 0000000000..da8f34abb2
--- /dev/null
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/SecretScanConfigure.tsx
@@ -0,0 +1,26 @@
+import { Button } from 'ui-components';
+
+import { ConnectorHeader } from '@/features/onboard/components/ConnectorHeader';
+import { usePageNavigation } from '@/utils/usePageNavigation';
+
+export const SecretScanConfigure = () => {
+  const { goBack } = usePageNavigation();
+  return (
+    <>
+      <ConnectorHeader
+        title="Configure Secret Scan"
+        description="Just click the start scan button to start your secret scanning"
+      />
+      <section className="flex">
+        <div></div>
+        <Button size="sm" color="primary" className="ml-auto">
+          Start scan
+        </Button>
+      </section>
+
+      <Button onClick={goBack} color="default" size="xs" className="mt-16">
+        Go Back
+      </Button>
+    </>
+  );
+};
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/VulnerabilityScanConfigure.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/VulnerabilityScanConfigure.tsx
new file mode 100644
index 0000000000..f773dfe42d
--- /dev/null
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/VulnerabilityScanConfigure.tsx
@@ -0,0 +1,164 @@
+import { cloneDeepWith } from 'lodash-es';
+import { useEffect, useState } from 'react';
+import { Button, Checkbox, Switch, Typography } from 'ui-components';
+
+import { ConnectorHeader } from '@/features/onboard/components/ConnectorHeader';
+import { usePageNavigation } from '@/utils/usePageNavigation';
+
+const packages = [
+  {
+    name: 'OS Packages',
+    checked: false,
+  },
+  {
+    name: 'Java',
+    checked: false,
+  },
+  {
+    name: 'Javascript',
+    checked: false,
+  },
+  {
+    name: 'Rust',
+    checked: false,
+  },
+  {
+    name: 'GoLang',
+    checked: false,
+  },
+  {
+    name: 'Ruby',
+    checked: false,
+  },
+  {
+    name: 'Python',
+    checked: false,
+  },
+  {
+    name: 'PHP',
+    checked: false,
+  },
+  {
+    name: 'Dotnet',
+    checked: false,
+  },
+];
+
+export const VulnerabilityScanConfigure = () => {
+  const { goBack } = usePageNavigation();
+  const [isSelectAll, setIsSelectAll] = useState(false);
+  const [pkgs, setSelectPackages] = useState(packages);
+
+  useEffect(() => {
+    if (isSelectAll) {
+      const newPkgs = pkgs.map((pkg) => {
+        pkg.checked = true;
+        return pkg;
+      });
+      setSelectPackages(newPkgs);
+    }
+  }, [isSelectAll]);
+
+  // select all switch
+  const onSwitchChange = (checked: boolean) => {
+    setIsSelectAll(checked);
+    if (!checked) {
+      const newPkgs = pkgs.map((pkg) => {
+        pkg.checked = false;
+        return pkg;
+      });
+      setSelectPackages(newPkgs);
+    }
+  };
+
+  // packages checkbox
+  const onPackageCheckedChange = (
+    pkg: {
+      name: string;
+      checked: boolean;
+    },
+    checked: boolean,
+  ) => {
+    if (checked === false) {
+      setIsSelectAll(false);
+    } else if (pkgs.filter((pkg) => pkg.checked === true).length === pkgs.length - 1) {
+      setIsSelectAll(true);
+    }
+    setSelectPackages((state) => {
+      const _newState = cloneDeepWith(state, (value) => {
+        if (value.name === pkg.name) {
+          return {
+            ...value,
+            checked,
+          };
+        }
+        return undefined;
+      });
+
+      return _newState;
+    });
+  };
+  return (
+    <>
+      <ConnectorHeader
+        title="Configure Vulnerability Scan"
+        description="Choose from the below options to perform your first scan."
+      />
+      <section>
+        <div className="flex">
+          <h6
+            className={`${Typography.size.lg} ${Typography.weight.medium} mt-0 dark:text-white`}
+          >
+            Packages
+          </h6>
+          <Button size="sm" color="primary" className="ml-auto">
+            Start Scan
+          </Button>
+        </div>
+        <div className="mt-4">
+          <Switch
+            label="Select All"
+            size="sm"
+            onCheckedChange={onSwitchChange}
+            checked={isSelectAll}
+          />
+        </div>
+
+        <div className="flex flex-row mt-4 gap-5">
+          {pkgs.map((pkg) => {
+            return (
+              <Checkbox
+                label={pkg.name}
+                key={pkg.name}
+                checked={isSelectAll ? true : pkg.checked}
+                onCheckedChange={(checked: boolean) => {
+                  onPackageCheckedChange(pkg, checked);
+                }}
+              />
+            );
+          })}
+        </div>
+      </section>
+
+      <section className="mt-8">
+        <h6
+          className={`${Typography.size.lg} ${Typography.weight.medium} mt-4 dark:text-white`}
+        >
+          Advanced Options
+        </h6>
+
+        <div className="flex flex-col mt-4 gap-4">
+          <Checkbox
+            label={
+              'Scan Entire Cluster (All hosts and container images of all pods in the cluster)'
+            }
+          />
+          <Checkbox label={'Priority Scan'} />
+        </div>
+      </section>
+      <Button onClick={goBack} color="default" size="xs" className="mt-16">
+        Go Back
+      </Button>
+    </>
+  );
+};
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/connectors/AddConnectors.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/connectors/AddConnectors.tsx
index 45285cdd8c..e7fd27a2f8 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/connectors/AddConnectors.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/connectors/AddConnectors.tsx
@@ -126,12 +126,12 @@ const Host = () => {
     {
       icon: LogoDocker,
       label: 'Docker Container',
-      path: 'docker',
+      path: 'host/docker',
     },
     {
       icon: LogoLinux,
       label: 'Linux Bare-Metal/VM',
-      path: 'host-linux',
+      path: 'host/linux',
     },
   ];
 
diff --git a/deepfence_frontend/apps/dashboard/src/routes/private.tsx b/deepfence_frontend/apps/dashboard/src/routes/private.tsx
index 7286907e65..df32bbd196 100644
--- a/deepfence_frontend/apps/dashboard/src/routes/private.tsx
+++ b/deepfence_frontend/apps/dashboard/src/routes/private.tsx
@@ -11,12 +11,16 @@ import {
 import { AmazonECRConnector } from '@/features/onboard/pages/AmazonECRConnector';
 import { AWSConnector } from '@/features/onboard/pages/AWSConnector';
 import { AzureConnector } from '@/features/onboard/pages/AzureConnector';
+import { ChooseScan } from '@/features/onboard/pages/ChooseScan';
+import { ComplianceScanConfigure } from '@/features/onboard/pages/ComplianceScanConfigure';
 import { AddConnector } from '@/features/onboard/pages/connectors/AddConnectors';
 import { MyConnectors } from '@/features/onboard/pages/connectors/MyConnectors';
 import { DockerConnector } from '@/features/onboard/pages/DockerConnector';
 import { GCPConnector } from '@/features/onboard/pages/GCPConnector';
 import { K8sConnector } from '@/features/onboard/pages/K8sConnector';
 import { LinuxConnector } from '@/features/onboard/pages/LinuxConnector';
+import { SecretScanConfigure } from '@/features/onboard/pages/SecretScanConfigure';
+import { VulnerabilityScanConfigure } from '@/features/onboard/pages/VulnerabilityScanConfigure';
 
 export const privateRoutes: RouteObject[] = [
   {
@@ -60,11 +64,11 @@ export const privateRoutes: RouteObject[] = [
             element: <K8sConnector />,
           },
           {
-            path: 'docker',
+            path: 'host/docker',
             element: <DockerConnector />,
           },
           {
-            path: 'host-linux',
+            path: 'host/linux',
             element: <LinuxConnector />,
           },
           {
@@ -73,6 +77,27 @@ export const privateRoutes: RouteObject[] = [
           },
         ],
       },
+      {
+        path: 'scan',
+        children: [
+          {
+            path: 'choose',
+            element: <ChooseScan />,
+          },
+          {
+            path: 'configure/compliance',
+            element: <ComplianceScanConfigure />,
+          },
+          {
+            path: 'configure/vulnerability',
+            element: <VulnerabilityScanConfigure />,
+          },
+          {
+            path: 'configure/secret',
+            element: <SecretScanConfigure />,
+          },
+        ],
+      },
     ],
   },
 ];
diff --git a/deepfence_frontend/pnpm-lock.yaml b/deepfence_frontend/pnpm-lock.yaml
index 07ee02c626..72a8863703 100644
--- a/deepfence_frontend/pnpm-lock.yaml
+++ b/deepfence_frontend/pnpm-lock.yaml
@@ -17,6 +17,7 @@ importers:
       '@testing-library/jest-dom': ^5.16.5
       '@testing-library/react': ^13.4.0
       '@testing-library/user-event': ^14.4.3
+      '@types/lodash-es': ^4.17.6
       '@types/react': ^18.0.24
       '@types/react-dom': ^18.0.8
       '@types/testing-library__jest-dom': ^5.14.5
@@ -33,6 +34,7 @@ importers:
       eslint-plugin-prettier: ^4.2.1
       eslint-plugin-react: ^7.31.11
       eslint-plugin-simple-import-sort: ^8.0.0
+      lodash-es: ^4.17.21
       msw: ^0.49.1
       playwright: 1.28.1
       postcss: ^8.4.19
@@ -55,6 +57,7 @@ importers:
       '@testing-library/jest-dom': 5.16.5
       '@testing-library/user-event': 14.4.3
       classnames: 2.3.2
+      lodash-es: 4.17.21
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
       react-icons: 4.7.1_react@18.2.0
@@ -66,6 +69,7 @@ importers:
       '@openapitools/openapi-generator-cli': 2.5.2
       '@playwright/test': 1.28.1
       '@testing-library/react': 13.4.0_biqbaboplfbrettd7655fr4n2y
+      '@types/lodash-es': 4.17.6
       '@types/react': 18.0.25
       '@types/react-dom': 18.0.9
       '@types/testing-library__jest-dom': 5.14.5