diff --git a/src/Assets/CSS/common.css b/src/Assets/CSS/common.css
index 396072bae..66fcc4a83 100644
--- a/src/Assets/CSS/common.css
+++ b/src/Assets/CSS/common.css
@@ -999,6 +999,10 @@ button.disbalesubmitbtndept {
   margin-top: 0px !important;
 }
 
+.dataset_selector_in_integration .ant-segmented-item-selected {
+  margin-bottom: 0px !important;
+}
+
 .dataset_selector_in_integration .MuiCollapse-entered {
   background: #FFFFFF !important;
   box-shadow: 0px 20px 40px -4px rgb(145 158 171 / 16%) !important;
@@ -1055,6 +1059,8 @@ button.disbalesubmitbtndept {
   color: red !important;
 }
 
+
+
 .deleteicon:hover .mainBoxInIntegration {
   border: 1px solid red !important;
 }
@@ -1110,12 +1116,17 @@ html {
   width: 368px;
   height: 178px;
   margin: 30px 15px 15px 15px;
-  border: 1px solid #C0C7D1;
+  border: 1px solid #FFDB64;
+  outline: none;
+
 }
 
 .connectorCard:hover {
-  border: 1px solid #c09507;
+  box-shadow: 0px 4px 20px rgba(216, 175, 40, 0.28);
+  /* border: 1px solid red; */
+  border: 1px solid #FFDB64;
   cursor: pointer;
+
 }
 
 .dataset_selector_in_integration .backButtonMainDiv .MuiSvgIcon-root {
@@ -1124,4 +1135,8 @@ html {
 
 .dataset_selector_in_integration .Mui-focused {
   /* border: 1px solid #ab8405 !important; */
+}
+
+.ant-segmented-group label {
+  margin-bottom: 0px !important;
 }
\ No newline at end of file
diff --git a/src/Assets/Img/analytics.png b/src/Assets/Img/analytics.png
new file mode 100644
index 000000000..f8bb577f3
Binary files /dev/null and b/src/Assets/Img/analytics.png differ
diff --git a/src/Assets/Img/dashboard-growth.png b/src/Assets/Img/dashboard-growth.png
new file mode 100644
index 000000000..b418992ca
Binary files /dev/null and b/src/Assets/Img/dashboard-growth.png differ
diff --git a/src/Components/AdminDatasetConnection/AddDataset.jsx b/src/Components/AdminDatasetConnection/AddDataset.jsx
index c39e7f3b7..319b0f894 100644
--- a/src/Components/AdminDatasetConnection/AddDataset.jsx
+++ b/src/Components/AdminDatasetConnection/AddDataset.jsx
@@ -957,6 +957,7 @@ const AddDataset = (props) => {
     }, [])
 
 
+
     return (
         <Container id='admin_add_dataset_main_container'>
             {isLoading ? <Loader /> : ""}
@@ -1097,6 +1098,7 @@ const AddDataset = (props) => {
                                     {
                                         activeStep == 2 ?
                                             <DataStandardizationInAddDataset
+                                                isaccesstoken={isaccesstoken}
                                                 allStandardisedFile={allStandardisedFile}
                                                 setAllStandardisedFile={setAllStandardisedFile}
                                                 standardisedFileLink={standardisedFileLink}
@@ -1186,7 +1188,7 @@ const AddDataset = (props) => {
                                                 Finish Later
                                             </Button> : " "}
                                         <Box sx={{ flex: '1 1 auto' }} />
-                                        {activeStep != 0 && !isSubmitted ? <Button id='cancel_button' className='cancel_btn' onClick={handleResetForm}>Cancel</Button> : ""}
+                                        {!onBoardingPage && activeStep != 0 && !isSubmitted ? <Button id='cancel_button' className='cancel_btn' onClick={handleResetForm}>Cancel</Button> : ""}
                                         <Box sx={{ flex: '1 1 auto' }} />
                                         {/* {(isStepOptional(activeStep) && (localUploaded.length > 0 || mysqlFileList.length > 0 || postgresFileList.length > 0)) && (
                                         <Button color="inherit" onClick={handleSkip} sx={{ mr: 1 }}>
diff --git a/src/Components/AdminDatasetConnection/DataStandardizationInAddDataset.js b/src/Components/AdminDatasetConnection/DataStandardizationInAddDataset.js
index 69fe90e75..76f3a7d4c 100644
--- a/src/Components/AdminDatasetConnection/DataStandardizationInAddDataset.js
+++ b/src/Components/AdminDatasetConnection/DataStandardizationInAddDataset.js
@@ -19,7 +19,7 @@ import { GetErrorHandlingRoute } from "../../Utils/Common";
 import { message, Space } from "antd";
 
 const DataStandardizationInAddDataset = (props) => {
-  const { datasetname, setAllStandardisedFile, allStandardisedFile, standardisedFileLink, setStandardisedFileLink, listOfFilesExistInDbForEdit, isDatasetEditModeOn } = props;
+  const { datasetname, setAllStandardisedFile, allStandardisedFile, standardisedFileLink, setStandardisedFileLink, listOfFilesExistInDbForEdit, isDatasetEditModeOn, isaccesstoken} = props;
 
   console.log("type of ", typeof(listOfFilesExistInDbForEdit))
 
@@ -108,7 +108,9 @@ const DataStandardizationInAddDataset = (props) => {
       UrlConstant.standardization_get_all_file_name +
       datasetname;
     setIsLoading(true);
-    HTTPService("GET", url, false, false, true)
+    let checkforAccess = isaccesstoken ? isaccesstoken : false;
+
+    HTTPService("GET", url, false, false, true, checkforAccess)
       .then((response) => {
     // console.log("filename in getAllFileNames api call 2",allFileNames)
         setIsLoading(false);
@@ -145,9 +147,11 @@ const DataStandardizationInAddDataset = (props) => {
 
   const getStandardiziedTemplate = () => {
     let url = UrlConstant.base_url + UrlConstant.standardization_get_data;
+    let checkforAccess = isaccesstoken ? isaccesstoken : false;
+    console.log("checkforAccess",checkforAccess)
 
     setIsLoading(true);
-    HTTPService("GET", url, false, false, true)
+    HTTPService("GET", url, false, false, true, checkforAccess)
       .then((response) => {
         setIsLoading(false);
         console.log("response", response);
@@ -217,11 +221,12 @@ const DataStandardizationInAddDataset = (props) => {
       file_path: fileName,
       // is_standardised: true,
     };
+    let checkforAccess = isaccesstoken ? isaccesstoken : false;
     if(alreadyStanddardizedFiles.includes(fileName)) payload['is_standardised'] = true
     
     console.log("filename", fileName);
     setIsLoading(true);
-    HTTPService("POST", url, payload, false, true)
+    HTTPService("POST", url, payload, false, true, checkforAccess)
       .then((response) => {
         setIsLoading(false);
         console.log("response", response);
@@ -255,6 +260,8 @@ const DataStandardizationInAddDataset = (props) => {
     // saving standardised config
 
     let tmpAllStandardisedFile = {...allStandardisedFile}
+    console.log('tmpAllStandardisedFile without update',tmpAllStandardisedFile)
+
     tmpAllStandardisedFile[fileName] = {
       standardised_templete_category: standardisedTempleteCategory,
       standardised_column: standardisedColum,
@@ -281,10 +288,11 @@ const DataStandardizationInAddDataset = (props) => {
     }
 
     if(alreadyStanddardizedFiles.includes(fileName)) payload['is_standardised'] = true
-
+    
     let url = UrlConstant.base_url + UrlConstant.standardise_file
     setIsLoading(true)
-    HTTPService("POST", url, payload, false, true)
+    let checkforAccess = isaccesstoken ? isaccesstoken : false;
+    HTTPService("POST", url, payload, false, true, checkforAccess)
     .then((response) => {
       setIsLoading(false);
       console.log("response", response);
@@ -329,11 +337,14 @@ const DataStandardizationInAddDataset = (props) => {
       // console.log("tmpAllFileName in handleExistingStandardizedFiles", tmpAllFileName)
       if(Object.keys(dataset.standardisation_config).length){
         tmpAlreadyStanddardizedFiles.push(dataset.file)
-        tmpStandardized[dataset.file] = dataset.standardisation_config
+        
+        // if tmpStandardized[dataset.file] donsn't exist then create
+        if(!tmpStandardized[dataset.file]) tmpStandardized[dataset.file] = dataset.standardisation_config
       }
       // console.log("tmpStandardized in handleExistingStandardizedFiles",tmpStandardized)
     })
     setAllStandardisedFile(tmpStandardized)
+    console.log("tmpStandardized1",tmpStandardized)
     setAllFileNames(tmpAllFileName);
     setAlreadyStanddardizedFiles(tmpAlreadyStanddardizedFiles)
   }
@@ -362,7 +373,7 @@ const DataStandardizationInAddDataset = (props) => {
       setMaskedColumns(allStandardisedFile[fileName]?.masked_columns)
       
       // Chnage object reference
-      if(isDatasetEditModeOn){
+      // if(isDatasetEditModeOn){
       let tmpArr = [...allStandardisedFile[fileName]?.standardised_templete_category];
       tmpArr.forEach((attribute,index)=>{
         allStandardisedTempleteCategory.forEach(((tmpAttribute)=>{
@@ -384,9 +395,9 @@ const DataStandardizationInAddDataset = (props) => {
       tmpColumn[index] = Object.keys(attribute.datapoint_attributes);
     });
     setStandardisedTempleteAttribute(tmpColumn);
-  }
+  // }
 
-  if(!isDatasetEditModeOn) setStandardisedColumn(allStandardisedFile[fileName]?.standardised_column)
+  // if(!isDatasetEditModeOn) setStandardisedColumn(allStandardisedFile[fileName]?.standardised_column)
 
     }
 
@@ -398,7 +409,8 @@ const DataStandardizationInAddDataset = (props) => {
     standardisedTempleteAttribute,
     allFileNames
   );
-
+  
+  console.log("allStandardisedFile",allStandardisedFile)
   console.log('all data',keysInUploadedDataset, standardisedTempleteCategory, standardisedColum,maskedColumns)
   console.log("listOfFilesExistInDbForEdit", listOfFilesExistInDbForEdit)
   return (
@@ -417,7 +429,7 @@ const DataStandardizationInAddDataset = (props) => {
             <Select
               labelId="demo-select-small"
               id="select-file-name-small"
-              // value={age}
+              label="Select file name"
               value={fileName}
               error={fileNameError ? fileNameError : null}
               onChange={(e) => {
@@ -457,7 +469,7 @@ const DataStandardizationInAddDataset = (props) => {
             <span>Uploaded Data Column Name</span>
           </Col>
           <Col xs={3} sm={3} md={3} lg={3}>
-            <span>Standard Data Calegory</span>
+            <span>Standard Data Category</span>
           </Col>
           <Col xs={3} sm={3} md={3} lg={3}>
             <span>Standard Data Attribute</span>
@@ -466,8 +478,8 @@ const DataStandardizationInAddDataset = (props) => {
             <span>Mask</span>
           </Col>
 
-          {/* </div> */}
-        </Row>
+          {/* </div> */}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
+        </Row>  
       ) : null}
       <div className="data_standardization_column">
         {keysInUploadedDataset?.map((keyNames, index) => {
@@ -496,6 +508,7 @@ const DataStandardizationInAddDataset = (props) => {
                     <Select
                       labelId="demo-select-small"
                       id="demo-select-small"
+                      label="Select datapoint category"
                       value={
                         standardisedTempleteCategory?.[index]
                          ? standardisedTempleteCategory?.[index] :
@@ -504,10 +517,10 @@ const DataStandardizationInAddDataset = (props) => {
                       onChange={(e) =>
                         datapointCategoryChange(e.target.value, index)
                       }
-                    >
+                    ><MenuItem value=""><em>None</em></MenuItem>
                     {/* { console.log(standardisedTempleteCategory?.[index],allStandardisedTempleteCategory, "THIS IS THE VVALUENBASBAHUSB")} */}
                       {allStandardisedTempleteCategory?.map((item) => {
-                        // console.log("This is to check value of object reff",standardisedTempleteCategory?.[index]===item,standardisedTempleteCategory?.[index],item)
+                        console.log("This is to check value of object reff",standardisedTempleteCategory?.[index]===item,standardisedTempleteCategory?.[index],item)
                         return (
                           <MenuItem key={item.datapoint_category} value={item}>
                             {item.datapoint_category}
@@ -529,6 +542,7 @@ const DataStandardizationInAddDataset = (props) => {
                     <Select
                       labelId="demo-select-small"
                       id="demo-select-small"
+                      label="Select column/key"
                       value={standardisedColum[index] ? standardisedColum[index] : ""}
                       onChange={(e) => {
                         let tmpArr = [...standardisedColum];
diff --git a/src/Components/AdminDatasetConnection/ViewMetaDatasetDetails.jsx b/src/Components/AdminDatasetConnection/ViewMetaDatasetDetails.jsx
index b4365ce9d..6e2700d43 100644
--- a/src/Components/AdminDatasetConnection/ViewMetaDatasetDetails.jsx
+++ b/src/Components/AdminDatasetConnection/ViewMetaDatasetDetails.jsx
@@ -50,6 +50,7 @@ export default function ViewMetaDatasetDetails(props) {
   const [success, setisSuccess] = useState(false);
   const fileTypes = ["XLS", "xlsx", "CSV", "PDF", "JPEG", "JPG", "PNG", "TIFF"];
   const [previewImage, setPreviewImage] = useState("");
+  const [datasetName, setDatasetName] = useState("")
   const location = useLocation();
 
   console.log(location.state, "location")
@@ -90,6 +91,7 @@ export default function ViewMetaDatasetDetails(props) {
       setOrgDetail(response.data.organization)
       setorgdes(response.data.organization.org_description)
       setUserDetails(response.data.user)
+      setDatasetName(response?.data?.name)
     }).catch((e) => {
       setLoader(false);
       console.log('error while loading dataset', e)
@@ -177,7 +179,7 @@ export default function ViewMetaDatasetDetails(props) {
                     "paddingLeft": "98px",
                     "margin-top": "50px"
                   }}>
-                  <span>Agricultural Practices Video Dissemintion Data</span>
+                  <span>{datasetName}</span>
                 </Col>
               </Row>
               <Row style={{ "marginLeft": "96px", "margin-right": "73px" }}>
diff --git a/src/Components/Datasets/DataSetCard.js b/src/Components/Datasets/DataSetCard.js
index ec75f6354..87ad03d43 100644
--- a/src/Components/Datasets/DataSetCard.js
+++ b/src/Components/Datasets/DataSetCard.js
@@ -68,12 +68,16 @@ const useStyles = {
     "font-weight": "400",
     "font-size": "14px",
     "line-height": "19px",
-    display: "-webkit-box",
+    "display": "-webkit-box",
     "-webkit-line-clamp": "2",
     "-webkit-box-orient": "vertical",
     "text-align": "left",
-    overflow: "hidden",
-    "max-height": "60px"
+    "overflow": "hidden",
+    "max-height": "60px",
+    "text-overflow": "ellipsis",
+    "overflow": "hidden",
+    "display": "inline-block",
+    "width": "300px",
   },
 };
 export default function DataSetCard(props) {
@@ -129,11 +133,13 @@ export default function DataSetCard(props) {
         <CardContent>
           <Row style={useStyles.datasetdescription}>
             {/* <Tooltip TransitionComponent={Zoom} title={props.description}> */}
-            <span
-              style={{ maxWidth: "300px", height: "40px", display: "block" }}
+            <p
+            className="dataset-description-in-dataset-details"
+            
+              style={{ maxWidth: "300px", height: "40px", display: "block", }}
             >
               {props.description ? parse(props.description) : ""}
-            </span>
+            </p>
             {/* </Tooltip> */}
           </Row>
           <Row>
diff --git a/src/Components/Datasets/DataSetForm.css b/src/Components/Datasets/DataSetForm.css
index e642f3223..5e28dd2cd 100644
--- a/src/Components/Datasets/DataSetForm.css
+++ b/src/Components/Datasets/DataSetForm.css
@@ -167,3 +167,21 @@
   width: 100% !important;
   float: left !important;
 }
+.dataset-description-in-dataset-details{
+  all: unset;
+}
+
+.dataset-description-in-dataset-details p{
+  display: inline-block;
+  overflow: hidden;
+  max-height: 60px;
+  text-overflow: ellipsis;
+  width: 300px;
+} 
+.cardheaderTitlespecifier span{
+  display: inline-block;
+  overflow: hidden;
+  max-height: 60px;
+  text-overflow: ellipsis;
+  width: 250px;
+}
diff --git a/src/Components/Datasets/IntegrationDatasets/CardDetail/card_detail.module.css b/src/Components/Datasets/IntegrationDatasets/CardDetail/card_detail.module.css
index f0a1cb371..31b48eeae 100644
--- a/src/Components/Datasets/IntegrationDatasets/CardDetail/card_detail.module.css
+++ b/src/Components/Datasets/IntegrationDatasets/CardDetail/card_detail.module.css
@@ -26,6 +26,14 @@
     line-height: 24px;
     text-align: left;
     border-bottom: 1px solid #9AA1A9;
+
+    background: #636363 !important;
+    /* fallback for old browsers */
+    background: -webkit-linear-gradient(to right, #ab84057f, white) !important;
+    background: -webkit-linear-gradient(to bottom, #ab84057f, white) !important;
+    /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to right, #ab84057f, white) !important;
+    background: linear-gradient(to bottom, #ab84057f, white);
 }
 
 .topRowOfCard div:nth-child(2) {
diff --git a/src/Components/Datasets/IntegrationDatasets/DatasetIntegration.jsx b/src/Components/Datasets/IntegrationDatasets/DatasetIntegration.jsx
index 76af517ce..883f38908 100644
--- a/src/Components/Datasets/IntegrationDatasets/DatasetIntegration.jsx
+++ b/src/Components/Datasets/IntegrationDatasets/DatasetIntegration.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { Col, Container, Row } from 'react-bootstrap'
 import DatasetSelect from './DatasetSelect/DatasetSelect'
 import Join from './Join/Join'
@@ -42,11 +42,11 @@ const DatasetIntegration = (props) => {
     const [connectorIdForView, setConnectorIdForView] = useState("")
 
     const [template, setTemplate] = useState(
-        { org_id: "", dataset_list: [], file_list: [], org_name: "", dataset_id: "", dataset_name: "", file_name: "", availabeColumns: [], columnsSelected: [], left: [], right: [], left_on: [], right_on: [], type: "" },
+        { org_id: "", dataset_list: [], file_list: [], org_name: "", dataset_id: "", dataset_name: "", file_name: "", availabeColumns: [], columnsSelected: [], left: [], right: [], left_on: [], right_on: [], type: "", result: [] },
 
     )
     const [empty, setEmptyTemplate] = useState(
-        { org_id: "", dataset_list: [], file_list: [], org_name: "", dataset_id: "", dataset_name: "", file_name: "", availabeColumns: [], columnsSelected: [], left: [], right: [], left_on: [], right_on: [], type: "" },
+        { org_id: "", dataset_list: [], file_list: [], org_name: "", dataset_id: "", dataset_name: "", file_name: "", availabeColumns: [], columnsSelected: [], left: [], right: [], left_on: [], right_on: [], type: "", result: [] },
     )
 
 
@@ -259,10 +259,10 @@ const DatasetIntegration = (props) => {
     const resetAll = (main, connector, join, goback, func1, func2) => {
 
         // goToTop()
-        if (isEditModeOn) {
-            setIsConditionForConnectorDataForSaveMet(false)
-            setIsAllConditionForSaveMet(false)
-        }
+        // if (isEditModeOn) {
+        setIsConditionForConnectorDataForSaveMet(false)
+        setIsAllConditionForSaveMet(false)
+        // }
         setTemporaryDeletedCards([])
         setIntegratedFilePath("")
         setNoOfRecords(0)
@@ -298,7 +298,7 @@ const DatasetIntegration = (props) => {
             currentObj["left"] = maps[i]?.condition?.left?.length > 0 ? maps[i]?.condition?.left : []
             currentObj["next_left"] = maps[i]?.condition?.left?.length > 0 ? maps[i]?.condition?.left : []
             currentObj["map_id"] = maps[i]?.id ? maps[i]?.id : null
-
+            currentObj["result"] = maps[i]?.condition?.result ? maps[i]?.condition?.result : []
             currentObj["availabeColumns"] = maps[i]?.condition?.left_available_columns?.length > 0 ? maps[i]?.condition?.left_available_columns : maps[i]?.condition?.left_selected
             arr[i] = currentObj
 
@@ -370,6 +370,7 @@ const DatasetIntegration = (props) => {
                     left_dataset_file_path: completeData[i]?.file_name,
                     right_dataset_file_path: completeData[i + 1]?.file_name,
                     condition: {
+                        result: completeData[i]?.result?.length > 0 ? completeData[i]?.result : [],
                         left: completeData[i]?.next_left?.length > 0 ? completeData[i].next_left : [], right: completeData[i]?.right?.length > 0 ? completeData[i].right : [],
                         left_available_columns: completeData[i]?.availabeColumns?.length > 0 ? [...completeData[i]?.availabeColumns] : [],
                         right_available_columns: completeData[i + 1]?.availabeColumns?.length > 0 ? [...completeData[i + 1]?.availabeColumns] : [],
@@ -379,7 +380,8 @@ const DatasetIntegration = (props) => {
                         right_on: completeData[i]?.right_on
                     }
                 }
-                if (isEditModeOn) {
+                // console.log(temporaryDeletedCards, completeData[i]?.map_id, "completeData[i]?.map_id")
+                if (isEditModeOn && !temporaryDeletedCards.includes(completeData[i]?.map_id)) {
                     obj["id"] = completeData[i]?.map_id ? completeData[i]?.map_id : null
                 }
                 payload.push(obj)
@@ -436,12 +438,14 @@ const DatasetIntegration = (props) => {
                     let obj = arr[index + 1]
                     let first_obj = arr[index]
                     first_obj["next_left"] = [...allKeys]
+                    first_obj["result"] = [...(res.data?.data.data)]
                     obj["left"] = [...allKeys]
                     obj["left_on"] = []
                     console.log("HERE IS THE CALL", arr.length, index,)
                     if (arr.length > 2 && index != arr.length - 2) {
                         for (let i = index + 1; i < arr.length; i++) {
                             arr[i]["left_on"] = []
+                            arr[i]["result"] = []
                         }
                         setIsAllConditionForSaveMet(false)
                     } else {
@@ -458,7 +462,7 @@ const DatasetIntegration = (props) => {
                         setOpen(false);
                         return clearTimeout(id)
                     }, 2500)
-                    document.querySelector('#previewTable').scrollIntoView({ behavior: 'smooth' });
+                    // document.querySelector('#previewTable').scrollIntoView({ behavior: 'smooth' });
                 }
 
             } else if (condition == "save") {
@@ -497,8 +501,8 @@ const DatasetIntegration = (props) => {
                 if (condition == "integrate") {
                     setIsAllConditionForSaveMet(false)
                 }
-                console.log(err.response.data)
-                console.log(Object.values(err?.response?.data)[0])
+                console.log(err)
+                // console.log(Object.values(err?.response?.data)[0])
                 setOpen(true);
                 setLoader(false)
                 setAlertType("error")
@@ -561,6 +565,7 @@ const DatasetIntegration = (props) => {
     }
 
 
+
     useEffect(() => {
 
         getDataList("org_names")
diff --git a/src/Components/Datasets/IntegrationDatasets/DatasetSelect/DatasetSelect.jsx b/src/Components/Datasets/IntegrationDatasets/DatasetSelect/DatasetSelect.jsx
index 0d2ea78ed..5129f9b3a 100644
--- a/src/Components/Datasets/IntegrationDatasets/DatasetSelect/DatasetSelect.jsx
+++ b/src/Components/Datasets/IntegrationDatasets/DatasetSelect/DatasetSelect.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useRef } from 'react'
 import { Col, Container, Row } from 'react-bootstrap'
 import styles from "../dataset_integration.module.css"
 import InputLabel from '@mui/material/InputLabel';
@@ -14,8 +14,8 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import { Checkbox, Fab, FormControlLabel, TextField } from '@mui/material';
 import { CheckLg } from 'react-bootstrap-icons';
 import CardDetail from '../CardDetail/CardDetail';
+import { dateTimeFormat, handleUnwantedSpace, toTitleCase, validateInputField } from '../../../../Utils/Common';
 import { Button, Affix, Alert } from 'antd';
-import { dateTimeFormat, handleUnwantedSpace, validateInputField } from '../../../../Utils/Common';
 import RegexConstants from '../../../../Constants/RegexConstants';
 import Join from '../Join/Join';
 import leftG from "../../../../Assets/Img/Join type/Color/Left.svg"
@@ -26,15 +26,19 @@ import fullB from "../../../../Assets/Img/Join type/Normal state/outer.svg"
 import fullG from "../../../../Assets/Img/Join type/Color/outer.svg"
 import innerB from "../../../../Assets/Img/Join type/Normal state/inner.svg"
 import innerG from "../../../../Assets/Img/Join type/Color/inner.svg"
+import analytics from "../../../../Assets/Img/analytics.png"
 import settinggif from "../../../../Assets/Img/setting.gif"
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import BorderColorIcon from '@mui/icons-material/BorderColor';
 
 const DatasetSelect = (props) => {
     const { setIsAllConditionForSaveMet, temporaryDeletedCards, setTemporaryDeletedCards, connectorTimeData, isEditModeOn, setIsConditionForConnectorDataForSaveMet, isEdited, setIsEdited, setIsEditModeOn, setIsDatasetIntegrationListModeOn, integrateMore, empty, template, setTemplate, counterForIntegrator, completedJoinData, setCompleteJoinData, resetAll, generateData, orgList, joinType, setJoinType, setCompleteData, setConnectorData, connectorData, completeData, setFinalDataNeedToBeGenerated, finalDataNeedToBeGenerated, listOfFilesSelected, allDatasetNameList, listOfDatasetSelected, handleChangeDatasetNameSelector, listOfDatsetFileAvailableForColumn, } = props
     const [errorConnectorName, setErrorConnectorName] = useState("")
     const [errorConnectorDesc, setErrorConnectorDesc] = useState("")
+    const [value, setValue] = useState('Join by');
     const [show, setShow] = useState(false)
     const [indexShow, setIndex] = useState(-1)
+
     const handleChange = (e) => {
         let value = e.target.name
         if (value == "name") {
@@ -131,11 +135,14 @@ const DatasetSelect = (props) => {
             handleUnwantedSpace(connectorData.desc, e);
         }
     };
-    const handleMoreDataShow = (index, condition, e) => {
+    const handleMoreDataShow = (index, condition, e, whatToShow) => {
         e.stopPropagation()
         if (condition) {
             setIndex(index)
             setShow(true)
+            // if(whatToShow=="table_result"){
+            //     setShowTable
+            // }
         }
         else {
             setIndex(-1)
@@ -144,6 +151,7 @@ const DatasetSelect = (props) => {
 
     }
 
+
     return (
         <Container style={{ background: "rgb(252, 252, 252)" }} className='dataset_selector_in_integration'>
             <Row style={{ marginBottom: "25px" }} >
@@ -191,7 +199,7 @@ const DatasetSelect = (props) => {
                 <Col lg={12} sm={12} sx={12}>
 
                     <Affix style={{ backgrond: "white", transition: "all 2s", display: counterForIntegrator == completeData.length ? "none" : "block" }} offsetTop={top}>
-                        <Row className={styles.selectors + " all_selectors_as_sticky"}>
+                        <Row className={styles.selectors + " all_selectors_as_sticky"} >
                             <Col lg={3}>
                                 <FormControl variant="outlined" fullWidth style={{ cursor: completeData.length == counterForIntegrator + 1 ? "not-allowed" : "pointer" }}>
                                     <InputLabel id="org_name_label">Organization name <span className='MuiInputLabel-asterisk'>*</span></InputLabel>
@@ -255,54 +263,51 @@ const DatasetSelect = (props) => {
                         </Row>
                     </Affix>
                     <hr />
-                    {/* {completeData?.length > 0 && completeData.map((each, index) => {
-                        //console.log(show, indexShow)
-                        if (totalCounter >= index && index < counterForIntegrator) {
-                            return <span >
-                                {index != 0 && <span id='settingIconForHover' onMouseLeave={() => handleMoreDataShow(index, false)} onMouseOver={() => handleMoreDataShow(index, true)} style={{ height: `${show && index == indexShow ? "300px" : "50px"}`, overflow: "hidden", width: `${show && index == indexShow ? "700px" : "50px"}`, margin: "auto", backgroundImage: index != indexShow ? `url(${settinggif})` : "none", backgroundRepeat: "no-repeat", backgroundSize: "50px 50px", backgroundPosition: "center", boxShadow: "0 3px 10px #ab840574", }} className={index == indexShow ? styles.hoveredOne : styles.alwaysHave}>
-                                    {index == indexShow ? <Join file_left={completeData[index - 1].file_name} file_right={completeData[index].file_name} setCompleteJoinData={setCompleteJoinData} left_on={completedJoinData[index - 1]?.left_on} right_on={completedJoinData[index - 1]?.right_on} completedJoinData={completedJoinData} left={completedJoinData[index - 1]?.left} type={completedJoinData[index - 1]?.type} right={completedJoinData[index - 1]?.right} index={index} each={each} resetAll={resetAll} joinType={joinType} setJoinType={setJoinType} connectorData={connectorData} completeData={completeData} setCompleteData={setCompleteData} finalDataNeedToBeGenerated={finalDataNeedToBeGenerated} generateData={generateData} listOfDatsetFileAvailableForColumn={listOfDatsetFileAvailableForColumn} listOfDatasetSelected={listOfDatasetSelected} listOfFilesSelected={listOfFilesSelected} /> : <img src={settinggif} alt="" />}
-                                </span>}
-                                {index != 0 && <span style={{ border: index == indexShow && "1.5px solid #C09507" }} class={styles.vl} ></span>}
-                                {each?.availabeColumns?.length > 0 && <CardDetail completedJoinData={completedJoinData} setCompleteJoinData={setCompleteJoinData} setTotalCounter={setTotalCounter} orgList={orgList} completeData={completeData} setCompleteData={setCompleteData} data={each} index={index} />}
-                                {index != totalCounter && <span onMouseOver={() => handleMoreDataShow(index, true)} style={{ border: index == indexShow - 1 && "1.5px solid #C09507" }} class={styles.vl} ></span>}
-                            </span>
-                        }
-                    })} */}
                     {completeData?.length > 0 && completeData.map((each, index) => {
+                        console.log("EACH", each)
                         return <span style={{ position: "relative" }} key={index} >
                             {<CardDetail setIsAllConditionForSaveMet={setIsAllConditionForSaveMet} temporaryDeletedCards={temporaryDeletedCards} setTemporaryDeletedCards={setTemporaryDeletedCards} generateData={generateData} completedJoinData={completedJoinData} setCompleteJoinData={setCompleteJoinData} setTotalCounter={setTotalCounter} orgList={orgList} completeData={completeData} setCompleteData={setCompleteData} data={each} index={index} />}
                             {index < completeData.length - 1 && <span style={{ border: index == indexShow && "1.5px solid #C09507" }} class={styles.vl} ></span>}
                             {index < completeData.length - 1 &&
-                                <span span id='settingIconForHover' onClick={(e) => handleMoreDataShow(index, true, e)} style={{ display: "flex", justifyContent: "center", alignItems: "center", cursor: !show ? "pointer" : "", height: `${show && index == indexShow ? "350px" : "50px"}`, overflow: "hidden", width: `${show && index == indexShow ? "700px" : "50px"}`, margin: "auto", backgroundRepeat: "no-repeat", backgroundSize: "50px 50px", backgroundPosition: "center", }} className={index == indexShow ? styles.hoveredOne : styles.alwaysHave}>
-                                    {<span ><Join handleMoreDataShow={handleMoreDataShow} indexShow={indexShow} index={index} each={each} next={completeData[index + 1]} resetAll={resetAll} joinType={joinType} setJoinType={setJoinType} connectorData={connectorData} completeData={completeData} setCompleteData={setCompleteData} finalDataNeedToBeGenerated={finalDataNeedToBeGenerated} generateData={generateData} listOfDatsetFileAvailableForColumn={listOfDatsetFileAvailableForColumn} listOfDatasetSelected={listOfDatasetSelected} listOfFilesSelected={listOfFilesSelected} />
+                                <span span id='settingIconForHover' onClick={(e) => handleMoreDataShow(index, true, e)} style={{ display: "flex", justifyContent: "center", alignItems: "center", cursor: !show ? "pointer" : "", height: `${show && index == indexShow ? "400px" : "50px"}`, overflow: "hidden", width: `${(show && index == indexShow && value == "Join by") ? "700px" : (show && index == indexShow) ? "1000px" : "50px"}`, margin: "auto", backgroundRepeat: "no-repeat", backgroundSize: "50px 50px", backgroundPosition: "center", }} className={index == indexShow ? styles.hoveredOne : styles.alwaysHave}>
+                                    {<span ><Join value={value} setValue={setValue} result={each['result'] ? each['result'] : []} handleMoreDataShow={handleMoreDataShow} indexShow={indexShow} index={index} each={each} next={completeData[index + 1]} resetAll={resetAll} joinType={joinType} setJoinType={setJoinType} connectorData={connectorData} completeData={completeData} setCompleteData={setCompleteData} finalDataNeedToBeGenerated={finalDataNeedToBeGenerated} generateData={generateData} listOfDatsetFileAvailableForColumn={listOfDatsetFileAvailableForColumn} listOfDatasetSelected={listOfDatasetSelected} listOfFilesSelected={listOfFilesSelected} />
                                         {indexShow != index && <img className={styles.settingGif} src={settinggif} alt="" />}
                                     </span>}
                                 </span>}
-                            {index !== indexShow && index < completeData.length - 1 && <span style={{ position: "absolute", left: "40px", bottom: "23px", width: "514px", height: "112px", border: "1px solid #C09507", borderRadius: "10px", padding: "10px 20px" }}>
-                                <div style={{ textAlign: "left", marginBottom: "20px", fontWeight: "600" }}>Joined by</div>
-                                <div style={{ display: "flex", justifyContent: "left", alignItems: "center", gap: "50px", textAlign: "left" }}>
-                                    <span className={styles.detail_joins}>
-                                        <div > Left column </div>
-                                        <div>{each?.left_on?.length > 0 ? each?.left_on[0] : "Not selected"}</div>
-                                    </span>
-                                    <span className={styles.detail_joins}>
-                                        <div>Right column </div>
-                                        <div> {each?.right_on?.length > 0 ? each?.right_on[0] : "Not selected"}</div>
-                                    </span>
-                                    <span className={styles.detail_joins}>
-                                        <div> Join type </div>
-                                        <div> {each?.type ? each?.type : "Not selected"}</div>
-                                    </span>
+                            {index !== indexShow && index < completeData.length - 1 && <span className={styles.eachSideJoinData} style={{ position: "absolute", left: "40px", bottom: "23px", width: "514px", height: "112px", border: "1px solid #C09507", borderRadius: "10px", padding: "10px 20px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+                                <div style={{ width: "80%" }}>
+                                    <div style={{ textAlign: "left", marginBottom: "20px", fontWeight: "600" }}>Joined by <BorderColorIcon className={styles.edit_btn} onClick={(e) => handleMoreDataShow(index, true, e)} cursor="pointer" fontSize='large' /> </div>
+                                    <div style={{ display: "flex", justifyContent: "left", alignItems: "center", gap: "35px", textAlign: "left" }}>
+                                        <span className={styles.detail_joins}>
+                                            <div > Left column </div>
+                                            <div>{each?.left_on?.length > 0 ? toTitleCase(each?.left_on[0]) : "Not selected"}</div>
+                                        </span>
+                                        <span className={styles.detail_joins}>
+                                            <div>Right column </div>
+                                            <div> {each?.right_on?.length > 0 ? toTitleCase(each?.right_on[0]) : "Not selected"}</div>
+                                        </span>
+                                        <span className={styles.detail_joins}>
+                                            <div> Join type </div>
+                                            <div> {each?.type ? each?.type : "Not selected"}</div>
+                                        </span>
+                                    </div>
                                 </div>
+                                {/* <span className={styles.result_btn_shortcut_outer}> */}
+                                <Button onClick={(e) => {
+                                    setValue("Integrated data")
+                                    handleMoreDataShow(index, true, e, "table_result")
+                                }} className={styles.result_btn_shortcut} disabled={each["result"]?.length > 0 ? false : true}>
+                                    {console.log("each result", each["result"])}
+                                    <img style={{ cursor: "pointer", opacity: each["result"]?.length <= 0 ? 0.4 : 1 }} src={analytics} height="50px" width={"50px"} alt="" />
+                                </Button>
+                                {/* </span> */}
                             </span>}
                             {index !== indexShow && index < completeData.length - 1 && each.left_on?.length <= 0 && <span style={{ position: "absolute", right: "40px", bottom: "0px", width: "514px", height: "112px", borderRadius: "10px", padding: "10px 20px" }}>
                                 <Alert message="Please select join details to save the connector" type="error" />
                             </span>}
-                            {index < completeData.length - 1 && <span onMouseOver={(e) => handleMoreDataShow(index, true, e)} style={{ border: index == indexShow && "1.5px solid #C09507" }} class={styles.vl} ></span>}
+                            {index < completeData.length - 1 && <span style={{ border: index == indexShow && "1.5px solid #C09507" }} class={styles.vl} ></span>}
                         </span>
                     })}
-
-
                 </Col>
             </Row>
         </Container >
diff --git a/src/Components/Datasets/IntegrationDatasets/EachCardsResult/EachCardResult.jsx b/src/Components/Datasets/IntegrationDatasets/EachCardsResult/EachCardResult.jsx
new file mode 100644
index 000000000..295efcea4
--- /dev/null
+++ b/src/Components/Datasets/IntegrationDatasets/EachCardsResult/EachCardResult.jsx
@@ -0,0 +1,49 @@
+import { DataGrid } from '@mui/x-data-grid'
+import React, { useEffect, useState } from 'react'
+import { Col, Row } from 'react-bootstrap'
+
+const EachCardResult = (props) => {
+    const { result } = props
+    const [col, setCol] = useState([])
+    const [row, setRow] = useState([])
+    useEffect(() => {
+        if (result.length > 0) {
+            let val = []
+
+            for (let key in result[0]) {
+                let obj = { field: key, headerName: key, width: "150" }
+                val.push(obj)
+            }
+            let rowArr = []
+            for (let i = 0; i < result.length; i++) {
+                let obj1
+                if (result[i]["id"]) {
+                    obj1 = { ...result[i] }
+                    //console.log(obj1)
+                } else {
+                    //console.log(obj1)
+                    obj1 = { "id": i, ...result[i] }
+                }
+                rowArr.push(obj1)
+            }
+            //console.log(val, rowArr)
+            setCol([...val])
+            setRow([...rowArr])
+        }
+    }, [result,])
+    return (
+        <div style={{ height: 270, width: '100%', paddingBottom: 10, paddingTop: 10 }}>
+            <DataGrid
+                rows={row}
+                columns={col}
+                pageSize={5}
+                rowsPerPageOptions={[5]}
+                hideFooter
+
+            // components={{ NoRowsOverlay, NoResultsOverlay }}
+            />
+        </div>
+    )
+}
+
+export default EachCardResult
\ No newline at end of file
diff --git a/src/Components/Datasets/IntegrationDatasets/Join/Join.jsx b/src/Components/Datasets/IntegrationDatasets/Join/Join.jsx
index 74ecc7e7a..0be711451 100644
--- a/src/Components/Datasets/IntegrationDatasets/Join/Join.jsx
+++ b/src/Components/Datasets/IntegrationDatasets/Join/Join.jsx
@@ -20,15 +20,18 @@ import innerG from "../../../../Assets/Img/Join type/Color/inner.svg"
 import smallG from "../../../../Assets/Img/Join type/Color/Tick icon.svg"
 
 import CloseIcon from '@mui/icons-material/Close';
-import { Button } from 'antd';
+import { Button, Segmented } from 'antd';
+import EachCardResult from '../EachCardsResult/EachCardResult';
+import { downloadDocument } from './utils';
 const Join = (props) => {
-    const { handleMoreDataShow, indexShow, file_right, file_left, setCompleteJoinData, right_on, left_on, completedJoinData, type, left, right, index, each, resetAll, joinType, setJoinType, connectorData, setCompleteData, completeData, listOfDatsetFileAvailableForColumn, generateData } = props
+    const { value, setValue, handleMoreDataShow, indexShow, result, file_right, file_left, setCompleteJoinData, right_on, left_on, completedJoinData, type, left, right, index, each, resetAll, joinType, setJoinType, connectorData, setCompleteData, completeData, listOfDatsetFileAvailableForColumn, generateData } = props
     const [joinTypeArr, setJoinTypeArr] = useState([
         { name: "left", black: leftB, green: leftG },
         { name: "right", black: rightB, green: rightG },
         { name: "inner", black: innerB, green: innerG },
         { name: "outer", black: fullB, green: fullG },
     ])
+    console.log("RESULT OF EACH", result)
     const handleChangeJoin = (e, source) => {
         let arr = [...completeData]
         let obj1 = { ...each }
@@ -70,68 +73,66 @@ const Join = (props) => {
     }, [])
     return (
         index == indexShow && <span className='dataset_selector_in_integration' >
-            <Row>
+            <div style={{ display: "flex" }}>
+                <Segmented style={{ flex: 3.5 }} value={value} onChange={setValue} block options={["Join by", "Integrated data"]} />
+                <span style={{ cursor: "pointer", flex: 0.5, textAlign: "right" }} ><CloseIcon onClick={(e) => handleMoreDataShow(indexShow, false, e)} className='deleteicon' color='secondary' /></span>
+            </div>
+            {value == "Join by" && <Row>
                 <Col className={styles.select_dataset_logo} style={{ display: "flex", justifyContent: "space-between", padding: "10px 50px" }} lg={12} sm={12} sx={12}>
-                    <span >Join</span>
-                    <span style={{ cursor: "pointer" }} ><CloseIcon onClick={(e) => handleMoreDataShow(indexShow, false, e)} className='deleteicon' color='secondary' /></span>
+                    <span > {value == "Join by" ? "Join" : "Integrated data preview"}</span>
                 </Col>
-            </Row>
-            <Row style={{ justifyContent: "center" }}>
-                <Col lg={5} sm={12} >
-                    <FormControl variant="outlined" style={{ width: "100%" }}>
-                        <InputLabel id="demo-simple-select-standard-label">Primary dataset column name</InputLabel>
-                        {/* {console.log(each)} */}
-                        <Select
-                            labelId="primary_col_label_for_join"
-                            id="primary_col_select_for_join"
-                            value={each?.left_on ? each?.left_on[0] : ""}
-                            onChange={(e) => handleChangeJoin(e, "join1")}
-                            label="Primary dataset colounm name"
-                        // multiple
-                        >
-                            {index == 0 && each.columnsSelected?.map((eachFile, ind_) => {
-                                return <MenuItem key={ind_} value={eachFile + ""}>{eachFile}</MenuItem>
-                            })}
-                            {index != 0 && completeData[index - 1].next_left?.map((eachFile, ind_) => {
-                                return <MenuItem key={ind_} value={eachFile + ""}>{eachFile}</MenuItem>
-                            })}
-                        </Select>
-                    </FormControl>
-                    {/* </Col>
-                    </Row> */}
-                </Col>
-                <Col lg={1} sm={12} style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
-                    <DragHandleIcon />
-                </Col>
-                <Col lg={5} sm={12}>
-                    <FormControl variant="outlined" style={{ width: "100%" }}>
-                        <InputLabel id="secondary_col_label_for_join">Primary dataset column name</InputLabel>
-                        <Select
-                            labelId="demo-simple-select-standard-label"
-                            id="secondary_col_select_for_join"
-                            value={each?.right_on ? each?.right_on[0] : ""}
-                            onChange={(e) => handleChangeJoin(e, "join2")}
-                            label="Primary dataset colounm name"
-                        // multiple
-                        >
-                            {completeData[index + 1]?.columnsSelected?.map((eachFile, ind_) => {
-                                if (completeData[index + 1]?.availabeColumns.includes(eachFile)) {
-                                    return <MenuItem key={ind_} value={eachFile + ""}>{eachFile}</MenuItem>
-                                }
-                            })}
-                        </Select>
-                    </FormControl>
-
-                </Col>
-            </Row>
-            {/* <Col className={styles.select_dataset_logo} style={{ display: "flex", justifyContent: "left", padding: "0px 50px" }} lg={12} sm={12} sx={12}>
-                <span >Join type</span>
-            </Col> */}
+            </Row>}
 
-            {
-                completeData.length >= 2 && <Row style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+            {value == "Join by" ? <>
+                <Row style={{ justifyContent: "center", width: "650px" }}>
+                    <Col lg={5} sm={12} >
+                        <FormControl variant="outlined" style={{ width: "100%" }}>
+                            <InputLabel id="demo-simple-select-standard-label">Primary dataset column name</InputLabel>
+                            {/* {console.log(each)} */}
+                            <Select
+                                labelId="primary_col_label_for_join"
+                                id="primary_col_select_for_join"
+                                value={each?.left_on?.length > 0 ? each?.left_on[0] : ""}
+                                onChange={(e) => handleChangeJoin(e, "join1")}
+                                label="Primary dataset colounm name"
+                            // multiple
+                            >
+                                {index == 0 && each.columnsSelected?.map((eachFile, ind_) => {
+                                    return <MenuItem key={ind_} value={eachFile + ""}>{eachFile}</MenuItem>
+                                })}
+                                {index != 0 && completeData[index - 1].next_left?.map((eachFile, ind_) => {
+                                    return <MenuItem key={ind_} value={eachFile + ""}>{eachFile}</MenuItem>
+                                })}
+                            </Select>
+                        </FormControl>
+                        {/* </Col>
+                    </Row> */}
+                    </Col>
+                    <Col lg={1} sm={12} style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
+                        <DragHandleIcon />
+                    </Col>
+                    <Col lg={5} sm={12}>
+                        <FormControl variant="outlined" style={{ width: "100%" }}>
+                            <InputLabel id="secondary_col_label_for_join">Primary dataset column name</InputLabel>
+                            <Select
+                                labelId="demo-simple-select-standard-label"
+                                id="secondary_col_select_for_join"
+                                value={each?.right_on ? each?.right_on[0] : ""}
+                                onChange={(e) => handleChangeJoin(e, "join2")}
+                                label="Primary dataset colounm name"
+                            // multiple
+                            >
+                                {completeData[index + 1]?.columnsSelected?.map((eachFile, ind_) => {
+                                    if (completeData[index + 1]?.availabeColumns.includes(eachFile)) {
+                                        return <MenuItem key={ind_} value={eachFile + ""}>{eachFile}</MenuItem>
+                                    }
+                                })}
+                            </Select>
+                        </FormControl>
+                    </Col>
+                </Row>
+                {completeData.length >= 2 && <Row style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                     <Col lg={12}>
-
                         {joinTypeArr.map((eachT, ind) => {
                             return <span key={ind} onClick={() => selectThisType(eachT.name)} className={each.type == eachT.name ? styles.stypeMainBox : styles.typeMainBox}>
                                 <div className={styles.selectedTypeMainBox}> {each.type == eachT.name && <img height={"20px"} width="20px" src={smallG} alt="ticked" />} </div>
@@ -139,18 +140,27 @@ const Join = (props) => {
                                 <span className={styles.labelTypeJoin}> {eachT.name}</span>
                             </span>
                         })}
-                    </Col>
-                    <Col lg={12} sm={12} className={styles.generate_btn_parent_col}>
-                        <Row style={{ textAlign: "center" }}>
-                            <Col lg={12}>
-                                <Button id='generate_button' disabled={each.type && each?.right_on?.length > 0 && each?.left_on?.length > 0 ? false : true} className={(each.type && each?.right_on?.length > 0 && each?.left_on?.length > 0) ? styles.generate_data_btn : styles.generate_data_btn_dis} onClick={(e) => { generateData(index, "integrate") }}>
-                                    Preview
-                                </Button>
-                            </Col>
-                        </Row>
-                    </Col>
-                </Row>
-            }
+                    </Col> </Row>
+                }
+
+            </> : <Row style={{ justifyContent: "center", width: "900px" }}>
+                <Col lg={12} sm={12} >
+                    <EachCardResult result={result} />
+                </Col>
+            </Row>}
+            <Row style={{ textAlign: "center" }}>
+                <Col lg={12}>
+                    {value == "Join by" ? <Button id='generate_button' disabled={each.type && each?.right_on?.length && connectorData.name && connectorData.desc && each?.left_on?.length > 0 ? false : true} className={(each.type && each?.right_on?.length > 0 && each?.left_on?.length > 0) ? styles.generate_data_btn : styles.generate_data_btn_dis} onClick={(e) => { generateData(index, "integrate") }}>
+                        Preview
+                    </Button> : <Button id='generate_button' disabled={each.type && each?.right_on?.length > 0 && each?.left_on?.length > 0 && result?.length ? false : true} className={(each.type && each?.right_on?.length > 0 && each?.left_on?.length > 0) ? styles.generate_data_btn : styles.generate_data_btn_dis} onClick={(e) => {
+                        downloadDocument(result)
+                        handleMoreDataShow(indexShow, false, e)
+                    }}>
+                        Download
+                    </Button>}
+                </Col>
+            </Row>
+
         </span >
     )
 }
diff --git a/src/Components/Datasets/IntegrationDatasets/Join/utils.js b/src/Components/Datasets/IntegrationDatasets/Join/utils.js
new file mode 100644
index 000000000..c011aa90b
--- /dev/null
+++ b/src/Components/Datasets/IntegrationDatasets/Join/utils.js
@@ -0,0 +1,23 @@
+const converter = require('json-2-csv')
+
+//Download functionality
+export const downloadDocument = (dataToDownload) => { // dataToDownload is the parsed array of object 
+    converter.json2csv(dataToDownload, async (err, csv) => {
+        if (err) {
+            throw err
+        }
+        // print CSV string
+        download(csv)
+    })
+}
+const download = (data) => {
+    const blob = new Blob([data], { type: 'text/csv' })
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.setAttribute('hidden', '')
+    a.setAttribute('href', url)
+    a.setAttribute('download', "Dataset.csv");
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+}
diff --git a/src/Components/Datasets/IntegrationDatasets/Preview/Preview.jsx b/src/Components/Datasets/IntegrationDatasets/Preview/Preview.jsx
index 03a94f802..56c2c9e00 100644
--- a/src/Components/Datasets/IntegrationDatasets/Preview/Preview.jsx
+++ b/src/Components/Datasets/IntegrationDatasets/Preview/Preview.jsx
@@ -73,7 +73,7 @@ const Preview = (props) => {
         <Container style={{ background: "rgb(252, 252, 252)" }} className='dataset_selector_in_integration'>
             <Row id='previewTable' className={styles.select_dataset_logo}>
                 <Col lg={12} sm={12} sx={12}>
-                    Preview
+                    Final preview
                 </Col>
             </Row>
             <Row style={{ marginBottom: "50px" }}>
@@ -151,7 +151,7 @@ const Preview = (props) => {
                         }} className={styles.save_btn}>Save connector</Button>}
                     {/* </Col> */}
                     {/* <Col lg={2}> */}
-                    {true &&
+                    {isEditModeOn &&
                         <Popconfirm
                             title="Delete the connector"
                             description="Are you sure to delete this connector?"
diff --git a/src/Components/Datasets/IntegrationDatasets/dataset_integration.module.css b/src/Components/Datasets/IntegrationDatasets/dataset_integration.module.css
index 2bfd73ce0..373819302 100644
--- a/src/Components/Datasets/IntegrationDatasets/dataset_integration.module.css
+++ b/src/Components/Datasets/IntegrationDatasets/dataset_integration.module.css
@@ -478,4 +478,64 @@
     font-weight: 400 !important;
     margin-left: 20px !important;
     font-size: 14px !important;
+}
+
+.eachSideJoinData {
+    background: #636363 !important;
+    /* fallback for old browsers */
+    background: -webkit-linear-gradient(to right, #ab84057f, white) !important;
+    background: -webkit-linear-gradient(to bottom, #ab84057f, white) !important;
+    /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to right, #ab84057f, white) !important;
+    background: linear-gradient(to bottom, #ab84057f, white);
+    transition: all 2s cubic-bezier(1, 0, 0, 1) ease-in-out;
+}
+
+.edit_btn {
+    background: white;
+    padding: 5px;
+    border-radius: 50%;
+    transition: all 1s;
+}
+
+.edit_btn:hover {
+    background: #C09507;
+    padding: 4px;
+    color: white !important;
+}
+
+.result_btn_shortcut_outer::before {
+    height: auto;
+    top: 0;
+    right: 0;
+    content: "";
+    position: absolute;
+    width: 50px;
+    height: 150px;
+    background: #40E0D0;
+    background: -webkit-linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
+    background: linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
+    animation: glowing01 5s linear infinite;
+    transform-origin: center;
+    animation: glowing 5s linear infinite;
+}
+
+.result_btn_shortcut {
+    height: auto;
+}
+
+.result_btn_shortcut:hover {
+    background: #C09507;
+    outline: none !important;
+    border: 1px solid #C09507 !important;
+}
+
+@keyframes glowing {
+    0% {
+        transform: rotate(0);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
 }
\ No newline at end of file
diff --git a/src/Components/IntegrationConnectors/ConnectorCard.jsx b/src/Components/IntegrationConnectors/ConnectorCard.jsx
index b7da1cb79..c7dbdecea 100644
--- a/src/Components/IntegrationConnectors/ConnectorCard.jsx
+++ b/src/Components/IntegrationConnectors/ConnectorCard.jsx
@@ -7,6 +7,7 @@ import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
 import { useHistory } from "react-router-dom";
 import { dateTimeFormat } from "../../Utils/Common";
+import "./cards.css"
 
 const useStyles = {
   marginrowtop: { "margin-top": "30px" },
diff --git a/src/Components/IntegrationConnectors/ConnectorsList.jsx b/src/Components/IntegrationConnectors/ConnectorsList.jsx
index 569cd79d2..8a7a091c3 100644
--- a/src/Components/IntegrationConnectors/ConnectorsList.jsx
+++ b/src/Components/IntegrationConnectors/ConnectorsList.jsx
@@ -12,6 +12,7 @@ import UrlConstant from "../../Constants/UrlConstants";
 import ViewModuleIcon from '@mui/icons-material/ViewModule';
 import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted';
 import NoDataAvailable from "../Dashboard/NoDataAvailable/NoDataAvailable";
+import "./cards.css"
 
 export default function ConnectorsList(props) {
   const { setConnectorTimeData, setIsEditModeOn, setConnectorIdForView, setIsDatasetIntegrationListModeOn } = props
@@ -125,17 +126,18 @@ export default function ConnectorsList(props) {
     >
       {isLoader ? <Loader /> : ""}
       <Row style={useStyles.marginrowtop50}>
-        <Col xs={12} sm={12} md={6} lg={6} style={{ "text-align": "left" }}>
+        <Col xs={12} sm={12} md={6} lg={10} style={{ "text-align": "left" }}>
           <span className="mainheading">
             {"List of Connectors"}
           </span>
         </Col>
-        <Col xs={12} sm={12} md={6} lg={6} style={{ textAlign: "right" }}>
+        <Col xs={12} sm={12} md={6} lg={2} style={{ textAlign: "right" }}>
           <Button
             //  Button should render to add new connector component when click
             onClick={() => setIsDatasetIntegrationListModeOn(false)}
             variant="outlined"
             style={useStyles.addButton}
+          // class="button-87" role="button"
           >
             + New connector
           </Button>
diff --git a/src/Components/IntegrationConnectors/cards.css b/src/Components/IntegrationConnectors/cards.css
new file mode 100644
index 000000000..9d907ff3e
--- /dev/null
+++ b/src/Components/IntegrationConnectors/cards.css
@@ -0,0 +1,34 @@
+/* CSS */
+.button-87 {
+    /* margin: 10px; */
+    padding: 10px 30px;
+    text-align: center;
+    transition: 0.5s;
+    background-size: 200% auto;
+    color: #534104;
+    border-radius: 10px;
+    display: block;
+    border: 0px;
+    font-weight: 700;
+    box-shadow: 0px 0px 14px -7px #d69437e9;
+    background-image: linear-gradient(45deg, #FFDB64 0%, #d69437e9 51%, #FFDB64 100%);
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    touch-action: manipulation;
+    text-transform: capitalize;
+    width: 200px;
+    height: 50px;
+    font-size: 16px;
+}
+
+.button-87:hover {
+    background-position: right center;
+    /* change the direction of the change here */
+    color: #fff;
+    text-decoration: none;
+}
+
+.button-87:active {
+    transform: scale(0.95);
+}
\ No newline at end of file
diff --git a/src/Components/Participants/ParticipantsCards.js b/src/Components/Participants/ParticipantsCards.js
index c781d8878..1dce18a40 100644
--- a/src/Components/Participants/ParticipantsCards.js
+++ b/src/Components/Participants/ParticipantsCards.js
@@ -17,6 +17,7 @@ import THEME_COLORS from "../../Constants/ColorConstants";
 import UrlConstants from "../../Constants/UrlConstants";
 import { useHistory } from "react-router-dom";
 import { Tooltip, Zoom } from "@mui/material";
+import "./participantsCards.css"
 
 const useStyles = {
   btncolor: {
@@ -107,6 +108,7 @@ export default function ParticipantsCards(props) {
       >
         <div className="cardheaderTitlespecifier text-truncate">
           <CardHeader
+          className="dataset-card-header"
             avatar={
               props.profilepic ? (
                 <Avatar
diff --git a/src/Components/Participants/participantsCards.css b/src/Components/Participants/participantsCards.css
new file mode 100644
index 000000000..c0e6c7d0e
--- /dev/null
+++ b/src/Components/Participants/participantsCards.css
@@ -0,0 +1,5 @@
+
+.dataset-card-header :nth-child(2){
+    display: flex;
+    flex-direction: column;
+}
diff --git a/src/Components/Standardization/StandardizationInOnbording.js b/src/Components/Standardization/StandardizationInOnbording.js
index e3a9acb9e..74f9feac5 100644
--- a/src/Components/Standardization/StandardizationInOnbording.js
+++ b/src/Components/Standardization/StandardizationInOnbording.js
@@ -38,8 +38,8 @@ const StandardizationInOnbord = (props) => {
   const [errorMessages, setErrorMessage] = useState("");
   const [saveButtonEnabled, setSaveButtonEnabled] = useState(false)
   const [editCategoryTitle, setEditCategoryTitle] = useState([])
-  const [datapointNameError,setDatapointNameError] = useState("")
-  const [accordionDatapointNameError,setAccordionDatapointNameError] = useState([])
+  const [datapointNameError, setDatapointNameError] = useState("")
+  const [accordionDatapointNameError, setAccordionDatapointNameError] = useState([])
 
   const history = useHistory();
 
@@ -54,16 +54,16 @@ const StandardizationInOnbord = (props) => {
 
   console.log("all datapoints", allDatapoints);
 
-  const handleDatapointCategoryName = (e) =>{
+  const handleDatapointCategoryName = (e) => {
 
     setDatapointNameError("")
-    if(e.target.value.length<51 && e.target.value.match(RegexConstants.NEW_NAME_REGEX)) setDatapointName(e.target.value)
+    if (e.target.value.length < 51) setDatapointName(e.target.value)
   }
 
-  const handleDatapointCategoryDescription = (e) =>{
+  const handleDatapointCategoryDescription = (e) => {
+
+    if (e.target.value.length < 251) setDatapointDes(e.target.value)
 
-    if(e.target.value.length<251) setDatapointDes(e.target.value)
-    
   }
 
   const handleNameField = (e) => {
@@ -78,25 +78,25 @@ const StandardizationInOnbord = (props) => {
   };
 
   const handleAddDatapoint = () => {
-      if(!datapointName || !datapointDes ){
+    if (!datapointName || !datapointDes) {
+      return
+    }
+    setSaveButtonEnabled(true)
+    let tmpAllDatapoints = [...allDatapoints];
+    let newDatapoint = {
+      datapoint_category: datapointName,
+      datapoint_description: datapointDes,
+    };
+    // Check if category name already exist or not
+    let returnFromFuntion = false
+    tmpAllDatapoints.forEach((category, index) => {
+      if (category.datapoint_category === datapointName) {
+        setDatapointNameError("Category already exists!")
+        returnFromFuntion = true;
         return
       }
-      setSaveButtonEnabled(true)
-      let tmpAllDatapoints = [...allDatapoints];
-      let newDatapoint = {
-        datapoint_category: datapointName,
-        datapoint_description: datapointDes,
-      };
-      // Check if category name already exist or not
-      let returnFromFuntion = false
-      tmpAllDatapoints.forEach((category,index)=>{
-        if(category.datapoint_category === datapointName) {
-          setDatapointNameError("Category already exists!")
-          returnFromFuntion = true;
-          return
-        }
-      })
-      if(returnFromFuntion) return
+    })
+    if (returnFromFuntion) return
 
 
     let tmpAllAttributes = { ...allAttributes };
@@ -113,57 +113,61 @@ const StandardizationInOnbord = (props) => {
     setAllAttributes({ ...tmpAllAttributes });
     setAllAttributesDes({ ...tmpAllAttributesDes });
 
-    console.log('tmpAllDatapoints in add',tmpAllDatapoints)
+    console.log('tmpAllDatapoints in add', tmpAllDatapoints)
 
     tmpAllDatapoints.push(newDatapoint);
     setAllDataPoints(tmpAllDatapoints);
     setDatapointName("");
     setDatapointDes("");
   };
-    const handleUpdateCategoryName = (index,newValue) =>{
+  const handleUpdateCategoryName = (index, newValue) => {
     setSaveButtonEnabled(true)
 
     let tmpAllDatapoints = [...allDatapoints];
     console.log('error array', accordionDatapointNameError)
 
-      //Check if category name already exist or not
-      // let returnFromFuntion = false
-      // tmpAllDatapoints.forEach((category)=>{
-      //   if(category.datapoint_category === newValue) {
-      //     let tmpDatapointNameError = [...accordionDatapointNameError]
-        //tmpDatapointNameError[index] = ` ${newValue} Category already exists!`
-      //     setAccordionDatapointNameError(tmpDatapointNameError)
-      //     returnFromFuntion = true;
-      //     return
-      //   }
-      // })
-      // if(returnFromFuntion) return
-      // let tmpDatapointNameError = [...accordionDatapointNameError]
-      //     tmpDatapointNameError[index] = ""
-      //     setAccordionDatapointNameError(tmpDatapointNameError)
-
-    tmpAllDatapoints[index].datapoint_category = newValue;
-    setAllDataPoints(tmpAllDatapoints);
+    //Check if category name already exist or not
+    // let returnFromFuntion = false
+    // tmpAllDatapoints.forEach((category)=>{
+    //   if(category.datapoint_category === newValue) {
+    //     let tmpDatapointNameError = [...accordionDatapointNameError]
+    //tmpDatapointNameError[index] = ` ${newValue} Category already exists!`
+    //     setAccordionDatapointNameError(tmpDatapointNameError)
+    //     returnFromFuntion = true;
+    //     return
+    //   }
+    // })
+    // if(returnFromFuntion) return
+    // let tmpDatapointNameError = [...accordionDatapointNameError]
+    //     tmpDatapointNameError[index] = ""
+    //     setAccordionDatapointNameError(tmpDatapointNameError)
+    if (newValue.length < 51) {
+      tmpAllDatapoints[index].datapoint_category = newValue;
+      setAllDataPoints(tmpAllDatapoints);
+    } else {
+      return
+    }
+
   }
   const handleNameExistsUpdate = (index, newValue) => {
     let tmpAllDatapoints = [...allDatapoints];
     let newCategoryName = newValue.trim();
-  
+
     // Check if category name already exists or not
     let categoryAlreadyExists = tmpAllDatapoints.some((category, i) => {
       return i !== index && category.datapoint_category === newCategoryName;
     });
-  
+
     if (categoryAlreadyExists) {
       let errorofnewValue = [...accordionDatapointNameError];
       errorofnewValue[index] = `"${newCategoryName}" is already taken. Please choose a different name.`;
       setAccordionDatapointNameError(errorofnewValue);
-      
-    }else if (newCategoryName === ""){
+
+    } else if (newCategoryName === "") {
       let errorofnewValue = [...accordionDatapointNameError]
       errorofnewValue[index] = "This field may not be blank"
       setAccordionDatapointNameError(errorofnewValue)
-      
+
     } else {
       let tmpDatapointNameError = [...accordionDatapointNameError];
       tmpDatapointNameError[index] = "";
@@ -176,15 +180,15 @@ const StandardizationInOnbord = (props) => {
 
     }
   };
-  
+
 
   const hanldeAttributeInputChange = (
     index,
     allAttributesArrIndex,
     newValue
   ) => {
-    
-    if(newValue.length>=251 || !newValue.match(RegexConstants.DATAPOINT_ATTRIBUTE_REGEX)){
+
+    if (newValue.length >= 251) {
       return
     }
     setSaveButtonEnabled(true)
@@ -201,10 +205,10 @@ const StandardizationInOnbord = (props) => {
     newValue
   ) => {
 
-    if(newValue.length>=251){
+    if (newValue.length >= 251) {
       return
     }
-    if(newValue == " "){
+    if (newValue == " ") {
       newValue.replace("")
     }
     setSaveButtonEnabled(true)
@@ -219,8 +223,8 @@ const StandardizationInOnbord = (props) => {
 
   const handleAddDatapointAttribute = (index) => {
 
-    if(!allAttributes[index][0] || !allAttributesDes[index][0]){
-        return
+    if (!allAttributes[index][0] || !allAttributesDes[index][0]) {
+      return
     }
     setSaveButtonEnabled(true)
 
@@ -252,8 +256,8 @@ const StandardizationInOnbord = (props) => {
       let tmpAllDatapoints = [...allDatapoints];
       tmpAllDatapoints.splice(index, 1);
       setAllDataPoints(tmpAllDatapoints);
-      
-      let tmpAllAttributes = {...allAttributes};
+
+      let tmpAllAttributes = { ...allAttributes };
       tmpAllAttributes[index] = []
       setAllAttributes(tmpAllAttributes)
       success("Category deleted successfully.", "success");
@@ -281,8 +285,8 @@ const StandardizationInOnbord = (props) => {
     let url = isOnborading
       ? UrlConstant.base_url + UrlConstant.standardization_post_data
       : inSettings
-      ? UrlConstant.base_url + UrlConstant.standardization_update_data
-      : UrlConstant.base_url + UrlConstant.standardization_post_data;
+        ? UrlConstant.base_url + UrlConstant.standardization_update_data
+        : UrlConstant.base_url + UrlConstant.standardization_post_data;
 
     setIsLoading(true);
     HTTPService(method, url, payload, false, true, isOnborading ? isaccesstoken : false)
@@ -303,7 +307,7 @@ const StandardizationInOnbord = (props) => {
             showBrandingScreen();
           }
           else if (inSettings) {
-          getStandardiziedTemplate()
+            getStandardiziedTemplate()
           }
         }
       })
@@ -358,7 +362,7 @@ const StandardizationInOnbord = (props) => {
           });
           setAllAttributes(tmp);
           setAllAttributesDes(tmpDes);
-          console.log("tmp in get call attributes", tmp,tmpDes, allAttributes);
+          console.log("tmp in get call attributes", tmp, tmpDes, allAttributes);
         }
       })
       .catch((e) => {
@@ -400,9 +404,9 @@ const StandardizationInOnbord = (props) => {
       .then((response) => {
         setIsLoading(false);
         console.log("response", response);
-        let tmpAllAttributes = {...allAttributes};
-      tmpAllAttributes[index] = []
-      setAllAttributes(tmpAllAttributes)
+        let tmpAllAttributes = { ...allAttributes };
+        tmpAllAttributes[index] = []
+        setAllAttributes(tmpAllAttributes)
         success("Category deleted successfully.", "success");
 
         let tmpAllDatapoints = [...allDatapoints];
@@ -477,7 +481,7 @@ const StandardizationInOnbord = (props) => {
         </div>
         <div className="data-point-input-box-container">
           <TextField
-          required
+            required
             value={datapointName}
             onChange={(e) => handleDatapointCategoryName(e)}
             onKeyDown={handleNameField}
@@ -486,11 +490,11 @@ const StandardizationInOnbord = (props) => {
             id="datapoint-name-input-box-id"
             label="Datapoint category name"
             variant="outlined"
-            error={datapointNameError ? datapointNameError : "" }
-            helperText={datapointNameError ? datapointNameError : "" }
+            error={datapointNameError ? datapointNameError : ""}
+            helperText={datapointNameError ? datapointNameError : ""}
           />
           <TextField
-          required
+            required
             value={datapointDes}
             onChange={(e) => handleDatapointCategoryDescription(e)}
             onKeyDown={handledescriptionKeydowndes}
@@ -509,7 +513,7 @@ const StandardizationInOnbord = (props) => {
             className="datapoint-add-button"
             id="add-datapoint-button"
             onClick={handleAddDatapoint}
-            disabled={!datapointName || !datapointDes }
+            disabled={!datapointName || !datapointDes}
           >
             Add
           </Button>
@@ -537,55 +541,55 @@ const StandardizationInOnbord = (props) => {
                     </Typography> */}
 
                     {
-                      editCategoryTitle[index] ? 
-                      <TextField
-                      value={item.datapoint_category}
-                      required
-                      onChange={(e) => handleUpdateCategoryName(index,e.target.value,e)}
-                      inputProps={{ maxLength: 250 }}
-                      className="datapoint-name-input-box"
-                      id="datapoint-name-input-box-id"
-                      label="Datapoint category name"
-                      variant="outlined"
-                      helperText={accordionDatapointNameError[index] ? accordionDatapointNameError[index] : accordionDatapointNameError[index]}
-                      error={accordionDatapointNameError[index] ? accordionDatapointNameError[index] : accordionDatapointNameError[index]}
+                      editCategoryTitle[index] ?
+                        <TextField
+                          value={item.datapoint_category}
+                          required
+                          onChange={(e) => handleUpdateCategoryName(index, e.target.value, e)}
+                          inputProps={{ maxLength: 250 }}
+                          className="datapoint-name-input-box"
+                          id="datapoint-name-input-box-id"
+                          label="Datapoint category name"
+                          variant="outlined"
+                          helperText={accordionDatapointNameError[index] ? accordionDatapointNameError[index] : accordionDatapointNameError[index]}
+                          error={accordionDatapointNameError[index] ? accordionDatapointNameError[index] : accordionDatapointNameError[index]}
                         />
-                      :
-                      <div >
+                        :
+                        <div >
 
-                      <Typography  className="accordion-title" variant="h5">
-                      {item.datapoint_category}
-                    </Typography>
-                      </div>
+                          <Typography className="accordion-title" variant="h5">
+                            {item.datapoint_category}
+                          </Typography>
+                        </div>
                     }{
-                      editCategoryTitle[index]  ?
-                      <IconButton>
-                        <Button onClick={() => handleNameExistsUpdate(index, item.datapoint_category)}
-                          // this funtion will make a particular index of editCategoryTitle array false       
-                          className="update-category-button" >Update</Button>
-                      </IconButton>
-                    : 
-                    null
+                      editCategoryTitle[index] ?
+                        <IconButton>
+                          <Button onClick={() => handleNameExistsUpdate(index, item.datapoint_category)}
+                            // this funtion will make a particular index of editCategoryTitle array false       
+                            className="update-category-button" >Update</Button>
+                        </IconButton>
+                        :
+                        null
                     }
                     {/* <div> */}
                     <IconButton onClick={(e) => {
-                         // this funtion will make a particular index of editCategoryTitle array true 
-                         e.stopPropagation();
-                         let tmp = [...editCategoryTitle]
-                         tmp[index] = true
-                         console.log('edit title', tmp, editCategoryTitle)
-                         setEditCategoryTitle(tmp)
+                      // this funtion will make a particular index of editCategoryTitle array true 
+                      e.stopPropagation();
+                      let tmp = [...editCategoryTitle]
+                      tmp[index] = true
+                      console.log('edit title', tmp, editCategoryTitle)
+                      setEditCategoryTitle(tmp)
                     }}>
-                      <EditIcon/>
+                      <EditIcon />
                     </IconButton>
-                      <IconButton
-                        onClick={(e) =>{
+                    <IconButton
+                      onClick={(e) => {
                         handleDatapointCategoryDelete(index)
                         e.stopPropagation();
-                        }}
-                      >
-                        <DeleteOutlineIcon />
-                      </IconButton>
+                      }}
+                    >
+                      <DeleteOutlineIcon />
+                    </IconButton>
                     {/* </div> */}
                   </AccordionSummary>
                   <AccordionDetails>
@@ -594,7 +598,7 @@ const StandardizationInOnbord = (props) => {
                       <p className="standardization-accordion-description">{item.datapoint_description}</p>
                       <div>
                         <TextField
-                        required
+                          required
                           className="datapoint-attribute-input-box"
                           id="datapoint-attribute-input-box-id"
                           label="Datapoint attributes"
@@ -606,7 +610,7 @@ const StandardizationInOnbord = (props) => {
                           inputProps={{ maxLength: 250 }}
                         />
                         <TextField
-                        required
+                          required
                           className="datapoint-attribute-input-box"
                           id="datapoint-attribute-input-box-id"
                           label="Datapoint attributes description"
@@ -639,7 +643,7 @@ const StandardizationInOnbord = (props) => {
                               fill="white"
                               stroke="#D5DADE"
                             />
-                            <AddIcon id="add-attribute-icon-id" fontSize="small"/>
+                            <AddIcon id="add-attribute-icon-id" fontSize="small" />
                             {/* <g clip-path="url(#clip0_651_27789)">
                               <path
                                 d="M31 25H25V31H23V25H17V23H23V17H25V23H31V25Z"
@@ -661,7 +665,7 @@ const StandardizationInOnbord = (props) => {
                       </div>
                       <div>
                         {allAttributes?.[index]?.map((inputValue, arrIndex) => {
-                            console.log('in category map ',allAttributesDes?.[index]?.[arrIndex], allAttributesDes?.[index])
+                          console.log('in category map ', allAttributesDes?.[index]?.[arrIndex], allAttributesDes?.[index])
                           return (
                             <>
                               {arrIndex != 0 ? (
@@ -669,20 +673,20 @@ const StandardizationInOnbord = (props) => {
                                   InputProps={{
                                     endAdornment: (
                                       <>
-                                      <Tooltip title={allAttributesDes?.[index]?.[arrIndex]}>
-                                      <InfoIcon/>
-                                      </Tooltip>
-                                      <IconButton
-                                        onClick={(e) =>
+                                        <Tooltip title={allAttributesDes?.[index]?.[arrIndex]}>
+                                          <InfoIcon />
+                                        </Tooltip>
+                                        <IconButton
+                                          onClick={(e) =>
                                             handleDatapointAtticuteDelete(
-                                                index,
-                                                arrIndex
-                                                )
-                                            }
-                                            >
-                                        <DeleteOutlineIcon />
-                                      </IconButton>
-                                          </>
+                                              index,
+                                              arrIndex
+                                            )
+                                          }
+                                        >
+                                          <DeleteOutlineIcon />
+                                        </IconButton>
+                                      </>
                                       // </span>
                                     ),
                                   }}
@@ -691,9 +695,9 @@ const StandardizationInOnbord = (props) => {
                                   label="Datapoint attributes"
                                   variant="outlined"
                                   value={inputValue}
-                                  //   onChange={(e) =>
-                                  //     // hanldeAttributeInputChange(index, 0, e.target.value)
-                                  //   }
+                                //   onChange={(e) =>
+                                //     // hanldeAttributeInputChange(index, 0, e.target.value)
+                                //   }
                                 />
                               ) : (
                                 ""
diff --git a/src/Constants/RegexConstants.js b/src/Constants/RegexConstants.js
index ed1b5dcb2..ad5fa4f4d 100644
--- a/src/Constants/RegexConstants.js
+++ b/src/Constants/RegexConstants.js
@@ -23,7 +23,7 @@ const RegexConstants = {
   city_name: /^$|^[a-zA-Z][a-zA-Z ]*$/,
   address: /^$|^[a-zA-Z0-9#,][a-zA-Z0-9#, ]*$/,
   NEW_NAME_REGEX: /^([a-zA-Z0-9]+\s?)*$/,   //allows only one space and no spl characters allowed
-  DATAPOINT_ATTRIBUTE_REGEX: /^([a-zA-Z0-9_]+)*$/ //   accepts only 1 spl charecter "_" and no spl characters and no space
+  DATAPOINT_ATTRIBUTE_REGEX:  /^$|^[a-zA-Z0-9][a-zA-Z0-9_ ]*$/,//   accepts only 1 spl charecter "_" and no spl characters and no space
 };
 
 export default RegexConstants;