diff --git a/src/basics/LocalCache/defaultConfig.ts b/src/basics/LocalCache/defaultConfig.ts
index 4d2d8c604..ceff01853 100644
--- a/src/basics/LocalCache/defaultConfig.ts
+++ b/src/basics/LocalCache/defaultConfig.ts
@@ -6,6 +6,7 @@ export enum LocalCacheItem {
 
   // Production flags
   ShowWorkflowVersions = 'flyte.show-workflow-versions',
+  ShowDomainSettings = 'flyte.show-domain-settings',
 }
 
 type LocalCacheConfig = { [k: string]: string };
@@ -21,4 +22,5 @@ export const defaultLocalCacheConfig: LocalCacheConfig = {
 
   // Production
   'flyte.show-workflow-versions': 'true',
+  'flyte.show-domain-settings': 'true',
 };
diff --git a/src/components/Entities/EntityExecutionsBarChart.tsx b/src/components/Entities/EntityExecutionsBarChart.tsx
index 767937497..34f83763d 100644
--- a/src/components/Entities/EntityExecutionsBarChart.tsx
+++ b/src/components/Entities/EntityExecutionsBarChart.tsx
@@ -1,6 +1,4 @@
 import * as React from 'react';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles, Theme } from '@material-ui/core/styles';
 import { formatDateUTC, millisecondsToHMS } from 'common/formatters';
 import { timestampToDate } from 'common/utils';
 import { BarChart } from 'components/common/BarChart';
@@ -16,17 +14,7 @@ import {
   getWorkflowExecutionPhaseConstants,
   getWorkflowExecutionTimingMS,
 } from '../Executions/utils';
