diff --git a/Source/DesignSystem/helpers/DummyContents/DummyDataGridContent.tsx b/Source/DesignSystem/helpers/DummyContents/DummyDataGridContent.tsx
deleted file mode 100644
index d528f8acb..000000000
--- a/Source/DesignSystem/helpers/DummyContents/DummyDataGridContent.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-// Copyright (c) Aigonix. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import React from 'react';
-
-import { GridColDef } from '@mui/x-data-grid-pro';
-
-import { EditCell, EditTextFieldCell, IconButton, StatusIndicator } from '@dolittle/design-system';
-
-type DummyRowsProps = {
-    id: string;
-    col1?: string;
-    col2?: string;
-    col3?: string;
-    col4?: string;
-};
-
-export const dummyRows: DummyRowsProps[] = [
-    { id: '1', col1: 'Row 1', col2: 'Row 1', col3: 'Row 1', col4: 'Row 1' },
-    { id: '2', col1: 'Row 2', col2: 'Row 2', col3: 'Row 2', col4: 'Row 2' },
-    { id: '3', col1: 'Row 3', col2: 'Row 3', col3: 'Row 3', col4: 'Row 3' },
-    { id: '4', col1: 'Row 4', col2: 'Row 4', col3: 'Row 4', col4: 'Row 4' },
-];
-
-export const dummyColumns: GridColDef[] = [
-    {
-        field: 'col1',
-        headerName: 'Column 1',
-        sortable: false,
-        minWidth: 150,
-        flex: 1,
-    },
-    {
-        field: 'col2',
-        headerName: 'Column 2',
-        sortable: false,
-        minWidth: 150,
-        flex: 1,
-    },
-    {
-        field: 'col3',
-        headerName: 'Column 3',
-        sortable: false,
-        minWidth: 150,
-        flex: 1,
-    },
-    {
-        field: 'col4',
-        headerName: 'Column 4',
-        sortable: false,
-        minWidth: 150,
-        flex: 1,
-    },
-];
-
-export const dummyIconRows: DummyRowsProps[] = [{ id: '1' }];
-
-export const dummyIconColumns: GridColDef[] = [
-    {
-        field: 'success',
-        headerName: 'Status success',
-        sortable: false,
-        minWidth: 150,
-        flex: 1,
-        headerAlign: 'center',
-        align: 'center',
-        renderCell: () => <StatusIndicator status='table-success' />,
-    },
-    {
-        field: 'warning',
-        headerName: 'Status warning',
-        sortable: false,
-        minWidth: 150,
-        flex: 1,
-        headerAlign: 'center',
-        align: 'center',
-        renderCell: () => <StatusIndicator status='warning' />,
-    },
-    {
-        field: 'error',
-        headerName: 'Status error',
-        sortable: false,
-        minWidth: 150,
-        flex: 1,
-        headerAlign: 'center',
-        align: 'center',
-        renderCell: () => <StatusIndicator status='error' />,
-    },
-    {
-        field: 'unknown',
-        headerName: 'Status unknown',
-        sortable: false,
-        minWidth: 150,
-        flex: 1,
-        headerAlign: 'center',
-        align: 'center',
-        renderCell: () => <StatusIndicator status='unknown' />,
-    },
-    {
-        field: 'download',
-        headerName: 'Download file',
-        sortable: false,
-        minWidth: 150,
-        flex: 1,
-        headerAlign: 'center',
-        align: 'center',
-        renderCell: () => (
-            <IconButton
-                tooltipText='Download'
-                icon='DownloadRounded'
-                href={URL.createObjectURL(new Blob([], { type: 'text/plain' }))}
-                download='sample.log'
-            />
-        ),
-    },
-];
-
-export const dummyEditCellsColumns: GridColDef[] = [
-    {
-        field: 'col1',
-        headerName: 'Column 1',
-        sortable: false,
-        minWidth: 150,
-        flex: 1,
-        editable: true,
-        renderCell: EditCell,
-        renderEditCell: EditTextFieldCell,
-    },
-    {
-        field: 'col2',
-        headerName: 'Column 2',
-        sortable: false,
-        minWidth: 150,
-        flex: 1,
-        editable: true,
-        renderCell: EditCell,
-        renderEditCell: EditTextFieldCell,
-    },
-    {
-        field: 'col3',
-        headerName: 'Column 3',
-        sortable: false,
-        minWidth: 150,
-        flex: 1,
-        editable: true,
-        renderCell: EditCell,
-        renderEditCell: EditTextFieldCell,
-    },
-    {
-        field: 'col4',
-        headerName: 'Column 4',
-        sortable: false,
-        minWidth: 150,
-        flex: 1,
-        editable: true,
-        renderCell: EditCell,
-        renderEditCell: EditTextFieldCell,
-    },
-];
diff --git a/Source/DesignSystem/helpers/DummyContents/index.ts b/Source/DesignSystem/helpers/DummyContents/index.ts
index 9eb5e649b..2aa78cebe 100644
--- a/Source/DesignSystem/helpers/DummyContents/index.ts
+++ b/Source/DesignSystem/helpers/DummyContents/index.ts
@@ -3,6 +3,5 @@
 
 export * from './DummyAccordionsContent';
 export * from './DummyArray';
