diff --git a/src/assets/styles/components/_web-ide.scss b/src/assets/styles/components/_web-ide.scss
index 5fd2b2148..6d8148dd0 100644
--- a/src/assets/styles/components/_web-ide.scss
+++ b/src/assets/styles/components/_web-ide.scss
@@ -5,7 +5,7 @@
     }
   }
 
-  color: white;
+  color: $color-white;
 
   .editor.current-file-path {
     border-bottom: 1px solid transparent;
@@ -13,7 +13,7 @@
 
   .default-window-option {
     span {
-      color: white;
+      color: $color-white;
     }
 
   }
@@ -50,7 +50,7 @@
   }
 
   .file-browser button > span {
-    color: white !important;
+    color: $color-white !important;
   }
 
   .file-browser .file.file-selected > span {
@@ -74,23 +74,25 @@
 
 
   .default-window-option span {
-      color: white !important;
+      color: $color-white !important;
   }
 
   .editor-window .default-window .default-window-container {
     background: $color-pureblack !important;
-    color: white;
+    color: $color-white;
   }
 
   .no-projects {
-    color: white;
+    color: $color-white;
 
     .docs-link {
       color: #ee81ee !important;
     }
   }
 
-  color: white;
+  color: $color-white;
+
+  color: rgb(105, 105, 105);
 
   color: rgb(105, 105, 105);
 
@@ -128,11 +130,11 @@
   }
 
   .editor-window .cancel-button:hover {
-    color: white;
+    color: $color-white;
   }
 
   .package-install-window {
-    background: white;
+    background: $color-white;
   }
 
   .editor.current-file-path {
@@ -177,6 +179,7 @@
     border-bottom: 1px solid darkgray !important;
   }
 
+  .revert-file[disabled],
   .save-code[disabled] {
     color: #c2c2c2 !important;
   }
@@ -228,7 +231,7 @@
   color: rgb(105, 105, 105);
 
   .package-install-window {
-    background: white;
+    background: $color-white;
   }
 
   .editor.current-file-path {
@@ -265,7 +268,7 @@
   }
 
   .editor-window button:hover {
-    color: white;
+    color: $color-white;
     //rgb(105,105,105);
   }
 
