diff --git a/fbcnms-packages/fbcnms-ui/components/Colors.js b/fbcnms-packages/fbcnms-ui/components/Colors.js
new file mode 100644
index 0000000..0c51491
--- /dev/null
+++ b/fbcnms-packages/fbcnms-ui/components/Colors.js
@@ -0,0 +1,63 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+export const colors = {
+  primary: {
+    white: '#FFFFFF',
+    selago: '#F4F7FD',
+    concrete: '#F2F2F2',
+    mercury: '#E5E5E5',
+    nobel: '#B3B3B3',
+    gullGray: '#9DA7BB',
+    comet: '#545F77',
+    brightGray: '#323845',
+    mirage: '#171B25',
+  },
+  secondary: {
+    malibu: '#88B3F9',
+    dodgerBlue: '#3984FF',
+    mariner: '#1F5BC4',
+  },
+  button: {
+    lightOutline: '#CCD0DB',
+    fill: '#FAFAFB',
+  },
+  state: {
+    positive: '#31BF56',
+    positiveAlt: '#229A41',
+    error: '#E52240',
+    errorAlt: '#B21029',
+    errorFill: '#FFF8F9',
+    warning: '#F5DD5A',
+    warningAlt: '#B69900',
+    warningFill: '#FFFCED',
+  },
+  alerts: {
+    severe: 'E52240',
+    major: '#E36730',
+    minor: '#F5DD5A',
+    other: '#88B3F9',
+  },
+  data: {
+    coral: '#FF824B',
+    flamePea: '#E36730',
+    portage: '#A07EEA',
+    studio: '#6649A6',
+  },
+  code: {
+    crusta: '#F76D47',
+    pelorous: '#39B6C8',
+    electricViolet: '#7D4DFF',
+    orchid: '#DA70D6',
+    chelseaCucumber: '#91B859',
+    candlelight: '#FFD715',
+    mischka: '#D4D8DE',
+  },
+};
diff --git a/fbcnms-packages/fbcnms-ui/components/DataGrid.js b/fbcnms-packages/fbcnms-ui/components/DataGrid.js
new file mode 100644
index 0000000..f11d1f2
--- /dev/null
+++ b/fbcnms-packages/fbcnms-ui/components/DataGrid.js
@@ -0,0 +1,266 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+import typeof SvgIcon from '@material-ui/core/@@SvgIcon';
+
+import Card from '@material-ui/core/Card';
+import CardHeader from '@material-ui/core/CardHeader';
+import Collapse from '@material-ui/core/Collapse';
+import Divider from '@material-ui/core/Divider';
+import ExpandLess from '@material-ui/icons/ExpandLess';
+import ExpandMore from '@material-ui/icons/ExpandMore';
+import Grid from '@material-ui/core/Grid';
+import IconButton from '@material-ui/core/IconButton';
+import Input from '@material-ui/core/Input';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import React from 'react';
+import Visibility from '@material-ui/icons/Visibility';
+import VisibilityOff from '@material-ui/icons/VisibilityOff';
+
+import {colors} from './Colors';
+import {makeStyles} from '@material-ui/styles';
+
+const useStyles = makeStyles(theme => ({
+  dataHeaderBlock: {
+    display: 'flex',
+    alignItems: 'center',
+    padding: 0,
+  },
+  dataHeaderContent: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  dataHeaderIcon: {
+    fill: colors.primary.comet,
+    marginRight: theme.spacing(1),
+  },
+  dataBlock: {
+    boxShadow: `0 0 0 1px ${colors.primary.concrete}`,
+  },
+  dataLabel: {
+    color: colors.primary.comet,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+  dataValue: {
+    color: colors.primary.brightGray,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    width: props =>
+      props.hasStatus
+        ? 'calc(100% - 16px)'
+        : props.hasIcon
+        ? 'calc(100% - 32px)'
+        : '100%',
+  },
+  dataObscuredValue: {
+    color: colors.primary.brightGray,
+    width: '100%',
+
+    '& input': {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    },
+  },
+  dataBox: {
+    width: '100%',
+    padding: props => (props.collapsed ? '0' : null),
+
+    '& > div': {
+      width: '100%',
+    },
+  },
+  dataIcon: {
+    display: 'flex',
+    alignItems: 'center',
+
+    '& svg': {
+      fill: colors.primary.comet,
+      marginRight: theme.spacing(1),
+    },
+  },
+  list: {
+    padding: 0,
+  },
+}));
+
+// Data Icon adds an icon to the left of the value
+function DataIcon(icon: SvgIcon, val: string) {
+  const props = {hasIcon: true};
+  const classes = useStyles(props);
+  const Icon = icon;
+  return (
+    <Grid container alignItems="center">
+      <Grid item className={classes.dataIcon}>
+        <Icon />
+      </Grid>
+      <Grid item className={classes.dataValue}>
+        {val}
+      </Grid>
+    </Grid>
+  );
+}
+
+// Data Obscure makes the field into a password type filed with a visibility toggle for more sensitive fields.
+function DataObscure(value: number | string, category: ?string) {
+  const [showPassword, setShowPassword] = React.useState(false);
+  return (
+    <Input
+      type={showPassword ? 'text' : 'password'}
+      fullWidth={true}
+      value={value}
+      disableUnderline={true}
+      readOnly={true}
+      data-testid={`${category ?? value} obscure`}
+      endAdornment={
+        <InputAdornment position="end">
+          <IconButton
+            aria-label="toggle password visibility"
+            onClick={() => setShowPassword(!showPassword)}
+            onMouseDown={event => event.preventDefault()}>
+            {showPassword ? <Visibility /> : <VisibilityOff />}
+          </IconButton>
+        </InputAdornment>
+      }
+    />
+  );
+}
+
+function DataCollapse(data: Data) {
+  const props = {collapsed: true};
+  const classes = useStyles(props);
+  const [open, setOpen] = React.useState(true);
+  const dataEntryValue = data.value + (data.unit ?? '');
+  return (
+    <List
+      key={`${data.category ?? data.value}Collapse`}
+      className={classes.list}>
+      <ListItem button onClick={() => setOpen(!open)}>
+        <CardHeader
+          data-testid={data.category}
+          title={data.category}
+          className={classes.dataBox}
+          subheader={
+            data.icon
+              ? DataIcon(data.icon, dataEntryValue)
+              : data.obscure === true
+              ? DataObscure(data.value, data.category)
+              : dataEntryValue
+          }
+          titleTypographyProps={{
+            variant: 'caption',
+            className: classes.dataLabel,
+            title: data.category,
+          }}
+          subheaderTypographyProps={{
+            variant: 'body1',
+            className: classes.dataValue,
+            title: data.tooltip ?? dataEntryValue,
+          }}
+        />
+        {open ? <ExpandLess /> : <ExpandMore />}
+      </ListItem>
+      <Divider />
+      <Collapse key={data.value} in={open} timeout="auto" unmountOnExit>
+        {data.collapse ?? <></>}
+      </Collapse>
+    </List>
+  );
+}
+
+type Data = {
+  icon?: SvgIcon,
+  category?: string,
+  value: number | string,
+  obscure?: boolean,
+  //$FlowFixMe TODO: Needs a ComponentType argument
+  collapse?: ComponentType | boolean,
+  unit?: string,
+  statusCircle?: boolean,
+  statusInactive?: boolean,
+  status?: boolean,
+  tooltip?: string,
+};
+
+export type DataRows = Data[];
+
+type Props = {data: DataRows[], testID?: string};
+
+export default function DataGrid(props: Props) {
+  const classes = useStyles();
+  const dataGrid = props.data.map((row, i) => (
+    <Grid key={i} container direction="row">
+      {row.map((data, j) => {
+        const dataEntryValue = data.value + (data.unit ?? '');
+
+        return (
+          <React.Fragment key={`data-${i}-${j}`}>
+            <Grid
+              item
+              container
+              alignItems="center"
+              xs={12}
+              md
+              key={`data-${i}-${j}`}
+              zeroMinWidth
+              className={classes.dataBlock}>
+              <Grid item xs={12}>
+                {data.collapse !== undefined && data.collapse !== false ? (
+                  DataCollapse(data)
+                ) : (
+                  <CardHeader
+                    data-testid={data.category}
+                    className={classes.dataBox}
+                    title={data.category}
+                    titleTypographyProps={{
+                      variant: 'caption',
+                      className: classes.dataLabel,
+                      title: data.category,
+                    }}
+                    subheaderTypographyProps={{
+                      variant: 'body1',
+                      className:
+                        data.obscure === true
+                          ? classes.dataObscuredValue
+                          : classes.dataValue,
+                      title: data.tooltip ?? dataEntryValue,
+                    }}
+                    subheader={
+                      data.icon
+                        ? DataIcon(data.icon, dataEntryValue)
+                        : data.obscure === true
+                        ? DataObscure(data.value, data.category)
+                        : dataEntryValue
+                    }
+                  />
+                )}
+              </Grid>
+            </Grid>
+          </React.Fragment>
+        );
+      })}
+    </Grid>
+  ));
+  return (
+    <Card elevation={0}>
+      <Grid
+        container
+        alignItems="center"
+        justify="center"
+        data-testid={props.testID ?? null}>
+        {dataGrid}
+      </Grid>
+    </Card>
+  );
+}
diff --git a/fbcnms-packages/fbcnms-ui/master/OrganizationDialog.js b/fbcnms-packages/fbcnms-ui/master/OrganizationDialog.js
index a1fbd26..d72a586 100644
--- a/fbcnms-packages/fbcnms-ui/master/OrganizationDialog.js
+++ b/fbcnms-packages/fbcnms-ui/master/OrganizationDialog.js
@@ -21,6 +21,7 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import FormLabel from '@material-ui/core/FormLabel';
+import Input from '@material-ui/core/Input';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
@@ -31,12 +32,15 @@ import React from 'react';
 import Select from '@material-ui/core/Select';
 import Tab from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
+import TypedSelect from '@fbcnms/ui/components/TypedSelect';
+import renderList from '@fbcnms/util/renderList';
 
 import {AltFormField} from '../components/FormField';
 import {UserRoles} from '@fbcnms/auth/types';
+import {getProjectTabs as getAllProjectTabs} from '@fbcnms/projects/projects';
 import {makeStyles} from '@material-ui/styles';
 import {useAxios} from '@fbcnms/ui/hooks';
-import {useState} from 'react';
+import {useEffect, useState} from 'react';
 
 const useStyles = makeStyles(_ => ({
   input: {
@@ -58,6 +62,9 @@ type Props = {
   onCreateUser: (user: CreateUserType) => void,
   addUser: boolean,
   setAddUser: () => void,
+  createError: string,
+  open: boolean,
+  organization: any,
 };
 
 type CreateUserType = {
@@ -85,13 +92,16 @@ export default function (props: Props) {
   });
 
   const [organization, setOrganization] = useState<OrganizationPlainAttributes>(
-    {},
+    props.organization || {},
   );
-  const [currentTab, setCurrentTab] = useState(props.addUser ? 1 : 0);
+  const [currentTab, setCurrentTab] = useState(0);
   const [shouldEnableAllNetworks, setShouldEnableAllNetworks] = useState(false);
   const [user, setUser] = useState<CreateUserType>({});
   const [createError, setCreateError] = useState('');
   const allNetworks = error || !response ? [] : response.data.sort();
+  useEffect(() => {
+    setCurrentTab(props.addUser ? 1 : 0);
+  }, [props.addUser]);
 
   if (isLoading) {
     return <LoadingFillerBackdrop />;
@@ -155,12 +165,16 @@ export default function (props: Props) {
             : Array.from(user.networkIDs || []),
       };
       props.onCreateUser(payload);
+      // console.log(createError, 'error');
+      // if(createError) {}
+      // props.onClose();
+      // setUser({});
     }
   };
 
   return (
     <Dialog
-      open={true}
+      open={props.open}
       onClose={props.onClose}
       maxWidth={'sm'}
       fullWidth={true}>
@@ -170,8 +184,8 @@ export default function (props: Props) {
         value={currentTab}
         className={classes.tabBar}
         onChange={(_, v) => setCurrentTab(v)}>
-        <Tab disabled={currentTab === 2} label={'Organization'} />
-        <Tab disabled={currentTab === 1} label={'Users'} />
+        <Tab disabled={currentTab === 1} label={'Organization'} />
+        <Tab disabled={currentTab === 0} label={'Users'} />
       </Tabs>
       <>
         {currentTab === 0 && <OrganizationDialog {...createProps} />}
@@ -207,7 +221,9 @@ function OrganizationDialog(props: DialogProps) {
     setShouldEnableAllNetworks,
   } = props;
   const [open, setOpen] = useState(false);
-
+  const allTabs = props.getProjectTabs
+    ? props.getProjectTabs()
+    : getAllProjectTabs();
   return (
     <DialogContent>
       <List>
@@ -263,7 +279,10 @@ function OrganizationDialog(props: DialogProps) {
             label={'Give this organization access to all networks'}
             control={
               <Checkbox
-                checked={shouldEnableAllNetworks}
+                checked={
+                  shouldEnableAllNetworks ||
+                  organization.networkIDs?.length === allNetworks.length
+                }
                 onChange={() =>
                   setShouldEnableAllNetworks(!shouldEnableAllNetworks)
                 }
@@ -271,6 +290,252 @@ function OrganizationDialog(props: DialogProps) {
             }
           />
           <FormHelperText>{ENABLE_ALL_NETWORKS_HELPER}</FormHelperText>
+          {/* Editing an organization */}
+          {Object.entries(props.organization || {}).length > 0 && (
+            <>
+              <AltFormField disableGutters label={'Accessible Tabs'}>
+                <Select
+                  multiple
+                  value={Array.from(organization.tabs)}
+                  onChange={({target}) =>
+                    props.onOrganizationChange({
+                      ...organization,
+                      tabs: target.value,
+                    })
+                  }
+                  renderValue={value => {
+                    const selectedTabs = new Set(value);
+                    return renderList(
+                      allTabs
+                        .filter(tab => selectedTabs.has(tab.id))
+                        .map(x => x.name),
+                    );
+                  }}
+                  input={<Input id="tabs" />}>
+                  {allTabs.map(tab => (
+                    <MenuItem key={tab.id} value={tab.id}>
+                      <Checkbox checked={organization.tabs.has(tab.id)} />
+                      <ListItemText primary={tab.name} />
+                    </MenuItem>
+                  ))}
+                </Select>
+              </AltFormField>
+
+              <AltFormField
+                disableGutters
+                label={'CSV Charset (default: utf-8)'}>
+                <OutlinedInput
+                  data-testid="name"
+                  placeholder="Organization Name"
+                  fullWidth={true}
+                  value={organization.csvCharset}
+                  onChange={({target}) => {
+                    props.onOrganizationChange({
+                      ...organization,
+                      csvCharset: target.value,
+                    });
+                  }}
+                />
+              </AltFormField>
+
+              {/* <Paper className={classes.root} elevation={1}>
+                <Text variant="h6">Advanced Settings</Text>
+                <form noValidate autoComplete="off">
+                  <FormGroup>
+                    <TextField
+                      label="CSV Charset (default: utf-8)"
+                      className={classes.textField}
+                      value={csvCharset}
+                      onChange={evt => setCsvCharset(evt.target.value)}
+                      margin="normal"
+                    />
+                  </FormGroup>
+                </form>
+              </Paper> */}
+
+              <AltFormField label={'Single Sign-On'}>
+                <TypedSelect
+                  value={organization.ssoSelectedType}
+                  // className={classes.textField}
+                  items={{
+                    none: 'Disabled',
+                    oidc: 'OpenID Connect',
+                    saml: 'SAML',
+                  }}
+                  onChange={target =>
+                    props.onOrganizationChange({
+                      ...organization,
+                      ssoSelectedType: target.value,
+                    })
+                  }
+                  input={<Input id="ssoSelectedType" />}
+                />
+              </AltFormField>
+              {organization.ssoSelectedType === 'saml' ? (
+                <>
+                  {/* <FormGroup>
+                        <TextField
+                          label="Issuer"
+                          className={classes.textField}
+                          value={ssoIssuer}
+                          onChange={evt => setSSOIssuer(evt.target.value)}
+                          margin="normal"
+                        />
+                      </FormGroup> */}
+
+                  <AltFormField disableGutters label={'Issuer'}>
+                    <OutlinedInput
+                      data-testid="name"
+                      placeholder="Issuer"
+                      fullWidth={true}
+                      value={organization.ssoIssuer}
+                      onChange={({target}) => {
+                        props.onOrganizationChange({
+                          ...organization,
+                          ssoIssuer: target.value,
+                        });
+                      }}
+                    />
+                  </AltFormField>
+                  {/* 
+                      <FormGroup>
+                        <TextField
+                          label="Entrypoint"
+                          className={classes.textField}
+                          value={ssoEntrypoint}
+                          onChange={evt => setSSOEntrypoint(evt.target.value)}
+                          margin="normal"
+                        />
+                      </FormGroup> */}
+                  <AltFormField disableGutters label={'Entrypoint'}>
+                    <OutlinedInput
+                      data-testid="name"
+                      placeholder="Entrypoint"
+                      fullWidth={true}
+                      value={organization.ssoEntrypoint}
+                      onChange={({target}) => {
+                        props.onOrganizationChange({
+                          ...organization,
+                          ssoEntrypoint: target.value,
+                        });
+                      }}
+                    />
+                  </AltFormField>
+
+                  {/* 
+                      <FormGroup>
+                        <TextField
+                          label="Certificate"
+                          multiline
+                          rows="4"
+                          value={ssoCert}
+                          onChange={evt => setSSOCert(evt.target.value)}
+                          className={classes.textField}
+                          margin="normal"
+                          variant="filled"
+                        />
+                      </FormGroup> */}
+
+                  <AltFormField disableGutters label={'Certificate'}>
+                    <OutlinedInput
+                      data-testid="name"
+                      placeholder="Certificate"
+                      fullWidth={true}
+                      value={organization.ssoCert}
+                      onChange={({target}) => {
+                        props.onOrganizationChange({
+                          ...organization,
+                          ssoCerts: target.value,
+                        });
+                      }}
+                    />
+                  </AltFormField>
+                </>
+              ) : null}
+              {organization.ssoSelectedType === 'oidc' ? (
+                <>
+                  {/* <FormGroup>
+                        <TextField
+                          label="Client ID"
+                          className={classes.textField}
+                          value={ssoOidcClientID}
+                          onChange={evt => setSSOOidcClientID(evt.target.value)}
+                          margin="normal"
+                        />
+                      </FormGroup> */}
+
+                  <AltFormField disableGutters label={'Client ID'}>
+                    <OutlinedInput
+                      data-testid="name"
+                      placeholder="Certificate"
+                      fullWidth={true}
+                      value={organization.ssoOidcClientID}
+                      onChange={({target}) => {
+                        props.onOrganizationChange({
+                          ...organization,
+                          ssoOidcClientID: target.value,
+                        });
+                      }}
+                    />
+                  </AltFormField>
+
+                  {/* <FormGroup>
+                        <TextField
+                          label="Client Secret"
+                          className={classes.textField}
+                          value={ssoOidcClientSecret}
+                          onChange={evt =>
+                            setSSOOidcClientSecret(evt.target.value)
+                          }
+                          margin="normal"
+                        />
+                      </FormGroup> */}
+
+                  <AltFormField disableGutters label={'Client Secret'}>
+                    <OutlinedInput
+                      data-testid="name"
+                      placeholder="Certificate"
+                      fullWidth={true}
+                      value={organization.ssoOidcClientSecret}
+                      onChange={({target}) => {
+                        props.onOrganizationChange({
+                          ...organization,
+                          ssoOidcClientSecret: target.value,
+                        });
+                      }}
+                    />
+                  </AltFormField>
+
+                  {/* <FormGroup>
+                        <TextField
+                          label="Configuration URL"
+                          className={classes.textField}
+                          value={ssoOidcConfigurationURL}
+                          onChange={evt =>
+                            setSSOOidcConfigurationURL(evt.target.value)
+                          }
+                          margin="normal"
+                        />
+                      </FormGroup> */}
+
+                  <AltFormField disableGutters label={'Configuration URL'}>
+                    <OutlinedInput
+                      data-testid="name"
+                      placeholder="Certificate"
+                      fullWidth={true}
+                      value={organization.ssoOidcConfigurationURL}
+                      onChange={({target}) => {
+                        props.onOrganizationChange({
+                          ...organization,
+                          ssoOidcConfigurationURL: target.value,
+                        });
+                      }}
+                    />
+                  </AltFormField>
+                </>
+              ) : null}
+            </>
+          )}
         </Collapse>
       </List>
     </DialogContent>
diff --git a/fbcnms-packages/fbcnms-ui/master/OrganizationEdit.js b/fbcnms-packages/fbcnms-ui/master/OrganizationEdit.js
index 861d012..d312c0a 100644
--- a/fbcnms-packages/fbcnms-ui/master/OrganizationEdit.js
+++ b/fbcnms-packages/fbcnms-ui/master/OrganizationEdit.js
@@ -8,32 +8,26 @@
  * @format
  */
 
+import type {DataRows} from '@fbcnms/ui/components/DataGrid';
 import type {Organization} from './Organizations';
-import type {SSOSelectedType} from '@fbcnms/types/auth';
-import type {Tab} from '@fbcnms/types/tabs';
+import type {WithAlert} from '@fbcnms/ui/components/Alert/withAlert';
 
+import ActionTable from '@fbcnms/ui/components/ActionTable';
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import Button from '@fbcnms/ui/components/design-system/Button';
-import Checkbox from '@material-ui/core/Checkbox';
-import FormControl from '@material-ui/core/FormControl';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormGroup from '@material-ui/core/FormGroup';
+// import CircularProgress from '@material-ui/core/CircularProgress';
+import DataGrid from '@fbcnms/ui/components/DataGrid';
 import Grid from '@material-ui/core/Grid';
-import Input from '@material-ui/core/Input';
-import InputLabel from '@material-ui/core/InputLabel';
-import ListItemText from '@material-ui/core/ListItemText';
+import IconButton from '@material-ui/core/IconButton';
 import LoadingFiller from '@fbcnms/ui/components/LoadingFiller';
-import MenuItem from '@material-ui/core/MenuItem';
-import Paper from '@material-ui/core/Paper';
+import OrganizationDialog from './OrganizationDialog';
 import React from 'react';
-import SaveIcon from '@material-ui/icons/Save';
-import Select from '@material-ui/core/Select';
 import Text from '@fbcnms/ui/components/design-system/Text';
-import TextField from '@material-ui/core/TextField';
-import TypedSelect from '@fbcnms/ui/components/TypedSelect';
 import axios from 'axios';
-import renderList from '@fbcnms/util/renderList';
 import symphony from '@fbcnms/ui/theme/symphony';
-import {getProjectTabs as getAllProjectTabs} from '@fbcnms/projects/projects';
+import withAlert from '@fbcnms/ui/components/Alert/withAlert';
+
+// import {getProjectTabs as getAllProjectTabs} from '@fbcnms/projects/projects';
 import {intersection} from 'lodash';
 import {makeStyles} from '@material-ui/styles';
 import {useAxios, useRouter} from '@fbcnms/ui/hooks';
@@ -41,10 +35,21 @@ import {useCallback, useEffect, useState} from 'react';
 import {useEnqueueSnackbar} from '@fbcnms/ui/hooks/useSnackbar';
 
 const useStyles = makeStyles(theme => ({
+  arrowBack: {
+    paddingRight: '0px',
+    color: 'black',
+  },
+  buttonText: {
+    color: 'black',
+  },
+  container: {
+    margin: '40px 32px',
+  },
   header: {
     margin: '10px',
     display: 'flex',
     justifyContent: 'space-between',
+    textTransform: 'capitalize',
   },
   leftIcon: {
     marginRight: theme.spacing(),
@@ -69,33 +74,70 @@ const useStyles = makeStyles(theme => ({
   flexGrow: {
     flexGrow: 1,
   },
+  loading: {
+    textAlign: 'center',
+  },
+  titleRow: {
+    margin: '16px 0',
+  },
 }));
 
-type Props = {
-  getProjectTabs?: () => Array<{id: Tab, name: string}>,
+// type Props = {
+//   getProjectTabs?: () => Array<{id: Tab, name: string}>,
+// };
+
+export type EditUser = {
+  id: string,
+  email: string,
+  role: number,
+  networkIDs?: string[],
+  organization?: string,
+};
+type TitleRowProps = {
+  title: string,
+  buttonTitle: string,
+  onClick: () => void,
 };
+function TitleRow(props: TitleRowProps) {
+  const classes = useStyles();
+  return (
+    <Grid container justify="space-between" className={classes.titleRow}>
+      <Text variant="h6">{props.title}</Text>
+      <Button variant="text" onClick={() => props.onClick()}>
+        <Text variant="body2" color="gray" weight="bold">
+          {props.buttonTitle}
+        </Text>
+      </Button>
+    </Grid>
+  );
+}
 
-export default function OrganizationEdit(props: Props) {
-  const {match} = useRouter();
+export default function OrganizationEdit() {
+  const {match, history, relativeUrl} = useRouter();
+  const [addUser, setAddUser] = useState(false);
   const classes = useStyles();
   const enqueueSnackbar = useEnqueueSnackbar();
   const [name, setName] = useState<string>('');
-  const [csvCharset, setCsvCharset] = useState<string>('');
-  const [tabs, setTabs] = useState<Set<string>>(new Set());
+  // const [csvCharset, setCsvCharset] = useState<string>('');
+  // const [tabs, setTabs] = useState<Set<string>>(new Set());
   const [shouldEnableAllNetworks, setShouldEnableAllNetworks] = useState(false);
+
   const [networkIds, setNetworkIds] = useState<Set<string>>(new Set());
-  const [ssoSelectedType, setSSOSelectedType] = useState<SSOSelectedType>(
-    'saml',
-  );
-  const [ssoIssuer, setSSOIssuer] = useState<string>('');
-  const [ssoEntrypoint, setSSOEntrypoint] = useState<string>('');
-  const [ssoCert, setSSOCert] = useState<string>('');
-  const [ssoOidcClientID, setSSOOidcClientID] = useState<string>('');
-  const [ssoOidcClientSecret, setSSOOidcClientSecret] = useState<string>('');
+  // const [ssoSelectedType, setSSOSelectedType] = useState<SSOSelectedType>(
+  //   'saml',
+  // );
+  // const [ssoIssuer, setSSOIssuer] = useState<string>('');
+  // const [ssoEntrypoint, setSSOEntrypoint] = useState<string>('');
+  // const [ssoCert, setSSOCert] = useState<string>('');
+  const [_ssoOidcClientID, setSSOOidcClientID] = useState<string>('');
+  const [_ssoOidcClientSecret, setSSOOidcClientSecret] = useState<string>('');
   const [
-    ssoOidcConfigurationURL,
+    _ssoOidcConfigurationURL,
     setSSOOidcConfigurationURL,
   ] = useState<string>('');
+  const [dialog, setDialog] = useState(false);
+  const [createError, setCreateError] = useState('');
+  const [refresh, setRefresh] = useState(Date.now());
 
   const orgRequest = useAxios<null, {organization: Organization}>({
     method: 'get',
@@ -103,13 +145,13 @@ export default function OrganizationEdit(props: Props) {
     onResponse: useCallback(res => {
       const {organization} = res.data;
       setName(organization.name);
-      setTabs(new Set(organization.tabs));
+      // setTabs(new Set(organization.tabs));
       setNetworkIds(new Set(organization.networkIDs));
-      setCsvCharset(organization.csvCharset);
-      setSSOSelectedType(organization.ssoSelectedType);
-      setSSOIssuer(organization.ssoIssuer);
-      setSSOEntrypoint(organization.ssoEntrypoint);
-      setSSOCert(organization.ssoCert);
+      // setCsvCharset(organization.csvCharset);
+      // setSSOSelectedType(organization.ssoSelectedType);
+      // setSSOIssuer(organization.ssoIssuer);
+      // setSSOEntrypoint(organization.ssoEntrypoint);
+      // setSSOCert(organization.ssoCert);
       setSSOOidcClientID(organization.ssoOidcClientID);
       setSSOOidcClientSecret(organization.ssoOidcClientSecret);
       setSSOOidcConfigurationURL(organization.ssoOidcConfigurationURL);
@@ -145,22 +187,26 @@ export default function OrganizationEdit(props: Props) {
       ? []
       : networksRequest.response.data.sort();
 
+  // const allTabs = props.getProjectTabs
+  //   ? props.getProjectTabs()
+  //   : getAllProjectTabs();
+
   const onSave = () => {
     axios
       .put('/master/organization/async/' + match.params.name, {
-        name,
-        tabs: Array.from(tabs),
+        name: organization.name,
+        // tabs: Array.from(tabs),
         networkIDs: shouldEnableAllNetworks
           ? allNetworks
-          : Array.from(networkIds),
-        csvCharset,
-        ssoSelectedType,
-        ssoIssuer,
-        ssoEntrypoint,
-        ssoCert,
-        ssoOidcClientID,
-        ssoOidcClientSecret,
-        ssoOidcConfigurationURL,
+          : Array.from(organization.networkIDs),
+        // csvCharset,
+        // ssoSelectedType,
+        // ssoIssuer,
+        // ssoEntrypoint,
+        // ssoCert,
+        // ssoOidcClientID,
+        // ssoOidcClientSecret,
+        // ssoOidcConfigurationURL,
       })
       .then(_res => {
         enqueueSnackbar('Updated organization successfully', {
@@ -175,205 +221,279 @@ export default function OrganizationEdit(props: Props) {
       });
   };
 
-  const allTabs = props.getProjectTabs
-    ? props.getProjectTabs()
-    : getAllProjectTabs();
-
   return (
-    <Grid container spacing={3}>
-      <Grid item xs={12}>
-        <Text className={classes.header} variant="h4">
-          Organization: {organization.name}
-        </Text>
-      </Grid>
-      <Grid item xs={3} />
-      <Grid item xs={6}>
-        <Paper className={classes.root} elevation={1}>
-          <Text variant="h6">Basic Info</Text>
-          <form noValidate autoComplete="off">
-            <FormGroup>
-              <TextField
-                label="Name"
-                className={classes.textField}
-                value={name}
-                onChange={evt => setName(evt.target.value)}
-                margin="normal"
-              />
-            </FormGroup>
-            <FormGroup>
-              <FormControl className={classes.textField} margin="normal">
-                <InputLabel htmlFor="tabs">Accessible Tabs</InputLabel>
-                <Select
-                  multiple
-                  value={Array.from(tabs)}
-                  onChange={({target}) => setTabs(new Set(target.value))}
-                  renderValue={value => {
-                    const selectedTabs = new Set(value);
-                    return renderList(
-                      allTabs
-                        .filter(tab => selectedTabs.has(tab.id))
-                        .map(x => x.name),
-                    );
+    <>
+      <div className={classes.container}>
+        <OrganizationDialog
+          organization={organization}
+          open={dialog}
+          addUser={addUser}
+          createError={createError}
+          setAddUser={() => setAddUser(true)}
+          onClose={() => {
+            setAddUser(false);
+            setDialog(false);
+          }}
+          onCreateOrg={org => {
+            onSave(org);
+            setDialog(false);
+            // axios
+            //   .post('/master/organization/async', org)
+            //   .then(() => {
+            //     enqueueSnackbar('Organization added successfully', {
+            //       variant: 'success',
+            //     });
+            //     axios
+            //       .get(`/master/organization/async/${org.name}`)
+            //       .then(resp => {
+            //         newOrg = resp.data.organization;
+            //         if (newOrg) {
+            //           // setOrganizations([...organizations, newOrg]);
+            //           // setAddingUserFor(newOrg);
+            //         }
+            //       });
+            //   })
+            //   .catch(error => {
+            //     // setAddUser(false);
+            //     history.push(relativeUrl(''));
+            //     enqueueSnackbar(error?.response?.data?.error || error, {
+            //       variant: 'error',
+            //     });
+            //   });
+          }}
+          onCreateUser={user => {
+            axios
+              .post(
+                `/master/organization/async/${
+                  match.params.name || ''
+                }/add_user`,
+                user,
+              )
+              .then(() => {
+                enqueueSnackbar('User added successfully', {
+                  variant: 'success',
+                });
+                setDialog(false);
+                history.push(relativeUrl(''));
+              })
+              .catch(error => {
+                setCreateError(error);
+                enqueueSnackbar(error?.response?.data?.error || error, {
+                  variant: 'error',
+                });
+              });
+          }}
+        />
+        <Grid container spacing={4}>
+          <Grid container justify="space-between">
+            <Grid item>
+              <Grid container alignItems="center">
+                <Grid>
+                  <IconButton
+                    onClick={() => history.goBack()}
+                    className={classes.arrowBack}
+                    color="primary">
+                    <ArrowBackIcon />
+                  </IconButton>
+                </Grid>
+                <Grid>
+                  <Text className={classes.header} variant="h4">
+                    {organization.name}
+                  </Text>
+                </Grid>
+              </Grid>
+            </Grid>
+            <Grid item>
+              <Button>Remove Organization</Button>
+            </Grid>
+          </Grid>
+          <Grid item xs={12}>
+            <Grid container spacing={4}>
+              <Grid item xs={12} md={6} alignItems="center">
+                <TitleRow
+                  title={'Organizations'}
+                  buttonTitle={'Edit'}
+                  onClick={() => {
+                    setAddUser(false);
+                    setDialog(true);
                   }}
-                  input={<Input id="tabs" />}>
-                  {allTabs.map(tab => (
-                    <MenuItem key={tab.id} value={tab.id}>
-                      <Checkbox checked={tabs.has(tab.id)} />
-                      <ListItemText primary={tab.name} />
-                    </MenuItem>
-                  ))}
-                </Select>
-              </FormControl>
-            </FormGroup>
-            <FormGroup className={`${classes.networks} ${classes.textField}`}>
-              <FormControlLabel
-                control={
-                  <Checkbox
-                    checked={shouldEnableAllNetworks}
-                    onChange={({target}) =>
-                      setShouldEnableAllNetworks(target.checked)
-                    }
-                    color="primary"
-                    margin="normal"
-                  />
-                }
-                label="Enable All Networks"
-              />
-              {!shouldEnableAllNetworks && (
-                <FormControl className={classes.flexGrow}>
-                  <InputLabel htmlFor="network_ids">
-                    Accessible Networks
-                  </InputLabel>
-                  <Select
-                    multiple
-                    value={Array.from(networkIds)}
-                    onChange={({target}) =>
-                      setNetworkIds(new Set(target.value))
-                    }
-                    renderValue={renderList}
-                    input={<Input id="network_ids" />}>
-                    {allNetworks.map(network => (
-                      <MenuItem key={network} value={network}>
-                        <Checkbox checked={networkIds.has(network)} />
-                        <ListItemText primary={network} />
-                      </MenuItem>
-                    ))}
-                  </Select>
-                </FormControl>
-              )}
-            </FormGroup>
-          </form>
-        </Paper>
-        <Paper className={classes.root} elevation={1}>
-          <Text variant="h6">Advanced Settings</Text>
-          <form noValidate autoComplete="off">
-            <FormGroup>
-              <TextField
-                label="CSV Charset (default: utf-8)"
-                className={classes.textField}
-                value={csvCharset}
-                onChange={evt => setCsvCharset(evt.target.value)}
-                margin="normal"
-              />
-            </FormGroup>
-          </form>
-        </Paper>
-        <Paper className={classes.root} elevation={1}>
-          <Text variant="h6">Single Sign-On</Text>
-          <form noValidate autoComplete="off">
-            <FormGroup>
-              <TypedSelect
-                value={ssoSelectedType}
-                className={classes.textField}
-                items={{
-                  none: 'Disabled',
-                  oidc: 'OpenID Connect',
-                  saml: 'SAML',
-                }}
-                onChange={value => setSSOSelectedType(value)}
-                input={<Input id="ssoSelectedType" />}
-              />
-            </FormGroup>
-            {ssoSelectedType === 'saml' ? (
-              <>
-                <FormGroup>
-                  <TextField
-                    label="Issuer"
-                    className={classes.textField}
-                    value={ssoIssuer}
-                    onChange={evt => setSSOIssuer(evt.target.value)}
-                    margin="normal"
-                  />
-                </FormGroup>
-                <FormGroup>
-                  <TextField
-                    label="Entrypoint"
-                    className={classes.textField}
-                    value={ssoEntrypoint}
-                    onChange={evt => setSSOEntrypoint(evt.target.value)}
-                    margin="normal"
-                  />
-                </FormGroup>
-                <FormGroup>
-                  <TextField
-                    label="Certificate"
-                    multiline
-                    rows="4"
-                    value={ssoCert}
-                    onChange={evt => setSSOCert(evt.target.value)}
-                    className={classes.textField}
-                    margin="normal"
-                    variant="filled"
-                  />
-                </FormGroup>
-              </>
-            ) : null}
-            {ssoSelectedType === 'oidc' ? (
-              <>
-                <FormGroup>
-                  <TextField
-                    label="Client ID"
-                    className={classes.textField}
-                    value={ssoOidcClientID}
-                    onChange={evt => setSSOOidcClientID(evt.target.value)}
-                    margin="normal"
-                  />
-                </FormGroup>
-                <FormGroup>
-                  <TextField
-                    label="Client Secret"
-                    className={classes.textField}
-                    value={ssoOidcClientSecret}
-                    onChange={evt => setSSOOidcClientSecret(evt.target.value)}
-                    margin="normal"
-                  />
-                </FormGroup>
-                <FormGroup>
-                  <TextField
-                    label="Configuration URL"
-                    className={classes.textField}
-                    value={ssoOidcConfigurationURL}
-                    onChange={evt =>
-                      setSSOOidcConfigurationURL(evt.target.value)
-                    }
-                    margin="normal"
-                  />
-                </FormGroup>
-              </>
-            ) : null}
-          </form>
-        </Paper>
-        <Paper className={classes.root} elevation={1}>
-          <form noValidate autoComplete="off">
-            <Button onClick={() => onSave()}>
-              <SaveIcon className={classes.leftIcon} />
-              <Text color="light" weight="medium">
-                Save
-              </Text>
-            </Button>
-          </form>
-        </Paper>
-      </Grid>
-    </Grid>
+                />
+                <OrganizationSummary name={name} networkIds={networkIds} />
+              </Grid>
+
+              <Grid item xs={12} md={6} alignItems="center">
+                <TitleRow
+                  title={'Users'}
+                  buttonTitle={'Add User'}
+                  onClick={() => {
+                    setAddUser(true);
+                    setDialog(true);
+                  }}
+                />
+                <UserTable
+                  refresh={refresh}
+                  setRefresh={() => setRefresh(Date.now())}
+                />
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </div>
+    </>
+  );
+}
+
+type OverviewProps = {
+  name: string,
+  networkIds: Set<string>,
+};
+export function OrganizationSummary(props: OverviewProps) {
+  const {name, networkIds} = props;
+  const kpiData: DataRows[] = [
+    [
+      {
+        category: 'Organization Name',
+        value: name,
+      },
+    ],
+    [
+      {
+        category: 'Accessible Networks',
+        value: [...(networkIds || [])].join(', ') || '-',
+      },
+    ],
+    [
+      {
+        category: 'Link to Organization Portal',
+        value: `link to ${name} org`,
+      },
+    ],
+  ];
+  return <DataGrid data={kpiData} />;
+}
+function OrganizationUsersTable(
+  props: WithAlert & {refresh: Date, setRefresh: Date => void},
+) {
+  const tableRef = React.createRef();
+  // const [refresh, setRefresh] = useState<Date>(Date.now())
+  // refresh data on subscriber add
+  useEffect(() => {
+    tableRef.current?.onQueryChange();
+  }, [props.refresh]);
+  const onDelete = user => {
+    props
+      .confirm({
+        message: (
+          <span>
+            Are you sure you want to delete the user{' '}
+            <strong>{user.email}</strong>?
+          </span>
+        ),
+        confirmLabel: 'Delete',
+      })
+      .then(confirmed => {
+        if (confirmed) {
+          axios
+            .delete('/user/async/' + user.id)
+            .then(() => {
+              props.setRefresh();
+            })
+            .catch(e => console.log(e));
+        }
+      });
+  };
+
+  type UserRowType = {
+    email: string,
+    role: number,
+    id: string,
+  };
+
+  const menuItems = [
+    {
+      name: 'View',
+      handleFunc: () => {
+        // history.push(relativeUrl(`/detail/${currRow.name}`));
+      },
+    },
+    {
+      name: 'Remove',
+      handleFunc: () => {
+        onDelete(currRow);
+      },
+    },
+  ];
+
+  const columnStruct = [
+    {
+      title: '',
+      field: '',
+      width: '40px',
+      render: rowData => (
+        <Text variant="subtitle3">{rowData.tableData?.id + 1}</Text>
+      ),
+    },
+    {
+      title: 'Email',
+      field: 'email',
+    },
+    {
+      title: 'Role',
+      field: 'role',
+    },
+  ];
+  const [currRow, setCurrRow] = useState<UserRowType>({});
+  // const classes = useStyles();
+  const {match} = useRouter();
+
+  return (
+    <>
+      <ActionTable
+        tableRef={tableRef}
+        data={() =>
+          new Promise((resolve, _reject) => {
+            // let url = 'https://reqres.in/api/users?'
+            // url += 'per_page=' + query.pageSize
+            // url += '&page=' + (query.page + 1)
+            // fetch(url)
+            axios
+              .get(`/master/organization/async/${match.params.name}/users`)
+              // .then(response => console.log(response))
+              .then(result => {
+                const users: Array<UserRowType> = result.data.map(user => {
+                  return {
+                    email: user.email,
+                    role: user.role,
+                    id: user.id,
+                  };
+                });
+                resolve({
+                  data: users,
+                });
+              });
+          })
+        }
+        // data={tableData || []}
+        columns={columnStruct}
+        handleCurrRow={(row: UserRowType) => {
+          setCurrRow(row);
+        }}
+        menuItems={menuItems}
+        localization={{
+          // hide 'Actions' in table header
+          header: {actions: ''},
+        }}
+        options={{
+          actionsColumnIndex: -1,
+          sorting: true,
+          // hide table title and toolbar
+          toolbar: false,
+          // pageSizeOptions: [10, 20],
+          paging: false,
+        }}
+      />
+    </>
   );
 }
+
+const UserTable = withAlert(OrganizationUsersTable);
diff --git a/fbcnms-packages/fbcnms-ui/master/Organizations.js b/fbcnms-packages/fbcnms-ui/master/Organizations.js
index 5433ca9..b61ca73 100644
--- a/fbcnms-packages/fbcnms-ui/master/Organizations.js
+++ b/fbcnms-packages/fbcnms-ui/master/Organizations.js
@@ -291,6 +291,8 @@ function Organizations(props: Props) {
           path={relativePath('/new')}
           render={() => (
             <OrganizationDialog
+              organization={{}}
+              open={true}
               addUser={addUser}
               setAddUser={() => setAddUser(true)}
               onClose={() => {