diff --git a/src/Utils/Funcs.ts b/src/Utils/Funcs.ts
index b63383f..349bbd7 100644
--- a/src/Utils/Funcs.ts
+++ b/src/Utils/Funcs.ts
@@ -4,23 +4,27 @@ import { SPDEVMODE_LOCAL_STORAGE_KEY } from '../webparts/constants';
 
 export function getEntryWebAccessUrl(
   nodeId: string,
-  repoId: string,
   waUrl: string,
-  isContainer: boolean
+  isContainer: boolean,
+  repoId?: string
 ): string | undefined {
-  if (nodeId?.length === 0 || repoId?.length === 0 || waUrl?.length === 0) {
+  if (!nodeId || nodeId?.length === 0 || !waUrl || waUrl?.length === 0) {
     return undefined;
   }
   let newUrl: string;
   if (isContainer) {
-    const queryParams: UrlUtils.QueryParameter[] = [['repo', repoId]];
+    const queryParams: UrlUtils.QueryParameter[] = repoId
+      ? [['repo', repoId]]
+      : [];
     newUrl = UrlUtils.combineURLs(waUrl ?? '', 'Browse.aspx', queryParams);
     newUrl += `#?id=${encodeURIComponent(nodeId)}`;
   } else {
-    const queryParams: UrlUtils.QueryParameter[] = [
-      ['repo', repoId],
-      ['docid', nodeId],
-    ];
+    const queryParams: UrlUtils.QueryParameter[] = repoId
+      ? [
+          ['repo', repoId],
+          ['docid', nodeId],
+        ]
+      : [['docid', nodeId]];
     newUrl = UrlUtils.combineURLs(waUrl ?? '', 'DocView.aspx', queryParams);
   }
   return newUrl;
diff --git a/src/extensions/savetoLaserfiche/CommonDialogs.tsx b/src/extensions/savetoLaserfiche/CommonDialogs.tsx
index a735ff8..a147c66 100644
--- a/src/extensions/savetoLaserfiche/CommonDialogs.tsx
+++ b/src/extensions/savetoLaserfiche/CommonDialogs.tsx
@@ -1,91 +1,89 @@
 import * as React from 'react';
-import { Navigation } from 'spfx-navigation';
 import styles from './SendToLaserFiche.module.scss';
+import { SPComponentLoader } from '@microsoft/sp-loader';
+import { SavedToLaserficheDocumentData } from './SaveDocumentToLaserfiche';
 
-const SAVING_DOCUMENT_TO_LASERFICHE = 'Saving your document to Laserfiche';
+const SAVING_DOCUMENT_TO_LASERFICHE = 'Saving document to Laserfiche...';
 
 export default function LoadingDialog() {
   return (
     <>
-      <img
-        style={{ marginLeft: '28%' }}
-        src='/_layouts/15/images/progress.gif'
-        id='imgid'
-      />
-      <div>
-        <p className={styles.text}>{SAVING_DOCUMENT_TO_LASERFICHE}</p>
-      </div>
+      <img src='/_layouts/15/images/progress.gif' />
+      <br />
+      <div>{SAVING_DOCUMENT_TO_LASERFICHE}</div>
     </>
   );
 }
 
-const DOCUMENT_UPLOADED = 'Document uploaded';
-const DOCUMENT_UPLOADED_METADATA_FAILED =
-  'Document uploaded to repository, updating metadata failed due to constraint mismatch';
+const DOCUMENT_SUCCESSFULLY_UPLOADED_TO_LASERFICHE_WITH_NAME =
+  'Document successfully uploaded to Laserfiche with name:';
+const METADATA_FAILED_TO_SAVE_INVALID_FIELD =
+  'All metadata failed to save due to at least one invalid field';
 const TEMPLATE_FIELDS_NOT_APPLIED =
   'The Laserfiche template and fields were not applied to this document.';
 const CLOSE = 'Close';
-const GO_TO_FILE = 'Go to File';
-const GO_TO_LIBRARY = 'Go to Library';
-const CLICK_HERE_VIEW_FILE_LASERFICHE =
-  'Click here to view the file in Laserfiche';
-const CLICK_HERE_GO_SHAREPOINT_LIBRARY =
-  'Click here to go back to your SharePoint library';
+const VIEW_FILE_IN_LASERFICHE = 'View file in Laserfiche';
 
-export function SavedToLaserficheSuccessDialog(props: {
-  closeClick: () => Promise<void>;
-  successfulSave: {
-    fileLink: string;
-    pathBack: string;
-    metadataSaved: boolean;
-  };
+export function SavedToLaserficheSuccessDialogText(props: {
+  successfulSave: SavedToLaserficheDocumentData;
 }) {
+  React.useEffect(() => {
+    SPComponentLoader.loadCss(
+      'https://cdn.jsdelivr.net/npm/@laserfiche/lf-ui-components@14/cdn/indigo-pink.css'
+    );
+    SPComponentLoader.loadCss(
+      'https://cdn.jsdelivr.net/npm/@laserfiche/lf-ui-components@14/cdn/lf-ms-office-lite.css'
+    );
+  }, []);
+
   const metadataFailedNotice: JSX.Element = (
     <span>
-      {DOCUMENT_UPLOADED_METADATA_FAILED}
+      {METADATA_FAILED_TO_SAVE_INVALID_FIELD}
       <br /> <p style={{ color: 'red' }}>{TEMPLATE_FIELDS_NOT_APPLIED}</p>
     </span>
   );
 
+  return (
+    <>
+      <div>
+        {`${DOCUMENT_SUCCESSFULLY_UPLOADED_TO_LASERFICHE_WITH_NAME}  ${props.successfulSave.fileName}.`}
+        {!props.successfulSave.metadataSaved && metadataFailedNotice}
+      </div>
+    </>
+  );
+}
+
+export function SavedToLaserficheSuccessDialogButtons(props: {
+  closeClick: () => Promise<void>;
+  successfulSave: SavedToLaserficheDocumentData;
+}) {
+  React.useEffect(() => {
+    SPComponentLoader.loadCss(
+      'https://cdn.jsdelivr.net/npm/@laserfiche/lf-ui-components@14/cdn/indigo-pink.css'
+    );
+    SPComponentLoader.loadCss(
+      'https://cdn.jsdelivr.net/npm/@laserfiche/lf-ui-components@14/cdn/lf-ms-office-lite.css'
+    );
+  }, []);
+
   function viewFile() {
     window.open(props.successfulSave.fileLink);
   }
 
-  function redirect() {
-    Navigation.navigate(props.successfulSave.pathBack, true);
-  }
-
   return (
     <>
-      <div>
-        <p className={styles.text}>
-          {props.successfulSave.metadataSaved
-            ? DOCUMENT_UPLOADED
-            : metadataFailedNotice}
-        </p>
-      </div>
-
-      <div className={styles.button}>
-        <button className={styles.button1} onClick={props.closeClick}>
-          {CLOSE}
-        </button>
-        {props.successfulSave.fileLink && (
-          <button
-            className={styles.button2}
-            title={CLICK_HERE_VIEW_FILE_LASERFICHE}
-            onClick={viewFile}
-          >
-            {GO_TO_FILE}
-          </button>
-        )}
+      {props.successfulSave?.fileLink && (
         <button
-          className={styles.button2}
-          title={CLICK_HERE_GO_SHAREPOINT_LIBRARY}
-          onClick={redirect}
+          className={`lf-button primary-button ${styles.actionButton}`}
+          title={VIEW_FILE_IN_LASERFICHE}
+          onClick={viewFile}
         >
-          {GO_TO_LIBRARY}
+          {VIEW_FILE_IN_LASERFICHE}
         </button>
-      </div>
+      )}
+      <button className='lf-button sec-button' onClick={props.closeClick}>
+        {CLOSE}
+      </button>
     </>
   );
 }
diff --git a/src/extensions/savetoLaserfiche/GetDocumentDataDialog.tsx b/src/extensions/savetoLaserfiche/GetDocumentDataDialog.tsx
index 677d2f2..0643c6b 100644
--- a/src/extensions/savetoLaserfiche/GetDocumentDataDialog.tsx
+++ b/src/extensions/savetoLaserfiche/GetDocumentDataDialog.tsx
@@ -34,6 +34,7 @@ import { getSPListURL } from '../../Utils/Funcs';
 import SaveToLaserficheCustomDialog from './SaveToLaserficheDialog';
 import { BaseComponentContext } from '@microsoft/sp-component-base';
 import LoadingDialog from './CommonDialogs';
+import { SPComponentLoader } from '@microsoft/sp-loader';
 
 const signInPageRoute = '/SitePages/LaserficheSpSignIn.aspx';
 
@@ -73,7 +74,8 @@ export class GetDocumentDataCustomDialog extends BaseDialog {
           spFileInfo={this.fileInfo}
           context={this.context}
           showSaveToDialog={this.showNextDialog}
-        />
+          handleCancelDialog={this.close}
+      />
       </React.StrictMode>
     );
     ReactDOM.render(element, this.domElement);
@@ -90,8 +92,11 @@ const FOLLOWING_SP_FIELDS_BLANK_MAPPED_TO_REQUIRED_LF_FIELDS =
 const PLEASE_FILL_OUT_REQUIRED_FIELDS_TRY_AGAIN =
   'Please fill out these required fields and try again.';
 
+const CANCEL = 'Cancel';
+
 function GetDocumentDialogData(props: {
   showSaveToDialog: (fileData: ISPDocumentData) => void;
+  handleCancelDialog: () => Promise<void>;
   spFileInfo: {
     fileName: string;
     spContentType: string;
@@ -117,6 +122,13 @@ function GetDocumentDialogData(props: {
   ));
 
   React.useEffect(() => {
+    SPComponentLoader.loadCss(
+      'https://cdn.jsdelivr.net/npm/@laserfiche/lf-ui-components@14/cdn/indigo-pink.css'
+    );
+    SPComponentLoader.loadCss(
+      'https://cdn.jsdelivr.net/npm/@laserfiche/lf-ui-components@14/cdn/lf-ms-office-lite.css'
+    );
+
     saveDocumentToLaserficheAsync();
   }, []);
 
@@ -428,19 +440,38 @@ function GetDocumentDialogData(props: {
   }
 
   return (
-    <div className={styles.maindialog}>
-      <div id='overlay' className={styles.overlay} />
-      <div>
-        <img
-          src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAMAAAAKE/YAAAAAUVBMVEXSXyj////HYzL/+/T/+Or/9d+yaUa9ZT2yaUj/9OG7Zj3SXybRYCj/+/b///3LYS/OYCvEZDS2aEL/89jAZTnMYS3/8dO7Zzusa02+ZTn/78wyF0DsAAABnUlEQVR4nO3ci26CMABGYQcoLRS5OTf2/g86R+KSLYUm2vxcPB8RTYzxkADRajkcAAAAAAAAAADYgbJcusCvqdtLnhfeJR/a96X7vOriarNJ/cUtHeiTnI7p26TsY+XRZ190sXSfVyA6X7rP6xZdzeweREeTGDt3IBIdTeCUR3Q0wQOxLNf3CWSr0ZvcPYiWIFqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVV4zeok/379m9BL2HO1Ckymlky0jRQc3Kqoou4f6YHzdaLX56PRzak757/JjfDS0dbOK6HM6Paf8P3st6lVE/9mAwPOpNcnqokOIJppoookmmmiiiSaaaKKJ3k30OfTFdU3RXZ+lT6qq6rbO+k4VXQ9fvT2OrH30Zo+3u/5rUI17NO3QmdPImIduxoyrUze0khEm5w6uqZNIRKNi91Hl5661dH+tdow6wts5J//BaJPRwH6IT1NxbDJ6vVc+nrXJaAAAAADALn0DBosqnCStFi4AAAAASUVORK5CYII='
-          width='42'
-          height='42'
-        />
+    <div className={styles.wrapper}>
+      <div className={styles.header}>
+        <div className={styles.logoHeader}>
+          <img
+            src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAMAAAAKE/YAAAAAUVBMVEXSXyj////HYzL/+/T/+Or/9d+yaUa9ZT2yaUj/9OG7Zj3SXybRYCj/+/b///3LYS/OYCvEZDS2aEL/89jAZTnMYS3/8dO7Zzusa02+ZTn/78wyF0DsAAABnUlEQVR4nO3ci26CMABGYQcoLRS5OTf2/g86R+KSLYUm2vxcPB8RTYzxkADRajkcAAAAAAAAAADYgbJcusCvqdtLnhfeJR/a96X7vOriarNJ/cUtHeiTnI7p26TsY+XRZ190sXSfVyA6X7rP6xZdzeweREeTGDt3IBIdTeCUR3Q0wQOxLNf3CWSr0ZvcPYiWIFqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVV4zeok/379m9BL2HO1Ckymlky0jRQc3Kqoou4f6YHzdaLX56PRzak757/JjfDS0dbOK6HM6Paf8P3st6lVE/9mAwPOpNcnqokOIJppoookmmmiiiSaaaKKJ3k30OfTFdU3RXZ+lT6qq6rbO+k4VXQ9fvT2OrH30Zo+3u/5rUI17NO3QmdPImIduxoyrUze0khEm5w6uqZNIRKNi91Hl5661dH+tdow6wts5J//BaJPRwH6IT1NxbDJ6vVc+nrXJaAAAAADALn0DBosqnCStFi4AAAAASUVORK5CYII='
+            width='30'
+            height='30'
+          />
+          <p className={styles.dialogTitle}>Laserfiche</p>
+        </div>
+
+        <button
+          className={styles.lfCloseButton}
+          title='close'
+          onClick={props.handleCancelDialog}
+        >
+          <span className='material-icons-outlined'> close </span>
+        </button>
+      </div>
+
+      <div className={styles.contentBox}>
         {!(missingFields?.length > 0) && <LoadingDialog />}
         {missingFields?.length > 0 && (
           <MissingFieldsDialog missingFields={listFields} />
         )}
       </div>
+
+      <div className={styles.footer}>
+        <button onClick={props.handleCancelDialog} className='lf-button sec-button'>
+          {CANCEL}
+        </button>
+      </div>
     </div>
   );
 }
@@ -456,7 +487,7 @@ function MissingFieldsDialog(props: { missingFields: JSX.Element[] }) {
 
   return (
     <div>
-      <p className={styles.text}>{textInside}</p>
+      <p>{textInside}</p>
     </div>
   );
 }
diff --git a/src/extensions/savetoLaserfiche/SaveDocumentToLaserfiche.ts b/src/extensions/savetoLaserfiche/SaveDocumentToLaserfiche.ts
index c62040a..8d45b38 100644
--- a/src/extensions/savetoLaserfiche/SaveDocumentToLaserfiche.ts
+++ b/src/extensions/savetoLaserfiche/SaveDocumentToLaserfiche.ts
@@ -6,6 +6,7 @@ import {
   FieldToUpdate,
   ValueToUpdate,
   PutFieldValsRequest,
+  Entry,
 } from '@laserfiche/lf-repository-api-client';
 import { RepositoryClientExInternal } from '../../repository-client/repository-client';
 import { IRepositoryApiClientExInternal } from '../../repository-client/repository-client-types';
@@ -21,6 +22,7 @@ export interface SavedToLaserficheDocumentData {
   fileLink: string;
   pathBack: string;
   metadataSaved: boolean;
+  fileName: string;
 }
 
 export class SaveDocumentToLaserfiche {
@@ -68,7 +70,10 @@ export class SaveDocumentToLaserfiche {
     const spFileUrl = this.spFileMetadata.fileUrl;
     const fileNameWithExt = this.spFileMetadata.fileName;
     const encodedFileName = encodeURIComponent(fileNameWithExt);
-    const encodedSpFileUrl = spFileUrl?.replace(fileNameWithExt, encodedFileName);
+    const encodedSpFileUrl = spFileUrl?.replace(
+      fileNameWithExt,
+      encodedFileName
+    );
     const fullSPDataUrl = window.location.origin + encodedSpFileUrl;
     try {
       const res = await fetch(fullSPDataUrl, {
@@ -153,7 +158,8 @@ export class SaveDocumentToLaserfiche {
           filenameWithoutExt
         );
       fileName = docNameReplacedWithFileName;
-      fileNameInEdoc = docNameReplacedWithFileName + `.${fileExtensionWithPeriod}`;
+      fileNameInEdoc =
+        docNameReplacedWithFileName + `.${fileExtensionWithPeriod}`;
       extension = fileExtensionWithPeriod;
     }
     const electronicDocument: FileParameter = {
@@ -176,9 +182,9 @@ export class SaveDocumentToLaserfiche {
       const entryId = entryCreateResult.operations.entryCreate.entryId ?? 1;
       const fileLink = getEntryWebAccessUrl(
         entryId.toString(),
-        repoId,
         webClientUrl,
-        false
+        false,
+        repoId
       );
       const fileUrl = this.spFileMetadata.fileUrl;
       const fileUrlWithoutDocName = fileUrl.slice(0, fileUrl.lastIndexOf('/'));
@@ -193,8 +199,20 @@ export class SaveDocumentToLaserfiche {
       } else {
         // TODO what should happen?
       }
+      const fileInfo: SavedToLaserficheDocumentData = {
+        fileLink,
+        pathBack: path,
+        metadataSaved: true,
+        fileName,
+      };
 
-      return { fileLink, pathBack: path, metadataSaved: true };
+      await this.tryUpdateFileNameAsync(
+        repoClient,
+        repoId,
+        entryCreateResult,
+        fileInfo
+      );
+      return fileInfo;
     } catch (error) {
       const conflict409 =
         error.operations.setFields.exceptions[0].statusCode === 409;
@@ -203,9 +221,9 @@ export class SaveDocumentToLaserfiche {
 
         const fileLink = getEntryWebAccessUrl(
           entryId.toString(),
-          repoId,
           webClientUrl,
-          false
+          false,
+          repoId
         );
         const fileUrl = this.spFileMetadata.fileUrl;
         const fileUrlWithoutDocName = fileUrl.slice(
@@ -214,7 +232,15 @@ export class SaveDocumentToLaserfiche {
         );
         const path = window.location.origin + fileUrlWithoutDocName;
         window.localStorage.removeItem(SP_LOCAL_STORAGE_KEY);
-        return { fileLink, pathBack: path, metadataSaved: false };
+        const fileInfo: SavedToLaserficheDocumentData = {
+          fileLink,
+          pathBack: path,
+          metadataSaved: false,
+          fileName,
+        };
+
+        await this.tryUpdateFileNameAsync(repoClient, repoId, error, fileInfo);
+        return fileInfo;
       } else {
         window.alert(`Error uploading file: ${JSON.stringify(error)}`);
         window.localStorage.removeItem(SP_LOCAL_STORAGE_KEY);
@@ -283,16 +309,28 @@ export class SaveDocumentToLaserfiche {
       const entryId = entryCreateResult.operations.entryCreate.entryId;
       const fileLink = getEntryWebAccessUrl(
         entryId.toString(),
-        repoId,
         webClientUrl,
-        false
+        false,
+        repoId
       );
       const fileUrl = this.spFileMetadata.fileUrl;
       const fileUrlWithoutDocName = fileUrl.slice(0, fileUrl.lastIndexOf('/'));
       const path = window.location.origin + fileUrlWithoutDocName;
 
       window.localStorage.removeItem(SP_LOCAL_STORAGE_KEY);
-      return { fileLink, pathBack: path, metadataSaved: true };
+      const fileInfo: SavedToLaserficheDocumentData = {
+        fileLink,
+        pathBack: path,
+        metadataSaved: true,
+        fileName: fileNameWithExt,
+      };
+      await this.tryUpdateFileNameAsync(
+        repoClient,
+        repoId,
+        entryCreateResult,
+        fileInfo
+      );
+      return fileInfo;
     } catch (error) {
       window.alert(`Error uploading file: ${JSON.stringify(error)}`);
       window.localStorage.removeItem(SP_LOCAL_STORAGE_KEY);
@@ -300,6 +338,24 @@ export class SaveDocumentToLaserfiche {
     }
   }
 
+  private async tryUpdateFileNameAsync(
+    repoClient: IRepositoryApiClientExInternal,
+    repoId: string,
+    entryCreateResult: CreateEntryResult,
+    fileInfo: SavedToLaserficheDocumentData
+  ) {
+    try {
+      const entryInfo: Entry = await repoClient.entriesClient.getEntry({
+        repoId,
+        entryId: entryCreateResult.operations.entryCreate.entryId,
+      });
+
+      fileInfo.fileName = entryInfo.name;
+    } catch {
+      // do nothing, keep default file name
+    }
+  }
+
   async deleteSPFileAsync() {
     const encodedFileName = encodeURIComponent(this.spFileMetadata.fileName);
     const spUrlWithEncodedFileName = this.spFileMetadata.fileUrl.replace(
@@ -349,7 +405,10 @@ export class SaveDocumentToLaserfiche {
     }
   }
 
-  async replaceFileWithLinkAsync(filenameWithoutExt: string, docFileLink: string) {
+  async replaceFileWithLinkAsync(
+    filenameWithoutExt: string,
+    docFileLink: string
+  ) {
     const resp = await fetch(
       this.spFileMetadata.contextPageAbsoluteUrl + '/_api/contextinfo',
       {
diff --git a/src/extensions/savetoLaserfiche/SaveToLaserficheDialog.tsx b/src/extensions/savetoLaserfiche/SaveToLaserficheDialog.tsx
index 4c8d04c..57417ba 100644
--- a/src/extensions/savetoLaserfiche/SaveToLaserficheDialog.tsx
+++ b/src/extensions/savetoLaserfiche/SaveToLaserficheDialog.tsx
@@ -3,8 +3,14 @@ import { LfLoginComponent } from '@laserfiche/types-lf-ui-components';
 import * as React from 'react';
 import { ISPDocumentData } from '../../Utils/Types';
 import { clientId } from '../../webparts/constants';
-import LoadingDialog, { SavedToLaserficheSuccessDialog } from './CommonDialogs';
-import { SaveDocumentToLaserfiche } from './SaveDocumentToLaserfiche';
+import LoadingDialog, {
+  SavedToLaserficheSuccessDialogButtons,
+  SavedToLaserficheSuccessDialogText,
+} from './CommonDialogs';
+import {
+  SaveDocumentToLaserfiche,
+  SavedToLaserficheDocumentData,
+} from './SaveDocumentToLaserfiche';
 import styles from './SendToLaserFiche.module.scss';
 import { SPComponentLoader } from '@microsoft/sp-loader';
 import * as ReactDOM from 'react-dom';
@@ -18,16 +24,18 @@ export default class SaveToLaserficheCustomDialog extends BaseDialog {
     this.successful = successful;
   };
 
-  closeClick = async () => {
+  closeClick = async (success?: SavedToLaserficheDocumentData) => {
     await this.close();
     if (this.closeParent) {
-      await this.closeParent();
+      await this.closeParent(success);
     }
   };
 
   constructor(
     private spFileData: ISPDocumentData,
-    private closeParent?: () => Promise<void>
+    private closeParent?: (
+      success?: SavedToLaserficheDocumentData
+    ) => Promise<void>
   ) {
     super();
   }
@@ -56,7 +64,7 @@ export default class SaveToLaserficheCustomDialog extends BaseDialog {
 
 function SaveToLaserficheDialog(props: {
   successSave: (success: boolean) => void;
-  closeClick: () => Promise<void>;
+  closeClick: (success?: SavedToLaserficheDocumentData) => Promise<void>;
   spFileMetadata: ISPDocumentData;
 }) {
   const loginComponent = React.createRef<
@@ -65,11 +73,11 @@ function SaveToLaserficheDialog(props: {
 
   const region = getRegion();
   const [success, setSuccess] = React.useState<
-    { fileLink: string; pathBack: string; metadataSaved: boolean } | undefined
+    SavedToLaserficheDocumentData | undefined
   >();
 
   const saveToDialogCloseClick = async () => {
-    await props.closeClick();
+    await props.closeClick(success);
   };
 
   React.useEffect(() => {
@@ -100,31 +108,47 @@ function SaveToLaserficheDialog(props: {
   }, []);
 
   return (
-    <div className={styles.maindialog}>
-      <lf-login
-        hidden
-        redirect_uri=''
-        authorize_url_host_name={region}
-        redirect_behavior='Replace'
-        client_id={clientId}
-        ref={loginComponent}
-      />
-      <div id='overlay' className={styles.overlay} />
-      <div>
-        <img
-          src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAMAAAAKE/YAAAAAUVBMVEXSXyj////HYzL/+/T/+Or/9d+yaUa9ZT2yaUj/9OG7Zj3SXybRYCj/+/b///3LYS/OYCvEZDS2aEL/89jAZTnMYS3/8dO7Zzusa02+ZTn/78wyF0DsAAABnUlEQVR4nO3ci26CMABGYQcoLRS5OTf2/g86R+KSLYUm2vxcPB8RTYzxkADRajkcAAAAAAAAAADYgbJcusCvqdtLnhfeJR/a96X7vOriarNJ/cUtHeiTnI7p26TsY+XRZ190sXSfVyA6X7rP6xZdzeweREeTGDt3IBIdTeCUR3Q0wQOxLNf3CWSr0ZvcPYiWIFqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVV4zeok/379m9BL2HO1Ckymlky0jRQc3Kqoou4f6YHzdaLX56PRzak757/JjfDS0dbOK6HM6Paf8P3st6lVE/9mAwPOpNcnqokOIJppoookmmmiiiSaaaKKJ3k30OfTFdU3RXZ+lT6qq6rbO+k4VXQ9fvT2OrH30Zo+3u/5rUI17NO3QmdPImIduxoyrUze0khEm5w6uqZNIRKNi91Hl5661dH+tdow6wts5J//BaJPRwH6IT1NxbDJ6vVc+nrXJaAAAAADALn0DBosqnCStFi4AAAAASUVORK5CYII='
-          width='42'
-          height='42'
-        />
+    <div className={styles.wrapper}>
+      <div className={styles.header}>
+        <div className={styles.logoHeader}>
+          <lf-login
+            hidden
+            redirect_uri=''
+            authorize_url_host_name={region}
+            redirect_behavior='Replace'
+            client_id={clientId}
+            ref={loginComponent}
+          />
+          <img
+            src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAMAAAAKE/YAAAAAUVBMVEXSXyj////HYzL/+/T/+Or/9d+yaUa9ZT2yaUj/9OG7Zj3SXybRYCj/+/b///3LYS/OYCvEZDS2aEL/89jAZTnMYS3/8dO7Zzusa02+ZTn/78wyF0DsAAABnUlEQVR4nO3ci26CMABGYQcoLRS5OTf2/g86R+KSLYUm2vxcPB8RTYzxkADRajkcAAAAAAAAAADYgbJcusCvqdtLnhfeJR/a96X7vOriarNJ/cUtHeiTnI7p26TsY+XRZ190sXSfVyA6X7rP6xZdzeweREeTGDt3IBIdTeCUR3Q0wQOxLNf3CWSr0ZvcPYiWIFqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVV4zeok/379m9BL2HO1Ckymlky0jRQc3Kqoou4f6YHzdaLX56PRzak757/JjfDS0dbOK6HM6Paf8P3st6lVE/9mAwPOpNcnqokOIJppoookmmmiiiSaaaKKJ3k30OfTFdU3RXZ+lT6qq6rbO+k4VXQ9fvT2OrH30Zo+3u/5rUI17NO3QmdPImIduxoyrUze0khEm5w6uqZNIRKNi91Hl5661dH+tdow6wts5J//BaJPRwH6IT1NxbDJ6vVc+nrXJaAAAAADALn0DBosqnCStFi4AAAAASUVORK5CYII='
+            width='30'
+            height='30'
+          />
+          <p className={styles.dialogTitle}>Laserfiche</p>
+        </div>
+
+        <button
+          className={styles.lfCloseButton}
+          title='close'
+          onClick={saveToDialogCloseClick}
+        >
+          <span className='material-icons-outlined'> close </span>
+        </button>
+      </div>
+
+      <div className={styles.contentBox}>
+        {!success && <LoadingDialog />}
+        {success && (
+          <SavedToLaserficheSuccessDialogText successfulSave={success} />
+        )}
       </div>
-      {!success && <LoadingDialog />}
-      {success && (
-        <SavedToLaserficheSuccessDialog
+
+      <div className={styles.footer}>
+        <SavedToLaserficheSuccessDialogButtons
           successfulSave={success}
           closeClick={saveToDialogCloseClick}
         />
-      )}
-      {/* TODO error dialog */}
+      </div>
     </div>
   );
 }
diff --git a/src/extensions/savetoLaserfiche/SendToLaserFiche.module.scss b/src/extensions/savetoLaserfiche/SendToLaserFiche.module.scss
index 403af45..1f331c6 100644
--- a/src/extensions/savetoLaserfiche/SendToLaserFiche.module.scss
+++ b/src/extensions/savetoLaserfiche/SendToLaserFiche.module.scss
@@ -1,50 +1,100 @@
 @import '~@fluentui/react/dist/sass/References.scss';
 
-.overlay {
-  position: relative;
-  display: block;
-  opacity: 0;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 50%;
-  height: 100%;
-  z-index: 1;
-  background-color: rgb(46, 44, 44);
-}
-.maindialog {
-  background-color: white;
-  padding: 20px;
-  transition: all 5s ease-in-out;
-  max-height: fit-content;
-}
-.text {
-  position: relative;
-  font-size: 16px;
-  color: black;
-  //z-index: 4;
-  //text-align: center;
-}
-.button {
-  color: #178080;
-  margin-left: 200px;
-  font-weight: bold;
+.actionButton {
+  margin-right: 10px;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 50px);
+  min-width: 400px;
+}
+
+.header {
   display: flex;
-  flex-direction: row-reverse;
-}
-.button1 {
-  //font-weight: bold;
-  color: black;
-  font-size: 15px;
-}
-.button2 {
-  //font-weight: bold;
-  color: rgb(8, 8, 8);
-  font-size: 15px;
-  margin-right: 16px;
-}
-.href {
-  font-weight: bold;
-  color: rgb(9, 34, 172);
+  justify-content: space-between;
+  border-bottom: 1px solid #e0e0e0;
+  min-height: var(--header-min-height, 50px);
+  color: #606060;
+  background-color: #fafafa;
+  /* default is the standard padding, but expose variables
+       in case contents have additional padding */
+  padding-top: var(--header-padding-top, 13px);
+  padding-bottom: var(--header-padding-bottom, 13px);
+  padding-left: var(--header-padding-left, 20px);
+  padding-right: var(--header-padding-right, 20px);
+
+  /* automatically accommodates for padding */
+  box-sizing: border-box;
+  height: 55px;
+  /* 50px - padding */
+  line-height: 24px;
+  align-items: center;
+}
+
+.contentBox {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-weight: 400;
+  box-sizing: border-box;
+  overflow: auto;
+  background-color: #fafafa;
+  min-height: 80px;
+  /* default is the standard padding, but expose variables
+       in case contents have additional padding */
+  padding-top: var(--content-padding-top, 20px);
+  padding-bottom: var(--content-padding-bottom, 20px);
+  padding-left: var(--content-padding-left, 20px);
+  padding-right: var(--content-padding-right, 20px);
+  max-height: calc(100vh - var(--header-min-height) - var(--footer-min-height));
+}
+
+.footer {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  min-height: var(--footer-min-height, 50px);
+  border-top: 1px solid #e0e0e0;
+  background-color: #fafafa;
+  /* default is the standard padding, but expose variables
+       in case contents have additional padding */
+  padding-top: var(--footer-padding-top, 10px);
+  padding-bottom: var(--footer-padding-bottom, 10px);
+  padding-left: var(--footer-padding-left, 20px);
+  padding-right: var(--footer-padding-right, 20px);
+
+  /* automatically accommodates for padding */
+  box-sizing: border-box;
+  height: 55px;
+  /* 50px - padding */
+  line-height: 30px;
+}
+
+.lfCloseButton {
+  cursor: pointer;
+  display: flex;
+  height: 24px;
+  width: 24px;
+  align-items: center;
+  border: none;
+  background: inherit;
+  justify-content: center;
+  color: #646464;
+}
+
+.logoHeader {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.dialogTitle {
+  padding-left: 10px;
 }
diff --git a/src/webparts/LaserficheRepositoryAccessWebPart/components/RepositoryViewWebPart.tsx b/src/webparts/LaserficheRepositoryAccessWebPart/components/RepositoryViewWebPart.tsx
index 2661ede..7838693 100644
--- a/src/webparts/LaserficheRepositoryAccessWebPart/components/RepositoryViewWebPart.tsx
+++ b/src/webparts/LaserficheRepositoryAccessWebPart/components/RepositoryViewWebPart.tsx
@@ -217,9 +217,9 @@ function RepositoryBrowserToolbar(props: {
     if (props.selectedItem?.id) {
       const webClientNodeUrl = getEntryWebAccessUrl(
         props.selectedItem.id,
-        repoId,
         props.webClientUrl,
-        props.selectedItem.isContainer
+        props.selectedItem.isContainer,
+        repoId
       );
       window.open(webClientNodeUrl);
     } else {
diff --git a/src/webparts/laserficheAdminConfiguration/components/ProfileConfigurationComponents.tsx b/src/webparts/laserficheAdminConfiguration/components/ProfileConfigurationComponents.tsx
index 46352e5..f800d85 100644
--- a/src/webparts/laserficheAdminConfiguration/components/ProfileConfigurationComponents.tsx
+++ b/src/webparts/laserficheAdminConfiguration/components/ProfileConfigurationComponents.tsx
@@ -228,6 +228,7 @@ export function RepositoryBrowserModal(props: {
     NgElement & WithProperties<LfRepositoryBrowserComponent>
   > = React.useRef();
   let lfRepoTreeService: LfRepoTreeNodeService;
+
   React.useEffect(() => {
     if (props.repoClient) {
       lfRepoTreeService = new LfRepoTreeNodeService(props.repoClient);
@@ -238,6 +239,7 @@ export function RepositoryBrowserModal(props: {
       initializeTreeAsync();
     }
   }, [props.repoClient]);
+
   const isNodeSelectable = (node: LfRepoTreeNode) => {
     if (node?.entryType == EntryType.Folder) {
       return true;
diff --git a/src/webparts/sendToLaserficheLoginComponent/components/SendToLaserficheLoginComponent.module.scss b/src/webparts/sendToLaserficheLoginComponent/components/SendToLaserficheLoginComponent.module.scss
index 34fb903..9c814d7 100644
--- a/src/webparts/sendToLaserficheLoginComponent/components/SendToLaserficheLoginComponent.module.scss
+++ b/src/webparts/sendToLaserficheLoginComponent/components/SendToLaserficheLoginComponent.module.scss
@@ -1,49 +1,31 @@
-.overlay {
-  position: relative;
-  display: block;
-  opacity: 0;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 50%;
-  height: 100%;
-  z-index: 1;
-  background-color: rgb(46, 44, 44);
-}
-.maindialog {
-  background-color: white;
-  padding: 30px;
-  transition: all 5s ease-in-out;
-  max-height: fit-content;
-}
-.text {
-  position: relative;
-  font-size: 16px;
-  color: black;
-  //z-index: 4;
-  text-align: center;
-}
-.button {
-  color: #178080;
-  margin-left: 200px;
+.signInHeaderText {
+  margin-left: 10px;
+  font-size: 22px;
   font-weight: bold;
-  writing-mode: tb;
+}
+
+.signInHeader {
+  border-bottom: 3px solid #ce7a14;
+  margin-block-end: 32px;
   display: flex;
-  flex-direction: column;
+  align-items: center;
 }
-.button1 {
-  //font-weight: bold;
-  color: black;
-  font-size: 15px;
+
+.laserficheLogo {
+  height: 30px;
+  width: 30px;
 }
-.button2 {
-  //font-weight: bold;
-  color: rgb(8, 8, 8);
-  font-size: 15px;
-  margin-right: 16px;
+
+.signInLabel {
+  text-align: center;
+  font-size: 16px;
 }
-.href {
-  font-weight: bold;
-  color: rgb(9, 34, 172);
+
+.loginButton {
+  text-align: center;
+}
+
+.signInFooter {
+  margin-top: 35px;
+  text-align: center;
 }
diff --git a/src/webparts/sendToLaserficheLoginComponent/components/SendToLaserficheLoginComponent.tsx b/src/webparts/sendToLaserficheLoginComponent/components/SendToLaserficheLoginComponent.tsx
index 3eaf85c..210c929 100644
--- a/src/webparts/sendToLaserficheLoginComponent/components/SendToLaserficheLoginComponent.tsx
+++ b/src/webparts/sendToLaserficheLoginComponent/components/SendToLaserficheLoginComponent.tsx
@@ -10,7 +10,8 @@ import { NgElement, WithProperties } from '@angular/elements';
 import { ISendToLaserficheLoginComponentProps } from './ISendToLaserficheLoginComponentProps';
 import { ISPDocumentData } from '../../../Utils/Types';
 import SaveToLaserficheCustomDialog from '../../../extensions/savetoLaserfiche/SaveToLaserficheDialog';
-import { getRegion } from '../../../Utils/Funcs';
+import { getEntryWebAccessUrl, getRegion } from '../../../Utils/Funcs';
+import styles from './SendToLaserficheLoginComponent.module.scss';
 
 declare global {
   // eslint-disable-next-line
@@ -22,6 +23,12 @@ declare global {
   }
 }
 
+const SIGN_IN = 'Sign In';
+const SIGN_OUT = 'Sign Out';
+const CANCEL = 'Cancel';
+const NOTE_THIS_PAGE_ONLY_NEEDED_WHEN_SAVING_TO_LASERFICHE =
+  '*Note: This page should only be needed if you are attempting to save a document to Laserfiche.';
+
 export default function SendToLaserficheLoginComponent(
   props: ISendToLaserficheLoginComponentProps
 ) {
@@ -37,52 +44,76 @@ export default function SendToLaserficheLoginComponent(
     window.localStorage.getItem(SP_LOCAL_STORAGE_KEY)
   ) as ISPDocumentData;
 
+  let webClientUrl: string | undefined;
+  if (loggedIn) {
+    webClientUrl = getEntryWebAccessUrl(
+      '1',
+      loginComponent.current?.account_endpoints.webClientUrl,
+      true
+    );
+  }
+  const loginText: JSX.Element | undefined = getLoginText();
+
   React.useEffect(() => {
-    SPComponentLoader.loadScript(
-      'https://cdn.jsdelivr.net/npm/zone.js@0.11.4/bundles/zone.umd.min.js'
-    ).then(() => {
-      SPComponentLoader.loadScript(
+    const setUpLoginComponent = async () => {
+      SPComponentLoader.loadCss(
+        'https://cdn.jsdelivr.net/npm/@laserfiche/lf-ui-components@14/cdn/indigo-pink.css'
+      );
+      SPComponentLoader.loadCss(
+        'https://cdn.jsdelivr.net/npm/@laserfiche/lf-ui-components@14/cdn/lf-ms-office-lite.css'
+      );
+      await SPComponentLoader.loadScript(
+        'https://cdn.jsdelivr.net/npm/zone.js@0.11.4/bundles/zone.umd.min.js'
+      );
+      await SPComponentLoader.loadScript(
         'https://cdn.jsdelivr.net/npm/@laserfiche/lf-ui-components@14/cdn/lf-ui-components.js'
-      ).then(() => {
-        SPComponentLoader.loadCss(
-          'https://cdn.jsdelivr.net/npm/@laserfiche/lf-ui-components@14/cdn/indigo-pink.css'
-        );
-        SPComponentLoader.loadCss(
-          'https://cdn.jsdelivr.net/npm/@laserfiche/lf-ui-components@14/cdn/lf-ms-office-lite.css'
-        );
-        loginComponent.current.addEventListener(
-          'loginCompleted',
-          loginCompleted
-        );
-        loginComponent.current.addEventListener(
-          'logoutCompleted',
-          logoutCompleted
-        );
+      );
+      loginComponent.current.addEventListener('loginCompleted', loginCompleted);
+      loginComponent.current.addEventListener(
+        'logoutCompleted',
+        logoutCompleted
+      );
+
+      const isLoggedIn: boolean =
+        loginComponent.current.state === LoginState.LoggedIn;
 
-        const loggedIn: boolean =
-          loginComponent.current.state === LoginState.LoggedIn;
+      setLoggedIn(isLoggedIn);
 
-        if (loggedIn && spFileMetadata) {
-          const dialog = new SaveToLaserficheCustomDialog(spFileMetadata);
-          
-          dialog.show().then(() => {
-            if (!dialog.successful) {
-              console.warn('Could not login successfully');
+      if (isLoggedIn && spFileMetadata) {
+        const dialog = new SaveToLaserficheCustomDialog(
+          spFileMetadata,
+          async (success) => {
+            if (success) {
+              Navigation.navigate(success.pathBack, true);
             }
-          });
+          }
+        );
+
+        await dialog.show();
+        if (!dialog.successful) {
+          console.warn('Could not login successfully');
         }
-      });
-    });
+      }
+    };
+
+    setUpLoginComponent();
   }, []);
 
-  const loginCompleted = () => {
+  const loginCompleted = async () => {
+    setLoggedIn(true);
     if (spFileMetadata) {
-      const dialog = new SaveToLaserficheCustomDialog(spFileMetadata);
-      dialog.show().then(() => {
-        if (!dialog.successful) {
-          console.warn('Could not login successfully');
+      const dialog = new SaveToLaserficheCustomDialog(
+        spFileMetadata,
+        async (success) => {
+          if (success) {
+            Navigation.navigate(success.pathBack, true);
+          }
         }
-      });
+      );
+      await dialog.show();
+      if (!dialog.successful) {
+        console.warn('Could not login successfully');
+      }
     }
   };
 
@@ -92,39 +123,79 @@ export default function SendToLaserficheLoginComponent(
       props.context.pageContext.web.absoluteUrl + props.laserficheRedirectUrl;
   };
 
-  function Redirect() {
+  function getLoginText() {
+    let loginText: JSX.Element | undefined;
+    if (!spFileMetadata) {
+      loginText = (
+        <>
+          <p>{NOTE_THIS_PAGE_ONLY_NEEDED_WHEN_SAVING_TO_LASERFICHE}</p>
+          {loggedIn ? (
+            <p>
+              {'Welcome to Laserfiche.'}
+              {webClientUrl && (
+                <>
+                  {' Go to '}
+                  <a href={webClientUrl} target='_blank' rel='noreferrer'>
+                    your Laserfiche repository
+                  </a>
+                </>
+              )}
+            </p>
+          ) : (
+            <p>
+              You are not signed in. You can sign in using the button below.
+            </p>
+          )}
+        </>
+      );
+    } else if (spFileMetadata?.fileUrl && !loggedIn) {
+      loginText = (
+        <>
+          <div>
+            {`You are not signed in. Please sign in to continue saving ${spFileMetadata?.fileName}.`}
+          </div>
+          <br />
+        </>
+      );
+    } else if (spFileMetadata?.fileUrl && loggedIn) {
+      loginText = (
+        <>
+          <div>
+            {`You are now signed in. Attempting to save ${spFileMetadata?.fileName}.`}
+          </div>
+          <br />
+        </>
+      );
+    } else {
+      <p>{NOTE_THIS_PAGE_ONLY_NEEDED_WHEN_SAVING_TO_LASERFICHE}</p>;
+    }
+    return loginText;
+  }
+
+  function redirect() {
     const spFileUrl = spFileMetadata.fileUrl;
     const fileNameWithExtension = spFileMetadata.fileName;
-    const spFileUrlWithoutFileName = spFileUrl.replace(fileNameWithExtension, '');
+    const spFileUrlWithoutFileName = spFileUrl.replace(
+      fileNameWithExtension,
+      ''
+    );
     const path = window.location.origin + spFileUrlWithoutFileName;
+    window.localStorage.removeItem(SP_LOCAL_STORAGE_KEY);
     Navigation.navigate(path, true);
   }
 
   return (
     <React.StrictMode>
-      <div
-        style={{ borderBottom: '3px solid #CE7A14', marginBlockEnd: '32px' }}
-      >
+      <div className={styles.signInHeader}>
         <img
           src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAMAAAAKE/YAAAAAUVBMVEXSXyj////HYzL/+/T/+Or/9d+yaUa9ZT2yaUj/9OG7Zj3SXybRYCj/+/b///3LYS/OYCvEZDS2aEL/89jAZTnMYS3/8dO7Zzusa02+ZTn/78wyF0DsAAABnUlEQVR4nO3ci26CMABGYQcoLRS5OTf2/g86R+KSLYUm2vxcPB8RTYzxkADRajkcAAAAAAAAAADYgbJcusCvqdtLnhfeJR/a96X7vOriarNJ/cUtHeiTnI7p26TsY+XRZ190sXSfVyA6X7rP6xZdzeweREeTGDt3IBIdTeCUR3Q0wQOxLNf3CWSr0ZvcPYiWIFqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVYhWIVqFaBWiVV4zeok/379m9BL2HO1Ckymlky0jRQc3Kqoou4f6YHzdaLX56PRzak757/JjfDS0dbOK6HM6Paf8P3st6lVE/9mAwPOpNcnqokOIJppoookmmmiiiSaaaKKJ3k30OfTFdU3RXZ+lT6qq6rbO+k4VXQ9fvT2OrH30Zo+3u/5rUI17NO3QmdPImIduxoyrUze0khEm5w6uqZNIRKNi91Hl5661dH+tdow6wts5J//BaJPRwH6IT1NxbDJ6vVc+nrXJaAAAAADALn0DBosqnCStFi4AAAAASUVORK5CYII='
-          height={'46px'}
-          width={'45px'}
-          style={{ marginTop: '8px', marginLeft: '8px' }}
+          className={styles.laserficheLogo}
         />
-        <span
-          id='remveHeading'
-          style={{ marginLeft: '10px', fontSize: '22px', fontWeight: 'bold' }}
-        >
-          {loggedIn ? 'Sign Out' : 'Sign In'}
-        </span>
+        <span className={styles.signInHeaderText}>Laserfiche</span>
       </div>
-      <p
-        id='remve'
-        style={{ textAlign: 'center', fontWeight: '600', fontSize: '20px' }}
-      >
-        {loggedIn ? 'You are signed in to Laserfiche' : 'Welcome to Laserfiche'}
-      </p>
-      <div style={{ textAlign: 'center' }}>
+
+      <div className={styles.signInLabel}>{loginText}</div>
+      <div className={styles.loginButton}>
         <lf-login
           redirect_uri={
             props.context.pageContext.web.absoluteUrl +
@@ -133,22 +204,16 @@ export default function SendToLaserficheLoginComponent(
           authorize_url_host_name={region}
           redirect_behavior='Replace'
           client_id={clientId}
-          sign_in_text='Sign in'
-          sign_out_text='Sign out'
+          sign_in_text={SIGN_IN}
+          sign_out_text={SIGN_OUT}
           ref={loginComponent}
         />
-      </div>
-      <div>
-        <div
-          /* className="lf-component-container lf-right-button" */ style={{
-            marginTop: '35px',
-            textAlign: 'center',
-          }}
-        >
-          <button style={{ fontWeight: '600' }} onClick={Redirect}>
-            Go Back
+        <br />
+        {spFileMetadata?.fileUrl && (
+          <button className='lf-button sec-button' onClick={redirect}>
+            {CANCEL}
           </button>
-        </div>
+        )}
       </div>
     </React.StrictMode>
   );