diff --git a/src/main/controllers/dataset_exists.ts b/src/main/controllers/dataset_exists.ts
new file mode 100644
index 00000000..039979f8
--- /dev/null
+++ b/src/main/controllers/dataset_exists.ts
@@ -0,0 +1,30 @@
+import { NextFunction, Request, Response } from "express";
+import { fetchDataset, fetchDraftDataset } from "../services/dataset";
+import _ from "lodash";
+import { getDiff } from "json-difference";
+
+export default {
+    name: 'dataset:exists',
+    handler: () => async (request: Request, response: Response, next: NextFunction) => {
+        const { datasetId } = request.params;
+        try {
+            const liveDataset = await Promise.allSettled([fetchDataset({ datasetId })]) 
+            if(liveDataset[0].status == 'fulfilled') {
+                return response.status(200).json(liveDataset[0].value)
+            }
+            
+            const draftDataset = await Promise.allSettled([fetchDraftDataset({ datasetId })]) 
+            if(draftDataset[0].status == 'fulfilled') {
+                return response.status(200).json(draftDataset[0].value)
+            }
+
+            if(draftDataset[0].status == 'rejected') { 
+                return response.status(_.get(draftDataset[0], ['reason', 'status'])).json(_.get(draftDataset[0], ['reason', 'response', 'data']))
+            }
+            
+            
+        } catch (error) {
+            next(error);
+        }
+    }
+};
diff --git a/src/main/resources/routesConfig.ts b/src/main/resources/routesConfig.ts
index 571f8cdb..4ac8343a 100644
--- a/src/main/resources/routesConfig.ts
+++ b/src/main/resources/routesConfig.ts
@@ -163,6 +163,14 @@ export default [
                     ensureLoggedInMiddleware,
                     controllers.get('dataset:diff')?.handler({})
                 ]
+            },
+            {
+                path: 'exists/:datasetId',
+                method: 'GET',
+                middlewares: [
+                    ensureLoggedInMiddleware,
+                    controllers.get('dataset:exists')?.handler({})
+                ]
             }
         ]
     },
diff --git a/web-console-v2/src/App.tsx b/web-console-v2/src/App.tsx
index 495cf0f0..a6cc303d 100644
--- a/web-console-v2/src/App.tsx
+++ b/web-console-v2/src/App.tsx
@@ -5,21 +5,19 @@ import SideBar from 'components/Sidebar/Sidebar';
 import Navbar from 'components/Navbar/Navbar';
 import _ from 'lodash';
 import { AlertContextProvider } from 'contexts/AlertContextProvider';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
 import AlertComponent from 'components/@extended/CustomAlert';
 import AppRouter from 'router';
 import styles from 'App.module.css';
 import { queryClient } from 'queryClient';
 import Locales from 'components/Locales';
 import { fetchSystemSettings, getBaseURL } from 'services/configData';