-
-const useStyles = makeStyles((theme: Theme) => ({
-  header: {
-    paddingBottom: theme.spacing(1),
-    paddingLeft: theme.spacing(1),
-    borderBottom: `1px solid ${theme.palette.divider}`,
-  },
-  body: {
-    margin: theme.spacing(1),
-  },
-}));
+import t from './strings';
 
 export interface EntityExecutionsBarChartProps {
   id: ResourceIdentifier;
@@ -89,7 +77,6 @@ export const EntityExecutionsBarChart: React.FC<EntityExecutionsBarChartProps> =
   onToggle,
   chartIds,
 }) => {
-  const styles = useStyles();
   const { domain, project, resourceType } = id;
   const filtersState = useWorkflowExecutionFiltersState();
   const sort = {
@@ -122,17 +109,13 @@ export const EntityExecutionsBarChart: React.FC<EntityExecutionsBarChartProps> =
 
   return (
     <WaitForData {...executions}>
-      <Typography className={styles.header} variant="h6">
-        All Executions in the Workflow
-      </Typography>
-      <div className={styles.body}>
-        <BarChart
-          chartIds={chartIds}
-          data={getExecutionTimeData(executions.value)}
-          startDate={getStartExecutionTime(executions.value)}
-          onClickItem={handleClickItem}
-        />
-      </div>
+      <BarChart
+        title={t('allExecutionsChartTitle')}
+        chartIds={chartIds}
+        data={getExecutionTimeData(executions.value)}
+        startDate={getStartExecutionTime(executions.value)}
+        onClickItem={handleClickItem}
+      />
     </WaitForData>
   );
 };
diff --git a/src/components/Entities/strings.ts b/src/components/Entities/strings.ts
index eb11d029f..820736c58 100644
--- a/src/components/Entities/strings.ts
+++ b/src/components/Entities/strings.ts
@@ -2,6 +2,7 @@ import { createLocalizedString } from 'basics/Locale';
 import { startCase } from 'lodash';
 
 const str = {
+  allExecutionsChartTitle: 'All Executions in the Workflow',
   workflowVersionsTitle: 'Recent Workflow Versions',
   viewAll: 'View All',
   schedulesHeader: 'Schedules',
diff --git a/src/components/Executions/ExecutionDetails/Timeline/ExecutionTimeline.tsx b/src/components/Executions/ExecutionDetails/Timeline/ExecutionTimeline.tsx
index 08dad1406..677cf7e2a 100644
--- a/src/components/Executions/ExecutionDetails/Timeline/ExecutionTimeline.tsx
+++ b/src/components/Executions/ExecutionDetails/Timeline/ExecutionTimeline.tsx
@@ -8,12 +8,12 @@ import { tableHeaderColor } from 'components/Theme/constants';
 import { timestampToDate } from 'common/utils';
 import { NodeExecution } from 'models/Execution/types';
 import { dNode } from 'models/Graph/types';
-import { getChartDurationData } from './BarChart/chartData';
 import { convertToPlainNodes } from './helpers';
 import { ChartHeader } from './chartHeader';
 import { useScaleContext } from './scaleContext';
 import { TaskNames } from './taskNames';
-import { BarChart } from './BarChart';
+import { getChartDurationData } from './TimelineChart/chartData';
+import { TimelineChart } from './TimelineChart';
 
 interface StyleProps {
   chartWidth: number;
@@ -116,7 +116,7 @@ export const ExecutionTimeline: React.FC<ExProps> = ({ nodeExecutions, chartTime
   const styles = useStyles({ chartWidth: chartWidth, itemsShown: showNodes.length });
 
   React.useEffect(() => {
-    // Sync width of elements and intervals of ChartHeader (time labels) and BarChart
+    // Sync width of elements and intervals of ChartHeader (time labels) and TimelineChart
     const calcWidth = Math.ceil(totalDurationSec / chartTimeInterval) * INTERVAL_LENGTH;
     if (durationsRef.current && calcWidth < durationsRef.current.clientWidth) {
       setLabelInterval(
@@ -196,7 +196,7 @@ export const ExecutionTimeline: React.FC<ExProps> = ({ nodeExecutions, chartTime
         </div>
         <div className={styles.taskDurationsView} ref={durationsRef} onScroll={onGraphScroll}>
           <div className={styles.chartHeader}>
-            <BarChart items={barItemsData} chartTimeIntervalSec={chartTimeInterval} />
+            <TimelineChart items={barItemsData} chartTimeIntervalSec={chartTimeInterval} />
           </div>
         </div>
       </div>
diff --git a/src/components/Executions/ExecutionDetails/Timeline/BarChart/BarChart.stories.tsx b/src/components/Executions/ExecutionDetails/Timeline/TimelineChart/TimelineChart.stories.tsx
similarity index 82%
rename from src/components/Executions/ExecutionDetails/Timeline/BarChart/BarChart.stories.tsx
rename to src/components/Executions/ExecutionDetails/Timeline/TimelineChart/TimelineChart.stories.tsx
index 53574c927..6376febf4 100644
--- a/src/components/Executions/ExecutionDetails/Timeline/BarChart/BarChart.stories.tsx
+++ b/src/components/Executions/ExecutionDetails/Timeline/TimelineChart/TimelineChart.stories.tsx
@@ -1,7 +1,7 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import * as React from 'react';
 import { NodeExecutionPhase } from 'models/Execution/enums';
-import { BarChart } from '.';
+import { TimelineChart } from '.';
 
 const barItems = [
   { phase: NodeExecutionPhase.FAILED, startOffsetSec: 0, durationSec: 5, isFromCache: false },
@@ -14,10 +14,10 @@ const barItems = [
 
 export default {
   title: 'Workflow/Timeline',
-  component: BarChart,
-} as ComponentMeta<typeof BarChart>;
+  component: TimelineChart,
+} as ComponentMeta<typeof TimelineChart>;
 
-const Template: ComponentStory<typeof BarChart> = (args) => <BarChart {...args} />;
+const Template: ComponentStory<typeof TimelineChart> = (args) => <TimelineChart {...args} />;
 export const BarSection = Template.bind({});
 BarSection.args = {
   items: barItems,
diff --git a/src/components/Executions/ExecutionDetails/Timeline/BarChart/BarChartSingleItem.stories.tsx b/src/components/Executions/ExecutionDetails/Timeline/TimelineChart/TimelineChartSingleItem.stories.tsx
similarity index 90%
rename from src/components/Executions/ExecutionDetails/Timeline/BarChart/BarChartSingleItem.stories.tsx
rename to src/components/Executions/ExecutionDetails/Timeline/TimelineChart/TimelineChartSingleItem.stories.tsx
index 481e2fb78..49165ed89 100644
--- a/src/components/Executions/ExecutionDetails/Timeline/BarChart/BarChartSingleItem.stories.tsx
+++ b/src/components/Executions/ExecutionDetails/Timeline/TimelineChart/TimelineChartSingleItem.stories.tsx
@@ -2,7 +2,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 import * as React from 'react';
 import { NodeExecutionPhase } from 'models/Execution/enums';
 import { BarItemData } from './utils';
-import { BarChart } from '.';
+import { TimelineChart } from '.';
 
 const phaseEnumTyping = {
   options: Object.values(NodeExecutionPhase),
@@ -22,7 +22,7 @@ interface SingleItemProps extends BarItemData {
  */
 const SingleBarItem = (props: SingleItemProps) => {
   const items = [props];
-  return <BarChart items={items} chartTimeIntervalSec={props.chartTimeIntervalSec} />;
+  return <TimelineChart items={items} chartTimeIntervalSec={props.chartTimeIntervalSec} />;
 };
 
 export default {
diff --git a/src/components/Executions/ExecutionDetails/Timeline/BarChart/barOptions.ts b/src/components/Executions/ExecutionDetails/Timeline/TimelineChart/barOptions.ts
similarity index 100%
rename from src/components/Executions/ExecutionDetails/Timeline/BarChart/barOptions.ts
rename to src/components/Executions/ExecutionDetails/Timeline/TimelineChart/barOptions.ts
diff --git a/src/components/Executions/ExecutionDetails/Timeline/BarChart/chartData.ts b/src/components/Executions/ExecutionDetails/Timeline/TimelineChart/chartData.ts
similarity index 100%
rename from src/components/Executions/ExecutionDetails/Timeline/BarChart/chartData.ts
rename to src/components/Executions/ExecutionDetails/Timeline/TimelineChart/chartData.ts
diff --git a/src/components/Executions/ExecutionDetails/Timeline/BarChart/index.tsx b/src/components/Executions/ExecutionDetails/Timeline/TimelineChart/index.tsx
similarity index 83%
rename from src/components/Executions/ExecutionDetails/Timeline/BarChart/index.tsx
rename to src/components/Executions/ExecutionDetails/Timeline/TimelineChart/index.tsx
index 903d96f9a..1c78d60ad 100644
--- a/src/components/Executions/ExecutionDetails/Timeline/BarChart/index.tsx
+++ b/src/components/Executions/ExecutionDetails/Timeline/TimelineChart/index.tsx
@@ -3,12 +3,12 @@ import { Bar } from 'react-chartjs-2';
 import { getBarOptions } from './barOptions';
 import { BarItemData, generateChartData, getChartData } from './utils';
 
-interface BarChartProps {
+interface TimelineChartProps {
   items: BarItemData[];
   chartTimeIntervalSec: number;
 }
 
-export const BarChart = (props: BarChartProps) => {
+export const TimelineChart = (props: TimelineChartProps) => {
   const phaseData = generateChartData(props.items);
 
   return (
diff --git a/src/components/Executions/ExecutionDetails/Timeline/BarChart/utils.ts b/src/components/Executions/ExecutionDetails/Timeline/TimelineChart/utils.ts
similarity index 100%
rename from src/components/Executions/ExecutionDetails/Timeline/BarChart/utils.ts
rename to src/components/Executions/ExecutionDetails/Timeline/TimelineChart/utils.ts
diff --git a/src/components/Executions/ExecutionDetails/Timeline/scaleContext.tsx b/src/components/Executions/ExecutionDetails/Timeline/scaleContext.tsx
index f54446a86..a554ce77e 100644
--- a/src/components/Executions/ExecutionDetails/Timeline/scaleContext.tsx
+++ b/src/components/Executions/ExecutionDetails/Timeline/scaleContext.tsx
@@ -2,7 +2,7 @@ import { Mark } from '@material-ui/core/Slider';
 import { log } from 'common/log';
 import * as React from 'react';
 import { createContext, useContext } from 'react';
-import { formatSecondsToHmsFormat } from './BarChart/utils';
+import { formatSecondsToHmsFormat } from './TimelineChart/utils';
 
 const MIN_SCALE_VALUE = 60; // 1 min
 const MAX_SCALE_VALUE = 3600; // 1h
diff --git a/src/components/Executions/ExecutionDetails/test/BarChart.test.tsx b/src/components/Executions/ExecutionDetails/test/TimelineChart.test.tsx
similarity index 97%
rename from src/components/Executions/ExecutionDetails/test/BarChart.test.tsx
rename to src/components/Executions/ExecutionDetails/test/TimelineChart.test.tsx
index a79b53bcd..bfca73fbe 100644
--- a/src/components/Executions/ExecutionDetails/test/BarChart.test.tsx
+++ b/src/components/Executions/ExecutionDetails/test/TimelineChart.test.tsx
@@ -4,7 +4,7 @@ import {
   generateChartData,
   getOffsetColor,
   TRANSPARENT,
-} from '../Timeline/BarChart/utils';
+} from '../Timeline/TimelineChart/utils';
 import { mockbarItems } from './__mocks__/NodeExecution.mock';
 
 describe('ExecutionDetails > Timeline > BarChart', () => {
diff --git a/src/components/Project/ProjectDashboard.tsx b/src/components/Project/ProjectDashboard.tsx
index 3f42c51f5..771d91d4e 100644
--- a/src/components/Project/ProjectDashboard.tsx
+++ b/src/components/Project/ProjectDashboard.tsx
@@ -23,7 +23,6 @@ import {
   getExecutionTimeData,
   getStartExecutionTime,
 } from 'components/Entities/EntityExecutionsBarChart';
-import classNames from 'classnames';
 import { useExecutionShowArchivedState } from 'components/Executions/filters/useExecutionArchiveState';
 import { useOnlyMyExecutionsFilterState } from 'components/Executions/filters/useOnlyMyExecutionsFilterState';
 import { WaitForData } from 'components/common/WaitForData';
@@ -37,7 +36,7 @@ import { failedToLoadExecutionsString } from './constants';
 const useStyles = makeStyles((theme: Theme) => ({
   projectStats: {
     paddingTop: theme.spacing(7),
-    paddingBottom: theme.spacing(7),
+    paddingBottom: theme.spacing(5),
     display: 'flex',
     justifyContent: 'space-evenly',
     alignItems: 'center',
@@ -52,13 +51,8 @@ const useStyles = makeStyles((theme: Theme) => ({
     paddingLeft: theme.spacing(1),
     borderBottom: `1px solid ${theme.palette.divider}`,
   },
-  marginTop: {
-    marginTop: theme.spacing(2),
-  },
-  chartContainer: {
-    paddingLeft: theme.spacing(1),
-    paddingRight: theme.spacing(3),
-    paddingTop: theme.spacing(1),
+  withPaddingX: {
+    padding: theme.spacing(0, 2, 0, 2),
   },
 }));
 
@@ -190,12 +184,10 @@ export const ProjectDashboard: React.FC<ProjectDashboardProps> = ({
         {renderDomainSettingsSection}
       </WaitForQuery>
       <div className={styles.container}>
-        <Typography className={classNames(styles.header, styles.marginTop)} variant="h6">
-          {t('last100ExecutionsTitle')}
-        </Typography>
-        <div className={styles.chartContainer}>
+        <div className={styles.withPaddingX}>
           <WaitForData {...last100Executions}>
             <BarChart
+              title={t('last100ExecutionsTitle')}
               chartIds={[]}
               data={getExecutionTimeData(last100Executions.value)}
               startDate={getStartExecutionTime(last100Executions.value)}
diff --git a/src/components/Project/test/ProjectDashboard.test.tsx b/src/components/Project/test/ProjectDashboard.test.tsx
index 6c76b68f8..f34bdc20d 100644
--- a/src/components/Project/test/ProjectDashboard.test.tsx
+++ b/src/components/Project/test/ProjectDashboard.test.tsx
@@ -19,6 +19,7 @@ import { mockAPIContextValue } from 'components/data/__mocks__/apiContext';
 import { getUserProfile } from 'models/Common/api';
 import { getProjectDomainAttributes } from 'models/Project/api';
 import { Admin } from 'flyteidl';
+import * as LocalCache from 'basics/LocalCache';
 import { ProjectDashboard } from '../ProjectDashboard';
 import { failedToLoadExecutionsString } from '../constants';
 
@@ -69,6 +70,8 @@ describe('ProjectDashboard', () => {
     [sortQueryKeys.key]: executionSortFields.createdAt,
   };
 
+  jest.spyOn(LocalCache, 'useLocalCache');
+
   beforeEach(() => {
     mockGetUserProfile = jest.fn().mockResolvedValue(null);
     queryClient = createTestQueryClient();
diff --git a/src/components/common/BarChart.tsx b/src/components/common/BarChart.tsx
index ec1f57681..6e6768af5 100644
--- a/src/components/common/BarChart.tsx
+++ b/src/components/common/BarChart.tsx
@@ -2,10 +2,22 @@ import * as React from 'react';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import { smallFontSize } from 'components/Theme/constants';
 import { COLOR_SPECTRUM } from 'components/Theme/colorSpectrum';
-import { Tooltip, Zoom } from '@material-ui/core';
+import { Tooltip, Typography, Zoom } from '@material-ui/core';
 
 const useStyles = makeStyles((theme: Theme) => ({
-  container: {
+  chartContainer: {
+    paddingLeft: theme.spacing(1),
+    paddingRight: theme.spacing(3),
+    paddingTop: theme.spacing(1),
+    minHeight: '135px',
+  },
+  title: {
+    marginTop: theme.spacing(2),
+    paddingBottom: theme.spacing(1),
+    paddingLeft: theme.spacing(1),
+    borderBottom: `1px solid ${theme.palette.divider}`,
+  },
+  wrapper: {
     display: 'flex',
     flexDirection: 'column',
     marginBottom: theme.spacing(2.5),
@@ -57,6 +69,7 @@ interface BarChartItemProps extends BarChartData {
 }
 
 interface BarChartProps {
+  title: string;
   data: BarChartData[];
   startDate?: string;
   onClickItem?: (item: any) => void;
@@ -109,7 +122,13 @@ export const BarChartItem: React.FC<BarChartItemProps> = ({
  * @param startDate
  * @constructor
  */
-export const BarChart: React.FC<BarChartProps> = ({ chartIds, data, startDate, onClickItem }) => {
+export const BarChart: React.FC<BarChartProps> = ({
+  title,
+  chartIds,
+  data,
+  startDate,
+  onClickItem,
+}) => {
   const styles = useStyles();
 
   const maxHeight = React.useMemo(() => {
@@ -126,24 +145,33 @@ export const BarChart: React.FC<BarChartProps> = ({ chartIds, data, startDate, o
   );
 
   return (
-    <div className={styles.container}>
-      <div className={styles.header}>
-        <span>{startDate}</span>
-        <span>Most Recent</span>
-      </div>
-      <div className={styles.body}>
-        {data.map((item, index) => (
-          <BarChartItem
-            value={(Math.log2(item.value) / maxHeight) * 100}
-            color={item.color}
-            tooltip={item.tooltip}
-            onClick={handleClickItem(item)}
-            key={`bar-chart-item-${index}`}
-            isSelected={
-              chartIds.length === 0 ? true : item.metadata && chartIds.includes(item.metadata.name)
-            }
-          />
-        ))}
+    <div>
+      <Typography className={styles.title} variant="h6">
+        {title}
+      </Typography>
+      <div className={styles.chartContainer}>
+        <div className={styles.wrapper}>
+          <div className={styles.header}>
+            <span>{startDate}</span>
+            <span>Most Recent</span>
+          </div>
+          <div className={styles.body}>
+            {data.map((item, index) => (
+              <BarChartItem
+                value={(Math.log2(item.value) / maxHeight) * 100}
+                color={item.color}
+                tooltip={item.tooltip}
+                onClick={handleClickItem(item)}
+                key={`bar-chart-item-${index}`}
+                isSelected={
+                  chartIds.length === 0
+                    ? true
+                    : item.metadata && chartIds.includes(item.metadata.name)
+                }
+              />
+            ))}
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/common/DataTable.tsx b/src/components/common/DataTable.tsx
index 6f12a421e..0eac31f02 100644
--- a/src/components/common/DataTable.tsx
+++ b/src/components/common/DataTable.tsx
@@ -10,6 +10,7 @@ import {
   TableRow,
 } from '@material-ui/core';
 import { COLOR_SPECTRUM } from 'components/Theme/colorSpectrum';
+import classNames from 'classnames';
 
 const useStyles = makeStyles((theme: Theme) => ({
   headerCell: {
@@ -20,9 +21,8 @@ const useStyles = makeStyles((theme: Theme) => ({
     padding: theme.spacing(1, 0, 1, 0),
     minWidth: '100px',
   },
-  cellLeft: {
-    padding: theme.spacing(1, 1, 1, 0),
-    minWidth: '100px',
+  withRightPadding: {
+    paddingRight: theme.spacing(1),
   },
 }));
 
@@ -45,7 +45,9 @@ export const DataTable: React.FC<DataTableProps> = ({ data }) => {
         <TableBody>
           {Object.keys(data).map((key) => (
             <TableRow key={key}>
-              <TableCell className={styles.cellLeft}>{key}</TableCell>
+              <TableCell className={classNames(styles.cell, styles.withRightPadding)}>
+                {key}
+              </TableCell>
               <TableCell className={styles.cell}>{data[key]}</TableCell>
             </TableRow>
           ))}
diff --git a/src/components/common/DomainSettingsSection.tsx b/src/components/common/DomainSettingsSection.tsx
index 54d1901c8..6d5ffcda9 100644
--- a/src/components/common/DomainSettingsSection.tsx
+++ b/src/components/common/DomainSettingsSection.tsx
@@ -1,28 +1,31 @@
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import * as React from 'react';
-import { Typography } from '@material-ui/core';
+import { IconButton, Typography } from '@material-ui/core';
 import { COLOR_SPECTRUM } from 'components/Theme/colorSpectrum';
 import { DataTable } from 'components/common/DataTable';
 import { Admin } from 'flyteidl';
 import { isEmpty } from 'lodash';
+import { LocalCacheItem, useLocalCache } from 'basics/LocalCache';
+import ExpandLess from '@material-ui/icons/ExpandLess';
+import ExpandMore from '@material-ui/icons/ExpandMore';
 import t from './strings';
 
 const useStyles = makeStyles((theme: Theme) => ({
   domainSettingsWrapper: {
-    paddingLeft: theme.spacing(1),
-    paddingRight: theme.spacing(1),
+    padding: theme.spacing(0, 2, 0, 2),
+  },
+  collapseButton: {
+    marginTop: theme.spacing(-0.5),
   },
   domainSettings: {
-    marginTop: theme.spacing(1),
-    borderTop: `1px solid ${COLOR_SPECTRUM.gray15.color}`,
     padding: theme.spacing(2, 4, 0, 4),
     display: 'flex',
     justifyContent: 'space-between',
   },
-  sectionHeader: {
-    margin: 0,
-    fontWeight: 700,
-    fontSize: '16px',
+  title: {
+    marginTop: theme.spacing(2),
+    paddingBottom: theme.spacing(1),
+    borderBottom: `1px solid ${theme.palette.divider}`,
   },
   subHeader: {
     margin: 0,
@@ -42,6 +45,8 @@ interface DomainSettingsSectionProps {
 
 export const DomainSettingsSection = ({ configData }: DomainSettingsSectionProps) => {
   const styles = useStyles();
+  const [showTable, setShowTable] = useLocalCache(LocalCacheItem.ShowDomainSettings);
+
   if (!configData || isEmpty(configData)) {
     return null;
   }
@@ -53,52 +58,68 @@ export const DomainSettingsSection = ({ configData }: DomainSettingsSectionProps
 
   return (
     <div className={styles.domainSettingsWrapper}>
-      <p className={styles.sectionHeader}>{t('domainSettingsTitle')}</p>
-      <div className={styles.domainSettings}>
-        <div>
-          <p className={styles.subHeader}>{t('securityContextHeader')}</p>
+      <Typography className={styles.title} variant="h6">
+        <IconButton
+          className={styles.collapseButton}
+          edge="start"
+          disableRipple={true}
+          disableTouchRipple={true}
+          onClick={() => setShowTable(!showTable)}
+          onMouseDown={(e) => e.preventDefault()}
+          size="small"
+          title={t('collapseButton', showTable)}
+        >
+          {showTable ? <ExpandLess /> : <ExpandMore />}
+        </IconButton>
+        {t('domainSettingsTitle')}
+      </Typography>
+      {showTable && (
+        <div className={styles.domainSettings}>
           <div>
-            <Typography variant="body1" className={styles.grayText}>
-              {t('iamRoleHeader')}
-            </Typography>
-            <Typography variant="body2">{role}</Typography>
+            <p className={styles.subHeader}>{t('securityContextHeader')}</p>
+            <div>
+              <Typography variant="body1" className={styles.grayText}>
+                {t('iamRoleHeader')}
+              </Typography>
+              <Typography variant="body2">{role}</Typography>
+            </div>
+            <div>
+              <Typography variant="body1" className={styles.grayText}>
+                {t('serviceAccountHeader')}
+              </Typography>
+              <Typography variant="body2">{serviceAccount}</Typography>
+            </div>
           </div>
           <div>
-            <Typography variant="body1" className={styles.grayText}>
-              {t('serviceAccountHeader')}
-            </Typography>
-            <Typography variant="body2">{serviceAccount}</Typography>
+            <p className={styles.subHeader}>{t('labelsHeader')}</p>
+            {configData.labels?.values ? (
+              <DataTable data={configData.labels.values} />
+            ) : (
+              t('inherited')
+            )}
           </div>
-        </div>
-        <div>
-          <p className={styles.subHeader}>{t('labelsHeader')}</p>
-          {configData.labels?.values ? (
-            <DataTable data={configData.labels.values} />
-          ) : (
-            t('inherited')
-          )}
-        </div>
-        <div>
-          <p className={styles.subHeader}>{t('annotationsHeader')}</p>
-          {configData.annotations?.values ? (
-            <DataTable data={configData.annotations.values} />
-          ) : (
-            t('inherited')
-          )}
-        </div>
-        <div>
           <div>
-            <p className={styles.subHeader}>{t('rawDataHeader')}</p>
-            <Typography variant="body2">{rawData}</Typography>
+            <p className={styles.subHeader}>{t('annotationsHeader')}</p>
+            {configData.annotations?.values ? (
+              <DataTable data={configData.annotations.values} />
+            ) : (
+              t('inherited')
+            )}
           </div>
           <div>
-            <p className={styles.subHeader} style={{ paddingTop: '20px' }}>
-              {t('maxParallelismHeader')}
-            </p>
-            <Typography variant="body2">{maxParallelism ?? t('inherited')}</Typography>
+            <div>
+              <p className={styles.subHeader}>{t('rawDataHeader')}</p>
+              <Typography variant="body2">{rawData}</Typography>
+            </div>
+            <div>
+              <p className={styles.subHeader} style={{ paddingTop: '20px' }}>
+                {t('maxParallelismHeader')}
+              </p>
+              <Typography variant="body2">{maxParallelism ?? t('inherited')}</Typography>
+            </div>
           </div>
         </div>
-      </div>
+      )}
     </div>
   );
 };
diff --git a/src/components/common/strings.ts b/src/components/common/strings.ts
index 33a3e0f0b..e893ff886 100644
--- a/src/components/common/strings.ts
+++ b/src/components/common/strings.ts
@@ -2,6 +2,7 @@ import { createLocalizedString } from 'basics/Locale';
 
 const str = {
   annotationsHeader: 'Annotations',
+  collapseButton: (showAll: boolean) => (showAll ? 'Collapse' : 'Expand'),
   domainSettingsTitle: 'Domain Settings',
   iamRoleHeader: 'IAM Role',
   inherited: 'Inherits from project level values',