@@ -352,7 +355,7 @@
   .add-file-icon {
     background: transparent;
     border: none;
-    color: white;
+    color: $color-white;
     margin: 0;
     outline: none !important;
     padding: 0;
@@ -371,7 +374,7 @@
     padding: 20px;
 
     .file-menu {
-      color: white;
+      color: $color-white;
 
       display: flex;
       flex-direction: row;
@@ -502,7 +505,7 @@
     .editor-menu {
       align-items: baseline;
       border-bottom: 1px solid #2e2e2e;
-      color: white;
+      color: $color-white;
       display: flex;
       flex-direction: row;
       justify-content: left;
@@ -536,6 +539,7 @@
         }
       }
 
+      .revert-file,
       .save-code {
         background: transparent;
         border: none;
@@ -546,6 +550,7 @@
         padding: 0;
       }
 
+      .revert-file[disabled],
       .save-code[disabled] {
         color: #5e5e5e;
         cursor: default;
@@ -828,11 +833,11 @@
               width: 40px;
 
               i {
-                color: white;
+                color: $color-white;
 
 
                 &.not-searching {
-                  color: white; //rgba(0,255,0, 0.1);
+                  color: $color-white; //rgba(0,255,0, 0.1);
                 }
 
 
diff --git a/src/components/instance/functions/manage/index.js b/src/components/instance/functions/manage/index.js
index 00d394856..f36c4b0d8 100644
--- a/src/components/instance/functions/manage/index.js
+++ b/src/components/instance/functions/manage/index.js
@@ -14,6 +14,7 @@ import deployComponent from '../../../../functions/api/instance/deployComponent'
 import restartService from '../../../../functions/api/instance/restartService';
 
 import useInstanceAuth from '../../../../functions/state/instanceAuths';
+import useEditorCache from '../../../../functions/state/editorCache';
 
 import ApplicationsEditor from '../../../shared/webide';
 import CustomFunctionsEditor from './CustomFunctionsEditor';
@@ -45,19 +46,19 @@ function getDeployTargets(instanceList, instanceAuthList, thisCsId, auth) {
       return memo;
     }
 
-    const [ major, minor ] = deployTarget?.version.split('.') || []; 
+    const [ major, minor ] = deployTarget?.version.split('.') || [];
 
     // exclude < 4.2
 
     if (parseInt(major, 10) >= 4 && parseInt(minor, 10) >= 2) {
 
-      memo.push({ 
+      memo.push({
         isCurrentInstance: csId === thisCsId,
         auth,
         instance
       });
 
-    } 
+    }
 
     return memo;
 
@@ -69,17 +70,44 @@ function ManageIndex({ refreshCustomFunctions, loading }) {
 
   const { compute_stack_id } = useParams();
   const registration = useStoreState(instanceState, (s) => s.registration);
-  const { fileTree } = useStoreState(instanceState, (s) => s.custom_functions); 
+  const { fileTree } = useStoreState(instanceState, (s) => s.custom_functions);
   const auth = useStoreState(instanceState, (s) => s.auth);
   const url = useStoreState(instanceState, (s) => s.url);
   const [majorVersion, minorVersion] = (registration?.version || '').split('.') || [];
   const supportsApplicationsAPI = parseFloat(`${majorVersion}.${minorVersion}`) >= 4.2;
   const instances = useStoreState(appState, (s) => s.instances);
-  const [instanceAuths] = useInstanceAuth({});
+  const [ instanceAuths ] = useInstanceAuth({});
+  const [ editorCache, setEditorCache ] = useEditorCache({});
   const theme = useStoreState(appState, (s) => s.theme);
   const [ restartingInstance, setRestartingInstance ] = useState(false);
   const alert = useAlert();
 
+  function removeFileFromLocalStorage({ path }) {
+
+    const updatedCache = {...editorCache};
+    const fileKey = `${compute_stack_id}_${path}`;
+
+    if (fileKey in updatedCache) {
+      delete updatedCache[fileKey];
+    }
+
+    setEditorCache({
+      ...updatedCache
+    });
+  }
+
+  async function saveFileToLocalStorage(selectedFile) {
+    const { path, content } = selectedFile;
+
+    const fileKey = `${compute_stack_id}_${path}`;
+
+    setEditorCache({
+      ...editorCache,
+      [fileKey]: content
+    });
+
+  }
+
   async function restartWithLoadingState({ auth: instanceAuth, url: instanceUrl }) {
 
     setRestartingInstance(true);
@@ -96,9 +124,14 @@ function ManageIndex({ refreshCustomFunctions, loading }) {
   }
 
   // save file to instance
-  async function saveCodeToInstance(selectedFile, restartRequired) {
-
-    const filepathRelativeToProjectDir = selectedFile.path.split('/').slice(2).join('/'); 
+  async function saveFileToInstance(selectedFile, restartRequired) {
+
+    // handle cached situation
+    // - NOTE: this 'selectedFile' is not reactive.
+    // - remove cache entry for this file
+    // - update selectedFile with new content
+    // - set selectedFile.cached = false.
+    const filepathRelativeToProjectDir = selectedFile.path.split('/').slice(2).join('/');
     const payload = {
       auth,
       url,
@@ -113,11 +146,13 @@ function ManageIndex({ refreshCustomFunctions, loading }) {
       alert.error(message);
     }
 
-
     if (restartRequired) {
       await restartWithLoadingState({ auth, url });
     }
 
+    removeFileFromLocalStorage({ path: selectedFile.path });
+    selectedFile.cached = false;
+
     await refreshCustomFunctions();
 
   }
@@ -156,7 +191,25 @@ function ManageIndex({ refreshCustomFunctions, loading }) {
 
     const { path, project, name } = selectedFile;
     const newFile = getRelativeFilepath(path);
-    const { error, message } = await getComponentFile({
+    const fileCacheKey = `${compute_stack_id}_${path}`;
+    const cachedFile = editorCache[fileCacheKey];
+    const isCached = fileCacheKey in editorCache;
+
+    if (isCached) {
+
+      return {
+        cached: isCached,
+        content: cachedFile,
+        path,
+        project,
+        name
+      };
+
+    }
+
+    // TODO: set file content to local storage copy if it exists.
+    //
+    const { error, message: content } = await getComponentFile({
       auth,
       url,
       project,
@@ -165,19 +218,21 @@ function ManageIndex({ refreshCustomFunctions, loading }) {
 
     if (error) {
 
-      alert.error(message);
+      alert.error(content);
 
       return {
         content: '',
         path,
         project,
-        name
+        name,
+        cached: false
       };
 
     }
 
     return {
-      content: message,
+      cached: isCached,
+      content,
       path,
       project,
       name
@@ -423,14 +478,42 @@ function ManageIndex({ refreshCustomFunctions, loading }) {
 
   }
 
+  async function revertFileChanges(selectedFile) {
+
+    // ditch local storage version
+    removeFileFromLocalStorage({ path: selectedFile.path });
+
+    // get file
+    //
+    const { error, message} = await getComponentFile({
+      auth,
+      url,
+      project: selectedFile.project,
+      file: getRelativeFilepath(selectedFile.path)
+    });
+
+    removeFileFromLocalStorage({ path: selectedFile.path });
+
+    if (error) {
+      return alert.error(message);
+    }
+
+    await refreshCustomFunctions();
+
+    return message;
+
+  }
+
   return supportsApplicationsAPI ?
     <ApplicationsEditor
       theme={theme}
-      fileTree={fileTree} 
+      fileTree={fileTree}
       deployTargets={
         getDeployTargets(instances, instanceAuths, compute_stack_id, auth)
       }
-      onSave={saveCodeToInstance}
+      onRevertFile={revertFileChanges}
+      onFileChange={saveFileToLocalStorage}
+      onFileSave={saveFileToInstance}
       onUpdate={refreshCustomFunctions}
       onAddFile={createNewFile}
       onAddProject={createNewProject}
diff --git a/src/components/shared/webide/Editor.js b/src/components/shared/webide/Editor.js
index 0726ed944..8a673a2ab 100644
--- a/src/components/shared/webide/Editor.js
+++ b/src/components/shared/webide/Editor.js
@@ -19,7 +19,7 @@ const extensionToLanguageMap = {
 
 // TODO: update code using whatever monaco hook is available. onupdate.
 // don't allow save if there are errors.
-function Editor({ active, file, onChange, theme }) {
+function Editor({ active, file, onFileChange, theme }) {
 
   const [ language, setLanguage ] = useState('javascript');
   const [ editorTheme, setEditorTheme ] = useState('vs-dark');
@@ -44,15 +44,16 @@ function Editor({ active, file, onChange, theme }) {
   // eslint-disable-next-line no-unused-vars
   return <>
     <div className="editor current-file-path">
-      <i className="current-file-path-icon fas fa-caret-right" />
-      {filepathRelativeToComponentsDir}
+      path: <span>{filepathRelativeToComponentsDir} </span>
+      size: <span> {file.size} bytes </span>
+      last saved: <span> {file.mtime} </span>
     </div>
     <ReactMonacoEditor
       height="100%"
       language={language}
       value={file?.content || ''}
       theme={editorTheme}
-      onChange={ onChange }
+      onChange={onFileChange}
       options={{
         readOnly: file.readOnly,
         automaticLayout: true,
diff --git a/src/components/shared/webide/EditorMenu.js b/src/components/shared/webide/EditorMenu.js
index 3f09991d7..b09e3d946 100644
--- a/src/components/shared/webide/EditorMenu.js
+++ b/src/components/shared/webide/EditorMenu.js
@@ -3,7 +3,7 @@
 import React, { useState } from 'react';
 import cn from 'classnames';
 
-export function SaveButton({ disabled, onSave }) {
+export function SaveButton({ onClick, disabled }) {
 
   const [ loading, setLoading ] = useState(false);
   return (
@@ -21,7 +21,7 @@ export function SaveButton({ disabled, onSave }) {
         async () => {
 
           setLoading(true);
-          await onSave();
+          await onClick();
           setTimeout(() => {
             setLoading(false);
           }, 500);
@@ -50,10 +50,10 @@ export function RestartInstanceButton({ onClick, restarting }) {
   );
 }
 
-export function RestartOnSaveToggle({ restartAfterSave, onClick }) {
+export function RestartOnSaveToggle({ onClick, restartAfterSave }) {
 
   const title = restartAfterSave ?
-    'your instance will restart after saving application files' :
+    'restart instance after saving application files' :
     'your instance will not restart after saving application files';
 
   return (
@@ -74,7 +74,22 @@ export function RestartOnSaveToggle({ restartAfterSave, onClick }) {
   );
 }
 
-export default function EditorMenu({ SaveButton: SaveBtn, RestartInstanceButton: RestartInstanceBtn, RestartOnSaveToggle: RestartOnSaveTgl }) {
+export function RevertFileButton({ onClick, disabled }) {
+  return (
+    <button
+      type="button"
+      disabled={ disabled }
+      title="revert file to previously saved state"
+      className={
+        cn('revert-file fas fa-history', { disabled })
+      }
+      onClick={ onClick } />
+
+  )
+}
+
+// TODO: convert to mapping children to a list instead of explicitly doing all of this
+export default function EditorMenu({ SaveButton: SaveBtn, RestartInstanceButton: RestartInstanceBtn, RestartOnSaveToggle: RestartOnSaveTgl, RevertFileButton: RevertFileBtn }) {
   return (
     <ul className="editor-menu">
       <li>
@@ -86,6 +101,9 @@ export default function EditorMenu({ SaveButton: SaveBtn, RestartInstanceButton:
       <li>
         <RestartOnSaveTgl />
       </li>
+      <li>
+        <RevertFileBtn />
+      </li>
     </ul>
   )
 }
diff --git a/src/components/shared/webide/FileMenu.js b/src/components/shared/webide/FileMenu.js
index 17d75bae9..c84a03cf4 100644
--- a/src/components/shared/webide/FileMenu.js
+++ b/src/components/shared/webide/FileMenu.js
@@ -14,12 +14,12 @@ export function DeleteFolderButton({ onClick, disabled }) {
   )
 }
 
-export function AddProjectFolderButton({ onAddProjectFolder, disabled }) {
+export function AddProjectFolderButton({ onClick, disabled }) {
   return (
     <button
       type="button"
       disabled={ disabled }
-      onClick={ onAddProjectFolder }
+      onClick={ onClick }
       className="add-folder-icon fas fa-folder-plus"
       title="Add a new subdirectory to your project" />
   )
@@ -42,12 +42,12 @@ export function InstallPackageButton({ onClick, text="" }) {
 }
 
 
-export function AddProjectButton({ disabled=false, onAddProject, text="" }) {
+export function AddProjectButton({ onClick, disabled=false, text="" }) {
   return (
     <button
       type="button"
       disabled={ disabled }
-      onClick={ onAddProject }
+      onClick={ onClick }
       className="add-project-icon"
       title="Add a new project">
         <i className="fas fa-file-code" />
@@ -56,12 +56,12 @@ export function AddProjectButton({ disabled=false, onAddProject, text="" }) {
   );
 }
 
-export function AddFileButton({ disabled, onAddFile }) {
+export function AddFileButton({ onClick, disabled }) {
   return (
     <button
       type="button"
       disabled={ disabled }
-      onClick={ onAddFile }
+      onClick={ onClick }
       className="add-file-icon fas fa-plus"
       title="Add a new file" />
   )
diff --git a/src/components/shared/webide/index.js b/src/components/shared/webide/index.js
index 8a715abad..c382bc1c1 100644
--- a/src/components/shared/webide/index.js
+++ b/src/components/shared/webide/index.js
@@ -27,17 +27,20 @@ import FileMenu, {
 import EditorMenu, {
   SaveButton,
   RestartInstanceButton,
-  RestartOnSaveToggle
+  RestartOnSaveToggle,
+  RevertFileButton
 } from './EditorMenu';
 
 function WebIDE({
   theme,
   deployTargets, // FIXME: does this belong here?
   fileTree,
-  onSave,
+  onFileSave,
   onAddFile,
+  onRevertFile,
   onAddProjectFolder,
   onAddProject,
+  onFileChange,
   onDeleteFolder,
   onDeleteFile,
   onDeletePackage,
@@ -106,12 +109,12 @@ function WebIDE({
     updateActiveEditorWindow(EDITOR_WINDOWS.CODE_EDITOR_WINDOW, activeEditorWindow);
   }
 
-  // updates current in memory code
-  function updateInMemoryCodeFile(updatedCode) {
+  // updates current in-memory code
+  function updateFileInMemory(updatedCode) {
 
     const update = {
       ...selectedFile,
-      content: updatedCode
+      content: updatedCode,
     };
 
     setSelectedFile(update);
@@ -123,14 +126,14 @@ function WebIDE({
       <Col md="3" className="file-browser-outer-container">
         <FileMenu>
           <AddProjectButton
-            onAddProject={
+            onClick={
               () => {
                 updateActiveEditorWindow(EDITOR_WINDOWS.NAME_PROJECT_WINDOW, activeEditorWindow);
               }
             } />
           <AddProjectFolderButton
             disabled={ !canAddProjectFolder }
-            onAddProjectFolder={() => {
+            onClick={() => {
               updateActiveEditorWindow(EDITOR_WINDOWS.NAME_PROJECT_FOLDER_WINDOW, activeEditorWindow);
             }} />
           <DeleteFolderButton
@@ -145,7 +148,7 @@ function WebIDE({
               }
             } />
           <AddFileButton
-            onAddFile={() => {
+            onClick={() => {
               updateActiveEditorWindow(EDITOR_WINDOWS.NAME_FILE_WINDOW, activeEditorWindow);
             }}
             disabled={ !canAddFile } />
@@ -209,19 +212,19 @@ function WebIDE({
           onFileSelect={
             async (entry) => {
 
+              const unselectAction = !entry;
               setSelectedPackage(null);
 
-              // file unselected
-              if (!entry) {
+              if (unselectAction) {
 
                 setSelectedFile(null);
                 updateActiveEditorWindow(EDITOR_WINDOWS.DEFAULT_WINDOW, activeEditorWindow);
 
               } else {
 
-                // file selected
-                const { content } = await onFileSelect(entry);
-                setSelectedFile({ ...entry, content });
+                const fileMeta = await onFileSelect(entry);
+                const { content, cached } = fileMeta;
+                setSelectedFile({ ...entry, content, cached });
                 updateActiveEditorWindow(EDITOR_WINDOWS.CODE_EDITOR_WINDOW, activeEditorWindow);
 
               }
@@ -235,9 +238,9 @@ function WebIDE({
             () => (
               <SaveButton
                 disabled={ !(selectedFile && activeEditorWindow === EDITOR_WINDOWS.CODE_EDITOR_WINDOW) }
-                onSave={
-                  () => {
-                    onSave(selectedFile, restartAfterSave)
+                onClick={
+                  async () => {
+                    await onFileSave(selectedFile, restartAfterSave)
                   }
                 } />
             )
@@ -255,7 +258,7 @@ function WebIDE({
           }
           RestartOnSaveToggle={
             () => (
-              <RestartOnSaveToggle 
+              <RestartOnSaveToggle
                 restartAfterSave={restartAfterSave}
                 onClick={
                   () => {
@@ -264,16 +267,32 @@ function WebIDE({
                 } />
             )
           }
+          RevertFileButton={
+            () => (
+              <RevertFileButton
+                disabled={!selectedFile?.cached}
+                onClick={
+                  async () => {
+                    const updatedContent = await onRevertFile(selectedFile);
+                    setSelectedFile({
+                      ...selectedFile,
+                      content: updatedContent,
+                      cached: false
+                    });
+                  }
+                }  />
+            )
+          }
         />
         <EditorWindow>
           <DefaultWindow
             fileTree={fileTree}
-            active={ activeEditorWindow === EDITOR_WINDOWS.DEFAULT_WINDOW } 
+            active={ activeEditorWindow === EDITOR_WINDOWS.DEFAULT_WINDOW }
             AddProjectButton={
               () => (
                 <AddProjectButton
                   text="Create a new project"
-                  onAddProject={
+                  onClick={
                     () => {
                       updateActiveEditorWindow(EDITOR_WINDOWS.NAME_PROJECT_WINDOW, activeEditorWindow);
                     }
@@ -283,7 +302,7 @@ function WebIDE({
             InstallPackageButton={
               () => (
                 <InstallPackageButton
-                  text="Install or deploy a remote package" 
+                  text="Install or deploy a remote package"
                   onClick={
                     () => {
                       setSelectedPackage(null);
@@ -312,12 +331,12 @@ function WebIDE({
             <PackageInstallWindow
               selectedPackage={ selectedPackage }
               onConfirm={ installPackage }
-              onCancel={ toDefaultWindow } 
+              onCancel={ toDefaultWindow }
               deployTargets={ deployTargets }
             />
           }
           <DeletePackageWindow
-            active={ activeEditorWindow === EDITOR_WINDOWS.DELETE_PACKAGE_WINDOW } 
+            active={ activeEditorWindow === EDITOR_WINDOWS.DELETE_PACKAGE_WINDOW }
             selectedPackage={ selectedPackage }
             onConfirm={
               async () => {
@@ -340,7 +359,7 @@ function WebIDE({
 
           />
           <DeleteFolderWindow
-            active={ activeEditorWindow === EDITOR_WINDOWS.DELETE_FOLDER_WINDOW } 
+            active={ activeEditorWindow === EDITOR_WINDOWS.DELETE_FOLDER_WINDOW }
             selectedFolder={ selectedFolder }
             onConfirm={
               async () => {
@@ -362,7 +381,7 @@ function WebIDE({
             }
           />
           <DeleteFileWindow
-            active={ activeEditorWindow === EDITOR_WINDOWS.DELETE_FILE_WINDOW } 
+            active={ activeEditorWindow === EDITOR_WINDOWS.DELETE_FILE_WINDOW }
             selectedFile={ selectedFile }
             onConfirm={
               () => {
@@ -382,7 +401,22 @@ function WebIDE({
             theme={theme}
             active={ activeEditorWindow === EDITOR_WINDOWS.CODE_EDITOR_WINDOW }
             file={ selectedFile }
-            onChange={ updateInMemoryCodeFile } />
+            onFileChange={
+              async (fileContent) => {
+                updateFileInMemory(fileContent);
+
+                await onFileChange({
+                  path: selectedFile.path,
+                  content: fileContent
+                });
+
+                setSelectedFile({
+                  ...selectedFile,
+                  content: fileContent,
+                  cached: true
+                });
+              }
+            } />
         </EditorWindow>
       </Col>
     </Row>
diff --git a/src/functions/state/editorCache.js b/src/functions/state/editorCache.js
new file mode 100644
index 000000000..133d74be0
--- /dev/null
+++ b/src/functions/state/editorCache.js
@@ -0,0 +1,3 @@
+import createPersistedState from 'use-persisted-state';
+
+export default createPersistedState('editorCache');