diff --git a/client/package.json b/client/package.json
index 2c40644de..89a3764c0 100644
--- a/client/package.json
+++ b/client/package.json
@@ -34,6 +34,7 @@
     "@material-ui/icons": "4.9.1",
     "@material-ui/lab": "4.0.0-alpha.56",
     "@material-ui/pickers": "3.3.10",
+    "@material/tooltip": "14.0.0",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "14.4.3",
diff --git a/client/src/components/controls/DateInputField.tsx b/client/src/components/controls/DateInputField.tsx
index 2b029675b..6850b2c6c 100644
--- a/client/src/components/controls/DateInputField.tsx
+++ b/client/src/components/controls/DateInputField.tsx
@@ -41,7 +41,7 @@ const useStyles = makeStyles(({ palette, typography, breakpoints }) => ({
         '& .MuiSvgIcon-root': {
             height: 20,
             width: 20
-        }
+        },
     }
 }));
 
diff --git a/client/src/components/controls/LabelTooltipText.tsx b/client/src/components/controls/LabelTooltipText.tsx
new file mode 100644
index 000000000..cc3169cd2
--- /dev/null
+++ b/client/src/components/controls/LabelTooltipText.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { Typography, TypographyProps, Tooltip, PropTypes } from '@material-ui/core';
+import { HelpOutline } from '@material-ui/icons';
+
+const useStyles = makeStyles(({ spacing }) => ({
+    container: {
+        display: 'flex',
+        padding: ({ padding }: LabelTooltipTextProps ) => padding ? padding : '0px 10px',
+        //borderRadius: 5,
+        //border: `1px dashed #0086ff`,
+        width: ({ width }: LabelTooltipTextProps ) => width || '100%',
+        marginTop: ({ marginTop }: LabelTooltipTextProps ) => spacing(marginTop || 0),
+        //backgroundColor: ({ required, error }: LabelTooltipTextProps ) => (error ? fade(palette.error.light, 0.3) : required ? palette.primary.light : palette.secondary.light)
+    },
+    label: {
+        color: 'auto'
+    },
+    loading: {
+        position: 'absolute',
+        top: 16,
+        right: 10
+    }
+}));
+
+interface LabelTooltipTextProps {
+    error?: boolean;
+    label?: string;
+    labelProps?: TypographyProps;
+    labelTooltipTxt: string;
+    marginTop?: number;
+    padding?: string;
+    renderLabel?: boolean;
+    width?: string;
+    align?: PropTypes.Alignment;
+}
+
+function LabelTooltipText(props: LabelTooltipTextProps): React.ReactElement {
+    const { label, labelTooltipTxt, labelProps, renderLabel, align = 'left', } = props;
+    const classes = useStyles(props);
+
+    let content: React.ReactNode = (
+        <>
+            <Typography align={align} className={classes.label} variant='caption'>
+                {label}
+            </Typography>
+        </>
+    );
+
+    if (labelTooltipTxt) {
+        const tooltipContent = (
+            <>
+                <Typography align={align} className={classes.label} variant='caption' {...labelProps}>
+                    {label}
+                    <Tooltip title={labelTooltipTxt}>
+                        <HelpOutline fontSize='small' style={{ alignSelf: 'center', cursor: 'pointer', verticalAlign: 'middle', padding: '20px 5px' }} />
+                    </Tooltip>
+                </Typography>
+            </>
+        );
+        content = tooltipContent;
+    }
+
+    if (renderLabel === false) {
+        content = null;
+    }
+
+    return <div> {content} </div>;
+}
+
+export default LabelTooltipText;
\ No newline at end of file
diff --git a/client/src/components/shared/AssetIdentifiers.tsx b/client/src/components/shared/AssetIdentifiers.tsx
index d7770e6c1..c2b02d3c0 100644
--- a/client/src/components/shared/AssetIdentifiers.tsx
+++ b/client/src/components/shared/AssetIdentifiers.tsx
@@ -7,6 +7,7 @@ import { eVocabularySetID } from '@dpo-packrat/common';
 import FieldType from './FieldType';
 import IdentifierList from './IdentifierList';
 