-export * from './DummyDataGridContent';
 export * from './DummyNavigationItems';
 export * from './DummyText';
diff --git a/Source/DesignSystem/molecules/DataGrid/DataGrid.stories.tsx b/Source/DesignSystem/molecules/DataGrid/DataGrid.stories.tsx
index 6ecddc9b8..37971615a 100644
--- a/Source/DesignSystem/molecules/DataGrid/DataGrid.stories.tsx
+++ b/Source/DesignSystem/molecules/DataGrid/DataGrid.stories.tsx
@@ -6,8 +6,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { DataGridProProps } from '@mui/x-data-grid-pro';
 
-import { dataTableDescription } from './helpers';
-import { dummyColumns, dummyEditCellsColumns, dummyIconColumns, dummyIconRows, dummyRows } from '../../helpers/DummyContents';
+import { dataTableDescription, dummyColumns, dummyIconRows, dummyRows, dummyEditCellColumns, dummyEditCellRows, dummyIconColumns } from './helpers';
 
 import { DataGrid, dataGridDefaultProps } from './DataGrid';
 
@@ -63,8 +62,8 @@ export const Default: Story = {
         columns: dummyColumns,
         checkboxSelection: false,
         loading: false,
-        onRowClick: () => action('onRowClick'),
-        onCellClick: () => action('onCellClick'),
+        onRowClick: action('Row Clicked!'),
+        onCellClick: action('Cell Clicked!'),
     },
 };
 
