diff --git a/fbcnms-packages/fbcnms-ui/components/ActionTable.js b/fbcnms-packages/fbcnms-ui/components/ActionTable.js
index cdb9676..0d09f40 100644
--- a/fbcnms-packages/fbcnms-ui/components/ActionTable.js
+++ b/fbcnms-packages/fbcnms-ui/components/ActionTable.js
@@ -40,11 +40,6 @@ import {makeStyles} from '@material-ui/styles';
 import {useState} from 'react';
 
 const useStyles = makeStyles(theme => ({
-  inputRoot: {
-    '&.MuiOutlinedInput-root': {
-      padding: 0,
-    },
-  },
   cardTitleRow: {
     marginBottom: theme.spacing(1),
     minHeight: '36px',
diff --git a/fbcnms-packages/fbcnms-ui/components/DataGrid.js b/fbcnms-packages/fbcnms-ui/components/DataGrid.js
new file mode 100644
index 0000000..9b7476f
--- /dev/null
+++ b/fbcnms-packages/fbcnms-ui/components/DataGrid.js
@@ -0,0 +1,155 @@
+/**
+ * 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 Grid from '@material-ui/core/Grid';
+import React from 'react';
+
+import {brightGray, comet, concrete} from '@fbcnms/ui/theme/colors';
+import {makeStyles} from '@material-ui/styles';
+
+const useStyles = makeStyles(theme => ({
+  dataBlock: {
+    boxShadow: `0 0 0 1px ${concrete}`,
+  },
+  dataLabel: {
+    fontWeight: '500',
+    color: comet,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+  dataValue: {
+    fontSize: '18px',
+    color: brightGray,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    width: props =>
+      props.hasStatus
+        ? 'calc(100% - 16px)'
+        : props.hasIcon
+        ? 'calc(100% - 32px)'
+        : '100%',
+  },
+  dataBox: {
+    width: '100%',
+    padding: props => (props.collapsed ? '0' : null),
+
+    '& > div': {
+      width: '100%',
+    },
+  },
+  dataIcon: {
+    display: 'flex',
+    alignItems: 'center',
+
+    '& svg': {
+      fill: 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>
+  );
+}
+
+type Data = {
+  icon?: SvgIcon,
+  category?: string,
+  value: number | string,
+  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}>
+                <CardHeader
+                  data-testid={data.category}
+                  className={classes.dataBox}
+                  title={data.category}
+                  titleTypographyProps={{
+                    variant: 'caption',
+                    className: classes.dataLabel,
+                    title: data.category,
+                  }}
+                  subheaderTypographyProps={{
+                    variant: 'body1',
+                    className: classes.dataValue,
+                    title: data.tooltip ?? dataEntryValue,
+                  }}
+                  subheader={
+                    data.icon
+                      ? DataIcon(data.icon, dataEntryValue)
+                      : 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/host/OrganizationDialog.js b/fbcnms-packages/fbcnms-ui/host/OrganizationDialog.js
index abe3a8f..aad251c 100644
--- a/fbcnms-packages/fbcnms-ui/host/OrganizationDialog.js
+++ b/fbcnms-packages/fbcnms-ui/host/OrganizationDialog.js
@@ -7,12 +7,14 @@
  * @flow strict-local
  * @format
  */
-
+import type {EditUser} from './OrganizationEdit';
 import type {OrganizationPlainAttributes} from '@fbcnms/sequelize-models/models/organization';
 
+import AppContext from '@fbcnms/ui/context/AppContext';
 import Button from '@fbcnms/ui/components/design-system/Button';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import LoadingFillerBackdrop from '@fbcnms/ui/components/LoadingFillerBackdrop';
 import OrganizationInfoDialog from './OrganizationInfoDialog';
@@ -22,43 +24,77 @@ import Tab from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
 
 import {UserRoles} from '@fbcnms/auth/types';
-import {brightGray, white} from '@fbcnms/ui/theme/colors';
+import {brightGray, concrete, mirage, white} from '../theme/colors';
 import {makeStyles} from '@material-ui/styles';
 import {useAxios} from '@fbcnms/ui/hooks';
-import {useState} from 'react';
+import {useContext, useEffect, useState} from 'react';
 
 const useStyles = makeStyles(_ => ({
-  input: {
-    display: 'inline-flex',
-    margin: '5px 0',
-    width: '100%',
-  },
   tabBar: {
     backgroundColor: brightGray,
     color: white,
   },
+  dialog: {
+    backgroundColor: concrete,
+  },
+  dialogActions: {
+    backgroundColor: white,
+    padding: '20px',
+    zIndex: '1',
+  },
+  dialogContent: {
+    padding: '32px',
+    minHeight: '480px',
+  },
+  dialogTitle: {
+    backgroundColor: mirage,
+    padding: '16px 24px',
+    color: white,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+  },
 }));
+type TabType =
+  | 'automation'
+  | 'admin'
+  | 'inventory'
+  | 'nms'
+  | 'workorders'
+  | 'hub';
 
 export type DialogProps = {
   error: string,
-  user: CreateUserType,
+  user: EditUser,
   organization: OrganizationPlainAttributes,
-  onUserChange: CreateUserType => void,
+  onUserChange: EditUser => void,
   onOrganizationChange: OrganizationPlainAttributes => void,
   // Array of networks ids
   allNetworks: Array<string>,
   // If true, enable all networks for an organization
   shouldEnableAllNetworks: boolean,
   setShouldEnableAllNetworks: boolean => void,
+  edit: boolean,
+  getProjectTabs?: () => Array<{id: TabType, name: string}>,
+  // flag to display advanced fields
+  hideAdvancedFields: boolean,
 };
 
 type Props = {
   onClose: () => void,
-  onCreateOrg: (org: CreateOrgType) => void,
+  onCreateOrg: (org: $Shape<OrganizationPlainAttributes>) => void,
   onCreateUser: (user: CreateUserType) => void,
   // flag to display create user tab
   addUser: boolean,
   setAddUser: () => void,
+  user: ?EditUser,
+  open: boolean,
+  organization: ?OrganizationPlainAttributes,
+  // editing organization
+  edit: boolean,
+  // flag to display advanced fields
+  hideAdvancedFields: boolean,
 };
 
 type CreateUserType = {
@@ -68,15 +104,10 @@ type CreateUserType = {
   organization?: string,
   role: ?string,
   tabs?: Array<string>,
-  password: string,
+  password: ?string,
   passwordConfirmation?: string,
 };
 
-type CreateOrgType = {
-  name: string,
-  networkIDs: Array<string>,
-  customDomains?: Array<string>,
-};
 /**
  * Create Orgnization Dilaog
  * This component displays a dialog with 2 tabs
@@ -84,6 +115,7 @@ type CreateOrgType = {
  * Second tab: OrganizationUserDialog, to create a user that belongs to the new organization
  */
 export default function (props: Props) {
+  const {ssoEnabled} = useContext(AppContext);
   const classes = useStyles();
   const {error, isLoading, response} = useAxios({
     method: 'get',
@@ -91,23 +123,38 @@ 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 [user, setUser] = useState<EditUser>(props.user || {});
   const [createError, setCreateError] = useState('');
   const allNetworks = error || !response ? [] : response.data.sort();
+  const organizationDialogTitle =
+    currentTab === 1
+      ? 'Add User'
+      : props.edit
+      ? 'Edit Organization'
+      : 'Add Organization';
+
+  useEffect(() => {
+    setCurrentTab(props.addUser ? 1 : 0);
+  }, [props.addUser]);
+
+  useEffect(() => {
+    setOrganization(props.organization || {});
+    setCreateError('');
+    setUser(props.user || {});
+  }, [props.open, props.organization, props.user]);
 
   if (isLoading) {
     return <LoadingFillerBackdrop />;
   }
-
   const createProps = {
     user,
     organization,
     error: createError,
-    onUserChange: (user: CreateUserType) => {
+    onUserChange: (user: EditUser) => {
       setUser(user);
     },
     onOrganizationChange: (organization: OrganizationPlainAttributes) => {
@@ -116,6 +163,8 @@ export default function (props: Props) {
     allNetworks,
     shouldEnableAllNetworks,
     setShouldEnableAllNetworks,
+    edit: props.edit,
+    hideAdvancedFields: props.hideAdvancedFields,
   };
   const onSave = async () => {
     if (currentTab === 0) {
@@ -123,35 +172,44 @@ export default function (props: Props) {
         setCreateError('Name cannot be empty');
         return;
       }
-      const payload = {
+      const newOrg = {
         name: organization.name,
         networkIDs: shouldEnableAllNetworks
           ? allNetworks
           : Array.from(organization.networkIDs || []),
         customDomains: [], // TODO
-        // tabs: Array.from(tabs),
+        // default tab is nms
+        tabs: Array.from(organization.tabs || ['nms']),
+        csvCharset: organization.csvCharset,
+        ssoSelectedType: organization.ssoSelectedType,
+        ssoCert: organization.ssoCert,
+        ssoEntrypoint: organization.ssoEntrypoint,
+        ssoIssuer: organization.ssoIssuer,
+        ssoOidcClientID: organization.ssoOidcClientID,
+        ssoOidcClientSecret: organization.ssoOidcClientSecret,
+        ssoOidcConfigurationURL: organization.ssoOidcConfigurationURL,
       };
 
-      props.onCreateOrg(payload);
+      props.onCreateOrg(newOrg);
       setCurrentTab(currentTab + 1);
       setCreateError('');
       props.setAddUser();
     } else {
-      if (!user.email) {
+      if (user.password != user.passwordConfirmation) {
+        setCreateError('Passwords must match');
+        return;
+      }
+      if (!user?.email) {
         setCreateError('Email cannot be empty');
         return;
       }
 
-      if (!user.password) {
+      if ((!user?.password ?? false) && !ssoEnabled && !user.id) {
         setCreateError('Password cannot be empty');
         return;
       }
-      if (user.password != user.passwordConfirmation) {
-        setCreateError('Passwords must match');
-        return;
-      }
 
-      const payload: CreateUserType = {
+      const newUser: CreateUserType = {
         email: user.email,
         password: user.password,
         role: user.role,
@@ -160,35 +218,46 @@ export default function (props: Props) {
             ? []
             : Array.from(user.networkIDs || []),
       };
-      props.onCreateUser(payload);
+      if ((user.id || ssoEnabled) && !user?.password) {
+        delete newUser.password;
+      }
+      props.onCreateUser(newUser);
     }
   };
 
   return (
     <Dialog
-      open={true}
+      classes={{paper: classes.dialog}}
+      open={props.open}
       onClose={props.onClose}
       maxWidth={'sm'}
       fullWidth={true}>
-      <DialogTitle>Add Organization</DialogTitle>
+      <DialogTitle classes={{root: classes.dialogTitle}}>
+        {Object.keys(user).length > 0 ? 'Edit User' : organizationDialogTitle}
+      </DialogTitle>
       <Tabs
         indicatorColor="primary"
         value={currentTab}
-        className={classes.tabBar}
+        classes={{root: classes.tabBar}}
         onChange={(_, v) => setCurrentTab(v)}>
         <Tab disabled={currentTab === 1} label={'Organization'} />
         <Tab disabled={currentTab === 0} label={'Users'} />
       </Tabs>
-      <>
+      <DialogContent classes={{root: classes.dialogContent}}>
         {currentTab === 0 && <OrganizationInfoDialog {...createProps} />}
         {currentTab === 1 && <OrganizationUserDialog {...createProps} />}
-      </>
-      <DialogActions>
+      </DialogContent>
+      <DialogActions classes={{root: classes.dialogActions}}>
         <Button onClick={props.onClose} skin="regular">
           Cancel
         </Button>
-        <Button skin="comet" onClick={onSave}>
-          {currentTab === 0 ? 'Save and Continue' : 'Save'}
+        <Button
+          disabled={
+            Object.keys(organization).length < 1 || organization?.id === ''
+          }
+          skin="comet"
+          onClick={onSave}>
+          {'Save'}
         </Button>
       </DialogActions>
     </Dialog>
diff --git a/fbcnms-packages/fbcnms-ui/host/OrganizationEdit.js b/fbcnms-packages/fbcnms-ui/host/OrganizationEdit.js
index e2d0695..40d0ed1 100644
--- a/fbcnms-packages/fbcnms-ui/host/OrganizationEdit.js
+++ b/fbcnms-packages/fbcnms-ui/host/OrganizationEdit.js
@@ -9,111 +9,108 @@
  */
 
 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 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 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 OrganizationSummary from './OrganizationSummary';
+import OrganizationUsersTable from './OrganizationUsersTable';
 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 {intersection} from 'lodash';
+import withAlert from '@fbcnms/ui/components/Alert/withAlert';
+
 import {makeStyles} from '@material-ui/styles';
 import {useAxios, useRouter} from '@fbcnms/ui/hooks';
-import {useCallback, useEffect, useState} from 'react';
+import {useCallback, useState} from 'react';
 import {useEnqueueSnackbar} from '@fbcnms/ui/hooks/useSnackbar';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(_ => ({
+  arrowBack: {
+    paddingRight: '0px',
+    color: 'black',
+  },
+  container: {
+    margin: '40px 32px',
+  },
   header: {
     margin: '10px',
     display: 'flex',
     justifyContent: 'space-between',
+    textTransform: 'capitalize',
   },
-  leftIcon: {
-    marginRight: theme.spacing(),
-    color: symphony.palette.white,
-  },
-  root: {
-    ...theme.mixins.gutters(),
-    paddingTop: theme.spacing(2),
-    paddingBottom: theme.spacing(2),
-  },
-  textField: {
-    marginLeft: theme.spacing(),
-    marginRight: theme.spacing(),
-    width: 500,
-  },
-  networks: {
-    flexDirection: 'row',
-    flexWrap: 'nowrap',
-    marginTop: '16px',
-    marginBottom: '8px',
-  },
-  flexGrow: {
-    flexGrow: 1,
+  titleRow: {
+    margin: '16px 0',
   },
 }));
 
+export type EditUser = {
+  id: string | number,
+  email: string,
+  role: string,
+  networkIDs?: string[],
+  organization?: string,
+  tabs?: Array<string>,
+  password?: string,
+  passwordConfirmation?: string,
+};
+type TitleRowProps = {
+  title: string,
+  buttonTitle: string,
+  onClick: () => void,
+};
 type Props = {
   getProjectTabs?: () => Array<{id: Tab, name: string}>,
+  hideAdvancedFields?: boolean,
 };
 
-export default function OrganizationEdit(props: Props) {
-  const {match} = useRouter();
+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>
+  );
+}
+
+/**
+ * Organization detail view and Organization edit dialog
+ * This component displays an Organization basic information (OrganizationSummary)
+ * and its users (OrganizationUsersTable)
+ */
+function OrganizationEdit(props: WithAlert & Props) {
+  const {match, history} = 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 [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 [
-    ssoOidcConfigurationURL,
-    setSSOOidcConfigurationURL,
-  ] = useState<string>('');
-
+  const [dialog, setDialog] = useState(false);
+  const [createError, setCreateError] = useState('');
+  const [refresh, setRefresh] = useState(Date.now());
+  const [user, setUser] = useState<?EditUser>(null);
+  const [editUser, setEditUser] = useState(false);
   const orgRequest = useAxios<null, {organization: Organization}>({
     method: 'get',
     url: '/host/organization/async/' + match.params.name,
-    onResponse: useCallback(res => {
-      const {organization} = res.data;
-      setName(organization.name);
-      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);
-      setSSOOidcClientID(organization.ssoOidcClientID);
-      setSSOOidcClientSecret(organization.ssoOidcClientSecret);
-      setSSOOidcConfigurationURL(organization.ssoOidcConfigurationURL);
-    }, []),
+    onResponse: useCallback(
+      res => {
+        const {organization} = res.data;
+        setName(organization.name);
+        setNetworkIds(new Set(organization.networkIDs));
+      },
+      [refresh],
+    ),
   });
 
   const networksRequest = useAxios({
@@ -121,16 +118,6 @@ export default function OrganizationEdit(props: Props) {
     url: '/host/networks/async',
   });
 
-  useEffect(() => {
-    if (orgRequest.response && networksRequest.response) {
-      const allNetworks: string[] = networksRequest.response.data;
-      const networkIDs = orgRequest.response.data.organization.networkIDs;
-      if (intersection(allNetworks, networkIDs).length === allNetworks.length) {
-        setShouldEnableAllNetworks(true);
-      }
-    }
-  }, [orgRequest.response, networksRequest.response]);
-
   if (
     orgRequest.isLoading ||
     networksRequest.isLoading ||
@@ -140,28 +127,10 @@ export default function OrganizationEdit(props: Props) {
   }
 
   const organization = orgRequest.response.data.organization;
-  const allNetworks =
-    networksRequest.error || !networksRequest.response
-      ? []
-      : networksRequest.response.data.sort();
 
-  const onSave = () => {
+  const onSave = org => {
     axios
-      .put('/host/organization/async/' + match.params.name, {
-        name,
-        tabs: Array.from(tabs),
-        networkIDs: shouldEnableAllNetworks
-          ? allNetworks
-          : Array.from(networkIds),
-        csvCharset,
-        ssoSelectedType,
-        ssoIssuer,
-        ssoEntrypoint,
-        ssoCert,
-        ssoOidcClientID,
-        ssoOidcClientSecret,
-        ssoOidcConfigurationURL,
-      })
+      .put('/host/organization/async/' + match.params.name, org)
       .then(_res => {
         enqueueSnackbar('Updated organization successfully', {
           variant: 'success',
@@ -175,205 +144,149 @@ 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
+          user={user}
+          hideAdvancedFields={props.hideAdvancedFields ?? false}
+          edit={true}
+          organization={organization}
+          open={dialog}
+          addUser={addUser}
+          createError={createError}
+          setAddUser={() => setAddUser(true)}
+          onClose={() => {
+            setAddUser(false);
+            setDialog(false);
+            setEditUser(false);
+          }}
+          onCreateOrg={org => {
+            onSave(org);
+            setRefresh(Date.now());
+            setDialog(false);
+          }}
+          onCreateUser={newUser => {
+            if (!editUser) {
+              axios
+                .post(
+                  `/host/organization/async/${
+                    match.params.name || ''
+                  }/add_user`,
+                  newUser,
+                )
+                .then(() => {
+                  enqueueSnackbar('User added successfully', {
+                    variant: 'success',
+                  });
+                  setDialog(false);
+                })
+                .catch(error => {
+                  setCreateError(error);
+                  enqueueSnackbar(error?.response?.data?.error || error, {
+                    variant: 'error',
+                  });
+                });
+            } else {
+              if (user?.id) {
+                axios
+                  .put(`/user/async/${user.id}`, newUser)
+                  .then(() => {
+                    enqueueSnackbar('User updated successfully', {
+                      variant: 'success',
+                    });
+                    setDialog(false);
+                  })
+                  .catch(error => {
+                    setCreateError(error);
+                    enqueueSnackbar(error?.response?.data?.error || newUser, {
+                      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
+                skin="comet"
+                onClick={() => {
+                  props
+                    .confirm(
+                      'Are you sure you want to delete this organization?',
+                    )
+                    .then(async confirm => {
+                      if (!confirm) return;
+                      await axios.delete(
+                        `/host/organization/async/${organization.id}`,
+                      );
+                      history.push('/host/organizations');
+                    });
+                }}>
+                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={() => {
+                    setUser(null);
+                    setAddUser(true);
+                    setDialog(true);
+                  }}
+                />
+                <OrganizationUsersTable
+                  editUser={(newUser: ?EditUser) => {
+                    setUser(newUser);
+                    setAddUser(true);
+                    setDialog(true);
+                    setEditUser(true);
+                  }}
+                  refresh={new Date(refresh)}
+                  setRefresh={() => setRefresh(Date.now())}
+                />
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </div>
+    </>
   );
 }
+
+export default withAlert(OrganizationEdit);
diff --git a/fbcnms-packages/fbcnms-ui/host/OrganizationInfoDialog.js b/fbcnms-packages/fbcnms-ui/host/OrganizationInfoDialog.js
index fb0e5a7..a18bfea 100644
--- a/fbcnms-packages/fbcnms-ui/host/OrganizationInfoDialog.js
+++ b/fbcnms-packages/fbcnms-ui/host/OrganizationInfoDialog.js
@@ -7,13 +7,13 @@
  * @flow strict-local
  * @format
  */
+import {getProjectTabs as getAllProjectTabs} from '@fbcnms/projects/projects';
 import type {DialogProps} from './OrganizationDialog';
 
 import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
 import Button from '@fbcnms/ui/components/design-system/Button';
 import Checkbox from '@material-ui/core/Checkbox';
 import Collapse from '@material-ui/core/Collapse';
-import DialogContent from '@material-ui/core/DialogContent';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import FormLabel from '@material-ui/core/FormLabel';
@@ -25,7 +25,7 @@ import OutlinedInput from '@material-ui/core/OutlinedInput';
 import React from 'react';
 import Select from '@material-ui/core/Select';
 
-import {AltFormField} from '@fbcnms/ui/components/design-system/FormField/FormField';
+import {AltFormField} from '../components/design-system/FormField/FormField';
 import {useState} from 'react';
 
 const ENABLE_ALL_NETWORKS_HELPER =
@@ -35,41 +35,73 @@ const ENABLE_ALL_NETWORKS_HELPER =
  * Create Organization Tab
  * This component displays a form used to create an organization
  */
-export default function OrganizationInfoDialog(props: DialogProps) {
+export default function (props: DialogProps) {
   const {
     organization,
     allNetworks,
     shouldEnableAllNetworks,
     setShouldEnableAllNetworks,
+    edit,
+    hideAdvancedFields,
   } = props;
   const [open, setOpen] = useState(false);
+  const allTabs = props.getProjectTabs
+    ? props.getProjectTabs()
+    : getAllProjectTabs();
 
   return (
-    <DialogContent>
-      <List>
-        {props.error && (
-          <AltFormField label={''}>
-            <FormLabel error>{props.error}</FormLabel>
-          </AltFormField>
-        )}
-        <AltFormField disableGutters label={'Organization Name'}>
-          <OutlinedInput
-            data-testid="name"
-            placeholder="Organization Name"
-            fullWidth={true}
-            value={organization.name}
-            onChange={({target}) => {
-              props.onOrganizationChange({...organization, name: target.value});
-            }}
-          />
+    <List>
+      {props.error && (
+        <AltFormField label={''}>
+          <FormLabel error>{props.error}</FormLabel>
         </AltFormField>
-        <ListItem disableGutters>
-          <Button variant="text" onClick={() => setOpen(!open)}>
-            Advanced Settings
-          </Button>
-          <ArrowDropDown />
-        </ListItem>
-        <Collapse in={open}>
+      )}
+      <AltFormField disableGutters label={'Organization Name'}>
+        <OutlinedInput
+          disabled={edit}
+          data-testid="name"
+          placeholder="Organization Name"
+          fullWidth={true}
+          value={organization.name}
+          onChange={({target}) => {
+            props.onOrganizationChange({...organization, name: target.value});
+          }}
+        />
+      </AltFormField>
+      {!hideAdvancedFields && (
+        <>
+          <AltFormField disableGutters label={'Accessible Tabs'}>
+            <Select
+              fullWidth={true}
+              variant={'outlined'}
+              multiple={true}
+              renderValue={selected => selected.join(', ')}
+              value={Array.from(organization.tabs || [])}
+              onChange={({target}) => {
+                props.onOrganizationChange({
+                  ...organization,
+                  // $FlowIgnore: value guaranteed to match the string literals
+                  tabs: [...target.value],
+                });
+              }}
+              input={<OutlinedInput id="direction" />}>
+              {allTabs.map(tab => (
+                <MenuItem key={tab.id} value={tab.id}>
+                  <ListItemText primary={tab.name} />
+                </MenuItem>
+              ))}
+            </Select>
+          </AltFormField>
+        </>
+      )}
+      <ListItem disableGutters>
+        <Button variant="text" onClick={() => setOpen(!open)}>
+          Advanced Settings
+        </Button>
+        <ArrowDropDown />
+      </ListItem>
+      <Collapse in={open}>
+        {!shouldEnableAllNetworks && (
           <AltFormField
             disableGutters
             label={'Accessible Networks'}
@@ -94,21 +126,161 @@ export default function OrganizationInfoDialog(props: DialogProps) {
               ))}
             </Select>
           </AltFormField>
-          <FormControlLabel
-            disableGutters
-            label={'Give this organization access to all networks'}
-            control={
-              <Checkbox
-                checked={shouldEnableAllNetworks}
-                onChange={() =>
-                  setShouldEnableAllNetworks(!shouldEnableAllNetworks)
-                }
+        )}
+        <FormControlLabel
+          disableGutters
+          label={'Give this organization access to all networks'}
+          control={
+            <Checkbox
+              checked={shouldEnableAllNetworks}
+              onChange={() =>
+                setShouldEnableAllNetworks(!shouldEnableAllNetworks)
+              }
+            />
+          }
+        />
+        <FormHelperText>{ENABLE_ALL_NETWORKS_HELPER}</FormHelperText>
+
+        {!hideAdvancedFields && (
+          <>
+            <AltFormField disableGutters label={'CSV Charset'}>
+              <OutlinedInput
+                data-testid="csvCharset"
+                placeholder="CSV Charset (default: utf-8)"
+                fullWidth={true}
+                value={organization.csvCharset}
+                onChange={({target}) => {
+                  props.onOrganizationChange({
+                    ...organization,
+                    csvCharset: target.value,
+                  });
+                }}
               />
-            }
-          />
-          <FormHelperText>{ENABLE_ALL_NETWORKS_HELPER}</FormHelperText>
-        </Collapse>
-      </List>
-    </DialogContent>
+            </AltFormField>
+            <AltFormField disableGutters label={'Single Sign-On'}>
+              <Select
+                fullWidth={true}
+                variant={'outlined'}
+                value={organization.ssoSelectedType || 'none'}
+                onChange={({target}) => {
+                  props.onOrganizationChange({
+                    ...organization,
+                    // $FlowIgnore: value guaranteed to match the string literals
+                    ssoSelectedType: target.value,
+                  });
+                }}
+                input={<OutlinedInput id="direction" />}>
+                <MenuItem key={'none'} value={'none'}>
+                  <ListItemText primary={'Disabled'} />
+                </MenuItem>
+                <MenuItem key={'oidc'} value={'oidc'}>
+                  <ListItemText primary={'OpenID Connect'} />
+                </MenuItem>
+                <MenuItem key={'saml'} value={'saml'}>
+                  <ListItemText primary={'SAML'} />
+                </MenuItem>
+              </Select>
+            </AltFormField>
+
+            {organization.ssoSelectedType === 'saml' ? (
+              <>
+                <AltFormField disableGutters label={'Issuer'}>
+                  <OutlinedInput
+                    data-testid="issuer"
+                    placeholder="Issuer"
+                    fullWidth={true}
+                    value={organization.ssoIssuer}
+                    onChange={({target}) => {
+                      props.onOrganizationChange({
+                        ...organization,
+                        ssoIssuer: target.value,
+                      });
+                    }}
+                  />
+                </AltFormField>
+
+                <AltFormField disableGutters label={'Entrypoint'}>
+                  <OutlinedInput
+                    data-testid="entrypoint"
+                    placeholder="Entrypoint"
+                    fullWidth={true}
+                    value={organization.ssoEntrypoint}
+                    onChange={({target}) => {
+                      props.onOrganizationChange({
+                        ...organization,
+                        ssoEntrypoint: target.value,
+                      });
+                    }}
+                  />
+                </AltFormField>
+
+                <AltFormField disableGutters label={'Certificate'}>
+                  <OutlinedInput
+                    data-testid="Certificate"
+                    placeholder="Certificate"
+                    fullWidth={true}
+                    value={organization.ssoCert}
+                    onChange={({target}) => {
+                      props.onOrganizationChange({
+                        ...organization,
+                        ssoCert: target.value,
+                      });
+                    }}
+                  />
+                </AltFormField>
+              </>
+            ) : null}
+            {organization.ssoSelectedType === 'oidc' ? (
+              <>
+                <AltFormField disableGutters label={'Client ID'}>
+                  <OutlinedInput
+                    data-testid="ClientID"
+                    placeholder="Client ID"
+                    fullWidth={true}
+                    value={organization.ssoOidcClientID}
+                    onChange={({target}) => {
+                      props.onOrganizationChange({
+                        ...organization,
+                        ssoOidcClientID: target.value,
+                      });
+                    }}
+                  />
+                </AltFormField>
+
+                <AltFormField disableGutters label={'Client Secret'}>
+                  <OutlinedInput
+                    data-testid="ClientSecret"
+                    placeholder="ClientSecret"
+                    fullWidth={true}
+                    value={organization.ssoOidcClientSecret}
+                    onChange={({target}) => {
+                      props.onOrganizationChange({
+                        ...organization,
+                        ssoOidcClientSecret: target.value,
+                      });
+                    }}
+                  />
+                </AltFormField>
+
+                <AltFormField disableGutters label={'Configuration URL'}>
+                  <OutlinedInput
+                    data-testid="Configuration URL"
+                    placeholder="Configuration URL"
+                    fullWidth={true}
+                    value={organization.ssoOidcConfigurationURL}
+                    onChange={({target}) => {
+                      props.onOrganizationChange({
+                        ...organization,
+                        ssoOidcConfigurationURL: target.value,
+                      });
+                    }}
+                  />
+                </AltFormField>
+              </>
+            ) : null}
+          </>
+        )}
+      </Collapse>
+    </List>
   );
 }
diff --git a/fbcnms-packages/fbcnms-ui/host/OrganizationSummary.js b/fbcnms-packages/fbcnms-ui/host/OrganizationSummary.js
new file mode 100644
index 0000000..bef03f8
--- /dev/null
+++ b/fbcnms-packages/fbcnms-ui/host/OrganizationSummary.js
@@ -0,0 +1,47 @@
+/**
+ * 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 strict-local
+ * @format
+ */
+
+import type {DataRows} from '../components/DataGrid';
+
+import DataGrid from '../components/DataGrid';
+import React from 'react';
+
+type OverviewProps = {
+  name: string,
+  networkIds: Set<string>,
+};
+
+/**
+ * Organization basic information
+ */
+export default 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} />;
+}
diff --git a/fbcnms-packages/fbcnms-ui/host/OrganizationUserDialog.js b/fbcnms-packages/fbcnms-ui/host/OrganizationUserDialog.js
index 0a890c5..25dce6b 100644
--- a/fbcnms-packages/fbcnms-ui/host/OrganizationUserDialog.js
+++ b/fbcnms-packages/fbcnms-ui/host/OrganizationUserDialog.js
@@ -10,7 +10,6 @@
 
 import type {DialogProps} from './OrganizationDialog';
 
-import DialogContent from '@material-ui/core/DialogContent';
 import FormLabel from '@material-ui/core/FormLabel';
 import List from '@material-ui/core/List';
 import ListItemText from '@material-ui/core/ListItemText';
@@ -19,8 +18,20 @@ import OutlinedInput from '@material-ui/core/OutlinedInput';
 import React from 'react';
 import Select from '@material-ui/core/Select';
 
-import {AltFormField} from '@fbcnms/ui/components/design-system/FormField/FormField';
+import {AltFormField} from '../components/design-system/FormField/FormField';
 import {UserRoles} from '@fbcnms/auth/types';
+import {makeStyles} from '@material-ui/styles';
+
+const useStyles = makeStyles(_ => ({
+  addButton: {
+    minWidth: '150px',
+  },
+  selectItem: {
+    fontSize: '12px',
+    fontFamily: '"Inter", sans-serif',
+    fontWeight: '600',
+  },
+}));
 
 /**
  * Create User Tab
@@ -28,76 +39,86 @@ import {UserRoles} from '@fbcnms/auth/types';
  */
 export default function OrganizationUserDialog(props: DialogProps) {
   const {user} = props;
+  const classes = useStyles();
 
   return (
-    <DialogContent>
-      <List>
-        {props.error && (
-          <AltFormField label={''}>
-            <FormLabel error>{props.error}</FormLabel>
-          </AltFormField>
-        )}
-        <AltFormField disableGutters label={'Email'}>
-          <OutlinedInput
-            data-testid="name"
-            placeholder="Email"
-            fullWidth={true}
-            value={user.email}
-            onChange={({target}) => {
-              props.onUserChange({...user, email: target.value});
-            }}
-          />
-        </AltFormField>
-        <AltFormField disableGutters label={'Password'}>
-          <OutlinedInput
-            data-testid="name"
-            placeholder="Enter Password"
-            fullWidth={true}
-            value={user.password}
-            onChange={({target}) => {
-              props.onUserChange({...user, password: target.value});
-            }}
-          />
-        </AltFormField>
-        <AltFormField disableGutters label={'Confirm Password'}>
-          <OutlinedInput
-            data-testid="name"
-            placeholder="Enter Password Confirmation"
-            fullWidth={true}
-            value={user.passwordConfirmation}
-            onChange={({target}) => {
-              props.onUserChange({...user, passwordConfirmation: target.value});
-            }}
-          />
-        </AltFormField>
-        <AltFormField
-          disableGutters
-          label={'Role'}
-          subLabel={
-            'The role decides permissions that the user has to areas and features '
-          }>
-          <Select
-            fullWidth={true}
-            variant={'outlined'}
-            value={user.role ?? 0}
-            onChange={({target}) => {
-              props.onUserChange({...user, role: target.value});
-            }}
-            input={<OutlinedInput id="direction" />}>
-            <MenuItem key={UserRoles.USER} value={UserRoles.USER}>
-              <ListItemText primary={'User'} />
-            </MenuItem>
-            <MenuItem
-              key={UserRoles.READ_ONLY_USER}
-              value={UserRoles.READ_ONLY_USER}>
-              <ListItemText primary={'Read Only User'} />
-            </MenuItem>
-            <MenuItem key={UserRoles.SUPERUSER} value={UserRoles.SUPERUSER}>
-              <ListItemText primary={'SuperUser'} />
-            </MenuItem>
-          </Select>
+    <List>
+      {props.error && (
+        <AltFormField label={''}>
+          <FormLabel error>{props.error}</FormLabel>
         </AltFormField>
-      </List>
-    </DialogContent>
+      )}
+      <AltFormField disableGutters label={'Email'}>
+        <OutlinedInput
+          data-testid="email"
+          placeholder="Email"
+          fullWidth={true}
+          value={user.email}
+          onChange={({target}) => {
+            props.onUserChange({...user, email: target.value});
+          }}
+        />
+      </AltFormField>
+      <AltFormField disableGutters label={'Password'}>
+        <OutlinedInput
+          type="password"
+          data-testid="password"
+          placeholder="Enter Password"
+          fullWidth={true}
+          value={user.password}
+          onChange={({target}) => {
+            props.onUserChange({...user, password: target.value});
+          }}
+        />
+      </AltFormField>
+      <AltFormField disableGutters label={'Confirm Password'}>
+        <OutlinedInput
+          type="password"
+          data-testid="passwordConfirmation"
+          placeholder="Enter Password Confirmation"
+          fullWidth={true}
+          value={user?.passwordConfirmation}
+          onChange={({target}) => {
+            props.onUserChange({...user, passwordConfirmation: target.value});
+          }}
+        />
+      </AltFormField>
+      <AltFormField
+        disableGutters
+        label={'Role'}
+        subLabel={
+          'The role decides permissions that the user has to areas and features '
+        }>
+        <Select
+          fullWidth={true}
+          variant={'outlined'}
+          value={user.role ?? 0}
+          onChange={({target}) => {
+            props.onUserChange({...user, role: target.value});
+          }}
+          input={<OutlinedInput id="direction" />}>
+          <MenuItem key={UserRoles.USER} value={UserRoles.USER}>
+            <ListItemText
+              classes={{primary: classes.selectItem}}
+              primary={'User'}
+            />
+          </MenuItem>
+          <MenuItem
+            key={UserRoles.READ_ONLY_USER}
+            value={UserRoles.READ_ONLY_USER}>
+            <ListItemText
+              classes={{primary: classes.selectItem}}
+              primary={'Read Only User'}
+            />
+          </MenuItem>
+          <MenuItem key={UserRoles.SUPERUSER} value={UserRoles.SUPERUSER}>
+            <ListItemText
+              classes={{primary: classes.selectItem}}
+              primary={'SuperUser'}
+            />
+          </MenuItem>
+        </Select>
+      </AltFormField>
+    </List>
   );
 }
diff --git a/fbcnms-packages/fbcnms-ui/host/OrganizationUsersTable.js b/fbcnms-packages/fbcnms-ui/host/OrganizationUsersTable.js
new file mode 100644
index 0000000..a95c959
--- /dev/null
+++ b/fbcnms-packages/fbcnms-ui/host/OrganizationUsersTable.js
@@ -0,0 +1,160 @@
+/**
+ * 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 strict-local
+ * @format
+ */
+
+import ActionTable from '../components/ActionTable';
+import React from 'react';
+import Text from '@fbcnms/ui/components/design-system/Text';
+import axios from 'axios';
+import withAlert from '@fbcnms/ui/components/Alert/withAlert';
+import type {EditUser} from './OrganizationEdit';
+import type {WithAlert} from '@fbcnms/ui/components/Alert/withAlert';
+
+import {UserRoles} from '@fbcnms/auth/types';
+import {useEffect, useState} from 'react';
+import {useEnqueueSnackbar} from '@fbcnms/ui/hooks/useSnackbar';
+import {useRouter} from '@fbcnms/ui/hooks';
+
+type OrganizationUsersTableProps = WithAlert & {
+  refresh: Date,
+  setRefresh: number => void,
+  editUser: (user: ?EditUser) => void,
+};
+
+/**
+ * Table of users that belong to a specific organization
+ */
+function OrganizationUsersTable(props: OrganizationUsersTableProps) {
+  const tableRef = React.createRef();
+  const enqueueSnackbar = useEnqueueSnackbar();
+  const [users, setUsers] = React.useState<Array<EditUser>>([]);
+  const [currRow, setCurrRow] = useState<EditUser>({});
+  const {match} = useRouter();
+
+  // refresh data on subscriber add
+  useEffect(() => {
+    tableRef.current?.onQueryChange();
+  }, [props.refresh]);
+
+  const onDeleteUser = 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(Date.now());
+            })
+            .catch(error => {
+              const message = error.response?.data?.error || error;
+              enqueueSnackbar(`Unable to save organization: ${message}`, {
+                variant: 'error',
+              });
+            });
+        }
+      });
+  };
+
+  const menuItems = [
+    {
+      name: 'Edit',
+      handleFunc: () => {
+        const user: ?EditUser = users.find(user => user.id === currRow.id);
+        props.editUser?.(user);
+      },
+    },
+    {
+      name: 'Remove',
+      handleFunc: () => {
+        onDeleteUser(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',
+      render: rowData => {
+        const userRole = Object.keys(UserRoles).find(
+          role => UserRoles[role] === rowData.role,
+        );
+        return <>{userRole}</>;
+      },
+    },
+  ];
+
+  return (
+    <>
+      <ActionTable
+        tableRef={tableRef}
+        data={() =>
+          new Promise((resolve, _reject) => {
+            axios
+              .get(`/host/organization/async/${match.params.name}/users`)
+              .then(result => {
+                const users: Array<EditUser> = result.data.map(user => {
+                  return {
+                    email: user.email,
+                    role: user.role,
+                    id: user.id,
+                    networkIDs: user.networkIDs,
+                    organization: user.organization,
+                  };
+                });
+                setUsers(users);
+                resolve({
+                  data: users,
+                });
+              });
+          })
+        }
+        columns={columnStruct}
+        handleCurrRow={(row: EditUser) => {
+          setCurrRow(row);
+        }}
+        menuItems={menuItems}
+        localization={{
+          // hide 'Actions' in table header
+          header: {actions: ''},
+        }}
+        options={{
+          actionsColumnIndex: -1,
+          sorting: true,
+          // hide table title and toolbar
+          toolbar: false,
+          paging: false,
+          pageSizeOptions: [100, 200],
+        }}
+      />
+    </>
+  );
+}
+
+export default withAlert(OrganizationUsersTable);
diff --git a/fbcnms-packages/fbcnms-ui/host/Organizations.js b/fbcnms-packages/fbcnms-ui/host/Organizations.js
index 0780f25..423c58b 100644
--- a/fbcnms-packages/fbcnms-ui/host/Organizations.js
+++ b/fbcnms-packages/fbcnms-ui/host/Organizations.js
@@ -8,23 +8,25 @@
  * @format
  */
 
+import type {EnqueueSnackbarOptions} from 'notistack';
 import type {OrganizationPlainAttributes} from '@fbcnms/sequelize-models/models/organization';
 import type {UserType} from '@fbcnms/sequelize-models/models/user.js';
 import type {WithAlert} from '@fbcnms/ui/components/Alert/withAlert';
 
 import ActionTable from '../components/ActionTable';
-import Button from '@material-ui/core/Button';
+import BusinessIcon from '@material-ui/icons/Business';
+import Button from '@fbcnms/ui/components/design-system/Button';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
+import ExitToAppIcon from '@material-ui/icons/ExitToApp';
 import Grid from '@material-ui/core/Grid';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import LoadingFiller from '@fbcnms/ui/components/LoadingFiller';
-import NestedRouteLink from '@fbcnms/ui/components/NestedRouteLink';
 import OrganizationDialog from './OrganizationDialog';
 import PersonAdd from '@material-ui/icons/PersonAdd';
 import PersonIcon from '@material-ui/icons/Person';
@@ -33,13 +35,12 @@ import Text from '../components/design-system/Text';
 import axios from 'axios';
 import withAlert from '@fbcnms/ui/components/Alert/withAlert';
 
-import {Route} from 'react-router-dom';
-import {comet, concrete} from '@fbcnms/ui/theme/colors';
+import {comet, concrete, gullGray} from '../theme/colors';
 import {makeStyles} from '@material-ui/styles';
 import {useAxios, useRouter} from '@fbcnms/ui/hooks';
 import {useCallback, useEffect, useState} from 'react';
 import {useEnqueueSnackbar} from '@fbcnms/ui/hooks/useSnackbar';
-import {useRelativePath, useRelativeUrl} from '@fbcnms/ui/hooks/useRouter';
+import {useRelativeUrl} from '@fbcnms/ui/hooks/useRouter';
 
 export type Organization = OrganizationPlainAttributes;
 
@@ -48,6 +49,9 @@ const ORGANIZATION_DESCRIPTION =
   'As a host user, you can create and manage organizations here. You can also create users for these organizations.';
 
 const useStyles = makeStyles(_ => ({
+  addButton: {
+    minWidth: '150px',
+  },
   description: {
     margin: '20px 0',
   },
@@ -59,50 +63,53 @@ const useStyles = makeStyles(_ => ({
   paper: {
     margin: '40px 32px',
   },
-  dialogTitle: {
+  onBoardingDialog: {
+    padding: '24px 0',
+  },
+  onBoardingDialogTitle: {
+    padding: '0 24px',
     fontSize: '24px',
     color: comet,
     backgroundColor: concrete,
   },
-  dialog: {
+  onBoardingDialogContent: {
     minHeight: '200px',
-    padding: '24px',
+    padding: '16px 24px',
   },
-  dialogActions: {
+  onBoardingDialogActions: {
+    padding: '0 24px',
     backgroundColor: concrete,
     boxShadow: 'none',
   },
-  dialogButton: {
-    backgroundColor: comet,
-    color: concrete,
-    '&:hover': {
-      backgroundColor: concrete,
-      color: comet,
-    },
+  onBoardingDialogButton: {
+    minWidth: '120px',
   },
-
   subtitle: {
     margin: '16px 0',
   },
+  index: {
+    color: gullGray,
+  },
 }));
 
-type Props = {...WithAlert};
+type Props = {...WithAlert, hideAdvancedFields: boolean};
 
 function OnboardingDialog() {
   const classes = useStyles();
   const [open, setOpen] = useState(true);
   return (
     <Dialog
+      classes={{paper: classes.onBoardingDialog}}
       maxWidth={'sm'}
       fullWidth={true}
       open={open}
       keepMounted
       onClose={() => setOpen(false)}
       aria-describedby="alert-dialog-slide-description">
-      <DialogTitle classes={{root: classes.dialogTitle}}>
+      <DialogTitle classes={{root: classes.onBoardingDialogTitle}}>
         {'Welcome to Magma Host Portal'}
       </DialogTitle>
-      <DialogContent classes={{root: classes.dialog}}>
+      <DialogContent classes={{root: classes.onBoardingDialogContent}}>
         <DialogContentText id="alert-dialog-slide-description">
           <Text variant="subtitle1">
             In this portal, you can add and edit organizations and its user.
@@ -111,7 +118,7 @@ function OnboardingDialog() {
           <List dense={true}>
             <ListItem disableGutters>
               <ListItemIcon>
-                <PersonIcon />
+                <BusinessIcon />
               </ListItemIcon>
               <Text variant="subtitle1">Add an organization</Text>
             </ListItem>
@@ -123,7 +130,7 @@ function OnboardingDialog() {
             </ListItem>
             <ListItem disableGutters>
               <ListItemIcon>
-                <PersonIcon />
+                <ExitToAppIcon />
               </ListItemIcon>
               <Text variant="subtitle1">
                 Log in to the organization portal with the user account you
@@ -133,9 +140,10 @@ function OnboardingDialog() {
           </List>
         </DialogContentText>
       </DialogContent>
-      <DialogActions classes={{root: classes.dialogActions}}>
+      <DialogActions classes={{root: classes.onBoardingDialogActions}}>
         <Button
-          classes={{root: classes.dialogButton}}
+          className={classes.onBoardingDialogButton}
+          skin="comet"
           onClick={() => setOpen(false)}>
           Get Started
         </Button>
@@ -147,6 +155,10 @@ function OnboardingDialog() {
 async function getUsers(
   organizations: Organization[],
   setUsers: (Array<?UserType>) => void,
+  enqueueSnackbar: (
+    msg: string,
+    cfg: EnqueueSnackbarOptions,
+  ) => ?(string | number),
 ) {
   const requests = organizations.map(async organization => {
     try {
@@ -154,7 +166,11 @@ async function getUsers(
         `/host/organization/async/${organization.name}/users`,
       );
       return response.data;
-    } catch (error) {}
+    } catch (error) {
+      enqueueSnackbar('Organization added successfully', {
+        variant: 'success',
+      });
+    }
   });
   const organizationUsers = await Promise.all(requests);
   if (organizationUsers) {
@@ -165,13 +181,13 @@ async function getUsers(
 function Organizations(props: Props) {
   const classes = useStyles();
   const relativeUrl = useRelativeUrl();
-  const relativePath = useRelativePath();
   const {history} = useRouter();
   const [organizations, setOrganizations] = useState<?(Organization[])>(null);
   const [addingUserFor, setAddingUserFor] = useState<?Organization>(null);
   const [currRow, setCurrRow] = useState<OrganizationRowType>({});
   const [users, setUsers] = useState<Array<?UserType>>([]);
   const [showOnboardingDialog, setShowOnboardingDialog] = useState(false);
+  const [showOrganizationDialog, setShowOrganizationDialog] = useState(false);
   const [addUser, setAddUser] = useState(false);
   const enqueueSnackbar = useEnqueueSnackbar();
   const {error, isLoading} = useAxios({
@@ -185,7 +201,7 @@ function Organizations(props: Props) {
   });
   useEffect(() => {
     if (organizations?.length) {
-      getUsers(organizations, setUsers);
+      getUsers(organizations, setUsers, enqueueSnackbar);
     }
   }, [organizations, addingUserFor]);
 
@@ -195,7 +211,7 @@ function Organizations(props: Props) {
 
   const onDelete = org => {
     props
-      .confirm('Are you sure you want to delete this org?')
+      .confirm('Are you sure you want to delete this organization?')
       .then(async confirm => {
         if (!confirm) return;
         await axios.delete(`/host/organization/async/${org.id}`);
@@ -231,11 +247,13 @@ function Organizations(props: Props) {
       <Grid container>
         <Grid container justify="space-between">
           <Text variant="h3">Organizations</Text>
-          <NestedRouteLink to="/new">
-            <Button color="primary" variant="contained">
-              Add Organization
-            </Button>
-          </NestedRouteLink>
+          <Button
+            skin="comet"
+            className={classes.addButton}
+            variant="contained"
+            onClick={() => setShowOrganizationDialog(true)}>
+            Add Organization
+          </Button>
         </Grid>
         <Grid xs={12} className={classes.description}>
           <Text variant="body2">{ORGANIZATION_DESCRIPTION}</Text>
@@ -251,13 +269,25 @@ function Organizations(props: Props) {
                 width: '40px',
                 editable: 'never',
                 render: rowData => (
-                  <Text variant="subtitle3">
-                    {rowData.tableData?.id + 1 || ''}
+                  <Text className={classes.index} variant="caption">
+                    {rowData.tableData?.index + 1 || ''}
                   </Text>
                 ),
               },
               {title: 'Name', field: 'name'},
-              {title: 'Accessible Networks', field: 'networks'},
+              {
+                title: 'Accessible Networks',
+                field: 'networks',
+                render: rowData => {
+                  // only diplay 3 networks if more
+                  if (rowData.networks.length > 2) {
+                    return `${rowData.networks.slice(0, 3).join(', ')} + ${
+                      rowData.networks.length - 3
+                    } more`;
+                  }
+                  return rowData.networks.join(', ');
+                },
+              },
               {title: 'Link to Organization Portal', field: 'portalLink'},
               {title: 'Number of Users', field: 'userNumber'},
             ]}
@@ -270,6 +300,8 @@ function Organizations(props: Props) {
                 tooltip: 'Add User',
                 onClick: (event, row) => {
                   setAddingUserFor(row);
+                  setAddUser(true);
+                  setShowOrganizationDialog(true);
                 },
               },
             ]}
@@ -294,65 +326,63 @@ function Organizations(props: Props) {
             }}
           />
         </Grid>
-        <Route
-          path={relativePath('/new')}
-          render={() => (
-            <OrganizationDialog
-              addUser={addUser}
-              setAddUser={() => setAddUser(true)}
-              onClose={() => {
-                setAddUser(false);
-                history.push(relativeUrl(''));
-              }}
-              onCreateOrg={org => {
-                let newOrg = null;
-                axios
-                  .post('/host/organization/async', org)
-                  .then(() => {
-                    enqueueSnackbar('Organization added successfully', {
-                      variant: 'success',
-                    });
-                    axios
-                      .get(`/host/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 => {
+        <OrganizationDialog
+          edit={false}
+          hideAdvancedFields={props.hideAdvancedFields}
+          organization={null}
+          user={null}
+          open={showOrganizationDialog}
+          addUser={addUser}
+          setAddUser={() => setAddUser(true)}
+          onClose={() => {
+            setShowOrganizationDialog(false);
+            setAddUser(false);
+          }}
+          onCreateOrg={org => {
+            let newOrg = null;
+            axios
+              .post('/host/organization/async', org)
+              .then(() => {
+                enqueueSnackbar('Organization added successfully', {
+                  variant: 'success',
+                });
                 axios
-                  .post(
-                    `/host/organization/async/${
-                      addingUserFor?.name || ''
-                    }/add_user`,
-                    user,
-                  )
-                  .then(() => {
-                    enqueueSnackbar('User added successfully', {
-                      variant: 'success',
-                    });
-                    setAddingUserFor(null);
-                    history.push(relativeUrl(''));
-                  })
-                  .catch(error => {
-                    enqueueSnackbar(error?.response?.data?.error || error, {
-                      variant: 'error',
-                    });
+                  .get(`/host/organization/async/${org?.name ?? ''}`)
+                  .then(resp => {
+                    newOrg = resp.data.organization;
+                    if (newOrg) {
+                      setOrganizations([...organizations, newOrg]);
+                      setAddingUserFor(newOrg);
+                    }
                   });
-              }}
-            />
-          )}
+              })
+              .catch(error => {
+                enqueueSnackbar(error?.response?.data?.error || error, {
+                  variant: 'error',
+                });
+              });
+          }}
+          onCreateUser={user => {
+            axios
+              .post(
+                `/host/organization/async/${
+                  addingUserFor?.name || ''
+                }/add_user`,
+                user,
+              )
+              .then(() => {
+                enqueueSnackbar('User added successfully', {
+                  variant: 'success',
+                });
+                setAddingUserFor(null);
+                setShowOrganizationDialog(false);
+              })
+              .catch(error => {
+                enqueueSnackbar(error?.response?.data?.error || error, {
+                  variant: 'error',
+                });
+              });
+          }}
         />
       </Grid>
     </div>
diff --git a/fbcnms-packages/fbcnms-ui/theme/colors.js b/fbcnms-packages/fbcnms-ui/theme/colors.js
index 82f49a4..16c8053 100644
--- a/fbcnms-packages/fbcnms-ui/theme/colors.js
+++ b/fbcnms-packages/fbcnms-ui/theme/colors.js
@@ -51,6 +51,7 @@ export const green30 = '#00af5b';
 export const green = '#66bb6a';
 export const gullGray = '#9DA7BB';
 export const lightBlue = '#42a5f5';
+export const mirage = '#171B25';
 export const orange = '#f9a825';
 export const pink = '#f48fb1';
 export const primaryText = '#1c1e21';
diff --git a/fbcnms-packages/fbcnms-ui/theme/default.js b/fbcnms-packages/fbcnms-ui/theme/default.js
index 9d0dc79..85309ad 100644
--- a/fbcnms-packages/fbcnms-ui/theme/default.js
+++ b/fbcnms-packages/fbcnms-ui/theme/default.js
@@ -15,13 +15,13 @@ import {
   blue60,
   blueGrayDark,
   brightGray,
+  comet,
   fadedBlue,
   gray0,
   gray00,
   gray1,
   gray13,
   gray50,
-  gullGray,
   primaryText,
   red,
   redwood,
@@ -176,7 +176,7 @@ export default createMuiTheme({
         },
       },
       input: {
-        color: gullGray,
+        color: comet,
         fontFamily: '"Inter", sans-serif',
         fontWeight: 600,
         fontSize: '12px',
@@ -186,6 +186,9 @@ export default createMuiTheme({
         paddingBottom: '12px',
         paddingTop: '12px',
         height: '24px',
+        '&::placeholder': {
+          color: '#8895ad',
+        },
         '&::-webkit-input-placeholder': {
           opacity: 1,
         },