+//Styles
 const useStyles = makeStyles(({ palette, spacing }) => ({
     assetIdentifier: {
         display: 'flex',
@@ -31,6 +32,7 @@ const useStyles = makeStyles(({ palette, spacing }) => ({
     }
 }));
 
+//Defines the prop type
 interface AssetIdentifiersProps {
     systemCreated: boolean;
     identifiers: StateIdentifier[];
@@ -44,11 +46,18 @@ interface AssetIdentifiersProps {
 }
 
 function AssetIdentifiers(props: AssetIdentifiersProps): React.ReactElement {
+
+    //Props - types defined in interface
     const { systemCreated, identifiers, onSystemCreatedChange, onAddIdentifer, onUpdateIdentifer, onRemoveIdentifer,
         subjectView, onUpdateIdIdentifierPreferred, identifierName } = props;
+
+    //Component styling
     const classes = useStyles();
+
+    //Handles state change for the Identifier entries
     const [getEntries, getInitialEntry] = useVocabularyStore(state => [state.getEntries, state.getInitialEntry]);
 
+    //Function creates object to define new identifier
     const addIdentifer = (initialEntry: number | null) => {
         const newIdentifier: StateIdentifier = {
             id: identifiers.length + 1,
@@ -62,11 +71,13 @@ function AssetIdentifiers(props: AssetIdentifiersProps): React.ReactElement {
         onAddIdentifer(updatedIdentifiers);
     };
 
+    //Function removes Identifier
     const removeIdentifier = (_idIdentifier: number, id: number) => {
         const updatedIdentifiers = lodash.filter(identifiers, identifier => identifier.id !== id);
         onRemoveIdentifer(updatedIdentifiers);
     };
 
+    //Function updates any changes to the Identifier
     const updateIdentifierFields = (id: number, name: string, value: string | number | boolean) => {
         const updatedIdentifiers = identifiers.map(identifier => {
             if (identifier.id === id) {
@@ -80,10 +91,12 @@ function AssetIdentifiers(props: AssetIdentifiersProps): React.ReactElement {
         onUpdateIdentifer(updatedIdentifiers);
     };
 
+    //The label of the Asset Identifier UI (currently says 'Model Identifier(s))
     const label: string = (identifierName ? identifierName : 'Asset') + ' Identifier(s)';
     return (
+        //The Identifier Component
         <Box marginBottom='10px'>
-            <FieldType required label={label} padding='10px'>
+            <FieldType required label={label} padding='10px' labelTooltip='Assign an identifier to your digital asset here.  The identifier will make it easier to search for the digital asset later.'>
                 <Box display='flex' justifyContent='space-between'>
                     <Box className={classes.assetIdentifier}>
                         <label htmlFor='systemCreated' style={{ display: 'none' }}>System Created Identifier</label>
@@ -98,6 +111,8 @@ function AssetIdentifiers(props: AssetIdentifiersProps): React.ReactElement {
                             System will create an identifier
                         </Typography>
                     </Box>
+
+                    {/*May need to write the logic here to check if there are no identifiers in existence.*/}
                     {!identifiers.length && (
                         <Button
                             className={classes.addIdentifierButton}
diff --git a/client/src/components/shared/FieldType.tsx b/client/src/components/shared/FieldType.tsx
index be8e679c2..5ddea76d2 100644
--- a/client/src/components/shared/FieldType.tsx
+++ b/client/src/components/shared/FieldType.tsx
@@ -7,15 +7,18 @@ import { Box, BoxProps, PropTypes, Typography, TypographyProps, Tooltip, Grid, G
 import { fade, makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 import Progress from './Progress';
+import { HelpOutline } from '@material-ui/icons';
+// import { HelpOutline } from '@material-ui/icons';
 
 const useStyles = makeStyles(({ palette, spacing }) => ({
     container: {
         display: 'flex',
-        padding: ({ padding }: FieldTypeProps) => padding ? padding : '0px 10px',
-        borderRadius: 5,
-        width: ({ width }: FieldTypeProps) => width || '100%',
+        // padding: ({ padding }: FieldTypeProps) => padding ? padding : '0px 10px',
+        //borderRadius: 5,
+        //border: `1px dashed #0086ff`,
+        // width: ({ width }: FieldTypeProps) => width || '100%',
         marginTop: ({ marginTop }: FieldTypeProps) => spacing(marginTop || 0),
-        backgroundColor: ({ required, error }: FieldTypeProps) => (error ? fade(palette.error.light, 0.3) : required ? palette.primary.light : palette.secondary.light)
+        backgroundColor: ({ required, error }: FieldTypeProps) => (error ? fade(palette.error.light, 0.3) : required ? '0' : palette.primary.light)
     },
     label: {
         color: 'auto'
@@ -24,7 +27,11 @@ const useStyles = makeStyles(({ palette, spacing }) => ({
         position: 'absolute',
         top: 16,
         right: 10
-    }
+    },
+    tooltip: {
+        fontSize: '0.75rem',
+        fontWeight: 'lighter'
+    },
 }));
 
 interface FieldTypeProps {
@@ -53,18 +60,28 @@ function FieldType(props: FieldTypeProps): React.ReactElement {
     const classes = useStyles(props);
 
     let content: React.ReactNode = (
-        <Typography align={align} className={classes.label} variant='caption' {...labelProps}>
-            {label}
-        </Typography>
+        <>
+            <Typography align={align} className={classes.label} variant='caption' {...labelProps}>
+                {label}
+            </Typography>
+        </>
     );
 
     if (labelTooltip) {
         const tooltipContent = (
-            <Tooltip title={labelTooltip}>
+            <>
                 <Typography align={align} className={classes.label} variant='caption' {...labelProps}>
                     {label}
+                    <Tooltip
+                        title={labelTooltip}
+                        classes={{
+                            tooltip: classes.tooltip,
+                        }}
+                    >
+                        <HelpOutline style={{ alignSelf: 'center', cursor: 'pointer', verticalAlign: 'middle', padding: '0px 5px', paddingBottom: '3px', fontSize: '1rem' }} />
+                    </Tooltip>
                 </Typography>
-            </Tooltip>
+            </>
         );
         content = tooltipContent;
     }
diff --git a/client/src/components/shared/SidebarBottomNavigator.tsx b/client/src/components/shared/SidebarBottomNavigator.tsx
index 70c332bf8..8a2163cf9 100644
--- a/client/src/components/shared/SidebarBottomNavigator.tsx
+++ b/client/src/components/shared/SidebarBottomNavigator.tsx
@@ -6,31 +6,34 @@
  * This component renders bottom navigation view, used in data upload
  * and ingestion flow
  */
-import { Box } from '@material-ui/core';
+import { Box, TypographyProps } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { Colors } from '../../theme';
 import LoadingButton from '../controls/LoadingButton';
 
-const useStyles = makeStyles(({ palette, breakpoints }) => ({
+const useStyles = makeStyles(({ breakpoints }) => ({
     uploadContainer: {
         display: 'flex',
         bottom: 0,
         alignItems: 'center',
         justifyContent: 'space-between',
-        padding: '10px 0px',
-        background: palette.background.paper
+        padding: '10px',
+        //background: palette.background.paper
+        // background: 'rgb(236, 245, 253)',
     },
     container: {
-        display: 'flex',
+        //display: 'flex',
         bottom: 0,
         alignItems: 'center',
         justifyContent: 'space-between',
-        width: '53vw',
-        padding: '20px 0px',
-        marginLeft: 20,
-        background: palette.background.paper
+        // width: '100%',
+        // padding: '20px',
+        margin: '10px',
+        marginLeft: '20px',
+        //background: palette.background.paper
+        //background: 'rgb(236, 245, 253)'
     },
     navButton: {
         minHeight: 35,
@@ -45,10 +48,11 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
     },
     link: {
         textDecoration: 'none'
-    }
+    },
 }));
 
 interface SidebarBottomNavigatorProps {
+    btnProps?: TypographyProps;
     leftLabel: string;
     leftLoading?: boolean;
     leftRoute?: string;
@@ -68,7 +72,7 @@ function SidebarBottomNavigator(props: SidebarBottomNavigatorProps): React.React
     // console.log(`SidebarBottomNavigator ${JSON.stringify(props)}, onClickRight ${onClickRight ? 'defined' : 'NOT defined'}`);
 
     let leftButton = (
-        <LoadingButton className={classes.navButton} disableElevation loaderSize={15} loading={leftLoading || false} disabled={disableNavigation} onClick={onClickLeft}>
+        <LoadingButton className={classes.navButton} style={{ marginRight: '30px' }} disableElevation loaderSize={15} loading={leftLoading || false} disabled={disableNavigation} onClick={onClickLeft}>
             {leftLabel}
         </LoadingButton>
     );
diff --git a/client/src/graphql/index.ts b/client/src/graphql/index.ts
index 3041afe09..414176512 100644
--- a/client/src/graphql/index.ts
+++ b/client/src/graphql/index.ts
@@ -41,7 +41,7 @@ class PRApolloClient extends ApolloClient<NormalizedCacheObject> {
 
     private handleException(error: any): void {
         const message: string = (error instanceof Error) ? `: ${error.message}` : '';
-        console.log(`Apollo Client Error${message}`);
+        console.log(`[PACKRAT:ERROR] Apollo Client Error ${message}`);
         // console.log(`Apollo Client Error${message}: ${JSON.stringify(error)}`);
         throw error;
     }
@@ -53,6 +53,8 @@ const SAMLRedirectPath: string = '/saml/idp/profile/redirectorpost/sso';
 const errorLink = onError(({ graphQLErrors, networkError }) => {
     let sentToLogin: boolean = false;
 
+    console.log(`[PACKRAT:ERROR] Network: ${JSON.stringify(networkError)}`);
+
     if (graphQLErrors) {
         graphQLErrors.forEach(({ message, locations, path }) => {
             console.log(`[GraphQL error]: Message: ${message}, Location: ${JSON.stringify(locations)}, Path: ${path}`);
@@ -67,9 +69,6 @@ const errorLink = onError(({ graphQLErrors, networkError }) => {
     }
 
     if (networkError) {
-        console.log(`[Network error]: ${networkError}`);
-        // console.log(`[Network error]: ${JSON.stringify(networkError)}`);
-
         if (!sentToLogin) {
             let redirectToLogin: boolean = false;
 
@@ -173,6 +172,7 @@ interface IApolloUploader {
     refetchQueries?: string[];
     onProgress: (event: ProgressEvent) => void;
     onCancel: (cancelHandler: () => void) => void;
+    onFailed: (error: ErrorEvent) => void;
 }
 
 async function apolloUploader(options: IApolloUploader): Promise<any> {
diff --git a/client/src/graphql/utils/index.ts b/client/src/graphql/utils/index.ts
index e0aeb1bd8..ce37b434e 100644
--- a/client/src/graphql/utils/index.ts
+++ b/client/src/graphql/utils/index.ts
@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any */
+
 /**
  * GraphQL Utils
  *
@@ -19,12 +20,31 @@ const parseHeaders = (rawHeaders: any) => {
     return headers;
 };
 
-export const uploadFailureMessage: string = 'Upload cancelled';
+// our central variable holding the most relevant message on why the upload failed
+export let uploadFailureMessage: string = 'undefined';
+
+// fetch our actual upload passing in the url and relevant options such as
+// the method, headers, etc.
 const uploadFetch = (url: string, options: any): any =>
     new Promise((resolve, reject) => {
         const xhr = new XMLHttpRequest();
         xhr.withCredentials = true;
+
+        // initialize our request and set any headers
+        xhr.open(options.method, url, true);
+        Object.keys(options.headers).forEach(key => {
+            xhr.setRequestHeader(key, options.headers[key]);
+        });
+
+        // once the request completed, handle any errors or the response body
         xhr.onload = () => {
+            // The request was completed, but it was not successful
+            if (xhr.status < 200 && xhr.status >= 300) {
+                uploadFailureMessage = `Request failed with status: ${xhr.status}`;
+                return reject(new Error(uploadFailureMessage));
+            }
+
+            // if we have success then build our response
             const opts: any = {
                 status: xhr.status,
                 statusText: xhr.statusText,
@@ -36,30 +56,31 @@ const uploadFetch = (url: string, options: any): any =>
         };
 
         xhr.onerror = () => {
-            reject(new TypeError('Network request failed'));
+            uploadFailureMessage = 'Network request failed';
+            reject(new Error(uploadFailureMessage));
         };
 
         xhr.ontimeout = () => {
-            reject(new TypeError('Network request failed'));
+            uploadFailureMessage = 'Upload request timed out';
+            reject(new Error(uploadFailureMessage));
         };
 
-        xhr.open(options.method, url, true);
-
-        Object.keys(options.headers).forEach(key => {
-            xhr.setRequestHeader(key, options.headers[key]);
-        });
+        xhr.onabort = () => {
+            uploadFailureMessage = 'Upload aborted';
+            reject(new Error(uploadFailureMessage));
+        };
 
+        // if we have an upload request then connect our callbacks to handle responses
         if (xhr.upload) {
             xhr.upload.onprogress = options.onProgress;
+            xhr.upload.onabort = options.onCancel;
+            xhr.upload.onerror = options.onFailed;
         }
 
-        xhr.onabort = () => {
-            reject(new TypeError(uploadFailureMessage));
-        };
-
-        options.onCancel(() => {
-            xhr.abort();
-        });
+        // why cancel and abort here automatically?
+        // options.onCancel(() => {
+        //     xhr.abort();
+        // });
 
         xhr.send(options.body);
     });
@@ -75,6 +96,6 @@ export const apolloFetch = (uri: any, options: any): any => {
         });
     } catch (error) {
         const message: string = (error instanceof Error) ? `: ${error.message}` : '';
-        console.log(`apolloFetch failed${message}`);
+        console.log(`[PACKRAT:ERROR] apolloFetch failed ${message}`);
     }
 };
diff --git a/client/src/pages/Ingestion/components/Metadata/Model/ObjectMeshTable.tsx b/client/src/pages/Ingestion/components/Metadata/Model/ObjectMeshTable.tsx
index e8f3d0e09..ca0b715fa 100644
--- a/client/src/pages/Ingestion/components/Metadata/Model/ObjectMeshTable.tsx
+++ b/client/src/pages/Ingestion/components/Metadata/Model/ObjectMeshTable.tsx
@@ -34,7 +34,7 @@ const useStyles = makeStyles(({ palette }) => ({
         },
         '& :not(:first-child)': {
             textIndent: '30px'
-        }
+        },
     },
     unindentedFields: {
         '& > :first-child': {
@@ -84,6 +84,10 @@ function ObjectMeshTable({ modelObjects }): React.ReactElement {
         height: 26,
         alignItems: 'center',
         columnGap: 10,
+        background: 0
+    };
+    const readOnlyContainerTitles: React.CSSProperties = {
+        background: 0
     };
     return (
         <>
@@ -102,7 +106,7 @@ function ObjectMeshTable({ modelObjects }): React.ReactElement {
                                         {materialType.ModelMaterialChannel.map((channel, index) => {
                                             return (
                                                 <Box className={classes.unindentedFields} key={channel.Value + `.${index}`}>
-                                                    <ReadOnlyRow label='Type' value={channel.Type} paddingString='5px 0px 0px 0px' />
+                                                    <ReadOnlyRow label='Type' value={channel.Type} paddingString='5px 0px 0px 0px' containerStyle={readOnlyContainerTitles} />
                                                     <Box className={classes.indentedFields}>
                                                         <IndentedReadOnlyRow label='Source' value={channel.Source} indentation={1} padding='0px' />
                                                         <IndentedReadOnlyRow label='Value' value={parseAndRoundValues(channel.Value)} indentation={1} padding='0px' />
@@ -153,7 +157,7 @@ function ObjectMeshTable({ modelObjects }): React.ReactElement {
                             <ReadOnlyRow label='Is Watertight?' value={interpretTrinary(modelObject.IsWatertight)} paddingString='0px' containerStyle={readOnlyContainerProps} />
                             <ReadOnlyRow label='Self Intersecting?' value={interpretTrinary(modelObject.SelfIntersecting)} paddingString='0px' containerStyle={readOnlyContainerProps} />
                             <Box className={classes.boundingBox}>
-                                <ReadOnlyRow label='Bounding Box' paddingString='0px' />
+                                <ReadOnlyRow label='Bounding Box' paddingString='0px' containerStyle={readOnlyContainerTitles} />
                                 <ReadOnlyRow
                                     label='Min'
                                     value={`(${roundToTwoPlaces(modelObject.BoundingBoxP1X)}, ${roundToTwoPlaces(modelObject.BoundingBoxP1Y)}, ${roundToTwoPlaces(
diff --git a/client/src/pages/Ingestion/components/Metadata/Model/ObjectSelectModal.tsx b/client/src/pages/Ingestion/components/Metadata/Model/ObjectSelectModal.tsx
index 2305c8819..163c8e11f 100644
--- a/client/src/pages/Ingestion/components/Metadata/Model/ObjectSelectModal.tsx
+++ b/client/src/pages/Ingestion/components/Metadata/Model/ObjectSelectModal.tsx
@@ -235,6 +235,7 @@ function ObjectSelectModal(props: ObjectSelectModalProps): React.ReactElement {
         setIsSaving(false);
     };
 
+    //  This opens up the dialog box when you click the 'Add' button on the Parents or Children block.
     return (
         <Dialog
             open={open}
diff --git a/client/src/pages/Ingestion/components/Metadata/Model/index.tsx b/client/src/pages/Ingestion/components/Metadata/Model/index.tsx
index ee778c646..bf0b6eff3 100644
--- a/client/src/pages/Ingestion/components/Metadata/Model/index.tsx
+++ b/client/src/pages/Ingestion/components/Metadata/Model/index.tsx
@@ -57,12 +57,15 @@ const useStyles = makeStyles(({ palette }) => ({
         outline: '1px solid rgba(141, 171, 196, 0.4)'
     },
     modelDetailsAndSubtitleContainer: {
-        borderRadius: 5,
-        padding: 10,
+        padding: '10px',
         backgroundColor: palette.primary.light,
-        width: 'fit-content',
+        // width: 'fit-content',
         display: 'flex',
-        flexDirection: 'column'
+        flexDirection: 'column',
+        overflow: 'hidden',
+        borderRadius: '0.5rem', // 5
+        border: `1px dashed ${palette.primary.main}`,
+
     },
     modelDetailsContainer: {
         display: 'flex',
@@ -72,7 +75,8 @@ const useStyles = makeStyles(({ palette }) => ({
         width: '100%',
         columnGap: 10,
         rowGap: 10,
-        flexWrap: 'wrap'
+        flexWrap: 'wrap',
+        justifyContent: 'center'
     },
     caption: {
         flex: '1 1 0%',
@@ -88,6 +92,14 @@ const useStyles = makeStyles(({ palette }) => ({
         backgroundColor: palette.secondary.light,
         width: '200px'
     },
+    ingestContainer: {
+        borderRadius: '0.5rem',
+        border: `1px dashed ${palette.primary.main}`,
+        overflow: 'hidden',
+        backgroundColor: palette.primary.light,
+        padding: 0,
+        marginBottom: '1rem',
+    },
 }));
 
 interface ModelProps {
@@ -152,7 +164,7 @@ function Model(props: ModelProps): React.ReactElement {
         }
     ]);
     const [sceneGenerateDisabled, setSceneGenerateDisabled] = useState<boolean>(false);
-    const [showDetails, setShowDetails] = useState<boolean>(true);
+    const [showDetails, setShowDetails] = useState<boolean>(false);
 
     const urlParams = new URLSearchParams(window.location.search);
     const idAssetVersion = urlParams.get('fileId');
@@ -318,7 +330,8 @@ function Model(props: ModelProps): React.ReactElement {
 
     const readOnlyContainerProps: React.CSSProperties = {
         height: 26,
-        alignItems: 'center'
+        alignItems: 'center',
+        background: 0
     };
 
     return (
@@ -330,7 +343,8 @@ function Model(props: ModelProps): React.ReactElement {
                     </Box>
                 )}
 
-                <Box mb={2} width='52vw'>
+                <Box className={ classes.ingestContainer } style={{ padding: '10px', paddingBottom: '0' }}>
+                    {/*ASSET IDENTIFIERS FORM STARTS HERE*/}
                     <AssetIdentifiers
                         systemCreated={model.systemCreated}
                         identifiers={model.identifiers}
@@ -344,7 +358,7 @@ function Model(props: ModelProps): React.ReactElement {
 
                 {!idAsset && (
                     <React.Fragment>
-                        <Box mb={2}>
+                        <Box className={ classes.ingestContainer } >
                             <RelatedObjectsList
                                 type={RelatedObjectType.Source}
                                 relatedObjects={model.sourceObjects}
@@ -353,7 +367,7 @@ function Model(props: ModelProps): React.ReactElement {
                                 relationshipLanguage='Parents'
                             />
                         </Box>
-                        <Box mb={2}>
+                        <Box className={ classes.ingestContainer } >
                             <RelatedObjectsList
                                 type={RelatedObjectType.Derived}
                                 relatedObjects={model.derivedObjects}
@@ -382,6 +396,8 @@ function Model(props: ModelProps): React.ReactElement {
                             </Box>
                         </>
                     )}
+
+                    {/* METADATA FORMS AREA*/}
                     <Box className={classes.modelDetailsContainer}>
                         <Box display='flex' flexDirection='column' className={classes.dataEntry}>
                             <TableContainer component={Paper} elevation={0} className={tableClasses.captureMethodTableContainer} style={{ backgroundColor: 'rgb(255, 252, 209', paddingTop: '10px' }}>
@@ -404,6 +420,8 @@ function Model(props: ModelProps): React.ReactElement {
                                                     className={clsx(tableClasses.select, tableClasses.datasetFieldSelect)}
                                                     SelectDisplayProps={{ style: { paddingLeft: '10px', borderRadius: '5px' } }}
                                                 >
+
+                                                    {/* Grabs the dropdown options for SELECT */}
                                                     {getEntries(eVocabularySetID.eModelCreationMethod).map(({ idVocabulary, Term }, index) => <MenuItem key={index} value={idVocabulary}>{Term}</MenuItem>)}
                                                 </Select>
                                             </TableCell>
diff --git a/client/src/pages/Ingestion/components/Metadata/Photogrammetry/Description.tsx b/client/src/pages/Ingestion/components/Metadata/Photogrammetry/Description.tsx
index 30d2fce36..aa0bd67f2 100644
--- a/client/src/pages/Ingestion/components/Metadata/Photogrammetry/Description.tsx
+++ b/client/src/pages/Ingestion/components/Metadata/Photogrammetry/Description.tsx
@@ -42,6 +42,7 @@ function Description(props: DescriptionProps): React.ReactElement {
         <FieldType
             required
             label='Description'
+            labelTooltip='Add your uploaded file(s) description here.'
             direction='row'
             containerProps={{ ...rowFieldProps, ...containerProps }}
             width={viewMode ? 'auto' : undefined}
diff --git a/client/src/pages/Ingestion/components/Metadata/Photogrammetry/index.tsx b/client/src/pages/Ingestion/components/Metadata/Photogrammetry/index.tsx
index 2b075a2ad..2e9e88586 100644
--- a/client/src/pages/Ingestion/components/Metadata/Photogrammetry/index.tsx
+++ b/client/src/pages/Ingestion/components/Metadata/Photogrammetry/index.tsx
@@ -5,8 +5,8 @@
  *
  * This component renders the metadata fields specific to photogrammetry asset.
  */
-import { Box, Checkbox, Table, TableBody, TableCell, TableContainer, TableRow, Paper, Typography, Select, MenuItem } from '@material-ui/core';
-import { withStyles } from '@material-ui/core/styles';
+import { Box, Table, TableBody, TableCell, TableContainer, TableRow, Paper, Typography, Select, MenuItem, Checkbox } from '@material-ui/core';
+import { DebounceInput } from 'react-debounce-input';
 import React, { useState, useEffect } from 'react';
 import { AssetIdentifiers, DateInputField, TextArea } from '../../../../../components';
 import { MetadataType, StateIdentifier, StateMetadata, useMetadataStore, useVocabularyStore, useRepositoryStore, useSubjectStore, StateRelatedObject } from '../../../../../store';
@@ -18,8 +18,8 @@ import RelatedObjectsList from '../Model/RelatedObjectsList';
 import ObjectSelectModal from '../Model/ObjectSelectModal';
 import { RelatedObjectType, useGetSubjectQuery } from '../../../../../types/graphql';
 import clsx from 'clsx';
-import { DebounceInput } from 'react-debounce-input';
-import { useStyles } from '../../../../Repository/components/DetailsView/DetailsTab/CaptureDataDetails';
+import { useStyles as useTableStyles } from '../../../../Repository/components/DetailsView/DetailsTab/CaptureDataDetails';
+import { makeStyles, withStyles } from '@material-ui/core/styles';
 import { getNullableSelectEntries } from '../../../../../utils/controls';
 
 interface PhotogrammetryProps {
@@ -28,6 +28,87 @@ interface PhotogrammetryProps {
 
 function Photogrammetry(props: PhotogrammetryProps): React.ReactElement {
     const { metadataIndex } = props;
+    const tableClasses = useTableStyles();
+
+    const useStyles = makeStyles(({ palette }) => ({
+        container: {
+            display: 'flex',
+            flex: 1,
+            flexDirection: 'column',
+            // overflow: 'auto',
+            // maxHeight: 'calc(100vh - 60px)'
+        },
+        content: {
+            display: 'flex',
+            flex: 1,
+            // width: '52vw',
+            flexDirection: 'column',
+            padding: 20,
+            paddingBottom: 0
+        },
+        filesLabel: {
+            color: palette.primary.dark,
+            marginRight: 20,
+            fontWeight: 'bold',
+            fontSize: '1em',
+        },
+        fieldContainer: {
+            borderRadius: '0.5rem',
+            border: `1px dashed ${palette.primary.main}`,
+            overflow: 'hidden',
+            margin: '0.5rem',
+            padding: 0
+        },
+        fieldSizing: {
+            width: '240px',
+            padding: 0,
+            boxSizing: 'border-box',
+            textAlign: 'center'
+        },
+        fileChip: {
+            marginRight: 10
+        },
+        ingestContainer: {
+            borderRadius: '0.5rem',
+            border: `1px dashed ${palette.primary.main}`,
+            // overflow: 'hidden',
+            backgroundColor: palette.primary.light,
+            padding: 0,
+            marginBottom: '1rem',
+        },
+        splitView: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            overflow: 'hidden'
+        },
+        assetContents: {
+            // marginLeft: '1rem',
+            // borderLeft: '1px solid black'
+        },
+        modelDetailsAndSubtitleContainer: {
+            padding: '10px',
+            backgroundColor: palette.primary.light,
+            // width: 'fit-content',
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden',
+            borderRadius: '0.5rem', // 5
+            border: `1px dashed ${palette.primary.main}`,
+        },
+        modelDetailsContainer: {
+            display: 'flex',
+            flexDirection: 'row',
+            borderRadius: 5,
+            backgroundColor: palette.primary.light,
+            width: '100%',
+            columnGap: 10,
+            rowGap: 10,
+            flexWrap: 'wrap',
+            justifyContent: 'center'
+        },
+    }));
     const classes = useStyles();
 
     const [getFieldErrors, updateMetadataField] = useMetadataStore(state => [state.getFieldErrors, state.updateMetadataField]);
@@ -145,7 +226,7 @@ function Photogrammetry(props: PhotogrammetryProps): React.ReactElement {
     };
 
     return (
-        <Box>
+        <Box className={classes.container}>
             {idAsset && (
                 <Box mb={2}>
                     <TextArea
@@ -157,7 +238,7 @@ function Photogrammetry(props: PhotogrammetryProps): React.ReactElement {
                     />
                 </Box>
             )}
-            <Box width='52vw'>
+            <Box className={ classes.ingestContainer } style={{ padding: '10px', paddingBottom: '0' }}>
                 <AssetIdentifiers
                     systemCreated={photogrammetry.systemCreated}
                     identifiers={photogrammetry.identifiers}
@@ -170,7 +251,7 @@ function Photogrammetry(props: PhotogrammetryProps): React.ReactElement {
             </Box>
             {!idAsset && (
                 <React.Fragment>
-                    <Box mb={2}>
+                    <Box className={ classes.ingestContainer } >
                         <RelatedObjectsList
                             type={RelatedObjectType.Source}
                             relatedObjects={photogrammetry.sourceObjects}
@@ -179,7 +260,7 @@ function Photogrammetry(props: PhotogrammetryProps): React.ReactElement {
                             relationshipLanguage='Source Objects For This Ingest'
                         />
                     </Box>
-                    <Box mb={2}>
+                    <Box  className={ classes.ingestContainer } >
                         <RelatedObjectsList
                             type={RelatedObjectType.Derived}
                             relatedObjects={photogrammetry.derivedObjects}
@@ -190,19 +271,19 @@ function Photogrammetry(props: PhotogrammetryProps): React.ReactElement {
                     </Box>
                 </React.Fragment>
             )}
-            <Box style={{ width: '70%' }}>
+            <Box  className={ classes.ingestContainer } style={{ padding: '10px' }}>
                 <Description value={photogrammetry.description} onChange={setField} />
             </Box>
 
-            <Box className={classes.cdInputContainer}>
-                <TableContainer component={Paper} className={classes.captureMethodTableContainer} elevation={0} style={{ paddingTop: '10px' }}>
-                    <Table className={classes.table}>
+            <Box className={clsx(classes.ingestContainer, classes.splitView)}>
+                <TableContainer component={Paper} className={tableClasses.captureMethodTableContainer}  elevation={0} style={{ paddingTop: '10px', width: '30rem' }}>
+                    <Table className={tableClasses.table}>
                         <TableBody>
-                            <TableRow className={classes.tableRow}>
-                                <TableCell className={classes.tableCell}>
-                                    <Typography className={classes.labelText}>Name</Typography>
+                            <TableRow className={tableClasses.tableRow}>
+                                <TableCell className={tableClasses.tableCell}>
+                                    <Typography className={tableClasses.labelText}>Name</Typography>
                                 </TableCell>
-                                <TableCell className={clsx(classes.tableCell, classes.valueText)}>
+                                <TableCell className={clsx(tableClasses.tableCell, tableClasses.valueText)}>
                                     <DebounceInput
                                         element='input'
                                         title='itemPositionFieldId-input'
@@ -210,17 +291,17 @@ function Photogrammetry(props: PhotogrammetryProps): React.ReactElement {
                                         type='string'
                                         name='name'
                                         onChange={setNameField}
-                                        className={clsx(classes.input, classes.datasetFieldInput)}
+                                        className={clsx(tableClasses.input, classes.fieldSizing)}
                                     />
                                 </TableCell>
                             </TableRow>
-                            <TableRow className={classes.tableRow} style={{ ...errorFieldStyling(errors.photogrammetry.dateCaptured) }}>
-                                <TableCell className={classes.tableCell}>
-                                    <Typography className={classes.labelText}>
+                            <TableRow className={tableClasses.tableRow} style={{ ...errorFieldStyling(errors.photogrammetry.dateCaptured) }}>
+                                <TableCell className={tableClasses.tableCell}>
+                                    <Typography className={tableClasses.labelText}>
                                         Date Captured
                                     </Typography>
                                 </TableCell>
-                                <TableCell className={classes.tableCell}>
+                                <TableCell className={tableClasses.tableCell}>
                                     <DateInputField
                                         value={photogrammetry.dateCaptured}
                                         onChange={(_, value) => setDateField('dateCaptured', value)}
@@ -228,205 +309,222 @@ function Photogrammetry(props: PhotogrammetryProps): React.ReactElement {
                                     />
                                 </TableCell>
                             </TableRow>
-                            <TableRow className={classes.tableRow}>
-                                <TableCell className={classes.tableCell}>
-                                    <Typography className={classes.labelText}>Dataset Type</Typography>
+                            <TableRow className={tableClasses.tableRow}>
+                                {/* Spacer */}
+                                <TableCell className={tableClasses.tableCell}>
+                                    <Typography className={tableClasses.labelText} style={{ margin: '1rem' }}> </Typography>
+                                </TableCell>
+                            </TableRow>
+                            <TableRow className={tableClasses.tableRow}>
+                                <TableCell className={tableClasses.tableCell}>
+                                    <Typography className={tableClasses.labelText}>Dataset Type</Typography>
                                 </TableCell>
-                                <TableCell className={classes.tableCell}>
+                                <TableCell className={tableClasses.tableCell}>
                                     <Select
                                         value={withDefaultValueNumber(photogrammetry.datasetType, getInitialEntry(eVocabularySetID.eCaptureDataDatasetType))}
                                         name='datasetType'
                                         onChange={setIdField}
                                         disableUnderline
-                                        className={clsx(classes.select, classes.datasetTypeSelect)}
+                                        className={clsx(tableClasses.select, classes.fieldSizing)}
                                         SelectDisplayProps={{ style: { paddingLeft: '10px', borderRadius: '5px' } }}
                                     >
                                         {getEntries(eVocabularySetID.eCaptureDataDatasetType).map(({ idVocabulary, Term }, index) => <MenuItem key={index} value={idVocabulary}>{Term}</MenuItem>)}
                                     </Select>
                                 </TableCell>
                             </TableRow>
+                            <TableRow className={tableClasses.tableRow}>
+                                <TableCell className={tableClasses.tableCell}>
+                                    <Typography className={tableClasses.labelText}>Dataset Field ID</Typography>
+                                </TableCell>
+                                <TableCell className={tableClasses.tableCell}>
+                                    <DebounceInput
+                                        element='input'
+                                        title='datasetFieldId-input'
+                                        value={photogrammetry.datasetFieldId || ''}
+                                        type='number'
+                                        name='datasetFieldId'
+                                        onChange={setIdField}
+                                        className={clsx(tableClasses.input, classes.fieldSizing)}
+                                    />
+                                </TableCell>
+                            </TableRow>
+                            <TableRow className={tableClasses.tableRow}>
+                                {/* Spacer */}
+                                <TableCell className={tableClasses.tableCell}>
+                                    <Typography className={tableClasses.labelText} style={{ margin: '1rem' }}> </Typography>
+                                </TableCell>
+                            </TableRow>
+                            <TableRow className={tableClasses.tableRow}>
+                                <TableCell className={tableClasses.tableCell}>
+                                    <Typography className={tableClasses.labelText}>Item Position Type</Typography>
+                                </TableCell>
+                                <TableCell className={tableClasses.tableCell}>
+                                    <Select
+                                        value={photogrammetry.itemPositionType ?? -1}
+                                        name='itemPositionType'
+                                        onChange={setIdField}
+                                        disableUnderline
+                                        className={clsx(tableClasses.select, classes.fieldSizing)}
+                                        SelectDisplayProps={{ style: { paddingLeft: '10px', borderRadius: '5px' } }}
+                                    >
+                                        {getNullableSelectEntries(getEntries(eVocabularySetID.eCaptureDataItemPositionType), 'idVocabulary', 'Term').map(({ value, label }, index) => <MenuItem key={index} value={value}>{label}</MenuItem>)}
+                                    </Select>
+                                </TableCell>
+                            </TableRow>
+                            <TableRow className={tableClasses.tableRow}>
+                                <TableCell className={tableClasses.tableCell}>
+                                    <Typography className={tableClasses.labelText}>Item Position Field ID</Typography>
+                                </TableCell>
+                                <TableCell className={tableClasses.tableCell}>
+                                    <DebounceInput
+                                        element='input'
+                                        title='itemPositionFieldId-input'
+                                        value={photogrammetry.itemPositionFieldId || ''}
+                                        type='number'
+                                        name='itemPositionFieldId'
+                                        onChange={setIdField}
+                                        className={clsx(tableClasses.input, classes.fieldSizing)}
+                                    />
+                                </TableCell>
+                            </TableRow>
+                            <TableRow className={tableClasses.tableRow}>
+                                <TableCell className={tableClasses.tableCell}>
+                                    <Typography className={tableClasses.labelText}>Item Arrangement Field ID</Typography>
+                                </TableCell>
+                                <TableCell className={tableClasses.tableCell}>
+                                    <DebounceInput
+                                        element='input'
+                                        title='itemArrangementFieldId-input'
+                                        value={photogrammetry.itemArrangementFieldId || ''}
+                                        type='number'
+                                        name='itemArrangementFieldId'
+                                        onChange={setIdField}
+                                        className={clsx(tableClasses.input, classes.fieldSizing)}
+                                    />
+                                </TableCell>
+                            </TableRow>
+                            <TableRow className={tableClasses.tableRow}>
+                                {/* Spacer */}
+                                <TableCell className={tableClasses.tableCell}>
+                                    <Typography className={tableClasses.labelText} style={{ margin: '1rem' }}> </Typography>
+                                </TableCell>
+                            </TableRow>
+                            <TableRow className={tableClasses.tableRow}>
+                                <TableCell className={tableClasses.tableCell}>
+                                    <Typography className={tableClasses.labelText}>Focus Type</Typography>
+                                </TableCell>
+                                <TableCell className={tableClasses.tableCell}>
+                                    <Select
+                                        value={photogrammetry?.focusType ?? -1}
+                                        name='focusType'
+                                        onChange={setIdField}
+                                        disableUnderline
+                                        className={clsx(tableClasses.select, classes.fieldSizing)}
+                                        SelectDisplayProps={{ style: { paddingLeft: '10px', borderRadius: '5px' } }}
+                                    >
+                                        {getNullableSelectEntries(getEntries(eVocabularySetID.eCaptureDataFocusType), 'idVocabulary', 'Term').map(({ value, label }, index) => <MenuItem key={index} value={value}>{label}</MenuItem>)}
+                                    </Select>
+                                </TableCell>
+                            </TableRow>
+                            <TableRow className={tableClasses.tableRow}>
+                                <TableCell className={tableClasses.tableCell}>
+                                    <Typography className={tableClasses.labelText}>Light Source Type</Typography>
+                                </TableCell>
+                                <TableCell className={tableClasses.tableCell}>
+                                    <Select
+                                        value={photogrammetry.lightsourceType ?? -1}
+                                        name='lightsourceType'
+                                        onChange={setIdField}
+                                        disableUnderline
+                                        className={clsx(tableClasses.select, classes.fieldSizing)}
+                                        SelectDisplayProps={{ style: { paddingLeft: '10px', borderRadius: '5px' } }}
+                                    >
+                                        {getNullableSelectEntries(getEntries(eVocabularySetID.eCaptureDataLightSourceType), 'idVocabulary', 'Term').map(({ value, label }, index) => <MenuItem key={index} value={value}>{label}</MenuItem>)}
+                                    </Select>
+                                </TableCell>
+                            </TableRow>
+                            <TableRow className={tableClasses.tableRow}>
+                                <TableCell className={tableClasses.tableCell}>
+                                    <Typography className={tableClasses.labelText}>Background Removal Method</Typography>
+                                </TableCell>
+                                <TableCell className={tableClasses.tableCell}>
+                                    <Select
+                                        value={photogrammetry.backgroundRemovalMethod ?? -1}
+                                        name='backgroundRemovalMethod'
+                                        onChange={setIdField}
+                                        disableUnderline
+                                        className={clsx(tableClasses.select, classes.fieldSizing)}
+                                        SelectDisplayProps={{ style: { paddingLeft: '10px', borderRadius: '5px' } }}
+                                    >
+                                        {getNullableSelectEntries(getEntries(eVocabularySetID.eCaptureDataBackgroundRemovalMethod), 'idVocabulary', 'Term').map(({ value, label }, index) => <MenuItem key={index} value={value}>{label}</MenuItem>)}
+                                    </Select>
+                                </TableCell>
+                            </TableRow>
+                            <TableRow className={tableClasses.tableRow}>
+                                {/* Spacer */}
+                                <TableCell className={tableClasses.tableCell}>
+                                    <Typography className={tableClasses.labelText} style={{ margin: '1rem' }}> </Typography>
+                                </TableCell>
+                            </TableRow>
+                            <TableRow className={tableClasses.tableRow}>
+                                <TableCell className={tableClasses.tableCell}>
+                                    <Typography className={tableClasses.labelText}>Cluster Type</Typography>
+                                </TableCell>
+                                <TableCell className={tableClasses.tableCell}>
+                                    <Select
+                                        value={photogrammetry.clusterType ?? -1}
+                                        name='clusterType'
+                                        onChange={setIdField}
+                                        disableUnderline
+                                        className={clsx(tableClasses.select, classes.fieldSizing)}
+                                        SelectDisplayProps={{ style: { paddingLeft: '10px', borderRadius: '5px' } }}
+                                    >
+                                        {getNullableSelectEntries(getEntries(eVocabularySetID.eCaptureDataClusterType), 'idVocabulary', 'Term').map(({ value, label }, index) => <MenuItem key={index} value={value}>{label}</MenuItem>)}
+                                    </Select>
+                                </TableCell>
+                            </TableRow>
+                            <TableRow className={tableClasses.tableRow}>
+                                <TableCell className={tableClasses.tableCell}>
+                                    <Typography className={tableClasses.labelText}>Cluster Geometry Field ID</Typography>
+                                </TableCell>
+                                <TableCell className={tableClasses.tableCell}>
+                                    <DebounceInput
+                                        element='input'
+                                        title='clusterGeometryFieldId-input'
+                                        value={photogrammetry.clusterGeometryFieldId || ''}
+                                        type='number'
+                                        name='clusterGeometryFieldId'
+                                        onChange={setIdField}
+                                        className={clsx(tableClasses.input, classes.fieldSizing)}
+                                    />
+                                </TableCell>
+                            </TableRow>
+                            <TableRow className={tableClasses.tableRow} style={{ height: '26px' }}>
+                                <TableCell className={tableClasses.tableCell}>
+                                    <Typography className={tableClasses.labelText}>Camera Settings Uniform</Typography>
+                                </TableCell>
+                                <TableCell className={tableClasses.tableCell}>
+                                    <CustomCheckbox
+                                        className={tableClasses.checkbox}
+                                        disabled
+                                        name='cameraSettingUniform'
+                                        checked={withDefaultValueBoolean(photogrammetry.cameraSettingUniform ?? false, false)}
+                                        title='cameraSettingsUniform-input'
+                                        size='small'
+                                    />
+                                </TableCell>
+                            </TableRow>
                         </TableBody>
                     </Table>
                 </TableContainer>
 
-                <AssetContents
-                    folders={photogrammetry.folders}
-                    originalFolders={[...photogrammetry.folders]}
-                    options={getEntries(eVocabularySetID.eCaptureDataFileVariantType)}
-                    onUpdate={updateFolderVariant}
-                />
-
-                <Box className={classes.fieldTableBoxContainer}>
-                    <TableContainer className={classes.fieldTableContainer}>
-                        <Table className={classes.table}>
-                            <TableBody>
-                                <TableRow className={classes.tableRow}>
-                                    <TableCell className={classes.tableCell}>
-                                        <Typography className={classes.labelText}>Dataset Field ID</Typography>
-                                    </TableCell>
-                                    <TableCell className={classes.tableCell}>
-                                        <DebounceInput
-                                            element='input'
-                                            title='datasetFieldId-input'
-                                            value={photogrammetry.datasetFieldId || ''}
-                                            type='number'
-                                            name='datasetFieldId'
-                                            onChange={setIdField}
-                                            className={clsx(classes.input, classes.datasetFieldInput)}
-                                        />
-                                    </TableCell>
-                                </TableRow>
-                                <TableRow className={classes.tableRow}>
-                                    <TableCell className={classes.tableCell}>
-                                        <Typography className={classes.labelText}>Item Position Type</Typography>
-                                    </TableCell>
-                                    <TableCell className={classes.tableCell}>
-                                        <Select
-                                            value={photogrammetry.itemPositionType ?? -1}
-                                            name='itemPositionType'
-                                            onChange={setIdField}
-                                            disableUnderline
-                                            className={clsx(classes.select, classes.datasetFieldSelect)}
-                                            SelectDisplayProps={{ style: { paddingLeft: '10px', borderRadius: '5px' } }}
-                                        >
-                                            {getNullableSelectEntries(getEntries(eVocabularySetID.eCaptureDataItemPositionType), 'idVocabulary', 'Term').map(({ value, label }, index) => <MenuItem key={index} value={value}>{label}</MenuItem>)}
-                                        </Select>
-                                    </TableCell>
-                                </TableRow>
-                                <TableRow className={classes.tableRow}>
-                                    <TableCell className={classes.tableCell}>
-                                        <Typography className={classes.labelText}>Item Position Field ID</Typography>
-                                    </TableCell>
-                                    <TableCell className={classes.tableCell}>
-                                        <DebounceInput
-                                            element='input'
-                                            title='itemPositionFieldId-input'
-                                            value={photogrammetry.itemPositionFieldId || ''}
-                                            type='number'
-                                            name='itemPositionFieldId'
-                                            onChange={setIdField}
-                                            className={clsx(classes.input, classes.datasetFieldInput)}
-                                        />
-                                    </TableCell>
-                                </TableRow>
-                                <TableRow className={classes.tableRow}>
-                                    <TableCell className={classes.tableCell}>
-                                        <Typography className={classes.labelText}>Item Arrangement Field ID</Typography>
-                                    </TableCell>
-                                    <TableCell className={classes.tableCell}>
-                                        <DebounceInput
-                                            element='input'
-                                            title='itemArrangementFieldId-input'
-                                            value={photogrammetry.itemArrangementFieldId || ''}
-                                            type='number'
-                                            name='itemArrangementFieldId'
-                                            onChange={setIdField}
-                                            className={clsx(classes.input, classes.datasetFieldInput)}
-                                        />
-                                    </TableCell>
-                                </TableRow>
-                                <TableRow className={classes.tableRow}>
-                                    <TableCell className={classes.tableCell}>
-                                        <Typography className={classes.labelText}>Focus Type</Typography>
-                                    </TableCell>
-                                    <TableCell className={classes.tableCell}>
-                                        <Select
-                                            value={photogrammetry?.focusType ?? -1}
-                                            name='focusType'
-                                            onChange={setIdField}
-                                            disableUnderline
-                                            className={clsx(classes.select, classes.datasetFieldSelect)}
-                                            SelectDisplayProps={{ style: { paddingLeft: '10px', borderRadius: '5px' } }}
-                                        >
-                                            {getNullableSelectEntries(getEntries(eVocabularySetID.eCaptureDataFocusType), 'idVocabulary', 'Term').map(({ value, label }, index) => <MenuItem key={index} value={value}>{label}</MenuItem>)}
-                                        </Select>
-                                    </TableCell>
-                                </TableRow>
-                                <TableRow className={classes.tableRow}>
-                                    <TableCell className={classes.tableCell}>
-                                        <Typography className={classes.labelText}>Light Source Type</Typography>
-                                    </TableCell>
-                                    <TableCell className={classes.tableCell}>
-                                        <Select
-                                            value={photogrammetry.lightsourceType ?? -1}
-                                            name='lightsourceType'
-                                            onChange={setIdField}
-                                            disableUnderline
-                                            className={clsx(classes.select, classes.datasetFieldSelect)}
-                                            SelectDisplayProps={{ style: { paddingLeft: '10px', borderRadius: '5px' } }}
-                                        >
-                                            {getNullableSelectEntries(getEntries(eVocabularySetID.eCaptureDataLightSourceType), 'idVocabulary', 'Term').map(({ value, label }, index) => <MenuItem key={index} value={value}>{label}</MenuItem>)}
-                                        </Select>
-                                    </TableCell>
-                                </TableRow>
-                                <TableRow className={classes.tableRow}>
-                                    <TableCell className={classes.tableCell}>
-                                        <Typography className={classes.labelText}>Background Removal Method</Typography>
-                                    </TableCell>
-                                    <TableCell className={classes.tableCell}>
-                                        <Select
-                                            value={photogrammetry.backgroundRemovalMethod ?? -1}
-                                            name='backgroundRemovalMethod'
-                                            onChange={setIdField}
-                                            disableUnderline
-                                            className={clsx(classes.select, classes.datasetFieldSelect)}
-                                            SelectDisplayProps={{ style: { paddingLeft: '10px', borderRadius: '5px' } }}
-                                        >
-                                            {getNullableSelectEntries(getEntries(eVocabularySetID.eCaptureDataBackgroundRemovalMethod), 'idVocabulary', 'Term').map(({ value, label }, index) => <MenuItem key={index} value={value}>{label}</MenuItem>)}
-                                        </Select>
-                                    </TableCell>
-                                </TableRow>
-                                <TableRow className={classes.tableRow}>
-                                    <TableCell className={classes.tableCell}>
-                                        <Typography className={classes.labelText}>Cluster Type</Typography>
-                                    </TableCell>
-                                    <TableCell className={classes.tableCell}>
-                                        <Select
-                                            value={photogrammetry.clusterType ?? -1}
-                                            name='clusterType'
-                                            onChange={setIdField}
-                                            disableUnderline
-                                            className={clsx(classes.select, classes.datasetFieldSelect)}
-                                            SelectDisplayProps={{ style: { paddingLeft: '10px', borderRadius: '5px' } }}
-                                        >
-                                            {getNullableSelectEntries(getEntries(eVocabularySetID.eCaptureDataClusterType), 'idVocabulary', 'Term').map(({ value, label }, index) => <MenuItem key={index} value={value}>{label}</MenuItem>)}
-                                        </Select>
-                                    </TableCell>
-                                </TableRow>
-                                <TableRow className={classes.tableRow}>
-                                    <TableCell className={classes.tableCell}>
-                                        <Typography className={classes.labelText}>Cluster Geometry Field ID</Typography>
-                                    </TableCell>
-                                    <TableCell className={classes.tableCell}>
-                                        <DebounceInput
-                                            element='input'
-                                            title='clusterGeometryFieldId-input'
-                                            value={photogrammetry.clusterGeometryFieldId || ''}
-                                            type='number'
-                                            name='clusterGeometryFieldId'
-                                            onChange={setIdField}
-                                            className={clsx(classes.input, classes.datasetFieldInput)}
-                                        />
-                                    </TableCell>
-                                </TableRow>
-                                <TableRow className={classes.tableRow} style={{ height: '26px' }}>
-                                    <TableCell className={classes.tableCell}>
-                                        <Typography className={classes.labelText}>Camera Settings Uniform</Typography>
-                                    </TableCell>
-                                    <TableCell className={classes.tableCell}>
-                                        <CustomCheckbox
-                                            className={classes.checkbox}
-                                            disabled
-                                            name='cameraSettingUniform'
-                                            checked={withDefaultValueBoolean(photogrammetry.cameraSettingUniform ?? false, false)}
-                                            title='cameraSettingsUniform-input'
-                                            size='small'
-                                        />
-                                    </TableCell>
-                                </TableRow>
-                            </TableBody>
-                        </Table>
-                    </TableContainer>
+                <Box className={classes.assetContents}>
+                    <AssetContents
+                        folders={photogrammetry.folders}
+                        originalFolders={[...photogrammetry.folders]}
+                        options={getEntries(eVocabularySetID.eCaptureDataFileVariantType)}
+                        onUpdate={updateFolderVariant}
+                    />
                 </Box>
             </Box>
 
diff --git a/client/src/pages/Ingestion/components/Metadata/index.tsx b/client/src/pages/Ingestion/components/Metadata/index.tsx
index 647e58f57..8fa294465 100644
--- a/client/src/pages/Ingestion/components/Metadata/index.tsx
+++ b/client/src/pages/Ingestion/components/Metadata/index.tsx
@@ -105,6 +105,7 @@ function Metadata(): React.ReactElement {
                         }
                     }
                 });
+                //  detects the asset type for breadcrumb
                 if (metadata.idSOAttachment && metadata.idAsset) {
                     switch (objectType) {
                         case eSystemObjectType.eCaptureData: {
@@ -165,6 +166,7 @@ function Metadata(): React.ReactElement {
         const updateMode: boolean = !!(metadata.file.idAsset);
         setFieldErrors(getFieldErrors(metadata));
 
+        // Add the validation to check if the value in fields exist and is a string
         if (assetType.photogrammetry) {
             const hasError: boolean = updateMode
                 ? validateFields(metadata.photogrammetry, photogrammetryFieldsSchemaUpdate)
@@ -193,6 +195,7 @@ function Metadata(): React.ReactElement {
             if (hasError) return;
         }
 
+        //  This may be the code that initiates the completion of the Ingestion process.
         if (isLast) {
             setDisableNavigation(true);
             setIngestionLoading(true);
diff --git a/client/src/pages/Ingestion/components/SubjectItem/ItemList.tsx b/client/src/pages/Ingestion/components/SubjectItem/ItemList.tsx
index 9ea0bbad9..82e08ae94 100644
--- a/client/src/pages/Ingestion/components/SubjectItem/ItemList.tsx
+++ b/client/src/pages/Ingestion/components/SubjectItem/ItemList.tsx
@@ -16,7 +16,7 @@ import { StateItem, useItemStore, useSubjectStore } from '../../../../store';
 import { palette } from '../../../../theme';
 import lodash from 'lodash';
 
-const useStyles = makeStyles(({ palette, spacing, typography, breakpoints }) => createStyles({
+const useStyles = makeStyles(({ palette, typography }) => createStyles({
     container: {
         maxHeight: '18vh',
         backgroundColor: palette.background.paper
@@ -25,12 +25,12 @@ const useStyles = makeStyles(({ palette, spacing, typography, breakpoints }) =>
         position: 'sticky',
         top: 0,
         fontSize: '0.8em',
-        backgroundColor: palette.background.paper,
-        color: palette.primary.contrastText,
+        backgroundColor: '#d1e7fa', // palette.primary.light, //palette.background.paper,
+        color: palette.primary.dark, //contrastText,
         zIndex: 10,
-        [breakpoints.down('lg')]: {
-            padding: '5px 16px',
-        }
+        // [breakpoints.down('lg')]: {
+        //     padding: '5px 16px',
+        // }
     },
     body: {
         overflow: 'auto'
@@ -39,11 +39,10 @@ const useStyles = makeStyles(({ palette, spacing, typography, breakpoints }) =>
         textAlign: 'center',
         color: palette.grey[500],
         fontStyle: 'italic',
-        marginTop: spacing(4)
+        // marginTop: spacing(4)
     },
     selected: {
         cursor: 'pointer',
-        marginTop: 4
     },
     nameInput: {
         width: '100%',
@@ -107,7 +106,6 @@ function ItemList(): React.ReactElement {
                         <TableCell className={classes.headerText} align='left'>PROJECT</TableCell>
                         <TableCell className={classes.headerText} style={{ width: 100 }} align='center'>FULL SUBJECT?</TableCell>
                         <TableCell className={classes.headerText} align='left'>NAME/SUBTITLE</TableCell>
-
                     </TableRow>
                 </TableHead>
                 <TableBody className={classes.body}>
diff --git a/client/src/pages/Ingestion/components/SubjectItem/SearchList.tsx b/client/src/pages/Ingestion/components/SubjectItem/SearchList.tsx
index 5d8fd287f..339c8ecc8 100644
--- a/client/src/pages/Ingestion/components/SubjectItem/SearchList.tsx
+++ b/client/src/pages/Ingestion/components/SubjectItem/SearchList.tsx
@@ -15,22 +15,27 @@ import { SubjectUnitIdentifier } from '../../../../types/graphql';
 import SubjectList from './SubjectList';
 import { toast } from 'react-toastify';
 import { actionOnKeyPress } from '../../../../utils/shared';
+// import { HelpOutline } from '@material-ui/icons';
+// import Tooltip from "@material-ui/core/Tooltip";
 
 const useStyles = makeStyles(({ palette, breakpoints }) => ({
     container: {
         display: 'flex',
         alignItems: 'center',
-        paddingBottom: 10
     },
     searchField: {
         display: 'flex',
         flex: 1,
-        marginRight: 20
+        marginTop: 0,
+        marginBottom: '1rem',
+        marginRight: 20,
+        marginLeft: '1rem',
     },
     searchButton: {
         height: 35,
         width: 60,
         color: palette.background.paper,
+        marginRight: '1rem',
         [breakpoints.down('lg')]: {
             height: 30
         }
@@ -38,7 +43,7 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
 }));
 
 type SearchListProps = {
-    EdanOnly?: boolean
+    EdanOnly?: boolean;
 };
 
 function SearchList(props: SearchListProps): React.ReactElement {
@@ -80,7 +85,13 @@ function SearchList(props: SearchListProps): React.ReactElement {
         content = <SubjectList subjects={subjects} selected={false} emptyLabel='No subjects found' />;
 
     return (
-        <FieldType required={false} label='Search for Subject' marginTop={2} padding='10px'>
+        <FieldType
+            required={false}
+            label='Search for Subject'
+            align='center'
+            labelProps={{ style: { fontSize: '1em', fontWeight: 500, margin: '1% 0px' } }}
+            labelTooltip='This is the entity that the digital asset(s) is based on and where it will be saved to.'
+        >
             <Box className={classes.container}>
                 <label htmlFor='searchSubjectFilter' style={{ display: 'none' }}>Search Subject</label>
                 <TextField
diff --git a/client/src/pages/Ingestion/components/SubjectItem/SubjectList.tsx b/client/src/pages/Ingestion/components/SubjectItem/SubjectList.tsx
index 7120a8538..77240d8b9 100644
--- a/client/src/pages/Ingestion/components/SubjectItem/SubjectList.tsx
+++ b/client/src/pages/Ingestion/components/SubjectItem/SubjectList.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 import { StateSubject, useSubjectStore } from '../../../../store';
 import SubjectListItem from './SubjectListItem';
 
-const useStyles = makeStyles(({ palette, spacing, breakpoints }) => ({
+const useStyles = makeStyles(({ palette, spacing }) => ({
     container: {
         maxHeight: '20vh',
         backgroundColor: palette.background.paper
@@ -18,11 +18,11 @@ const useStyles = makeStyles(({ palette, spacing, breakpoints }) => ({
         position: 'sticky',
         top: 0,
         fontSize: '0.8em',
-        backgroundColor: palette.background.paper,
-        color: palette.primary.contrastText,
-        [breakpoints.down('lg')]: {
-            padding: '5px 16px',
-        }
+        backgroundColor: '#d1e7fa', //palette.primary.light, //palette.background.paper,
+        color: palette.primary.dark, //contrastText,
+        // [breakpoints.down('lg')]: {
+        //     padding: '5px 16px',
+        // }
     },
     body: {
         overflow: 'auto'
@@ -46,7 +46,7 @@ function SubjectList(props: SubjectListProps): React.ReactElement {
     const [addSubject, removeSubject] = useSubjectStore(state => [state.addSubject, state.removeSubject]);
     const classes = useStyles();
 
-    const header: string[] = ['ARK / ID', 'UNIT', 'NAME', 'ID'];
+    const header: string[] = ['', 'ARK / ID', 'UNIT', 'NAME', 'ID'];
 
     const getSubjectList = ({ id, arkId, unit, name, collectionId }: StateSubject, index: number) => (
         <SubjectListItem
diff --git a/client/src/pages/Ingestion/components/SubjectItem/SubjectListItem.tsx b/client/src/pages/Ingestion/components/SubjectItem/SubjectListItem.tsx
index fc831e0a6..813eb25c9 100644
--- a/client/src/pages/Ingestion/components/SubjectItem/SubjectListItem.tsx
+++ b/client/src/pages/Ingestion/components/SubjectItem/SubjectListItem.tsx
@@ -12,6 +12,7 @@ import { StateSubject } from '../../../../store';
 const useStyles = makeStyles(() => ({
     label: {
         width: '100%',
+        fontSize: '0.75rem',
     },
     options: {
         marginLeft: 20
@@ -57,6 +58,11 @@ function SubjectListItem(props: SubjectListItemProps): React.ReactElement {
 
     return (
         <TableRow>
+            <TableCell style={cellStyle} align='left'>
+                <Box className={classes.options}>
+                    {selected ? <MdRemoveCircleOutline className={classes.option} onClick={remove} size={20} /> : <MdAddCircleOutline className={classes.option} onClick={add} size={20} />}
+                </Box>
+            </TableCell>
             <TableCell style={cellStyle}>
                 <Typography className={classes.label} variant='caption'>{arkId}</Typography>
             </TableCell>
@@ -69,11 +75,6 @@ function SubjectListItem(props: SubjectListItemProps): React.ReactElement {
             <TableCell style={cellStyle} align='left'>
                 <Typography className={classes.label} variant='caption'>{collectionId}</Typography>
             </TableCell>
-            <TableCell style={cellStyle} align='left'>
-                <Box className={classes.options}>
-                    {selected ? <MdRemoveCircleOutline className={classes.option} onClick={remove} size={20} /> : <MdAddCircleOutline className={classes.option} onClick={add} size={20} />}
-                </Box>
-            </TableCell>
         </TableRow>
     );
 }
diff --git a/client/src/pages/Ingestion/components/SubjectItem/index.tsx b/client/src/pages/Ingestion/components/SubjectItem/index.tsx
index 5c1b7004a..c81af2140 100644
--- a/client/src/pages/Ingestion/components/SubjectItem/index.tsx
+++ b/client/src/pages/Ingestion/components/SubjectItem/index.tsx
@@ -17,6 +17,8 @@ import SubjectList from './SubjectList';
 import { Helmet } from 'react-helmet';
 import useIngest from '../../hooks/useIngest';
 import { confirmLeaveIngestion } from '../..';
+//import { HelpOutline } from '@material-ui/icons';
+//import { Tooltip } from 'client/src/components/controls/ToolTip';
 
 const useStyles = makeStyles(({ palette }) => ({
     container: {
@@ -29,18 +31,35 @@ const useStyles = makeStyles(({ palette }) => ({
     content: {
         display: 'flex',
         flex: 1,
-        width: '52vw',
+        marginRight: '1rem',
         flexDirection: 'column',
         padding: 20,
         paddingBottom: 0
     },
     filesLabel: {
         color: palette.primary.dark,
-        marginRight: 20
+        marginRight: 20,
+        fontWeight: 'bold',
+        fontSize: '1em',
+    },
+    fieldContainer: {
+        borderRadius: '0.5rem',
+        border: `1px dashed ${palette.primary.main}`,
+        overflow: 'hidden',
+        margin: '0.5rem',
+        padding: 0
     },
     fileChip: {
         marginRight: 10
-    }
+    },
+    ingestContainer: {
+        borderRadius: '0.5rem',
+        border: `1px dashed ${palette.primary.main}`,
+        overflow: 'hidden',
+        backgroundColor: palette.primary.light,
+        padding: 0,
+        marginBottom: '1rem',
+    },
 }));
 
 function SubjectItem(): React.ReactElement {
@@ -146,27 +165,38 @@ function SubjectItem(): React.ReactElement {
                     <Typography className={classes.filesLabel}>Select Subject and Media Group for:</Typography>
                     {metadatas.map(({ file }, index) => <Chip key={index} className={classes.fileChip} label={file.name} variant='outlined' />)}
                 </Box>
-                <SearchList />
-                <FieldType
-                    error={subjectError}
-                    required
-                    label='Subject(s) Selected'
-                    marginTop={2}
-                    padding='10px'
-                >
-                    <SubjectList subjects={subjects} selected emptyLabel='Search and select subject from above' />
-                </FieldType>
-
-                <FieldType
-                    loading={itemsLoading}
-                    error={itemError}
-                    required
-                    label='Media Group'
-                    marginTop={2}
-                    padding='10px'
-                >
-                    <ItemList />
-                </FieldType>
+                <Box className={classes.ingestContainer} style={{ marginTop: '2rem' }}>
+                    <SearchList />
+                </Box>
+
+                <Box className={classes.ingestContainer}>
+                    <FieldType
+                        error={subjectError}
+                        required
+                        label='Subject(s) Selected'
+                        align='center'
+                        labelProps={{ style: { fontSize: '1em', fontWeight: 500, margin: '1% 0px', padding: 0 } }}
+                        labelTooltip='This shows the subject currently selected.'
+                    >
+                        <SubjectList subjects={subjects} selected emptyLabel='Search and select subject from above' />
+                    </FieldType>
+                </Box>
+
+                <Box className={classes.ingestContainer}>
+                    <FieldType
+                        loading={itemsLoading}
+                        error={itemError}
+                        required
+                        label='Media Group'
+                        padding='10px'
+                        align='center'
+                        labelProps={{ style: { fontSize: '1em', fontWeight: 500, margin: '1% 0px' } }}
+                        labelTooltip='Media groups are basically a group of digital assets that when grouped together can be used to make up a single subject or portion of a subject.  Each subject can have more than one media group'
+                    >
+                        <ItemList />
+                    </FieldType>
+                </Box>
+
             </Box>
             <SidebarBottomNavigator
                 rightLoading={metadataStepLoading}
diff --git a/client/src/pages/Ingestion/components/Uploads/FileListItem.tsx b/client/src/pages/Ingestion/components/Uploads/FileListItem.tsx
index c90fe44db..e26755e05 100644
--- a/client/src/pages/Ingestion/components/Uploads/FileListItem.tsx
+++ b/client/src/pages/Ingestion/components/Uploads/FileListItem.tsx
@@ -7,7 +7,7 @@
  * This component renders file list item used in FileListItem component.
  */
 import { Box, MenuItem, Select, Typography } from '@material-ui/core';
-import { green, grey, red, yellow } from '@material-ui/core/colors';
+import { green, grey, red } from '@material-ui/core/colors';
 import { fade, makeStyles, createStyles } from '@material-ui/core/styles';
 import { motion } from 'framer-motion';
 import React from 'react';
@@ -29,7 +29,9 @@ const useStyles = makeStyles(({ palette, breakpoints }) => createStyles({
         alignItems: 'center',
         backgroundColor: palette.background.paper,
         marginTop: 10,
-        borderRadius: 5,
+        borderRadius: 1,
+        border: `1px solid ${fade(palette.primary.main, 0.3)}`,
+        boxSizing: 'border-box',
         width: '100%',
         zIndex: 10,
         [breakpoints.down('lg')]: {
@@ -39,6 +41,7 @@ const useStyles = makeStyles(({ palette, breakpoints }) => createStyles({
     item: {
         display: 'flex',
         width: '100%',
+        padding: '0px 10px',
         zIndex: 'inherit',
         cursor: ({ complete }: FileListItemProps) => (complete ? 'pointer' : 'default')
     },
@@ -194,7 +197,10 @@ function FileListItem(props: FileListItemProps): React.ReactElement {
         onSelect
     } = props;
     const classes = useStyles(props);
-    const upload = () => onUpload(id);
+    const upload = () => {
+        onUpload(id);
+    };
+
     const remove = () => {
         const isUpdate = references?.idAsset;
         const isAttachment = references?.idSOAttachment;
@@ -211,14 +217,14 @@ function FileListItem(props: FileListItemProps): React.ReactElement {
     };
     const select = () => (complete ? onSelect(id, !selected) : null);
     let options: React.ReactNode = null;
-
     if (!complete) {
+        /*Uploaded Items State*/
         options = (
             <React.Fragment>
                 {!uploading && !failed && <MdFileUpload className={classes.option} onClick={upload} size={22} color={green[500]} />}
                 {uploading && !failed && <Progress className={classes.option} size={16} />}
-                {failed && <FaRedo className={classes.option} onClick={retry} size={20} color={yellow[600]} />}
-                <IoIosCloseCircle className={classes.option} onClick={remove} size={20} color={red[500]} />
+                {failed && <FaRedo className={classes.option} onClick={retry} size={20} color={red[900]} />}
+                <IoIosCloseCircle className={classes.option} onClick={remove} size={25} color={red[800]} />
             </React.Fragment>
         );
     }
diff --git a/client/src/pages/Ingestion/components/Uploads/UploadCompleteList.tsx b/client/src/pages/Ingestion/components/Uploads/UploadCompleteList.tsx
index 60ccbb13f..307953ab3 100644
--- a/client/src/pages/Ingestion/components/Uploads/UploadCompleteList.tsx
+++ b/client/src/pages/Ingestion/components/Uploads/UploadCompleteList.tsx
@@ -23,17 +23,20 @@ const useStyles = makeStyles(({ palette /*, breakpoints*/ }) => ({
         display: 'flex',
         flex: 1,
         flexDirection: 'column',
-        marginBottom: '50px'
+        margin: '0px 10px',
+        // background: '0',
+        // marginBottom: '1rem'
     },
     list: {
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
-        minHeight: '16vh',
-        height: '30vh',
+        minHeight: '12vh',
+        maxHeight: '25vh',
         'overflow-y': 'auto',
         'overflow-x': 'hidden',
-        width: '100%',
+        // width: '100%',
+        padding: '0px 10px',
         ...scrollBarProperties(true, false, palette.text.disabled)
     },
     listDetail: {
@@ -107,7 +110,7 @@ function UploadCompleteList(props: UploadListCompleteProps): React.ReactElement
             <React.Fragment>
                 {!completed.length && (
                     <Typography className={classes.listDetail} variant='body1'>
-                        No files available
+                        No files available.
                     </Typography>
                 )}
                 <FileList files={completed} />
@@ -120,11 +123,10 @@ function UploadCompleteList(props: UploadListCompleteProps): React.ReactElement
             <FieldType
                 required
                 align='center'
-                label='Uploaded Files'
+                label='Ready for Ingest'
                 labelTooltip='Select assets to ingest which belong to the same Subject &amp; Item'
-                labelProps={{ style: { fontSize: '1em', fontWeight: 500, margin: '1% 0px', color: Colors.defaults.dark, backgroundColor: 'rgb(236, 245, 253)' } }}
-                width={'calc(100% - 20px)'}
-                padding='10px'
+                labelProps={{ style: { fontSize: '1em', fontWeight: 500, margin: '1% 0px', color: Colors.defaults.dark } }}
+                // width={'calc(100% - 20px)'}
             >
                 <UploadListHeader />
                 <Box className={classes.list}>{content}</Box>
diff --git a/client/src/pages/Ingestion/components/Uploads/UploadList.tsx b/client/src/pages/Ingestion/components/Uploads/UploadList.tsx
index 1e9f807b1..f6c800ee3 100644
--- a/client/src/pages/Ingestion/components/Uploads/UploadList.tsx
+++ b/client/src/pages/Ingestion/components/Uploads/UploadList.tsx
@@ -8,7 +8,7 @@
  */
 import { Box, Typography, Button } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import Dropzone from 'react-dropzone';
 import { BsCloudUpload } from 'react-icons/bs';
 import { useUploadStore } from '../../../../store';
@@ -19,26 +19,35 @@ import FileList from './FileList';
 import UploadListHeader from './UploadListHeader';
 import { eIngestionMode } from '../../../../constants';
 
-export const useUploadListStyles = makeStyles(({ palette, typography, spacing }) => ({
+export const useUploadListStyles = makeStyles(({ palette, typography }) => ({
     container: {
         display: 'flex',
         flex: 1,
         flexDirection: 'column',
-        marginTop: 20,
-        marginBottom: 40,
-        border: `1px dashed ${palette.primary.main}`
+        background: '0',
+        overflow: 'hidden'
     },
     list: {
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
         minHeight: '16vh',
-        height: '30vh',
+        maxHeight: '25vh',
         'overflow-y': 'auto',
         'overflow-x': 'hidden',
-        width: '100%',
+        // width: '100%',
+        padding: '0px 10px',
         ...scrollBarProperties(true, false, palette.text.disabled)
     },
+    listEmpty: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '16vh',
+        maxHeight: '25vh',
+        padding: '10px 10px',
+    },
     listDetail: {
         textAlign: 'center',
         color: palette.grey[500],
@@ -48,10 +57,15 @@ export const useUploadListStyles = makeStyles(({ palette, typography, spacing })
     icon: {
         color: palette.primary.main
     },
+    listFooter: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'flex-end'
+    },
     button: {
         width: 120,
         fontSize: typography.caption.fontSize,
-        marginTop: spacing(1),
+        margin: '0.5rem',
         color: Colors.defaults.white,
         '&:focus': {
             outline: '2px solid #8DABC4',
@@ -59,9 +73,18 @@ export const useUploadListStyles = makeStyles(({ palette, typography, spacing })
         outline: '2px hidden #8DABC4'
     },
     title: {
-        margin: '1% 0px',
-        fontSize: '1em',
+        margin: '1rem 0px',
+        fontSize: '0.75rem',
         fontWeight: 500
+    },
+    uploadNotice: {
+        padding: 2,
+        textAlign: 'center',
+        color: palette.secondary.contrastText,
+        backgroundColor: palette.secondary.main,
+        borderRadius: '2rem 2rem 0px 0px',
+        border: `1px solid ${palette.secondary.dark}`,
+        borderBottom: '0'
     }
 }));
 
@@ -75,26 +98,53 @@ function UploadList(props: UploadListProps): React.ReactElement {
     const { pending } = useUploadStore();
     const { loading, open } = props;
 
+    const [showUploadNotice, setShowUploadNotice] = useState<boolean>(true);
+    const [isListEmpty, setIsListEmpty] = useState<boolean>(true);
+
+    useEffect(() => {
+        // if an empty array return false ('every' returns true if empty)
+        // otherwise check for any item to be either processing or uploading
+        const hasPending: boolean = (pending.length > 0) && pending.some(
+            (item) => item.status === 'PROCESSING' || item.status === 'UPLOADING'
+        );
+        // console.log(`UploadList.pending (state: ${hasPending} [${pending.length}] | ${JSON.stringify(pending)})`);
+        setShowUploadNotice(hasPending);
+
+        // mark whether the list is empty or not
+        setIsListEmpty(pending.length<=0);
+    }, [pending, loading]);
+
     return (
         <Box className={classes.container}>
             <FieldType
                 required
                 align='center'
                 label='Upload Files'
-                labelProps={{ style: { fontSize: '1em', fontWeight: 500, margin: '1% 0px', color: Colors.defaults.dark, backgroundColor: 'rgb(236, 245, 253)' } }}
+                labelProps={{ style: { fontSize: '1em', fontWeight: 500, margin: '1% 0px', color: Colors.defaults.dark } }}
                 width={'calc(100% - 20px)'}
-                padding='10px'
             >
                 <UploadListHeader />
-                <Box className={classes.list}>
-                    <FileList files={pending} uploadPendingList uploadType={eIngestionMode.eIngest} />
-                    <Typography className={classes.title}>Drag and drop files here or click the button</Typography>
-                    <BsCloudUpload className={classes.icon} size='50px' />
+                {isListEmpty ? (
+                    <Box className={classes.listEmpty}>
+                        <BsCloudUpload className={classes.icon} size='50px' />
+                        <Typography className={classes.title}><u>DRAG AND DROP</u> files here or click the <u>BROWSE</u> button below.</Typography>
+                    </Box>
+                ): (
+                    <Box className={classes.list}>
+                        <FileList files={pending} uploadPendingList uploadType={eIngestionMode.eIngest} />
+                    </Box>
+                )}
+                <Box className={classes.listFooter}>
                     <Button className={classes.button} color='primary' variant='contained' onClick={open} disabled={loading} disableElevation>
                         Browse files
                     </Button>
                 </Box>
             </FieldType>
+            {showUploadNotice && (
+                <Box className={classes.uploadNotice}>
+                    <Typography><strong>NOTE:</strong> Please do not leave this page until your file(s) finish uploading and they show in the box below.</Typography>
+                </Box>
+            )}
         </Box>
     );
 }
diff --git a/client/src/pages/Ingestion/components/Uploads/UploadListHeader.tsx b/client/src/pages/Ingestion/components/Uploads/UploadListHeader.tsx
index 491ae4693..1689745e8 100644
--- a/client/src/pages/Ingestion/components/Uploads/UploadListHeader.tsx
+++ b/client/src/pages/Ingestion/components/Uploads/UploadListHeader.tsx
@@ -12,9 +12,11 @@ const useStyles = makeStyles(({ palette, breakpoints }) => createStyles({
         display: 'flex',
         alignItems: 'center',
         height: 50,
-        width: '100%',
+        // width: '100%',
+        padding: '0px 10px',
         borderRadius: 5,
-        background: palette.background.paper,
+        background: '#d1e7fa', //palette.primary.dark,
+        border: `1px solid ${palette.primary.main}`,
         [breakpoints.down('lg')]: {
             height: 35
         }
@@ -44,7 +46,7 @@ const useStyles = makeStyles(({ palette, breakpoints }) => createStyles({
     },
     label: {
         color: palette.primary.dark,
-        fontWeight: 400
+        fontWeight: 'bold'
     }
 }));
 
diff --git a/client/src/pages/Ingestion/components/Uploads/index.tsx b/client/src/pages/Ingestion/components/Uploads/index.tsx
index 765ee6e49..cf1b31283 100644
--- a/client/src/pages/Ingestion/components/Uploads/index.tsx
+++ b/client/src/pages/Ingestion/components/Uploads/index.tsx
@@ -27,8 +27,9 @@ const useStyles = makeStyles(({ palette, typography, spacing }) => createStyles(
         display: 'flex',
         flex: 1,
         flexDirection: 'column',
-        overflow: 'auto',
-        maxHeight: 'calc(100vh - 60px)'
+        // overflow: 'auto',
+        maxHeight: 'calc(100vh - 60px)',
+        overflow: 'auto'
     },
     content: {
         display: 'flex',
@@ -44,9 +45,6 @@ const useStyles = makeStyles(({ palette, typography, spacing }) => createStyles(
         justifyContent: 'center',
         height: '30vh',
         width: '40vw',
-        border: `1px dashed ${palette.primary.main}`,
-        borderRadius: 10,
-        backgroundColor: palette.primary.light
     },
     uploadIcon: {
         color: palette.primary.main
@@ -61,7 +59,15 @@ const useStyles = makeStyles(({ palette, typography, spacing }) => createStyles(
         fontSize: typography.caption.fontSize,
         marginTop: spacing(1),
         color: Colors.defaults.white
-    }
+    },
+    ingestContainer: {
+        borderRadius: '0.5rem',
+        border: `1px dashed ${palette.primary.main}`,
+        overflow: 'hidden',
+        backgroundColor: palette.primary.light,
+        padding: '0px 10px',
+        marginBottom: '2rem',
+    },
 }));
 
 function Uploads(): React.ReactElement {
@@ -237,6 +243,7 @@ type AliveUploadComponentsProps = {
 };
 
 function AliveUploadComponents(props: AliveUploadComponentsProps): React.ReactElement {
+    const classes = useStyles();
     // console.log(`AliveUploadComponents ${JSON.stringify(props)}`);
     const { discardingFiles, gettingAssetDetails, onDiscard, onIngest, setUpdatedAssetVersionMetadata } = props;
     const [onProgressEvent, onSetCancelledEvent, onFailedEvent, onCompleteEvent] = useUploadStore(state => [
@@ -251,28 +258,24 @@ function AliveUploadComponents(props: AliveUploadComponentsProps): React.ReactEl
             const eventData: UploadProgressEvent = data.detail;
             onProgressEvent(eventData);
         };
-
         UploadEvents.subscribe(UploadEventType.PROGRESS, onProgress);
 
         const onSetCancelled = data => {
             const eventData: UploadSetCancelEvent = data.detail;
             onSetCancelledEvent(eventData);
         };
-
         UploadEvents.subscribe(UploadEventType.SET_CANCELLED, onSetCancelled);
 
         const onFailed = data => {
             const eventData: UploadFailedEvent = data.detail;
             onFailedEvent(eventData);
         };
-
         UploadEvents.subscribe(UploadEventType.FAILED, onFailed);
 
         const onComplete = data => {
             const eventData: UploadCompleteEvent = data.detail;
             onCompleteEvent(eventData);
         };
-
         UploadEvents.subscribe(UploadEventType.COMPLETE, onComplete);
 
         return () => {
@@ -286,17 +289,21 @@ function AliveUploadComponents(props: AliveUploadComponentsProps): React.ReactEl
 
     return (
         <React.Fragment>
-            <UploadFilesPicker />
-            <SidebarBottomNavigator
-                leftLabel='Discard'
-                rightLabel='Ingest'
-                leftLoading={discardingFiles}
-                rightLoading={gettingAssetDetails}
-                onClickLeft={onDiscard}
-                onClickRight={onIngest}
-                uploadVersion
-            />
-            <UploadCompleteList setUpdatedAssetVersionMetadata={setUpdatedAssetVersionMetadata} />
+            <Box className={classes.ingestContainer}>
+                <UploadFilesPicker />
+            </Box>
+            <Box className={classes.ingestContainer}>
+                <UploadCompleteList setUpdatedAssetVersionMetadata={setUpdatedAssetVersionMetadata} />
+                <SidebarBottomNavigator
+                    leftLabel='Discard'
+                    rightLabel='Ingest'
+                    leftLoading={discardingFiles}
+                    rightLoading={gettingAssetDetails}
+                    onClickLeft={onDiscard}
+                    onClickRight={onIngest}
+                    uploadVersion
+                />
+            </Box>
         </React.Fragment>
     );
 }
diff --git a/client/src/pages/Ingestion/hooks/useIngest.ts b/client/src/pages/Ingestion/hooks/useIngest.ts
index 1de0884db..e62390ee3 100644
--- a/client/src/pages/Ingestion/hooks/useIngest.ts
+++ b/client/src/pages/Ingestion/hooks/useIngest.ts
@@ -313,12 +313,14 @@ function useIngest(): UseIngest {
             };
             console.log('** IngestDataInput',input);
 
+            //This responsible for initiating sending data to the server.
             const ingestDataMutation: FetchResult<IngestDataMutation> = await apolloClient.mutate({
                 mutation: IngestDataDocument,
                 variables: { input },
                 refetchQueries: ['getUploadedAssetVersion']
             });
 
+            //Throws an error if the inges Data was successful or not.  Throws a toast.
             const { data } = ingestDataMutation;
             if (data) {
                 const { ingestData } = data;
@@ -326,10 +328,10 @@ function useIngest(): UseIngest {
 
                 return { success, message: message || '' };
             }
-
+        //This error message is auto-generated.  It does not lead to a custom message unless there's a throw.
         } catch (error) {
             const message: string = (error instanceof Error) ? `: ${error.message}` : '';
-            toast.error(`Ingestion failed${message}`);
+            toast.error(`Ingestion failed ${message}`);
         }
 
         return { success: false, message: 'unable to start ingestion process' };
diff --git a/client/src/pages/Ingestion/index.tsx b/client/src/pages/Ingestion/index.tsx
index e14c40599..c5a3b4b17 100644
--- a/client/src/pages/Ingestion/index.tsx
+++ b/client/src/pages/Ingestion/index.tsx
@@ -25,6 +25,7 @@ const useStyles = makeStyles(() => ({
     }
 }));
 
+
 function Ingestion(): React.ReactElement {
     const classes = useStyles();
     const { metadatas } = useMetadataStore();
@@ -36,6 +37,7 @@ function Ingestion(): React.ReactElement {
     useEffect(() => {
         const updatedOptions: IngestionSidebarOption[] = [];
 
+        // Basically, as you progress through the steps in the Ingestion process, the second sidebar will "add" a link.
         if (metadatas.length) {
             if (includeSubjectItem) {
                 updatedOptions.push({
@@ -64,6 +66,7 @@ function Ingestion(): React.ReactElement {
         ingestionReset(true);
     }, []);
 
+    // Menu routes for the second sidebar in Ingestion
     return (
         <Box className={classes.container}>
             <IngestionSidebarMenu title='INGESTION' paramIdentifier={INGESTION_PARAMS_TYPE.STEP} options={options} />
@@ -79,6 +82,7 @@ function Ingestion(): React.ReactElement {
 
 export default Ingestion;
 
+// This is the error message that appears if somebody closes out the window mid-Ingestion
 export function confirmLeaveIngestion(): boolean {
     const { href: url } = window.location;
     if (url.includes(resolveSubRoute(HOME_ROUTES.INGESTION, INGESTION_ROUTES_TYPE.METADATA)) || url.includes(resolveSubRoute(HOME_ROUTES.INGESTION, INGESTION_ROUTES_TYPE.SUBJECT_MEDIA_GROUP))) {
diff --git a/client/src/pages/Repository/components/DetailsView/DetailsTab/SubjectDetails.tsx b/client/src/pages/Repository/components/DetailsView/DetailsTab/SubjectDetails.tsx
index e3f865e45..ee03e7e95 100644
--- a/client/src/pages/Repository/components/DetailsView/DetailsTab/SubjectDetails.tsx
+++ b/client/src/pages/Repository/components/DetailsView/DetailsTab/SubjectDetails.tsx
@@ -5,7 +5,7 @@
  *
  * This component renders details tab for Subject specific details used in DetailsTab component.
  */
-import { Box, Table, TableBody, TableCell, TableContainer, TableRow, Typography, Checkbox } from '@material-ui/core';
+import { Box, Table, TableBody, TableCell, TableContainer, TableRow, Checkbox } from '@material-ui/core';
 import React, { useEffect } from 'react';
 import { Loader } from '../../../../../components';
 import { ItemDetailFields, SubjectDetailFields } from '../../../../../types/graphql';
@@ -16,6 +16,7 @@ import { useDetailTabStore } from '../../../../../store';
 import clsx from 'clsx';
 import { DebounceInput } from 'react-debounce-input';
 import { useStyles, updatedFieldStyling } from './CaptureDataDetails';
+import LabelTooltipText from '../../../../../components/controls/LabelTooltipText';
 
 function SubjectDetails(props: DetailComponentProps): React.ReactElement {
     const { data, loading, disabled, onUpdateDetail, objectType } = props;
@@ -104,7 +105,11 @@ export function SubjectFields(props: SubjectFieldsProps): React.ReactElement {
                                 <React.Fragment>
                                     <TableRow>
                                         <TableCell className={classes.tableCell}>
-                                            <Typography className={classes.labelText}>Subtitle</Typography>
+                                            {/* <Typography className={classes.labelText}>Subtitle</Typography> */}
+                                            <LabelTooltipText
+                                                label='Subtitle'
+                                                labelTooltipTxt='This is the subtitle of this media asset.'
+                                            />
                                         </TableCell>
                                         <TableCell className={classes.tableCell}>
                                             <DebounceInput
@@ -128,7 +133,11 @@ export function SubjectFields(props: SubjectFieldsProps): React.ReactElement {
                                     </TableRow>
                                     <TableRow>
                                         <TableCell className={classes.tableCell}>
-                                            <Typography className={classes.labelText}>Entire Subject</Typography>
+                                            {/* <Typography className={classes.labelText}>Entire Subject</Typography> */}
+                                            <LabelTooltipText
+                                                label='Entire Subject'
+                                                labelTooltipTxt='This is the assigned subject of the media asset'
+                                            />
                                         </TableCell>
                                         <TableCell className={classes.tableCell} style={{ verticalAlign: 'middle' }}>
                                             <Checkbox
@@ -151,7 +160,11 @@ export function SubjectFields(props: SubjectFieldsProps): React.ReactElement {
                                     <>
                                         <TableRow className={classes.tableRow}>
                                             <TableCell className={classes.tableCell}>
-                                                <Typography className={classes.labelText}>Latitude</Typography>
+                                                {/* <Typography className={classes.labelText}>Latitude</Typography> */}
+                                                <LabelTooltipText
+                                                    label='Lattitude'
+                                                    labelTooltipTxt='This is the Lattitude of the Subject.'
+                                                />
                                             </TableCell>
                                             <TableCell className={clsx(classes.tableCell, classes.valueText)}>
                                                 <DebounceInput
@@ -169,7 +182,11 @@ export function SubjectFields(props: SubjectFieldsProps): React.ReactElement {
                                         </TableRow>
                                         <TableRow className={classes.tableRow}>
                                             <TableCell className={classes.tableCell}>
-                                                <Typography className={classes.labelText}>Longitude</Typography>
+                                                {/* <Typography className={classes.labelText}>Longitude</Typography> */}
+                                                <LabelTooltipText
+                                                    label='Longitude'
+                                                    labelTooltipTxt='This is the Longitude of the Subject.'
+                                                />
                                             </TableCell>
                                             <TableCell className={clsx(classes.tableCell, classes.valueText)}>
                                                 <DebounceInput
@@ -187,7 +204,11 @@ export function SubjectFields(props: SubjectFieldsProps): React.ReactElement {
                                         </TableRow>
                                         <TableRow className={classes.tableRow}>
                                             <TableCell className={classes.tableCell}>
-                                                <Typography className={classes.labelText}>Altitude</Typography>
+                                                {/* <Typography className={classes.labelText}>Altitude</Typography> */}
+                                                <LabelTooltipText
+                                                    label='Altitude'
+                                                    labelTooltipTxt='This is the altitude of the subject.'
+                                                />
                                             </TableCell>
                                             <TableCell className={clsx(classes.tableCell, classes.valueText)}>
                                                 <DebounceInput
@@ -237,7 +258,11 @@ export function RotationOriginInput(props: RotationOriginInputProps): React.Reac
     return (
         <TableRow>
             <TableCell style={{ border: 'none', padding: '1px 10px' }}>
-                <Typography style={{ fontSize: '0.8rem' }}>Rotation Origin</Typography>
+                {/* <Typography style={{ fontSize: '0.8rem' }}>Rotation Origin</Typography> */}
+                <LabelTooltipText
+                    label='Rotation Origin'
+                    labelTooltipTxt='This is the Rotation Origin of the subject.'
+                />
             </TableCell>
             <TableCell style={{ border: 'none', padding: '1px 10px' }}>
                 <Box display='flex' flex={1}>
@@ -323,7 +348,11 @@ export function RotationQuaternionInput(props: RotationQuaternionInputProps): Re
     return (
         <TableRow>
             <TableCell style={{ border: 'none', padding: '1px 10px' }}>
-                <Typography style={{ fontSize: '0.8rem' }}>Rotation Quaternion</Typography>
+                {/* <Typography style={{ fontSize: '0.8rem' }}>Rotation Quaternion</Typography> */}
+                <LabelTooltipText
+                    label='Rotation Quaternion'
+                    labelTooltipTxt='This is the Rotation Quaternion of the subject.'
+                />
             </TableCell>
             <TableCell style={{ border: 'none', padding: '1px 10px' }}>
                 <Box display='flex' flex={1}>
diff --git a/client/src/pages/Repository/components/DetailsView/DetailsTab/UnitDetails.tsx b/client/src/pages/Repository/components/DetailsView/DetailsTab/UnitDetails.tsx
index 05620930f..167050656 100644
--- a/client/src/pages/Repository/components/DetailsView/DetailsTab/UnitDetails.tsx
+++ b/client/src/pages/Repository/components/DetailsView/DetailsTab/UnitDetails.tsx
@@ -4,7 +4,7 @@
  *
  * This component renders details tab for Unit specific details used in DetailsTab component.
  */
-import { Box, Typography, Table, TableBody, TableCell, TableContainer, TableRow } from '@material-ui/core';
+import { Box, Table, TableBody, TableCell, TableContainer, TableRow } from '@material-ui/core';
 import React, { useEffect } from 'react';
 import { /*InputField,*/ Loader } from '../../../../../components';
 import { isFieldUpdated } from '../../../../../utils/repository';
@@ -14,6 +14,7 @@ import { eSystemObjectType } from '@dpo-packrat/common';
 import { DebounceInput } from 'react-debounce-input';
 import clsx from 'clsx';
 import { useStyles, updatedFieldStyling } from './CaptureDataDetails';
+import LabelTooltipText from '../../../../../components/controls/LabelTooltipText';
 
 function UnitDetails(props: DetailComponentProps): React.ReactElement {
     const { data, loading, disabled, onUpdateDetail, objectType } = props;
@@ -42,7 +43,11 @@ function UnitDetails(props: DetailComponentProps): React.ReactElement {
                     <TableBody>
                         <TableRow className={classes.tableRow}>
                             <TableCell className={classes.tableCell}>
-                                <Typography className={classes.labelText}>Abbreviation</Typography>
+                                {/* <Typography className={classes.labelText}>Abbreviation</Typography> */}
+                                <LabelTooltipText
+                                    label='Abbreviation'
+                                    labelTooltipTxt='This is the shortened version of the name chosen.'
+                                />
                             </TableCell>
                             <TableCell className={clsx(classes.tableCell, classes.valueText)}>
                                 <DebounceInput
@@ -60,7 +65,11 @@ function UnitDetails(props: DetailComponentProps): React.ReactElement {
                         </TableRow>
                         <TableRow className={classes.tableRow}>
                             <TableCell className={classes.tableCell}>
-                                <Typography className={classes.labelText}>ARKPrefix</Typography>
+                                {/* <Typography className={classes.labelText}>ARKPrefix</Typography> */}
+                                <LabelTooltipText
+                                    label='ARKPrefx'
+                                    labelTooltipTxt='The ARK prefix is used to show a shortened version of the ARK URL that only contains the ID of the unit selected.'
+                                />
                             </TableCell>
                             <TableCell className={clsx(classes.tableCell, classes.valueText)}>
                                 <DebounceInput
diff --git a/client/src/pages/Repository/components/DetailsView/ObjectDetails.tsx b/client/src/pages/Repository/components/DetailsView/ObjectDetails.tsx
index edb9cf791..da65a594a 100644
--- a/client/src/pages/Repository/components/DetailsView/ObjectDetails.tsx
+++ b/client/src/pages/Repository/components/DetailsView/ObjectDetails.tsx
@@ -105,6 +105,7 @@ interface ObjectDetailsProps {
     originalFields?: GetSystemObjectDetailsResult;
     onRetiredUpdate?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
     onLicenseUpdate?: (event) => void;
+    onPublishUpdate?: (event) => void;
     path?: RepositoryPath[][] | null;
     updateData?: () => Promise<boolean>;
     idSystemObject: number;
@@ -129,6 +130,7 @@ function ObjectDetails(props: ObjectDetailsProps): React.ReactElement {
         originalFields,
         onRetiredUpdate,
         onLicenseUpdate,
+        // onPublishUpdate,
         idSystemObject,
         license,
         licenseInheritance,
@@ -195,6 +197,7 @@ function ObjectDetails(props: ObjectDetailsProps): React.ReactElement {
     const onPublish = async () => { onPublishWorker(ePublishedState.ePublished, 'Publish'); };
     const onAPIOnly = async () => { onPublishWorker(ePublishedState.eAPIOnly, 'Publish for API Only'); };
     const onUnpublish = async () => { onPublishWorker(ePublishedState.eNotPublished, 'Unpublish'); };
+    const onInternal = async () => { onPublishWorker(ePublishedState.eInternal, 'Publish for Internal Only'); };
     const onSyncToEdan = async () => { onPublishWorker(ePublishedState.ePublished, 'Sync to Edan'); };
 
     const onPublishWorker = async (eState: number, action: string) => {
@@ -233,8 +236,15 @@ function ObjectDetails(props: ObjectDetailsProps): React.ReactElement {
                             <Typography className={classes.value}>{publishedState}</Typography>
                             &nbsp;<LoadingButton onClick={onPublish} className={classes.loadingBtn} loading={loading} disabled={!publishable}>Publish</LoadingButton>
                             &nbsp;<LoadingButton onClick={onAPIOnly} className={classes.loadingBtn} loading={loading} disabled={!publishable}>API Only</LoadingButton>
+                            &nbsp;<LoadingButton onClick={onInternal} className={classes.loadingBtn} loading={loading} disabled={!publishable}>Internal</LoadingButton>
                             &nbsp;{(publishedEnum !== ePublishedState.eNotPublished) && (<LoadingButton onClick={onUnpublish} className={classes.loadingBtn} loading={loading}>Unpublish</LoadingButton>)}
                             &nbsp;<Tooltip arrow title={ <ToolTip text={scenePublishNotes} />}><HelpOutline fontSize='small' style={{ alignSelf: 'center', cursor: 'pointer' }} /></Tooltip>
+                            {/* <Select name='PublishedState' className={classes.select} style={{ width: '16rem' }} onChange={onPublishUpdate} value={publishedState}>
+                                <MenuItem value={0}>Unpublished</MenuItem>
+                                <MenuItem value={1}>Unlisted (API)</MenuItem>
+                                <MenuItem value={2}>Public Site</MenuItem>
+                                <MenuItem value={3}>Internal</MenuItem>
+                            </Select> */}
                         </Box>
                     }
                 />
@@ -250,23 +260,6 @@ function ObjectDetails(props: ObjectDetailsProps): React.ReactElement {
                     }
                 />
             )}
-            {!hideRetired && (
-                <Detail
-                    label='Retired'
-                    name='retired'
-                    valueComponent={
-                        <CheckboxNoPadding
-                            id='retired'
-                            name='retired'
-                            disabled={disabled}
-                            checked={withDefaultValueBoolean(retired, false)}
-                            onChange={onRetiredUpdate}
-                            {...getUpdatedCheckboxProps(isRetiredUpdated)}
-                            color='primary'
-                        />
-                    }
-                />
-            )}
             {licenseSource ? (
                 <Detail
                     label='License'
@@ -290,7 +283,7 @@ function ObjectDetails(props: ObjectDetailsProps): React.ReactElement {
                     label='License'
                     valueComponent={
                         <Box className={classes.assignedLicense}>
-                            <Select name='License' className={classes.select} onChange={onLicenseUpdate} value={license}>
+                            <Select name='License' className={classes.select}  style={{ width: '16rem' }} onChange={onLicenseUpdate} value={license}>
                                 <MenuItem value={0}>None</MenuItem>
                                 {licenseList.map(license => (
                                     <MenuItem value={license.idLicense} key={license.idLicense}>
@@ -305,6 +298,23 @@ function ObjectDetails(props: ObjectDetailsProps): React.ReactElement {
                     }
                 />
             )}
+            {!hideRetired && (
+                <Detail
+                    label='Retired'
+                    name='retired'
+                    valueComponent={
+                        <CheckboxNoPadding
+                            id='retired'
+                            name='retired'
+                            disabled={disabled}
+                            checked={withDefaultValueBoolean(retired, false)}
+                            onChange={onRetiredUpdate}
+                            {...getUpdatedCheckboxProps(isRetiredUpdated)}
+                            color='primary'
+                        />
+                    }
+                />
+            )}
         </Box>
     );
 }
diff --git a/client/src/pages/Repository/components/DetailsView/index.tsx b/client/src/pages/Repository/components/DetailsView/index.tsx
index 639b226ec..a3da73704 100644
--- a/client/src/pages/Repository/components/DetailsView/index.tsx
+++ b/client/src/pages/Repository/components/DetailsView/index.tsx
@@ -34,7 +34,7 @@ import {
     UpdateIdentifier,
     UpdateObjectDetailsDataInput
 } from '../../../../types/graphql';
-import { eSystemObjectType, eVocabularySetID } from '@dpo-packrat/common';
+import { ePublishedState, eSystemObjectType, eVocabularySetID, PublishedStateEnumToString } from '@dpo-packrat/common';
 import { withDefaultValueBoolean, withDefaultValueNumber } from '../../../../utils/shared';
 import ObjectSelectModal from '../../../Ingestion/components/Metadata/Model/ObjectSelectModal';
 import { updateDetailsTabData, useObjectDetails, deleteIdentifier, getDetailsTabDataForObject } from '../../hooks/useDetailsView';
@@ -114,6 +114,7 @@ function DetailsView(): React.ReactElement {
     const [updatedIdentifiers, setUpdatedIdentifiers] = useState(false);
     const [updatedMetadata, setUpdatedMetadata] = useState(false);
     const [uploadReferences, setUploadReferences] = useState<UploadReferences | null>(null);
+
     const getEntries = useVocabularyStore(state => state.getEntries);
     const [
         stateIdentifiers,
@@ -175,11 +176,10 @@ function DetailsView(): React.ReactElement {
     const verifyGenerateDownloads = async (): Promise<boolean> => {
         // check whether we can actually generate downloads
         // TODO: check QC checkbox status, (ideally) if a generate downloads is already running, ...
-        console.log('Verifying Generate Downloads...');
+        console.log('[PACKRAT] Verifying Generate Downloads...');
 
         // make a call to our generate downloads endpoint with the current scene id
         const response: RequestResponse = await API.generateDownloads(idSystemObject, true);
-        console.log(response);
         if(response.success === false) {
             console.log(`[Packrat - ERROR] cannot verify if generate downloads is available. (${response.message})`);
             setCanGenerateDownloads(false);
@@ -191,7 +191,7 @@ function DetailsView(): React.ReactElement {
         const canRun: boolean = (response.data.isJobRunning === false) && (response.data.isSceneValid === true);
 
         // we have success so enable it
-        console.log(`[PACKRAT - DEBUG] can generate downloads: ${canRun}`);
+        // console.log(`[PACKRAT - DEBUG] can generate downloads: ${canRun}`);
         setCanGenerateDownloads(canRun);
         return canRun;
     };
@@ -348,6 +348,26 @@ function DetailsView(): React.ReactElement {
         setUpdatedData(updatedDataFields);
     };
 
+    const onPublishUpdate = ({ target }): void => {
+        console.log(`[PACKRAT] ${JSON.stringify(target)}`);
+        console.log(`[PACKRAT] value: ${target.value} | enum: ${PublishedStateEnumToString(target.value)} | name: ${target.name} | ${ePublishedState[parseInt(target.value)]}:${typeof(ePublishedState[parseInt(target.value)])} | data: ${publishedState}`);
+
+        // const pState: ePublishedState = ePublishedState[parseInt(target.value)];
+        // if(pState.toString() != publishedState) {
+        //     console.warn('published states diff. updating...');
+        // } else  {
+        //     console.info('published states are identical. skipping update');
+        //     return;
+        // }
+        // switch(pState) {
+        //     case ePublishedState.eNotPublished: {
+        //         console.info('[PACKRAT] un-publishing...');
+        //     }
+
+        //     case
+        // }
+    };
+
     const onUpdateDetail = (objectType: number, data: UpdateDataFields): void => {
         // console.log('onUpdateDetail', objectType, data);
         const updatedDataFields: UpdateObjectDetailsDataInput = {
@@ -566,7 +586,7 @@ function DetailsView(): React.ReactElement {
     const generateDownloads = async (): Promise<boolean> => {
         // fire off download generation for the scene. (UI element, ln. 593)
         // TODO: move into 'Assets' tab (currently lacking context/details on if we're a scene)
-        console.log('Generating Downloads...');
+        console.log('[PACKRAT] Generating Downloads...');
         if(isGeneratingDownloads === true || canGenerateDownloads === false) {
             console.error('[Packrat] cannot generate downloads. not sure how you got here...');
             return false;
@@ -599,9 +619,6 @@ function DetailsView(): React.ReactElement {
             return false;
         }
 
-        console.log(params);
-        console.log(data);
-
         // wait for a period of time before resetting our buttons
         // setting a minimal time improves UX and shows spinning logo
         const diffTime = Math.max(1,2000-(Date.now()-startTime));
@@ -648,6 +665,7 @@ function DetailsView(): React.ReactElement {
                         objectType={objectType}
                         onRetiredUpdate={onRetiredUpdate}
                         onLicenseUpdate={onLicenseUpdate}
+                        onPublishUpdate={onPublishUpdate}
                         originalFields={data.getSystemObjectDetails}
                         license={withDefaultValueNumber(details.idLicense, 0)}
                         idSystemObject={idSystemObject}
diff --git a/client/src/pages/Workflow/components/WorkflowView/WorkflowFilter.tsx b/client/src/pages/Workflow/components/WorkflowView/WorkflowFilter.tsx
index 701523523..6f8d5f1c0 100644
--- a/client/src/pages/Workflow/components/WorkflowView/WorkflowFilter.tsx
+++ b/client/src/pages/Workflow/components/WorkflowView/WorkflowFilter.tsx
@@ -196,6 +196,8 @@ function FilterSelect(props: FilterSelectProps): React.ReactElement {
 function FilterDate(props: FilterDateProps): React.ReactElement {
     const { label } = props;
     const classes = useStyles();
+
+    // workflow.tsx (state handle)
     // eslint-disable-next-line prefer-const
     let [dateFrom, dateTo, updateFilterValue] = useWorkflowStore(state => [state.dateFrom, state.dateTo, state.updateFilterValue]);
 
diff --git a/client/src/store/metadata/index.ts b/client/src/store/metadata/index.ts
index 6fa2d4f60..385e30c3b 100644
--- a/client/src/store/metadata/index.ts
+++ b/client/src/store/metadata/index.ts
@@ -64,6 +64,7 @@ type MetadataStore = {
     getSubtitlesError: (subtitles: SubtitleFields) => boolean;
 };
 
+
 export const useMetadataStore = create<MetadataStore>((set: SetState<MetadataStore>, get: GetState<MetadataStore>) => ({
     metadatas: [],
     getSelectedIdentifiers: (identifiers: StateIdentifier[]): StateIdentifier[] | undefined => identifiers,
@@ -118,6 +119,7 @@ export const useMetadataStore = create<MetadataStore>((set: SetState<MetadataSto
 
         return errors;
     },
+
     validateFields: (fields: ValidateFields, schema: ValidateFieldsSchema): boolean => {
         let hasError: boolean = false;
         const options = {
@@ -128,8 +130,10 @@ export const useMetadataStore = create<MetadataStore>((set: SetState<MetadataSto
 
         try {
             schema.validateSync(fields, options);
+        //If there's an error send a warning. You best believe that the Identifier warning will be processed here.
         } catch (error) {
             hasError = true;
+            console.log(`Toast Error: ${error}`);
             if (error instanceof yup.ValidationError) {
                 for (const message of error.errors) {
                     toast.warn(message, { autoClose: false });
diff --git a/client/src/store/metadata/metadata.defaults.ts b/client/src/store/metadata/metadata.defaults.ts
index f251030ce..4f8465a4b 100644
--- a/client/src/store/metadata/metadata.defaults.ts
+++ b/client/src/store/metadata/metadata.defaults.ts
@@ -59,7 +59,6 @@ const hasModelSourcesValidation = {
     test: array => array.length && array.some(source => source.objectType === eSystemObjectType.eModel),
     message: 'Should provide at least 1 model parent for scene ingestion'
 };
-
 const notesWhenUpdate = {
     is: value => value > 0,
     then: yup.string().required()
diff --git a/client/src/store/upload.ts b/client/src/store/upload.ts
index c881627b1..34e07e981 100644
--- a/client/src/store/upload.ts
+++ b/client/src/store/upload.ts
@@ -340,30 +340,46 @@ export const useUploadStore = create<UploadStore>((set: SetState<UploadStore>, g
             set({ pendingUpdates: updatedUpdates });
         }
     },
+
+    //This is the uploading for the Processed Files
     startUploadTransfer: async (ingestionFile: IngestionFile, references?: UploadReferences) => {
         const { pending } = get();
         const { id, file, type } = ingestionFile;
         try {
             const onProgress = (event: ProgressEvent) => {
+                // registered with Apollo xhr.upload.onprogress callback and triggers
+                // PROGRESS event at every 10 steps so the UX can properly update.
                 const { loaded, total } = event;
                 const progress = Math.floor((loaded / total) * 100);
-                const updateProgress = !(progress % 1);
+                const updateProgress = (progress % 10) === 0;
 
                 if (updateProgress) {
                     const progressEvent: UploadProgressEvent = {
                         id,
                         progress
                     };
+                    // console.log(`[PACKRAT] startUploadTransfer.onProgress fire event (event: ${progressEvent} | pending: ${JSON.stringify(pending)})`);
                     UploadEvents.dispatch(UploadEventType.PROGRESS, progressEvent);
                 }
             };
+            const onCancel = (cancelCallback: () => void) => {
+                // registered with Apollo xhr.upload.onabort callbacks and triggers a cancelled event
+                const cancelEvent: UploadSetCancelEvent = {
+                    id,
+                    onCancel: cancelCallback
+                };
 
-            const onCancel = (cancel: () => void) => {
-                const setCancelEvent: UploadSetCancelEvent = {
+                // console.log(`[PACKRAT] startUploadTransfer.onCancel fire event (event: ${cancelEvent} | pending: ${JSON.stringify(pending)})`);
+                UploadEvents.dispatch(UploadEventType.SET_CANCELLED, cancelEvent);
+            };
+            const onFailed = () => {
+                // registered with Apollo xhr.upload.onerror and triggers a failed event
+                const failedEvent: UploadFailedEvent = {
                     id,
-                    cancel
                 };
-                UploadEvents.dispatch(UploadEventType.SET_CANCELLED, setCancelEvent);
+
+                // console.error(`[PACKRAT] startUploadTransfer.onFailed fire event (event: ${error})`);
+                UploadEvents.dispatch(UploadEventType.FAILED, failedEvent);
             };
 
             const uploadAssetInputs: UploadAssetInput = { file, type };
@@ -382,20 +398,22 @@ export const useUploadStore = create<UploadStore>((set: SetState<UploadStore>, g
                 refetchQueries: ['getUploadedAssetVersion'],
                 useUpload: true,
                 onProgress,
-                onCancel
+                onCancel,
+                onFailed,
             });
             const { uploadAsset }: UploadAssetMutation = data;
 
+            // once we have an uploaded asset we check/handle our response
             if (uploadAsset) {
                 const { status, error } = uploadAsset;
 
                 if (status === UploadStatus.Complete) {
                     const uploadEvent: UploadCompleteEvent = { id };
                     UploadEvents.dispatch(UploadEventType.COMPLETE, uploadEvent);
-
+                    //This message occurs when the upload is successfully transferred for processing.
                     toast.success(`Upload finished for ${file.name}`);
                 } else if (status === UploadStatus.Failed) {
-                    console.log(`startUploadTransfer upload failed ${id}, ${JSON.stringify(file)}, error = ${error}`);
+                    console.log(`[PACKRAT] startUploadTransfer upload failed (id: ${id} | file: ${(file)?file['path']:'na'} | error: ${error})`);
                     const failedEvent: UploadFailedEvent = { id };
                     UploadEvents.dispatch(UploadEventType.FAILED, failedEvent);
 
@@ -412,12 +430,12 @@ export const useUploadStore = create<UploadStore>((set: SetState<UploadStore>, g
             }
         } catch (error) {
             const message: string = (error instanceof Error) ? error.message : '';
-            console.log(`startUploadTransfer Exception ${message}`);
+            console.log(`[PACKRAT:ERROR] startUploadTransfer Exception ${message}`);
             const file = getFile(id, pending);
 
             if (file) {
                 if (file.status !== FileUploadStatus.CANCELLED) {
-                    console.log(`startUploadTransfer upload failed ${id}, ${JSON.stringify(file)}, exception ${message}`);
+                    console.log(`[PACKRAT:ERROR] startUploadTransfer upload failed ${id}, ${JSON.stringify(file)}, exception ${message}`);
                     const failedEvent: UploadFailedEvent = { id };
                     UploadEvents.dispatch(UploadEventType.FAILED, failedEvent);
                 }
@@ -431,7 +449,10 @@ export const useUploadStore = create<UploadStore>((set: SetState<UploadStore>, g
                 lodash.set(file, 'type', assetType);
             }
         });
-        set({ pending: updatedPending });
+
+        // set our pending list to the new values. need to create new array because
+        // React only updates when reference changes (not properties).
+        set({ pending: [ ...updatedPending ] });
     },
     discardFiles: async (): Promise<void> => {
         const { completed, getSelectedFiles, refetch } = get();
@@ -464,7 +485,7 @@ export const useUploadStore = create<UploadStore>((set: SetState<UploadStore>, g
                 }
 
                 const updatedCompleted = getSelectedFiles(completed, false);
-                set({ completed: updatedCompleted });
+                set({ completed: [ ...updatedCompleted ] });
 
                 if (refetch)
                     refetch();
@@ -478,13 +499,23 @@ export const useUploadStore = create<UploadStore>((set: SetState<UploadStore>, g
     removeSelectedUploads: (): void => {
         const { completed } = get();
         const updatedCompleted = completed.filter(({ selected }) => !selected);
-        set({ completed: updatedCompleted });
+        set({ completed: [ ...updatedCompleted ] });
     },
     onProgressEvent: (eventData: UploadProgressEvent, options?: UploadOptions): void => {
         const { pending, pendingAttachments, pendingUpdates } = get();
         const { id, progress } = eventData;
 
-        // handles updates and attachments
+        // DEBUG: to help track status changes and events
+        const statusPending = pending.map(item => {
+            return {
+                filename: item.file['path'],
+                status: item.status,
+                progress: item.progress
+            };
+        });
+        console.log(`[PACKRAT] onProgressEvent (options: ${JSON.stringify(options)} | pending: ${JSON.stringify(statusPending)})`);
+
+        // handles updates and attachments if a SystemObject id is provided
         if (options?.idSystemObject) {
             const isAttachment = options.references.idSOAttachment;
             const isUpdate = options.references.idAsset;
@@ -508,6 +539,11 @@ export const useUploadStore = create<UploadStore>((set: SetState<UploadStore>, g
                 updatedUpdate.set(options.idSystemObject, file);
                 set({ pendingUpdates: updatedUpdate });
             }
+
+            // since React only triggers an update when a reference changes (not properties) we
+            // create a new array/reference for pending so we can catch changes to its status.
+            set({ pending: [...pending] });
+
         } else {
             const updatedPendingProgress = lodash.forEach(pending, file => {
                 if (file.id === id) {
@@ -516,12 +552,25 @@ export const useUploadStore = create<UploadStore>((set: SetState<UploadStore>, g
                         lodash.set(file, 'status', FileUploadStatus.PROCESSING);
                 }
             });
-            set({ pending: updatedPendingProgress });
+
+            // set our pending list to the new values. need to create new array because
+            // React only updates when reference changes (not properties).
+            set({ pending: [...updatedPendingProgress] });
         }
     },
     onSetCancelledEvent: (eventData: UploadSetCancelEvent, options?: UploadOptions): void => {
         const { pending, pendingAttachments, pendingUpdates } = get();
-        const { id, cancel } = eventData;
+        const { id, onCancel } = eventData;
+
+        // DEBUG: to help track status changes and events
+        const statusPending = pending.map(item => {
+            return {
+                filename: item.file['path'],
+                status: item.status,
+                progress: item.progress
+            };
+        });
+        console.log(`[PACKRAT] onCancelledEvent (pending: ${JSON.stringify(statusPending)})`);
 
         // handles updates and attachments
         if (options?.idSystemObject) {
@@ -531,29 +580,47 @@ export const useUploadStore = create<UploadStore>((set: SetState<UploadStore>, g
             if (isAttachment) {
                 const updatedAttachments = new Map(pendingAttachments);
                 const file = pendingAttachments.get(options.idSystemObject) as IngestionFile;
-                file.cancel = cancel;
+                file.cancel = onCancel;
                 set({ pendingAttachments: updatedAttachments });
             }
 
             if (isUpdate) {
                 const updatedUpdates = new Map(pendingUpdates);
                 const file = pendingUpdates.get(options.idSystemObject) as IngestionFile;
-                file.cancel = cancel;
+                file.cancel = onCancel;
                 set({ pendingUpdates: updatedUpdates });
             }
+
+            // since React only triggers an update when a reference changes (not properties) we
+            // create a new array/reference for pending so we can catch changes to its status.
+            set({ pending: [ ...pending ] });
+
         } else {
             const updateSetCancel = lodash.forEach(pending, file => {
                 if (file.id === id) {
-                    lodash.set(file, 'cancel', cancel);
+                    lodash.set(file, 'cancel', onCancel);
                 }
             });
-            set({ pending: updateSetCancel });
+
+            // set our pending list to the new values. need to create new array because
+            // React only updates when reference changes (not properties).
+            set({ pending: [ ...updateSetCancel ] });
         }
     },
     onFailedEvent: (eventData: UploadFailedEvent, options?: UploadOptions): void => {
         const { pending, pendingAttachments, pendingUpdates } = get();
         const { id } = eventData;
 
+        // DEBUG: to help track status changes and events
+        const statusPending = pending.map(item => {
+            return {
+                filename: item.file['path'],
+                status: item.status,
+                progress: item.progress
+            };
+        });
+        console.log(`[PACKRAT] onFailedEvent (pending: ${JSON.stringify(statusPending)})`);
+
         // handles updates and attachments
         if (options?.idSystemObject) {
             const isAttachment = options.references.idSOAttachment;
@@ -572,6 +639,11 @@ export const useUploadStore = create<UploadStore>((set: SetState<UploadStore>, g
                 file.status = FileUploadStatus.FAILED;
                 set({ pendingUpdates: updatedUpdates });
             }
+
+            // since React only triggers an update when a reference changes (not properties) we
+            // create a new array/reference for pending so we can catch changes to its status.
+            set({ pending: [ ...pending ] });
+
         } else {
             const updatedFailedPending = lodash.forEach(pending, file => {
                 if (file.id === id) {
@@ -579,13 +651,26 @@ export const useUploadStore = create<UploadStore>((set: SetState<UploadStore>, g
                 }
             });
 
-            set({ pending: updatedFailedPending });
+            // set our pending list to the new values. need to create new array because
+            // React only updates when reference changes (not properties).
+            set({ pending: [ ...updatedFailedPending ] });
         }
     },
     onCompleteEvent: (eventData: UploadCompleteEvent, options?: UploadOptions): void => {
+        // subscribed to via the main upload index/component
         const { pending, pendingAttachments, pendingUpdates } = get();
         const { id } = eventData;
 
+        // DEBUG: to help track status changes and events
+        const statusPending = pending.map(item => {
+            return {
+                filename: item.file['path'],
+                status: item.status,
+                progress: item.progress
+            };
+        });
+        console.log(`[PACKRAT] onCompleteEvent (pending: ${JSON.stringify(statusPending)})`);
+
         // handles updates and attachments
         if (options?.idSystemObject) {
             const isAttachment = options.references.idSOAttachment;
@@ -600,21 +685,40 @@ export const useUploadStore = create<UploadStore>((set: SetState<UploadStore>, g
                 updatedUpdate.delete(options.idSystemObject);
                 set({ pendingUpdates: updatedUpdate });
             }
+
+            // since React only triggers an update when a reference changes (not properties) we
+            // create a new array/reference for pending so we can catch changes to its status.
+            set({ pending: [ ...pending ] });
+
         } else {
             const updatedComplete = pending.filter(file => file.id !== id);
 
-            set({ pending: updatedComplete });
+            // set our pending list to the new values. need to create new array because
+            // React only updates when reference changes (not properties).
+            set({ pending: [ ...updatedComplete ] });
         }
     },
     reset: (): void => {
-        const { completed } = get();
+        const { completed, pending } = get();
         const unselectFiles = (file: IngestionFile): IngestionFile => ({
             ...file,
             selected: false
         });
-
         const updatedCompleted: IngestionFile[] = completed.map(unselectFiles);
-        set({ completed: updatedCompleted, loading: false });
+
+        // DEBUG: to help track status changes and events
+        const statusPending = pending.map(item => {
+            return {
+                filename: item.file['path'],
+                status: item.status,
+                progress: item.progress
+            };
+        });
+        console.log(`[PACKRAT] Upload store reset (pending: ${JSON.stringify(statusPending)})`);
+
+        // set our pending list to the new values. need to create new array because
+        // React only updates when reference changes (not properties).
+        set({ completed: [ ...updatedCompleted ], loading: false });
     },
     resetSpecialPending: (uploadType: eIngestionMode) => {
         if (uploadType === eIngestionMode.eAttach) set({ pendingAttachments: new Map() });
diff --git a/client/src/store/utils.ts b/client/src/store/utils.ts
index d35a7a17a..95b68ad1b 100644
--- a/client/src/store/utils.ts
+++ b/client/src/store/utils.ts
@@ -93,7 +93,7 @@ export function parseIdentifiersToState(identifiers: IngestIdentifier[], default
     const parsedIdentifiers = identifiers.map(
         ({ identifier, identifierType, idIdentifier }: IngestIdentifier, index: number): StateIdentifier => ({
             id: index,
-            identifier,
+            identifier: identifier.toString(),
             identifierType,
             idIdentifier,
             preferred: false
diff --git a/client/src/utils/events.ts b/client/src/utils/events.ts
index 59bdb8ac1..6d3818a85 100644
--- a/client/src/utils/events.ts
+++ b/client/src/utils/events.ts
@@ -14,7 +14,7 @@ export type UploadProgressEvent = {
 
 export type UploadSetCancelEvent = {
     id: FileId;
-    cancel: () => void;
+    onCancel: () => void;
 };
 
 export type UploadFailedEvent = {
diff --git a/client/tsconfig.json b/client/tsconfig.json
index e2ec2c2c6..fcc9f864a 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -7,6 +7,7 @@
       "dom.iterable",
       "esnext"
     ],
+    "declaration": true,
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -18,7 +19,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react",
   },
   "include": [
     "src",
diff --git a/common/constants.ts b/common/constants.ts
index e1e87c0c0..454fa2462 100644
--- a/common/constants.ts
+++ b/common/constants.ts
@@ -351,6 +351,7 @@ export enum ePublishedState {
     eNotPublished = 0,              // 'Not Published', default
     eAPIOnly = 1,                   // 'API Only',
     ePublished = 2,                 // 'Published'
+    eInternal = 3,                  // 'Internal' use only. similar to eNotPublished for EDAN flags
 }
 
 export function LicenseEnumToString(eState: eLicense): string {
@@ -367,6 +368,7 @@ export function PublishedStateEnumToString(eState: ePublishedState): string {
     switch (eState) {
         case ePublishedState.eAPIOnly:                  return 'API Only';
         case ePublishedState.ePublished:                return 'Published';
+        case ePublishedState.eInternal:                 return 'Internal';
         default:
         case ePublishedState.eNotPublished:             return 'Not Published';
     }
diff --git a/conf/docker/daemon.json b/conf/docker/daemon.json
index ab97a9002..003a9f9aa 100644
--- a/conf/docker/daemon.json
+++ b/conf/docker/daemon.json
@@ -4,5 +4,6 @@
             "base": "172.19.19.0/24",
             "size": 24
         }
-    ]
+    ],
+    "dns": ["160.111.8.18","160.111.8.10","8.8.8.8","8.8.4.4"]
 }
\ No newline at end of file
diff --git a/conf/docker/docker-compose.dev.yml b/conf/docker/docker-compose.dev.yml
index 35ddd581f..3bece1271 100644
--- a/conf/docker/docker-compose.dev.yml
+++ b/conf/docker/docker-compose.dev.yml
@@ -41,6 +41,8 @@ services:
             target: server
         ports:
             - $PACKRAT_SERVER_PORT:4000
+        extra_hosts:
+            - "host.docker.internal:host-gateway"
         environment:
             - NODE_ENV=$NODE_ENV
             - REACT_APP_PACKRAT_SERVER_ENDPOINT=$REACT_APP_PACKRAT_SERVER_ENDPOINT
diff --git a/package.json b/package.json
index 970ae6cc9..e86fdf802 100644
--- a/package.json
+++ b/package.json
@@ -5,10 +5,7 @@
   "license": "Apache-2.0",
   "description": "Data Repository and Workflow Management for 3D data captures, models, and scenes",
   "homepage": "https://github.com/Smithsonian/dpo-packrat#readme",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Smithsonian/dpo-packrat.git"
-  },
+  "repository": "git+https://github.com/Smithsonian/dpo-packrat.git",
   "bugs": {
     "url": "https://github.com/Smithsonian/dpo-packrat/issues"
   },
@@ -102,5 +99,7 @@
   "volta": {
     "node": "18.9.0",
     "yarn": "1.22.19"
-  }
+  },
+  "main": "index.js",
+  "author": "Natasha Johnson"
 }
diff --git a/server/collections/impl/EdanCollection.ts b/server/collections/impl/EdanCollection.ts
index 6e06aef1e..2867f5f11 100644
--- a/server/collections/impl/EdanCollection.ts
+++ b/server/collections/impl/EdanCollection.ts
@@ -172,12 +172,13 @@ export class EdanCollection implements COL.ICollection {
 
     async publish(idSystemObject: number, ePublishState: number): Promise<boolean> {
 
-        LOG.info(`EdanCollection.publish (idSystemObject: ${idSystemObject}`,LOG.LS.eDEBUG);
+        LOG.info(`EdanCollection.publish (idSystemObject: ${idSystemObject} | state: ${COMMON.ePublishedState[ePublishState]})`,LOG.LS.eDEBUG);
 
         switch (ePublishState) {
             case COMMON.ePublishedState.eNotPublished:
             case COMMON.ePublishedState.eAPIOnly:
             case COMMON.ePublishedState.ePublished:
+            case COMMON.ePublishedState.eInternal:
                 break;
             default:
                 LOG.error(`EdanCollection.publish called with invalid ePublishState ${ePublishState} for idSystemObject ${idSystemObject}`, LOG.LS.eCOLL);
@@ -216,14 +217,35 @@ export class EdanCollection implements COL.ICollection {
     }
 
     async createEdan3DPackage(path: string, sceneFile?: string | undefined): Promise<COL.EdanRecord | null> {
+        console.log(`createEdan3DPackage input: ${path}`);
+        // const body: any = sceneFile ? { resource: path.replace(/\.zip|-zip$/, ''), document: sceneFile } : { resource: path.replace(/\.zip|-zip$/, '') };
         const body: any = sceneFile ? { resource: path, document: sceneFile } : { resource: path };
-        return this.upsertResource(body, 'createEdan3DPackage');
+        LOG.info(`body:\n${H.Helpers.JSONStringify(body)}`,LOG.LS.eDEBUG);
+
+        const edanRecord: COL.EdanRecord | null = await this.upsertResource(body, 'createEdan3DPackage');
+        if(!edanRecord)
+            return null;
+
+        // returned URL may include a zip extension so we clean that out
+        // only seems to happen when running locally with a Proxy
+        const packageUrl: string = edanRecord.url.replace(/\.zip|-zip$/, '');
+        if(edanRecord.url!==packageUrl)
+            LOG.info(`EdanCollection.createEdan3DPackage returned url needed correction. (${edanRecord.url} -> ${packageUrl})`,LOG.LS.eCOLL);
+
+        return { ...edanRecord, url: packageUrl };
     }
 
     async updateEdan3DPackage(url: string, title: string | undefined, sceneContent: COL.Edan3DPackageContent,
         status: number, publicSearch: boolean): Promise<COL.EdanRecord | null> {
+
+        // make sure the url doesn't include file extensions
+        // only seems to happen when running locally with a Proxy
+        const packageUrl: string = url.replace(/\.zip|-zip$/, '');
+        if(url!==packageUrl)
+            LOG.info(`EdanCollection.updateEdan3DPackage incoming url needed correction. (${url} -> ${packageUrl})`,LOG.LS.eCOLL);
+
         const body: any = {
-            url,
+            url: packageUrl,
             title,
             status,
             publicSearch,
@@ -236,10 +258,10 @@ export class EdanCollection implements COL.ICollection {
 
     /** c.f. http://dev.3d.api.si.edu/apidocs/#api-admin-upsertContent */
     private async upsertContent(body: any, caller: string): Promise<COL.EdanRecord | null> {
-        // LOG.info(`EdanCollection.upsertContent: ${JSON.stringify(body)}`, LOG.LS.eCOLL);
-        LOG.info('EdanCollection.upsertContent', LOG.LS.eCOLL);
+        LOG.info(`EdanCollection.upsertContent: ${JSON.stringify(body)}`, LOG.LS.eCOLL);
         const reqResult: HttpRequestResult = await this.sendRequest(eAPIType.eEDAN3dApi, eHTTPMethod.ePost, 'api/v1.0/admin/upsertContent', '', JSON.stringify(body), 'application/json');
-        LOG.info(`EdanCollection.upsertContent:\n${JSON.stringify(body)}\n${reqResult.output}`, LOG.LS.eCOLL);
+        LOG.info(`EdanCollection.upsertContent result:\n${H.Helpers.JSONStringify(H.Helpers.JSONParse(reqResult.output))}`, LOG.LS.eCOLL);
+
         if (!reqResult.success) {
             LOG.error(`EdanCollection.${caller} failed with ${reqResult.statusText}: ${reqResult.output}`, LOG.LS.eCOLL);
             return null;
@@ -255,9 +277,10 @@ export class EdanCollection implements COL.ICollection {
 
     /** c.f. http://dev.3d.api.si.edu/apidocs/#api-admin-upsertResource */
     private async upsertResource(body: any, caller: string): Promise<COL.EdanRecord | null> {
-        LOG.info(`EdanCollection.upsertResource: ${JSON.stringify(body)}`, LOG.LS.eCOLL);
+        // LOG.info(`EdanCollection.upsertResource: ${JSON.stringify(body)}`, LOG.LS.eCOLL);
         const reqResult: HttpRequestResult = await this.sendRequest(eAPIType.eEDAN3dApi, eHTTPMethod.ePost, 'api/v1.0/admin/upsertResource', '', JSON.stringify(body), 'application/json');
-        // LOG.info(`EdanCollection.upsertResource:\n${JSON.stringify(body)}:\n${reqResult.output}`, LOG.LS.eCOLL);
+        LOG.info(`EdanCollection.upsertResource result:\n${H.Helpers.JSONStringify(H.Helpers.JSONParse(reqResult.output))}`, LOG.LS.eDEBUG);
+
         if (!reqResult.success) {
             LOG.error(`EdanCollection.${caller} failed with ${reqResult.statusText}: ${reqResult.output}`, LOG.LS.eCOLL);
             return null;
@@ -283,6 +306,7 @@ export class EdanCollection implements COL.ICollection {
         return prependNameAuthority ? this.transformArkIntoUrl(arkId) : arkId;
     }
 
+    // Basically this extracts the URL from the ark ID. Then returns it to ingestData.ts on line
     extractArkFromUrl(url: string): string | null {
         const arkPosition: number = url.indexOf('ark:');
         return (arkPosition > -1) ? url.substring(arkPosition) : null;
@@ -299,6 +323,13 @@ export class EdanCollection implements COL.ICollection {
     getArkNameAssigningAuthority(): string {
         return NAME_ASSIGNING_AUTHORITY;
     }
+
+    // EDAN Identifier
+    checkEdanIdentifier(edan: string): string | null {
+        const edanPosition: number = edan.indexOf('edanmdm:');
+        return (edanPosition > -1) ? edan : null;
+    }
+
     // #endregion
 
     // #region HTTP Helpers
diff --git a/server/collections/impl/PublishScene.ts b/server/collections/impl/PublishScene.ts
index d4cc1d152..06bc64496 100644
--- a/server/collections/impl/PublishScene.ts
+++ b/server/collections/impl/PublishScene.ts
@@ -98,14 +98,14 @@ export class PublishScene {
             return false;
         }
 
-        // create EDAN 3D Package
+        // create EDAN 3D Package for our scene and push to EDAN
+        // this is done first so when we update with license/status info the scene is there
         let edanRecord: COL.EdanRecord | null = await ICol.createEdan3DPackage(this.sharedName, this.sceneFile);
         if (!edanRecord) {
             LOG.error('PublishScene.publish EDAN failed', LOG.LS.eCOLL);
             return false;
         }
-        LOG.info(`PublishScene.publish ${edanRecord.url} succeeded with Edan status ${edanRecord.status}, publicSearch ${edanRecord.publicSearch}`, LOG.LS.eCOLL);
-        // LOG.info(`PublishScene.publish ${edanRecord.url} succeeded with Edan status ${edanRecord.status}, publicSearch ${edanRecord.publicSearch}:\n${H.Helpers.JSONStringify(edanRecord)}`, LOG.LS.eCOLL);
+        LOG.info(`PublishScene.publish ${edanRecord.url} succeeded with Edan status ${edanRecord.status}, publicSearch ${edanRecord.publicSearch} (path: ${this.sharedName})`, LOG.LS.eCOLL);
 
         // stage downloads
         if (!await this.stageDownloads() || !this.edan3DResourceList)
@@ -117,6 +117,7 @@ export class PublishScene {
             return false;
         const media_usage: COL.EdanLicenseInfo = EdanCollection.computeLicenseInfo(LR?.License?.Name); // eslint-disable-line camelcase
 
+        // figure out our flags for the package so we have the correct visibility within EDAN
         const { status, publicSearch, downloads } = this.computeEdanSearchFlags(edanRecord, ePublishedStateIntended);
         const haveDownloads: boolean = (this.edan3DResourceList.length > 0);
         const updatePackage: boolean = haveDownloads                                // we have downloads, or
@@ -456,13 +457,13 @@ export class PublishScene {
 
     private async stageSceneFiles(): Promise<boolean> {
         if (this.SacList.length <= 0 || !this.scene) {
-            LOG.error(`PublishScene.stageSceneFiles casnnot stage files for scene (${this.sceneFile}). No scene or assets list (${this.scene}|${this.SacList.length})`,LOG.LS.eCOLL);
+            LOG.error(`PublishScene.stageSceneFiles cannot stage files for scene (${this.sceneFile}). No scene or assets list (${this.scene}|${this.SacList.length})`,LOG.LS.eCOLL);
             return false;
         }
         let stageRes: H.IOResults = { success: true };
 
         // log what will be included
-        const assets: string[] = this.SacList.map(SAC => { return `${SAC.asset.FileName}(${SAC.assetVersion.Version})`; });
+        const assets: string[] = this.SacList.map(SAC => { return `${SAC.asset.FileName}(v${SAC.assetVersion.Version})`; });
         LOG.info(`PublishScene.stageSceneFiles collecting assets for scene (${this.sceneFile}): ${assets.join(',')}`,LOG.LS.eCOLL);
 
         // second pass: zip up appropriate assets; prepare to copy downloads
@@ -491,12 +492,14 @@ export class PublishScene {
             }
         }
 
+        // stream entire zip
         const zipStream: NodeJS.ReadableStream | null = await zip.streamContent(null);
         if (!zipStream) {
             LOG.error('PublishScene.stageSceneFiles failed to extract stream from zip', LOG.LS.eCOLL);
             return false;
         }
 
+        // make sure we have a folder to stage our file in
         stageRes = await H.Helpers.fileOrDirExists(Config.collection.edan.stagingRoot);
         if (!stageRes.success)
             stageRes = await H.Helpers.createDirectory(Config.collection.edan.stagingRoot);
@@ -505,10 +508,14 @@ export class PublishScene {
             return false;
         }
 
+        // build our paths for the staged content and store in this instance via sharedName
+        // 'sharedName' represents the path to the resource 'shared' and accessible to EDAN
+        // in production where we put resources for EDAN to find is different than the staging root
         const noFinalSlash: boolean = !Config.collection.edan.upsertContentRoot.endsWith('/');
         this.sharedName = Config.collection.edan.upsertContentRoot + (noFinalSlash ? '/' : '') + this.scene.EdanUUID! + '.zip'; // eslint-disable-line @typescript-eslint/no-non-null-assertion
         const stagedName: string = path.join(Config.collection.edan.stagingRoot, this.scene.EdanUUID!) + '.zip'; // eslint-disable-line @typescript-eslint/no-non-null-assertion
         LOG.info(`PublishScene.stageSceneFiles staging file ${stagedName}, referenced in publish as ${this.sharedName}`, LOG.LS.eCOLL);
+        LOG.info(`PublishScene.stageSceneFiles paths (upsertRoot: ${Config.collection.edan.upsertContentRoot} | stagingRoot: ${Config.collection.edan.stagingRoot} | shared: ${this.sharedName} | staged: ${stagedName}).`,LOG.LS.eDEBUG);
 
         stageRes = await H.Helpers.writeStreamToFile(zipStream, stagedName);
         if (!stageRes.success) {
@@ -795,6 +802,7 @@ export class PublishScene {
             case COMMON.ePublishedState.eNotPublished:       status = 1; publicSearch = false; downloads = false; break;
             case COMMON.ePublishedState.eAPIOnly:            status = 0; publicSearch = false; downloads = true;  break;
             case COMMON.ePublishedState.ePublished:          status = 0; publicSearch = true;  downloads = true;  break;
+            case COMMON.ePublishedState.eInternal:           status = 1; publicSearch = false; downloads = true;  break; // same as 'NotPublished' but needed since default is 'NotPublished' and never triggers update.
             // case COMMON.ePublishedState.eViewOnly:           status = 0; publicSearch = true;  downloads = false; break;
         }
         LOG.info(`PublishScene.computeEdanSearchFlags(${COMMON.ePublishedState[eState]}) = { status ${status}, publicSearch ${publicSearch}, downloads ${downloads} }`, LOG.LS.eCOLL);
diff --git a/server/collections/interface/ICollection.ts b/server/collections/interface/ICollection.ts
index c682103a6..20261c971 100644
--- a/server/collections/interface/ICollection.ts
+++ b/server/collections/interface/ICollection.ts
@@ -58,7 +58,8 @@ export interface ICollection {
     /** Pass in a null shoulder to use the system shoulder */
     generateArk(shoulder: string | null, prependNameAuthority: boolean, isMedia: boolean): string;
     extractArkFromUrl(url: string): string | null;
-    transformArkIntoUrl(arkId: string): string
+    transformArkIntoUrl(arkId: string): string;
     getArkNameMappingAuthority(): string;
     getArkNameAssigningAuthority(): string;
+    checkEdanIdentifier(edan: string): string | null;
 }
\ No newline at end of file
diff --git a/server/db/api/SystemObjectVersion.ts b/server/db/api/SystemObjectVersion.ts
index b825108ca..94c92fb7d 100644
--- a/server/db/api/SystemObjectVersion.ts
+++ b/server/db/api/SystemObjectVersion.ts
@@ -24,6 +24,7 @@ export class SystemObjectVersion extends DBC.DBObject<SystemObjectVersionBase> i
         switch (this.PublishedState) {
             case 1: return COMMON.ePublishedState.eAPIOnly;
             case 2: return COMMON.ePublishedState.ePublished;
+            case 3: return COMMON.ePublishedState.eInternal;
             default: return COMMON.ePublishedState.eNotPublished;
         }
     }
diff --git a/server/graphql/schema/ingestion/resolvers/mutations/ingestData.ts b/server/graphql/schema/ingestion/resolvers/mutations/ingestData.ts
index 02d05fbee..eace81c6a 100644
--- a/server/graphql/schema/ingestion/resolvers/mutations/ingestData.ts
+++ b/server/graphql/schema/ingestion/resolvers/mutations/ingestData.ts
@@ -289,19 +289,55 @@ class IngestDataWorker extends ResolverBase {
 
     private async validateIdentifier(identifier: IngestIdentifierInput): Promise<IdentifierResults> {
         // compute identifier; for ARKs, extract the ID from a URL that may be housing the ARK ID
+        // TODO: refactor giving preference to regex as first pass validation
+        const regexArk: RegExp = new RegExp('ark:/65665/[0-9a-zA-Z-]*([^@!%$&#*"\'^]+$)');
+        const regexEdan: RegExp = new RegExp('edanmdm:[a-z]*[a-z|A-Z|0-9_.]*([^@!%$&#*=+"\']+$)');
+
+        // ARK
         const vocabularyARK: DBAPI.Vocabulary | undefined = await this.getVocabularyARK();
         if (!vocabularyARK)
             return { success: false, error: 'Unable to compute ARK Vocabulary ID' };
-        let identifierValue: string;
+
+        let identifierValue: string = '';
+
         if (identifier.identifierType == vocabularyARK.idVocabulary) {
             const arkId: string | null = this.getICollection().extractArkFromUrl(identifier.identifier);
-            if (!arkId)
-                return { success: false, error: `Invalid ark ${identifier.identifier}` };
-            else
+            // console.log({ regexTestValue: regexArk.test(arkId ?? ""), arkValue: arkId })
+
+            if  (!arkId)
+                return { success: false, error: `Invalid Ark ID: ${identifier.identifier}` };
+
+            if (regexArk.test(arkId))
                 identifierValue = arkId;
-        } else
+            else
+                return { success: false, error: 'Incorrect Ark Record ID Syntax.  Please review documentation.' };
+        }
+
+        //  EDAN
+        const vocabularyEdan: DBAPI.Vocabulary | undefined = await this.getVocabularyEdanRecordID();
+        if (!vocabularyEdan)
+            return { success: false, error: 'Unable to compute EDAN Vocabulary ID.' };
+
+        if (identifier.identifierType == vocabularyEdan.idVocabulary) {
+            const edanId: string | null = this.getICollection().checkEdanIdentifier(identifier.identifier);
+
+            //Uncomment to Console Test in Terminal
+            //console.log({ regexTestValue: regexEdan.test(edanId ?? ""), edanValue: edanId })
+
+            if  (!edanId)
+                return { success: false, error: `Invalid EDAN Record ID: ${identifier.identifier}}` };
+
+            if (regexEdan.test(edanId))
+                identifierValue = edanId;
+            else
+                return { success: false, error: 'Incorrect EDAN Record ID Syntax.  Please review documentation.' };
+        }
+
+        if(identifier.identifierType !== vocabularyARK.idVocabulary || identifier.identifierType !== vocabularyEdan.idVocabulary)
             identifierValue = identifier.identifier;
+
         return { success: true, identifierValue };
+
     }
 
     private async handleIdentifiers(SOBased: DBAPI.SystemObjectBased, systemCreated: boolean,
diff --git a/server/graphql/schema/unit/resolvers/queries/searchIngestionSubjects.ts b/server/graphql/schema/unit/resolvers/queries/searchIngestionSubjects.ts
index 449e22d88..d694d3bf1 100644
--- a/server/graphql/schema/unit/resolvers/queries/searchIngestionSubjects.ts
+++ b/server/graphql/schema/unit/resolvers/queries/searchIngestionSubjects.ts
@@ -3,6 +3,7 @@ import { Parent } from '../../../../../types/resolvers';
 import * as COL from '../../../../../collections/interface/';
 import * as DBAPI from '../../../../../db';
 import * as LOG from '../../../../../utils/logger';
+// import * as H from '../../../../../utils/helpers';
 
 export default async function searchIngestionSubjects(_: Parent, args: QuerySearchIngestionSubjectsArgs): Promise<SearchIngestionSubjectsResult> {
     const { input } = args;
@@ -15,6 +16,7 @@ export default async function searchIngestionSubjects(_: Parent, args: QuerySear
     const results: DBAPI.SubjectUnitIdentifier[] = [];
     const resultSet: Set<string> = new Set<string>();
 
+
     if (resultsDB) {
         for (const resultDB of resultsDB) {
             if (resultSet.has(resultDB.IdentifierPublic))
diff --git a/server/tests/db/dbcreation.test.ts b/server/tests/db/dbcreation.test.ts
index 7501d27e4..9ef24fb56 100644
--- a/server/tests/db/dbcreation.test.ts
+++ b/server/tests/db/dbcreation.test.ts
@@ -4287,6 +4287,7 @@ describe('DB Fetch SystemObject Fetch Pair Test Suite', () => {
         expect(COMMON.PublishedStateEnumToString(COMMON.ePublishedState.eNotPublished)).toEqual('Not Published');
         expect(COMMON.PublishedStateEnumToString(COMMON.ePublishedState.eAPIOnly)).toEqual('API Only');
         expect(COMMON.PublishedStateEnumToString(COMMON.ePublishedState.ePublished)).toEqual('Published');
+        expect(COMMON.PublishedStateEnumToString(COMMON.ePublishedState.eInternal)).toEqual('Internal');
     });
 
     test('DB Fetch SystemObject: LicenseRestrictLevelToPublishedStateEnum', async () => {
@@ -7199,6 +7200,8 @@ describe('DB Update Test Suite', () => {
         if (systemObjectVersion) {
             systemObjectVersion.setPublishedState(COMMON.ePublishedState.eNotPublished);
             expect(systemObjectVersion.publishedStateEnum()).toEqual(COMMON.ePublishedState.eNotPublished);
+            systemObjectVersion.setPublishedState(COMMON.ePublishedState.eInternal);
+            expect(systemObjectVersion.publishedStateEnum()).toEqual(COMMON.ePublishedState.eInternal);
             systemObjectVersion.setPublishedState(COMMON.ePublishedState.eAPIOnly);
             expect(systemObjectVersion.publishedStateEnum()).toEqual(COMMON.ePublishedState.eAPIOnly);
             systemObjectVersion.setPublishedState(COMMON.ePublishedState.ePublished);
diff --git a/server/utils/helpers.ts b/server/utils/helpers.ts
index fd9352f9f..98fe1e97a 100644
--- a/server/utils/helpers.ts
+++ b/server/utils/helpers.ts
@@ -484,6 +484,16 @@ export class Helpers {
         return parseFloat(input.toFixed(precision));
     }
 
+    /** parses a string as JSON */
+    static JSONParse(input: string): any {
+        try {
+            return { json: JSON.parse(input) };
+        } catch(error) {
+            LOG.error(`JSON Failure: ${this.JSONStringify(error)}`,LOG.LS.eSYS);
+            return undefined;
+        }
+    }
+
     static JSONStringify(obj: any): string {
         return JSON.stringify(obj, Helpers.saferStringify);
     }
diff --git a/yarn.lock b/yarn.lock
index 40124f7a4..d6becacbd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3417,6 +3417,98 @@
     prop-types "^15.7.2"
     react-is "^17.0.2"
 
+"@material/animation@^14.0.0":
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/@material/animation/-/animation-14.0.0.tgz#f23fbe38deb6a48829dcdb0b7580017a4217e94b"
+  integrity sha512-VlYSfUaIj/BBVtRZI8Gv0VvzikFf+XgK0Zdgsok5c1v5DDnNz5tpB8mnGrveWz0rHbp1X4+CWLKrTwNmjrw3Xw==
+  dependencies:
+    tslib "^2.1.0"
+
+"@material/base@^14.0.0":
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/@material/base/-/base-14.0.0.tgz#022debef6762764dbe1056eb1bcffca6b354883c"
+  integrity sha512-Ou7vS7n1H4Y10MUZyYAbt6H0t67c6urxoCgeVT7M38aQlaNUwFMODp7KT/myjYz2YULfhu3PtfSV3Sltgac9mA==
+  dependencies:
+    tslib "^2.1.0"
+
+"@material/dom@^14.0.0":
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/@material/dom/-/dom-14.0.0.tgz#dad6908ea26f7cb21b1078f58ec04bd897c615c4"
+  integrity sha512-8t88XyacclTj8qsIw9q0vEj4PI2KVncLoIsIMzwuMx49P2FZg6TsLjor262MI3Qs00UWAifuLMrhnOnfyrbe7Q==
+  dependencies:
+    "@material/feature-targeting" "^14.0.0"
+    tslib "^2.1.0"
+
+"@material/elevation@^14.0.0":
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/@material/elevation/-/elevation-14.0.0.tgz#82018c3f0856ff5057d9f80df43db27b1e19a52b"
+  integrity sha512-Di3tkxTpXwvf1GJUmaC8rd+zVh5dB2SWMBGagL4+kT8UmjSISif/OPRGuGnXs3QhF6nmEjkdC0ijdZLcYQkepw==
+  dependencies:
+    "@material/animation" "^14.0.0"
+    "@material/base" "^14.0.0"
+    "@material/feature-targeting" "^14.0.0"
+    "@material/rtl" "^14.0.0"
+    "@material/theme" "^14.0.0"
+    tslib "^2.1.0"
+
+"@material/feature-targeting@^14.0.0":
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/@material/feature-targeting/-/feature-targeting-14.0.0.tgz#a6a878ae2be1f88d31b0bb95f05dbf5d486c4b3e"
+  integrity sha512-a5WGgHEq5lJeeNL5yevtgoZjBjXWy6+klfVWQEh8oyix/rMJygGgO7gEc52uv8fB8uAIoYEB3iBMOv8jRq8FeA==
+  dependencies:
+    tslib "^2.1.0"
+
+"@material/rtl@^14.0.0":
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/@material/rtl/-/rtl-14.0.0.tgz#6be5adf56dcbab0d4a7dabd9ab724fbcc5c63d6b"
+  integrity sha512-xl6OZYyRjuiW2hmbjV2omMV8sQtfmKAjeWnD1RMiAPLCTyOW9Lh/PYYnXjxUrNa0cRwIIbOn5J7OYXokja8puA==
+  dependencies:
+    "@material/theme" "^14.0.0"
+    tslib "^2.1.0"
+
+"@material/shape@^14.0.0":
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/@material/shape/-/shape-14.0.0.tgz#b58f39d743394c2ff7c57f0f004f0aabade2779e"
+  integrity sha512-o0mJB0+feOv473KckI8gFnUo8IQAaEA6ynXzw3VIYFjPi48pJwrxa0mZcJP/OoTXrCbDzDeFJfDPXEmRioBb9A==
+  dependencies:
+    "@material/feature-targeting" "^14.0.0"
+    "@material/rtl" "^14.0.0"
+    "@material/theme" "^14.0.0"
+    tslib "^2.1.0"
+
+"@material/theme@^14.0.0":
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/@material/theme/-/theme-14.0.0.tgz#cbcd7b2116220c44ef8a89c43b068b29d23456ea"
+  integrity sha512-6/SENWNIFuXzeHMPHrYwbsXKgkvCtWuzzQ3cUu4UEt3KcQ5YpViazIM6h8ByYKZP8A9d8QpkJ0WGX5btGDcVoA==
+  dependencies:
+    "@material/feature-targeting" "^14.0.0"
+    tslib "^2.1.0"
+
+"@material/tooltip@14.0.0":
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/@material/tooltip/-/tooltip-14.0.0.tgz#16bc9277bd347e581c0fd23da29ef9ff3a463431"
+  integrity sha512-rp7sOuVE1hmg4VgBJMnSvtDbSzctL42X7y1yv8ukuu40Sli+H5FT0Zbn351EfjJgQWg/AlXA6+reVXkXje8JzQ==
+  dependencies:
+    "@material/animation" "^14.0.0"
+    "@material/base" "^14.0.0"
+    "@material/dom" "^14.0.0"
+    "@material/elevation" "^14.0.0"
+    "@material/feature-targeting" "^14.0.0"
+    "@material/rtl" "^14.0.0"
+    "@material/shape" "^14.0.0"
+    "@material/theme" "^14.0.0"
+    "@material/typography" "^14.0.0"
+    tslib "^2.1.0"
+
+"@material/typography@^14.0.0":
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/@material/typography/-/typography-14.0.0.tgz#a13ffc47eaeaa09852f84b7e1206a69b5c9dbc89"
+  integrity sha512-/QtHBYiTR+TPMryM/CT386B2WlAQf/Ae32V324Z7P40gHLKY/YBXx7FDutAWZFeOerq/two4Nd2aAHBcMM2wMw==
+  dependencies:
+    "@material/feature-targeting" "^14.0.0"
+    "@material/theme" "^14.0.0"
+    tslib "^2.1.0"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"