@@ -79,7 +78,7 @@ IconCells.parameters = {
     docs: {
         description: {
             story: `Icon buttons is found inside their own column in the table that cause a specific action to a specific row of data.<br/>
-            Use Icon to display a specific icon in the table.`
+            Use Icon to display a specific status in the table.`
         },
     },
 };
@@ -87,9 +86,16 @@ IconCells.parameters = {
 export const EditableCells: Story = {
     args: {
         ...Default.args,
-        rows: dummyRows,
-        columns: dummyEditCellsColumns,
+        rows: dummyEditCellRows,
+        columns: dummyEditCellColumns,
         experimentalFeatures: { newEditingApi: true },
+        sx: {
+            // Hack for secret cell active state. Otherwise size is going to be different.
+            '& .MuiOutlinedInput-root': {
+                '& .MuiSelect-select': { p: '5px 15px' },
+                '& fieldset': { border: 'none' },
+            },
+        },
     },
 };
 EditableCells.parameters = {
@@ -112,7 +118,7 @@ EditableCells.parameters = {
 // export const ScrollableDataGrid = () => {};
 // export const RowEditMode = () => {};
 
-// TODOS:
+// TODO:
 // Add into description what is needed in every Data Table.
 // Add sorting guidance.
 // Add alignment guidance.
diff --git a/Source/DesignSystem/molecules/DataGrid/EditCell.tsx b/Source/DesignSystem/molecules/DataGrid/DataGridEditCell.tsx
similarity index 76%
rename from Source/DesignSystem/molecules/DataGrid/EditCell.tsx
rename to Source/DesignSystem/molecules/DataGrid/DataGridEditCell.tsx
index 50b7b30fb..36be96e31 100644
--- a/Source/DesignSystem/molecules/DataGrid/EditCell.tsx
+++ b/Source/DesignSystem/molecules/DataGrid/DataGridEditCell.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 
 import { GridRenderCellParams, useGridApiContext } from '@mui/x-data-grid-pro';
 
-import { TextField } from '@dolittle/design-system';
+import { TextField } from '../../index';
 
 const textFieldBorderStyles = {
     '& .MuiOutlinedInput-root': {
@@ -21,7 +21,11 @@ const textFieldBorderStyles = {
     },
 };
 
-export const EditTextFieldCell = (params: GridRenderCellParams<HTMLInputElement>) => {
+// TODO: Gives an error at the moment.
+/**
+ * Renders a editable text field cell in 'edit' mode in the DataGrid.
+ */
+export const DataGridEditCellEdit = (params: GridRenderCellParams<HTMLInputElement>) => {
     const { id, value, field } = params;
     const apiRef = useGridApiContext();
 
@@ -42,7 +46,10 @@ export const EditTextFieldCell = (params: GridRenderCellParams<HTMLInputElement>
     );
 };
 
-export const EditCell = (params: GridRenderCellParams) =>
+/**
+ * Renders a editable text field cell in the 'view' mode in the DataGrid.
+ */
+export const DataGridEditCellView = (params: GridRenderCellParams) =>
     <TextField
         value={params.value}
         placeholder='Edit...'
diff --git a/Source/DesignSystem/molecules/DataGrid/DataGridSelectCell.tsx b/Source/DesignSystem/molecules/DataGrid/DataGridSelectCell.tsx
new file mode 100644
index 000000000..3f407dfe1
--- /dev/null
+++ b/Source/DesignSystem/molecules/DataGrid/DataGridSelectCell.tsx
@@ -0,0 +1,35 @@
+// Copyright (c) Aigonix. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React from 'react';
+
+import { GridRenderCellParams } from '@mui/x-data-grid-pro';
+
+import { Button } from '../../index';
+
+const styles = {
+    width: 1,
+    height: 1,
+    typography: 'body2',
+    textTransform: 'none',
+};
+
+/**
+ * These styles are required for DataGrid to make the select cell the same size as the other cells.
+ */
+// const styles = {
+//     // Hack for secret cell active state. Otherwise size is going to be different.
+//     '& .MuiOutlinedInput-root': {
+//         '& .MuiSelect-select': { p: '5px 15px' },
+//         '& fieldset': { border: 'none' },
+//     },
+// };
+
+// TODO: Styles should be moved to the theme.
+// TODO: How to display the selected value label in the select cell?
+
+/**
+ * Renders a select cell in 'view' mode in the DataGrid.
+ */
+export const DataGridSelectCellView = (params: GridRenderCellParams) =>
+    <Button label={params.value} color='subtle' endWithIcon='ArrowDropDownRounded' sx={styles} />;
diff --git a/Source/DesignSystem/molecules/DataGrid/helpers.tsx b/Source/DesignSystem/molecules/DataGrid/helpers.tsx
index f27368471..f0ef1cfbc 100644
--- a/Source/DesignSystem/molecules/DataGrid/helpers.tsx
+++ b/Source/DesignSystem/molecules/DataGrid/helpers.tsx
@@ -1,6 +1,12 @@
 // Copyright (c) Aigonix. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+import React from 'react';
+
+import { GridColDef } from '@mui/x-data-grid-pro';
+
+import { DataGridEditCellView, DataGridSelectCellView, IconButton, StatusIndicator } from '../../index';
+
 export const dataTableDescription = `Data tables are an excellent way to organize vast amounts of data. Data tables should be easy to scan, 
             allowing the user to look for patterns and develop insights.
 
@@ -17,9 +23,168 @@ If rows are clickable, then they should display a hover state change. Always pro
 such as in columns that contain action icons. Sorting icons should always be displayed to the right of the column label.
 
 * Expandable rows: Data rows can be expandable by utilizing the arrow icon button component. Expanded rows should show additional data as it pertains to the row above.
-Only allow for one row to expand at a time so as not to overwhelm the user. 
+Only allow for one row to expand at a time so as not to overwhelm the user.`;
+
+type DummyRowsProps = {
+    id: string;
+    col1?: string;
+    col2?: string;
+    col3?: string;
+    col4?: string;
+};
+
+export const dummyColumns: GridColDef<DummyRowsProps>[] = [
+    {
+        field: 'col1',
+        headerName: 'Column 1',
+        sortable: false,
+        minWidth: 150,
+        flex: 1,
+    },
+    {
+        field: 'col2',
+        headerName: 'Column 2',
+        sortable: false,
+        minWidth: 150,
+        flex: 1,
+    },
+    {
+        field: 'col3',
+        headerName: 'Column 3',
+        sortable: false,
+        minWidth: 150,
+        flex: 1,
+    },
+    {
+        field: 'col4',
+        headerName: 'Column 4',
+        sortable: false,
+        minWidth: 150,
+        flex: 1,
+    },
+];
+
+export const dummyRows: DummyRowsProps[] = [
+    { id: '1', col1: 'Row 1', col2: 'Row 1', col3: 'Row 1', col4: 'Row 1' },
+    { id: '2', col1: 'Row 2', col2: 'Row 2', col3: 'Row 2', col4: 'Row 2' },
+    { id: '3', col1: 'Row 3', col2: 'Row 3', col3: 'Row 3', col4: 'Row 3' },
+    { id: '4', col1: 'Row 4', col2: 'Row 4', col3: 'Row 4', col4: 'Row 4' },
+];
+
+export const dummyIconColumns: GridColDef<DummyRowsProps>[] = [
+    {
+        field: 'success',
+        headerName: 'Status success',
+        sortable: false,
+        minWidth: 150,
+        flex: 1,
+        headerAlign: 'center',
+        align: 'center',
+        renderCell: () => <StatusIndicator status='table-success' />,
+    },
+    {
+        field: 'warning',
+        headerName: 'Status warning',
+        sortable: false,
+        minWidth: 150,
+        flex: 1,
+        headerAlign: 'center',
+        align: 'center',
+        renderCell: () => <StatusIndicator status='warning' />,
+    },
+    {
+        field: 'error',
+        headerName: 'Status error',
+        sortable: false,
+        minWidth: 150,
+        flex: 1,
+        headerAlign: 'center',
+        align: 'center',
+        renderCell: () => <StatusIndicator status='error' />,
+    },
+    {
+        field: 'unknown',
+        headerName: 'Status unknown',
+        sortable: false,
+        minWidth: 150,
+        flex: 1,
+        headerAlign: 'center',
+        align: 'center',
+        renderCell: () => <StatusIndicator status='unknown' />,
+    },
+    {
+        field: 'download',
+        headerName: 'Download file',
+        sortable: false,
+        minWidth: 150,
+        flex: 1,
+        headerAlign: 'center',
+        align: 'center',
+        renderCell: () => (
+            <IconButton
+                tooltipText='Download'
+                icon='DownloadRounded'
+                href={URL.createObjectURL(new Blob([], { type: 'text/plain' }))}
+                download='sample.log'
+            />
+        ),
+    },
+];
+
+export const dummyIconRows: DummyRowsProps[] = [{ id: '1' }];
+
+export const dummyEditCellRows: DummyRowsProps[] = [
+    { id: '1', col1: 'Editable Cell', col2: 'Editable Cell', col3: 'Select Cell', col4: 'Select Cell' },
+    { id: '2', col1: 'Editable Cell', col2: 'Editable Cell', col3: 'Select Cell', col4: 'Select Cell' },
+    { id: '3', col1: 'Editable Cell', col2: 'Editable Cell', col3: 'Select Cell', col4: 'Select Cell' },
+    { id: '4', col1: 'Editable Cell', col2: 'Editable Cell', col3: 'Select Cell', col4: 'Select Cell' },
+];
 
-**Structure**
+const selectValueOptions = [{ value: 'Option 1', label: 'Option 1' }, { value: 'Option 2', label: 'Option 2' }];
 
-* Row: Rows can be expandable and collapsable offering the opportunity to include more subsequent data beneath. Content in rows should be spaced evenly apart. Text should left align vertically within its column
-and numbers, including dates, should right align for better scanning.`;
+export const dummyEditCellColumns: GridColDef<DummyRowsProps>[] = [
+    {
+        field: 'col1',
+        headerName: 'Column 1',
+        sortable: false,
+        headerAlign: 'center',
+        minWidth: 150,
+        flex: 1,
+        editable: true,
+        renderCell: DataGridEditCellView,
+    },
+    {
+        field: 'col2',
+        headerName: 'Column 2',
+        sortable: false,
+        headerAlign: 'center',
+        minWidth: 150,
+        flex: 1,
+        editable: true,
+        renderCell: DataGridEditCellView,
+    },
+    {
+        field: 'col3',
+        headerName: 'Column 3',
+        sortable: false,
+        headerAlign: 'center',
+        minWidth: 150,
+        flex: 1,
+        editable: true,
+        type: 'singleSelect',
+        valueOptions: selectValueOptions,
+        renderCell: DataGridSelectCellView,
+    },
+    {
+        field: 'col4',
+        headerName: 'Column 4',
+        sortable: false,
+        headerAlign: 'center',
+        minWidth: 150,
+        flex: 1,
+        editable: true,
+        type: 'singleSelect',
+        valueOptions: selectValueOptions,
+        renderCell: DataGridSelectCellView,
+    },
+];
diff --git a/Source/DesignSystem/molecules/DataGrid/index.ts b/Source/DesignSystem/molecules/DataGrid/index.ts
index 5d1a82664..8778a88a7 100644
--- a/Source/DesignSystem/molecules/DataGrid/index.ts
+++ b/Source/DesignSystem/molecules/DataGrid/index.ts
@@ -5,4 +5,5 @@ export { dataGridDefaultProps } from './DataGrid';
 export { DataGridWrapper } from './DataGridWrapper';
 export { DataGridCustomToolbar } from './DataGridCustomToolbar';
 export { DataGridDetailPanel, DetailPanelExpandIcon, DetailPanelCollapseIcon } from './DataGridDetailPanel';
-export { EditCell, EditTextFieldCell } from './EditCell';
+export { DataGridEditCellView, DataGridEditCellEdit } from './DataGridEditCell';
+export { DataGridSelectCellView } from './DataGridSelectCell';
diff --git a/Source/SelfService/Web/applications/microservice/microserviceDetails/microserviceView/configuration/environmentVariable/DataGrid.tsx b/Source/SelfService/Web/applications/microservice/microserviceDetails/microserviceView/configuration/environmentVariable/DataGrid.tsx
index b826c588c..a1e47ab84 100644
--- a/Source/SelfService/Web/applications/microservice/microserviceDetails/microserviceView/configuration/environmentVariable/DataGrid.tsx
+++ b/Source/SelfService/Web/applications/microservice/microserviceDetails/microserviceView/configuration/environmentVariable/DataGrid.tsx
@@ -15,9 +15,9 @@ import { RestartInfoBox } from '../../../../components/restartInfoBox';
 import { dataGridColumns } from './DataGridColumns';
 
 const styles = {
+    // Hack for secret cell active state. Otherwise size is going to be different.
     '& .MuiOutlinedInput-root': {
-        // Hack for secret cell active state. Otherwise size is going to be different.
-        '& .MuiSelect-select': { p: '10px 15px' },
+        '& .MuiSelect-select': { p: '5px 15px' },
         '& fieldset': { border: 'none' },
     },
 };
diff --git a/Source/SelfService/Web/applications/microservice/microserviceDetails/microserviceView/configuration/environmentVariable/DataGridColumns.tsx b/Source/SelfService/Web/applications/microservice/microserviceDetails/microserviceView/configuration/environmentVariable/DataGridColumns.tsx
index dadede23e..d389ee310 100644
--- a/Source/SelfService/Web/applications/microservice/microserviceDetails/microserviceView/configuration/environmentVariable/DataGridColumns.tsx
+++ b/Source/SelfService/Web/applications/microservice/microserviceDetails/microserviceView/configuration/environmentVariable/DataGridColumns.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 
 import { GridColDef } from '@mui/x-data-grid-pro';
 
-import { Button, EditCell, EditTextFieldCell } from '@dolittle/design-system';
+import { Button, DataGridEditCellView } from '@dolittle/design-system';
 
 import { EnvironmentVariableTableRowParams } from './DataGrid';
 
@@ -15,28 +15,24 @@ export const dataGridColumns: GridColDef<EnvironmentVariableTableRowParams>[] =
         headerName: 'Name',
         width: 330,
         editable: true,
-        renderCell: EditCell,
-        renderEditCell: EditTextFieldCell,
+        renderCell: DataGridEditCellView,
     },
     {
         field: 'value',
         headerName: 'Value',
         width: 330,
         editable: true,
-        renderCell: EditCell,
-        renderEditCell: EditTextFieldCell,
+        renderCell: DataGridEditCellView,
     },
     {
         field: 'isSecret',
         headerName: 'Secret',
+        width: 120,
+        editable: true,
         type: 'singleSelect',
         valueOptions: [{ value: true, label: 'Yes' }, { value: false, label: 'No' }],
-        editable: true,
         renderCell: ({ value }) => (
             <Button label={value ? 'Yes' : 'No'} color='subtle' endWithIcon='ArrowDropDownRounded' sx={{ width: 1, height: 1 }} />
         ),
-        // TODO: Implement this.
-        //renderEditCell: ({ id, value, api }) => ();
-        width: 120,
     },
 ];
diff --git a/Source/SelfService/Web/integrations/connection/connectionDetails/commands/commandsList/commandsListView/commandsListDataGrid/CommandsListDetailPanel.tsx b/Source/SelfService/Web/integrations/connection/connectionDetails/commands/commandsList/commandsListView/commandsListDataGrid/CommandsListDetailPanel.tsx
deleted file mode 100644
index dd86b84d6..000000000
--- a/Source/SelfService/Web/integrations/connection/connectionDetails/commands/commandsList/commandsListView/commandsListDataGrid/CommandsListDetailPanel.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-// Copyright (c) Aigonix. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import React from 'react';
-
-import { Paper, Typography } from '@mui/material';
-import { DataGridPro, DataGridProProps, GridRowId } from '@mui/x-data-grid-pro';
-
-import { Button, CreateButton, DataGridCustomToolbar, dataGridDefaultProps, DataGridWrapper, Form, InlineWrapper, Input, Select } from '@dolittle/design-system';
-
-const commandsListDetailPanelRows = [
-    {
-        m3Argument: 'CFAB',
-        description: 'Description',
-        parameterName: 'Parameter Name',
-        mode: 'Optional',
-        defaultValue: 'Default Value',
-    },
-    {
-        m3Argument: 'FACI',
-        description: 'Description',
-        parameterName: 'Parameter Name',
-        mode: 'Required',
-        defaultValue: 'Default Value',
-    },
-    {
-        m3Argument: 'CHID',
-        description: 'Description',
-        parameterName: 'Parameter Name',
-        mode: 'Hardcoded value',
-        defaultValue: 'Default Value',
-    },
-];
-
-const commandsListDetailPanelColumns = [
-    {
-        field: 'm3Argument',
-        headerName: 'M3 Argument',
-        flex: 1,
-    },
-    {
-        field: 'description',
-        headerName: 'Description',
-        flex: 1,
-    },
-    {
-        field: 'parameterName',
-        headerName: 'Parameter Name',
-        flex: 1,
-    },
-    {
-        field: 'mode',
-        headerName: 'Mode',
-        //<Select
-        //id='mode'
-        //             label='Mode'
-        //             options={
-        //     [
-        //     { value: 'Create', displayValue: 'Create' },
-        //     { value: 'Update', displayValue: 'Update' },
-        //     { value: 'Delete', displayValue: 'Delete' },
-        //             ]}
-        // />
-        flex: 1,
-    },
-    {
-        field: 'defaultValue',
-        headerName: 'Default Value',
-        flex: 1,
-    },
-];
-
-type CommandEditParametersProps = {
-    namespace: string;
-    description: string;
-};
-
-export const CommandsListDetailPanel = ({ row }: any) => {
-    return (
-        <Paper sx={{ p: 2, pl: 7.5 }}>
-            <Typography variant='h4' gutterBottom>{row.name}</Typography>
-            <Typography variant='body1' color='text.secondary'>{`Transaction: ${'MSN051MI > GetPaymentReq'}`}</Typography>
-
-            <Form<CommandEditParametersProps>
-                initialValues={{
-                    namespace: row.nameSpace,
-                    description: row.description,
-                }}
-                onSubmit={() => { }}
-            >
-                <InlineWrapper sx={{ my: 4 }}>
-                    <Typography>Namespace:</Typography>
-                    <Input id='namespace' label='Namespace' sx={{ '& .MuiOutlinedInput-root': { width: 220 } }} />
-                </InlineWrapper>
-
-                <DataGridWrapper background='dark' sx={{ height: 300 }}>
-                    <DataGridPro
-                        {...dataGridDefaultProps}
-                        rows={commandsListDetailPanelRows}
-                        columns={commandsListDetailPanelColumns}
-                        getRowId={row => row.m3Argument}
-                        autoHeight={false}
-                        components={{
-                            Toolbar: () => <DataGridCustomToolbar title='Parameters'>
-                                <Button label='Add Parameters' startWithIcon='AddCircle' />
-                                <Button label='Save Changes' startWithIcon='AddCircle' />
-                            </DataGridCustomToolbar>
-                        }}
-                    />
-                </DataGridWrapper>
-
-                {/* <CreateButton label='Save changes and close' onCreate={() => { }} /> */}
-            </Form>
-        </Paper>
-    );
-};
diff --git a/Source/SelfService/Web/integrations/connection/connectionDetails/commands/commandsList/commandsListView/commandsListDataGrid/commandsListDetailPanel/DetailPanelColumns.tsx b/Source/SelfService/Web/integrations/connection/connectionDetails/commands/commandsList/commandsListView/commandsListDataGrid/commandsListDetailPanel/DetailPanelColumns.tsx
new file mode 100644
index 000000000..36f06f6ec
--- /dev/null
+++ b/Source/SelfService/Web/integrations/connection/connectionDetails/commands/commandsList/commandsListView/commandsListDataGrid/commandsListDetailPanel/DetailPanelColumns.tsx
@@ -0,0 +1,68 @@
+// Copyright (c) Aigonix. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { GridColDef, GRID_CHECKBOX_SELECTION_COL_DEF } from '@mui/x-data-grid-pro';
+
+import { DataGridEditCellView, DataGridSelectCellView } from '@dolittle/design-system';
+
+const parameterModeOptions = [
+    {
+        value: 'Optional',
+        label: 'Optional',
+    },
+    {
+        value: 'Required',
+        label: 'Required',
+    },
+    {
+        value: 'Hardcoded value',
+        label: 'Hardcoded value',
+    },
+];
+
+export const commandsListDetailPanelColumns: GridColDef[] = [
+    {
+        ...GRID_CHECKBOX_SELECTION_COL_DEF,
+    },
+    {
+        field: 'm3Argument',
+        headerName: 'M3 Argument',
+        minWidth: 160,
+        flex: 1,
+    },
+    {
+        field: 'description',
+        headerName: 'Description',
+        editable: true,
+        renderCell: DataGridEditCellView,
+        minWidth: 200,
+        flex: 1,
+    },
+    {
+        field: 'parameterName',
+        headerName: 'Parameter Name',
+        editable: true,
+        renderCell: DataGridEditCellView,
+        minWidth: 200,
+        flex: 1,
+    },
+    {
+        field: 'defaultValue',
+        headerName: 'Default Value',
+        editable: true,
+        renderCell: DataGridEditCellView,
+        minWidth: 200,
+        flex: 1,
+    },
+    {
+        field: 'mode',
+        headerName: 'Mode',
+        headerAlign: 'center',
+        editable: true,
+        type: 'singleSelect',
+        valueOptions: parameterModeOptions,
+        renderCell: DataGridSelectCellView,
+        minWidth: 200,
+        flex: 1,
+    },
+];
diff --git a/Source/SelfService/Web/integrations/connection/connectionDetails/commands/commandsList/commandsListView/commandsListDataGrid/commandsListDetailPanel/index.tsx b/Source/SelfService/Web/integrations/connection/connectionDetails/commands/commandsList/commandsListView/commandsListDataGrid/commandsListDetailPanel/index.tsx
new file mode 100644
index 000000000..44e2ecdd5
--- /dev/null
+++ b/Source/SelfService/Web/integrations/connection/connectionDetails/commands/commandsList/commandsListView/commandsListDataGrid/commandsListDetailPanel/index.tsx
@@ -0,0 +1,119 @@
+// Copyright (c) Aigonix. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React, { useState } from 'react';
+
+import { Paper, Typography } from '@mui/material';
+import { DataGridPro, GRID_CHECKBOX_SELECTION_FIELD, GridFilterModel, GridSelectionModel } from '@mui/x-data-grid-pro';
+
+import { Button, DataGridCustomToolbar, dataGridDefaultProps, DataGridWrapper, Form, InlineWrapper, Input, NewSwitch } from '@dolittle/design-system';
+
+import { commandsListDetailPanelColumns } from './DetailPanelColumns';
+
+const styles = {
+    // Hack for secret cell active state. Otherwise size is going to be different.
+    '& .MuiOutlinedInput-root': {
+        '& .MuiSelect-select': { p: '5px 15px' },
+        '& fieldset': { border: 'none' },
+    },
+    // Hide the filter icon in the column header.
+    '& .MuiDataGrid-columnHeader--filtered .MuiDataGrid-iconButtonContainer': {
+        display: 'none',
+    },
+};
+
+const commandsListDetailPanelRows = [
+    {
+        m3Argument: 'CFAB',
+        description: 'Description',
+        parameterName: 'Parameter Name',
+        mode: 'Optional',
+        defaultValue: 'Default Value',
+    },
+    {
+        m3Argument: 'FACI',
+        description: 'Description',
+        parameterName: 'Parameter Name',
+        mode: 'Required',
+        defaultValue: 'Default Value',
+    },
+    {
+        m3Argument: 'CHID',
+        description: 'Description',
+        parameterName: 'Parameter Name',
+        mode: 'Hardcoded value',
+        defaultValue: 'Default Value',
+    },
+];
+
+type CommandEditParametersProps = {
+    namespace: string;
+    description: string;
+};
+
+export const CommandsListDetailPanel = ({ row }: any) => {
+    const [selectedRowIds, setSelectedRowIds] = useState<GridSelectionModel>([]);
+    const [hideUnselectedRows, setHideUnselectedRows] = useState(false);
+
+    const gridFilters: GridFilterModel = {
+        // Hide unselected rows.
+        items: hideUnselectedRows ? [
+            {
+                columnField: GRID_CHECKBOX_SELECTION_FIELD,
+                operatorValue: 'is',
+                value: 'true',
+            },
+        ] : [],
+    };
+
+    return (
+        <Paper sx={{ p: 2, pl: 7.5 }}>
+            <Typography variant='h4' gutterBottom>{row.name}</Typography>
+            <Typography variant='body1' color='text.secondary'>{`Transaction: ${'MSN051MI > GetPaymentReq'}`}</Typography>
+
+            <Form<CommandEditParametersProps>
+                initialValues={{
+                    namespace: row.nameSpace,
+                    description: row.description,
+                }}
+                onSubmit={() => { }}
+            >
+                <InlineWrapper sx={{ my: 4 }}>
+                    <Typography>Namespace:</Typography>
+                    <Input id='namespace' label='Namespace' sx={{ '& .MuiOutlinedInput-root': { width: 220 } }} />
+                </InlineWrapper>
+
+                <DataGridWrapper background='dark' sx={{ height: 300 }}>
+                    <DataGridPro
+                        {...dataGridDefaultProps}
+                        rows={commandsListDetailPanelRows}
+                        columns={commandsListDetailPanelColumns}
+                        getRowId={row => row.m3Argument}
+                        autoHeight={false}
+                        checkboxSelection
+                        keepNonExistentRowsSelected
+                        selectionModel={selectedRowIds}
+                        onSelectionModelChange={newSelectionModel => setSelectedRowIds(newSelectionModel)}
+                        filterModel={gridFilters}
+                        components={{
+                            Toolbar: () => (
+                                <DataGridCustomToolbar title='Parameters'>
+                                    <NewSwitch
+                                        id='hideUnselectedRows'
+                                        label='Hide Unselected Rows'
+                                        checked={hideUnselectedRows}
+                                        onChange={() => setHideUnselectedRows(!hideUnselectedRows)}
+                                    />
+
+                                    <Button label='Save Changes' startWithIcon='AddCircle' onClick={() => { }} />
+                                </DataGridCustomToolbar>
+                            )
+                        }}
+                        experimentalFeatures={{ newEditingApi: true }}
+                        sx={styles}
+                    />
+                </DataGridWrapper>
+            </Form>
+        </Paper>
+    );
+};
diff --git a/Source/SelfService/Web/integrations/connection/connectionDetails/commands/commandsList/commandsListView/commandsListDataGrid/index.tsx b/Source/SelfService/Web/integrations/connection/connectionDetails/commands/commandsList/commandsListView/commandsListDataGrid/index.tsx
index 6fd3cc940..a2f27775a 100644
--- a/Source/SelfService/Web/integrations/connection/connectionDetails/commands/commandsList/commandsListView/commandsListDataGrid/index.tsx
+++ b/Source/SelfService/Web/integrations/connection/connectionDetails/commands/commandsList/commandsListView/commandsListDataGrid/index.tsx
@@ -7,7 +7,7 @@ import { DataGridPro, DataGridProProps, GridRowId } from '@mui/x-data-grid-pro';
 
 import { dataGridDefaultProps, DataGridWrapper, DetailPanelExpandIcon, DetailPanelCollapseIcon } from '@dolittle/design-system';
 
-import { CommandsListDetailPanel } from './CommandsListDetailPanel';
+import { CommandsListDetailPanel } from './commandsListDetailPanel';
 
 const dummyData = [
     { name: 'Update Facility' },
diff --git a/Source/SelfService/Web/integrations/connection/connectionDetails/messages/message/changeMessageView/messageSection/tableSection/messageMappingDataGrid/MessageMappingDataGridColumns.tsx b/Source/SelfService/Web/integrations/connection/connectionDetails/messages/message/changeMessageView/messageSection/tableSection/messageMappingDataGrid/MessageMappingDataGridColumns.tsx
index 76918c061..77461389f 100644
--- a/Source/SelfService/Web/integrations/connection/connectionDetails/messages/message/changeMessageView/messageSection/tableSection/messageMappingDataGrid/MessageMappingDataGridColumns.tsx
+++ b/Source/SelfService/Web/integrations/connection/connectionDetails/messages/message/changeMessageView/messageSection/tableSection/messageMappingDataGrid/MessageMappingDataGridColumns.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 
 import { GridColDef, GridRowId, GRID_CHECKBOX_SELECTION_COL_DEF } from '@mui/x-data-grid-pro';
 
-import { EditCell, EditTextFieldCell, Tooltip } from '@dolittle/design-system';
+import { DataGridEditCellView, Tooltip } from '@dolittle/design-system';
 
 import { MappableTableColumn } from '../../../../../../../../../apis/integrations/generated';
 
@@ -45,8 +45,7 @@ export const getMessageMappingDataGridColumns = (disabledRows: GridRowId[]) => {
             headerName: 'Remapped Name',
             editable: true,
             flex: 1,
-            renderCell: EditCell,
-            renderEditCell: EditTextFieldCell,
+            renderCell: DataGridEditCellView,
         },
     ] as GridColDef<DataGridTableListingEntry>[];
 };
diff --git a/Source/SelfService/Web/integrations/connection/connectionDetails/messages/message/changeMessageView/messageSection/tableSection/messageMappingDataGrid/index.tsx b/Source/SelfService/Web/integrations/connection/connectionDetails/messages/message/changeMessageView/messageSection/tableSection/messageMappingDataGrid/index.tsx
index 0c4129400..c6e228280 100644
--- a/Source/SelfService/Web/integrations/connection/connectionDetails/messages/message/changeMessageView/messageSection/tableSection/messageMappingDataGrid/index.tsx
+++ b/Source/SelfService/Web/integrations/connection/connectionDetails/messages/message/changeMessageView/messageSection/tableSection/messageMappingDataGrid/index.tsx
@@ -185,7 +185,7 @@ export const MessageMappingDataGrid = ({ tableName, mode, mappableTableDataGridR
                 experimentalFeatures={{ newEditingApi: true }}
                 components={{
                     Toolbar: () => (
-                        <DataGridCustomToolbar title={`${tableName} Table`}>
+                        <DataGridCustomToolbar title={`${tableName} table fields`}>
                             <NewSwitch
                                 id='hideUnselectedRows'
                                 label='Hide Unselected Rows'