-import Loadable from 'pages/auth/components/Loadable';
-const Login = Loadable(lazy(() => import('pages/auth/Login')));
 
 const useSidebarToggle = () => {
 
     const sidebarExpandValue = localStorage.getItem('sidebarExpand')
     const [isSidebarExpanded, setSidebarExpanded] = useState<boolean>(
-        _.isEqual(localStorage.getItem('sidebarExpand'), "true")
+        _.isEqual(localStorage.getItem('sidebarExpand'), "true") && window.location.pathname !== '/console/login'
     );
 
     const toggleSidebar = useCallback(() => {
@@ -42,15 +40,10 @@ const App: FC = () => {
         fetchSystemSettings();
     }, []);
 
-
-      
     return (
         <QueryClientProvider client={queryClient}>
             <Locales>
                 <BrowserRouter basename={getBaseURL()}>
-                    <Routes>
-                        <Route path='/login' element={<Login />} />
-                    </Routes>
                     <Navbar />
                     <div
                         className={`${styles.appContainer} ${isSidebarExpanded ? styles.expanded : styles.collapsed}`}
diff --git a/web-console-v2/src/components/Navbar/Navbar.tsx b/web-console-v2/src/components/Navbar/Navbar.tsx
index d7ad1b38..2b6556de 100644
--- a/web-console-v2/src/components/Navbar/Navbar.tsx
+++ b/web-console-v2/src/components/Navbar/Navbar.tsx
@@ -105,7 +105,7 @@ function BasicBreadcrumbs(): JSX.Element {
                         // Capitalize first letter apart from datasetId
                         // const displayName = isLast ? name : _.capitalize(name);
                         if(matchedRoute){
-                            const displayName = matchedRoute?.label !== undefined ? matchedRoute.label : name;
+                            const displayName = matchedRoute?.label !== undefined ? matchedRoute.label : _.capitalize(name);
                             return isLast ? (
                                 <Typography
                                     variant="body1"
diff --git a/web-console-v2/src/components/Stepper/DynamicStepper.tsx b/web-console-v2/src/components/Stepper/DynamicStepper.tsx
index a18916a6..4536393c 100644
--- a/web-console-v2/src/components/Stepper/DynamicStepper.tsx
+++ b/web-console-v2/src/components/Stepper/DynamicStepper.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
-import { Box, Typography } from '@mui/material';
+import { Box, StepButton, StepLabel, Step, Stepper, Typography } from '@mui/material';
 import styles from './Stepper.module.css';
-import { theme } from 'theme';
 
 interface Step {
     name: string;
@@ -25,12 +24,6 @@ const DynamicStepper = ({ steps: initialSteps, initialSelectedStep }: StepperPro
     const { datasetId }: any = useParams();
     const [selectedStep, setSelectedStep] = useState(initialSelectedStep);
     const [steps, setSteps] = useState(initialSteps);
-    const handleClick = (route: string, index: number, completed: boolean, onProgress: boolean) => {
-        if (completed || onProgress) {
-            setSelectedStep(index);
-            navigate(route);
-        }
-    };
 
     useEffect(() => {
         const queryParams = new URLSearchParams(location.search);
@@ -60,7 +53,7 @@ const DynamicStepper = ({ steps: initialSteps, initialSelectedStep }: StepperPro
         }
     }, [location, initialSteps]);
 
-    const handleRouteNavigation = (route: string, datasetId: string) => {
+    const handleRouteNavigation = (route: string) => {
         const routeMapping: Record<string, string> = {
             connector: `/dataset/edit/connector/configure/${datasetId}`,
             ingestion: `/dataset/edit/ingestion/schema/${datasetId}`,
@@ -107,43 +100,18 @@ const DynamicStepper = ({ steps: initialSteps, initialSelectedStep }: StepperPro
 
     return (
         <Box className={styles.stepper}>
-            {steps.map((step, idx) => (
-                <Box
-                    key={idx}
-                    className={`${styles.step} ${step.completed ? styles.completed : ''} ${step.active ? styles.selected : ''}`}
-                    onClick={() => {
-                        if (['connector', 'ingestion', 'processing', 'storage', 'preview'].includes(step.route)) {
-                            handleRouteNavigation(step.route, datasetId);
-                        } else {
-                            handleClick(step.route, step.index, step.completed, step.active);
-                        }
-                    }}
-                >
-                    <Box
-                        className={`${styles.circle} ${step.completed ? styles.completed : ''} ${step.active ? styles.selected : ''}`}
-                        sx={{
-                            backgroundColor: step.completed ? 'secondary.main' : step.active ? 'secondary.light' : 'var(--body-secondary-background)',
-                            border: step.active || step.completed ? `0.125rem solid ${theme.palette.secondary.main}` : ' 0.125rem solid var(--body-secondary)'
-                        }}
-                    >
-                        {step.completed ? (
-                            <span>&#10003;</span>
-                        ) : (
-                            <Typography color={step.active ? 'secondary.main' : 'var(--body-secondary)'}>
-                                {step.index}
-                            </Typography>
-                        )}
-                    </Box>
-                    <Typography
-                        variant={step.completed && !step.active ? 'body1' : step.active ? 'h1' : 'body1'}
-                        color={step.completed && !step.active ? '' : step.index === selectedStep ? 'secondary.main' : ''}
-                        sx={{fontSize: '0.8rem'}}
-                    >
-                        {step.name}
-                    </Typography>
-                </Box>
-            ))}
-        </Box>
+            <Stepper nonLinear activeStep={selectedStep - 1} sx={{ width: '48rem' }} >
+            {steps.map((step) => {
+                return (
+                    <Step key={step.route} completed={step.completed}>
+                        <StepButton onClick={() => handleRouteNavigation(step.route)}>
+                            <StepLabel optional={<Typography variant="body1">Optional</Typography>} StepIconProps={{sx: {classes: step.completed ? 'completed':''}}}>{step.name}</StepLabel>
+                        </StepButton>
+                    </Step>
+                );
+            })}
+            </Stepper>
+      </Box>
     );
 };
 
diff --git a/web-console-v2/src/index.css b/web-console-v2/src/index.css
index dc33209a..2c8877cc 100644
--- a/web-console-v2/src/index.css
+++ b/web-console-v2/src/index.css
@@ -126,4 +126,16 @@ div.HelpSection_expanded__vqSxk {
 
 .MuiAccordionSummary-content {
   margin-bottom: 5px !important;
+}
+
+.MuiStepIcon-root.Mui-completed {
+  color: #f58601 !important;
+}
+
+.MuiStepIcon-root.Mui-active {
+  color: #f58601 !important;
+}
+
+.MuiStepLabel-label.Mui-active {
+  color: #f58601 !important;
 }
\ No newline at end of file
diff --git a/web-console-v2/src/pages/ConnectorConfiguration/ConnectorConfiguration.tsx b/web-console-v2/src/pages/ConnectorConfiguration/ConnectorConfiguration.tsx
index df626d06..d591708b 100644
--- a/web-console-v2/src/pages/ConnectorConfiguration/ConnectorConfiguration.tsx
+++ b/web-console-v2/src/pages/ConnectorConfiguration/ConnectorConfiguration.tsx
@@ -8,7 +8,7 @@ import HelpSection from 'components/HelpSection/HelpSection';
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
-import { endpoints, useFetchDatasetsById, useReadConnectors } from 'services/dataset';
+import { endpoints, useFetchDatasetsById, useReadConnectors, useUpdateDataset } from 'services/dataset';
 import styles from './ConnectorConfiguration.module.css';
 import sampleSchema from './Schema';
 import { customizeValidator } from '@rjsf/validator-ajv8';
@@ -126,7 +126,7 @@ const ConnectorConfiguration: React.FC = () => {
     }
     const readConnector = useReadConnectors({ connectorId: selectedConnectorId });
     
-    const dataset = useFetchDatasetsById({datasetId, queryParams: 'status=Draft&mode=edit&fields=connectors_config'});
+    const dataset = useFetchDatasetsById({datasetId, queryParams: 'status=Draft&mode=edit&fields=connectors_config,version_key'});
     useEffect(() => {
         if (dataset.data && dataset.data.connectors_config[0]) {
             const connectorId = _.get(dataset.data.connectors_config[0], 'connector_id')
@@ -244,19 +244,46 @@ const ConnectorConfiguration: React.FC = () => {
         return combinedHelp;
     };
 
+    const updateDataset = useUpdateDataset();
+
     const handleButtonClick = () => {
 
-        navigate(`/dataset/edit/ingestion/meta/${datasetId}?step=connector&skipped=false&completed=true`, {
-            state: {
-                connectorConfig: {
-                    id: selectedConnectorId,
-                    connector_id: selectedConnectorId,
-                    connector_config: formData || {},
-                    operations_config: opFormData || {}
+        if(datasetId === '<new>') {
+            navigate(`/dataset/edit/ingestion/meta/${datasetId}?step=connector&skipped=false&completed=true`, {
+                state: {
+                    connectorConfig: {
+                        id: selectedConnectorId,
+                        connector_id: selectedConnectorId,
+                        connector_config: formData || {},
+                        operations_config: opFormData || {}
+                    },
+                    selectedConnectorId
+                }
+            });
+        } else {
+            updateDataset.mutate(
+                {
+                    data: {
+                        dataset_id: datasetId,
+                        connectors_config: [{
+                            value: {
+                                id: `${datasetId}_${selectedConnectorId}`,
+                                connector_id: selectedConnectorId,
+                                connector_config: formData || {},
+                                operations_config: opFormData || {},
+                                version: 'v2'
+                            },
+                            action: "upsert"
+                        }]
+                    }
                 },
-                selectedConnectorId
-            }
-        });
+                {
+                    onSuccess: () => {
+                        navigate(`/dataset/edit/ingestion/meta/${datasetId}?step=connector&skipped=false&completed=true`);
+                    }
+                }
+            );
+        }
     };
 
     const handleHelpSectionToggle = () => {
diff --git a/web-console-v2/src/pages/Dashboard/IndividualDashboardPage/IndividualDashboardPage.tsx b/web-console-v2/src/pages/Dashboard/IndividualDashboardPage/IndividualDashboardPage.tsx
index a114234d..be9cc38b 100644
--- a/web-console-v2/src/pages/Dashboard/IndividualDashboardPage/IndividualDashboardPage.tsx
+++ b/web-console-v2/src/pages/Dashboard/IndividualDashboardPage/IndividualDashboardPage.tsx
@@ -11,6 +11,7 @@ import intereactIds from 'data/telemetry/interact.json'
 import { v4 } from 'uuid';
 import Health from '../health';
 import { metricsMetadata } from '../metrics';
+import { getConfigValueV1 } from 'services/configData';
 
 const IndividualMetricDashboards = (props: any) => {
   const { id } = props;
@@ -73,11 +74,16 @@ const IndividualMetricDashboards = (props: any) => {
     }
   }
 
+  const navigateToGrafana = (path: any) => {
+    if (path) {
+        window.open(path);
+    }
+}
   const renderGrafanaIcon = () => {
     const link = _.get(metadata, 'links.grafana.link')
     if (!link) return null;
     return (
-      <Tooltip title="Navigate to Grafana Dashboard" onClick={_ => navigateToGrafana(link)}>
+      <Tooltip title="Navigate to Grafana Dashboard" onClick={() => { navigateToGrafana(getConfigValueV1("GRAFANA_URL")) }}>
         <IconButton
           data-edataid={`${intereactIds.grafana_navigate}:${metricId}`}
           color="secondary" variant="light" sx={{ color: 'text.primary', bgcolor: 'transparent', ml: 0.75 }}>
diff --git a/web-console-v2/src/pages/Rollup/components/ListRollups.tsx b/web-console-v2/src/pages/Rollup/components/ListRollups.tsx
index 618cf2b8..578b8f47 100644
--- a/web-console-v2/src/pages/Rollup/components/ListRollups.tsx
+++ b/web-console-v2/src/pages/Rollup/components/ListRollups.tsx
@@ -69,7 +69,7 @@ const ListRollups = () => {
     })
 
     const addNewRollup = () => {
-        navigate(`/home/datasets/rollups/${datasetId}`, { state: { rollupGranularityOption: rollupGranularityOption, edit: false } })
+        navigate(`/datasets/rollups/${datasetId}`, { state: { rollupGranularityOption: rollupGranularityOption, edit: false } })
     }
 
     const handleClose = () => {
@@ -94,7 +94,7 @@ const ListRollups = () => {
         return <Box sx={{ marginLeft: -1.5 }}>
             <IconButton color="primary" size="large"
                 onClick={() => {
-                    navigate(`/home/datasets/rollups/${datasetId}`,
+                    navigate(`/datasets/rollups/${datasetId}`,
                         { state: { rollupGranularityOption: rollupGranularityOption, edit: true, rollupDatasourceName: value.row.original.datasourceId, aggregationLevel: value.row.original.aggregation } })
                 }}
             >
@@ -147,7 +147,7 @@ const ListRollups = () => {
             </> : renderRollups()}
             <Grid item xs={12}>
                 {rollups.length === granularityOptions.length ? <></> : <Stack direction="row" justifyContent="space-between" alignItems="center" mt={1}>
-                    <Button size="medium" startIcon={<ArrowLeftOutlined />} sx={{ fontWeight: 500 }} onClick={() => navigate(`/home/datasets?status=${DatasetStatus.ReadyToPublish}`)}>
+                    <Button size="medium" startIcon={<ArrowLeftOutlined />} sx={{ fontWeight: 500 }} onClick={() => navigate(`/datasets?status=${DatasetStatus.ReadyToPublish}`)}>
                         Previous
                     </Button>
                     <Button size="medium" startIcon={<PlusOutlined />} sx={{ fontWeight: 500 }} onClick={addNewRollup}>
diff --git a/web-console-v2/src/pages/Rollup/components/ReviewRollup.tsx b/web-console-v2/src/pages/Rollup/components/ReviewRollup.tsx
index fe8bd59f..2e10fe27 100644
--- a/web-console-v2/src/pages/Rollup/components/ReviewRollup.tsx
+++ b/web-console-v2/src/pages/Rollup/components/ReviewRollup.tsx
@@ -53,7 +53,7 @@ const ReviewRollup = (props: any) => {
     };
 
     const handleFinish = () => {
-        navigate(`/home/datasets/management/${datasetId}?status=${DatasetStatus.Draft}`, { state: { jsonSchema: datasetState } });
+        navigate(`/datasets/management/${datasetId}?status=${DatasetStatus.Draft}`, { state: { jsonSchema: datasetState } });
     };
 
     const columns = useMemo(
diff --git a/web-console-v2/src/pages/StepsPages/Ingestion/Ingestion.tsx b/web-console-v2/src/pages/StepsPages/Ingestion/Ingestion.tsx
index 5edb4fa6..461f661e 100644
--- a/web-console-v2/src/pages/StepsPages/Ingestion/Ingestion.tsx
+++ b/web-console-v2/src/pages/StepsPages/Ingestion/Ingestion.tsx
@@ -18,6 +18,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import {
     useCreateDataset,
+    useFetchDatasetExists,
     useFetchDatasetsById,
     useGenerateJsonSchema,
     useReadUploadedFiles,
@@ -110,9 +111,14 @@ const Ingestion = () => {
         isPending: isGenerateLoading
     } = useGenerateJsonSchema();
 
+    let readDatasetQueryParams = 'status=Draft&fields=dataset_config,name,version_key,connectors_config';
+    if(datasetIdParam === '<new>') readDatasetQueryParams += '&mode=edit'
     const { data: fetchData, refetch } = useFetchDatasetsById({
         datasetId: datasetId,
-        queryParams: 'status=Draft&mode=edit&fields=dataset_config,name,version_key,connectors_config'
+        queryParams: readDatasetQueryParams
+    });
+    const { data: datasetExistsData, refetch: refetchExists } = useFetchDatasetExists({
+        datasetId: datasetId
     });
 
     const {
@@ -150,6 +156,9 @@ const Ingestion = () => {
         _.filter(_.flattenDeep(content), (field: any) => !_.isEmpty(field));
 
     useEffect(() => {
+        if (datasetIdParam === '<new>') {
+            return
+        }
         if (datasetId !== '' && fetchData) {
             setDatasetName(_.get(fetchData, 'name'));
             if(fetchData.connectors_config && fetchData.connectors_config[0]) {
@@ -208,7 +217,7 @@ const Ingestion = () => {
     }, [filenames, readUploadedFiles.data]);
 
     const fetchDataset = (id: string) => {
-        refetch().then(response => {
+        refetchExists().then(response => {
             if (response.isSuccess) {
                 setNameError('Dataset already exists');
             } else {
@@ -286,7 +295,7 @@ const Ingestion = () => {
             if (datasetIdParam === '<new>' && datasetId) {
                 const connectors_config = (connectorConfig) ? [{
                     ...connectorConfig,
-                    id: `${datasetId}_${connectorConfig.connector_id}`,
+                    id: `${datasetId}-${connectorConfig.connector_id}`,
                     version: 'v2'
                 }] : []
                 const config = {
@@ -360,11 +369,10 @@ const Ingestion = () => {
                     showAlert('Failed to upload schema', 'error');
                 }
             } else {
-                console.log("# datasetName before update", datasetName)
                 updateDatasetMutate({
                     data: {
                         name: datasetName,
-                        dataset_id: datasetId,
+                        dataset_id: datasetIdParam,
                         type: datasetType
                     }
                 });
diff --git a/web-console-v2/src/pages/StepsPages/PreviewAndSave/AllConfigurations.tsx b/web-console-v2/src/pages/StepsPages/PreviewAndSave/AllConfigurations.tsx
index 6c8311bd..3a6c7f01 100644
--- a/web-console-v2/src/pages/StepsPages/PreviewAndSave/AllConfigurations.tsx
+++ b/web-console-v2/src/pages/StepsPages/PreviewAndSave/AllConfigurations.tsx
@@ -1,18 +1,18 @@
-import React, { useState } from 'react';
-import { Stack, Typography, Button, ListItem, ListItemText, Chip } from '@mui/material';
-import styles from './Preview.module.css';
-import AddIcon from '@mui/icons-material/Add';
-import { Box } from '@mui/material';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import { getConfigValue } from 'services/configData';
-import { useDatasetList, useFetchDatasetsById } from 'services/dataset';
-import _ from 'lodash';
-import SchemaDetails from '../Ingestion/SchemaDetails/SchemaDetails';
-import { useNavigate, useParams } from 'react-router-dom';
-import CustomTable from 'components/CustomeTable/CustomTable';
+import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
+import { Box, Checkbox, Grid, Paper, Switch, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Toolbar, Typography } from '@mui/material';
+import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
+import MuiAccordionDetails from '@mui/material/AccordionDetails';
+import MuiAccordionSummary, {
+    AccordionSummaryProps,
+} from '@mui/material/AccordionSummary';
+import { styled } from '@mui/material/styles';
+import { render } from '@testing-library/react';
 import Loader from 'components/Loader';
-import { getDatasetType } from '../Storage/Storage';
+import _ from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { endpoints, useFetchDatasetsById } from 'services/dataset';
+import { http } from 'services/http';
 
 interface TransformationRow {
     field_key: string;
@@ -22,259 +22,458 @@ interface TransformationRow {
     };
 }
 
+const datasetTypeMapping = {
+    'event': 'Event/Telemetry Data',
+    'transaction': 'Data Changes (Updates or Transactions)',
+    'master': 'Master Data'
+}
+
 const AllConfigurations = () => {
     const [isExpanded, setIsExpanded] = useState(false);
-    const {datasetId}:any = useParams();
+    const { datasetId }: any = useParams();
+    const [datasetName, setDatasetName] = useState<any>('');
+    const [connectorMeta, setConnectorMeta] = useState<any>(undefined);
+    const [connectorConfig, setConnectorConfig] = useState<any>(undefined);
+    const [dataSchema, setDataSchema] = useState<any>(undefined);
+    const [datasetType, setDatasetType] = useState<string>('');
+    const [indexingConfig, setIndexingConfig] = useState<any>(undefined);
+    const [keysConfig, setKeysConfig] = useState<any>(undefined);
+    const [validationConfig, setValidationConfig] = useState<any>(undefined);
+    const [dedupConfig, setDedupConfig] = useState<any>(undefined);
+    const [sensitiveFields, setSensitiveFields] = useState<any[]>([]);
+    const [derivedFields, setDerivedFields] = useState<any[]>([]);
+    const [transformFields, setTransformFields] = useState<any[]>([]);
+    const [dataDenormalizations, setDataDenormalizations] = useState<any[]>([]);
 
-    const datasetList = useDatasetList({
-        status: ['Live']
-    });
-    const fetchDatasetById = useFetchDatasetsById({
+    const response = useFetchDatasetsById({
         datasetId,
-        queryParams:
-            'status=Draft&mode=edit&fields=dataset_id,data_schema,transformations_config,connectors_config,validation_config,dedup_config,denorm_config,dataset_config,type'
+        queryParams: 'status=Draft&mode=edit&fields=dataset_id,name,data_schema,transformations_config,connectors_config,validation_config,dedup_config,denorm_config,dataset_config,type'
     });
-    const response = fetchDatasetById.data;
-
-    const validationConfig = _.get(response, 'validation_config', {});
-    const denormData = _.get(response, 'denorm_config.denorm_fields', []);
-    const transformationData = _.get(response, 'transformations_config', []);
-    const connectorData = _.get(response, ['connectors_config'], []);
-    console.log("### response", response);
 
-    const storageKeys = _.get(response, ['dataset_config', 'keys_config'], []);
-    const storageType = _.get(response, ['dataset_config', 'indexing_config'], []);
-    const datasetType = _.get(response, 'type');
-    const { olap_store_enabled, lakehouse_enabled, cache_enabled } = storageType;
+    useEffect(() => {
+        if (response.data) {
+            const dataset = response.data;
+            setDatasetName(dataset.name);
+            setDataSchema(_.get(dataset, 'data_schema', {}));
+            const denormData = _.get(dataset, 'denorm_config.denorm_fields', []);
+            const transformationData = _.get(dataset, 'transformations_config', []);
+            const connectorConfigData = _.get(dataset, ['connectors_config'], []);
+            setValidationConfig(_.get(dataset, 'validation_config', {}));
+            setDedupConfig(_.get(dataset, 'dedup_config', {}));
+            setKeysConfig(_.get(dataset, ['dataset_config', 'keys_config'], {}));
+            setIndexingConfig(_.get(dataset, ['dataset_config', 'indexing_config'], {}));
+            setDatasetType(_.get(dataset, 'type'));
+            if (connectorConfigData.length > 0) {
+                setConnectorConfig(connectorConfigData[0]);
+                const connectorId = connectorConfigData[0].connector_id;
+                http.get(`${endpoints.READ_CONNECTORS}/${connectorId}`).then((response: any) => {
+                    const connectorData = _.get(response, ['data', 'result'])
+                    if (connectorData) {
+                        setConnectorMeta(connectorData)
+                    }
+                })
+            }
+            const dataDenormalizations:any[] = [];
+            const sensitiveFields:any[] = [];
+            const transformations:any[] = [];
+            const derived:any[] = [];
+            if(transformationData.length > 0) {
+                _.forEach(transformationData, (transformation) => {
+                    const mergedTF = {
+                        field: transformation['field_key'],
+                        ...transformation['transformation_function'],
+                        mode: transformation['mode']
+                    }
+                    if(mergedTF['category'] === 'pii' || mergedTF['type'] !== 'jsonata') {
+                        sensitiveFields.push(mergedTF)
+                    } else if (mergedTF['category'] === 'transform') {
+                        transformations.push(mergedTF);
+                    } else {
+                        derived.push(mergedTF);
+                    }
+                })
+                setSensitiveFields(sensitiveFields);
+                setDerivedFields(derived);
+                setTransformFields(transformations);
+            }
+            if(denormData.length > 0) {
+                _.forEach(denormData, (denorm) => {
+                    dataDenormalizations.push(denorm);
+                })
+                setDataDenormalizations(dataDenormalizations)
+            }
+        }
+    }, [response.data])
 
-    const storageKeysArray = (storageKeys: { [s: string]: unknown } | ArrayLike<unknown>) => {
-        return Object.entries(storageKeys).map(([key, value]) => ({
-            key,
-            value
-        }));
-    };
 
-    const storageKeysList = storageKeysArray(storageKeys);
+    const [expanded, setExpanded] = React.useState<string | false>('connector');
 
-    const navigate = useNavigate();
-    const toggleViewMore = () => {
-        setIsExpanded(!isExpanded);
+    const handleChange = (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
+        setExpanded(newExpanded ? panel : false);
     };
 
-    const ProcessingColumns = [
-        {
-            header: 'Dataset Field',
-            id: 'Dataset Field',
-            accessor: 'denorm_key'
+    const Accordion = styled((props: AccordionProps) => (
+        <MuiAccordion disableGutters elevation={0} square {...props} />
+    ))(({ theme }) => ({
+        border: `1px solid ${theme.palette.divider}`,
+        '&:not(:last-child)': {
+            borderBottom: 0,
         },
-        {
-            header: 'Master Dataset',
-            id: 'Master Dataset',
-            accessor: 'dataset_id'
+        '&::before': {
+            display: 'none',
         },
-        {
-            header: 'Master Dataset Field',
-            id: 'Master Dataset Field',
-            accessor: 'denorm_out_field'
-        }
-    ];
+    }));
 
-    const storageColumns = [
-        {
-            header: 'Indexing Config',
-            id: 'Indexing Config',
-            accessor: 'key',
-            Cell: ({ value }: any) => (value ? value : '-')
+    const AccordionSummary = styled((props: AccordionSummaryProps) => (
+        <MuiAccordionSummary
+            expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
+            {...props}
+        />
+    ))(({ theme }) => ({
+        backgroundColor:
+            theme.palette.mode === 'dark'
+                ? 'rgba(255, 255, 255, .05)'
+                : 'rgba(0, 0, 0, .03)',
+        flexDirection: 'row-reverse',
+        '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
+            transform: 'rotate(90deg)',
         },
-        {
-            header: 'Value',
-            id: 'Value',
-            accessor: 'value',
-            Cell: ({ value }: any) => (value ? value : '-')
-        }
-    ];
+        '& .MuiAccordionSummary-content': {
+            marginLeft: theme.spacing(1),
+        },
+    }));
 
-    const columnsTransformations = [
-        {
-            header: 'Field',
-            id: "Field",
-            accessor: 'field_key'
+    const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
+        padding: theme.spacing(2),
+        borderTop: '1px solid rgba(0, 0, 0, .125)',
+    }));
+
+    const StyledTableRow = styled(TableRow)(({ theme }) => ({
+        '&:nth-of-type(odd)': {
+            backgroundColor: theme.palette.action.hover,
         },
-        {
-            header: 'Transformation',
-            id: 'Transformation',
-            accessor: (row: TransformationRow) => row.transformation_function.type
+        // hide last border
+        '&:last-child td, &:last-child th': {
+            border: 0,
         },
-        {
-            header: 'Target field / Expression',
-            id: 'Target field / Expression',
-            accessor: (row: TransformationRow) => row.transformation_function.expr
-        }
-    ];
+    }));
+
+    const RenderFieldRows:React.FC = (parent: any, properties: any) => {
+        return (
+        <>
+        {properties && _.entries(properties).map(([key, value]) => (
+            <>
+            <StyledTableRow key={key} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                <TableCell align="left">{parent?parent+'.':''}{key}</TableCell>
+                <TableCell align="left">{(value as any).arrival_format}</TableCell>
+                <TableCell align="left">{(value as any).data_type}</TableCell>
+                <TableCell align="left"><Switch disabled checked={(value as any).isRequired}/></TableCell>
+            </StyledTableRow>
+            {value && RenderFieldRows(key, (value as any).properties)}
+            </>
+        ))}
+        </>
+    )}
 
     return (
         <Box>
-            {(datasetList.isPending || fetchDatasetById.isPending)
-                ?
-                <Loader
-                    loading={datasetList.isPending || fetchDatasetById.isPending}
-                    descriptionText="Loading the page"
-                />
-                :
-                <Stack className={styles.scrollable}>
-                    {!_.isEmpty(connectorData) && (
-                        <Stack
-                            my={2}
-                            mx={2.5}
-                            sx={{ backgroundColor: 'white' }}
-                            className={styles.stackStyle}
-                        >
-                            <Stack m={2.5} spacing={2}>
-                                <Typography variant="h1Secondary">Ingestion</Typography>
-
-                                <ListItem disablePadding>
-                                    <span className={styles.dotCircle} />
-                                    <ListItemText>
-                                        <Typography variant="h2Secondary">
-                                            Connector Type : {connectorData[0].connector_id}
-                                        </Typography>
-                                    </ListItemText>
-                                </ListItem>
-                            </Stack>
-                        </Stack>
-                    )}
-
-                    <Stack>
-                        <Stack my={2} mx={2.5} className={styles.stackStyle}>
-                            <Stack m={2} spacing={1}>
-                                <Typography variant="h1Secondary">Schema</Typography>
-                            </Stack>
-                            <Box
-                                sx={{
-                                    height: isExpanded ? 'auto' : '400px',
-                                    overflow: 'hidden',
-                                    transition: 'height 0.3s ease'
-                                }}
-                            >
-                                <SchemaDetails showTableOnly />
-                            </Box>
-                            <Button
-                                onClick={toggleViewMore}
-                                endIcon={
-                                    isExpanded ? (
-                                        <KeyboardArrowUpIcon sx={{ color: 'blue' }} />
-                                    ) : (
-                                        <ExpandMoreIcon sx={{ color: 'blue' }} />
-                                    )
-                                }
-                                sx={{ display: 'flex', alignItems: 'center' }}
-                            >
-                                <Typography color="primary" p={1} fontSize="18px">
-                                    {isExpanded ? 'View Less' : 'View More'}
-                                </Typography>
-                            </Button>
-                        </Stack>
-
-                        <Stack my={2} mx={2.5} className={styles.stackStyle}>
-                            <Stack m={2.5} spacing={2}>
-                                <Typography variant="h1Secondary">Processing</Typography>
-
-                                <ListItem disablePadding>
-                                    <span className={styles.dotCircle} />
-                                    <ListItemText>
-                                        <Typography variant="h2Secondary">
-                                            Data Validation : {validationConfig.mode}
-                                        </Typography>
-                                    </ListItemText>
-                                </ListItem>
-                                <ListItem disablePadding style={{ marginBottom: '0.75rem' }}>
-                                    <span className={styles.dotCircle} />
-                                    <ListItemText>
-                                        <Typography variant="h2Secondary">
-                                            Data Denormalization
-                                        </Typography>
-                                    </ListItemText>
-                                </ListItem>
-                                {denormData.length > 0 ? (
-                                    <CustomTable
-                                        header={true}
-                                        columns={ProcessingColumns}
-                                        data={denormData}
-                                        striped={true}
-                                    />
-                                ) : (
-                                    <Typography variant="h6" textAlign="center">
-                                        No records
-                                    </Typography>
+            {(response.isPending) ? <Loader loading={response.isPending} descriptionText="Loading the page" /> : 
+            <Box>
+                <Accordion expanded={expanded === 'connector'} onChange={handleChange('connector')}>
+                    <AccordionSummary aria-controls="panel1d-content" id="panel1d-header" disabled={!connectorConfig}>
+                        <Typography variant='h6'>Connector - {connectorConfig && connectorMeta ? connectorMeta.name : 'No connector configured'}</Typography>
+                    </AccordionSummary>
+                    {connectorMeta && (
+                        <AccordionDetails>
+                            <Grid container columnSpacing={3} justifyContent={'flex-start'}>
+                                <Grid item xs={14} sm={7} lg={7}>
+                                    <TableContainer component={Paper} >
+                                        <Table size="small" aria-label="a dense table">
+                                            <TableHead>
+                                                <TableRow>
+                                                    <TableCell align="left" colSpan={2}>
+                                                        Configuration
+                                                    </TableCell>
+                                                </TableRow>
+                                                <TableRow>
+                                                    <TableCell align="left" width={'50%'}>Config</TableCell>
+                                                    <TableCell align="left" width={'50%'}>Value</TableCell>
+                                                </TableRow>
+                                            </TableHead>
+                                            <TableBody>
+                                                {connectorConfig && _.entries(connectorConfig.connector_config).map(([configKey, configValue]) => (
+                                                    <StyledTableRow key={configKey} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                                                        <TableCell align="left">{connectorMeta.ui_spec.properties[configKey].title}</TableCell>
+                                                        <TableCell align="left">{String(configValue)}</TableCell>
+                                                    </StyledTableRow>
+                                                ))}
+                                            </TableBody>
+                                        </Table>
+                                    </TableContainer>
+                                </Grid>
+                                {connectorConfig.operations_config && (
+                                    <Grid item xs={10} sm={5} lg={5}>
+                                        <TableContainer component={Paper}>
+                                            <Table size="small" aria-label="a dense table">
+                                                <TableHead>
+                                                    <TableRow>
+                                                        <TableCell align="left" colSpan={2}>
+                                                            Fetch Configuration
+                                                        </TableCell>
+                                                    </TableRow>
+                                                    <TableRow>
+                                                        <TableCell align="left" width={'50%'}>Config</TableCell>
+                                                        <TableCell align="left" width={'50%'}>Value</TableCell>
+                                                    </TableRow>
+                                                </TableHead>
+                                                <TableBody>
+                                                    {connectorConfig && _.entries(connectorConfig.operations_config).map(([configKey, configValue]) => (
+                                                        <StyledTableRow key={configKey} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                                                            <TableCell align="left">{configKey == 'interval' ? 'Polling Interval' : 'Polling Schedule'}</TableCell>
+                                                            <TableCell align="left">{String(configValue)}</TableCell>
+                                                        </StyledTableRow>
+                                                    ))}
+                                                </TableBody>
+                                            </Table>
+                                        </TableContainer>
+                                    </Grid>
                                 )}
-                            </Stack>
-                        </Stack>
-
-                        <Stack my={2} mx={2.5} className={styles.stackStyle}>
-                            <Stack m={2.5} spacing={1} gap={3}>
-                                <Typography variant="h1Secondary">Transformations</Typography>
+                            </Grid>
+                        </AccordionDetails>
+                    )}
+                </Accordion>
+                <Accordion expanded={expanded === 'ingestion'} onChange={handleChange('ingestion')}>
+                    <AccordionSummary aria-controls="panel2d-content" id="panel2d-header">
+                        <Typography variant='h6'>Ingestion</Typography>
+                    </AccordionSummary>
+                    <AccordionDetails>
+                        <TableContainer component={Paper} sx={{width: '80%'}}>
+                            <Table size="small" aria-label="a dense table">
+                                <TableHead>
+                                    <TableRow>
+                                        <TableCell align="left" width={'40%'}>Dataset Name</TableCell>
+                                        <TableCell align="left" width={'30%'}>Dataset ID</TableCell>
+                                        <TableCell align="left" width={'30%'}>Dataset Type</TableCell>
+                                    </TableRow>
+                                </TableHead>
+                                <TableBody>
+                                    <StyledTableRow sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                                        <TableCell align="left">{datasetName}</TableCell>
+                                        <TableCell align="left">{datasetId}</TableCell>
+                                        <TableCell align="left">{_.get(datasetTypeMapping, datasetType)}</TableCell>
+                                    </StyledTableRow>
+                                </TableBody>
+                            </Table>
+                        </TableContainer>
+                        <Paper sx={{ width: '80%', overflow: 'hidden', mt: '20px' }}>
+                            <TableContainer sx={{maxHeight: 440}}>
+                                <Table stickyHeader size="small" aria-label="a dense table">
+                                    <TableHead>
+                                        <TableRow>
+                                            <TableCell align="left" colSpan={4}>
+                                                Data Schema
+                                            </TableCell>
+                                        </TableRow>
+                                        <TableRow>
+                                            <TableCell align="left" width={'50%'}>Field</TableCell>
+                                            <TableCell align="left" width={'20%'}>Arrival Format</TableCell>
+                                            <TableCell align="left" width={'15%'}>Data Type</TableCell>
+                                            <TableCell align="left" width={'15%'}>Required</TableCell>
+                                        </TableRow>
+                                    </TableHead>
+                                    <TableBody>
+                                        {dataSchema && RenderFieldRows('', dataSchema.properties)}  
+                                    </TableBody>
+                                </Table>
+                            </TableContainer>
+                        </Paper>
+                    </AccordionDetails>
+                </Accordion>
+                <Accordion expanded={expanded === 'processing'} onChange={handleChange('processing')}>
+                    <AccordionSummary aria-controls="panel3d-content" id="panel3d-header">
+                        <Typography variant='h6'>Processing</Typography>
+                    </AccordionSummary>
+                    <AccordionDetails>
+                        <TableContainer component={Paper} sx={{width: '70%'}}>
+                            <Table size="small" aria-label="a dense table">
+                                <TableHead>
+                                    <TableRow>
+                                        <TableCell align="center" colSpan={3}>Configurations</TableCell>
+                                    </TableRow>
+                                </TableHead>
+                                <TableBody>
+                                    <StyledTableRow sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                                        <TableCell align="left" width={'35%'}>Add New Fields</TableCell>
+                                        <TableCell align="left" width={'10%'}>{validationConfig && validationConfig.mode === 'Strict' ? 'No' : 'Yes'}</TableCell>
+                                        <TableCell align="left" width={'55%'}>{validationConfig && validationConfig.mode === 'Strict' ? 'Events will be skipped if there are unknown fields' : 'Events will be processed even if there are unknown fields'}</TableCell>
+                                    </StyledTableRow>
+                                    <StyledTableRow sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                                        <TableCell align="left" width={'35%'}>Enable Deduplication</TableCell>
+                                        <TableCell align="left" width={'10%'}>{dedupConfig && dedupConfig.drop_duplicates ? 'Yes' : 'No'}</TableCell>
+                                        <TableCell align="left" width={'55%'}>Dedupe Key: {dedupConfig ? dedupConfig?.dedup_key: 'Not Applicable'}</TableCell>
+                                    </StyledTableRow>
+                                </TableBody>
+                            </Table>
+                        </TableContainer>
 
-                                {transformationData.length > 0 ? (
-                                    <CustomTable
-                                        header={true}
-                                        columns={columnsTransformations}
-                                        data={transformationData}
-                                        striped={true}
-                                    />
-                                ) : (
-                                    <Typography variant="h6" textAlign="center">
-                                        No records
-                                    </Typography>
-                                )}
-                            </Stack>
-                        </Stack>
-                        <Stack my={2} mx={2.5} className={styles.stackStyle}>
-                            <Stack m={2.5} spacing={2}>
-                                <Typography variant="h1Secondary">Storage</Typography>
+                        <TableContainer component={Paper} sx={{width: '80%', mt: '15px'}}>
+                            <Table size="small" aria-label="a dense table">
+                                <TableHead>
+                                    <StyledTableRow sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                                        <TableCell align="center" colSpan={3}>Data Denormalization</TableCell>
+                                    </StyledTableRow>
+                                    <TableRow>
+                                        <TableCell align="left" width={'30%'}>Dataset Field</TableCell>
+                                        <TableCell align="left" width={'30%'}>Master Dataset</TableCell>
+                                        <TableCell align="left" width={'40%'}>Input Field (to store the data)</TableCell>
+                                    </TableRow>
+                                </TableHead>
+                                <TableBody>
+                                    {dataDenormalizations.length === 0 &&
+                                        (<StyledTableRow sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                                            <TableCell align="center" colSpan={3}>No fields are added for denormalization</TableCell>
+                                        </StyledTableRow>)
+                                    }
+                                    {dataDenormalizations.length > 0 && dataDenormalizations.map((value) => (
+                                         <StyledTableRow key={value.field} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                                            <TableCell align="left">{value.denorm_key}</TableCell>
+                                            <TableCell align="left">{value.dataset_id}</TableCell>
+                                            <TableCell align="left">{value.denorm_out_field}</TableCell>
+                                        </StyledTableRow>
+                                    ))}
+                                </TableBody>
+                            </Table>
+                        </TableContainer>
 
-                                <ListItem disablePadding>
-                                    <span className={styles.dotCircle} />
-                                    <ListItemText>
-                                        <Typography variant="h2Secondary">
-                                            Dataset Type : {getDatasetType(datasetType)}
-                                        </Typography>
-                                    </ListItemText>
-                                </ListItem>
-                                <ListItem disablePadding style={{ marginBottom: '0.75rem' }}>
-                                    <span className={styles.dotCircle} />
-                                    <ListItemText>
-                                        <Typography variant="h2Secondary">
-                                            Storage Type:
-                                            {olap_store_enabled && (
-                                                <Chip label="Real-time Store" sx={{ mx: 1 }} />
-                                            )}
-                                            {lakehouse_enabled && (
-                                                <Chip label="Lakehouse" sx={{ mx: 1 }} />
-                                            )}
-                                            {cache_enabled && <Chip label="Cache" sx={{ mx: 1 }} />}
-                                        </Typography>
-                                    </ListItemText>
-                                </ListItem>
-                                {storageKeysList.length > 0 ? (
-                                    <CustomTable
-                                        header={true}
-                                        columns={storageColumns}
-                                        data={storageKeysList}
-                                        striped={true}
-                                    />
-                                ) : (
-                                    <Typography variant="h6" textAlign="center">
-                                        No records
-                                    </Typography>
-                                )}
-                            </Stack>
-                        </Stack>
+                        <TableContainer component={Paper} sx={{width: '80%', mt: '15px'}}>
+                            <Table size="small" aria-label="a dense table">
+                                <TableHead>
+                                    <StyledTableRow sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                                        <TableCell align="center" colSpan={4}>Data Privacy</TableCell>
+                                    </StyledTableRow>
+                                    <TableRow>
+                                        <TableCell align="left" width={'45%'}>Field</TableCell>
+                                        <TableCell align="left" width={'15%'}>Data Type</TableCell>
+                                        <TableCell align="left" width={'10%'}>Action</TableCell>
+                                        <TableCell align="left" width={'30%'}>Skip Record on Failure?</TableCell>
+                                    </TableRow>
+                                </TableHead>
+                                <TableBody>
+                                {sensitiveFields.length === 0 &&
+                                    (<StyledTableRow sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                                        <TableCell align="center" colSpan={4}>No senstive fields have been added</TableCell>
+                                    </StyledTableRow>)
+                                }
+                                {sensitiveFields.length > 0 && sensitiveFields.map((value) => (
+                                    <StyledTableRow key={value.field} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                                        <TableCell align="left">{value.field}</TableCell>
+                                        <TableCell align="left">{_.capitalize(value.datatype)}</TableCell>
+                                        <TableCell align="left">{_.capitalize(value.type)}</TableCell>
+                                        <TableCell align="left">{value.mode === 'Strict' ? 'Yes': 'No'}</TableCell>
+                                    </StyledTableRow>
+                                ))}
+                                </TableBody>
+                            </Table>
+                        </TableContainer>
 
+                        <TableContainer component={Paper} sx={{width: '80%', mt: '15px'}}>
+                            <Table size="small" aria-label="a dense table">
+                                <TableHead>
+                                    <StyledTableRow sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                                        <TableCell align="center" colSpan={4}>Data Transformations</TableCell>
+                                    </StyledTableRow>
+                                    <TableRow>
+                                        <TableCell align="left" width={'45%'}>Field</TableCell>
+                                        <TableCell align="left" width={'15%'}>Data Type</TableCell>
+                                        <TableCell align="left" width={'10%'}>Transformation</TableCell>
+                                        <TableCell align="left" width={'30%'}>Skip Record on Failure?</TableCell>
+                                    </TableRow>
+                                </TableHead>
+                                <TableBody>
+                                {transformFields.length === 0 &&
+                                    (<StyledTableRow sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                                        <TableCell align="center" colSpan={4}>No transformation fields have been added</TableCell>
+                                    </StyledTableRow>)
+                                }
+                                {transformFields.length > 0 && transformFields.map((value) => (
+                                    <StyledTableRow key={value.field} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                                        <TableCell align="left">{value.field}</TableCell>
+                                        <TableCell align="left">{_.capitalize(value.datatype)}</TableCell>
+                                        <TableCell align="left">{_.capitalize(value.expr)}</TableCell>
+                                        <TableCell align="left">{value.mode === 'Strict' ? 'Yes': 'No'}</TableCell>
+                                    </StyledTableRow>
+                                ))}
+                                </TableBody>
+                            </Table>
+                        </TableContainer>
 
-                    </Stack>
-                </Stack>}
+                        <TableContainer component={Paper} sx={{width: '80%', mt: '15px'}}>
+                            <Table size="small" aria-label="a dense table">
+                                <TableHead>
+                                    <StyledTableRow sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                                        <TableCell align="center" colSpan={4}>Derived Fields</TableCell>
+                                    </StyledTableRow>
+                                    <TableRow>
+                                    <TableCell align="left" width={'45%'}>Field</TableCell>
+                                        <TableCell align="left" width={'15%'}>Data Type</TableCell>
+                                        <TableCell align="left" width={'10%'}>Transformation</TableCell>
+                                        <TableCell align="left" width={'30%'}>Skip Record on Failure?</TableCell>
+                                    </TableRow>
+                                </TableHead>
+                                <TableBody>
+                                {derivedFields.length === 0 &&
+                                    (<StyledTableRow sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                                        <TableCell align="center" colSpan={4}>No derived fields have been added</TableCell>
+                                    </StyledTableRow>)
+                                }
+                                {derivedFields.length > 0 && derivedFields.map((value) => (
+                                    <StyledTableRow key={value.field} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                                        <TableCell align="left">{value.field}</TableCell>
+                                        <TableCell align="left">{_.capitalize(value.datatype)}</TableCell>
+                                        <TableCell align="left">{_.capitalize(value.expr)}</TableCell>
+                                        <TableCell align="left">{value.mode === 'Strict' ? 'Yes': 'No'}</TableCell>
+                                    </StyledTableRow>
+                                ))}
+                                </TableBody>
+                            </Table>
+                        </TableContainer>
+                    </AccordionDetails>
+                </Accordion>
+                <Accordion expanded={expanded === 'storage'} onChange={handleChange('storage')}>
+                    <AccordionSummary aria-controls="panel4d-content" id="panel4d-header">
+                        <Typography variant='h6'>Storage</Typography>
+                    </AccordionSummary>
+                    <AccordionDetails>
+                        <TableContainer component={Paper} sx={{width: '100%'}}>
+                            <Table size="small" aria-label="a dense table">
+                                <TableHead>
+                                    <TableRow>
+                                        <TableCell align="left" width={'15%'}>Lakehouse (Hudi)</TableCell>
+                                        <TableCell align="left" width={'18%'}>Real-time Store (Druid)</TableCell>
+                                        <TableCell align="left" width={'18%'}>Cache Store (Redis)</TableCell>
+                                        <TableCell align="left" width={'17%'}>Primary Key</TableCell>
+                                        <TableCell align="left" width={'17%'}>Timestamp Key</TableCell>
+                                        <TableCell align="left" width={'15%'}>Partition Key</TableCell>
+                                    </TableRow>
+                                </TableHead>
+                                <TableBody>
+                                    <TableRow>
+                                        <TableCell align="left"><Checkbox readOnly checked={indexingConfig?.lakehouse_enabled} /></TableCell>
+                                        <TableCell align="left"><Checkbox readOnly checked={indexingConfig?.olap_store_enabled} /></TableCell>
+                                        <TableCell align="left"><Checkbox readOnly checked={indexingConfig?.cache_enabled} /></TableCell>
+                                        <TableCell align="left">{keysConfig?.data_key}</TableCell>
+                                        <TableCell align="left">{keysConfig?.timestamp_key}</TableCell>
+                                        <TableCell align="left">{keysConfig?.partition_key}</TableCell>
+                                    </TableRow>
+                                </TableBody>
+                            </Table>
+                        </TableContainer>
+                    </AccordionDetails>
+                </Accordion>
+            </Box>
+            }
         </Box>
     );
-};
+}
 
-export default AllConfigurations;
+export default AllConfigurations;
\ No newline at end of file
diff --git a/web-console-v2/src/pages/StepsPages/PreviewAndSave/Preview.tsx b/web-console-v2/src/pages/StepsPages/PreviewAndSave/Preview.tsx
index 107a15dc..574f78c6 100644
--- a/web-console-v2/src/pages/StepsPages/PreviewAndSave/Preview.tsx
+++ b/web-console-v2/src/pages/StepsPages/PreviewAndSave/Preview.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { FC, ReactElement, useState, useEffect } from 'react';
 import { Box, Button, Stack, Tab, Tabs } from '@mui/material';
 import AllConfigurations from './AllConfigurations';
@@ -9,6 +9,7 @@ import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
 import styles from './Preview.module.css';
 import Actions from 'components/ActionButtons/Actions';
 import { useFetchDatasetsById, usePublishDataset } from 'services/dataset';
+import { fetchSessionStorageValue } from 'utils/sessionStorage';
 import AlertDialog from 'components/AlertDialog/AlertDialog';
 import en from 'utils/locales/en.json';
 import Loader from 'components/Loader';
@@ -29,7 +30,8 @@ const renderContent = (selectedTab: number) => {
 
 const Preview: FC = (): ReactElement => {
     const navigate = useNavigate();
-    const { datasetId }:any = useParams();
+    const datasetId = fetchSessionStorageValue('configDetails', 'dataset_id') || '';
+
     const { search, state } = useLocation();
     const [selectedTab, setSelectedTab] = useState(0);
     const [open, setOpen] = useState<boolean>(false);
@@ -87,10 +89,6 @@ const Preview: FC = (): ReactElement => {
         setOpen(false);
     };
 
-    const handleNavigate = () => {
-        navigate(`/dataset/edit/storage/${datasetId}`)
-    };
-
     return (
         <Box
             sx={{
@@ -114,17 +112,18 @@ const Preview: FC = (): ReactElement => {
                                 flex={1}
                                 mx={3.5}
                                 overflow="auto"
-                                paddingBottom="3.8rem"
+                                paddingBottom="8rem"
                             >
-                                <Box mx={0.5}>
+                                <Box sx={{ml: '5px', mt: '2px'}}>
                                     <Button
                                         variant="back"
+                                        className={styles.button}
+                                        onClick={() => navigate(`/dataset/edit/storage/${datasetId}`)}
                                         startIcon={
                                             <KeyboardBackspaceIcon
-                                                className={styles.backIcon}
+                                                sx={{ color: 'black', width: '24px', height: '24px' }}
                                             />
                                         }
-                                        onClick={handleNavigate}
                                     >
                                         Back
                                     </Button>
@@ -162,7 +161,7 @@ const Preview: FC = (): ReactElement => {
                                         ))}
                                     </Tabs>
 
-                                    <Stack sx={{ background: 'white' }} height="90%" pb={3}>
+                                    <Stack sx={{ background: 'white' }} height="90%">
                                         {renderContent(selectedTab)}
                                     </Stack>
                                 </Box>
diff --git a/web-console-v2/src/pages/StepsPages/Processing/Processing.tsx b/web-console-v2/src/pages/StepsPages/Processing/Processing.tsx
index 52226d5c..e654fd3b 100644
--- a/web-console-v2/src/pages/StepsPages/Processing/Processing.tsx
+++ b/web-console-v2/src/pages/StepsPages/Processing/Processing.tsx
@@ -217,7 +217,7 @@ const Processing: React.FC = () => {
                 }
             });
         } else {
-            updateDataset({ data: { [keyName]: data } });
+            updateDataset({ data: { [keyName]: data, dataset_id: datasetId } });
         }
     };
 
@@ -228,7 +228,8 @@ const Processing: React.FC = () => {
                     value: { field_key: fieldKey },
                     action: 'remove'
                 }
-            ]
+            ],
+            dataset_id: datasetId
         };
 
         if (!fieldKey && _.has(data, 'denorm_config')) newData = data;
diff --git a/web-console-v2/src/pages/StepsPages/StepperPage.tsx b/web-console-v2/src/pages/StepsPages/StepperPage.tsx
index a6780faa..78f4e1e3 100644
--- a/web-console-v2/src/pages/StepsPages/StepperPage.tsx
+++ b/web-console-v2/src/pages/StepsPages/StepperPage.tsx
@@ -41,7 +41,7 @@ const stepData = {
             route: 'storage'
         },
         {
-            name: 'Preview & Save',
+            name: 'Preview',
             index: 5,
             completed: false,
             skipped: false,
@@ -70,14 +70,14 @@ const StepperPage = () => {
         const storageKeys = _.get(dataset.data, ['dataset_config', 'keys_config'], {});
         const storageType = _.get(dataset.data, ['dataset_config', 'indexing_config'], {});
         newSteps.push(connectorData.length > 0 ? {
-            name: 'Connector',
+            name: 'Connector?',
             index: 1,
             completed: true,
             skipped: false,
             active: false,
             route: 'connector'
         } : {
-            name: 'Connector',
+            name: 'Connector?',
             index: 1,
             completed: false,
             skipped: true,
@@ -146,7 +146,7 @@ const StepperPage = () => {
         }
 
         newSteps.push({
-            name: 'Preview & Save',
+            name: 'Preview',
             index: 5,
             completed: false,
             skipped: false,
diff --git a/web-console-v2/src/pages/alertManager/components/QueryBuilder.tsx b/web-console-v2/src/pages/alertManager/components/QueryBuilder.tsx
index 40c34570..170243b8 100644
--- a/web-console-v2/src/pages/alertManager/components/QueryBuilder.tsx
+++ b/web-console-v2/src/pages/alertManager/components/QueryBuilder.tsx
@@ -186,28 +186,30 @@ const QueryBuilder = (props: any) => {
         category: yup.string().required(en.isRequired),
         metric: yup.string().required(en.isRequired),
         operator: yup.string().required(en.isRequired),
-        threshold: yup.number().when('operator', (operator: any, schema) => {
-            return !_.includes(["within_range", "outside_range"], operator)
-                ? schema.required(en.isRequired)
-                : schema;
+        threshold: yup.number().when('operator', {
+            is: (operator: any) => !_.includes(["within_range", "outside_range"], operator),
+            then: (schema) => schema.required(en.isRequired),
+            otherwise: (schema) => schema.notRequired(),
         }),
-        threshold_from: yup.number().when('operator', (operator: any, schema) => {
-            return _.includes(["within_range", "outside_range"], operator)
-                ? schema.required(en.isRequired).min(0)
-                : schema;
+        threshold_from: yup.number().when('operator', {
+            is: (operator: any) => _.includes(["within_range", "outside_range"], operator),
+            then: (schema) => schema.required(en.isRequired).min(0),
+            otherwise: (schema) => schema.notRequired(),
         }),
-        threshold_to: yup.number().when('operator', (operator: any, schema) => {
-            return _.includes(["within_range", "outside_range"], operator)
-                ? schema.required(en.isRequired)
+        threshold_to: yup.number().when('operator', {
+            is: (operator: any) => _.includes(["within_range", "outside_range"], operator),
+            then: (schema) =>
+                schema
+                    .required(en.isRequired)
                     .min(0)
                     .test(
                         'greater-than-threshold-from',
                         'Value must be greater than Threshold - From.',
-                        function (testValue) {
-                            return testValue > _.get(this.parent, "threshold_from");
+                        function (value) {
+                            return value > this.parent.threshold_from;
                         }
-                    )
-                : schema;
+                    ),
+            otherwise: (schema) => schema.notRequired(),
         })
     });
 
diff --git a/web-console-v2/src/pages/auth/components/AuthCard.tsx b/web-console-v2/src/pages/auth/components/AuthCard.tsx
index 9bdcbc72..b9074fea 100644
--- a/web-console-v2/src/pages/auth/components/AuthCard.tsx
+++ b/web-console-v2/src/pages/auth/components/AuthCard.tsx
@@ -16,8 +16,6 @@ const AuthCard = ({ children, ...other }: any) => (
         content={false}
         {...other}
         border={false}
-        boxShadow
-        shadow={(theme: any) => theme.customShadows.z1}
     >
         <Box sx={{ p: { xs: 2, sm: 3, md: 4, xl: 5 } }}>{children}</Box>
     </MainCard>
diff --git a/web-console-v2/src/pages/auth/components/LoginSocialButton.js b/web-console-v2/src/pages/auth/components/LoginSocialButton.tsx
similarity index 94%
rename from web-console-v2/src/pages/auth/components/LoginSocialButton.js
rename to web-console-v2/src/pages/auth/components/LoginSocialButton.tsx
index e9e153cb..afca65ec 100644
--- a/web-console-v2/src/pages/auth/components/LoginSocialButton.js
+++ b/web-console-v2/src/pages/auth/components/LoginSocialButton.tsx
@@ -12,7 +12,7 @@ const LoginSocialButton = () => {
     const matchDownSM = useMediaQuery(theme.breakpoints.down('sm'));
     const allowedAuthTypes = getConfigValueV1("AUTHENTICATION_ALLOWED_TYPES")  || ""
 
-    const renderSocialButtons = (option) => {
+    const renderSocialButtons = (option: any) => {
         return (
            ( _.includes(allowedAuthTypes, _.lowerCase(option.value))) ? 
         <Button
@@ -26,7 +26,7 @@ const LoginSocialButton = () => {
             onClick={option.onClick}
         >
             {!matchDownSM && option.label}
-        </Button> : <></>
+        </Button> : null
         )
     }
 
diff --git a/web-console-v2/src/pages/dashboardV1/ReadyToPublishDatasets.tsx b/web-console-v2/src/pages/dashboardV1/ReadyToPublishDatasets.tsx
index 6cfbc83e..113762d8 100644
--- a/web-console-v2/src/pages/dashboardV1/ReadyToPublishDatasets.tsx
+++ b/web-console-v2/src/pages/dashboardV1/ReadyToPublishDatasets.tsx
@@ -352,7 +352,7 @@ const ReadyToPublishDatasetsList = ({ setDatasetType, sourceConfigs }: any) => {
                                 <EditOutlined />
                             </IconButton>
                         </Tooltip>
-                        <Tooltip title="Rollup Management" onClick={(e: any) => navigateToPath(`/home/datasets/management/${row?.dataset_id}?status=${DatasetStatus.ReadyToPublish}`)}>
+                        <Tooltip title="Rollup Management" onClick={(e: any) => navigateToPath(`/datasets/management/${row?.dataset_id}?status=${DatasetStatus.ReadyToPublish}`)}>
                             <IconButton
                                 color="primary"
                                 size="large"
diff --git a/web-console-v2/src/router/index.tsx b/web-console-v2/src/router/index.tsx
index 4a2d9e24..f074e295 100644
--- a/web-console-v2/src/router/index.tsx
+++ b/web-console-v2/src/router/index.tsx
@@ -28,8 +28,11 @@ import ListChannels from 'pages/notificationChannels/ListChannels';
 import AddChannel from 'pages/notificationChannels/AddChannel';
 import ViewChannel from 'pages/notificationChannels/ViewChannel';
 import UpdateChannel from 'pages/notificationChannels/UpdateChannel';
-import DatasetManagement from 'pages/DatasetManagement/DatasetManagement';
+import DatasetManagement from 'pages/datasetManagement/components/DatasetManagement';
+import Loadable from 'pages/auth/components/Loadable';
+
 import RollupConfig from 'pages/Rollup/components';
+
 // Type definition for the route configuration
 interface RouteConfig {
     path: string;
@@ -38,10 +41,12 @@ interface RouteConfig {
     children?: RouteConfig[];
 }
 const CustomAlerts = lazy(() => import('pages/alertManager/views/CustomRules'));
+const Login = Loadable(lazy(() => import('pages/auth/Login')));
 // Base path for all routes
 
 export const routeConfigurations: RouteConfig[] = [
     { path: '/', label: "Dashboard", element: <Navigate to={`/dashboard`} replace /> },
+    {path: '/login', element: <Login/>},
     { path: `/dataset/create`, label: "New Dataset", element: <NewDatasetPage /> },
     {
         path: '/dataset',
@@ -84,7 +89,9 @@ export const routeConfigurations: RouteConfig[] = [
     { path: `/datasets`, label: "Datasets", element: <ClusterHealth /> },
     { path: `/datasets/metrics/:datasetId`, label: "Metrics", element: <DatasetMetrics /> },
     { path: `/datasets/addEvents/:datasetId`, label: "Add Events", element: <DatasetCreateEvents /> },
-    { path: `/datasets/view/:datasetId`, label: "View", element: <DatasetManagement /> }
+    { path: `/datasets/view/:datasetId`, label: "View", element: <DatasetManagement /> },
+    { path: `/datasets/rollups/:datasetId`, element: <RollupConfig />},
+    { path: `$/datasets/management/:datasetId`, label: "Rollups", element: <DatasetManagement /> }
 ];
 
 const AppRouter = () => (
diff --git a/web-console-v2/src/services/dataset.ts b/web-console-v2/src/services/dataset.ts
index cc28f6e4..1c5a641a 100644
--- a/web-console-v2/src/services/dataset.ts
+++ b/web-console-v2/src/services/dataset.ts
@@ -34,7 +34,8 @@ const ENDPOINTS = {
     DATASETS_DIFF: '/api/dataset/diff',
     PUBLISH_DATASET: '/config/v2/datasets/status-transition',
     LIST_CONNECTORS: '/config/v2/connectors/list',
-    READ_CONNECTORS: '/config/v2/connectors/read'
+    READ_CONNECTORS: '/config/v2/connectors/read',
+    DATASET_EXISTS: '/api/dataset/exists'
 };
 
 export const endpoints = ENDPOINTS
@@ -51,7 +52,6 @@ export const useFetchDatasetsById = ({
     return useQuery({
         queryKey: ['fetchDatasetsById', 'datasetId', 'status', queryParams],
         queryFn: () => http.get(`${ENDPOINTS.DATASETS_READ}/${datasetId}?${queryParams}`).then((response: AxiosResponse) => {
-            console.log("response", response)
             setDatasetId(_.get(response, ['data', 'result', 'dataset_id']))
             setVersionKey(_.get(response, ['data', 'result', 'version_key']));
             return _.get(response, ['data', 'result'])
@@ -162,7 +162,7 @@ export const useUpdateDataset = () =>
             const request = generateRequestBody({
                 request: {
                     ..._.omit(updatedRequestPayload, ['configurations', 'dataMappings']),
-                    ..._.omit(configDetail, ['name'])
+                    ..._.pick(configDetail, ['version_key'])
                 },
                 apiId: 'api.datasets.update'
             });
@@ -198,6 +198,14 @@ export const useFetchDatasetDiff = ({ datasetId }: { datasetId: string }) => {
     });
 };
 
+export const useFetchDatasetExists = ({ datasetId }: { datasetId: string }) => {
+    return useQuery({
+        queryKey: ['fetchDatasetExists'],
+        queryFn: () => http.get(`${ENDPOINTS.DATASET_EXISTS}/${datasetId}`).then((res) => res.data),
+        enabled: !!datasetId
+    });
+};
+
 export const usePublishDataset = () =>
     useMutation({
         mutationFn: ({ payload = {} }: any) => {
diff --git a/web-console-v2/src/theme.ts b/web-console-v2/src/theme.ts
index a93e9a53..ac0d692a 100644
--- a/web-console-v2/src/theme.ts
+++ b/web-console-v2/src/theme.ts
@@ -339,7 +339,8 @@ export const theme = createTheme({
                     h2Tertiary: 'h2',
                     bodySecondary: 'body1',
                     bodyBold: 'body1',
-                    captionMedium: 'caption',
+                    caption: 'caption',
+                    captionMedium: 'captionMedium',
                     textCTAPrimary: 'body1',
                     textCTASecondary: 'body2',
                     h5: 'h5'