Merge branch 'master' into secondpropertiesmenu-emily

151 files changed, 9627 insertions, 4919 deletions

diff --git a/.vscode/launch.json b/.vscode/launch.json
index ce9f50f67..9ba624af9 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -17,6 +17,16 @@
         {
             "type": "chrome",
             "request": "launch",
+            "name": "Launch Brave against localhost",
+            "sourceMaps": true,
+            "url": "http://localhost:1050/home",
+            "runtimeExecutable": "/Applications/Brave Browser.app/Contents/MacOS/Brave Browser",
+            "webRoot": "${workspaceFolder}",
+            "runtimeArgs": ["--experimental-modules"]
+        },
+        {
+            "type": "chrome",
+            "request": "launch",
             "name": "Launch Chromium against localhost",
             "sourceMaps": true,
             "breakOnLoad": true,
diff --git a/deploy/index.html b/deploy/index.html
index f8003f126..c8ad2a8d4 100644
--- a/deploy/index.html
+++ b/deploy/index.html
@@ -5,7 +5,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link
-        href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
+        href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
         rel="stylesheet">
     <link rel="shortcut icon" type="image/jpg" href="./assets/favicon.png" />
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
@@ -67,8 +67,9 @@
         }
 
         .dash-animation-container {
-            width: 10vw;
-            height: 10vw;
+            width: fit-content;
+            height: fit-content;
+            padding: 20px;
             display: flex;
             align-items: center;
             justify-content: center;
diff --git a/deploy/loader.css b/deploy/loader.css
index 4be0cc98c..4d5e04d71 100644
--- a/deploy/loader.css
+++ b/deploy/loader.css
@@ -36,8 +36,9 @@
 }
 
 .dash-animation-container {
-    width: 10vw;
-    height: 10vw;
+    width: fit-content;
+    height: fit-content;
+    padding: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/package-lock.json b/package-lock.json
index 7d3c2ebce..d89dc2f65 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,21 +4,94 @@
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {
-        "@babel/code-frame": {
-            "version": "7.18.6",
-            "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
-            "integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==",
+        "@ampproject/remapping": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
+            "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
             "requires": {
-                "@babel/highlight": "^7.18.6"
+                "@jridgewell/gen-mapping": "^0.3.0",
+                "@jridgewell/trace-mapping": "^0.3.9"
+            }
+        },
+        "@babel/code-frame": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.5.tgz",
+            "integrity": "sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ==",
+            "requires": {
+                "@babel/highlight": "^7.22.5"
+            }
+        },
+        "@babel/compat-data": {
+            "version": "7.22.9",
+            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.9.tgz",
+            "integrity": "sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ=="
+        },
+        "@babel/core": {
+            "version": "7.22.9",
+            "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.9.tgz",
+            "integrity": "sha512-G2EgeufBcYw27U4hhoIwFcgc1XU7TlXJ3mv04oOv1WCuo900U/anZSPzEqNjwdjgffkk2Gs0AN0dW1CKVLcG7w==",
+            "requires": {
+                "@ampproject/remapping": "^2.2.0",
+                "@babel/code-frame": "^7.22.5",
+                "@babel/generator": "^7.22.9",
+                "@babel/helper-compilation-targets": "^7.22.9",
+                "@babel/helper-module-transforms": "^7.22.9",
+                "@babel/helpers": "^7.22.6",
+                "@babel/parser": "^7.22.7",
+                "@babel/template": "^7.22.5",
+                "@babel/traverse": "^7.22.8",
+                "@babel/types": "^7.22.5",
+                "convert-source-map": "^1.7.0",
+                "debug": "^4.1.0",
+                "gensync": "^1.0.0-beta.2",
+                "json5": "^2.2.2",
+                "semver": "^6.3.1"
+            },
+            "dependencies": {
+                "@babel/generator": {
+                    "version": "7.22.9",
+                    "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.9.tgz",
+                    "integrity": "sha512-KtLMbmicyuK2Ak/FTCJVbDnkN1SlT8/kceFTiuDiiRUUSMnHMidxSCdG4ndkTOHHpoomWe/4xkvHkEOncwjYIw==",
+                    "requires": {
+                        "@babel/types": "^7.22.5",
+                        "@jridgewell/gen-mapping": "^0.3.2",
+                        "@jridgewell/trace-mapping": "^0.3.17",
+                        "jsesc": "^2.5.1"
+                    }
+                },
+                "debug": {
+                    "version": "4.3.4",
+                    "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+                    "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+                    "requires": {
+                        "ms": "2.1.2"
+                    }
+                },
+                "json5": {
+                    "version": "2.2.3",
+                    "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+                    "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="
+                },
+                "ms": {
+                    "version": "2.1.2",
+                    "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+                    "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+                },
+                "semver": {
+                    "version": "6.3.1",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+                    "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
+                }
             }
         },
         "@babel/generator": {
-            "version": "7.20.14",
-            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.20.14.tgz",
-            "integrity": "sha512-AEmuXHdcD3A52HHXxaTmYlb8q/xMEhoRP67B3T4Oq7lbmSoqroMZzjnGj3+i1io3pdnF8iBYVu4Ilj+c4hBxYg==",
+            "version": "7.22.7",
+            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.7.tgz",
+            "integrity": "sha512-p+jPjMG+SI8yvIaxGgeW24u7q9+5+TGpZh8/CuB7RhBKd7RCy8FayNEFNNKrNK/eUcY/4ExQqLmyrvBXKsIcwQ==",
             "requires": {
-                "@babel/types": "^7.20.7",
+                "@babel/types": "^7.22.5",
                 "@jridgewell/gen-mapping": "^0.3.2",
+                "@jridgewell/trace-mapping": "^0.3.17",
                 "jsesc": "^2.5.1"
             }
         },
@@ -30,34 +103,195 @@
                 "@babel/types": "^7.18.6"
             }
         },
+        "@babel/helper-builder-binary-assignment-operator-visitor": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.5.tgz",
+            "integrity": "sha512-m1EP3lVOPptR+2DwD125gziZNcmoNSHGmJROKoy87loWUQyJaVXDgpmruWqDARZSmtYQ+Dl25okU8+qhVzuykw==",
+            "requires": {
+                "@babel/types": "^7.22.5"
+            }
+        },
+        "@babel/helper-compilation-targets": {
+            "version": "7.22.9",
+            "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.9.tgz",
+            "integrity": "sha512-7qYrNM6HjpnPHJbopxmb8hSPoZ0gsX8IvUS32JGVoy+pU9e5N0nLr1VjJoR6kA4d9dmGLxNYOjeB8sUDal2WMw==",
+            "requires": {
+                "@babel/compat-data": "^7.22.9",
+                "@babel/helper-validator-option": "^7.22.5",
+                "browserslist": "^4.21.9",
+                "lru-cache": "^5.1.1",
+                "semver": "^6.3.1"
+            },
+            "dependencies": {
+                "lru-cache": {
+                    "version": "5.1.1",
+                    "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+                    "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+                    "requires": {
+                        "yallist": "^3.0.2"
+                    }
+                },
+                "semver": {
+                    "version": "6.3.1",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+                    "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
+                },
+                "yallist": {
+                    "version": "3.1.1",
+                    "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+                    "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
+                }
+            }
+        },
+        "@babel/helper-create-class-features-plugin": {
+            "version": "7.22.9",
+            "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.9.tgz",
+            "integrity": "sha512-Pwyi89uO4YrGKxL/eNJ8lfEH55DnRloGPOseaA8NFNL6jAUnn+KccaISiFazCj5IolPPDjGSdzQzXVzODVRqUQ==",
+            "requires": {
+                "@babel/helper-annotate-as-pure": "^7.22.5",
+                "@babel/helper-environment-visitor": "^7.22.5",
+                "@babel/helper-function-name": "^7.22.5",
+                "@babel/helper-member-expression-to-functions": "^7.22.5",
+                "@babel/helper-optimise-call-expression": "^7.22.5",
+                "@babel/helper-replace-supers": "^7.22.9",
+                "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+                "@babel/helper-split-export-declaration": "^7.22.6",
+                "semver": "^6.3.1"
+            },
+            "dependencies": {
+                "@babel/helper-annotate-as-pure": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
+                    "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
+                    "requires": {
+                        "@babel/types": "^7.22.5"
+                    }
+                },
+                "semver": {
+                    "version": "6.3.1",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+                    "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
+                }
+            }
+        },
+        "@babel/helper-create-regexp-features-plugin": {
+            "version": "7.22.9",
+            "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.9.tgz",
+            "integrity": "sha512-+svjVa/tFwsNSG4NEy1h85+HQ5imbT92Q5/bgtS7P0GTQlP8WuFdqsiABmQouhiFGyV66oGxZFpeYHza1rNsKw==",
+            "requires": {
+                "@babel/helper-annotate-as-pure": "^7.22.5",
+                "regexpu-core": "^5.3.1",
+                "semver": "^6.3.1"
+            },
+            "dependencies": {
+                "@babel/helper-annotate-as-pure": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
+                    "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
+                    "requires": {
+                        "@babel/types": "^7.22.5"
+                    }
+                },
+                "semver": {
+                    "version": "6.3.1",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+                    "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
+                }
+            }
+        },
+        "@babel/helper-define-polyfill-provider": {
+            "version": "0.4.1",
+            "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.1.tgz",
+            "integrity": "sha512-kX4oXixDxG197yhX+J3Wp+NpL2wuCFjWQAr6yX2jtCnflK9ulMI51ULFGIrWiX1jGfvAxdHp+XQCcP2bZGPs9A==",
+            "requires": {
+                "@babel/helper-compilation-targets": "^7.22.6",
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "debug": "^4.1.1",
+                "lodash.debounce": "^4.0.8",
+                "resolve": "^1.14.2"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                },
+                "debug": {
+                    "version": "4.3.4",
+                    "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+                    "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+                    "requires": {
+                        "ms": "2.1.2"
+                    }
+                },
+                "lodash.debounce": {
+                    "version": "4.0.8",
+                    "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+                    "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+                },
+                "ms": {
+                    "version": "2.1.2",
+                    "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+                    "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+                }
+            }
+        },
         "@babel/helper-environment-visitor": {
-            "version": "7.18.9",
-            "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz",
-            "integrity": "sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg=="
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
+            "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q=="
         },
         "@babel/helper-function-name": {
-            "version": "7.19.0",
-            "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz",
-            "integrity": "sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
+            "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
             "requires": {
-                "@babel/template": "^7.18.10",
-                "@babel/types": "^7.19.0"
+                "@babel/template": "^7.22.5",
+                "@babel/types": "^7.22.5"
             }
         },
         "@babel/helper-hoist-variables": {
-            "version": "7.18.6",
-            "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz",
-            "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
+            "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
             "requires": {
-                "@babel/types": "^7.18.6"
+                "@babel/types": "^7.22.5"
+            }
+        },
+        "@babel/helper-member-expression-to-functions": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.22.5.tgz",
+            "integrity": "sha512-aBiH1NKMG0H2cGZqspNvsaBe6wNGjbJjuLy29aU+eDZjSbbN53BaxlpB02xm9v34pLTZ1nIQPFYn2qMZoa5BQQ==",
+            "requires": {
+                "@babel/types": "^7.22.5"
             }
         },
         "@babel/helper-module-imports": {
-            "version": "7.18.6",
-            "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz",
-            "integrity": "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz",
+            "integrity": "sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==",
             "requires": {
-                "@babel/types": "^7.18.6"
+                "@babel/types": "^7.22.5"
+            }
+        },
+        "@babel/helper-module-transforms": {
+            "version": "7.22.9",
+            "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.9.tgz",
+            "integrity": "sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==",
+            "requires": {
+                "@babel/helper-environment-visitor": "^7.22.5",
+                "@babel/helper-module-imports": "^7.22.5",
+                "@babel/helper-simple-access": "^7.22.5",
+                "@babel/helper-split-export-declaration": "^7.22.6",
+                "@babel/helper-validator-identifier": "^7.22.5"
+            }
+        },
+        "@babel/helper-optimise-call-expression": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz",
+            "integrity": "sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==",
+            "requires": {
+                "@babel/types": "^7.22.5"
             }
         },
         "@babel/helper-plugin-utils": {
@@ -65,38 +299,277 @@
             "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz",
             "integrity": "sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ=="
         },
+        "@babel/helper-remap-async-to-generator": {
+            "version": "7.22.9",
+            "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.9.tgz",
+            "integrity": "sha512-8WWC4oR4Px+tr+Fp0X3RHDVfINGpF3ad1HIbrc8A77epiR6eMMc6jsgozkzT2uDiOOdoS9cLIQ+XD2XvI2WSmQ==",
+            "requires": {
+                "@babel/helper-annotate-as-pure": "^7.22.5",
+                "@babel/helper-environment-visitor": "^7.22.5",
+                "@babel/helper-wrap-function": "^7.22.9"
+            },
+            "dependencies": {
+                "@babel/helper-annotate-as-pure": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
+                    "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
+                    "requires": {
+                        "@babel/types": "^7.22.5"
+                    }
+                }
+            }
+        },
+        "@babel/helper-replace-supers": {
+            "version": "7.22.9",
+            "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.22.9.tgz",
+            "integrity": "sha512-LJIKvvpgPOPUThdYqcX6IXRuIcTkcAub0IaDRGCZH0p5GPUp7PhRU9QVgFcDDd51BaPkk77ZjqFwh6DZTAEmGg==",
+            "requires": {
+                "@babel/helper-environment-visitor": "^7.22.5",
+                "@babel/helper-member-expression-to-functions": "^7.22.5",
+                "@babel/helper-optimise-call-expression": "^7.22.5"
+            }
+        },
+        "@babel/helper-simple-access": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
+            "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
+            "requires": {
+                "@babel/types": "^7.22.5"
+            }
+        },
+        "@babel/helper-skip-transparent-expression-wrappers": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz",
+            "integrity": "sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==",
+            "requires": {
+                "@babel/types": "^7.22.5"
+            }
+        },
         "@babel/helper-split-export-declaration": {
-            "version": "7.18.6",
-            "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz",
-            "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==",
+            "version": "7.22.6",
+            "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
+            "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
             "requires": {
-                "@babel/types": "^7.18.6"
+                "@babel/types": "^7.22.5"
             }
         },
         "@babel/helper-string-parser": {
-            "version": "7.19.4",
-            "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz",
-            "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw=="
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
+            "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw=="
         },
         "@babel/helper-validator-identifier": {
-            "version": "7.19.1",
-            "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
-            "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w=="
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
+            "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ=="
+        },
+        "@babel/helper-validator-option": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz",
+            "integrity": "sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw=="
+        },
+        "@babel/helper-wrap-function": {
+            "version": "7.22.9",
+            "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.22.9.tgz",
+            "integrity": "sha512-sZ+QzfauuUEfxSEjKFmi3qDSHgLsTPK/pEpoD/qonZKOtTPTLbf59oabPQ4rKekt9lFcj/hTZaOhWwFYrgjk+Q==",
+            "requires": {
+                "@babel/helper-function-name": "^7.22.5",
+                "@babel/template": "^7.22.5",
+                "@babel/types": "^7.22.5"
+            }
+        },
+        "@babel/helpers": {
+            "version": "7.22.6",
+            "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.22.6.tgz",
+            "integrity": "sha512-YjDs6y/fVOYFV8hAf1rxd1QvR9wJe1pDBZ2AREKq/SDayfPzgk0PBnVuTCE5X1acEpMMNOVUqoe+OwiZGJ+OaA==",
+            "requires": {
+                "@babel/template": "^7.22.5",
+                "@babel/traverse": "^7.22.6",
+                "@babel/types": "^7.22.5"
+            }
         },
         "@babel/highlight": {
-            "version": "7.18.6",
-            "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz",
-            "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.5.tgz",
+            "integrity": "sha512-BSKlD1hgnedS5XRnGOljZawtag7H1yPfQp0tdNJCHoH6AZ+Pcm9VvkrK59/Yy593Ypg0zMxH2BxD1VPYUQ7UIw==",
             "requires": {
-                "@babel/helper-validator-identifier": "^7.18.6",
+                "@babel/helper-validator-identifier": "^7.22.5",
                 "chalk": "^2.0.0",
                 "js-tokens": "^4.0.0"
             }
         },
         "@babel/parser": {
-            "version": "7.20.15",
-            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.15.tgz",
-            "integrity": "sha512-DI4a1oZuf8wC+oAJA9RW6ga3Zbe8RZFt7kD9i4qAspz3I/yHet1VvC3DiSy/fsUvv5pvJuNPh0LPOdCcqinDPg=="
+            "version": "7.22.7",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.7.tgz",
+            "integrity": "sha512-7NF8pOkHP5o2vpmGgNGcfAeCvOYhGLyA3Z4eBQkT1RJlWu47n63bCs93QfJ2hIAFCil7L5P2IWhs1oToVgrL0Q=="
+        },
+        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.22.5.tgz",
+            "integrity": "sha512-NP1M5Rf+u2Gw9qfSO4ihjcTGW5zXTi36ITLd4/EoAcEhIZ0yjMqmftDNl3QC19CX7olhrjpyU454g/2W7X0jvQ==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.22.5.tgz",
+            "integrity": "sha512-31Bb65aZaUwqCbWMnZPduIZxCBngHFlzyN6Dq6KAJjtx+lx6ohKHubc61OomYi7XwVD4Ol0XCVz4h+pYFR048g==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+                "@babel/plugin-transform-optional-chaining": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-external-helpers": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-external-helpers/-/plugin-external-helpers-7.22.5.tgz",
+            "integrity": "sha512-ngnNEWxmykPk82mH4ajZT0qTztr3Je6hrMuKAslZVM8G1YZTENJSYwrIGtt6KOtznug3exmAtF4so/nPqJuA4A==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-proposal-class-properties": {
+            "version": "7.18.6",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz",
+            "integrity": "sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==",
+            "requires": {
+                "@babel/helper-create-class-features-plugin": "^7.18.6",
+                "@babel/helper-plugin-utils": "^7.18.6"
+            }
+        },
+        "@babel/plugin-proposal-object-rest-spread": {
+            "version": "7.20.7",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz",
+            "integrity": "sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==",
+            "requires": {
+                "@babel/compat-data": "^7.20.5",
+                "@babel/helper-compilation-targets": "^7.20.7",
+                "@babel/helper-plugin-utils": "^7.20.2",
+                "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+                "@babel/plugin-transform-parameters": "^7.20.7"
+            }
+        },
+        "@babel/plugin-proposal-private-property-in-object": {
+            "version": "7.21.0-placeholder-for-preset-env.2",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+            "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w=="
+        },
+        "@babel/plugin-proposal-unicode-property-regex": {
+            "version": "7.18.6",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz",
+            "integrity": "sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==",
+            "requires": {
+                "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+                "@babel/helper-plugin-utils": "^7.18.6"
+            }
+        },
+        "@babel/plugin-syntax-async-generators": {
+            "version": "7.8.4",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
+            "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.8.0"
+            }
+        },
+        "@babel/plugin-syntax-class-properties": {
+            "version": "7.12.13",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
+            "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.12.13"
+            }
+        },
+        "@babel/plugin-syntax-class-static-block": {
+            "version": "7.14.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
+            "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.14.5"
+            }
+        },
+        "@babel/plugin-syntax-dynamic-import": {
+            "version": "7.8.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
+            "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.8.0"
+            }
+        },
+        "@babel/plugin-syntax-export-namespace-from": {
+            "version": "7.8.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
+            "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.8.3"
+            }
+        },
+        "@babel/plugin-syntax-import-assertions": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.22.5.tgz",
+            "integrity": "sha512-rdV97N7KqsRzeNGoWUOK6yUsWarLjE5Su/Snk9IYPU9CwkWHs4t+rTGOvffTR8XGkJMTAdLfO0xVnXm8wugIJg==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-syntax-import-attributes": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.22.5.tgz",
+            "integrity": "sha512-KwvoWDeNKPETmozyFE0P2rOLqh39EoQHNjqizrI5B8Vt0ZNS7M56s7dAiAqbYfiAYOuIzIh96z3iR2ktgu3tEg==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-syntax-import-meta": {
+            "version": "7.10.4",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
+            "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.10.4"
+            }
+        },
+        "@babel/plugin-syntax-json-strings": {
+            "version": "7.8.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
+            "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.8.0"
+            }
         },
         "@babel/plugin-syntax-jsx": {
             "version": "7.18.6",
@@ -106,6 +579,1153 @@
                 "@babel/helper-plugin-utils": "^7.18.6"
             }
         },
+        "@babel/plugin-syntax-logical-assignment-operators": {
+            "version": "7.10.4",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
+            "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.10.4"
+            }
+        },
+        "@babel/plugin-syntax-nullish-coalescing-operator": {
+            "version": "7.8.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
+            "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.8.0"
+            }
+        },
+        "@babel/plugin-syntax-numeric-separator": {
+            "version": "7.10.4",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
+            "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.10.4"
+            }
+        },
+        "@babel/plugin-syntax-object-rest-spread": {
+            "version": "7.8.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
+            "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.8.0"
+            }
+        },
+        "@babel/plugin-syntax-optional-catch-binding": {
+            "version": "7.8.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
+            "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.8.0"
+            }
+        },
+        "@babel/plugin-syntax-optional-chaining": {
+            "version": "7.8.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
+            "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.8.0"
+            }
+        },
+        "@babel/plugin-syntax-private-property-in-object": {
+            "version": "7.14.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
+            "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.14.5"
+            }
+        },
+        "@babel/plugin-syntax-top-level-await": {
+            "version": "7.14.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
+            "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.14.5"
+            }
+        },
+        "@babel/plugin-syntax-typescript": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.22.5.tgz",
+            "integrity": "sha512-1mS2o03i7t1c6VzH6fdQ3OA8tcEIxwG18zIPRp+UY1Ihv6W+XZzBCVxExF9upussPXJ0xE9XRHwMoNs1ep/nRQ==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-syntax-unicode-sets-regex": {
+            "version": "7.18.6",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
+            "integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
+            "requires": {
+                "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+                "@babel/helper-plugin-utils": "^7.18.6"
+            }
+        },
+        "@babel/plugin-transform-arrow-functions": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.22.5.tgz",
+            "integrity": "sha512-26lTNXoVRdAnsaDXPpvCNUq+OVWEVC6bx7Vvz9rC53F2bagUWW4u4ii2+h8Fejfh7RYqPxn+libeFBBck9muEw==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-async-generator-functions": {
+            "version": "7.22.7",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.22.7.tgz",
+            "integrity": "sha512-7HmE7pk/Fmke45TODvxvkxRMV9RazV+ZZzhOL9AG8G29TLrr3jkjwF7uJfxZ30EoXpO+LJkq4oA8NjO2DTnEDg==",
+            "requires": {
+                "@babel/helper-environment-visitor": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-remap-async-to-generator": "^7.22.5",
+                "@babel/plugin-syntax-async-generators": "^7.8.4"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-async-to-generator": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.22.5.tgz",
+            "integrity": "sha512-b1A8D8ZzE/VhNDoV1MSJTnpKkCG5bJo+19R4o4oy03zM7ws8yEMK755j61Dc3EyvdysbqH5BOOTquJ7ZX9C6vQ==",
+            "requires": {
+                "@babel/helper-module-imports": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-remap-async-to-generator": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-block-scoped-functions": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.22.5.tgz",
+            "integrity": "sha512-tdXZ2UdknEKQWKJP1KMNmuF5Lx3MymtMN/pvA+p/VEkhK8jVcQ1fzSy8KM9qRYhAf2/lV33hoMPKI/xaI9sADA==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-block-scoping": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.22.5.tgz",
+            "integrity": "sha512-EcACl1i5fSQ6bt+YGuU/XGCeZKStLmyVGytWkpyhCLeQVA0eu6Wtiw92V+I1T/hnezUv7j74dA/Ro69gWcU+hg==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-class-properties": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.22.5.tgz",
+            "integrity": "sha512-nDkQ0NfkOhPTq8YCLiWNxp1+f9fCobEjCb0n8WdbNUBc4IB5V7P1QnX9IjpSoquKrXF5SKojHleVNs2vGeHCHQ==",
+            "requires": {
+                "@babel/helper-create-class-features-plugin": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-class-static-block": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.22.5.tgz",
+            "integrity": "sha512-SPToJ5eYZLxlnp1UzdARpOGeC2GbHvr9d/UV0EukuVx8atktg194oe+C5BqQ8jRTkgLRVOPYeXRSBg1IlMoVRA==",
+            "requires": {
+                "@babel/helper-create-class-features-plugin": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-class-static-block": "^7.14.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-classes": {
+            "version": "7.22.6",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.22.6.tgz",
+            "integrity": "sha512-58EgM6nuPNG6Py4Z3zSuu0xWu2VfodiMi72Jt5Kj2FECmaYk1RrTXA45z6KBFsu9tRgwQDwIiY4FXTt+YsSFAQ==",
+            "requires": {
+                "@babel/helper-annotate-as-pure": "^7.22.5",
+                "@babel/helper-compilation-targets": "^7.22.6",
+                "@babel/helper-environment-visitor": "^7.22.5",
+                "@babel/helper-function-name": "^7.22.5",
+                "@babel/helper-optimise-call-expression": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-replace-supers": "^7.22.5",
+                "@babel/helper-split-export-declaration": "^7.22.6",
+                "globals": "^11.1.0"
+            },
+            "dependencies": {
+                "@babel/helper-annotate-as-pure": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
+                    "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
+                    "requires": {
+                        "@babel/types": "^7.22.5"
+                    }
+                },
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-computed-properties": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.22.5.tgz",
+            "integrity": "sha512-4GHWBgRf0krxPX+AaPtgBAlTgTeZmqDynokHOX7aqqAB4tHs3U2Y02zH6ETFdLZGcg9UQSD1WCmkVrE9ErHeOg==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/template": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-destructuring": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.22.5.tgz",
+            "integrity": "sha512-GfqcFuGW8vnEqTUBM7UtPd5A4q797LTvvwKxXTgRsFjoqaJiEg9deBG6kWeQYkVEL569NpnmpC0Pkr/8BLKGnQ==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-dotall-regex": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.22.5.tgz",
+            "integrity": "sha512-5/Yk9QxCQCl+sOIB1WelKnVRxTJDSAIxtJLL2/pqL14ZVlbH0fUQUZa/T5/UnQtBNgghR7mfB8ERBKyKPCi7Vw==",
+            "requires": {
+                "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-duplicate-keys": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.22.5.tgz",
+            "integrity": "sha512-dEnYD+9BBgld5VBXHnF/DbYGp3fqGMsyxKbtD1mDyIA7AkTSpKXFhCVuj/oQVOoALfBs77DudA0BE4d5mcpmqw==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-dynamic-import": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.22.5.tgz",
+            "integrity": "sha512-0MC3ppTB1AMxd8fXjSrbPa7LT9hrImt+/fcj+Pg5YMD7UQyWp/02+JWpdnCymmsXwIx5Z+sYn1bwCn4ZJNvhqQ==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-dynamic-import": "^7.8.3"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-exponentiation-operator": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.22.5.tgz",
+            "integrity": "sha512-vIpJFNM/FjZ4rh1myqIya9jXwrwwgFRHPjT3DkUA9ZLHuzox8jiXkOLvwm1H+PQIP3CqfC++WPKeuDi0Sjdj1g==",
+            "requires": {
+                "@babel/helper-builder-binary-assignment-operator-visitor": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-export-namespace-from": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.22.5.tgz",
+            "integrity": "sha512-X4hhm7FRnPgd4nDA4b/5V280xCx6oL7Oob5+9qVS5C13Zq4bh1qq7LU0GgRU6b5dBWBvhGaXYVB4AcN6+ol6vg==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-for-of": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.22.5.tgz",
+            "integrity": "sha512-3kxQjX1dU9uudwSshyLeEipvrLjBCVthCgeTp6CzE/9JYrlAIaeekVxRpCWsDDfYTfRZRoCeZatCQvwo+wvK8A==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-function-name": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.22.5.tgz",
+            "integrity": "sha512-UIzQNMS0p0HHiQm3oelztj+ECwFnj+ZRV4KnguvlsD2of1whUeM6o7wGNj6oLwcDoAXQ8gEqfgC24D+VdIcevg==",
+            "requires": {
+                "@babel/helper-compilation-targets": "^7.22.5",
+                "@babel/helper-function-name": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-json-strings": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.22.5.tgz",
+            "integrity": "sha512-DuCRB7fu8MyTLbEQd1ew3R85nx/88yMoqo2uPSjevMj3yoN7CDM8jkgrY0wmVxfJZyJ/B9fE1iq7EQppWQmR5A==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-json-strings": "^7.8.3"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-literals": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.22.5.tgz",
+            "integrity": "sha512-fTLj4D79M+mepcw3dgFBTIDYpbcB9Sm0bpm4ppXPaO+U+PKFFyV9MGRvS0gvGw62sd10kT5lRMKXAADb9pWy8g==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-logical-assignment-operators": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.22.5.tgz",
+            "integrity": "sha512-MQQOUW1KL8X0cDWfbwYP+TbVbZm16QmQXJQ+vndPtH/BoO0lOKpVoEDMI7+PskYxH+IiE0tS8xZye0qr1lGzSA==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-member-expression-literals": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.22.5.tgz",
+            "integrity": "sha512-RZEdkNtzzYCFl9SE9ATaUMTj2hqMb4StarOJLrZRbqqU4HSBE7UlBw9WBWQiDzrJZJdUWiMTVDI6Gv/8DPvfew==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-modules-amd": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.22.5.tgz",
+            "integrity": "sha512-R+PTfLTcYEmb1+kK7FNkhQ1gP4KgjpSO6HfH9+f8/yfp2Nt3ggBjiVpRwmwTlfqZLafYKJACy36yDXlEmI9HjQ==",
+            "requires": {
+                "@babel/helper-module-transforms": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-modules-commonjs": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.22.5.tgz",
+            "integrity": "sha512-B4pzOXj+ONRmuaQTg05b3y/4DuFz3WcCNAXPLb2Q0GT0TrGKGxNKV4jwsXts+StaM0LQczZbOpj8o1DLPDJIiA==",
+            "requires": {
+                "@babel/helper-module-transforms": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-simple-access": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-modules-systemjs": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.22.5.tgz",
+            "integrity": "sha512-emtEpoaTMsOs6Tzz+nbmcePl6AKVtS1yC4YNAeMun9U8YCsgadPNxnOPQ8GhHFB2qdx+LZu9LgoC0Lthuu05DQ==",
+            "requires": {
+                "@babel/helper-hoist-variables": "^7.22.5",
+                "@babel/helper-module-transforms": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-validator-identifier": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-modules-umd": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.22.5.tgz",
+            "integrity": "sha512-+S6kzefN/E1vkSsKx8kmQuqeQsvCKCd1fraCM7zXm4SFoggI099Tr4G8U81+5gtMdUeMQ4ipdQffbKLX0/7dBQ==",
+            "requires": {
+                "@babel/helper-module-transforms": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-named-capturing-groups-regex": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.5.tgz",
+            "integrity": "sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==",
+            "requires": {
+                "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-new-target": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.22.5.tgz",
+            "integrity": "sha512-AsF7K0Fx/cNKVyk3a+DW0JLo+Ua598/NxMRvxDnkpCIGFh43+h/v2xyhRUYf6oD8gE4QtL83C7zZVghMjHd+iw==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-nullish-coalescing-operator": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.22.5.tgz",
+            "integrity": "sha512-6CF8g6z1dNYZ/VXok5uYkkBBICHZPiGEl7oDnAx2Mt1hlHVHOSIKWJaXHjQJA5VB43KZnXZDIexMchY4y2PGdA==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-numeric-separator": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.22.5.tgz",
+            "integrity": "sha512-NbslED1/6M+sXiwwtcAB/nieypGw02Ejf4KtDeMkCEpP6gWFMX1wI9WKYua+4oBneCCEmulOkRpwywypVZzs/g==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-object-rest-spread": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.22.5.tgz",
+            "integrity": "sha512-Kk3lyDmEslH9DnvCDA1s1kkd3YWQITiBOHngOtDL9Pt6BZjzqb6hiOlb8VfjiiQJ2unmegBqZu0rx5RxJb5vmQ==",
+            "requires": {
+                "@babel/compat-data": "^7.22.5",
+                "@babel/helper-compilation-targets": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+                "@babel/plugin-transform-parameters": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-object-super": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.22.5.tgz",
+            "integrity": "sha512-klXqyaT9trSjIUrcsYIfETAzmOEZL3cBYqOYLJxBHfMFFggmXOv+NYSX/Jbs9mzMVESw/WycLFPRx8ba/b2Ipw==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-replace-supers": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-optional-catch-binding": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.22.5.tgz",
+            "integrity": "sha512-pH8orJahy+hzZje5b8e2QIlBWQvGpelS76C63Z+jhZKsmzfNaPQ+LaW6dcJ9bxTpo1mtXbgHwy765Ro3jftmUg==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-optional-chaining": {
+            "version": "7.22.6",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.22.6.tgz",
+            "integrity": "sha512-Vd5HiWml0mDVtcLHIoEU5sw6HOUW/Zk0acLs/SAeuLzkGNOPc9DB4nkUajemhCmTIz3eiaKREZn2hQQqF79YTg==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+                "@babel/plugin-syntax-optional-chaining": "^7.8.3"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-parameters": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.22.5.tgz",
+            "integrity": "sha512-AVkFUBurORBREOmHRKo06FjHYgjrabpdqRSwq6+C7R5iTCZOsM4QbcB27St0a4U6fffyAOqh3s/qEfybAhfivg==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-private-methods": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.22.5.tgz",
+            "integrity": "sha512-PPjh4gyrQnGe97JTalgRGMuU4icsZFnWkzicB/fUtzlKUqvsWBKEpPPfr5a2JiyirZkHxnAqkQMO5Z5B2kK3fA==",
+            "requires": {
+                "@babel/helper-create-class-features-plugin": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-private-property-in-object": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.22.5.tgz",
+            "integrity": "sha512-/9xnaTTJcVoBtSSmrVyhtSvO3kbqS2ODoh2juEU72c3aYonNF0OMGiaz2gjukyKM2wBBYJP38S4JiE0Wfb5VMQ==",
+            "requires": {
+                "@babel/helper-annotate-as-pure": "^7.22.5",
+                "@babel/helper-create-class-features-plugin": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+            },
+            "dependencies": {
+                "@babel/helper-annotate-as-pure": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
+                    "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
+                    "requires": {
+                        "@babel/types": "^7.22.5"
+                    }
+                },
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-property-literals": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.22.5.tgz",
+            "integrity": "sha512-TiOArgddK3mK/x1Qwf5hay2pxI6wCZnvQqrFSqbtg1GLl2JcNMitVH/YnqjP+M31pLUeTfzY1HAXFDnUBV30rQ==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-react-display-name": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.22.5.tgz",
+            "integrity": "sha512-PVk3WPYudRF5z4GKMEYUrLjPl38fJSKNaEOkFuoprioowGuWN6w2RKznuFNSlJx7pzzXXStPUnNSOEO0jL5EVw==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-react-jsx": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.22.5.tgz",
+            "integrity": "sha512-rog5gZaVbUip5iWDMTYbVM15XQq+RkUKhET/IHR6oizR+JEoN6CAfTTuHcK4vwUyzca30qqHqEpzBOnaRMWYMA==",
+            "requires": {
+                "@babel/helper-annotate-as-pure": "^7.22.5",
+                "@babel/helper-module-imports": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-jsx": "^7.22.5",
+                "@babel/types": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-annotate-as-pure": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
+                    "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
+                    "requires": {
+                        "@babel/types": "^7.22.5"
+                    }
+                },
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                },
+                "@babel/plugin-syntax-jsx": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.22.5.tgz",
+                    "integrity": "sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg==",
+                    "requires": {
+                        "@babel/helper-plugin-utils": "^7.22.5"
+                    }
+                }
+            }
+        },
+        "@babel/plugin-transform-react-jsx-development": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.22.5.tgz",
+            "integrity": "sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A==",
+            "requires": {
+                "@babel/plugin-transform-react-jsx": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-react-pure-annotations": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.22.5.tgz",
+            "integrity": "sha512-gP4k85wx09q+brArVinTXhWiyzLl9UpmGva0+mWyKxk6JZequ05x3eUcIUE+FyttPKJFRRVtAvQaJ6YF9h1ZpA==",
+            "requires": {
+                "@babel/helper-annotate-as-pure": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-annotate-as-pure": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
+                    "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
+                    "requires": {
+                        "@babel/types": "^7.22.5"
+                    }
+                },
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-regenerator": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.22.5.tgz",
+            "integrity": "sha512-rR7KePOE7gfEtNTh9Qw+iO3Q/e4DEsoQ+hdvM6QUDH7JRJ5qxq5AA52ZzBWbI5i9lfNuvySgOGP8ZN7LAmaiPw==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "regenerator-transform": "^0.15.1"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-reserved-words": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.22.5.tgz",
+            "integrity": "sha512-DTtGKFRQUDm8svigJzZHzb/2xatPc6TzNvAIJ5GqOKDsGFYgAskjRulbR/vGsPKq3OPqtexnz327qYpP57RFyA==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-shorthand-properties": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.22.5.tgz",
+            "integrity": "sha512-vM4fq9IXHscXVKzDv5itkO1X52SmdFBFcMIBZ2FRn2nqVYqw6dBexUgMvAjHW+KXpPPViD/Yo3GrDEBaRC0QYA==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-spread": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.22.5.tgz",
+            "integrity": "sha512-5ZzDQIGyvN4w8+dMmpohL6MBo+l2G7tfC/O2Dg7/hjpgeWvUx8FzfeOKxGog9IimPa4YekaQ9PlDqTLOljkcxg==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-sticky-regex": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.22.5.tgz",
+            "integrity": "sha512-zf7LuNpHG0iEeiyCNwX4j3gDg1jgt1k3ZdXBKbZSoA3BbGQGvMiSvfbZRR3Dr3aeJe3ooWFZxOOG3IRStYp2Bw==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-template-literals": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.22.5.tgz",
+            "integrity": "sha512-5ciOehRNf+EyUeewo8NkbQiUs4d6ZxiHo6BcBcnFlgiJfu16q0bQUw9Jvo0b0gBKFG1SMhDSjeKXSYuJLeFSMA==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-typeof-symbol": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.22.5.tgz",
+            "integrity": "sha512-bYkI5lMzL4kPii4HHEEChkD0rkc+nvnlR6+o/qdqR6zrm0Sv/nodmyLhlq2DO0YKLUNd2VePmPRjJXSBh9OIdA==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-typescript": {
+            "version": "7.22.9",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.22.9.tgz",
+            "integrity": "sha512-BnVR1CpKiuD0iobHPaM1iLvcwPYN2uVFAqoLVSpEDKWuOikoCv5HbKLxclhKYUXlWkX86DoZGtqI4XhbOsyrMg==",
+            "requires": {
+                "@babel/helper-annotate-as-pure": "^7.22.5",
+                "@babel/helper-create-class-features-plugin": "^7.22.9",
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-typescript": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-annotate-as-pure": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
+                    "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
+                    "requires": {
+                        "@babel/types": "^7.22.5"
+                    }
+                },
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-unicode-escapes": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.22.5.tgz",
+            "integrity": "sha512-biEmVg1IYB/raUO5wT1tgfacCef15Fbzhkx493D3urBI++6hpJ+RFG4SrWMn0NEZLfvilqKf3QDrRVZHo08FYg==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-unicode-property-regex": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.22.5.tgz",
+            "integrity": "sha512-HCCIb+CbJIAE6sXn5CjFQXMwkCClcOfPCzTlilJ8cUatfzwHlWQkbtV0zD338u9dZskwvuOYTuuaMaA8J5EI5A==",
+            "requires": {
+                "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-unicode-regex": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.22.5.tgz",
+            "integrity": "sha512-028laaOKptN5vHJf9/Arr/HiJekMd41hOEZYvNsrsXqJ7YPYuX2bQxh31fkZzGmq3YqHRJzYFFAVYvKfMPKqyg==",
+            "requires": {
+                "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/plugin-transform-unicode-sets-regex": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.22.5.tgz",
+            "integrity": "sha512-lhMfi4FC15j13eKrh3DnYHjpGj6UKQHtNKTbtc1igvAhRy4+kLhV07OpLcsN0VgDEw/MjAvJO4BdMJsHwMhzCg==",
+            "requires": {
+                "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/preset-env": {
+            "version": "7.22.9",
+            "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.22.9.tgz",
+            "integrity": "sha512-wNi5H/Emkhll/bqPjsjQorSykrlfY5OWakd6AulLvMEytpKasMVUpVy8RL4qBIBs5Ac6/5i0/Rv0b/Fg6Eag/g==",
+            "requires": {
+                "@babel/compat-data": "^7.22.9",
+                "@babel/helper-compilation-targets": "^7.22.9",
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-validator-option": "^7.22.5",
+                "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.22.5",
+                "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.22.5",
+                "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
+                "@babel/plugin-syntax-async-generators": "^7.8.4",
+                "@babel/plugin-syntax-class-properties": "^7.12.13",
+                "@babel/plugin-syntax-class-static-block": "^7.14.5",
+                "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+                "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
+                "@babel/plugin-syntax-import-assertions": "^7.22.5",
+                "@babel/plugin-syntax-import-attributes": "^7.22.5",
+                "@babel/plugin-syntax-import-meta": "^7.10.4",
+                "@babel/plugin-syntax-json-strings": "^7.8.3",
+                "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
+                "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+                "@babel/plugin-syntax-numeric-separator": "^7.10.4",
+                "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+                "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+                "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+                "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
+                "@babel/plugin-syntax-top-level-await": "^7.14.5",
+                "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
+                "@babel/plugin-transform-arrow-functions": "^7.22.5",
+                "@babel/plugin-transform-async-generator-functions": "^7.22.7",
+                "@babel/plugin-transform-async-to-generator": "^7.22.5",
+                "@babel/plugin-transform-block-scoped-functions": "^7.22.5",
+                "@babel/plugin-transform-block-scoping": "^7.22.5",
+                "@babel/plugin-transform-class-properties": "^7.22.5",
+                "@babel/plugin-transform-class-static-block": "^7.22.5",
+                "@babel/plugin-transform-classes": "^7.22.6",
+                "@babel/plugin-transform-computed-properties": "^7.22.5",
+                "@babel/plugin-transform-destructuring": "^7.22.5",
+                "@babel/plugin-transform-dotall-regex": "^7.22.5",
+                "@babel/plugin-transform-duplicate-keys": "^7.22.5",
+                "@babel/plugin-transform-dynamic-import": "^7.22.5",
+                "@babel/plugin-transform-exponentiation-operator": "^7.22.5",
+                "@babel/plugin-transform-export-namespace-from": "^7.22.5",
+                "@babel/plugin-transform-for-of": "^7.22.5",
+                "@babel/plugin-transform-function-name": "^7.22.5",
+                "@babel/plugin-transform-json-strings": "^7.22.5",
+                "@babel/plugin-transform-literals": "^7.22.5",
+                "@babel/plugin-transform-logical-assignment-operators": "^7.22.5",
+                "@babel/plugin-transform-member-expression-literals": "^7.22.5",
+                "@babel/plugin-transform-modules-amd": "^7.22.5",
+                "@babel/plugin-transform-modules-commonjs": "^7.22.5",
+                "@babel/plugin-transform-modules-systemjs": "^7.22.5",
+                "@babel/plugin-transform-modules-umd": "^7.22.5",
+                "@babel/plugin-transform-named-capturing-groups-regex": "^7.22.5",
+                "@babel/plugin-transform-new-target": "^7.22.5",
+                "@babel/plugin-transform-nullish-coalescing-operator": "^7.22.5",
+                "@babel/plugin-transform-numeric-separator": "^7.22.5",
+                "@babel/plugin-transform-object-rest-spread": "^7.22.5",
+                "@babel/plugin-transform-object-super": "^7.22.5",
+                "@babel/plugin-transform-optional-catch-binding": "^7.22.5",
+                "@babel/plugin-transform-optional-chaining": "^7.22.6",
+                "@babel/plugin-transform-parameters": "^7.22.5",
+                "@babel/plugin-transform-private-methods": "^7.22.5",
+                "@babel/plugin-transform-private-property-in-object": "^7.22.5",
+                "@babel/plugin-transform-property-literals": "^7.22.5",
+                "@babel/plugin-transform-regenerator": "^7.22.5",
+                "@babel/plugin-transform-reserved-words": "^7.22.5",
+                "@babel/plugin-transform-shorthand-properties": "^7.22.5",
+                "@babel/plugin-transform-spread": "^7.22.5",
+                "@babel/plugin-transform-sticky-regex": "^7.22.5",
+                "@babel/plugin-transform-template-literals": "^7.22.5",
+                "@babel/plugin-transform-typeof-symbol": "^7.22.5",
+                "@babel/plugin-transform-unicode-escapes": "^7.22.5",
+                "@babel/plugin-transform-unicode-property-regex": "^7.22.5",
+                "@babel/plugin-transform-unicode-regex": "^7.22.5",
+                "@babel/plugin-transform-unicode-sets-regex": "^7.22.5",
+                "@babel/preset-modules": "^0.1.5",
+                "@babel/types": "^7.22.5",
+                "babel-plugin-polyfill-corejs2": "^0.4.4",
+                "babel-plugin-polyfill-corejs3": "^0.8.2",
+                "babel-plugin-polyfill-regenerator": "^0.5.1",
+                "core-js-compat": "^3.31.0",
+                "semver": "^6.3.1"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                },
+                "semver": {
+                    "version": "6.3.1",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+                    "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
+                }
+            }
+        },
+        "@babel/preset-modules": {
+            "version": "0.1.5",
+            "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.5.tgz",
+            "integrity": "sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.0.0",
+                "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
+                "@babel/plugin-transform-dotall-regex": "^7.4.4",
+                "@babel/types": "^7.4.4",
+                "esutils": "^2.0.2"
+            }
+        },
+        "@babel/preset-react": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.22.5.tgz",
+            "integrity": "sha512-M+Is3WikOpEJHgR385HbuCITPTaPRaNkibTEa9oiofmJvIsrceb4yp9RL9Kb+TE8LznmeyZqpP+Lopwcx59xPQ==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-validator-option": "^7.22.5",
+                "@babel/plugin-transform-react-display-name": "^7.22.5",
+                "@babel/plugin-transform-react-jsx": "^7.22.5",
+                "@babel/plugin-transform-react-jsx-development": "^7.22.5",
+                "@babel/plugin-transform-react-pure-annotations": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                }
+            }
+        },
+        "@babel/preset-typescript": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.22.5.tgz",
+            "integrity": "sha512-YbPaal9LxztSGhmndR46FmAbkJ/1fAsw293tSU+I5E5h+cnJ3d4GTwyUgGYmOXJYdGA+uNePle4qbaRzj2NISQ==",
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-validator-option": "^7.22.5",
+                "@babel/plugin-syntax-jsx": "^7.22.5",
+                "@babel/plugin-transform-modules-commonjs": "^7.22.5",
+                "@babel/plugin-transform-typescript": "^7.22.5"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+                    "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+                },
+                "@babel/plugin-syntax-jsx": {
+                    "version": "7.22.5",
+                    "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.22.5.tgz",
+                    "integrity": "sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg==",
+                    "requires": {
+                        "@babel/helper-plugin-utils": "^7.22.5"
+                    }
+                }
+            }
+        },
+        "@babel/regjsgen": {
+            "version": "0.8.0",
+            "resolved": "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz",
+            "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
+        },
         "@babel/runtime": {
             "version": "7.20.13",
             "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
@@ -124,28 +1744,28 @@
             }
         },
         "@babel/template": {
-            "version": "7.20.7",
-            "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz",
-            "integrity": "sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
+            "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
             "requires": {
-                "@babel/code-frame": "^7.18.6",
-                "@babel/parser": "^7.20.7",
-                "@babel/types": "^7.20.7"
+                "@babel/code-frame": "^7.22.5",
+                "@babel/parser": "^7.22.5",
+                "@babel/types": "^7.22.5"
             }
         },
         "@babel/traverse": {
-            "version": "7.20.13",
-            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.20.13.tgz",
-            "integrity": "sha512-kMJXfF0T6DIS9E8cgdLCSAL+cuCK+YEZHWiLK0SXpTo8YRj5lpJu3CDNKiIBCne4m9hhTIqUg6SYTAI39tAiVQ==",
-            "requires": {
-                "@babel/code-frame": "^7.18.6",
-                "@babel/generator": "^7.20.7",
-                "@babel/helper-environment-visitor": "^7.18.9",
-                "@babel/helper-function-name": "^7.19.0",
-                "@babel/helper-hoist-variables": "^7.18.6",
-                "@babel/helper-split-export-declaration": "^7.18.6",
-                "@babel/parser": "^7.20.13",
-                "@babel/types": "^7.20.7",
+            "version": "7.22.8",
+            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.8.tgz",
+            "integrity": "sha512-y6LPR+wpM2I3qJrsheCTwhIinzkETbplIgPBbwvqPKc+uljeA5gP+3nP8irdYt1mjQaDnlIcG+dw8OjAco4GXw==",
+            "requires": {
+                "@babel/code-frame": "^7.22.5",
+                "@babel/generator": "^7.22.7",
+                "@babel/helper-environment-visitor": "^7.22.5",
+                "@babel/helper-function-name": "^7.22.5",
+                "@babel/helper-hoist-variables": "^7.22.5",
+                "@babel/helper-split-export-declaration": "^7.22.6",
+                "@babel/parser": "^7.22.7",
+                "@babel/types": "^7.22.5",
                 "debug": "^4.1.0",
                 "globals": "^11.1.0"
             },
@@ -166,12 +1786,12 @@
             }
         },
         "@babel/types": {
-            "version": "7.20.7",
-            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.20.7.tgz",
-            "integrity": "sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+            "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
             "requires": {
-                "@babel/helper-string-parser": "^7.19.4",
-                "@babel/helper-validator-identifier": "^7.19.1",
+                "@babel/helper-string-parser": "^7.22.5",
+                "@babel/helper-validator-identifier": "^7.22.5",
                 "to-fast-properties": "^2.0.0"
             }
         },
@@ -283,6 +1903,11 @@
                     "version": "4.0.0",
                     "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
                     "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+                },
+                "stylis": {
+                    "version": "4.1.3",
+                    "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz",
+                    "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA=="
                 }
             }
         },
@@ -392,6 +2017,11 @@
                     "version": "3.1.1",
                     "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
                     "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+                },
+                "stylis": {
+                    "version": "4.1.3",
+                    "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz",
+                    "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA=="
                 }
             }
         },
@@ -1064,6 +2694,13 @@
                 "prop-types": "^15.7.2",
                 "react-is": "^16.8.0 || ^17.0.0",
                 "react-transition-group": "^4.4.0"
+            },
+            "dependencies": {
+                "popper.js": {
+                    "version": "1.16.1-lts",
+                    "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
+                    "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
+                }
             }
         },
         "@material-ui/styles": {
@@ -1298,6 +2935,25 @@
                 }
             }
         },
+        "@mui/styled-engine-sc": {
+            "version": "5.12.0",
+            "resolved": "https://registry.npmjs.org/@mui/styled-engine-sc/-/styled-engine-sc-5.12.0.tgz",
+            "integrity": "sha512-3MgYoY2YG5tx0E5oKqvCv94oL0ABVBr+qpcyvciXW/v0wzPG6bXvuZV80GHYlJfasgnnRa1AbRWf5a9FcX8v6g==",
+            "requires": {
+                "@babel/runtime": "^7.21.0",
+                "prop-types": "^15.8.1"
+            },
+            "dependencies": {
+                "@babel/runtime": {
+                    "version": "7.22.6",
+                    "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
+                    "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
+                    "requires": {
+                        "regenerator-runtime": "^0.13.11"
+                    }
+                }
+            }
+        },
         "@mui/system": {
             "version": "5.13.1",
             "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.13.1.tgz",
@@ -1368,6 +3024,12 @@
                 }
             }
         },
+        "@nicolo-ribaudo/chokidar-2": {
+            "version": "2.1.8-no-fsevents.3",
+            "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz",
+            "integrity": "sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==",
+            "optional": true
+        },
         "@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2583,14 +4245,6 @@
                 "@types/react": "*",
                 "date-fns": "^2.0.1",
                 "popper.js": "^1.14.1"
-            },
-            "dependencies": {
-                "popper.js": {
-                    "version": "1.16.1",
-                    "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-                    "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
-                    "dev": true
-                }
             }
         },
         "@types/react-dom": {
@@ -2620,6 +4274,14 @@
                 "react-icons": "*"
             }
         },
+        "@types/react-is": {
+            "version": "18.2.1",
+            "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-18.2.1.tgz",
+            "integrity": "sha512-wyUkmaaSZEzFZivD8F2ftSyAfk6L+DfFliVj/mYdOXbVjRcS87fQJLTnhk6dRZPuJjI+9g6RZJO4PNCngUrmyw==",
+            "requires": {
+                "@types/react": "*"
+            }
+        },
         "@types/react-measure": {
             "version": "2.0.8",
             "resolved": "https://registry.npmjs.org/@types/react-measure/-/react-measure-2.0.8.tgz",
@@ -2828,6 +4490,11 @@
             "integrity": "sha512-7NQmHra/JILCd1QqpSzl8+mJRc8ZHz3uDm8YV1Ks9IhK0epEiTw8aIErbvH9PI+6XbqhyIQy3462nEsn7UVzjQ==",
             "dev": true
         },
+        "@types/stylis": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.0.tgz",
+            "integrity": "sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw=="
+        },
         "@types/supercluster": {
             "version": "7.1.0",
             "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-7.1.0.tgz",
@@ -4102,6 +5769,40 @@
                 "resolve": "^1.12.0"
             }
         },
+        "babel-plugin-polyfill-corejs2": {
+            "version": "0.4.4",
+            "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.4.tgz",
+            "integrity": "sha512-9WeK9snM1BfxB38goUEv2FLnA6ja07UMfazFHzCXUb3NyDZAwfXvQiURQ6guTTMeHcOsdknULm1PDhs4uWtKyA==",
+            "requires": {
+                "@babel/compat-data": "^7.22.6",
+                "@babel/helper-define-polyfill-provider": "^0.4.1",
+                "@nicolo-ribaudo/semver-v6": "^6.3.3"
+            },
+            "dependencies": {
+                "@nicolo-ribaudo/semver-v6": {
+                    "version": "6.3.3",
+                    "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/semver-v6/-/semver-v6-6.3.3.tgz",
+                    "integrity": "sha512-3Yc1fUTs69MG/uZbJlLSI3JISMn2UV2rg+1D/vROUqZyh3l6iYHCs7GMp+M40ZD7yOdDbYjJcU1oTJhrc+dGKg=="
+                }
+            }
+        },
+        "babel-plugin-polyfill-corejs3": {
+            "version": "0.8.2",
+            "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.2.tgz",
+            "integrity": "sha512-Cid+Jv1BrY9ReW9lIfNlNpsI53N+FN7gE+f73zLAUbr9C52W4gKLWSByx47pfDJsEysojKArqOtOKZSVIIUTuQ==",
+            "requires": {
+                "@babel/helper-define-polyfill-provider": "^0.4.1",
+                "core-js-compat": "^3.31.0"
+            }
+        },
+        "babel-plugin-polyfill-regenerator": {
+            "version": "0.5.1",
+            "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.1.tgz",
+            "integrity": "sha512-L8OyySuI6OSQ5hFy9O+7zFjyr4WhAfRjLIOkhQGYl+emwJkd/S4XXT1JpfrgR1jrQ1NcGiOh+yAdGlF8pnC3Jw==",
+            "requires": {
+                "@babel/helper-define-polyfill-provider": "^0.4.1"
+            }
+        },
         "babel-plugin-styled-components": {
             "version": "2.0.7",
             "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz",
@@ -4497,16 +6198,335 @@
             }
         },
         "browndash-components": {
-            "version": "0.0.28",
-            "resolved": "https://registry.npmjs.org/browndash-components/-/browndash-components-0.0.28.tgz",
-            "integrity": "sha512-pg8qAmaILk6GpUfrdDub6Bg5+LD7547UDzw44yntKsNQC8FDNE9KkDa1ShH5yAn+cwKuTMa/a9Q9yZxMtm94bQ==",
-            "requires": {
+            "version": "0.0.81",
+            "resolved": "https://registry.npmjs.org/browndash-components/-/browndash-components-0.0.81.tgz",
+            "integrity": "sha512-IEFEj7E7h6kX/zPX8+HxHP4kmXV7gsZEmi3ZZMWDxYm5HhRXfnxZXdhxTDuXJ7HH4EORraUCuI9PR19qbFsJ2A==",
+            "requires": {
+                "@emotion/react": "^11.11.1",
+                "@emotion/styled": "^11.11.0",
+                "@mui/material": "^5.13.7",
+                "@mui/styled-engine-sc": "^5.12.0",
                 "color": "^4.2.3",
                 "react-color": "^2.19.3",
                 "react-icons": "^4.3.1",
-                "react-measure": "^2.5.2"
+                "react-measure": "^2.5.2",
+                "styled-components": "^6.0.3"
             },
             "dependencies": {
+                "@babel/cli": {
+                    "version": "7.22.9",
+                    "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.22.9.tgz",
+                    "integrity": "sha512-nb2O7AThqRo7/E53EGiuAkMaRbb7J5Qp3RvN+dmua1U+kydm0oznkhqbTEG15yk26G/C3yL6OdZjzgl+DMXVVA==",
+                    "requires": {
+                        "@jridgewell/trace-mapping": "^0.3.17",
+                        "@nicolo-ribaudo/chokidar-2": "2.1.8-no-fsevents.3",
+                        "chokidar": "^3.4.0",
+                        "commander": "^4.0.1",
+                        "convert-source-map": "^1.1.0",
+                        "fs-readdir-recursive": "^1.1.0",
+                        "glob": "^7.2.0",
+                        "make-dir": "^2.1.0",
+                        "slash": "^2.0.0"
+                    }
+                },
+                "@emotion/babel-plugin": {
+                    "version": "11.11.0",
+                    "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+                    "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
+                    "requires": {
+                        "@babel/helper-module-imports": "^7.16.7",
+                        "@babel/runtime": "^7.18.3",
+                        "@emotion/hash": "^0.9.1",
+                        "@emotion/memoize": "^0.8.1",
+                        "@emotion/serialize": "^1.1.2",
+                        "babel-plugin-macros": "^3.1.0",
+                        "convert-source-map": "^1.5.0",
+                        "escape-string-regexp": "^4.0.0",
+                        "find-root": "^1.1.0",
+                        "source-map": "^0.5.7",
+                        "stylis": "4.2.0"
+                    }
+                },
+                "@emotion/cache": {
+                    "version": "11.11.0",
+                    "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+                    "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+                    "requires": {
+                        "@emotion/memoize": "^0.8.1",
+                        "@emotion/sheet": "^1.2.2",
+                        "@emotion/utils": "^1.2.1",
+                        "@emotion/weak-memoize": "^0.3.1",
+                        "stylis": "4.2.0"
+                    }
+                },
+                "@emotion/hash": {
+                    "version": "0.9.1",
+                    "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+                    "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+                },
+                "@emotion/memoize": {
+                    "version": "0.8.1",
+                    "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+                    "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+                },
+                "@emotion/react": {
+                    "version": "11.11.1",
+                    "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz",
+                    "integrity": "sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==",
+                    "requires": {
+                        "@babel/runtime": "^7.18.3",
+                        "@emotion/babel-plugin": "^11.11.0",
+                        "@emotion/cache": "^11.11.0",
+                        "@emotion/serialize": "^1.1.2",
+                        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+                        "@emotion/utils": "^1.2.1",
+                        "@emotion/weak-memoize": "^0.3.1",
+                        "hoist-non-react-statics": "^3.3.1"
+                    }
+                },
+                "@emotion/serialize": {
+                    "version": "1.1.2",
+                    "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz",
+                    "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==",
+                    "requires": {
+                        "@emotion/hash": "^0.9.1",
+                        "@emotion/memoize": "^0.8.1",
+                        "@emotion/unitless": "^0.8.1",
+                        "@emotion/utils": "^1.2.1",
+                        "csstype": "^3.0.2"
+                    }
+                },
+                "@emotion/sheet": {
+                    "version": "1.2.2",
+                    "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+                    "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
+                },
+                "@emotion/unitless": {
+                    "version": "0.8.1",
+                    "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+                    "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+                },
+                "@emotion/utils": {
+                    "version": "1.2.1",
+                    "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+                    "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
+                },
+                "@emotion/weak-memoize": {
+                    "version": "0.3.1",
+                    "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+                    "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
+                },
+                "@mui/base": {
+                    "version": "5.0.0-beta.7",
+                    "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.7.tgz",
+                    "integrity": "sha512-Pjbwm6gjiS96kOMF7E5fjEJsenc0tZBesrLQ4rrdi3eT/c/yhSWnPbCUkHSz8bnS0l3/VQ8bA+oERSGSV2PK6A==",
+                    "requires": {
+                        "@babel/runtime": "^7.22.5",
+                        "@emotion/is-prop-valid": "^1.2.1",
+                        "@mui/types": "^7.2.4",
+                        "@mui/utils": "^5.13.7",
+                        "@popperjs/core": "^2.11.8",
+                        "clsx": "^1.2.1",
+                        "prop-types": "^15.8.1",
+                        "react-is": "^18.2.0"
+                    },
+                    "dependencies": {
+                        "@babel/runtime": {
+                            "version": "7.22.6",
+                            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
+                            "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
+                            "requires": {
+                                "regenerator-runtime": "^0.13.11"
+                            }
+                        }
+                    }
+                },
+                "@mui/core-downloads-tracker": {
+                    "version": "5.14.0",
+                    "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.0.tgz",
+                    "integrity": "sha512-SYBOVCatVDUf/lbrLGah09bHhX5WfUXg7kSskfLILr6SvKRni0NLp0aonxQ0SMALVVK3Qwa6cW4CdWuwS0gC1w=="
+                },
+                "@mui/material": {
+                    "version": "5.14.0",
+                    "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.0.tgz",
+                    "integrity": "sha512-HP7CP71NhMkui2HUIEKl2/JfuHMuoarSUWAKlNw6s17bl/Num9rN61EM6uUzc2A2zHjj/00A66GnvDnmixEJEw==",
+                    "requires": {
+                        "@babel/runtime": "^7.22.5",
+                        "@mui/base": "5.0.0-beta.7",
+                        "@mui/core-downloads-tracker": "^5.14.0",
+                        "@mui/system": "^5.14.0",
+                        "@mui/types": "^7.2.4",
+                        "@mui/utils": "^5.13.7",
+                        "@types/react-transition-group": "^4.4.6",
+                        "clsx": "^1.2.1",
+                        "csstype": "^3.1.2",
+                        "prop-types": "^15.8.1",
+                        "react-is": "^18.2.0",
+                        "react-transition-group": "^4.4.5"
+                    },
+                    "dependencies": {
+                        "@babel/runtime": {
+                            "version": "7.22.6",
+                            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
+                            "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
+                            "requires": {
+                                "regenerator-runtime": "^0.13.11"
+                            }
+                        }
+                    }
+                },
+                "@mui/private-theming": {
+                    "version": "5.13.7",
+                    "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.13.7.tgz",
+                    "integrity": "sha512-qbSr+udcij5F9dKhGX7fEdx2drXchq7htLNr2Qg2Ma+WJ6q0ERlEqGSBiPiVDJkptcjeVL4DGmcf1wl5+vD4EA==",
+                    "requires": {
+                        "@babel/runtime": "^7.22.5",
+                        "@mui/utils": "^5.13.7",
+                        "prop-types": "^15.8.1"
+                    },
+                    "dependencies": {
+                        "@babel/runtime": {
+                            "version": "7.22.6",
+                            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
+                            "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
+                            "requires": {
+                                "regenerator-runtime": "^0.13.11"
+                            }
+                        }
+                    }
+                },
+                "@mui/styled-engine": {
+                    "version": "5.13.2",
+                    "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.13.2.tgz",
+                    "integrity": "sha512-VCYCU6xVtXOrIN8lcbuPmoG+u7FYuOERG++fpY74hPpEWkyFQG97F+/XfTQVYzlR2m7nPjnwVUgATcTCMEaMvw==",
+                    "requires": {
+                        "@babel/runtime": "^7.21.0",
+                        "@emotion/cache": "^11.11.0",
+                        "csstype": "^3.1.2",
+                        "prop-types": "^15.8.1"
+                    },
+                    "dependencies": {
+                        "@babel/runtime": {
+                            "version": "7.22.6",
+                            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
+                            "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
+                            "requires": {
+                                "regenerator-runtime": "^0.13.11"
+                            }
+                        }
+                    }
+                },
+                "@mui/system": {
+                    "version": "5.14.0",
+                    "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.0.tgz",
+                    "integrity": "sha512-0HZGkX8miJbiNw+rjlZ9l0Cfkz1bSqfSHQH0EH9J+nx0aAm5cBleg9piOlLdCNIWGgecCqsw4x62erGrGjjcJg==",
+                    "requires": {
+                        "@babel/runtime": "^7.22.5",
+                        "@mui/private-theming": "^5.13.7",
+                        "@mui/styled-engine": "^5.13.2",
+                        "@mui/types": "^7.2.4",
+                        "@mui/utils": "^5.13.7",
+                        "clsx": "^1.2.1",
+                        "csstype": "^3.1.2",
+                        "prop-types": "^15.8.1"
+                    },
+                    "dependencies": {
+                        "@babel/runtime": {
+                            "version": "7.22.6",
+                            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
+                            "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
+                            "requires": {
+                                "regenerator-runtime": "^0.13.11"
+                            }
+                        }
+                    }
+                },
+                "@mui/utils": {
+                    "version": "5.13.7",
+                    "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.13.7.tgz",
+                    "integrity": "sha512-/3BLptG/q0u36eYED7Nhf4fKXmcKb6LjjT7ZMwhZIZSdSxVqDqSTmATW3a56n3KEPQUXCU9TpxAfCBQhs6brVA==",
+                    "requires": {
+                        "@babel/runtime": "^7.22.5",
+                        "@types/prop-types": "^15.7.5",
+                        "@types/react-is": "^18.2.1",
+                        "prop-types": "^15.8.1",
+                        "react-is": "^18.2.0"
+                    },
+                    "dependencies": {
+                        "@babel/runtime": {
+                            "version": "7.22.6",
+                            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
+                            "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
+                            "requires": {
+                                "regenerator-runtime": "^0.13.11"
+                            }
+                        }
+                    }
+                },
+                "@popperjs/core": {
+                    "version": "2.11.8",
+                    "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+                    "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
+                },
+                "@types/react-transition-group": {
+                    "version": "4.4.6",
+                    "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz",
+                    "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==",
+                    "requires": {
+                        "@types/react": "*"
+                    }
+                },
+                "anymatch": {
+                    "version": "3.1.3",
+                    "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+                    "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+                    "optional": true,
+                    "requires": {
+                        "normalize-path": "^3.0.0",
+                        "picomatch": "^2.0.4"
+                    }
+                },
+                "babel-plugin-macros": {
+                    "version": "3.1.0",
+                    "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+                    "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+                    "requires": {
+                        "@babel/runtime": "^7.12.5",
+                        "cosmiconfig": "^7.0.0",
+                        "resolve": "^1.19.0"
+                    }
+                },
+                "binary-extensions": {
+                    "version": "2.2.0",
+                    "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+                    "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+                    "optional": true
+                },
+                "braces": {
+                    "version": "3.0.2",
+                    "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+                    "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+                    "optional": true,
+                    "requires": {
+                        "fill-range": "^7.0.1"
+                    }
+                },
+                "chokidar": {
+                    "version": "3.5.3",
+                    "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+                    "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+                    "optional": true,
+                    "requires": {
+                        "anymatch": "~3.1.2",
+                        "braces": "~3.0.2",
+                        "fsevents": "~2.3.2",
+                        "glob-parent": "~5.1.2",
+                        "is-binary-path": "~2.1.0",
+                        "is-glob": "~4.0.1",
+                        "normalize-path": "~3.0.0",
+                        "readdirp": "~3.6.0"
+                    }
+                },
                 "color": {
                     "version": "4.2.3",
                     "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@@ -4528,6 +6548,182 @@
                     "version": "1.1.4",
                     "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
                     "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+                },
+                "commander": {
+                    "version": "4.1.1",
+                    "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+                    "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="
+                },
+                "cosmiconfig": {
+                    "version": "7.1.0",
+                    "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+                    "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+                    "requires": {
+                        "@types/parse-json": "^4.0.0",
+                        "import-fresh": "^3.2.1",
+                        "parse-json": "^5.0.0",
+                        "path-type": "^4.0.0",
+                        "yaml": "^1.10.0"
+                    }
+                },
+                "css-to-react-native": {
+                    "version": "3.2.0",
+                    "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+                    "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+                    "requires": {
+                        "camelize": "^1.0.0",
+                        "css-color-keywords": "^1.0.0",
+                        "postcss-value-parser": "^4.0.2"
+                    }
+                },
+                "csstype": {
+                    "version": "3.1.2",
+                    "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+                    "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+                },
+                "escape-string-regexp": {
+                    "version": "4.0.0",
+                    "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+                    "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+                },
+                "fill-range": {
+                    "version": "7.0.1",
+                    "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+                    "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+                    "optional": true,
+                    "requires": {
+                        "to-regex-range": "^5.0.1"
+                    }
+                },
+                "fsevents": {
+                    "version": "2.3.2",
+                    "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+                    "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+                    "optional": true
+                },
+                "glob-parent": {
+                    "version": "5.1.2",
+                    "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+                    "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+                    "optional": true,
+                    "requires": {
+                        "is-glob": "^4.0.1"
+                    }
+                },
+                "is-binary-path": {
+                    "version": "2.1.0",
+                    "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+                    "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+                    "optional": true,
+                    "requires": {
+                        "binary-extensions": "^2.0.0"
+                    }
+                },
+                "is-number": {
+                    "version": "7.0.0",
+                    "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+                    "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+                    "optional": true
+                },
+                "make-dir": {
+                    "version": "2.1.0",
+                    "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+                    "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+                    "requires": {
+                        "pify": "^4.0.1",
+                        "semver": "^5.6.0"
+                    }
+                },
+                "nanoid": {
+                    "version": "3.3.6",
+                    "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+                    "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA=="
+                },
+                "pify": {
+                    "version": "4.0.1",
+                    "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+                    "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="
+                },
+                "postcss": {
+                    "version": "8.4.26",
+                    "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.26.tgz",
+                    "integrity": "sha512-jrXHFF8iTloAenySjM/ob3gSj7pCu0Ji49hnjqzsgSRa50hkWCKD0HQ+gMNJkW38jBI68MpAAg7ZWwHwX8NMMw==",
+                    "requires": {
+                        "nanoid": "^3.3.6",
+                        "picocolors": "^1.0.0",
+                        "source-map-js": "^1.0.2"
+                    }
+                },
+                "postcss-value-parser": {
+                    "version": "4.2.0",
+                    "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+                    "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+                },
+                "react-is": {
+                    "version": "18.2.0",
+                    "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+                    "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+                },
+                "readdirp": {
+                    "version": "3.6.0",
+                    "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+                    "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+                    "optional": true,
+                    "requires": {
+                        "picomatch": "^2.2.1"
+                    }
+                },
+                "slash": {
+                    "version": "2.0.0",
+                    "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
+                    "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A=="
+                },
+                "styled-components": {
+                    "version": "6.0.4",
+                    "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.0.4.tgz",
+                    "integrity": "sha512-lRJt4vg8hKJhlVG+VKz8QEqPCXKyTryZZ59odyK0UC0HHV3u/mshWTfSay8NpkN0Xijw1iN9r0Leld3dcCcp/w==",
+                    "requires": {
+                        "@babel/cli": "^7.21.0",
+                        "@babel/core": "^7.21.0",
+                        "@babel/helper-module-imports": "^7.18.6",
+                        "@babel/plugin-external-helpers": "^7.18.6",
+                        "@babel/plugin-proposal-class-properties": "^7.18.6",
+                        "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+                        "@babel/preset-env": "^7.20.2",
+                        "@babel/preset-react": "^7.18.6",
+                        "@babel/preset-typescript": "^7.21.0",
+                        "@babel/traverse": "^7.21.2",
+                        "@emotion/is-prop-valid": "^1.2.1",
+                        "@emotion/unitless": "^0.8.0",
+                        "@types/stylis": "^4.0.2",
+                        "css-to-react-native": "^3.2.0",
+                        "csstype": "^3.1.2",
+                        "postcss": "^8.4.23",
+                        "shallowequal": "^1.1.0",
+                        "stylis": "^4.3.0",
+                        "tslib": "^2.5.0"
+                    },
+                    "dependencies": {
+                        "stylis": {
+                            "version": "4.3.0",
+                            "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz",
+                            "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ=="
+                        }
+                    }
+                },
+                "stylis": {
+                    "version": "4.2.0",
+                    "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+                    "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+                },
+                "to-regex-range": {
+                    "version": "5.0.1",
+                    "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+                    "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+                    "optional": true,
+                    "requires": {
+                        "is-number": "^7.0.0"
+                    }
                 }
             }
         },
@@ -4548,14 +6744,14 @@
             "integrity": "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw=="
         },
         "browserslist": {
-            "version": "4.21.5",
-            "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz",
-            "integrity": "sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==",
+            "version": "4.21.9",
+            "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.9.tgz",
+            "integrity": "sha512-M0MFoZzbUrRU4KNfCrDLnvyE7gub+peetoTid3TBIqtunaDJyXlwhakT+/VkvSXcfIzFfK/nkCs4nmyTmxdNSg==",
             "requires": {
-                "caniuse-lite": "^1.0.30001449",
-                "electron-to-chromium": "^1.4.284",
-                "node-releases": "^2.0.8",
-                "update-browserslist-db": "^1.0.10"
+                "caniuse-lite": "^1.0.30001503",
+                "electron-to-chromium": "^1.4.431",
+                "node-releases": "^2.0.12",
+                "update-browserslist-db": "^1.0.11"
             }
         },
         "bson": {
@@ -4788,9 +6984,9 @@
             "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ=="
         },
         "caniuse-lite": {
-            "version": "1.0.30001451",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001451.tgz",
-            "integrity": "sha512-XY7UbUpGRatZzoRft//5xOa69/1iGJRBlrieH6QYrkKLIFn3m7OVEJ81dSrKoy2BnKsdbX5cLrOispZNYo9v2w=="
+            "version": "1.0.30001514",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001514.tgz",
+            "integrity": "sha512-ENcIpYBmwAAOm/V2cXgM7rZUrKKaqisZl4ZAI520FIkqGXUxJjmaIssbRW5HVVR5tyV6ygTLIm15aU8LUmQSaQ=="
         },
         "canvas": {
             "version": "2.11.0",
@@ -5602,6 +7798,14 @@
             "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.28.0.tgz",
             "integrity": "sha512-GiZn9D4Z/rSYvTeg1ljAIsEqFm0LaN9gVtwDCrKL80zHtS31p9BAjmTxVqTQDMpwlMolJZOFntUG2uwyj7DAqw=="
         },
+        "core-js-compat": {
+            "version": "3.31.1",
+            "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.31.1.tgz",
+            "integrity": "sha512-wIDWd2s5/5aJSdpOJHfSibxNODxoGoWOBHt8JSPB41NOE94M7kuTPZCYLOlTtuoXTsBPKobpJ6T+y0SSy5L9SA==",
+            "requires": {
+                "browserslist": "^4.21.9"
+            }
+        },
         "core-js-pure": {
             "version": "3.28.0",
             "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.28.0.tgz",
@@ -7050,9 +9254,9 @@
             "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
         },
         "electron-to-chromium": {
-            "version": "1.4.295",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.295.tgz",
-            "integrity": "sha512-lEO94zqf1bDA3aepxwnWoHUjA8sZ+2owgcSZjYQy0+uOSEclJX0VieZC+r+wLpSxUHRd6gG32znTWmr+5iGzFw=="
+            "version": "1.4.454",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.454.tgz",
+            "integrity": "sha512-pmf1rbAStw8UEQ0sr2cdJtWl48ZMuPD9Sto8HVQOq9vx9j2WgDEN6lYoaqFvqEHYOmGA9oRGn7LqWI9ta0YugQ=="
         },
         "emoji-regex": {
             "version": "7.0.3",
@@ -9700,6 +11904,11 @@
             "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
             "integrity": "sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q=="
         },
+        "fs-readdir-recursive": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz",
+            "integrity": "sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA=="
+        },
         "fs-write-stream-atomic": {
             "version": "1.0.10",
             "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz",
@@ -9897,6 +12106,11 @@
                 "json-bigint": "^0.3.0"
             }
         },
+        "gensync": {
+            "version": "1.0.0-beta.2",
+            "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+            "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="
+        },
         "get-caller-file": {
             "version": "2.0.5",
             "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -14042,9 +16256,9 @@
             }
         },
         "node-releases": {
-            "version": "2.0.10",
-            "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz",
-            "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w=="
+            "version": "2.0.13",
+            "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
+            "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ=="
         },
         "node-sass": {
             "version": "4.14.1",
@@ -18752,9 +20966,9 @@
             "dev": true
         },
         "popper.js": {
-            "version": "1.16.1-lts",
-            "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
-            "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
+            "version": "1.16.1",
+            "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+            "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
         },
         "portfinder": {
             "version": "1.0.32",
@@ -19916,11 +22130,6 @@
                 "warning": "^4.0.2"
             },
             "dependencies": {
-                "popper.js": {
-                    "version": "1.16.1",
-                    "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-                    "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
-                },
                 "warning": {
                     "version": "4.0.3",
                     "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
@@ -20298,11 +22507,32 @@
                 "@babel/runtime": "^7.9.2"
             }
         },
+        "regenerate": {
+            "version": "1.4.2",
+            "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
+            "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A=="
+        },
+        "regenerate-unicode-properties": {
+            "version": "10.1.0",
+            "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz",
+            "integrity": "sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==",
+            "requires": {
+                "regenerate": "^1.4.2"
+            }
+        },
         "regenerator-runtime": {
             "version": "0.13.11",
             "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
             "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
         },
+        "regenerator-transform": {
+            "version": "0.15.1",
+            "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.1.tgz",
+            "integrity": "sha512-knzmNAcuyxV+gQCufkYcvOqX/qIIfHLv0u5x79kRxuGojfYVky1f15TzZEu2Avte8QGepvUNTnLskf8E6X6Vyg==",
+            "requires": {
+                "@babel/runtime": "^7.8.4"
+            }
+        },
         "regex-not": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
@@ -20333,6 +22563,19 @@
             "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==",
             "dev": true
         },
+        "regexpu-core": {
+            "version": "5.3.2",
+            "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.3.2.tgz",
+            "integrity": "sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==",
+            "requires": {
+                "@babel/regjsgen": "^0.8.0",
+                "regenerate": "^1.4.2",
+                "regenerate-unicode-properties": "^10.1.0",
+                "regjsparser": "^0.9.1",
+                "unicode-match-property-ecmascript": "^2.0.0",
+                "unicode-match-property-value-ecmascript": "^2.1.0"
+            }
+        },
         "registry-auth-token": {
             "version": "3.4.0",
             "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.4.0.tgz",
@@ -20350,6 +22593,21 @@
                 "rc": "^1.0.1"
             }
         },
+        "regjsparser": {
+            "version": "0.9.1",
+            "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.9.1.tgz",
+            "integrity": "sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==",
+            "requires": {
+                "jsesc": "~0.5.0"
+            },
+            "dependencies": {
+                "jsesc": {
+                    "version": "0.5.0",
+                    "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+                    "integrity": "sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA=="
+                }
+            }
+        },
         "rehype-raw": {
             "version": "6.1.1",
             "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-6.1.1.tgz",
@@ -21182,6 +23440,11 @@
             "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
             "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
         },
+        "shallowequal": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+            "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+        },
         "sharp": {
             "version": "0.23.4",
             "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.23.4.tgz",
@@ -21708,6 +23971,11 @@
             "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
             "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
         },
+        "source-map-js": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+            "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+        },
         "source-map-resolve": {
             "version": "0.5.3",
             "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
@@ -22191,18 +24459,13 @@
                     "requires": {
                         "@emotion/memoize": "0.7.4"
                     }
-                },
-                "stylis": {
-                    "version": "3.5.4",
-                    "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
-                    "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q=="
                 }
             }
         },
         "stylis": {
-            "version": "4.1.3",
-            "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz",
-            "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA=="
+            "version": "3.5.4",
+            "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
+            "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q=="
         },
         "stylis-rule-sheet": {
             "version": "0.0.10",
@@ -22515,7 +24778,7 @@
         "to-fast-properties": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-            "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
+            "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog=="
         },
         "to-object-path": {
             "version": "0.3.0",
@@ -23219,6 +25482,30 @@
             "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.6.tgz",
             "integrity": "sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A=="
         },
+        "unicode-canonical-property-names-ecmascript": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
+            "integrity": "sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ=="
+        },
+        "unicode-match-property-ecmascript": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
+            "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
+            "requires": {
+                "unicode-canonical-property-names-ecmascript": "^2.0.0",
+                "unicode-property-aliases-ecmascript": "^2.0.0"
+            }
+        },
+        "unicode-match-property-value-ecmascript": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz",
+            "integrity": "sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA=="
+        },
+        "unicode-property-aliases-ecmascript": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
+            "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w=="
+        },
         "unicode-trie": {
             "version": "0.3.1",
             "resolved": "https://registry.npmjs.org/unicode-trie/-/unicode-trie-0.3.1.tgz",
@@ -23418,9 +25705,9 @@
             "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg=="
         },
         "update-browserslist-db": {
-            "version": "1.0.10",
-            "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz",
-            "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==",
+            "version": "1.0.11",
+            "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",
+            "integrity": "sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==",
             "requires": {
                 "escalade": "^3.1.1",
                 "picocolors": "^1.0.0"
diff --git a/package.json b/package.json
index 6cd271c96..eed85ca6b 100644
--- a/package.json
+++ b/package.json
@@ -177,7 +177,7 @@
         "body-parser": "^1.19.2",
         "bootstrap": "^4.6.1",
         "brotli": "^1.3.3",
-        "browndash-components": "^0.0.28",
+        "browndash-components": "0.0.81",
         "browser-assert": "^1.2.1",
         "bson": "^4.6.1",
         "canvas": "^2.9.3",
diff --git a/report.20230313.165455.65490.0.001.json b/report.20230313.165455.65490.0.001.json
new file mode 100644
index 000000000..689fcf9eb
--- /dev/null
+++ b/report.20230313.165455.65490.0.001.json
@@ -0,0 +1,1294 @@
+
+{
+  "header": {
+    "reportVersion": 1,
+    "event": "Allocation failed - JavaScript heap out of memory",
+    "trigger": "FatalError",
+    "filename": "report.20230313.165455.65490.0.001.json",
+    "dumpEventTime": "2023-03-13T16:54:55Z",
+    "dumpEventTimeStamp": "1678740895169",
+    "processId": 65490,
+    "cwd": "/Users/sarah/Desktop/dash/Dash-Web",
+    "commandLine": [
+      "/Users/sarah/.nvm/versions/node/v12.16.0/bin/node",
+      "--max-old-space-size=2048",
+      "/Users/sarah/Desktop/dash/Dash-Web/node_modules/ts-node-dev/lib/wrap.js",
+      "/Users/sarah/Desktop/dash/Dash-Web/node_modules/fork-ts-checker-webpack-plugin/lib/service.js"
+    ],
+    "nodejsVersion": "v12.16.0",
+    "wordSize": 64,
+    "arch": "x64",
+    "platform": "darwin",
+    "componentVersions": {
+      "node": "12.16.0",
+      "v8": "7.8.279.23-node.31",
+      "uv": "1.34.0",
+      "zlib": "1.2.11",
+      "brotli": "1.0.7",
+      "ares": "1.15.0",
+      "modules": "72",
+      "nghttp2": "1.40.0",
+      "napi": "5",
+      "llhttp": "2.0.4",
+      "http_parser": "2.9.3",
+      "openssl": "1.1.1d",
+      "cldr": "35.1",
+      "icu": "64.2",
+      "tz": "2019c",
+      "unicode": "12.1"
+    },
+    "release": {
+      "name": "node",
+      "lts": "Erbium",
+      "headersUrl": "https://nodejs.org/download/release/v12.16.0/node-v12.16.0-headers.tar.gz",
+      "sourceUrl": "https://nodejs.org/download/release/v12.16.0/node-v12.16.0.tar.gz"
+    },
+    "osName": "Darwin",
+    "osRelease": "20.4.0",
+    "osVersion": "Darwin Kernel Version 20.4.0: Fri Mar  5 01:14:14 PST 2021; root:xnu-7195.101.1~3/RELEASE_X86_64",
+    "osMachine": "x86_64",
+    "cpus": [
+      {
+        "model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
+        "speed": 2300,
+        "user": 95972310,
+        "nice": 0,
+        "sys": 69742110,
+        "idle": 1132989220,
+        "irq": 0
+      },
+      {
+        "model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
+        "speed": 2300,
+        "user": 1235990,
+        "nice": 0,
+        "sys": 1442360,
+        "idle": 1293767630,
+        "irq": 0
+      },
+      {
+        "model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
+        "speed": 2300,
+        "user": 77301330,
+        "nice": 0,
+        "sys": 43426390,
+        "idle": 1175757970,
+        "irq": 0
+      },
+      {
+        "model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
+        "speed": 2300,
+        "user": 1270620,
+        "nice": 0,
+        "sys": 1351190,
+        "idle": 1293823030,
+        "irq": 0
+      },
+      {
+        "model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
+        "speed": 2300,
+        "user": 56966210,
+        "nice": 0,
+        "sys": 28908780,
+        "idle": 1210608910,
+        "irq": 0
+      },
+      {
+        "model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
+        "speed": 2300,
+        "user": 1291530,
+        "nice": 0,
+        "sys": 1265830,
+        "idle": 1293886140,
+        "irq": 0
+      },
+      {
+        "model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
+        "speed": 2300,
+        "user": 46074390,
+        "nice": 0,
+        "sys": 22963990,
+        "idle": 1227443730,
+        "irq": 0
+      },
+      {
+        "model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
+        "speed": 2300,
+        "user": 1311400,
+        "nice": 0,
+        "sys": 1200930,
+        "idle": 1293929770,
+        "irq": 0
+      },
+      {
+        "model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
+        "speed": 2300,
+        "user": 36059780,
+        "nice": 0,
+        "sys": 17309680,
+        "idle": 1243110810,
+        "irq": 0
+      },
+      {
+        "model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
+        "speed": 2300,
+        "user": 1303400,
+        "nice": 0,
+        "sys": 1134770,
+        "idle": 1294002540,
+        "irq": 0
+      },
+      {
+        "model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
+        "speed": 2300,
+        "user": 28665300,
+        "nice": 0,
+        "sys": 12769180,
+        "idle": 1255043860,
+        "irq": 0
+      },
+      {
+        "model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
+        "speed": 2300,
+        "user": 1287310,
+        "nice": 0,
+        "sys": 1073720,
+        "idle": 1294078280,
+        "irq": 0
+      },
+      {
+        "model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
+        "speed": 2300,
+        "user": 22112060,
+        "nice": 0,
+        "sys": 9084160,
+        "idle": 1265280170,
+        "irq": 0
+      },
+      {
+        "model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
+        "speed": 2300,
+        "user": 1256320,
+        "nice": 0,
+        "sys": 1011250,
+        "idle": 1294170360,
+        "irq": 0
+      },
+      {
+        "model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
+        "speed": 2300,
+        "user": 17120610,
+        "nice": 0,
+        "sys": 6395650,
+        "idle": 1272958030,
+        "irq": 0
+      },
+      {
+        "model": "Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz",
+        "speed": 2300,
+        "user": 1227540,
+        "nice": 0,
+        "sys": 963060,
+        "idle": 1294245890,
+        "irq": 0
+      }
+    ],
+    "networkInterfaces": [
+      {
+        "name": "lo0",
+        "internal": true,
+        "mac": "00:00:00:00:00:00",
+        "address": "127.0.0.1",
+        "netmask": "255.0.0.0",
+        "family": "IPv4"
+      },
+      {
+        "name": "lo0",
+        "internal": true,
+        "mac": "00:00:00:00:00:00",
+        "address": "::1",
+        "netmask": "ffff:ffff:ffff:ffff:ffff:ffff:ffff:ffff",
+        "family": "IPv6",
+        "scopeid": 0
+      },
+      {
+        "name": "lo0",
+        "internal": true,
+        "mac": "00:00:00:00:00:00",
+        "address": "fe80::1",
+        "netmask": "ffff:ffff:ffff:ffff::",
+        "family": "IPv6",
+        "scopeid": 1
+      },
+      {
+        "name": "en0",
+        "internal": false,
+        "mac": "88:66:5a:29:28:77",
+        "address": "fe80::cc1:cf3b:afa2:144f",
+        "netmask": "ffff:ffff:ffff:ffff::",
+        "family": "IPv6",
+        "scopeid": 6
+      },
+      {
+        "name": "en0",
+        "internal": false,
+        "mac": "88:66:5a:29:28:77",
+        "address": "2620:6e:6000:3100:148e:201a:1a33:145d",
+        "netmask": "ffff:ffff:ffff:ffff::",
+        "family": "IPv6",
+        "scopeid": 0
+      },
+      {
+        "name": "en0",
+        "internal": false,
+        "mac": "88:66:5a:29:28:77",
+        "address": "2620:6e:6000:3100:31e4:88bf:1195:6926",
+        "netmask": "ffff:ffff:ffff:ffff::",
+        "family": "IPv6",
+        "scopeid": 0
+      },
+      {
+        "name": "en0",
+        "internal": false,
+        "mac": "88:66:5a:29:28:77",
+        "address": "fdac:89a:4f49:41ac:83d:26cd:abc5:e973",
+        "netmask": "ffff:ffff:ffff:ffff::",
+        "family": "IPv6",
+        "scopeid": 0
+      },
+      {
+        "name": "en0",
+        "internal": false,
+        "mac": "88:66:5a:29:28:77",
+        "address": "fdac:89a:4f49:41ac:15b2:4a9e:88a9:34c3",
+        "netmask": "ffff:ffff:ffff:ffff::",
+        "family": "IPv6",
+        "scopeid": 0
+      },
+      {
+        "name": "en0",
+        "internal": false,
+        "mac": "88:66:5a:29:28:77",
+        "address": "10.38.53.246",
+        "netmask": "255.255.192.0",
+        "family": "IPv4"
+      },
+      {
+        "name": "en0",
+        "internal": false,
+        "mac": "88:66:5a:29:28:77",
+        "address": "fd8c:23f:4de7:4523:cc7:18bd:a001:a86b",
+        "netmask": "ffff:ffff:ffff:ffff::",
+        "family": "IPv6",
+        "scopeid": 0
+      },
+      {
+        "name": "en0",
+        "internal": false,
+        "mac": "88:66:5a:29:28:77",
+        "address": "fd8c:23f:4de7:4523:6cbc:dfb0:da3f:fa06",
+        "netmask": "ffff:ffff:ffff:ffff::",
+        "family": "IPv6",
+        "scopeid": 0
+      },
+      {
+        "name": "en0",
+        "internal": false,
+        "mac": "88:66:5a:29:28:77",
+        "address": "fdc9:5cae:17e4:4c54:c1e:4892:ccc4:93ae",
+        "netmask": "ffff:ffff:ffff:ffff::",
+        "family": "IPv6",
+        "scopeid": 0
+      },
+      {
+        "name": "en0",
+        "internal": false,
+        "mac": "88:66:5a:29:28:77",
+        "address": "fdc9:5cae:17e4:4c54:307f:315d:52f7:511f",
+        "netmask": "ffff:ffff:ffff:ffff::",
+        "family": "IPv6",
+        "scopeid": 0
+      },
+      {
+        "name": "en0",
+        "internal": false,
+        "mac": "88:66:5a:29:28:77",
+        "address": "fdd3:9b36:2480:4c6f:cff:ec25:4ee6:54c",
+        "netmask": "ffff:ffff:ffff:ffff::",
+        "family": "IPv6",
+        "scopeid": 0
+      },
+      {
+        "name": "en0",
+        "internal": false,
+        "mac": "88:66:5a:29:28:77",
+        "address": "fdd3:9b36:2480:4c6f:9dba:7458:3932:be33",
+        "netmask": "ffff:ffff:ffff:ffff::",
+        "family": "IPv6",
+        "scopeid": 0
+      },
+      {
+        "name": "awdl0",
+        "internal": false,
+        "mac": "a6:20:c0:51:e8:8f",
+        "address": "fe80::a420:c0ff:fe51:e88f",
+        "netmask": "ffff:ffff:ffff:ffff::",
+        "family": "IPv6",
+        "scopeid": 12
+      },
+      {
+        "name": "llw0",
+        "internal": false,
+        "mac": "a6:20:c0:51:e8:8f",
+        "address": "fe80::a420:c0ff:fe51:e88f",
+        "netmask": "ffff:ffff:ffff:ffff::",
+        "family": "IPv6",
+        "scopeid": 13
+      },
+      {
+        "name": "utun0",
+        "internal": false,
+        "mac": "00:00:00:00:00:00",
+        "address": "fe80::15ac:b094:e48b:b227",
+        "netmask": "ffff:ffff:ffff:ffff::",
+        "family": "IPv6",
+        "scopeid": 14
+      },
+      {
+        "name": "utun1",
+        "internal": false,
+        "mac": "00:00:00:00:00:00",
+        "address": "fe80::97ec:93db:83a3:75ce",
+        "netmask": "ffff:ffff:ffff:ffff::",
+        "family": "IPv6",
+        "scopeid": 15
+      },
+      {
+        "name": "en5",
+        "internal": false,
+        "mac": "ac:de:48:00:11:22",
+        "address": "fe80::aede:48ff:fe00:1122",
+        "netmask": "ffff:ffff:ffff:ffff::",
+        "family": "IPv6",
+        "scopeid": 5
+      }
+    ],
+    "host": "sarahs-mbp.devices.brown.edu"
+  },
+  "javascriptStack": {
+    "message": "No stack.",
+    "stack": [
+      "Unavailable."
+    ]
+  },
+  "nativeStack": [
+    {
+      "pc": "0x000000010015c8ca",
+      "symbol": "report::TriggerNodeReport(v8::Isolate*, node::Environment*, char const*, char const*, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> > const&, v8::Local<v8::String>) [/Users/sarah/.nvm/versions/node/v12.16.0/bin/node]"
+    },
+    {
+      "pc": "0x0000000100080f3e",
+      "symbol": "node::OnFatalError(char const*, char const*) [/Users/sarah/.nvm/versions/node/v12.16.0/bin/node]"
+    },
+    {
+      "pc": "0x0000000100185467",
+      "symbol": "v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/Users/sarah/.nvm/versions/node/v12.16.0/bin/node]"
+    },
+    {
+      "pc": "0x0000000100185403",
+      "symbol": "v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/Users/sarah/.nvm/versions/node/v12.16.0/bin/node]"
+    },
+    {
+      "pc": "0x000000010030b5f5",
+      "symbol": "v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/Users/sarah/.nvm/versions/node/v12.16.0/bin/node]"
+    },
+    {
+      "pc": "0x000000010030ccc4",
+      "symbol": "v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [/Users/sarah/.nvm/versions/node/v12.16.0/bin/node]"
+    },
+    {
+      "pc": "0x0000000100309b37",
+      "symbol": "v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/Users/sarah/.nvm/versions/node/v12.16.0/bin/node]"
+    },
+    {
+      "pc": "0x0000000100307afd",
+      "symbol": "v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/Users/sarah/.nvm/versions/node/v12.16.0/bin/node]"
+    },
+    {
+      "pc": "0x00000001003132ba",
+      "symbol": "v8::internal::Heap::AllocateRawWithLightRetry(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/Users/sarah/.nvm/versions/node/v12.16.0/bin/node]"
+    },
+    {
+      "pc": "0x0000000100313341",
+      "symbol": "v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/Users/sarah/.nvm/versions/node/v12.16.0/bin/node]"
+    },
+    {
+      "pc": "0x00000001002e065b",
+      "symbol": "v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/Users/sarah/.nvm/versions/node/v12.16.0/bin/node]"
+    },
+    {
+      "pc": "0x0000000100618a18",
+      "symbol": "v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/Users/sarah/.nvm/versions/node/v12.16.0/bin/node]"
+    },
+    {
+      "pc": "0x0000000100950c19",
+      "symbol": "Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/Users/sarah/.nvm/versions/node/v12.16.0/bin/node]"
+    }
+  ],
+  "javascriptHeap": {
+    "totalMemory": 2151882752,
+    "totalCommittedMemory": 2149824464,
+    "usedMemory": 2139828064,
+    "availableMemory": 48165544,
+    "memoryLimit": 2197815296,
+    "heapSpaces": {
+      "read_only_space": {
+        "memorySize": 262144,
+        "committedMemory": 33088,
+        "capacity": 32808,
+        "used": 32808,
+        "available": 0
+      },
+      "new_space": {
+        "memorySize": 2097152,
+        "committedMemory": 1076448,
+        "capacity": 1047456,
+        "used": 28792,
+        "available": 1018664
+      },
+      "old_space": {
+        "memorySize": 1958100992,
+        "committedMemory": 1957877576,
+        "capacity": 1951020152,
+        "used": 1950853272,
+        "available": 166880
+      },
+      "code_space": {
+        "memorySize": 15372288,
+        "committedMemory": 14957376,
+        "capacity": 13767968,
+        "used": 13767968,
+        "available": 0
+      },
+      "map_space": {
+        "memorySize": 1576960,
+        "committedMemory": 1406760,
+        "capacity": 1236000,
+        "used": 1236000,
+        "available": 0
+      },
+      "large_object_space": {
+        "memorySize": 174424064,
+        "committedMemory": 174424064,
+        "capacity": 173906440,
+        "used": 173906440,
+        "available": 0
+      },
+      "code_large_object_space": {
+        "memorySize": 49152,
+        "committedMemory": 49152,
+        "capacity": 2784,
+        "used": 2784,
+        "available": 0
+      },
+      "new_large_object_space": {
+        "memorySize": 0,
+        "committedMemory": 0,
+        "capacity": 1047456,
+        "used": 0,
+        "available": 1047456
+      }
+    }
+  },
+  "resourceUsage": {
+    "userCpuSeconds": 302.098,
+    "kernelCpuSeconds": 7.74276,
+    "cpuConsumptionPercent": 10.3834,
+    "maxRss": 2286298333184,
+    "pageFaults": {
+      "IORequired": 35,
+      "IONotRequired": 2289110
+    },
+    "fsActivity": {
+      "reads": 0,
+      "writes": 0
+    }
+  },
+  "libuv": [
+  ],
+  "environmentVariables": {
+    "npm_config_save_dev": "",
+    "npm_config_legacy_bundling": "",
+    "npm_config_dry_run": "",
+    "npm_package_dependencies_translate_google_api": "^1.0.4",
+    "npm_package_dependencies_request": "^2.88.2",
+    "npm_package_dependencies_express_flash": "0.0.2",
+    "npm_package_dependencies__fortawesome_fontawesome_svg_core": "^1.3.0",
+    "NVM_INC": "/Users/sarah/.nvm/versions/node/v12.16.0/include/node",
+    "npm_config_viewer": "man",
+    "npm_config_only": "",
+    "npm_config_commit_hooks": "true",
+    "npm_config_browser": "",
+    "npm_package_gitHead": "4c2584baf8bae0cde714c832b0768d3c08864422",
+    "npm_package_dependencies_webpack_dev_middleware": "^5.3.1",
+    "npm_package_dependencies_webpack_cli": "^4.10.0",
+    "npm_package_devDependencies_prettier": "^2.7.1",
+    "npm_package_devDependencies_awesome_typescript_loader": "^5.2.1",
+    "npm_package_devDependencies__types_archiver": "^3.1.1",
+    "npm_config_also": "",
+    "npm_package_dependencies_react_jsx_parser": "^1.29.0",
+    "npm_package_dependencies_mongoose": "^5.13.14",
+    "npm_package_dependencies_connect_flash": "^0.1.1",
+    "npm_package_browser_child_process": "false",
+    "npm_config_sign_git_commit": "",
+    "npm_config_rollback": "true",
+    "npm_package_dependencies_material_ui": "^0.20.2",
+    "npm_package_devDependencies__types_sharp": "^0.23.1",
+    "npm_package_devDependencies__types_passport_local": "^1.0.34",
+    "npm_package_devDependencies__types_dotenv": "^6.1.1",
+    "npm_package_devDependencies__types_cookie_parser": "^1.4.2",
+    "TERM_PROGRAM": "Apple_Terminal",
+    "NODE": "/Users/sarah/.nvm/versions/node/v12.16.0/bin/node",
+    "npm_config_usage": "",
+    "npm_config_audit": "true",
+    "npm_package_dependencies_reveal_js": "^4.3.0",
+    "npm_package_dependencies_process": "^0.11.10",
+    "npm_package_dependencies_pdfjs": "^2.4.7",
+    "npm_package_dependencies_html_to_image": "^0.1.3",
+    "npm_package_devDependencies_file_loader": "^3.0.1",
+    "npm_package_devDependencies__types_express_flash": "0.0.0",
+    "npm_package_scripts_monitor": "cross-env MONITORED=true NODE_OPTIONS=--max_old_space_size=4096 ts-node src/server/index.ts",
+    "INIT_CWD": "/Users/sarah/Desktop/dash/Dash-Web",
+    "npm_package_dependencies_rehype_raw": "^6.1.1",
+    "npm_package_dependencies_react_audio_waveform": "0.0.5",
+    "npm_package_dependencies_path_browserify": "^1.0.1",
+    "npm_package_dependencies_nodemailer": "^5.1.1",
+    "npm_package_dependencies_axios": "^0.19.2",
+    "npm_package_devDependencies_typescript": "^4.7.4",
+    "NVM_CD_FLAGS": "-q",
+    "npm_config_globalignorefile": "/Users/sarah/.nvm/versions/node/v12.16.0/etc/npmignore",
+    "npm_package_dependencies_react_grid_layout": "^1.3.4",
+    "npm_package_dependencies_prosemirror_find_replace": "^0.9.0",
+    "npm_package_dependencies_normalize_css": "^8.0.1",
+    "npm_package_devDependencies_mocha": "^5.2.0",
+    "npm_package_devDependencies__types_express_session": "^1.17.5",
+    "SHELL": "/bin/zsh",
+    "TERM": "xterm-256color",
+    "npm_config_shell": "/bin/zsh",
+    "npm_config_maxsockets": "50",
+    "npm_config_init_author_url": "",
+    "npm_package_dependencies_prosemirror_dev_tools": "^3.1.0",
+    "npm_package_dependencies_p_limit": "^2.2.0",
+    "npm_package_dependencies_bson": "^4.6.1",
+    "npm_package_dependencies__types_dom_speech_recognition": "0.0.1",
+    "npm_package_devDependencies_style_loader": "^0.23.1",
+    "npm_package_devDependencies__types_react_datepicker": "^3.1.8",
+    "npm_config_shrinkwrap": "true",
+    "npm_config_parseable": "",
+    "npm_config_metrics_registry": "https://registry.npmjs.org/",
+    "npm_package_dependencies_xregexp": "^4.4.1",
+    "npm_package_dependencies_shelljs": "^0.8.5",
+    "npm_package_dependencies_bezier_curve": "^1.0.0",
+    "npm_package_devDependencies_tslint": "^5.20.1",
+    "npm_package_devDependencies__types_react_transition_group": "^4.4.5",
+    "npm_package_scripts_tsc": "tsc",
+    "TMPDIR": "/var/folders/yk/p_39q8jn673c5p8_66mcxm7r0000gn/T/",
+    "npm_config_timing": "",
+    "npm_config_init_license": "ISC",
+    "npm_package_dependencies_socket_io": "^2.5.0",
+    "npm_package_dependencies_probe_image_size": "^4.0.0",
+    "npm_package_dependencies_canvas": "^2.9.3",
+    "npm_package_dependencies__hig_theme_data": "^2.23.1",
+    "npm_package_devDependencies__types_react_select": "^3.1.2",
+    "npm_package_devDependencies__types_prosemirror_model": "^1.16.1",
+    "CONDA_SHLVL": "1",
+    "npm_config_if_present": "",
+    "npm_package_dependencies_typescript_collections": "^1.3.3",
+    "npm_package_dependencies_rimraf": "^3.0.0",
+    "npm_package_dependencies_react_autosuggest": "^9.4.3",
+    "npm_package_dependencies_flexlayout_react": "^0.3.11",
+    "npm_package_dependencies_find_in_files": "^0.5.0",
+    "npm_package_devDependencies__types_chai": "^4.3.0",
+    "CONDA_PROMPT_MODIFIER": "(base) ",
+    "TERM_PROGRAM_VERSION": "440",
+    "npm_package_dependencies_prosemirror_inputrules": "^1.1.3",
+    "npm_package_dependencies_bcrypt_nodejs": "0.0.3",
+    "npm_package_dependencies_async": "^2.6.2",
+    "npm_config_sign_git_tag": "",
+    "npm_config_init_author_email": "",
+    "npm_config_cache_max": "Infinity",
+    "npm_package_dependencies_uuid": "^3.4.0",
+    "npm_package_dependencies_supercluster": "^7.1.4",
+    "npm_package_dependencies_remark_gfm": "^3.0.1",
+    "npm_package_dependencies_connect_mongo": "^2.0.3",
+    "npm_package_dependencies_browser_assert": "^1.2.1",
+    "npm_package_devDependencies_sass_loader": "^7.3.1",
+    "npm_config_preid": "",
+    "npm_config_long": "",
+    "npm_config_local_address": "",
+    "npm_config_git_tag_version": "true",
+    "npm_config_cert": "",
+    "npm_package_dependencies_js_datepicker": "^4.6.6",
+    "npm_package_devDependencies__types_webpack_hot_middleware": "^2.25.6",
+    "npm_package_devDependencies__types_mongodb": "^3.6.20",
+    "npm_package_devDependencies__types_mocha": "^5.2.6",
+    "TERM_SESSION_ID": "BF3A3D73-8B2D-4041-BAFA-CCC983EE3D05",
+    "npm_config_registry": "https://registry.npmjs.org/",
+    "npm_config_noproxy": "",
+    "npm_config_fetch_retries": "2",
+    "npm_package_dependencies_react_compound_slider": "^2.5.0",
+    "npm_package_dependencies_prosemirror_history": "^1.2.0",
+    "npm_package_devDependencies__types_react_color": "^2.17.6",
+    "npm_package_devDependencies__types_google_maps_react": "^2.0.5",
+    "npm_package_devDependencies__types_color": "^3.0.3",
+    "npm_package_dependencies_react_dom": "^18.2.0",
+    "npm_package_dependencies_passport_local": "^1.0.0",
+    "npm_package_dependencies__octokit_core": "^4.0.4",
+    "npm_package_devDependencies__types_async": "^2.4.1",
+    "npm_package_scripts_debug": "cross-env NODE_OPTIONS=--max_old_space_size=8192 ts-node-dev --transpile-only --inspect -- src/server/index.ts",
+    "npm_package_scripts_oldstart": "cross-env NODE_OPTIONS=--max_old_space_size=4096 ts-node-dev --debug -- src/server/index.ts",
+    "npm_config_versions": "",
+    "npm_config_message": "%s",
+    "npm_config_key": "",
+    "npm_package_readmeFilename": "README.md",
+    "npm_package_dependencies_react_refresh_typescript": "^2.0.7",
+    "npm_package_dependencies_image_size": "^0.7.5",
+    "npm_package_dependencies_html_to_text": "^5.1.1",
+    "npm_package_dependencies_express_validator": "^5.3.1",
+    "npm_package_devDependencies_eslint_plugin_jsx_a11y": "^6.6.0",
+    "npm_package_node_child_process": "empty",
+    "npm_package_dependencies_react_resizable_rotatable_draggable": "^0.2.0",
+    "npm_package_dependencies_got": "^12.0.1",
+    "npm_package_dependencies__types_d3_color": "^2.0.3",
+    "npm_package_devDependencies_webpack": "^5.69.1",
+    "npm_package_devDependencies__types_nodemailer": "^4.6.6",
+    "npm_package_description": "Install Node.js, then, from the project directory, run",
+    "NVM_DIR": "/Users/sarah/.nvm",
+    "USER": "sarah",
+    "npm_package_dependencies__types_d3_scale": "^3.3.2",
+    "npm_package_devDependencies_dotenv": "^8.6.0",
+    "npm_package_devDependencies__types_react": "^18.0.15",
+    "npm_package_devDependencies__types_prosemirror_transform": "^1.1.5",
+    "npm_package_devDependencies__types_prosemirror_history": "^1.0.3",
+    "npm_package_dependencies_readline": "^1.3.0",
+    "npm_package_dependencies__types_supercluster": "^7.1.0",
+    "npm_config_globalconfig": "/Users/sarah/.nvm/versions/node/v12.16.0/etc/npmrc",
+    "npm_package_dependencies_depcheck": "^0.9.2",
+    "npm_package_dependencies__types_web": "0.0.53",
+    "CONDA_EXE": "/Users/sarah/miniconda3/bin/conda",
+    "npm_config_prefer_online": "",
+    "npm_config_logs_max": "10",
+    "npm_config_always_auth": "",
+    "npm_package_dependencies_react_icons": "^4.3.1",
+    "npm_package_dependencies_passport_google_oauth20": "^2.0.0",
+    "npm_package_devDependencies_webpack_dev_server": "^3.11.3",
+    "npm_package_dependencies_url_loader": "^1.1.2",
+    "npm_package_dependencies_stream_browserify": "^3.0.0",
+    "npm_package_dependencies_prosemirror_transform": "^1.3.4",
+    "npm_package_dependencies_lodash": "^4.17.21",
+    "npm_package_dependencies_i": "^0.3.7",
+    "npm_package_devDependencies_tslint_loader": "^3.6.0",
+    "SSH_AUTH_SOCK": "/private/tmp/com.apple.launchd.TKuATvqs9j/Listeners",
+    "npm_package_dependencies_words_to_numbers": "^1.5.1",
+    "npm_package_dependencies_valid_url": "^1.0.9",
+    "npm_package_dependencies_styled_components": "^4.4.1",
+    "npm_package_dependencies_class_transformer": "^0.2.0",
+    "npm_package_devDependencies_eslint": "^8.18.0",
+    "npm_package_devDependencies__types_prosemirror_inputrules": "^1.0.4",
+    "npm_package_devDependencies__types_express": "^4.17.13",
+    "__CF_USER_TEXT_ENCODING": "0x1F5:0x0:0x0",
+    "npm_execpath": "/Users/sarah/.nvm/versions/node/v12.16.0/lib/node_modules/npm/bin/npm-cli.js",
+    "npm_config_global_style": "",
+    "npm_config_cache_lock_retries": "10",
+    "npm_package_dependencies_wikijs": "^6.3.3",
+    "npm_package_dependencies_bluebird": "^3.7.2",
+    "npm_config_update_notifier": "true",
+    "npm_config_cafile": "",
+    "npm_package_dependencies_util": "^0.12.4",
+    "npm_package_dependencies_raw_loader": "^1.0.0",
+    "npm_package_dependencies_https_browserify": "^1.0.0",
+    "npm_package_dependencies__fortawesome_react_fontawesome": "^0.1.19",
+    "npm_package_devDependencies__types_passport_google_oauth20": "^2.0.11",
+    "npm_package_dependencies_cors": "^2.8.5",
+    "npm_package_dependencies_bezier_js": "^4.1.1",
+    "npm_package_dependencies__fortawesome_free_brands_svg_icons": "^5.15.4",
+    "npm_config_heading": "npm",
+    "npm_config_audit_level": "low",
+    "npm_package_dependencies_chrome": "^0.1.0",
+    "npm_package_dependencies__react_three_fiber": "^6.2.3",
+    "npm_package_devDependencies_eslint_plugin_prettier": "^4.2.1",
+    "npm_package_devDependencies_copy_webpack_plugin": "^4.6.0",
+    "npm_package_devDependencies__types_react_measure": "^2.0.8",
+    "npm_package_devDependencies__types_react_dom": "^18.0.6",
+    "npm_package_devDependencies__types_mobile_detect": "^1.3.4",
+    "_CE_CONDA": "",
+    "npm_config_searchlimit": "20",
+    "npm_config_read_only": "",
+    "npm_config_offline": "",
+    "npm_config_fetch_retry_mintimeout": "10000",
+    "npm_package_dependencies_mobx_react_devtools": "^6.1.1",
+    "npm_package_dependencies_md5_file": "^5.0.0",
+    "npm_package_dependencies_forever_agent": "^0.6.1",
+    "npm_package_devDependencies__types_xregexp": "^4.4.0",
+    "npm_package_devDependencies__types_typescript": "^2.0.0",
+    "npm_package_devDependencies__types_request": "^2.48.8",
+    "npm_package_devDependencies__types_prosemirror_commands": "^1.0.4",
+    "npm_config_json": "",
+    "npm_config_access": "",
+    "npm_config_argv": "{\"remain\":[],\"cooked\":[\"start\"],\"original\":[\"start\"]}",
+    "npm_package_dependencies__fortawesome_free_solid_svg_icons": "^5.15.4",
+    "npm_package_devDependencies__types_socket_io": "^2.1.13",
+    "PATH": "/Users/sarah/.nvm/versions/node/v12.16.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/sarah/Desktop/dash/Dash-Web/node_modules/.bin:/Users/sarah/.nvm/versions/node/v12.16.0/bin:/Users/sarah/miniconda3/bin:/Users/sarah/miniconda3/condabin:/Users/sarah/.elan/bin:/Library/Frameworks/Python.framework/Versions/3.9/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin",
+    "npm_config_allow_same_version": "",
+    "npm_package_dependencies_webrtc_adapter": "^7.7.1",
+    "npm_package_dependencies_react_reveal": "^1.2.2",
+    "npm_package_dependencies_prosemirror_schema_list": "^1.1.6",
+    "npm_package_dependencies__material_ui_core": "^4.12.3",
+    "npm_package_devDependencies__types_rimraf": "^2.0.5",
+    "npm_package_devDependencies__types_connect_flash": "0.0.34",
+    "npm_config_https_proxy": "",
+    "npm_config_engine_strict": "",
+    "npm_config_description": "true",
+    "npm_package_dependencies_pug": "^2.0.4",
+    "npm_package_dependencies_prosemirror_keymap": "^1.1.5",
+    "npm_package_dependencies_pdfjs_dist": "^2.14.305",
+    "npm_package_dependencies_mobile_detect": "^1.4.5",
+    "npm_package_dependencies_image_size_stream": "^1.1.0",
+    "npm_package_dependencies_golden_layout": "^1.5.9",
+    "npm_package_dependencies_child_process": "^1.0.2",
+    "npm_package_dependencies__types_d3_axis": "^2.1.3",
+    "_": "/Users/sarah/Desktop/dash/Dash-Web/node_modules/.bin/cross-env",
+    "npm_config_userconfig": "/Users/sarah/.npmrc",
+    "npm_config_init_module": "/Users/sarah/.npm-init.js",
+    "npm_package_dependencies__react_google_maps_api": "^2.7.0",
+    "CONDA_PREFIX": "/Users/sarah/miniconda3",
+    "__CFBundleIdentifier": "com.apple.Terminal",
+    "npm_config_cidr": "",
+    "npm_package_dependencies_puppeteer": "^3.3.0",
+    "npm_package_dependencies_prosemirror_view": "^1.26.5",
+    "npm_package_dependencies_mongodb": "^3.7.3",
+    "npm_package_dependencies_google_auth_library": "^4.2.4",
+    "npm_package_dependencies_bootstrap": "^4.6.1",
+    "npm_package_devDependencies_eslint_config_airbnb": "^19.0.4",
+    "PWD": "/Users/sarah/desktop/dash/dash-web",
+    "npm_config_user": "501",
+    "npm_config_node_version": "12.16.0",
+    "npm_package_dependencies_node_sass": "^4.14.1",
+    "npm_package_dependencies_howler": "^2.2.3",
+    "npm_package_dependencies_expressjs": "^1.0.1",
+    "npm_package_dependencies_core_js": "^3.28.0",
+    "npm_package_dependencies_browndash_components": "0.0.22",
+    "npm_package_devDependencies_eslint_plugin_react_hooks": "^4.6.0",
+    "npm_package_devDependencies__types_lodash": "^4.14.179",
+    "JAVA_HOME": "/Library/Java/JavaVirtualMachines/jdk1.8.0_341.jdk/Contents/Home",
+    "npm_lifecycle_event": "start",
+    "npm_package_dependencies_react_table": "^6.11.5",
+    "npm_package_dependencies_react_loading": "^2.0.3",
+    "npm_package_dependencies_mobx": "^5.15.7",
+    "npm_package_dependencies_babel": "^6.23.0",
+    "npm_package_devDependencies_jsdom": "^15.2.1",
+    "npm_package_devDependencies_chai": "^4.3.6",
+    "npm_config_save": "true",
+    "npm_config_ignore_prepublish": "",
+    "npm_config_editor": "vi",
+    "npm_config_auth_type": "legacy",
+    "npm_package_dependencies_npm": "^6.14.18",
+    "npm_package_dependencies_node_stream_zip": "^1.15.0",
+    "npm_package_dependencies_image_data_uri": "^2.0.1",
+    "npm_package_scripts_start_release": "cross-env RELEASE=true NODE_OPTIONS=--max_old_space_size=4096 ts-node-dev -- src/server/index.ts",
+    "npm_package_name": "dash",
+    "LANG": "en_US.UTF-8",
+    "npm_config_tag": "latest",
+    "npm_config_script_shell": "",
+    "npm_package_dependencies_query_string": "^6.14.1",
+    "npm_package_dependencies_mobx_utils": "^5.6.2",
+    "npm_package_dependencies_file_saver": "^2.0.5",
+    "npm_package_dependencies_body_parser": "^1.19.2",
+    "npm_package_dependencies__types_reveal": "^3.3.33",
+    "npm_package_devDependencies_eslint_plugin_import": "^2.26.0",
+    "npm_package_devDependencies__types_prosemirror_view": "^1.23.1",
+    "npm_config_progress": "true",
+    "npm_config_global": "",
+    "npm_config_before": "",
+    "npm_package_dependencies_xoauth2": "^1.2.0",
+    "npm_package_dependencies_standard_http_error": "^2.0.1",
+    "npm_package_dependencies_http_browserify": "^1.7.0",
+    "npm_package_dependencies__types_d3_selection": "^2.0.1",
+    "npm_package_dependencies__hig_flyout": "^1.3.1",
+    "npm_package_devDependencies_fork_ts_checker_webpack_plugin": "^1.6.0",
+    "npm_package_scripts_build": "cross-env NODE_OPTIONS=--max_old_space_size=8192 webpack --env production",
+    "npm_package_scripts_start": "cross-env NODE_OPTIONS=--max_old_space_size=4096 ts-node-dev --debug --transpile-only -- src/server/index.ts",
+    "npm_config_searchstaleness": "900",
+    "npm_config_optional": "true",
+    "npm_config_ham_it_up": "",
+    "npm_package_dependencies_sharp": "^0.23.4",
+    "npm_package_dependencies_rc_switch": "^1.9.2",
+    "npm_package_dependencies_googlephotos": "^0.2.5",
+    "npm_package_dependencies_exifr": "^7.1.3",
+    "npm_package_dependencies__types_google_maps": "^3.2.3",
+    "npm_package_dependencies__types_bezier_js": "^4.1.0",
+    "npm_package_dependencies__ffmpeg_core": "0.10.0",
+    "npm_package_devDependencies_ts_loader": "^5.3.3",
+    "npm_package_devDependencies__types_bcrypt_nodejs": "0.0.30",
+    "XPC_FLAGS": "0x0",
+    "npm_config_save_prod": "",
+    "npm_config_force": "",
+    "npm_config_bin_links": "true",
+    "npm_package_devDependencies__types_youtube": "0.0.39",
+    "npm_config_searchopts": "",
+    "npm_package_dependencies_react_beautiful_dnd": "^13.1.0",
+    "npm_package_dependencies_jszip": "^3.7.1",
+    "npm_package_devDependencies__types_react_icons": "^3.0.0",
+    "npm_config_node_gyp": "/Users/sarah/.nvm/versions/node/v12.16.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js",
+    "npm_config_depth": "Infinity",
+    "npm_package_dependencies_google_maps_react": "^2.0.6",
+    "npm_package_dependencies_express_session": "^1.17.2",
+    "npm_package_devDependencies_eslint_plugin_node": "^11.1.0",
+    "npm_package_devDependencies_eslint_config_prettier": "^8.5.0",
+    "npm_package_main": "index.js",
+    "npm_config_sso_poll_frequency": "500",
+    "npm_config_rebuild_bundle": "true",
+    "npm_package_devDependencies__types_prosemirror_menu": "^1.0.6",
+    "npm_package_devDependencies__types_prosemirror_keymap": "^1.0.4",
+    "npm_package_devDependencies__types_pdfjs_dist": "^2.10.378",
+    "npm_package_devDependencies__types_exif": "^0.6.3",
+    "npm_package_version": "1.0.0",
+    "_CE_M": "",
+    "XPC_SERVICE_NAME": "0",
+    "npm_config_unicode": "true",
+    "npm_package_dependencies_typescript_language_server": "^0.4.0",
+    "npm_package_dependencies_prosemirror_model": "^1.18.1",
+    "npm_package_dependencies__ffmpeg_ffmpeg": "0.10.0",
+    "SHLVL": "2",
+    "HOME": "/Users/sarah",
+    "npm_config_fetch_retry_maxtimeout": "60000",
+    "npm_package_dependencies_request_promise": "^4.2.6",
+    "npm_package_dependencies_react_markdown": "^8.0.3",
+    "npm_package_dependencies__hig_theme_context": "^2.1.3",
+    "npm_package_devDependencies__types_react_autosuggest": "^9.3.14",
+    "npm_package_devDependencies__types_mongoose": "^5.11.97",
+    "npm_package_devDependencies__types_animejs": "^2.0.2",
+    "npm_package_scripts_test": "mocha -r ts-node/register test/**/*.ts",
+    "npm_config_tag_version_prefix": "v",
+    "npm_config_strict_ssl": "true",
+    "npm_config_sso_type": "oauth",
+    "npm_config_scripts_prepend_node_path": "warn-only",
+    "npm_config_save_prefix": "^",
+    "npm_config_loglevel": "notice",
+    "npm_config_ca": "",
+    "npm_package_dependencies_three": "^0.127.0",
+    "npm_package_dependencies_mobx_react": "^5.4.4",
+    "npm_package_dependencies_cookie_parser": "^1.4.6",
+    "npm_package_dependencies_adm_zip": "^0.4.16",
+    "npm_package_devDependencies_eslint_config_node": "^4.1.0",
+    "npm_config_save_exact": "",
+    "npm_config_group": "20",
+    "npm_config_fetch_retry_factor": "10",
+    "npm_config_dev": "",
+    "npm_package_devDependencies_webpack_hot_middleware": "^2.25.1",
+    "npm_package_devDependencies_cross_env": "^5.2.1",
+    "npm_config_version": "",
+    "npm_config_prefer_offline": "",
+    "npm_config_cache_lock_stale": "60000",
+    "npm_package_devDependencies__types_prosemirror_state": "^1.2.8",
+    "npm_package_devDependencies__types_body_parser": "^1.19.2",
+    "npm_config_otp": "",
+    "npm_config_cache_min": "10",
+    "npm_package_dependencies_react_color": "^2.19.3",
+    "npm_package_devDependencies_ts_node": "^10.9.1",
+    "npm_package_devDependencies__types_react_grid_layout": "^1.3.2",
+    "npm_config_searchexclude": "",
+    "npm_config_cache": "/Users/sarah/.npm",
+    "npm_package_dependencies_tough_cookie": "^4.0.0",
+    "npm_package_dependencies_googleapis": "^40.0.0",
+    "npm_package_devDependencies__types_valid_url": "^1.0.3",
+    "npm_package_devDependencies__types_passport": "^1.0.9",
+    "npm_package_devDependencies__types_adm_zip": "^0.4.34",
+    "CONDA_PYTHON_EXE": "/Users/sarah/miniconda3/bin/python",
+    "LOGNAME": "sarah",
+    "npm_lifecycle_script": "cross-env NODE_OPTIONS=--max_old_space_size=4096 ts-node-dev --debug --transpile-only -- src/server/index.ts",
+    "npm_config_color": "true",
+    "npm_package_dependencies_solr_node": "^1.2.1",
+    "npm_package_dependencies_react_transition_group": "^4.4.2",
+    "npm_package_dependencies_iink_js": "^1.5.4",
+    "npm_package_dependencies_html_webpack_plugin": "^5.5.0",
+    "npm_config_proxy": "",
+    "npm_config_package_lock": "true",
+    "npm_package_dependencies_prosemirror_state": "^1.4.1",
+    "npm_package_dependencies_nodemon": "^1.19.4",
+    "npm_package_dependencies_function_plot": "^1.22.8",
+    "npm_package_dependencies_equation_editor_react": "github:bobzel/equation-editor-react#useLocally",
+    "npm_package_devDependencies__types_socket_io_parser": "^3.0.0",
+    "CLASSPATH": "/Users/sarah/Downloads/cs15/*:.",
+    "npm_config_package_lock_only": "",
+    "npm_config_fund": "true",
+    "npm_package_dependencies_react": "^18.2.0",
+    "npm_package_dependencies_bingmaps_react": "^1.2.10",
+    "npm_package_devDependencies_scss_loader": "0.0.1",
+    "npm_package_devDependencies__types_cookie_session": "^2.0.44",
+    "npm_config_save_optional": "",
+    "npm_package_dependencies_textarea_caret": "^3.1.0",
+    "npm_package_dependencies_react_measure": "^2.5.2",
+    "npm_package_dependencies_exif": "^0.6.0",
+    "NVM_BIN": "/Users/sarah/.nvm/versions/node/v12.16.0/bin",
+    "CONDA_DEFAULT_ENV": "base",
+    "npm_config_ignore_scripts": "",
+    "npm_config_user_agent": "npm/6.14.7 node/v12.16.0 darwin x64",
+    "npm_package_dependencies_react_resizable": "^1.11.1",
+    "npm_package_dependencies_prosemirror_commands": "^1.2.1",
+    "npm_package_dependencies_memorystream": "^0.3.1",
+    "npm_package_dependencies_formidable": "1.2.1",
+    "npm_package_devDependencies__types_uuid": "^3.4.10",
+    "npm_config_cache_lock_wait": "10000",
+    "npm_package_dependencies_socket_io_client": "^2.5.0",
+    "npm_package_dependencies_fluent_ffmpeg": "^2.1.2",
+    "npm_package_dependencies__types_cors": "^2.8.12",
+    "npm_package_devDependencies__types_node": "^10.17.60",
+    "npm_package_devDependencies__types_file_saver": "^2.0.5",
+    "npm_config_production": "",
+    "npm_package_dependencies_jsonschema": "^1.4.0",
+    "npm_package_dependencies_ffmpeg": "0.0.4",
+    "npm_package_dependencies_cookie_session": "^2.0.0",
+    "npm_package_dependencies_color": "^3.2.1",
+    "npm_package_devDependencies__types_webpack": "^4.41.32",
+    "npm_package_devDependencies__types_request_promise": "^4.1.48",
+    "npm_package_devDependencies__types_prosemirror_schema_list": "^1.0.3",
+    "npm_config_send_metrics": "",
+    "npm_config_save_bundle": "",
+    "npm_package_dependencies_web_request": "^1.0.7",
+    "npm_package_dependencies_react_datepicker": "^3.8.0",
+    "npm_package_dependencies_express": "^4.17.3",
+    "npm_package_dependencies_D": "^1.0.0",
+    "npm_package_dependencies__types_formidable": "1.0.31",
+    "npm_package_devDependencies__types_rc_switch": "^1.9.2",
+    "npm_package_devDependencies__types_prosemirror_dev_tools": "^2.1.0",
+    "npm_package_devDependencies__types_jquery": "^3.5.14",
+    "npm_config_umask": "0022",
+    "npm_config_node_options": "",
+    "npm_config_init_version": "1.0.0",
+    "npm_package_dependencies_https": "^1.0.0",
+    "npm_package_dependencies_array_batcher": "^1.2.3",
+    "npm_package_dependencies__fortawesome_free_regular_svg_icons": "^5.15.4",
+    "npm_package_devDependencies__types_shelljs": "^0.8.11",
+    "npm_package_devDependencies__types_libxmljs": "^0.18.7",
+    "npm_package_devDependencies__types_express_validator": "^3.0.0",
+    "npm_package_devDependencies__types_bluebird": "^3.5.36",
+    "npm_config_init_author_name": "",
+    "npm_config_git": "git",
+    "npm_config_scope": "",
+    "npm_package_dependencies_react_select": "^3.2.0",
+    "npm_package_dependencies_pdf_parse": "^1.1.1",
+    "npm_package_dependencies_colors": "^1.4.0",
+    "npm_package_dependencies_archiver": "^3.1.1",
+    "npm_package_devDependencies_css_loader": "^2.1.1",
+    "npm_package_devDependencies__types_socket_io_client": "^1.4.36",
+    "npm_config_unsafe_perm": "true",
+    "npm_config_tmp": "/var/folders/yk/p_39q8jn673c5p8_66mcxm7r0000gn/T",
+    "npm_config_onload_script": "",
+    "npm_package_dependencies_serializr": "^1.5.4",
+    "npm_package_dependencies_fit_curve": "^0.1.7",
+    "npm_package_dependencies__webscopeio_react_textarea_autocomplete": "^4.9.1",
+    "npm_package_dependencies__types_three": "^0.126.2",
+    "npm_package_devDependencies_ts_node_dev": "^2.0.0",
+    "npm_node_execpath": "/Users/sarah/.nvm/versions/node/v12.16.0/bin/node",
+    "npm_config_prefix": "/Users/sarah/.nvm/versions/node/v12.16.0",
+    "npm_config_link": "",
+    "npm_config_format_package_lock": "true",
+    "npm_package_dependencies_passport": "^0.4.0",
+    "npm_package_devDependencies_eslint_plugin_react": "^7.30.1",
+    "npm_package_devDependencies__types_react_table": "^6.8.9",
+    "npm_package_devDependencies__types_react_reconciler": "^0.26.4",
+    "NODE_OPTIONS": "--max_old_space_size=4096",
+    "TS_NODE_DEV": "true",
+    "VIPSHOME": "/usr/local/Cellar/vips/8.8.1",
+    "TYPESCRIPT_PATH": "/Users/sarah/Desktop/dash/Dash-Web/node_modules/typescript/lib/typescript.js",
+    "TSCONFIG": "/Users/sarah/Desktop/dash/Dash-Web/tsconfig.json",
+    "COMPILER_OPTIONS": "{}",
+    "TSLINT": "true",
+    "CONTEXT": "/Users/sarah/Desktop/dash/Dash-Web",
+    "TSLINTAUTOFIX": "false",
+    "ESLINT": "false",
+    "ESLINT_OPTIONS": "{}",
+    "WATCH": "",
+    "WORK_DIVISION": "1",
+    "MEMORY_LIMIT": "2048",
+    "CHECK_SYNTACTIC_ERRORS": "false",
+    "USE_INCREMENTAL_API": "true",
+    "VUE": "false"
+  },
+  "userLimits": {
+    "core_file_size_blocks": {
+      "soft": 0,
+      "hard": "unlimited"
+    },
+    "data_seg_size_kbytes": {
+      "soft": "unlimited",
+      "hard": "unlimited"
+    },
+    "file_size_blocks": {
+      "soft": "unlimited",
+      "hard": "unlimited"
+    },
+    "max_locked_memory_bytes": {
+      "soft": "unlimited",
+      "hard": "unlimited"
+    },
+    "max_memory_size_kbytes": {
+      "soft": "unlimited",
+      "hard": "unlimited"
+    },
+    "open_files": {
+      "soft": 1048575,
+      "hard": "unlimited"
+    },
+    "stack_size_bytes": {
+      "soft": 8388608,
+      "hard": 67104768
+    },
+    "cpu_time_seconds": {
+      "soft": "unlimited",
+      "hard": "unlimited"
+    },
+    "max_user_processes": {
+      "soft": 2784,
+      "hard": 4176
+    },
+    "virtual_memory_kbytes": {
+      "soft": "unlimited",
+      "hard": "unlimited"
+    }
+  },
+  "sharedObjects": [
+    "/Users/sarah/.nvm/versions/node/v12.16.0/bin/node",
+    "/System/Library/Frameworks/CoreFoundation.framework/Versions/A/CoreFoundation",
+    "/usr/lib/libSystem.B.dylib",
+    "/usr/lib/libc++.1.dylib",
+    "/usr/lib/libobjc.A.dylib",
+    "/usr/lib/liboah.dylib",
+    "/usr/lib/libfakelink.dylib",
+    "/usr/lib/libicucore.A.dylib",
+    "/System/Library/PrivateFrameworks/SoftLinking.framework/Versions/A/SoftLinking",
+    "/usr/lib/libc++abi.dylib",
+    "/usr/lib/system/libcache.dylib",
+    "/usr/lib/system/libcommonCrypto.dylib",
+    "/usr/lib/system/libcompiler_rt.dylib",
+    "/usr/lib/system/libcopyfile.dylib",
+    "/usr/lib/system/libcorecrypto.dylib",
+    "/usr/lib/system/libdispatch.dylib",
+    "/usr/lib/system/libdyld.dylib",
+    "/usr/lib/system/libkeymgr.dylib",
+    "/usr/lib/system/liblaunch.dylib",
+    "/usr/lib/system/libmacho.dylib",
+    "/usr/lib/system/libquarantine.dylib",
+    "/usr/lib/system/libremovefile.dylib",
+    "/usr/lib/system/libsystem_asl.dylib",
+    "/usr/lib/system/libsystem_blocks.dylib",
+    "/usr/lib/system/libsystem_c.dylib",
+    "/usr/lib/system/libsystem_collections.dylib",
+    "/usr/lib/system/libsystem_configuration.dylib",
+    "/usr/lib/system/libsystem_containermanager.dylib",
+    "/usr/lib/system/libsystem_coreservices.dylib",
+    "/usr/lib/system/libsystem_darwin.dylib",
+    "/usr/lib/system/libsystem_dnssd.dylib",
+    "/usr/lib/system/libsystem_featureflags.dylib",
+    "/usr/lib/system/libsystem_info.dylib",
+    "/usr/lib/system/libsystem_m.dylib",
+    "/usr/lib/system/libsystem_malloc.dylib",
+    "/usr/lib/system/libsystem_networkextension.dylib",
+    "/usr/lib/system/libsystem_notify.dylib",
+    "/usr/lib/system/libsystem_product_info_filter.dylib",
+    "/usr/lib/system/libsystem_sandbox.dylib",
+    "/usr/lib/system/libsystem_secinit.dylib",
+    "/usr/lib/system/libsystem_kernel.dylib",
+    "/usr/lib/system/libsystem_platform.dylib",
+    "/usr/lib/system/libsystem_pthread.dylib",
+    "/usr/lib/system/libsystem_symptoms.dylib",
+    "/usr/lib/system/libsystem_trace.dylib",
+    "/usr/lib/system/libunwind.dylib",
+    "/usr/lib/system/libxpc.dylib",
+    "/System/Library/Frameworks/ApplicationServices.framework/Versions/A/ApplicationServices",
+    "/System/Library/Frameworks/CoreGraphics.framework/Versions/A/CoreGraphics",
+    "/System/Library/Frameworks/CoreText.framework/Versions/A/CoreText",
+    "/System/Library/Frameworks/ImageIO.framework/Versions/A/ImageIO",
+    "/System/Library/Frameworks/ColorSync.framework/Versions/A/ColorSync",
+    "/System/Library/Frameworks/ApplicationServices.framework/Versions/A/Frameworks/ATS.framework/Versions/A/ATS",
+    "/System/Library/Frameworks/ApplicationServices.framework/Versions/A/Frameworks/ColorSyncLegacy.framework/Versions/A/ColorSyncLegacy",
+    "/System/Library/Frameworks/CoreServices.framework/Versions/A/CoreServices",
+    "/System/Library/Frameworks/ApplicationServices.framework/Versions/A/Frameworks/HIServices.framework/Versions/A/HIServices",
+    "/System/Library/Frameworks/ApplicationServices.framework/Versions/A/Frameworks/LangAnalysis.framework/Versions/A/LangAnalysis",
+    "/System/Library/Frameworks/ApplicationServices.framework/Versions/A/Frameworks/PrintCore.framework/Versions/A/PrintCore",
+    "/System/Library/Frameworks/ApplicationServices.framework/Versions/A/Frameworks/QD.framework/Versions/A/QD",
+    "/System/Library/Frameworks/ApplicationServices.framework/Versions/A/Frameworks/SpeechSynthesis.framework/Versions/A/SpeechSynthesis",
+    "/System/Library/PrivateFrameworks/SkyLight.framework/Versions/A/SkyLight",
+    "/System/Library/PrivateFrameworks/FontServices.framework/libFontParser.dylib",
+    "/System/Library/Frameworks/Accelerate.framework/Versions/A/Accelerate",
+    "/System/Library/Frameworks/IOSurface.framework/Versions/A/IOSurface",
+    "/usr/lib/libxml2.2.dylib",
+    "/System/Library/Frameworks/CFNetwork.framework/Versions/A/CFNetwork",
+    "/usr/lib/libz.1.dylib",
+    "/System/Library/Frameworks/Foundation.framework/Versions/C/Foundation",
+    "/System/Library/PrivateFrameworks/RunningBoardServices.framework/Versions/A/RunningBoardServices",
+    "/usr/lib/libMobileGestalt.dylib",
+    "/System/Library/PrivateFrameworks/WatchdogClient.framework/Versions/A/WatchdogClient",
+    "/usr/lib/libcompression.dylib",
+    "/usr/lib/libDiagnosticMessagesClient.dylib",
+    "/System/Library/Frameworks/SystemConfiguration.framework/Versions/A/SystemConfiguration",
+    "/System/Library/Frameworks/CoreDisplay.framework/Versions/A/CoreDisplay",
+    "/System/Library/Frameworks/CoreMedia.framework/Versions/A/CoreMedia",
+    "/System/Library/PrivateFrameworks/IOAccelerator.framework/Versions/A/IOAccelerator",
+    "/System/Library/Frameworks/IOKit.framework/Versions/A/IOKit",
+    "/System/Library/Frameworks/Metal.framework/Versions/A/Metal",
+    "/System/Library/Frameworks/CoreVideo.framework/Versions/A/CoreVideo",
+    "/System/Library/Frameworks/MetalPerformanceShaders.framework/Versions/A/MetalPerformanceShaders",
+    "/System/Library/PrivateFrameworks/MultitouchSupport.framework/Versions/A/MultitouchSupport",
+    "/System/Library/Frameworks/Security.framework/Versions/A/Security",
+    "/System/Library/Frameworks/QuartzCore.framework/Versions/A/QuartzCore",
+    "/usr/lib/libbsm.0.dylib",
+    "/System/Library/PrivateFrameworks/CoreAnalytics.framework/Versions/A/CoreAnalytics",
+    "/System/Library/Frameworks/VideoToolbox.framework/Versions/A/VideoToolbox",
+    "/System/Library/PrivateFrameworks/BaseBoard.framework/Versions/A/BaseBoard",
+    "/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/FSEvents.framework/Versions/A/FSEvents",
+    "/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/CarbonCore.framework/Versions/A/CarbonCore",
+    "/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/Metadata.framework/Versions/A/Metadata",
+    "/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/OSServices.framework/Versions/A/OSServices",
+    "/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/SearchKit.framework/Versions/A/SearchKit",
+    "/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/AE.framework/Versions/A/AE",
+    "/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/LaunchServices.framework/Versions/A/LaunchServices",
+    "/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/DictionaryServices.framework/Versions/A/DictionaryServices",
+    "/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/SharedFileList.framework/Versions/A/SharedFileList",
+    "/usr/lib/libapple_nghttp2.dylib",
+    "/usr/lib/libnetwork.dylib",
+    "/usr/lib/libsqlite3.dylib",
+    "/usr/lib/libenergytrace.dylib",
+    "/usr/lib/system/libkxld.dylib",
+    "/System/Library/PrivateFrameworks/AppleFSCompression.framework/Versions/A/AppleFSCompression",
+    "/usr/lib/libcoretls.dylib",
+    "/usr/lib/libcoretls_cfhelpers.dylib",
+    "/usr/lib/libpam.2.dylib",
+    "/usr/lib/libxar.1.dylib",
+    "/System/Library/PrivateFrameworks/CoreAutoLayout.framework/Versions/A/CoreAutoLayout",
+    "/System/Library/Frameworks/DiskArbitration.framework/Versions/A/DiskArbitration",
+    "/usr/lib/libarchive.2.dylib",
+    "/usr/lib/liblangid.dylib",
+    "/usr/lib/libCRFSuite.dylib",
+    "/usr/lib/libpcap.A.dylib",
+    "/usr/lib/libdns_services.dylib",
+    "/usr/lib/liblzma.5.dylib",
+    "/usr/lib/libbz2.1.0.dylib",
+    "/usr/lib/libiconv.2.dylib",
+    "/usr/lib/libcharset.1.dylib",
+    "/System/Library/PrivateFrameworks/AppleSystemInfo.framework/Versions/A/AppleSystemInfo",
+    "/System/Library/PrivateFrameworks/IOMobileFramebuffer.framework/Versions/A/IOMobileFramebuffer",
+    "/usr/lib/libCheckFix.dylib",
+    "/System/Library/PrivateFrameworks/TCC.framework/Versions/A/TCC",
+    "/System/Library/PrivateFrameworks/CoreNLP.framework/Versions/A/CoreNLP",
+    "/System/Library/PrivateFrameworks/MetadataUtilities.framework/Versions/A/MetadataUtilities",
+    "/usr/lib/libmecabra.dylib",
+    "/System/Library/Frameworks/MLCompute.framework/Versions/A/MLCompute",
+    "/usr/lib/libmecab.dylib",
+    "/usr/lib/libgermantok.dylib",
+    "/usr/lib/libThaiTokenizer.dylib",
+    "/usr/lib/libChineseTokenizer.dylib",
+    "/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vImage.framework/Versions/A/vImage",
+    "/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/vecLib",
+    "/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libvMisc.dylib",
+    "/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libvDSP.dylib",
+    "/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib",
+    "/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libLAPACK.dylib",
+    "/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libLinearAlgebra.dylib",
+    "/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libSparseBLAS.dylib",
+    "/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libQuadrature.dylib",
+    "/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBNNS.dylib",
+    "/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libSparse.dylib",
+    "/System/Library/Frameworks/MetalPerformanceShaders.framework/Versions/A/Frameworks/MPSCore.framework/Versions/A/MPSCore",
+    "/System/Library/Frameworks/MetalPerformanceShaders.framework/Versions/A/Frameworks/MPSImage.framework/Versions/A/MPSImage",
+    "/System/Library/Frameworks/MetalPerformanceShaders.framework/Versions/A/Frameworks/MPSNeuralNetwork.framework/Versions/A/MPSNeuralNetwork",
+    "/System/Library/Frameworks/MetalPerformanceShaders.framework/Versions/A/Frameworks/MPSMatrix.framework/Versions/A/MPSMatrix",
+    "/System/Library/Frameworks/MetalPerformanceShaders.framework/Versions/A/Frameworks/MPSRayIntersector.framework/Versions/A/MPSRayIntersector",
+    "/System/Library/Frameworks/MetalPerformanceShaders.framework/Versions/A/Frameworks/MPSNDArray.framework/Versions/A/MPSNDArray",
+    "/System/Library/PrivateFrameworks/MetalTools.framework/Versions/A/MetalTools",
+    "/System/Library/PrivateFrameworks/AggregateDictionary.framework/Versions/A/AggregateDictionary",
+    "/System/Library/PrivateFrameworks/AppleSauce.framework/Versions/A/AppleSauce",
+    "/System/Library/Frameworks/OpenGL.framework/Versions/A/Libraries/libCoreFSCache.dylib",
+    "/System/Library/PrivateFrameworks/LanguageModeling.framework/Versions/A/LanguageModeling",
+    "/System/Library/PrivateFrameworks/CoreEmoji.framework/Versions/A/CoreEmoji",
+    "/System/Library/PrivateFrameworks/LinguisticData.framework/Versions/A/LinguisticData",
+    "/System/Library/PrivateFrameworks/Lexicon.framework/Versions/A/Lexicon",
+    "/usr/lib/libcmph.dylib",
+    "/System/Library/Frameworks/OpenDirectory.framework/Versions/A/Frameworks/CFOpenDirectory.framework/Versions/A/CFOpenDirectory",
+    "/System/Library/Frameworks/OpenDirectory.framework/Versions/A/OpenDirectory",
+    "/System/Library/PrivateFrameworks/APFS.framework/Versions/A/APFS",
+    "/System/Library/Frameworks/SecurityFoundation.framework/Versions/A/SecurityFoundation",
+    "/usr/lib/libutil.dylib",
+    "/usr/lib/libapp_launch_measurement.dylib",
+    "/System/Library/PrivateFrameworks/CoreServicesStore.framework/Versions/A/CoreServicesStore",
+    "/System/Library/Frameworks/ServiceManagement.framework/Versions/A/ServiceManagement",
+    "/usr/lib/libxslt.1.dylib",
+    "/System/Library/PrivateFrameworks/BackgroundTaskManagement.framework/Versions/A/BackgroundTaskManagement",
+    "/System/Library/PrivateFrameworks/PersistentConnection.framework/Versions/A/PersistentConnection",
+    "/System/Library/PrivateFrameworks/ProtocolBuffer.framework/Versions/A/ProtocolBuffer",
+    "/System/Library/PrivateFrameworks/CommonUtilities.framework/Versions/A/CommonUtilities",
+    "/System/Library/PrivateFrameworks/Bom.framework/Versions/A/Bom",
+    "/usr/lib/libate.dylib",
+    "/System/Library/Frameworks/ImageIO.framework/Versions/A/Resources/libRadiance.dylib",
+    "/System/Library/Frameworks/ImageIO.framework/Versions/A/Resources/libJPEG.dylib",
+    "/System/Library/Frameworks/ImageIO.framework/Versions/A/Resources/libPng.dylib",
+    "/System/Library/Frameworks/ImageIO.framework/Versions/A/Resources/libTIFF.dylib",
+    "/System/Library/Frameworks/ImageIO.framework/Versions/A/Resources/libGIF.dylib",
+    "/System/Library/Frameworks/ImageIO.framework/Versions/A/Resources/libJP2.dylib",
+    "/usr/lib/libexpat.1.dylib",
+    "/System/Library/PrivateFrameworks/AppleJPEG.framework/Versions/A/AppleJPEG",
+    "/System/Library/PrivateFrameworks/GPUWrangler.framework/Versions/A/GPUWrangler",
+    "/System/Library/PrivateFrameworks/IOPresentment.framework/Versions/A/IOPresentment",
+    "/System/Library/PrivateFrameworks/DSExternalDisplay.framework/Versions/A/DSExternalDisplay",
+    "/System/Library/PrivateFrameworks/CMCaptureCore.framework/Versions/A/CMCaptureCore",
+    "/usr/lib/libspindump.dylib",
+    "/System/Library/Frameworks/CoreAudio.framework/Versions/A/CoreAudio",
+    "/System/Library/PrivateFrameworks/AppServerSupport.framework/Versions/A/AppServerSupport",
+    "/System/Library/PrivateFrameworks/perfdata.framework/Versions/A/perfdata",
+    "/System/Library/PrivateFrameworks/AssertionServices.framework/Versions/A/AssertionServices",
+    "/System/Library/PrivateFrameworks/AudioToolboxCore.framework/Versions/A/AudioToolboxCore",
+    "/System/Library/PrivateFrameworks/caulk.framework/Versions/A/caulk",
+    "/System/Library/PrivateFrameworks/SystemPolicy.framework/Versions/A/SystemPolicy",
+    "/usr/lib/libIOReport.dylib",
+    "/usr/lib/libSMC.dylib",
+    "/usr/lib/libAudioToolboxUtility.dylib",
+    "/usr/lib/libmis.dylib",
+    "/System/Library/Frameworks/OpenGL.framework/Versions/A/OpenGL",
+    "/System/Library/Frameworks/OpenGL.framework/Versions/A/Libraries/libGLU.dylib",
+    "/System/Library/Frameworks/OpenGL.framework/Versions/A/Libraries/libGFXShared.dylib",
+    "/System/Library/Frameworks/OpenGL.framework/Versions/A/Libraries/libGL.dylib",
+    "/System/Library/Frameworks/OpenGL.framework/Versions/A/Libraries/libGLImage.dylib",
+    "/System/Library/Frameworks/OpenGL.framework/Versions/A/Libraries/libCVMSPluginSupport.dylib",
+    "/System/Library/Frameworks/OpenGL.framework/Versions/A/Libraries/libCoreVMClient.dylib",
+    "/System/Library/Frameworks/CoreImage.framework/Versions/A/CoreImage",
+    "/System/Library/Frameworks/OpenCL.framework/Versions/A/OpenCL",
+    "/System/Library/PrivateFrameworks/GraphVisualizer.framework/Versions/A/GraphVisualizer",
+    "/System/Library/PrivateFrameworks/FaceCore.framework/Versions/A/FaceCore",
+    "/System/Library/PrivateFrameworks/OTSVG.framework/Versions/A/OTSVG",
+    "/System/Library/Frameworks/ApplicationServices.framework/Versions/A/Frameworks/ATS.framework/Versions/A/Resources/libFontRegistry.dylib",
+    "/System/Library/PrivateFrameworks/FontServices.framework/libhvf.dylib",
+    "/System/Library/PrivateFrameworks/AppleVA.framework/Versions/A/AppleVA",
+    "/System/Library/Frameworks/ApplicationServices.framework/Versions/A/Frameworks/ATSUI.framework/Versions/A/ATSUI",
+    "/usr/lib/libcups.2.dylib",
+    "/System/Library/PrivateFrameworks/NetAuth.framework/Versions/A/NetAuth",
+    "/System/Library/Frameworks/Kerberos.framework/Versions/A/Kerberos",
+    "/System/Library/Frameworks/GSS.framework/Versions/A/GSS",
+    "/usr/lib/libresolv.9.dylib",
+    "/System/Library/PrivateFrameworks/Heimdal.framework/Versions/A/Heimdal",
+    "/System/Library/Frameworks/Kerberos.framework/Versions/A/Libraries/libHeimdalProxy.dylib",
+    "/System/Library/Frameworks/Network.framework/Versions/A/Network",
+    "/usr/lib/libheimdal-asn1.dylib",
+    "/System/Library/PrivateFrameworks/CommonAuth.framework/Versions/A/CommonAuth",
+    "/System/Library/PrivateFrameworks/login.framework/Versions/A/Frameworks/loginsupport.framework/Versions/A/loginsupport",
+    "/System/Library/Frameworks/AudioToolbox.framework/Versions/A/AudioToolbox",
+    "/System/Library/PrivateFrameworks/AudioSession.framework/Versions/A/AudioSession",
+    "/usr/lib/libAudioStatistics.dylib",
+    "/System/Library/PrivateFrameworks/MediaExperience.framework/Versions/A/MediaExperience",
+    "/System/Library/PrivateFrameworks/AudioSession.framework/libSessionUtility.dylib",
+    "/usr/lib/libperfcheck.dylib",
+    "/System/Library/PrivateFrameworks/AudioResourceArbitration.framework/Versions/A/AudioResourceArbitration",
+    "/System/Library/Frameworks/CoreData.framework/Versions/A/CoreData",
+    "/Users/sarah/Desktop/dash/Dash-Web/node_modules/fsevents/build/Release/fse.node"
+  ]
+}
\ No newline at end of file
diff --git a/src/.DS_Store b/src/.DS_Store
index be99aa5af..06389d6ae 100644
--- a/src/.DS_Store
+++ b/src/.DS_Store
diff --git a/src/Utils.ts b/src/Utils.ts
index 2e06b5631..e03632c8b 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -6,6 +6,7 @@ import { Socket } from 'socket.io';
 import { Colors } from './client/views/global/globalEnums';
 import { Message } from './server/Message';
 import Color = require('color');
+import { DocumentType } from './client/documents/DocumentTypes';
 
 export namespace Utils {
     export let CLICK_TIME = 300;
@@ -15,6 +16,21 @@ export namespace Utils {
         return Date.now() - downTime < Utils.CLICK_TIME && Math.abs(x - downX) < Utils.DRAG_THRESHOLD && Math.abs(y - downY) < Utils.DRAG_THRESHOLD;
     }
 
+    export function cleanDocumentType(type: DocumentType)  {
+        switch(type) {
+            case DocumentType.IMG:
+                return "Image"
+            case DocumentType.AUDIO:
+                return "Audio"
+            case DocumentType.COL:
+                return "Collection"
+            case DocumentType.RTF:
+                return "Text"
+            default: 
+                return type.charAt(0).toUpperCase() + type.slice(1)
+        }
+    }
+
     export function readUploadedFileAsText(inputFile: File) {
         const temporaryFileReader = new FileReader();
 
diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts
index 2a7f5a09b..fa1fca6ff 100644
--- a/src/client/DocServer.ts
+++ b/src/client/DocServer.ts
@@ -76,10 +76,14 @@ export namespace DocServer {
     const fieldWriteModes: { [field: string]: WriteMode } = {};
     const docsWithUpdates: { [field: string]: Set<Doc> } = {};
 
-    export var PlaygroundFields: string[];
-    export function setPlaygroundFields(livePlaygroundFields: string[]) {
-        DocServer.PlaygroundFields = livePlaygroundFields;
-        livePlaygroundFields.forEach(f => DocServer.setFieldWriteMode(f, DocServer.WriteMode.Playground));
+    export var PlaygroundFields: string[] = [];
+    export function setLivePlaygroundFields(livePlaygroundFields: string[]) {
+        DocServer.PlaygroundFields.push(...livePlaygroundFields);
+        livePlaygroundFields.forEach(f => DocServer.setFieldWriteMode(f, DocServer.WriteMode.LivePlayground));
+    }
+    export function setPlaygroundFields(playgroundFields: string[]) {
+        DocServer.PlaygroundFields.push(...playgroundFields);
+        playgroundFields.forEach(f => DocServer.setFieldWriteMode(f, DocServer.WriteMode.Playground));
     }
     export function IsPlaygroundField(field: string) {
         return DocServer.PlaygroundFields?.includes(field.replace(/^_/, ''));
@@ -97,7 +101,7 @@ export namespace DocServer {
     }
 
     export function getFieldWriteMode(field: string) {
-        return Doc.CurrentUserEmail === 'guest' ? WriteMode.LiveReadonly : fieldWriteModes[field] || WriteMode.Default;
+        return Doc.CurrentUserEmail === 'guest' ? WriteMode.LivePlayground : fieldWriteModes[field] || WriteMode.Default;
     }
 
     export function registerDocWithCachedUpdate(doc: Doc, field: string, oldValue: any) {
@@ -203,7 +207,7 @@ export namespace DocServer {
         }
 
         export function makeEditable() {
-            if (_isReadOnly) {
+            if (Control.isReadOnly()) {
                 location.reload();
                 // _isReadOnly = false;
                 // _CreateField = _CreateFieldImpl;
@@ -479,7 +483,7 @@ export namespace DocServer {
     function _CreateFieldImpl(field: RefField) {
         _cache[field[Id]] = field;
         const initialState = SerializationHelper.Serialize(field);
-        Utils.Emit(_socket, MessageStore.CreateField, initialState);
+        Doc.CurrentUserEmail !== 'guest' && Utils.Emit(_socket, MessageStore.CreateField, initialState);
     }
 
     let _CreateField: (field: RefField) => void = errorFunc;
@@ -499,7 +503,7 @@ export namespace DocServer {
     }
 
     function _UpdateFieldImpl(id: string, diff: any) {
-        !DocServer.Control.isReadOnly() && Utils.Emit(_socket, MessageStore.UpdateField, { id, diff });
+        !DocServer.Control.isReadOnly() && Doc.CurrentUserEmail !== 'guest' && Utils.Emit(_socket, MessageStore.UpdateField, { id, diff });
     }
 
     let _UpdateField: (id: string, diff: any) => void = errorFunc;
@@ -536,11 +540,11 @@ export namespace DocServer {
     }
 
     export function DeleteDocument(id: string) {
-        Utils.Emit(_socket, MessageStore.DeleteField, id);
+        Doc.CurrentUserEmail !== 'guest' && Utils.Emit(_socket, MessageStore.DeleteField, id);
     }
 
     export function DeleteDocuments(ids: string[]) {
-        Utils.Emit(_socket, MessageStore.DeleteFields, ids);
+        Doc.CurrentUserEmail !== 'guest' && Utils.Emit(_socket, MessageStore.DeleteFields, ids);
     }
 
     function _respondToDeleteImpl(ids: string | string[]) {
diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts
index bd71281fa..b629d9b8c 100644
--- a/src/client/documents/DocumentTypes.ts
+++ b/src/client/documents/DocumentTypes.ts
@@ -42,7 +42,6 @@ export enum DocumentType {
     COMPARISON = 'comparison',
     GROUP = 'group',
 
-    LINKDB = 'linkdb', // database of links  ??? why do we have this
     SCRIPTDB = 'scriptdb', // database of scripts
     GROUPDB = 'groupdb', // database of groups
 }
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 1db83b838..63a7c3339 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -34,7 +34,7 @@ import { ContextMenuProps } from '../views/ContextMenuItem';
 import { DFLT_IMAGE_NATIVE_DIM } from '../views/global/globalCssVariables.scss';
 import { ActiveArrowEnd, ActiveArrowStart, ActiveDash, ActiveFillColor, ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth, ActiveIsInkMask, InkingStroke } from '../views/InkingStroke';
 import { AudioBox } from '../views/nodes/AudioBox';
-import { FontIconBox } from '../views/nodes/button/FontIconBox';
+import { FontIconBox } from '../views/nodes/FontIconBox/FontIconBox';
 import { ColorBox } from '../views/nodes/ColorBox';
 import { ComparisonBox } from '../views/nodes/ComparisonBox';
 import { DataVizBox } from '../views/nodes/DataVizBox/DataVizBox';
@@ -169,9 +169,10 @@ export class DocumentOptions {
     _nativeDimModifiable?: BOOLt = new BoolInfo('native dimensions can be modified using document decoration reizers');
     _nativeHeightUnfrozen?: BOOLt = new BoolInfo('native height can be changed independent of width by dragging decoration resizers');
 
-    'acl-Public'?: string; // public permissions
-    '_acl-Public'?: string; // public permissions
+    'acl-Guest'?: string; // public permissions
+    '_acl-Guest'?: string; // public permissions
     type?: DTYPEt = new DTypeInfo('type of document', true);
+    type_collection?: COLLt = new CTypeInfo('how collection is rendered'); // sub type of a collection
     _type_collection?: COLLt = new CTypeInfo('how collection is rendered'); // sub type of a collection
     title?: STRt = new StrInfo('title of document');
     caption?: RichTextField;
@@ -323,8 +324,9 @@ export class DocumentOptions {
     badgeValue?: ScriptField;
 
     //LINEAR VIEW
-    linearView_IsExpanded?: BOOLt = new BoolInfo('is linear view expanded');
+    linearView_IsOpen?: BOOLt = new BoolInfo('is linear view open');
     linearView_Expandable?: BOOLt = new BoolInfo('can linear view be expanded');
+    linearView_Dropdown?: BOOLt = new BoolInfo('can linear view be opened as a dropdown');
     linearView_SubMenu?: BOOLt = new BoolInfo('is doc a sub menu of more linear views');
     flexGap?: NUMt = new NumInfo('Linear view flex gap');
     flexDirection?: 'unset' | 'row' | 'column' | 'row-reverse' | 'column-reverse';
@@ -394,6 +396,7 @@ export class DocumentOptions {
     sidebar_color?: string; // background color of text sidebar
     sidebar_collectionType?: string; // collection type of text sidebar
 
+    data_dashboards?: List<any>; // list of dashboards used in shareddocs;
     text?: string;
     textTransform?: string;
     letterSpacing?: string;
@@ -405,6 +408,7 @@ export class DocumentOptions {
 
     clipboard?: Doc;
     hoverBackgroundColor?: string; // background color of a label when hovered
+    userBackgroundColor?: STRt = new StrInfo('background color associated with a Dash user (seen in header fields of shared documents)');
     userColor?: STRt = new StrInfo('color associated with a Dash user (seen in header fields of shared documents)');
 }
 export namespace Docs {
@@ -543,14 +547,6 @@ export namespace Docs {
                 },
             ],
             [
-                DocumentType.LINKDB,
-                {
-                    data: new List<Doc>(),
-                    layout: { view: EmptyBox, dataField: defaultDataKey },
-                    options: { title: 'Global Link Database' },
-                },
-            ],
-            [
                 DocumentType.SCRIPTDB,
                 {
                     data: new List<Doc>(),
@@ -667,7 +663,6 @@ export namespace Docs {
             [
                 DocumentType.GROUPDB,
                 {
-                    data: new List<Doc>(),
                     layout: { view: EmptyBox, dataField: defaultDataKey },
                     options: { title: 'Global Group Database' },
                 },
@@ -722,7 +717,7 @@ export namespace Docs {
                 .filter(type => type !== DocumentType.NONE)
                 .map(type => type + suffix);
             // fetch the actual prototype documents from the server
-            const actualProtos = Docs.newAccount ? {} : await DocServer.GetRefFields(prototypeIds);
+            const actualProtos = await DocServer.GetRefFields(prototypeIds);
             // update this object to include any default values: DocumentOptions for all prototypes
             prototypeIds.map(id => {
                 const existing = actualProtos[id] as Doc;
@@ -747,13 +742,6 @@ export namespace Docs {
         }
 
         /**
-         * A collection of all links in the database.  Ideally, this would be a search, but for now all links are cached here.
-         */
-        export function MainLinkDocument() {
-            return Prototypes.get(DocumentType.LINKDB);
-        }
-
-        /**
          * A collection of all scripts in the database
          */
         export function MainScriptDocument() {
@@ -800,6 +788,7 @@ export namespace Docs {
                 x: 0,
                 y: 0,
                 _width: 300,
+                'acl-Guest': SharingPermissions.View,
                 ...(template.options || {}),
                 layout: layout.view?.LayoutString(layout.dataField),
                 data: template.data,
@@ -841,8 +830,7 @@ export namespace Docs {
             const { omit: dataProps, extract: viewProps } = OmitKeys(options, viewKeys, '^_');
 
             // dataProps['acl-Override'] = SharingPermissions.Unset;
-            dataProps['acl-Public'] = options['acl-Public'] ? options['acl-Public'] : Doc.defaultAclPrivate ? SharingPermissions.None : SharingPermissions.Augment;
-
+            dataProps['acl-Guest'] = options['acl-Guest'] ?? (Doc.defaultAclPrivate ? SharingPermissions.None : SharingPermissions.View);
             dataProps.isSystem = viewProps.isSystem;
             dataProps.isDataDoc = true;
             dataProps.author = Doc.CurrentUserEmail;
@@ -864,16 +852,17 @@ export namespace Docs {
                 dataDoc.proto = proto;
             }
 
-            const viewFirstProps: { [id: string]: any } = {};
-            viewFirstProps['acl-Public'] = options['_acl-Public'] ? options['_acl-Public'] : Doc.defaultAclPrivate ? SharingPermissions.None : SharingPermissions.Augment;
-            // viewFirstProps['acl-Override'] = SharingPermissions.Unset;
-            viewFirstProps.author = Doc.CurrentUserEmail;
+            const viewFirstProps: { [id: string]: any } = { author: Doc.CurrentUserEmail };
+            viewFirstProps['acl-Guest'] = options['_acl-Guest'] ?? (Doc.defaultAclPrivate ? SharingPermissions.None : SharingPermissions.View);
             let viewDoc: Doc;
             // determines whether viewDoc should be created using placeholder Doc or default
             if (placeholderDoc) {
                 placeholderDoc._height = options._height !== undefined ? Number(options._height) : undefined;
                 placeholderDoc._width = options._width !== undefined ? Number(options._width) : undefined;
                 viewDoc = Doc.assign(placeholderDoc, viewFirstProps, true, true);
+                Array.from(Object.keys(placeholderDoc))
+                    .filter(key => key.startsWith('acl'))
+                    .forEach(key => (dataDoc[key] = viewDoc[key] = placeholderDoc[key]));
             } else {
                 viewDoc = Doc.assign(Doc.MakeDelegate(dataDoc, delegId), viewFirstProps, true, true);
             }
@@ -1013,10 +1002,11 @@ export namespace Docs {
             I.rotation = 0;
             I.defaultDoubleClick = 'click';
             I.author_date = new DateField();
-            I['acl-Public'] = Doc.defaultAclPrivate ? SharingPermissions.None : SharingPermissions.Augment;
+            I['acl-Guest'] = Doc.defaultAclPrivate ? SharingPermissions.None : SharingPermissions.View;
             //I['acl-Override'] = SharingPermissions.Unset;
             I[Initializing] = false;
-            return I;
+
+            return InstanceFromProto(I, '', options);
         }
 
         export function PdfDocument(url: string, options: DocumentOptions = {}, overwriteDoc?: Doc) {
@@ -1052,7 +1042,7 @@ export namespace Docs {
 
         export function FreeformDocument(documents: Array<Doc>, options: DocumentOptions, id?: string) {
             const inst = InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { _xPadding: 20, _yPadding: 20, ...options, _type_collection: CollectionViewType.Freeform }, id);
-            documents.forEach(d => (d.embedContainer = inst));
+            documents.forEach(d => Doc.SetContainer(d, inst));
             return inst;
         }
 
@@ -1125,8 +1115,8 @@ export namespace Docs {
             return InstanceFromProto(Prototypes.get(DocumentType.LABEL), undefined, { ...(options || {}) });
         }
 
-        export function EquationDocument(options?: DocumentOptions) {
-            return InstanceFromProto(Prototypes.get(DocumentType.EQUATION), undefined, { ...(options || {}) }, undefined, 'text');
+        export function EquationDocument(text?: string, options?: DocumentOptions) {
+            return InstanceFromProto(Prototypes.get(DocumentType.EQUATION), text, { ...(options || {}) }, undefined, 'text');
         }
 
         export function FunctionPlotDocument(documents: Array<Doc>, options?: DocumentOptions) {
@@ -1157,7 +1147,9 @@ export namespace Docs {
         }
 
         export function DockDocument(documents: Array<Doc>, config: string, options: DocumentOptions, id?: string) {
-            return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { treeViewFreezeChildren: 'remove|add', ...options, _type_collection: CollectionViewType.Docking, dockingConfig: config }, id);
+            const ret = InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { treeViewFreezeChildren: 'remove|add', ...options, type_collection: CollectionViewType.Docking, dockingConfig: config }, id);
+            documents.map(c => Doc.SetContainer(c, ret));
+            return ret;
         }
 
         export function DirectoryImportDocument(options: DocumentOptions = {}) {
@@ -1182,10 +1174,13 @@ export namespace Docs {
             const doc = DockDocument(
                 configs.map(c => c.doc),
                 JSON.stringify(layoutConfig),
-                options,
+                Doc.CurrentUserEmail === 'guest' ? options : { 'acl-Guest': SharingPermissions.View, ...options },
                 id
             );
-            configs.map(c => (c.doc.embedContainer = doc));
+            configs.map(c => {
+                Doc.SetContainer(c.doc, doc);
+                inheritParentAcls(doc, c.doc, false);
+            });
             return doc;
         }
 
@@ -1345,8 +1340,8 @@ export namespace DocUtils {
                 source,
                 target,
                 {
-                    'acl-Public': SharingPermissions.Augment,
-                    '_acl-Public': SharingPermissions.Augment,
+                    'acl-Guest': SharingPermissions.Augment,
+                    '_acl-Guest': SharingPermissions.Augment,
                     title: ComputedField.MakeFunction('generateLinkTitle(self)') as any,
                     link_anchor_1_useSmallAnchor: source.useSmallAnchor ? true : undefined,
                     link_anchor_2_useSmallAnchor: target.useSmallAnchor ? true : undefined,
@@ -1867,8 +1862,6 @@ export namespace DocUtils {
             Doc.SetInPlace(ndoc, 'title', ndoc.title + ' ' + NumCast(dragFactory['dragFactory_count']).toString(), true);
         }
 
-        if (ndoc && Doc.ActiveDashboard) inheritParentAcls(Doc.ActiveDashboard, ndoc);
-
         return ndoc;
     }
     export function delegateDragFactory(dragFactory: Doc) {
diff --git a/src/client/util/CaptureManager.scss b/src/client/util/CaptureManager.scss
index a5024247e..11e31fe2e 100644
--- a/src/client/util/CaptureManager.scss
+++ b/src/client/util/CaptureManager.scss
@@ -155,21 +155,3 @@
     }
 }
 
-.close-button {
-    position: absolute;
-    top: 10;
-    right: 10;
-    background:transparent;
-    border-radius:100%;
-    width: 25px;
-    height: 25px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: 0.2s;
-}
-
-.close-button:hover {
-    background: rgba(0,0,0,0.1);
-}
-
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 074e89753..6977fb0b6 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -12,7 +12,7 @@ import { Cast, DateCast, DocCast, StrCast } from "../../fields/Types";
 import { nullAudio } from "../../fields/URLField";
 import { SetCachedGroups, SharingPermissions } from "../../fields/util";
 import { GestureUtils } from "../../pen-gestures/GestureUtils";
-import { OmitKeys, Utils } from "../../Utils";
+import { OmitKeys, Utils, addStyleSheetRule } from "../../Utils";
 import { DocServer } from "../DocServer";
 import { Docs, DocumentOptions, DocUtils, FInfo } from "../documents/Documents";
 import { CollectionViewType, DocumentType } from "../documents/DocumentTypes";
@@ -20,7 +20,7 @@ import { TreeViewType } from "../views/collections/CollectionTreeView";
 import { DashboardView } from "../views/DashboardView";
 import { Colors } from "../views/global/globalEnums";
 import { MainView } from "../views/MainView";
-import { ButtonType } from "../views/nodes/button/FontIconBox";
+import { ButtonType } from "../views/nodes/FontIconBox/FontIconBox";
 import { OpenWhere } from "../views/nodes/DocumentView";
 import { OverlayView } from "../views/OverlayView";
 import { DragManager, dropActionType } from "./DragManager";
@@ -28,7 +28,7 @@ import { MakeTemplate } from "./DropConverter";
 import { FollowLinkScript } from "./LinkFollower";
 import { LinkManager } from "./LinkManager";
 import { ScriptingGlobals } from "./ScriptingGlobals";
-import { ColorScheme } from "./SettingsManager";
+import { ColorScheme, SettingsManager } from "./SettingsManager";
 import { UndoManager } from "./UndoManager";
 import { PresElementBox } from "../views/nodes/trails";
 import { ImportElementBox } from "../views/nodes/importBox/importElementBox";
@@ -267,7 +267,7 @@ export class CurrentUserUtils {
               }[] = [
             {key: "Note",       creator: opts => Docs.Create.TextDocument("", opts),        opts: { _width: 200, _layout_autoHeight: true }},
             {key: "Flashcard",  creator: opts => Docs.Create.TextDocument("", opts),        opts: { _width: 200, _layout_autoHeight: true, _layout_enableAltContentUI: true}},
-            {key: "Equation",   creator: opts => Docs.Create.EquationDocument(opts),        opts: { _width: 300, _height: 35, }},
+            {key: "Equation",   creator: opts => Docs.Create.EquationDocument("",opts),     opts: { _width: 300, _height: 35, }},
             {key: "Noteboard",  creator: opts => Docs.Create.NoteTakingDocument([], opts),  opts: { _width: 250, _height: 200, _layout_fitWidth: true}},
             {key: "Simulation", creator: opts => Docs.Create.SimulationDocument(opts),      opts: { _width: 300, _height: 300, }},
             {key: "Collection", creator: opts => Docs.Create.FreeformDocument([], opts),    opts: { _width: 150, _height: 100, _layout_fitWidth: true }},
@@ -340,19 +340,19 @@ export class CurrentUserUtils {
     }
 
     /// returns descriptions needed to buttons for the left sidebar to open up panes displaying different collections of documents
-    static leftSidebarMenuBtnDescriptions(doc: Doc):{title:string, target:Doc, icon:string, scripts:{[key:string]:any}, funcs?:{[key:string]:any}}[] {
+    static leftSidebarMenuBtnDescriptions(doc: Doc):{title:string, target:Doc, icon:string, toolTip: string, scripts:{[key:string]:any}, funcs?:{[key:string]:any}}[] {
       const badgeValue = "((len) => len && len !== '0' ? len: undefined)(docList(self.target.data).filter(doc => !docList(self.target.viewed).includes(doc)).length.toString())"; 
       const getActiveDashTrails = "Doc.ActiveDashboard?.myTrails";
         return [
-            { title: "Dashboards",      target: this.setupDashboards(doc, "myDashboards"),         icon: "desktop",     funcs: {hidden: "IsNoviceMode()"} },
-            { title: "Search",          target: this.setupSearcher(doc, "mySearcher"),             icon: "search",      },
-            { title: "Files",           target: this.setupFilesystem(doc, "myFilesystem"),         icon: "folder-open", },
-            { title: "Tools",           target: this.setupToolsBtnPanel(doc, "myTools"),           icon: "wrench",      funcs: {hidden: "IsNoviceMode()"} },
-            { title: "Imports",         target: this.setupImportSidebar(doc, "myImports"),         icon: "upload",      },
-            { title: "Recently Closed", target: this.setupRecentlyClosed(doc, "myRecentlyClosed"), icon: "archive",     },
-            { title: "Shared Docs",     target: Doc.MySharedDocs,                                  icon: "users",       funcs: {badgeValue:badgeValue}},
-            { title: "Trails",          target: Doc.UserDoc(),                                     icon: "pres-trail",  funcs: {target: getActiveDashTrails}},
-            { title: "User Doc View",   target: this.setupUserDocView(doc, "myUserDocView"),       icon: "address-card",funcs: {hidden: "IsNoviceMode()"} },
+            { title: "Dashboards",      toolTip: "Dashboards ⌘D",       target: this.setupDashboards(doc, "myDashboards"),         icon: "desktop",     funcs: {hidden: "IsNoviceMode()"} },
+            { title: "Search",          toolTip: "Search ⌘F",           target: this.setupSearcher(doc, "mySearcher"),             icon: "search",      },
+            { title: "Files",           toolTip: "Files ⌘⇧F",           target: this.setupFilesystem(doc, "myFilesystem"),         icon: "folder-open", },
+            { title: "Tools",           toolTip: "Tools ⌘T",            target: this.setupToolsBtnPanel(doc, "myTools"),           icon: "wrench",      funcs: {hidden: "IsNoviceMode()"} },
+            { title: "Imports",         toolTip: "Imports ⌘I",          target: this.setupImportSidebar(doc, "myImports"),         icon: "upload",      },
+            { title: "Closed",          toolTip: "Recently Closed ⌘R",  target: this.setupRecentlyClosed(doc, "myRecentlyClosed"), icon: "archive",     },
+            { title: "Shared",          toolTip: "Shared Docs ⌘⇧S",     target: Doc.MySharedDocs,                                  icon: "users",       funcs: {badgeValue:badgeValue}},
+            { title: "Trails",          toolTip: "Trails ⌘⇧",           target: Doc.UserDoc(),                                     icon: "pres-trail",  funcs: {target: getActiveDashTrails}},
+            { title: "User Doc",        toolTip: "User Doc ⌘U",         target: this.setupUserDocView(doc, "myUserDocView"),       icon: "address-card",funcs: {hidden: "IsNoviceMode()"} },
         ].map(tuple => ({...tuple, scripts:{onClick: 'selectMainMenu(self)'}}));
     }
 
@@ -365,17 +365,17 @@ export class CurrentUserUtils {
     static setupLeftSidebarMenu(doc: Doc, field="myLeftSidebarMenu") {
         this.setupLeftSidebarPanel(doc);
         const myLeftSidebarMenu = DocCast(doc[field]);
-        const menuBtns = CurrentUserUtils.leftSidebarMenuBtnDescriptions(doc).map(({ title, target, icon, scripts, funcs }) => {
+        const menuBtns = CurrentUserUtils.leftSidebarMenuBtnDescriptions(doc).map(({ title, target, icon, toolTip, scripts, funcs }) => {
             const btnDoc = myLeftSidebarMenu ? DocListCast(myLeftSidebarMenu.data).find(doc => doc.title === title) : undefined;
             const reqdBtnOpts:DocumentOptions = {
-                title, icon, target, btnType: ButtonType.MenuButton, isSystem: true, undoIgnoreFields: new List<string>(['height', 'data_columnHeaders']), dontRegisterView: true,
+                title, icon, target, toolTip, btnType: ButtonType.MenuButton, isSystem: true, undoIgnoreFields: new List<string>(['height', 'data_columnHeaders']), dontRegisterView: true,
                 _width: 60, _height: 60,  _dragOnlyWithinContainer: true, _layout_hideContextMenu: true,
             };
             return DocUtils.AssignScripts(DocUtils.AssignOpts(btnDoc, reqdBtnOpts) ?? Docs.Create.FontIconDocument(reqdBtnOpts), scripts, funcs);
         });
 
         const reqdStackOpts:DocumentOptions ={
-            title: "menuItemPanel", childDragAction: "same", backgroundColor: Colors.DARK_GRAY, layout_boxShadow: "rgba(0,0,0,0)",  dontRegisterView: true, ignoreClick: true,
+            title: "menuItemPanel", childDragAction: "same", layout_boxShadow: "rgba(0,0,0,0)",  dontRegisterView: true, ignoreClick: true,
             _chromeHidden: true, _gridGap: 0, _yMargin: 0, _yPadding: 0, _xMargin: 0, _layout_autoHeight: false, _width: 60, _columnWidth: 60, _lockedPosition: true, isSystem: true,
         };
         return DocUtils.AssignDocField(doc, field, (opts, items) => Docs.Create.StackingDocument(items??[], opts), reqdStackOpts, menuBtns, { dropConverter: "convertToButtons(dragData)" });
@@ -525,7 +525,7 @@ export class CurrentUserUtils {
         const newFolder = `TreeView_addNewFolder()`;
         const newFolderOpts: DocumentOptions = {
             _forceActive: true, _dragOnlyWithinContainer: true, _layout_hideContextMenu: true, _width: 30, _height: 30, undoIgnoreFields:new List<string>(['treeViewSortCriterion']),
-            title: "New folder", btnType: ButtonType.ClickButton, toolTip: "Create new folder", buttonText: "New folder", icon: "folder-plus", isSystem: true
+            title: "New folder", color: Colors.BLACK, btnType: ButtonType.ClickButton, toolTip: "Create new folder", buttonText: "New folder", icon: "folder-plus", isSystem: true
         };
         const newFolderScript = { onClick: newFolder};
         const newFolderButton = DocUtils.AssignScripts(DocUtils.AssignOpts(DocCast(myFilesystem?.layout_headerButton), newFolderOpts) ?? Docs.Create.FontIconDocument(newFolderOpts), newFolderScript);
@@ -559,7 +559,7 @@ export class CurrentUserUtils {
 
         const clearAll = (target:string) => `getProto(${target}).data = new List([])`;
         const clearBtnsOpts:DocumentOptions = { _width: 30, _height: 30, _forceActive: true, _dragOnlyWithinContainer: true, _layout_hideContextMenu: true, 
-            title: "Empty", target: recentlyClosed, btnType: ButtonType.ClickButton,  buttonText: "Empty", icon: "trash", isSystem: true,
+            title: "Empty", target: recentlyClosed, btnType: ButtonType.ClickButton, color: Colors.BLACK, buttonText: "Empty", icon: "trash", isSystem: true,
             toolTip: "Empty recently closed",};
         DocUtils.AssignDocField(recentlyClosed, "layout_headerButton", (opts) => Docs.Create.FontIconDocument(opts), clearBtnsOpts, undefined, {onClick: clearAll("self.target")});
 
@@ -602,8 +602,8 @@ export class CurrentUserUtils {
                             CurrentUserUtils.createToolButton(opts), scripts, funcs);
         
         const btnDescs = [// setup reactions to change the highlights on the undo/redo buttons -- would be better to encode this in the undo/redo buttons, but the undo/redo stacks are not wired up that way yet
-            { scripts: { onClick: "undo()"},      opts: { title: "undo",              icon: "undo-alt",               toolTip: "Click to undo" }},
-            { scripts: { onClick: "redo()"},      opts: { title: "redo",              icon: "redo-alt",               toolTip: "Click to redo" }},
+            { scripts: { onClick: "undo()"},      opts: { title: "Undo",              icon: "undo-alt",               toolTip: "Undo ⌘Z" }},
+            { scripts: { onClick: "redo()"},      opts: { title: "Redo",              icon: "redo-alt",               toolTip: "Redo ⌘R" }},
             { scripts: { },                       opts: { title: "undoStack",         layout: "<UndoStack>",          toolTip: "Undo/Redo Stack"}}, // note: layout fields are hacks -- they don't actually run through the JSX parser (yet)
             { scripts: { },                       opts: { title: "linker",            layout: "<LinkingUI>",          toolTip: "link started"}},
             { scripts: { },                       opts: { title: "currently playing", layout: "<CurrentlyPlayingUI>", toolTip: "currently playing media"}},
@@ -611,10 +611,10 @@ export class CurrentUserUtils {
         const btns = btnDescs.map(desc => dockBtn({_width: 30, _height: 30, defaultDoubleClick: 'ignore', undoIgnoreFields: new List<string>(['opacity']), _dragOnlyWithinContainer: true, ...desc.opts}, desc.scripts));
         const dockBtnsReqdOpts:DocumentOptions = {
             title: "docked buttons", _height: 40, flexGap: 0, layout_boxShadow: "standard", childDragAction: 'move',
-            childDontRegisterViews: true, linearView_IsExpanded: true, linearView_Expandable: true, ignoreClick: true
+            childDontRegisterViews: true, linearView_IsOpen: true, linearView_Expandable: true, ignoreClick: true
         };
-        reaction(() => UndoManager.redoStack.slice(), () => Doc.GetProto(btns.find(btn => btn.title === "redo")!).opacity = UndoManager.CanRedo() ? 1 : 0.4, { fireImmediately: true });
-        reaction(() => UndoManager.undoStack.slice(), () => Doc.GetProto(btns.find(btn => btn.title === "undo")!).opacity = UndoManager.CanUndo() ? 1 : 0.4, { fireImmediately: true });
+        reaction(() => UndoManager.redoStack.slice(), () => Doc.GetProto(btns.find(btn => btn.title === "Redo")!).opacity = UndoManager.CanRedo() ? 1 : 0.4, { fireImmediately: true });
+        reaction(() => UndoManager.undoStack.slice(), () => Doc.GetProto(btns.find(btn => btn.title === "Undo")!).opacity = UndoManager.CanUndo() ? 1 : 0.4, { fireImmediately: true });
         return DocUtils.AssignDocField(doc, field, (opts, items) => this.linearButtonList(opts, items??[]), dockBtnsReqdOpts, btns);
     }
 
@@ -627,30 +627,34 @@ export class CurrentUserUtils {
     }
     static viewTools(): Button[] {
         return [
-            { title: "Snap\xA0Lines", icon: "th",           toolTip: "Show Snap Lines",     btnType: ButtonType.ToggleButton, expertMode: false, toolType:"snaplines",  funcs: {}, scripts: { onClick: 'showFreeform(self.toolType, _readOnly_)'}}, // Only when floating document is selected in freeform
-            { title: "Grid",          icon: "border-all",   toolTip: "Show Grid",           btnType: ButtonType.ToggleButton, expertMode: false, toolType:"grid",       funcs: {}, scripts: { onClick: 'showFreeform(self.toolType, _readOnly_)'}}, // Only when floating document is selected in freeform
-            { title: "View\xA0All",   icon: "object-group", toolTip: "Fit all Docs to View",btnType: ButtonType.ToggleButton, expertMode: false, toolType:"viewAll",    funcs: {}, scripts: { onClick: 'showFreeform(self.toolType, _readOnly_)'}}, // Only when floating document is selected in freeform
-            { title: "Clusters",      icon: "braille",      toolTip: "Show Doc Clusters",   btnType: ButtonType.ToggleButton, expertMode: false, toolType:"clusters",   funcs: {}, scripts: { onClick: 'showFreeform(self.toolType, _readOnly_)'}}, // Only when floating document is selected in freeform
-            { title: "Cards",         icon: "brain",        toolTip: "Flashcards",          btnType: ButtonType.ToggleButton, expertMode: false, toolType:"flashcards", funcs: {}, scripts: { onClick: 'showFreeform(self.toolType, _readOnly_)'}}, // Only when floating document is selected in freeform
-            { title: "Arrange",icon:"arrow-down-short-wide",toolTip:"Toggle Auto Arrange",  btnType: ButtonType.ToggleButton, expertMode: false, toolType:"arrange",    funcs: {hidden: 'IsNoviceMode()'}, scripts: { onClick: 'showFreeform(self.toolType, _readOnly_)'}}, // Only when floating document is selected in freeform
+            { title: "Snap", icon: "th",                    toolTip: "Show Snap Lines",     btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"snaplines",  funcs: {}, scripts: { onClick: '{ return showFreeform(self.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform
+            { title: "Grid",          icon: "border-all",   toolTip: "Show Grid",           btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"grid",       funcs: {}, scripts: { onClick: '{ return showFreeform(self.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform
+            { title: "View All",   icon: "object-group", toolTip: "Fit all Docs to View",   btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"viewAll",    funcs: {}, scripts: { onClick: '{ return showFreeform(self.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform
+            { title: "Clusters",      icon: "braille",      toolTip: "Show Doc Clusters",   btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"clusters",   funcs: {}, scripts: { onClick: '{ return showFreeform(self.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform
+            { title: "Cards",         icon: "brain",        toolTip: "Flashcards",          btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"flashcards", funcs: {}, scripts: { onClick: '{ return showFreeform(self.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform
+            { title: "Arrange",icon:"arrow-down-short-wide",toolTip:"Toggle Auto Arrange",  btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"arrange",    funcs: {hidden: 'IsNoviceMode()'}, scripts: { onClick: '{ return showFreeform(self.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform
         ]
     }
     static textTools():Button[] {
         return [
             { title: "Font",     toolTip: "Font", width: 100,     btnType: ButtonType.DropdownList,                      toolType:"font",     ignoreClick: true,   scripts: {script:  '{ return setFontAttr(self.toolType, value, _readOnly_);}'},
               btnList: new List<string>(["Roboto", "Roboto Mono", "Nunito", "Times New Roman", "Arial", "Georgia", "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"]) },
-            { title: "Font Size",toolTip: "Font size (%size)",    btnType: ButtonType.NumberDropdownButton, width: 75,           toolType:"fontSize", ignoreClick: true,   scripts: {script:  '{ return setFontAttr(self.toolType, value, _readOnly_);}'}, numBtnMax: 200, numBtnMin: 0 },
+            { title: "Font Size",toolTip: "Font size (%size)",    btnType: ButtonType.NumberDropdownButton,              toolType:"fontSize", ignoreClick: true,   scripts: {script:  '{ return setFontAttr(self.toolType, value, _readOnly_);}'}, numBtnMax: 200, numBtnMin: 6 },
             { title: "Color",    toolTip: "Font color (%color)",  btnType: ButtonType.ColorButton,  icon: "font",        toolType:"fontColor",ignoreClick: true,   scripts: {script:  '{ return setFontAttr(self.toolType, value, _readOnly_);}'}},
-            { title: "Highlight",toolTip:"Font highlight",       btnType: ButtonType.ColorButton,  icon: "highlighter", toolType:"highlight",ignoreClick: true,   scripts: {script:  '{ return setFontAttr(self.toolType, value, _readOnly_);}'},funcs: {hidden: "IsNoviceMode()"} },
-            { title: "Bold",     toolTip: "Bold (Ctrl+B)",        btnType: ButtonType.ToggleButton, icon: "bold",        toolType:"bold",                          scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} },
-            { title: "Italic",   toolTip: "Italic (Ctrl+I)",      btnType: ButtonType.ToggleButton, icon: "italic",      toolType:"italics",                       scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} },
-            { title: "Under",    toolTip: "Underline (Ctrl+U)",   btnType: ButtonType.ToggleButton, icon: "underline",   toolType:"underline",                     scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} },
-            { title: "Bullets",  toolTip: "Bullet List",          btnType: ButtonType.ToggleButton, icon: "list",        toolType:"bullet",                        scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} },
-            { title: "#",        toolTip: "Number List",          btnType: ButtonType.ToggleButton, icon: "list-ol",     toolType:"decimal",                       scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} },
-            { title: "Left",     toolTip: "Left align (Cmd-[)",   btnType: ButtonType.ToggleButton, icon: "align-left",  toolType:"left",                          scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}' }},
-            { title: "Center",   toolTip: "Center align (Cmd-\\)",btnType: ButtonType.ToggleButton, icon: "align-center",toolType:"center",                        scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} },
-            { title: "Right",    toolTip: "Right align (Cmd-])",  btnType: ButtonType.ToggleButton, icon: "align-right", toolType:"right",                         scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} },
-            { title: "Dictate",  toolTip: "Dictate",              btnType: ButtonType.ToggleButton, icon: "microphone",  toolType:"dictation",                     scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'}},
+            { title: "Highlight",toolTip:"Font highlight",        btnType: ButtonType.ColorButton,  icon: "highlighter", toolType:"highlight",ignoreClick: true,   scripts: {script:  '{ return setFontAttr(self.toolType, value, _readOnly_);}'},funcs: {hidden: "IsNoviceMode()"} },
+            { title: "Bold",     toolTip: "Bold (Ctrl+B)",        btnType: ButtonType.ToggleButton, icon: "bold",        toolType:"bold",     ignoreClick: true,   scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} },
+            { title: "Italic",   toolTip: "Italic (Ctrl+I)",      btnType: ButtonType.ToggleButton, icon: "italic",      toolType:"italics",  ignoreClick: true,   scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} },
+            { title: "Under",    toolTip: "Underline (Ctrl+U)",   btnType: ButtonType.ToggleButton, icon: "underline",   toolType:"underline",ignoreClick: true,   scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} },
+            { title: "Bullets",  toolTip: "Bullet List",          btnType: ButtonType.ToggleButton, icon: "list",        toolType:"bullet",   ignoreClick: true,   scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} },
+            { title: "#",        toolTip: "Number List",          btnType: ButtonType.ToggleButton, icon: "list-ol",     toolType:"decimal",  ignoreClick: true,   scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} },
+            { title: "Alignment",toolTip: "Alignment",            btnType: ButtonType.MultiToggleButton,                  toolType:"alignment", ignoreClick: true,  scripts: {script:  '{ return setFontAttr(self.toolType, value, _readOnly_);}'},
+              subMenu: [
+                { title: "Left",     toolTip: "Left align (Cmd-[)",   btnType: ButtonType.ToggleButton, icon: "align-left",  toolType:"left",  ignoreClick: true,      scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}' }},
+                { title: "Center",   toolTip: "Center align (Cmd-\\)",btnType: ButtonType.ToggleButton, icon: "align-center",toolType:"center",ignoreClick: true,      scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} },
+                { title: "Right",    toolTip: "Right align (Cmd-])",  btnType: ButtonType.ToggleButton, icon: "align-right", toolType:"right", ignoreClick: true,      scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} },
+              ]
+            },
+            { title: "Dictate",  toolTip: "Dictate",              btnType: ButtonType.ToggleButton, icon: "microphone",  toolType:"dictation", ignoreClick: true,  scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'}},
             { title: "NoLink",   toolTip: "Auto Link",            btnType: ButtonType.ToggleButton, icon: "link",        toolType:"noAutoLink", expertMode:true,   scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'}, funcs: {hidden: 'IsNoviceMode()'}},
             // { title: "Strikethrough", tooltip: "Strikethrough", btnType: ButtonType.ToggleButton, icon: "strikethrough", scripts: {onClick:: 'toggleStrikethrough()'}},
             // { title: "Superscript", tooltip: "Superscript", btnType: ButtonType.ToggleButton, icon: "superscript", scripts: {onClick:: 'toggleSuperscript()'}},
@@ -695,19 +699,19 @@ export class CurrentUserUtils {
                     CollectionViewType.Carousel3D, CollectionViewType.Linear, CollectionViewType.Map,
                     CollectionViewType.Grid, CollectionViewType.NoteTaking]),
               title: "Perspective",                    toolTip: "View",                 btnType: ButtonType.DropdownList,                                                                                                                                    ignoreClick: true, width: 100, scripts: { script: 'setView(value, _readOnly_)'}},
-            { title: "Pin",     icon: "map-pin",       toolTip: "Pin View to Trail",    btnType: ButtonType.ClickButton,         expertMode: false,                                                                                                                             width: 20,  scripts: { onClick: 'pinWithView(altKey)'}},
-            { title: "Fill",    icon: "fill-drip",     toolTip: "Background Fill Color",btnType: ButtonType.ColorButton,         expertMode: false,                                                                                                          ignoreClick: true, width: 20,  scripts: { script:  'return setBackgroundColor(value, _readOnly_)'}}, // Only when a document is selected
-            { title: "Header",  icon: "heading",       toolTip: "Header Color",         btnType: ButtonType.ColorButton,         expertMode: false,                                                                                                          ignoreClick: true,             scripts: { script:  'return setHeaderColor(value, _readOnly_)'}},
-            { title: "Overlay", icon: "layer-group",   toolTip: "Overlay",              btnType: ButtonType.ToggleButton,        expertMode: false, toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectionManager_selectedDocType(self.toolType, self.expertMode, true)'},       scripts: { onClick: 'toggleOverlay(_readOnly_)'}}, // Only when floating document is selected in freeform
-            { title: "Back",    icon: "chevron-left",  toolTip: "Prev Animation Frame", btnType: ButtonType.ClickButton,         expertMode: true,  toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectionManager_selectedDocType(self.toolType, self.expertMode)'}, width: 20,  scripts: { onClick: 'prevKeyFrame(_readOnly_)'}},
-            { title: "Num", icon:"",toolTip: "Frame Number (click to toggle edit mode)",btnType: ButtonType.TextButton,          expertMode: true,  toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectionManager_selectedDocType(self.toolType, self.expertMode)', buttonText: 'selectedDocs()?.lastElement()?.currentFrame?.toString()'}, width: 20, scripts: { onClick: '{ return curKeyFrame(_readOnly_);}'}},
-            { title: "Fwd",     icon: "chevron-right", toolTip: "Next Animation Frame", btnType: ButtonType.ClickButton,         expertMode: true,  toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectionManager_selectedDocType(self.toolType, self.expertMode)'}, width: 20,  scripts: { onClick: 'nextKeyFrame(_readOnly_)'}},
-            { title: "Text",    icon: "Text",          toolTip: "Text functions",       subMenu: CurrentUserUtils.textTools(),   expertMode: false, toolType:DocumentType.RTF,            funcs: {                                                                             linearView_IsExpanded: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} }, // Always available
-            { title: "Ink",     icon: "Ink",           toolTip: "Ink functions",        subMenu: CurrentUserUtils.inkTools(),    expertMode: false, toolType:DocumentType.INK,            funcs: {                                                                             linearView_IsExpanded: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`}, scripts: { onClick: 'setInkToolDefaults()'} }, // Always available
-            { title: "Doc",     icon: "Doc",           toolTip: "Freeform Doc tools",   subMenu: CurrentUserUtils.freeTools(),   expertMode: false, toolType:CollectionViewType.Freeform, funcs: {hidden: `!SelectionManager_selectedDocType(self.toolType, self.expertMode, true)`, linearView_IsExpanded: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} }, // Always available
-            { title: "View",    icon: "View",          toolTip: "View tools",           subMenu: CurrentUserUtils.viewTools(),   expertMode: false, toolType:CollectionViewType.Freeform, funcs: {hidden: `!SelectionManager_selectedDocType(self.toolType, self.expertMode)`, linearView_IsExpanded: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} }, // Always available
-            { title: "Web",     icon: "Web",           toolTip: "Web functions",        subMenu: CurrentUserUtils.webTools(),    expertMode: false, toolType:DocumentType.WEB,            funcs: {hidden: `!SelectionManager_selectedDocType(self.toolType, self.expertMode)`, linearView_IsExpanded: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} }, // Only when Web is selected
-            { title: "Schema",  icon: "Schema",linearBtnWidth:58,toolTip: "Schema functions",subMenu: CurrentUserUtils.schemaTools(), expertMode: false, toolType:CollectionViewType.Schema,   funcs: {hidden: `!SelectionManager_selectedDocType(self.toolType, self.expertMode)`, linearView_IsExpanded: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} } // Only when Schema is selected
+            { title: "Pin",     icon: "map-pin",       toolTip: "Pin View to Trail",    btnType: ButtonType.ClickButton,         expertMode: false,                                                                                                                         width: 30,  scripts: { onClick: 'pinWithView(altKey)'}},
+            { title: "Fill",    icon: "fill-drip",     toolTip: "Background Fill Color",btnType: ButtonType.ColorButton,         expertMode: false,                                                                                                          ignoreClick: true, width: 30,  scripts: { script:  'return setBackgroundColor(value, _readOnly_)'}}, // Only when a document is selected
+            { title: "Header",  icon: "heading",       toolTip: "Header Color",         btnType: ButtonType.ColorButton,         expertMode: true,                                                                                                          ignoreClick: true,             scripts: { script:  'return setHeaderColor(value, _readOnly_)'}},
+            { title: "Overlay", icon: "layer-group",   toolTip: "Overlay",              btnType: ButtonType.ToggleButton,        expertMode: true, toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectionManager_selectedDocType(self.toolType, self.expertMode, true)'},       scripts: { onClick: 'return { toggleOverlay(_readOnly_); }'}}, // Only when floating document is selected in freeform
+            { title: "Back",    icon: "chevron-left",  toolTip: "Prev Animation Frame", btnType: ButtonType.ClickButton,         expertMode: true,  toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectionManager_selectedDocType(self.toolType, self.expertMode)'}, width: 30,  scripts: { onClick: 'prevKeyFrame(_readOnly_)'}},
+            { title: "Num",     icon:"",               toolTip: "Frame Number (click to toggle edit mode)",    btnType: ButtonType.TextButton,          expertMode: true,  toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectionManager_selectedDocType(self.toolType, self.expertMode)', buttonText: 'selectedDocs()?.lastElement()?.currentFrame?.toString()'}, width: 20, scripts: { onClick: '{ return curKeyFrame(_readOnly_);}'}},
+            { title: "Fwd",     icon: "chevron-right", toolTip: "Next Animation Frame", btnType: ButtonType.ClickButton,         expertMode: true,  toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectionManager_selectedDocType(self.toolType, self.expertMode)'}, width: 30,  scripts: { onClick: 'nextKeyFrame(_readOnly_)'}},
+            { title: "Text",    icon: "Text",          toolTip: "Text functions",       subMenu: CurrentUserUtils.textTools(),   expertMode: false, toolType:DocumentType.RTF,            funcs: {                                                                             linearView_IsOpen: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} }, // Always available
+            { title: "Ink",     icon: "Ink",           toolTip: "Ink functions",        subMenu: CurrentUserUtils.inkTools(),    expertMode: false, toolType:DocumentType.INK,            funcs: {                                                                             linearView_IsOpen: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`}, scripts: { onClick: 'setInkToolDefaults()'} }, // Always available
+            { title: "Doc",     icon: "Doc",           toolTip: "Freeform Doc tools",   subMenu: CurrentUserUtils.freeTools(),   expertMode: false, toolType:CollectionViewType.Freeform, funcs: {hidden: `!SelectionManager_selectedDocType(self.toolType, self.expertMode, true)`, linearView_IsOpen: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} }, // Always available
+            { title: "View",    icon: "View",          toolTip: "View tools",           subMenu: CurrentUserUtils.viewTools(),   expertMode: false, toolType:CollectionViewType.Freeform, funcs: {hidden: `!SelectionManager_selectedDocType(self.toolType, self.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} }, // Always available
+            { title: "Web",     icon: "Web",           toolTip: "Web functions",        subMenu: CurrentUserUtils.webTools(),    expertMode: false, toolType:DocumentType.WEB,            funcs: {hidden: `!SelectionManager_selectedDocType(self.toolType, self.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} }, // Only when Web is selected
+            { title: "Schema",  icon: "Schema",linearBtnWidth:58,toolTip: "Schema functions",subMenu: CurrentUserUtils.schemaTools(), expertMode: false, toolType:CollectionViewType.Schema,   funcs: {hidden: `!SelectionManager_selectedDocType(self.toolType, self.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} } // Only when Schema is selected
         ];
     }
 
@@ -715,7 +719,6 @@ export class CurrentUserUtils {
     static setupContextMenuButton(params:Button, btnDoc?:Doc) {
         const reqdOpts:DocumentOptions = {
             ...OmitKeys(params, ["scripts", "funcs", "subMenu"]).omit,
-            backgroundColor: params.backgroundColor ??"transparent", ///  a bit hacky. if an onClick is specified, then assume a toggle uses onClick to get the backgroundColor (see below).  Otherwise, assume a transparent background
             color: Colors.WHITE, isSystem: true,
             _nativeWidth: params.width ?? 30, _width: params.width ?? 30,
             _height: 30, _nativeHeight: 30, linearBtnWidth: params.linearBtnWidth,
@@ -724,23 +727,29 @@ export class CurrentUserUtils {
         };
         const reqdFuncs:{[key:string]:any} = {
             ...params.funcs,
-            backgroundColor: params.btnType === ButtonType.ToggleButton ? params.scripts?.onClick:undefined /// a bit hacky.  if onClick is set, then we assume it returns a color value when queried with '_readOnly_'.  This will be true for toggle buttons, but not generally
         }
         return DocUtils.AssignScripts(DocUtils.AssignOpts(btnDoc, reqdOpts) ?? Docs.Create.FontIconDocument(reqdOpts), params.scripts, reqdFuncs);
     }
 
     /// Initializes all the default buttons for the top bar context menu
     static setupContextMenuButtons(doc: Doc, field="myContextMenuBtns") {
-        const reqdCtxtOpts:DocumentOptions = { title: "context menu buttons", undoIgnoreFields:new List<string>(['width', "linearView_IsExpanded"]), flexGap: 0, childDragAction: 'embed', childDontRegisterViews: true,  linearView_IsExpanded: true, ignoreClick: true, linearView_Expandable: false, _height: 35 };
+        const reqdCtxtOpts:DocumentOptions = { title: "context menu buttons", undoIgnoreFields:new List<string>(['width', "linearView_IsOpen"]), flexGap: 0, childDragAction: 'embed', childDontRegisterViews: true,  linearView_IsOpen: true, ignoreClick: true, linearView_Expandable: false, _height: 35 };
         const ctxtMenuBtnsDoc = DocUtils.AssignDocField(doc, field, (opts, items) => this.linearButtonList(opts, items??[]), reqdCtxtOpts, undefined);
         const ctxtMenuBtns = CurrentUserUtils.contextMenuTools().map(params => {
             const menuBtnDoc = DocListCast(ctxtMenuBtnsDoc?.data).find(doc => doc.title === params.title);
-            if (!params.subMenu) {
+            if (!params.subMenu) { // button does not have a sub menu
                 return this.setupContextMenuButton(params, menuBtnDoc);
-            } else {
-                const reqdSubMenuOpts = { ...OmitKeys(params, ["scripts", "funcs", "subMenu"]).omit, undoIgnoreFields: new List<string>(['width', "linearView_IsExpanded"]),
+            } else { // linear view
+                let reqdSubMenuOpts;
+                if (params.btnType === ButtonType.MultiToggleButton) {
+                    reqdSubMenuOpts = { ...OmitKeys(params, ["scripts", "funcs", "subMenu"]).omit, undoIgnoreFields: new List<string>(['width', "linearView_IsOpen"]),
+                    childDontRegisterViews: true, flexGap: 0, _height: 30, ignoreClick: params.scripts?.onClick ? false : true,
+                    linearView_SubMenu: true, linearView_Dropdown: true, };
+                } else {
+                    reqdSubMenuOpts = { ...OmitKeys(params, ["scripts", "funcs", "subMenu"]).omit, undoIgnoreFields: new List<string>(['width', "linearView_IsOpen"]),
                     childDontRegisterViews: true, flexGap: 0, _height: 30, ignoreClick: params.scripts?.onClick ? false : true,
                     linearView_SubMenu: true, linearView_Expandable: true, };
+                }
                 const items = params.subMenu?.map(sub =>
                     this.setupContextMenuButton(sub, DocListCast(menuBtnDoc?.data).find(doc => doc.title === sub.title))
                 );
@@ -767,7 +776,7 @@ export class CurrentUserUtils {
             linkDocs.title = "LINK DATABASE: " + Doc.CurrentUserEmail;
             linkDocs.author = Doc.CurrentUserEmail;
             linkDocs.data = new List<Doc>([]);
-            linkDocs["acl-Public"] = SharingPermissions.Augment;
+            linkDocs["acl-Guest"] = SharingPermissions.Augment;
             doc.myLinkDatabase = new PrefetchProxy(linkDocs);
         }
     }
@@ -777,8 +786,6 @@ export class CurrentUserUtils {
     // When the user views one of these documents, it will be added to the sharing documents 'viewed' list field
     // The sharing document also stores the user's color value which helps distinguish shared documents from personal documents
     static setupSharedDocs(doc: Doc, sharingDocumentId: string) {
-        const addToDashboards = ScriptField.MakeScript(`addToDashboards(self)`);
-        const dashboardFilter = ScriptField.MakeFunction(`doc._type_collection === '${CollectionViewType.Docking}'`, { doc: Doc.name });
         const dblClkScript = "{scriptContext.openLevel(documentView); addDocToList(scriptContext.props.treeView.props.Document, 'viewed', documentView.rootDoc);}";
         
         const sharedScripts = {  treeViewChildDoubleClick: dblClkScript,  }
@@ -786,11 +793,11 @@ export class CurrentUserUtils {
             title: "My Shared Docs",
             userColor: "rgb(202, 202, 202)",
             isFolder:true, undoIgnoreFields:new List<string>(['treeViewSortCriterion']),
-            childContextMenuFilters: new List<ScriptField>([dashboardFilter!,]),
-            childContextMenuScripts: new List<ScriptField>([addToDashboards!,]),
-            childContextMenuLabels: new List<string>(["Add to Dashboards",]),
-            childContextMenuIcons: new List<string>(["user-plus",]),
-            "acl-Public": SharingPermissions.Augment, "_acl-Public": SharingPermissions.Augment,
+            // childContextMenuFilters: new List<ScriptField>([dashboardFilter!,]),
+            // childContextMenuScripts: new List<ScriptField>([addToDashboards!,]),
+            // childContextMenuLabels: new List<string>(["Add to Dashboards",]),
+            // childContextMenuIcons: new List<string>(["user-plus",]),
+            "acl-Guest": SharingPermissions.Augment, "_acl-Guest": SharingPermissions.Augment,
             childDragAction: "embed", isSystem: true, contentPointerEvents: "all", childLimitHeight: 0, _yMargin: 0, _gridGap: 15, childDontRegisterViews:true,
             // NOTE: treeViewHideTitle & _layout_showTitle is for a TreeView's editable title, _layout_showTitle is for DocumentViews title bar
             _layout_showTitle: "title", treeViewHideTitle: true, ignoreClick: true, _lockedPosition: true, layout_boxShadow: "0 0", _chromeHidden: true, dontRegisterView: true, 
@@ -798,6 +805,8 @@ export class CurrentUserUtils {
         };
         
         DocUtils.AssignDocField(doc, "mySharedDocs", opts => Docs.Create.TreeDocument([], opts, sharingDocumentId + "layout", sharingDocumentId), sharedDocOpts, undefined, sharedScripts);
+        if (!Doc.GetProto(DocCast(doc.mySharedDocs)).data_dashboards) Doc.GetProto(DocCast(doc.mySharedDocs)).data_dashboards = new List<Doc>();
+        console.log(doc.mySharedDocs);
     }
 
     /// Import option on the left side button panel 
@@ -812,7 +821,7 @@ export class CurrentUserUtils {
         const myImports = DocUtils.AssignDocField(doc, field, (opts) => Docs.Create.StackingDocument([], opts), reqdOpts);
     
         const reqdBtnOpts:DocumentOptions = { _forceActive: true, toolTip: "Import from computer",
-            _width: 30, _height: 30, _dragOnlyWithinContainer: true, _layout_hideContextMenu: true, title: "Import", btnType: ButtonType.ClickButton, 
+            _width: 30, _height: 30, color: Colors.BLACK, _dragOnlyWithinContainer: true, _layout_hideContextMenu: true, title: "Import", btnType: ButtonType.ClickButton, 
             buttonText: "Import", icon: "upload", isSystem: true };
         DocUtils.AssignDocField(myImports, "layout_headerButton", (opts) => Docs.Create.FontIconDocument(opts), reqdBtnOpts, undefined, { onClick: "importDocument()" });
         return myImports;
@@ -826,7 +835,7 @@ export class CurrentUserUtils {
             async () => {
                 const groups = await DocListCastAsync(DocCast(doc.globalGroupDatabase).data);
                 const mygroups = groups?.filter(group => JSON.parse(StrCast(group.members)).includes(Doc.CurrentUserEmail)) || [];
-                SetCachedGroups(["Public", ...mygroups?.map(g => StrCast(g.title))]);
+                SetCachedGroups(["Guest", ...mygroups?.map(g => StrCast(g.title))]);
             }, { fireImmediately: true });
         doc.isSystem ?? (doc.isSystem = true);
         doc.title ?? (doc.title = Doc.CurrentUserEmail);
@@ -850,8 +859,14 @@ export class CurrentUserUtils {
         doc.fontHighlight ?? (doc.fontHighlight = "");
         doc.defaultAclPrivate ?? (doc.defaultAclPrivate = false);
         doc.savedFilters ?? (doc.savedFilters = new List<Doc>());
+        doc.userBackgroundColor ?? (doc.userBackgroundColor = Colors.DARK_GRAY);
+        addStyleSheetRule(SettingsManager._settingsStyle, 'lm_header', { background: `${doc.userBackgroundColor} !important` });
+        doc.userVariantColor ?? (doc.userVariantColor = Colors.MEDIUM_BLUE);
+        doc.userColor ?? (doc.userColor = Colors.LIGHT_GRAY);
+        doc.userTheme ?? (doc.userTheme = ColorScheme.Dark);
         doc.filterDocCount = 0;
         doc.treeViewFreezeChildren = "remove|add";
+        doc.activePage = doc.activeDashboard === undefined ? 'home': doc.activePage;
         this.setupLinkDocs(doc, linkDatabaseId);
         this.setupSharedDocs(doc, sharingDocumentId);  // sets up the right sidebar collection for mobile upload documents and sharing
         this.setupDefaultIconTemplates(doc);  // creates a set of icon templates triggered by the document deoration icon
diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 3f0848d00..b921b3116 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -194,7 +194,7 @@ export class DocumentManager {
         var containerDocContext = srcContext ? [srcContext, doc] : [doc];
         while (
             containerDocContext.length &&
-            containerDocContext[0]?.embedContainer &&
+            DocCast(containerDocContext[0]?.embedContainer) &&
             DocCast(containerDocContext[0].embedContainer)?._type_collection !== CollectionViewType.Docking &&
             (includeExistingViews || !DocumentManager.Instance.getDocumentView(containerDocContext[0]))
         ) {
diff --git a/src/client/util/DropConverter.ts b/src/client/util/DropConverter.ts
index 47997cc5c..f235be192 100644
--- a/src/client/util/DropConverter.ts
+++ b/src/client/util/DropConverter.ts
@@ -9,7 +9,7 @@ import { RichTextField } from '../../fields/RichTextField';
 import { ImageField } from '../../fields/URLField';
 import { ScriptingGlobals } from './ScriptingGlobals';
 import { listSpec } from '../../fields/Schema';
-import { ButtonType } from '../views/nodes/button/FontIconBox';
+import { ButtonType } from '../views/nodes/FontIconBox/FontIconBox';
 
 export function MakeTemplate(doc: Doc, first: boolean = true, rename: Opt<string> = undefined, templateField: string = '') {
     if (templateField) Doc.GetProto(doc).title = templateField; /// the title determines which field is being templated
diff --git a/src/client/util/GroupManager.scss b/src/client/util/GroupManager.scss
index 9438bdd72..253ed5d2a 100644
--- a/src/client/util/GroupManager.scss
+++ b/src/client/util/GroupManager.scss
@@ -1,6 +1,7 @@
 .group-interface {
     width: 380px;
     height: 300px;
+    position: relative;
 
     .dialogue-box {
         .group-create {
@@ -56,8 +57,9 @@
     flex-direction: column;
 
     .overlay {
-        transform: translate(-20px, -20px);
-        border-radius: 10px;
+        transform: translate(-10px, -10px);
+        width: 400px;
+        height: 320px;
     }
 
     .delete-button {
@@ -66,10 +68,8 @@
 
     .close-button {
         position: absolute;
-        right: 1em;
-        top: 1em;
-        cursor: pointer;
-        z-index: 999;
+        right: 2px;
+        top: 2px;
     }
 
     .group-heading {
diff --git a/src/client/util/LinkFollower.ts b/src/client/util/LinkFollower.ts
index f74409e42..3e526c4c0 100644
--- a/src/client/util/LinkFollower.ts
+++ b/src/client/util/LinkFollower.ts
@@ -103,7 +103,7 @@ export class LinkFollower {
                         Doc.AddDocToList(sourceDocParent, Doc.LayoutFieldKey(sourceDocParent), target);
                         movedTarget = true;
                     }
-                    target.embedContainer = sourceDocParent;
+                    Doc.SetContainer(target, sourceDocParent);
                     const moveTo = [NumCast(sourceDoc.x) + NumCast(sourceDoc.followLinkXoffset), NumCast(sourceDoc.y) + NumCast(sourceDoc.followLinkYoffset)];
                     if (sourceDoc.followLinkXoffset !== undefined && moveTo[0] !== target.x) {
                         target.x = moveTo[0];
diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts
index ce422f849..c7f092565 100644
--- a/src/client/util/LinkManager.ts
+++ b/src/client/util/LinkManager.ts
@@ -46,38 +46,41 @@ export class LinkManager {
         LinkManager._instance = this;
         this.createlink_relationshipLists();
         LinkManager.userLinkDBs = [];
-        const addLinkToDoc = (link: Doc) => {
-            Promise.all([link]).then(linkdoc => {
-                const link = DocCast(linkdoc[0]);
-                Promise.all([link.proto]).then(linkproto => {
-                    Promise.all([link.link_anchor_1, link.link_anchor_2]).then(linkdata => {
-                        const a1 = DocCast(linkdata[0]);
-                        const a2 = DocCast(linkdata[1]);
-                        a1 &&
-                            a2 &&
-                            Promise.all([Doc.GetProto(a1), Doc.GetProto(a2)]).then(
-                                action(protos => {
-                                    (protos[0] as Doc)?.[DirectLinks].add(link);
-                                    (protos[1] as Doc)?.[DirectLinks].add(link);
+        // since this is an action, not a reaction, we get only one shot to add this link to the Anchor docs
+        // Thus make sure all promised values are resolved from link -> link.proto -> link.link_anchor_[1,2] -> link.link_anchor_[1,2].proto
+        // Then add the link to the anchor protos.
+        const addLinkToDoc = (lprom: Doc) =>
+            PromiseValue(lprom).then((link: Opt<Doc>) =>
+                PromiseValue(link?.proto as Doc).then((lproto: Opt<Doc>) =>
+                    Promise.all([lproto?.link_anchor_1 as Doc, lproto?.link_anchor_2 as Doc].map(PromiseValue)).then((lAnchs: Opt<Doc>[]) =>
+                        Promise.all(lAnchs.map(lAnch => PromiseValue(lAnch?.proto as Doc))).then((lAnchProtos: Opt<Doc>[]) =>
+                            Promise.all(lAnchProtos.map(lAnchProto => PromiseValue(lAnchProto?.proto as Doc))).then(
+                                action(lAnchProtoProtos => {
+                                    link && lAnchs[0] && Doc.GetProto(lAnchs[0])[DirectLinks].add(link);
+                                    link && lAnchs[1] && Doc.GetProto(lAnchs[1])[DirectLinks].add(link);
                                 })
-                            );
-                    });
-                });
-            });
-        };
-        const remLinkFromDoc = (link: Doc) => {
-            const a1 = link?.link_anchor_1;
-            const a2 = link?.link_anchor_2;
-            Promise.all([a1, a2]).then(
-                action(() => {
-                    if (a1 instanceof Doc && a2 instanceof Doc && ((a1.author !== undefined && a2.author !== undefined) || link.author === Doc.CurrentUserEmail)) {
-                        Doc.GetProto(a1)[DirectLinks].delete(link);
-                        Doc.GetProto(a2)[DirectLinks].delete(link);
-                        Doc.GetProto(link)[DirectLinks].delete(link);
-                    }
-                })
+                            )
+                        )
+                    )
+                )
             );
-        };
+
+        const remLinkFromDoc = (lprom: Doc) =>
+            PromiseValue(lprom).then((link: Opt<Doc>) =>
+                PromiseValue(link?.proto as Doc).then((lproto: Opt<Doc>) =>
+                    Promise.all([lproto?.link_anchor_1 as Doc, lproto?.link_anchor_2 as Doc].map(PromiseValue)).then((lAnchs: Opt<Doc>[]) =>
+                        Promise.all(lAnchs.map(lAnch => PromiseValue(lAnch?.proto as Doc))).then((lAnchProtos: Opt<Doc>[]) =>
+                            Promise.all(lAnchProtos.map(lAnchProto => PromiseValue(lAnchProto?.proto as Doc))).then(
+                                action(lAnchProtoProtos => {
+                                    link && lAnchs[0] && Doc.GetProto(lAnchs[0])[DirectLinks].delete(link);
+                                    link && lAnchs[1] && Doc.GetProto(lAnchs[1])[DirectLinks].delete(link);
+                                })
+                            )
+                        )
+                    )
+                )
+            );
+
         const watchUserLinkDB = (userLinkDBDoc: Doc) => {
             LinkManager._links.push(...DocListCast(userLinkDBDoc.data));
             const toRealField = (field: Field) => (field instanceof ProxyField ? field.value : field); // see List.ts.  data structure is not a simple list of Docs, but a list of ProxyField/Fields
@@ -156,7 +159,7 @@ export class LinkManager {
         return this.relatedLinker(anchor);
     } // finds all links that contain the given anchor
     public getAllDirectLinks(anchor: Doc): Doc[] {
-        return Array.from(Doc.GetProto(anchor)[DirectLinks] ?? []);
+        return Array.from(Doc.GetProto(anchor)[DirectLinks]);
     } // finds all links that contain the given anchor
 
     relatedLinker = computedFn(function relatedLinker(this: any, anchor: Doc): Doc[] {
diff --git a/src/client/util/RTFMarkup.tsx b/src/client/util/RTFMarkup.tsx
index 247267710..b93d4f293 100644
--- a/src/client/util/RTFMarkup.tsx
+++ b/src/client/util/RTFMarkup.tsx
@@ -52,7 +52,7 @@ export class RTFMarkup extends React.Component<{}> {
                     {`  add a sidebar text document inline`}
                 </p>
                 <p>
-                    <b style={{ fontSize: 'larger' }}>{`\`\` `}</b>
+                    <b style={{ fontSize: 'larger' }}>{`\`\`\` `}</b>
                     {`  create a code snippet block`}
                 </p>
                 <p>
diff --git a/src/client/util/ReportManager.tsx b/src/client/util/ReportManager.tsx
index 4c1020455..89c17e42f 100644
--- a/src/client/util/ReportManager.tsx
+++ b/src/client/util/ReportManager.tsx
@@ -11,7 +11,7 @@ import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager
 import { DocServer } from '../DocServer';
 import { Networking } from '../Network';
 import { MainViewModal } from '../views/MainViewModal';
-import { FontIconBox } from '../views/nodes/button/FontIconBox';
+import { FontIconBox } from '../views/nodes/FontIconBox/FontIconBox';
 import { DragManager } from './DragManager';
 import { GroupManager } from './GroupManager';
 import './SettingsManager.scss';
@@ -290,7 +290,7 @@ export class ReportManager extends React.Component<{}> {
                 isDisplayed={this.isOpen}
                 interactive={true}
                 closeOnExternalClick={this.close}
-                dialogueBoxStyle={{ width: 'auto', height: '500px', background: Cast(Doc.SharingDoc().userColor, 'string', null) }}
+                dialogueBoxStyle={{ width: 'auto', height: '500px', background: Cast(Doc.UserDoc().userColor, 'string', null) }}
             />
         );
     }
diff --git a/src/client/util/ScriptManager.ts b/src/client/util/ScriptManager.ts
index 42a6493ea..87509f2ea 100644
--- a/src/client/util/ScriptManager.ts
+++ b/src/client/util/ScriptManager.ts
@@ -1,12 +1,11 @@
-import { Doc, DocListCast } from "../../fields/Doc";
-import { List } from "../../fields/List";
-import { listSpec } from "../../fields/Schema";
-import { Cast, StrCast } from "../../fields/Types";
-import { Docs } from "../documents/Documents";
-import { ScriptingGlobals } from "./ScriptingGlobals";
+import { Doc, DocListCast } from '../../fields/Doc';
+import { List } from '../../fields/List';
+import { listSpec } from '../../fields/Schema';
+import { Cast, StrCast } from '../../fields/Types';
+import { Docs } from '../documents/Documents';
+import { ScriptingGlobals } from './ScriptingGlobals';
 
 export class ScriptManager {
-
     static _initialized = false;
     private static _instance: ScriptManager;
     public static get Instance(): ScriptManager {
@@ -24,11 +23,7 @@ export class ScriptManager {
     }
     public getAllScripts(): Doc[] {
         const sdoc = ScriptManager.Instance.ScriptManagerDoc;
-        if (sdoc) {
-            const docs = DocListCast(sdoc.data);
-            return docs;
-        }
-        return [];
+        return sdoc ? DocListCast(sdoc.data) : [];
     }
 
     public addScript(scriptDoc: Doc): boolean {
@@ -59,36 +54,35 @@ export class ScriptManager {
     }
 
     public static addScriptToGlobals(scriptDoc: Doc): void {
-
         ScriptingGlobals.removeGlobal(StrCast(scriptDoc.name));
 
-        const params = Cast(scriptDoc["data-params"], listSpec("string"), []);
+        const params = Cast(scriptDoc['data-params'], listSpec('string'), []);
         const paramNames = params.reduce((o: string, p: string) => {
             if (params.indexOf(p) === params.length - 1) {
-                o = o + p.split(":")[0].trim();
+                o = o + p.split(':')[0].trim();
             } else {
-                o = o + p.split(":")[0].trim() + ",";
+                o = o + p.split(':')[0].trim() + ',';
             }
             return o;
-        }, "" as string);
+        }, '' as string);
 
         const f = new Function(paramNames, StrCast(scriptDoc.script));
 
         Object.defineProperty(f, 'name', { value: StrCast(scriptDoc.name), writable: false });
 
-        let parameters = "(";
+        let parameters = '(';
         params.forEach((element: string, i: number) => {
             if (i === params.length - 1) {
-                parameters = parameters + element + ")";
+                parameters = parameters + element + ')';
             } else {
-                parameters = parameters + element + ", ";
+                parameters = parameters + element + ', ';
             }
         });
 
-        if (parameters === "(") {
+        if (parameters === '(') {
             ScriptingGlobals.add(f, StrCast(scriptDoc.description));
         } else {
             ScriptingGlobals.add(f, StrCast(scriptDoc.description), parameters);
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/util/ServerStats.tsx b/src/client/util/ServerStats.tsx
index f84ad8598..b6aa4d95a 100644
--- a/src/client/util/ServerStats.tsx
+++ b/src/client/util/ServerStats.tsx
@@ -3,6 +3,7 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import { MainViewModal } from '../views/MainViewModal';
 import './SharingManager.scss';
+import { PingManager } from './PingManager';
 
 @observer
 export class ServerStats extends React.Component<{}> {
@@ -39,11 +40,22 @@ export class ServerStats extends React.Component<{}> {
      */
     @computed get sharingInterface() {
         return (
-            <div>
-                <span>Active users:{this._stats?.socketMap.length}</span>
-                {this._stats?.socketMap.map((user: any) => (
-                    <p>{user.username}</p>
-                ))}
+            <div style={{
+                display: "flex",
+                height: 300,
+                width: 400,
+                background: "black",
+                opacity: 0.6}}>
+                    <div style={{width: 300,height: 100,margin: "auto",display: "flex",flexDirection: "column"}}>
+                        {PingManager.Instance.IsBeating ? 'The server connection is active' :
+                            'The server connection has been interrupted.NOTE: Any changes made will appear to persist but will be lost after a browser refreshes.'}
+                          
+                    <br/>
+                    <span>Active users:{this._stats?.socketMap.length}</span>
+                    {this._stats?.socketMap.map((user: any) => (
+                        <p>{user.username}</p>
+                    ))}  
+                </div>
             </div>
         );
     }
diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index 1289ca2b4..bca649bc3 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -2,41 +2,20 @@
 
 .settings-interface {
     //background-color: whitesmoke !important;
-    color: grey;
     width: 450px;
-
-    button {
-        background: #315a96;
-        outline: none;
-        border-radius: 5px;
-        border: 0px;
-        color: #fcfbf7;
-        text-transform: uppercase;
-        letter-spacing: 2px;
-        font-size: 75%;
-        padding: 10px;
-        margin: 10px;
-        transition: transform 0.2s;
-        margin: 2px;
-    }
 }
 
 .settings-title {
     font-size: 25px;
     font-weight: bold;
     padding-right: 10px;
-    color: black;
 }
 
 .settings-username {
     font-size: 12px;
     padding-right: 15px;
-    color: black;
     margin-top: 10px;
     margin-bottom: 10px;
-    /* right: 135; */
-    // position: absolute;
-    // left: 243;
 }
 
 .settings-section {
@@ -49,7 +28,6 @@
         font-size: 16;
         font-weight: bold;
         text-align: left;
-        color: black;
         width: 80;
         margin-right: 50px;
     }
@@ -61,40 +39,10 @@
 
 .password-content {
     display: flex;
+    width: 100%;
     flex-direction: column;
-
-    .password-content-inputs {
-        width: 100;
-        // margin-bottom: 10px;
-        font-size: 10px;
-
-        .password-inputs {
-            border: 1px solid rgb(160, 160, 160);
-            margin-bottom: 8px;
-            width: 130;
-            color: black;
-            border-radius: 5px;
-            padding: 7px;
-        }
-    }
-
-    .password-content-buttons {
-        //margin-left: 84px;
-        //width: 100;
-        padding: 7px;
-
-        .password-submit {
-            //margin-left: 85px;
-            margin-top: 5px;
-        }
-
-        .password-forgot {
-            //margin-left: 65px;
-            //margin-top: -20px;
-            font-size: 12px;
-            white-space: nowrap;
-        }
-    }
+    align-items: flex-start;
+    gap: 5px;
 }
 
 .accounts-content {
@@ -103,7 +51,6 @@
 
 .modes-content {
     display: flex;
-    margin-left: 10px;
     font-size: 12px;
 
     .modes-select {
@@ -111,7 +58,6 @@
         width: 80%;
         height: 35px;
         margin-right: 10px;
-        color: black;
         border-radius: 5px;
 
         &:hover {
@@ -135,12 +81,6 @@
             }
         }
 
-        .playground-text {
-            color: black;
-            margin-right: 10px;
-            margin-top: 2;
-        }
-
         .acl-text {
             color: black;
             margin-top: 2;
@@ -172,12 +112,11 @@
 
 .appearances-content {
     display: flex;
-    margin-top: 4px;
-    color: black;
     font-size: 10px;
 
     .preferences-color {
         display: flex;
+        align-items: center;
         margin-top: 2px;
 
         .preferences-color-text {
@@ -197,7 +136,6 @@
         margin-top: 2px;
 
         .preferences-font-text {
-            color: black;
             margin-top: 4;
             margin-right: 4;
             margin-bottom: 2px;
@@ -212,7 +150,6 @@
 
         .font-select {
             height: 35px;
-            color: black;
             font-size: 9;
             margin-right: 6;
             border-radius: 5px;
@@ -225,7 +162,6 @@
 
         .size-select {
             height: 35px;
-            color: black;
             font-size: 9;
             border-radius: 5px;
             width: 30%;
@@ -237,7 +173,6 @@
     }
 
     .preferences-check {
-        color: black;
         margin-right: 4;
         margin-bottom: -3;
         margin-left: 5;
@@ -252,40 +187,17 @@
     display: flex;
     flex-direction: column;
 
-    button {
-        width: auto;
-        align-self: center;
-        background: #252b33;
-        margin-right: 15px;
-
-        //margin-top: 4px;
-
-        &:hover {
-            background: $medium-gray;
-        }
-    }
-
-    // .delete-button {
-    //     background: rgb(227, 86, 86);
-    // }
 
     .close-button {
         position: absolute;
-        right: 1em;
-        top: 1em;
-        cursor: pointer;
+        right: 2px;
+        top: 2px;
     }
 
-    // .logout-button {
-    //     right: 355;
-    //     position: absolute;
-    // }
 
     .settings-content {
-        background: #e4e4e4;
-        //border-radius: 6px;
         padding: 10px;
-        //width: 560px;
+        width: 500px;
         flex: 1 1 auto;
     }
 
@@ -296,11 +208,8 @@
 
     .error-text {
         color: #c40233;
-        width: 300;
-        margin-left: -20;
         font-size: 10;
         margin-bottom: 4;
-        margin-top: -3;
     }
 
     .success-text {
@@ -317,7 +226,6 @@
     }
 
     h1 {
-        color: #121721;
         text-transform: uppercase;
         letter-spacing: 2px;
         font-size: 19;
@@ -346,7 +254,6 @@
 
         .padding {
             padding: 0 0 0 20px;
-            color: black;
         }
     }
 }
@@ -357,21 +264,19 @@
     min-height: 250px;
     height: 100%;
     width: 100%;
-
-    .settings-content {
-        background-color: $off-white;
-    }
 }
 
 .settings-panel {
     position: relative;
     min-width: 150px;
-    background-color: $light-blue;
 
     .settings-user {
         position: absolute;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
         bottom: 10px;
-        text-align: center;
         left: 0;
         right: 0;
 
@@ -388,16 +293,11 @@
 .settings-tabs {
     // font-size: 16px;
     font-weight: 600;
-    color: black;
 
     .tab-control {
         padding: 10px;
         border-bottom: 1px solid #9f9e9e;
         cursor: pointer;
-
-        &.active {
-            background-color: #fdfdfd;
-        }
     }
 }
 
@@ -416,20 +316,31 @@
 
 .tab-content {
     display: flex;
+    flex-flow: row wrap;
+    gap: 10px;
+    overflow: hidden;
 
     .tab-column {
-        flex: 0 0 50%;
+        flex: 0 0 calc(50% - 10px);
+        flex-direction: column;
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
 
         .tab-column-title {
-            color: black;
             font-size: 16px;
             font-weight: bold;
-            margin-bottom: 16px;
+            margin-bottom: 10px;
         }
 
         .tab-column-title,
         .tab-column-content {
-            padding-left: 16px;
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+            flex-direction: column;
+            gap: 10px;
+            width: 100%;
         }
     }
 }
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index f886ce2ca..b6df5f26a 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -11,19 +11,23 @@ import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager
 import { DocServer } from '../DocServer';
 import { Networking } from '../Network';
 import { MainViewModal } from '../views/MainViewModal';
-import { FontIconBox } from '../views/nodes/button/FontIconBox';
+import { FontIconBox } from '../views/nodes/FontIconBox/FontIconBox';
 import { DragManager } from './DragManager';
 import { GroupManager } from './GroupManager';
 import './SettingsManager.scss';
 import { undoBatch } from './UndoManager';
+import { Button, ColorPicker, Dropdown, DropdownType, EditableText, Group, NumberDropdown, Size, Toggle, ToggleType, Type } from 'browndash-components';
+import { BsGoogle } from 'react-icons/bs'
+import { FaFillDrip, FaPalette } from 'react-icons/fa'
 const higflyout = require('@hig/flyout');
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
 
 export enum ColorScheme {
-    Dark = '-Dark',
-    Light = '-Light',
-    System = '-MatchSystem',
+    Dark = 'Dark',
+    Light = 'Light',
+    System = 'Match System',
+    Custom = 'Custom'
 }
 
 export enum freeformScrollMode {
@@ -50,8 +54,8 @@ export class SettingsManager extends React.Component<{}> {
     @computed get backgroundColor() {
         return Doc.UserDoc().activeCollectionBackground;
     }
-    @computed get colorScheme() {
-        return Doc.ActiveDashboard?.colorScheme;
+    @computed get userTheme() {
+        return Doc.UserDoc().userTheme;
     }
 
     constructor(props: {}) {
@@ -73,14 +77,31 @@ export class SettingsManager extends React.Component<{}> {
         }
     };
 
-    @undoBatch selectUserMode = action((e: React.ChangeEvent) => (Doc.noviceMode = (e.currentTarget as any)?.value === 'Novice'));
+    @computed get userColor() {
+        return StrCast(Doc.UserDoc().userColor)
+    }
+
+    @computed get userVariantColor() {
+        return StrCast(Doc.UserDoc().userVariantColor)
+    }
+
+    @computed get userBackgroundColor() {
+        return StrCast(Doc.UserDoc().userBackgroundColor)
+    }
+
+    @undoBatch selectUserMode = action((mode: string) => (Doc.noviceMode = mode === 'Novice'));
     @undoBatch changelayout_showTitle = action((e: React.ChangeEvent) => (Doc.UserDoc().layout_showTitle = (e.currentTarget as any).value ? 'title' : undefined));
-    @undoBatch changeFontFamily = action((e: React.ChangeEvent) => (Doc.UserDoc().fontFamily = (e.currentTarget as any).value));
-    @undoBatch changeFontSize = action((e: React.ChangeEvent) => (Doc.UserDoc().fontSize = (e.currentTarget as any).value));
-    @undoBatch switchActiveBackgroundColor = action((color: ColorState) => (Doc.UserDoc().activeCollectionBackground = String(color.hex)));
-    @undoBatch switchUserColor = action((color: ColorState) => {
-        Doc.SharingDoc().userColor = undefined;
-        Doc.GetProto(Doc.SharingDoc()).userColor = String(color.hex);
+    @undoBatch changeFontFamily = action((font: string) => (Doc.UserDoc().fontFamily = font));
+    @undoBatch changeFontSize = action((val: number) => (Doc.UserDoc().fontSize = val));
+    @undoBatch switchUserBackgroundColor = action((color: string) => {
+        Doc.UserDoc().userBackgroundColor = color;
+        addStyleSheetRule(SettingsManager._settingsStyle, 'lm_header', { background: `${color} !important` });
+    });
+    @undoBatch switchUserColor = action((color: string) => {
+        Doc.UserDoc().userColor = color;
+    });
+    @undoBatch switchUserVariantColor = action((color: string) => {
+        Doc.UserDoc().userVariantColor = color;
     });
     @undoBatch playgroundModeToggle = action(() => {
         this.playgroundMode = !this.playgroundMode;
@@ -92,82 +113,59 @@ export class SettingsManager extends React.Component<{}> {
 
     @undoBatch
     @action
-    changeColorScheme = action((e: React.ChangeEvent) => {
-        const activeDashboard = Doc.ActiveDashboard;
-        if (!activeDashboard) return;
-        const scheme: ColorScheme = (e.currentTarget as any).value;
+    changeColorScheme = action((scheme: string) => {
+        Doc.UserDoc().userTheme = scheme;
         switch (scheme) {
             case ColorScheme.Light:
-                activeDashboard.colorScheme = undefined; // undefined means ColorScheme.Light until all CSS is updated with values for each color scheme (e.g., see MainView.scss, DocumentDecorations.scss)
-                addStyleSheetRule(SettingsManager._settingsStyle, 'lm_header', { background: '#d3d3d3 !important' });
+                this.switchUserColor("#323232")
+                this.switchUserBackgroundColor("#DFDFDF")
+                this.switchUserVariantColor("#BDDDF5")
                 break;
             case ColorScheme.Dark:
-                activeDashboard.colorScheme = ColorScheme.Dark;
-                addStyleSheetRule(SettingsManager._settingsStyle, 'lm_header', { background: 'black !important' });
+                this.switchUserColor("#DFDFDF")
+                this.switchUserBackgroundColor("#323232")
+                this.switchUserVariantColor("#4476F7")
+                break;
+            case ColorScheme.Custom:
                 break;
             case ColorScheme.System:
             default:
                 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-                    activeDashboard.colorScheme = e.matches ? ColorScheme.Dark : undefined; // undefined means ColorScheme.Light until all CSS is updated with values for each color scheme (e.g., see MainView.scss, DocumentDecorations.scss)
+                    e.matches ? ColorScheme.Dark : ColorScheme.Light; // undefined means ColorScheme.Light until all CSS is updated with values for each color scheme (e.g., see MainView.scss, DocumentDecorations.scss)
                 });
                 break;
         }
     });
 
     @computed get colorsContent() {
-        const colorBox = (func: (color: ColorState) => void) => (
-            <SketchPicker
-                onChange={func}
-                color={StrCast(this.backgroundColor)}
-                presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', '#f1efeb', 'transparent']}
-            />
-        );
-
-        const colorFlyout = (
-            <div className="colorFlyout">
-                <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={colorBox(this.switchActiveBackgroundColor)}>
-                    <div className="colorFlyout-button" style={{ backgroundColor: StrCast(this.backgroundColor) }} onPointerDown={e => e.stopPropagation()}>
-                        <FontAwesomeIcon icon="palette" size="sm" color={StrCast(this.backgroundColor)} />
-                    </div>
-                </Flyout>
-            </div>
-        );
-        const userColorFlyout = (
-            <div className="colorFlyout">
-                <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={colorBox(this.switchUserColor)}>
-                    <div className="colorFlyout-button" style={{ backgroundColor: StrCast(this.backgroundColor) }} onPointerDown={e => e.stopPropagation()}>
-                        <FontAwesomeIcon icon="palette" size="sm" color={StrCast(this.backgroundColor)} />
-                    </div>
-                </Flyout>
-            </div>
-        );
 
-        const colorSchemes = [ColorScheme.Light, ColorScheme.Dark, ColorScheme.System];
-        const schemeMap = ['Light', 'Dark', 'Match system'];
 
+        const colorSchemes = [ColorScheme.Light, ColorScheme.Dark, ColorScheme.Custom, ColorScheme.System];
+        const schemeMap = ['Light', 'Dark', 'Custom', 'Match System'];
+        const userTheme = StrCast(Doc.UserDoc().userTheme);
         return (
-            <div className="colors-content">
-                <div className="preferences-color">
-                    <div className="preferences-color-text">Background Color</div>
-                    {colorFlyout}
-                </div>
-                <div className="preferences-color">
-                    <div className="preferences-color-text">Border/Header Color</div>
-                    {userColorFlyout}
-                </div>
-                <div className="preferences-colorScheme">
-                    <div className="preferences-color-text">Color Scheme</div>
-                    <div className="preferences-color-controls">
-                        <select className="scheme-select" onChange={this.changeColorScheme} defaultValue={StrCast(Doc.ActiveDashboard?.colorScheme)}>
-                            {colorSchemes.map((scheme, i) => (
-                                <option key={scheme} value={scheme}>
-                                    {' '}
-                                    {schemeMap[i]}{' '}
-                                </option>
-                            ))}
-                        </select>
-                    </div>
-                </div>
+            <div style={{width: '100%'}}>
+                <Dropdown 
+                    formLabel='Theme'
+                    size={Size.SMALL}
+                    type={Type.TERT}
+                    selectedVal={userTheme}
+                    setSelectedVal={(scheme) => this.changeColorScheme(scheme as string)}
+                    items={colorSchemes.map((scheme, i) => (
+                        {
+                            text: schemeMap[i],
+                            val: scheme
+                        }
+                    ))} 
+                    dropdownType={DropdownType.SELECT}
+                    color={this.userColor}
+                    fillWidth
+                />
+                {userTheme === ColorScheme.Custom && <Group formLabel='Custom Theme'>
+                    <ColorPicker tooltip={'User Color'} color={this.userColor} type={Type.SEC} icon={<FaFillDrip/>} selectedColor={this.userColor} setSelectedColor={this.switchUserColor}/>
+                    <ColorPicker tooltip={'User Background Color'} color={this.userColor} type={Type.SEC} icon={<FaPalette/>} selectedColor={this.userBackgroundColor} setSelectedColor={this.switchUserBackgroundColor}/>
+                    <ColorPicker tooltip={'User Variant Color'} color={this.userColor} type={Type.SEC} icon={<FaPalette/>} selectedColor={this.userVariantColor} setSelectedColor={this.switchUserVariantColor}/>
+                </Group>}
             </div>
         );
     }
@@ -175,30 +173,65 @@ export class SettingsManager extends React.Component<{}> {
     @computed get formatsContent() {
         return (
             <div className="prefs-content">
-                <div>
-                    <input type="checkbox" onChange={e => (Doc.UserDoc().layout_showTitle = Doc.UserDoc().layout_showTitle ? undefined : 'author_date')} checked={Doc.UserDoc().layout_showTitle !== undefined} />
-                    <div className="preferences-check">Show doc header</div>
-                </div>
-                <div>
-                    <input type="checkbox" onChange={e => (Doc.UserDoc()['documentLinksButton-fullMenu'] = !Doc.UserDoc()['documentLinksButton-fullMenu'])} checked={BoolCast(Doc.UserDoc()['documentLinksButton-fullMenu'])} />
-                    <div className="preferences-check">Show full toolbar</div>
-                </div>
-                <div>
-                    <input type="checkbox" onChange={e => FontIconBox.SetShowLabels(!FontIconBox.GetShowLabels())} checked={FontIconBox.GetShowLabels()} />
-                    <div className="preferences-check">Show button labels</div>
-                </div>
-                <div>
-                    <input type="checkbox" onChange={e => FontIconBox.SetRecognizeGestures(!FontIconBox.GetRecognizeGestures())} checked={FontIconBox.GetRecognizeGestures()} />
-                    <div className="preferences-check">Recognize ink Gestures</div>
-                </div>
-                <div>
-                    <input type="checkbox" onChange={e => (Doc.UserDoc().activeInkHideTextLabels = !Doc.UserDoc().activeInkHideTextLabels)} checked={BoolCast(Doc.UserDoc().activeInkHideTextLabels)} />
-                    <div className="preferences-check">Hide Labels In Ink Shapes</div>
-                </div>
-                <div>
-                    <input type="checkbox" onChange={e => (Doc.UserDoc().openInkInLightbox = !Doc.UserDoc().openInkInLightbox)} checked={BoolCast(Doc.UserDoc().openInkInLightbox)} />
-                    <div className="preferences-check">Open Ink Docs in Lightbox</div>
-                </div>
+                <Toggle 
+                    formLabel={'Show document header'} 
+                    formLabelPlacement={'right'} 
+                    toggleType={ToggleType.SWITCH} 
+                    onClick={e => (Doc.UserDoc().layout_showTitle = Doc.UserDoc().layout_showTitle ? undefined : 'author_date')} 
+                    toggleStatus={Doc.UserDoc().layout_showTitle !== undefined} size={Size.XSMALL}
+                    color={this.userColor}
+
+                />
+                <Toggle 
+                    formLabel={'Show Full Toolbar'} 
+                    formLabelPlacement={'right'} 
+                    toggleType={ToggleType.SWITCH} 
+                    onClick={e => (Doc.UserDoc()['documentLinksButton-fullMenu'] = !Doc.UserDoc()['documentLinksButton-fullMenu'])} 
+                    toggleStatus={BoolCast(Doc.UserDoc()['documentLinksButton-fullMenu'])} 
+                    size={Size.XSMALL}
+                    color={this.userColor}
+
+                />
+                <Toggle 
+                    formLabel={'Show Button Labels'} 
+                    formLabelPlacement={'right'} 
+                    toggleType={ToggleType.SWITCH} 
+                    onClick={e => FontIconBox.SetShowLabels(!FontIconBox.GetShowLabels())} 
+                    toggleStatus={FontIconBox.GetShowLabels()} 
+                    size={Size.XSMALL}
+                    color={this.userColor}
+
+                />
+                <Toggle 
+                    formLabel={'Recognize Ink Gestures'} 
+                    formLabelPlacement={'right'} 
+                    toggleType={ToggleType.SWITCH} 
+                    onClick={e => FontIconBox.SetRecognizeGestures(!FontIconBox.GetRecognizeGestures())} 
+                    toggleStatus={FontIconBox.GetRecognizeGestures()} 
+                    size={Size.XSMALL}
+                    color={this.userColor}
+
+                />
+                <Toggle 
+                    formLabel={'Hide Labels In Ink Shapes'} 
+                    formLabelPlacement={'right'} 
+                    toggleType={ToggleType.SWITCH} 
+                    onClick={e => (Doc.UserDoc().activeInkHideTextLabels = !Doc.UserDoc().activeInkHideTextLabels)} 
+                    toggleStatus={BoolCast(Doc.UserDoc().activeInkHideTextLabels)} 
+                    size={Size.XSMALL}
+                    color={this.userColor}
+
+                />
+                <Toggle 
+                    formLabel={'Open Ink Docs in Lightbox'} 
+                    formLabelPlacement={'right'} 
+                    toggleType={ToggleType.SWITCH} 
+                    onClick={e => (Doc.UserDoc().openInkInLightbox = !Doc.UserDoc().openInkInLightbox)} 
+                    toggleStatus={BoolCast(Doc.UserDoc().openInkInLightbox)} 
+                    size={Size.XSMALL}
+                    color={this.userColor}
+
+                />
             </div>
         );
     }
@@ -224,25 +257,38 @@ export class SettingsManager extends React.Component<{}> {
 
         return (
             <div className="tab-content appearances-content">
-                <div className="preferences-font">
-                    <div className="preferences-font-text">Default Font</div>
-                    <div className="preferences-font-controls">
-                        <select className="size-select" onChange={this.changeFontSize} value={StrCast(Doc.UserDoc().fontSize, '7px')}>
-                            {fontSizes.map(size => (
-                                <option key={size} value={size} defaultValue={StrCast(Doc.UserDoc().fontSize)}>
-                                    {' '}
-                                    {size}{' '}
-                                </option>
-                            ))}
-                        </select>
-                        <select className="font-select" onChange={this.changeFontFamily} value={StrCast(Doc.UserDoc().fontFamily, 'Times New Roman')}>
-                            {fontFamilies.map(font => (
-                                <option key={font} value={font} defaultValue={StrCast(Doc.UserDoc().fontFamily)}>
-                                    {' '}
-                                    {font}{' '}
-                                </option>
-                            ))}
-                        </select>
+                <div className="tab-column">
+                    <div className="tab-column-title">Text</div>
+                    <div className="tab-column-content">
+                        {/* <NumberInput/> */}
+                        <Group formLabel={'Default Font'}>
+                            <NumberDropdown 
+                                color={this.userColor} 
+                                numberDropdownType={'input'} 
+                                min={0} max={50} step={2}
+                                type={Type.TERT} 
+                                number={0}
+                                unit={"px"}
+                                setNumber={() => {}}
+                            />
+                            <Dropdown 
+                                items={fontFamilies.map((val) => {
+                                    return {
+                                        text: val,
+                                        val: val,
+                                        style: {
+                                            fontFamily: val
+                                        }
+                                    }
+                                })} 
+                                dropdownType={DropdownType.SELECT}
+                                type={Type.TERT}
+                                selectedVal={StrCast(Doc.UserDoc().fontFamily)}
+                                setSelectedVal={(val) => {this.changeFontFamily(val as string)}}
+                                color={this.userColor}
+                                fillWidth
+                            />
+                        </Group>
                     </div>
                 </div>
             </div>
@@ -250,8 +296,7 @@ export class SettingsManager extends React.Component<{}> {
     }
 
     @action
-    changeVal = (e: React.ChangeEvent, pass: string) => {
-        const value = (e.target as any).value;
+    changeVal = (value: string, pass: string) => {
         switch (pass) {
             case 'curr':
                 this.curr_password = value;
@@ -268,20 +313,33 @@ export class SettingsManager extends React.Component<{}> {
     @computed get passwordContent() {
         return (
             <div className="password-content">
-                <div className="password-content-inputs">
-                    <input className="password-inputs" type="password" placeholder="current password" onChange={e => this.changeVal(e, 'curr')} />
-                    <input className="password-inputs" type="password" placeholder="new password" onChange={e => this.changeVal(e, 'new')} />
-                    <input className="password-inputs" type="password" placeholder="confirm new password" onChange={e => this.changeVal(e, 'conf')} />
-                </div>
-                <div className="password-content-buttons">
-                    {!this.passwordResultText ? null : <div className={`${this.passwordResultText.startsWith('Error') ? 'error' : 'success'}-text`}>{this.passwordResultText}</div>}
-                    <a className="password-forgot" href="/forgotPassword">
-                        forgot password?
-                    </a>
-                    <button className="password-submit" onClick={this.changePassword}>
-                        submit
-                    </button>
-                </div>
+                <EditableText placeholder="Current password" 
+                    type={Type.SEC} 
+                    color={this.userColor} 
+                    val={""}
+                    setVal={val => this.changeVal(val as string, 'curr')} 
+                    fillWidth
+                    password
+                />
+                <EditableText placeholder="New password" 
+                    type={Type.SEC} 
+                    color={this.userColor} 
+                    val={""}
+                    setVal={val => this.changeVal(val as string, 'new')} 
+                    fillWidth
+                    password
+                />
+                <EditableText placeholder="Confirm new password" 
+                    type={Type.SEC} 
+                    color={this.userColor} 
+                    val={""}
+                    setVal={val => this.changeVal(val as string, 'conf')} 
+                    fillWidth
+                    password
+                />
+                {!this.passwordResultText ? null : <div className={`${this.passwordResultText.startsWith('Error') ? 'error' : 'success'}-text`}>{this.passwordResultText}</div>}
+                <Button type={Type.SEC} text={'Forgot Password'} color={this.userColor}/>
+                <Button type={Type.TERT} text={'Submit'} onClick={this.changePassword} color={this.userColor}/>
             </div>
         );
     }
@@ -289,9 +347,7 @@ export class SettingsManager extends React.Component<{}> {
     @computed get accountOthersContent() {
         return (
             <div className="account-others-content">
-                <button onClick={this.googleAuthorize} value="data">
-                    Authorize Google Acc
-                </button>
+                <Button type={Type.TERT} text={'Connect to Google'} iconPlacement='left' icon={<BsGoogle/>} onClick={() => this.googleAuthorize()}/>
             </div>
         );
     }
@@ -311,7 +367,7 @@ export class SettingsManager extends React.Component<{}> {
         );
     }
 
-    setFreeformScrollMode = (mode: freeformScrollMode) => {
+    setFreeformScrollMode = (mode: string) => {
         Doc.UserDoc().freeformScrollMode = mode;
     };
 
@@ -321,45 +377,78 @@ export class SettingsManager extends React.Component<{}> {
                 <div className="tab-column">
                     <div className="tab-column-title">Modes</div>
                     <div className="tab-column-content">
-                        <select className="modes-select" onChange={this.selectUserMode} defaultValue={Doc.noviceMode ? 'Novice' : 'Developer'}>
-                            <option key={'Novice'} value={'Novice'}>
-                                {' '}
-                                Novice{' '}
-                            </option>
-                            <option key={'Developer'} value={'Developer'}>
-                                {' '}
-                                Developer
-                            </option>
-                        </select>
-                        <div className="modes-playground">
-                            <input className="playground-check" type="checkbox" checked={this.playgroundMode} onChange={this.playgroundModeToggle} />
-                            <div className="playground-text">Playground Mode</div>
-                        </div>
+                        <Dropdown 
+                            formLabel={"Mode"}
+                            items={[
+                                {
+                                    text: 'Novice',
+                                    description: 'Novice mode is a user-friendly setting designed to cater to those who are new to Dash',
+                                    val: "Novice"
+                                },
+                                {
+                                    text: 'Developer',
+                                    description: 'Developer mode is an advanced setting that grants you greater control and access to the underlying mechanics and tools of a software or system. Developer mode is still under development as there are experimental features.',
+                                    val: "Developer"
+                                },
+                            ]} 
+                            selectedVal={Doc.noviceMode ? 'Novice' : 'Developer'}
+                            setSelectedVal={(val) => {this.selectUserMode(val as string)}}
+                            dropdownType={DropdownType.SELECT}
+                            type={Type.TERT}
+                            placement='bottom-start'
+                            color={this.userColor}
+                            fillWidth
+                        />
+                        <Toggle 
+                            formLabel={'Playground Mode'} 
+                            toggleType={ToggleType.SWITCH} 
+                            toggleStatus={this.playgroundMode} 
+                            onClick={this.playgroundModeToggle}
+                            color={this.userColor}
+                        />
                     </div>
-                    <div className="tab-column-title" style={{ marginTop: 10, marginBottom: 0 }}>
-                        Freeform scrolling
+                    <div className="tab-column-title" style={{ marginTop: 20, marginBottom: 10 }}>
+                        Freeform Navigation
                     </div>
                     <div className="tab-column-content">
-                        <button style={{ backgroundColor: Doc.UserDoc().freeformScrollMode === freeformScrollMode.Pan ? 'blue' : '' }} onClick={() => this.setFreeformScrollMode(freeformScrollMode.Pan)}>
-                            Scroll to pan
-                        </button>
-                        <div>
-                            <div>Scrolling pans canvas, shift + scrolling zooms</div>
-                        </div>
-                        <button style={{ backgroundColor: Doc.UserDoc().freeformScrollMode === freeformScrollMode.Zoom ? 'blue' : '' }} onClick={() => this.setFreeformScrollMode(freeformScrollMode.Zoom)}>
-                            Scroll to zoom
-                        </button>
-                        <div>Scrolling zooms canvas</div>
+                        <Dropdown 
+                            formLabel={"Scroll Mode"}
+                            items={[
+                                {
+                                    text: 'Scroll to Pan',
+                                    description: 'Scrolling pans canvas, shift + scrolling zooms',
+                                    val: freeformScrollMode.Pan
+                                },
+                                {
+                                    text: 'Scroll to Zoom',
+                                    description: 'Scrolling zooms canvas',
+                                    val: freeformScrollMode.Zoom
+                                },
+                            ]} 
+                            selectedVal={StrCast(Doc.UserDoc().freeformScrollMode)}
+                            setSelectedVal={(val) => this.setFreeformScrollMode(val as string)}
+                            dropdownType={DropdownType.SELECT}
+                            type={Type.TERT}
+                            placement='bottom-start'
+                            color={this.userColor}
+                        />
                     </div>
                 </div>
                 <div className="tab-column">
                     <div className="tab-column-title">Permissions</div>
                     <div className="tab-column-content">
-                        <button onClick={() => GroupManager.Instance?.open()}>Manage groups</button>
-                        <div className="default-acl">
-                            <input className="acl-check" type="checkbox" checked={BoolCast(Doc.defaultAclPrivate)} onChange={action(() => (Doc.defaultAclPrivate = !Doc.defaultAclPrivate))} />
-                            <div className="acl-text">Default access private</div>
-                        </div>
+                        <Button
+                            text={"Manage Groups"}
+                            type={Type.TERT}
+                            onClick={() => GroupManager.Instance?.open()}
+                            color={this.userColor}
+                        />
+                        <Toggle 
+                            toggleType={ToggleType.SWITCH} 
+                            formLabel={"Default access private"}
+                            color={this.userColor}
+                            toggleStatus={BoolCast(Doc.defaultAclPrivate)} 
+                            onClick={action(() => (Doc.defaultAclPrivate = !Doc.defaultAclPrivate))}/>
                     </div>
                 </div>
             </div>
@@ -376,31 +465,50 @@ export class SettingsManager extends React.Component<{}> {
             { title: 'Appearance', ele: this.appearanceContent },
             { title: 'Text', ele: this.textContent },
         ];
-
         return (
             <div className="settings-interface">
-                <div className="settings-panel">
+                <div className="settings-panel" style={{ background: this.userColor }}>
                     <div className="settings-tabs">
-                        {tabs.map(tab => (
-                            <div key={tab.title} className={'tab-control ' + (this.activeTab === tab.title ? 'active' : 'inactive')} onClick={action(() => (this.activeTab = tab.title))}>
-                                {tab.title}
-                            </div>
-                        ))}
+                        {tabs.map(tab => {
+                            const isActive = this.activeTab === tab.title
+                            return (
+                                <div key={tab.title}
+                                    style={{
+                                        background: isActive ? this.userBackgroundColor : this.userColor,
+                                        color: isActive ? this.userColor : this.userBackgroundColor,
+                                    }}
+                                    className={'tab-control ' + (isActive ? 'active' : 'inactive')} 
+                                    onClick={action(() => (this.activeTab = tab.title))
+                                }>
+                                    {tab.title}
+                                </div>
+                            )
+                        })}
                     </div>
 
                     <div className="settings-user">
-                        <div className="settings-username">{Doc.CurrentUserEmail}</div>
-                        <button className="logout-button" onClick={() => window.location.assign(Utils.prepend('/logout'))}>
-                            {Doc.GuestDashboard ? 'Exit' : 'Log Out'}
-                        </button>
+                        <div className="settings-username"
+                            style={{color: this.userBackgroundColor}}
+                        >{Doc.CurrentUserEmail}</div>
+                        <Button 
+                            text={Doc.GuestDashboard ? 'Exit' : 'Log Out'}
+                            type={Type.TERT}
+                            color={this.userVariantColor}
+                            onClick={() => window.location.assign(Utils.prepend('/logout'))}
+                        />
                     </div>
                 </div>
 
-                <div className="close-button" onClick={this.close}>
-                    <FontAwesomeIcon icon={'times'} color="black" size={'lg'} />
+                            
+                <div className="close-button">
+                    <Button
+                        icon={<FontAwesomeIcon icon={'times'} size={'lg'} />}
+                        onClick={this.close}
+                        color={this.userColor}
+                    />
                 </div>
 
-                <div className="settings-content">
+                <div className="settings-content" style={{color: this.userColor, background: this.userBackgroundColor}}>
                     {tabs.map(tab => (
                         <div key={tab.title} className={'tab-section ' + (this.activeTab === tab.title ? 'active' : 'inactive')}>
                             {tab.ele}
@@ -418,7 +526,7 @@ export class SettingsManager extends React.Component<{}> {
                 isDisplayed={this.isOpen}
                 interactive={true}
                 closeOnExternalClick={this.close}
-                dialogueBoxStyle={{ width: '500px', height: '300px', background: Cast(Doc.SharingDoc().userColor, 'string', null) }}
+                dialogueBoxStyle={{ width: 'fit-content', height: '300px', background: Cast(Doc.UserDoc().userColor, 'string', null) }}
             />
         );
     }
diff --git a/src/client/util/SharingManager.scss b/src/client/util/SharingManager.scss
index 932e94664..b11e694ff 100644
--- a/src/client/util/SharingManager.scss
+++ b/src/client/util/SharingManager.scss
@@ -6,24 +6,46 @@
         transform: translate(-20px, -20px);
     }
 
-    select {
+    .select {
         text-align: justify;
         text-align-last: end
     }
 
     .sharing-contents {
+        padding: 10px;
         display: flex;
         flex-direction: column;
 
         .close-button {
             position: absolute;
-            right: 1em;
-            top: 1em;
-            cursor: pointer;
-            z-index: 999;
+            right: 2px;
+            top: 2px;
+        }
+
+        .share-title {
+            display: inline-flex;
+            gap: 5px;
+
+            .share-info {
+                align-self: center;
+                cursor: pointer;
+            }
+        }
+
+        .share-copy-link {
+            display: inline;
+            border-radius: 4px;
+            border: solid gray 1px;
+            font-size: x-small;
+            background: #E8E8E8;
+            color: black;
+            margin-top: -15px;
+            margin-bottom: 15px;
+            width: fit-content;
         }
 
         .share-container {
+
             .share-setup {
                 display: flex;
                 margin-bottom: 20px;
@@ -44,11 +66,15 @@
                     outline: none;
                     text-align: justify; // for Edge
                     text-align-last: end;
+                    font-size: 13px;
+                    min-width: 90px;
+                    height: 36;
+                    margin-left: 2px;
                 }
 
                 .share-button {
-                    height: 105%;
-                    margin-left: 2%;
+                    height: 36;
+                    margin-left: 3%;
                     background-color: black;
                 }
             }
@@ -76,15 +102,16 @@
                 float: right;
                 align-items: baseline;
                 margin-top: -12;
+                margin-bottom: 10;
 
                 .layoutDoc-acls,
                 .myDocs-acls {
                     flex-direction: column;
-                    margin-right: 12;
 
                     label {
                         font-weight: normal;
                         font-style: italic;
+                        padding-right: 12;
                     }
 
                     input {
@@ -102,6 +129,7 @@
             .group-container {
                 width: 50%;
                 display: flex;
+                top:0;
                 flex-direction: column;
 
                 .user-sort {
@@ -120,9 +148,10 @@
                 .users-list {
                     font-style: italic;
                     background: #e8e8e8;
+                    border: 2px solid gray;
                     padding-left: 10px;
                     padding-right: 10px;
-                    width: 100%;
+                    width: 97%;
                     overflow-y: scroll;
                     overflow-x: hidden;
                     text-align: left;
@@ -190,53 +219,149 @@
         }
     }
 
+    .title-individual{
+        height: 25px;
+        padding-left: 2;
+        width: 97%;
+        margin-top: 10px;
+        margin-left: -8px;
+        font-size: 14;
+        margin-bottom: -4;
+        border: 2px solid gray;
+        border-bottom: none;
+        align-items: center;
+        display: flex;
+    }
+
+    .title-group{
+        height: 25px;
+        padding-left: 2;
+        width: 97%;
+        margin-top: 10px;
+        margin-left: -.5px;
+        font-size: 14;
+        margin-bottom: -4;
+        border: 2px solid gray;
+        border-bottom: none;
+        align-items: center;
+        display: flex;
+    }
+
     .container {
         display: flex;
         position: relative;
         margin-top: 5px;
-        margin-bottom: 10px;
+        margin-left: -5px;
         font-size: 22px;
         -webkit-user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
-        width: 100%;
+        width: 97%;
         text-align: left;
         font-style: normal;
-        font-size: 14;
+        font-size: 12.5;
         font-weight: normal;
-        padding: 0;
-        align-items: center;
+
+        padding: 3px;
+        border-bottom: 0.5px solid grey;
 
         .group-info {
             cursor: pointer;
         }
 
         &:hover .padding {
+            overflow-x: unset;
             white-space: unset;
+            overflow-wrap: break-word;
         }
 
         .padding {
-            padding: 0 10px 0 0;
-            color: black;
+            max-width: 150px;
+            overflow-x: hidden;
+            display: inline-block;
             text-overflow: ellipsis;
-            overflow: hidden;
             white-space: nowrap;
-            max-width: 40%;
         }
 
         .permissions-dropdown {
-            border: none;
-            height: 25;
-            background-color: #e8e8e8;
+            display: flex;
+            align-items: flex-end;
+            text-align: right;
+            margin-left: auto;
+            margin-right: -12px;
+
         }
 
         .edit-actions {
             display: flex;
             position: absolute;
-            right: -10;
+            align-items: flex-end;
+            right: -10;            
         }
+    }
 
+    .permissions-dropdown-None{
+        height: 100%;
+        min-width: 85px;
+        text-align: right;
+        margin-right: -12px;
+        padding: 0px;
+        padding-left: 3px;
+        background: grey;
+        color: rgb(71, 71, 71);
+        border-radius: 6px;
+        border: 1px solid rgb(71, 71, 71);
+    }
+    .permissions-dropdown-Edit,
+    .permissions-dropdown-Admin {
+        height: 100%;
+        min-width: 85px;
+        text-align: right;
+        margin-right: -12px;
+        padding: 0px;
+        padding-left: 3px;
+        background: rgb(254, 254, 199);
+        color: rgb(75, 75, 5);
+        border-radius: 6px;
+        border: 1px solid rgb(75, 75, 5);
+    }
+    .permissions-dropdown-Augment{
+        height: 100%;
+        min-width: 85px;
+        text-align: right;
+        margin-right: -12px;
+        padding: 0px;
+        padding-left: 3px;
+        background: rgb(208, 255, 208);
+        color:rgb(19, 80, 19);
+        border-radius: 6px;
+        border: 1px solid rgb(19, 80, 19);
+
+    }
+    .permissions-dropdown-View{
+        height: 100%;
+        min-width: 85px;
+        text-align: right;
+        margin-right: -12px;
+        padding: 0px;
+        padding-left: 3px;
+        background: rgb(213, 213, 255);
+        color: rgb(25, 25, 101);
+        border-radius: 6px;
+        border: 1px solid rgb(25, 25, 101);
+    }
+    .permissions-dropdown-Not-Shared{
+        height: 100%;
+        min-width: 85px;
+        text-align: right;
+        margin-right: -12px;
+        padding: 0px;
+        padding-left: 3px;
+        background: rgb(255, 207, 207);
+        color: rgb(138, 47, 47);
+        border-radius: 6px;
+        border: 1px solid rgb(138, 47, 47);
     }
 
     .no-users {
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index 97e64ab71..33c9992d0 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -1,15 +1,15 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { intersection } from 'lodash';
+import { Colors } from 'browndash-components';
+import { concat, intersection } from 'lodash';
 import { action, computed, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import Select from 'react-select';
 import * as RequestPromise from 'request-promise';
-import { Doc, DocListCast, DocListCastAsync, HierarchyMapping } from '../../fields/Doc';
-import { AclAdmin, AclPrivate, DocAcl, AclUnset, DocData } from '../../fields/DocSymbols';
+import { Doc, DocListCast, DocListCastAsync, HierarchyMapping, ReverseHierarchyMap } from '../../fields/Doc';
+import { AclAdmin, AclPrivate, DocAcl, DocData } from '../../fields/DocSymbols';
 import { Id } from '../../fields/FieldSymbols';
-import { List } from '../../fields/List';
-import { NumCast, StrCast } from '../../fields/Types';
+import { StrCast } from '../../fields/Types';
 import { distributeAcls, GetEffectiveAcl, normalizeEmail, SharingPermissions, TraceMobx } from '../../fields/util';
 import { Utils } from '../../Utils';
 import { DocServer } from '../DocServer';
@@ -21,8 +21,10 @@ import { SearchBox } from '../views/search/SearchBox';
 import { DocumentManager } from './DocumentManager';
 import { GroupManager, UserOptions } from './GroupManager';
 import { GroupMemberView } from './GroupMemberView';
+import { LinkManager } from './LinkManager';
 import { SelectionManager } from './SelectionManager';
 import './SharingManager.scss';
+import { undoable } from './UndoManager';
 
 export interface User {
     email: string;
@@ -47,6 +49,7 @@ const indType = '!indType/';
 const groupType = '!groupType/';
 
 const storage = 'data';
+const dashStorage = 'data_dashboards';
 
 /**
  * A user who also has a sharing doc.
@@ -73,13 +76,14 @@ export class SharingManager extends React.Component<{}> {
     @observable private individualSort: 'ascending' | 'descending' | 'none' = 'none'; // sorting options for the list of individuals
     @observable private groupSort: 'ascending' | 'descending' | 'none' = 'none'; // sorting options for the list of groups
     private shareDocumentButtonRef: React.RefObject<HTMLButtonElement> = React.createRef(); // ref for the share button, used for the position of the popup
-    private distributeAclsButtonRef: React.RefObject<HTMLButtonElement> = React.createRef(); // ref for the distribute button, used for the position of the popup
     // if both showUserOptions and showGroupOptions are false then both are displayed
     @observable private showUserOptions: boolean = false; // whether to show individuals as options when sharing (in the react-select component)
     @observable private showGroupOptions: boolean = false; // // whether to show groups as options when sharing (in the react-select component)
     private populating: boolean = false; // whether the list of users is populating or not
+    @observable private overrideNested: boolean = false; // whether child docs in a collection/dashboard should be changed to be less private - initially selected so default is override
     @observable private layoutDocAcls: boolean = false; // whether the layout doc or data doc's acls are to be used
     @observable private myDocAcls: boolean = false; // whether the My Docs checkbox is selected or not
+    @observable private _buttonDown = false;
 
     // private get linkVisible() {
     //     return this.targetDoc ? this.targetDoc["acl-" + PublicKey] !== SharingPermissions.None : false;
@@ -93,6 +97,7 @@ export class SharingManager extends React.Component<{}> {
             DictationOverlay.Instance.hasActiveModal = true;
             this.isOpen = this.targetDoc !== undefined;
             this.permissions = SharingPermissions.Augment;
+            this.overrideNested = true;
         });
     };
 
@@ -108,6 +113,7 @@ export class SharingManager extends React.Component<{}> {
             }),
             500
         );
+        this.layoutDocAcls = false;
     });
 
     constructor(props: {}) {
@@ -138,7 +144,7 @@ export class SharingManager extends React.Component<{}> {
                     if (sharingDoc instanceof Doc && linkDatabase instanceof Doc) {
                         if (!this.users.find(user => user.user.email === newUser.email)) {
                             this.users.push({ user: newUser, sharingDoc, linkDatabase, userColor: StrCast(sharingDoc.userColor) });
-                            // LinkManager.addLinkDB(sharer.linkDatabase);
+                            LinkManager.addLinkDB(linkDatabase);
                         }
                     }
                 })
@@ -150,79 +156,44 @@ export class SharingManager extends React.Component<{}> {
     /**
      * Shares the document with a user.
      */
-    setInternalSharing = (recipient: ValidatedUser, permission: string, targetDoc?: Doc) => {
+    setInternalSharing = undoable((recipient: ValidatedUser, permission: string, targetDoc: Doc | undefined) => {
         const { user, sharingDoc } = recipient;
         const target = targetDoc || this.targetDoc!;
         const acl = `acl-${normalizeEmail(user.email)}`;
-        const myAcl = `acl-${Doc.CurrentUserEmailNormalized}`;
-        const isDashboard = DocListCast(Doc.MyDashboards.data).indexOf(target) !== -1;
-
-        const docs = SelectionManager.Views().length < 2 ? [target] : SelectionManager.Views().map(docView => docView.props.Document);
-        return !docs
-            .map(doc => (this.layoutDocAcls ? doc : doc[DocData]))
-            .map(doc => {
-                doc.author === Doc.CurrentUserEmail && !doc[myAcl] && distributeAcls(myAcl, SharingPermissions.Admin, doc, undefined, undefined, isDashboard);
-
-                if (permission === SharingPermissions.None) {
-                    if (doc[acl] && doc[acl] !== SharingPermissions.None) doc.numUsersShared = NumCast(doc.numUsersShared, 1) - 1;
-                } else {
-                    if (!doc[acl] || doc[acl] === SharingPermissions.None) doc.numUsersShared = NumCast(doc.numUsersShared, 0) + 1;
-                }
-
-                distributeAcls(acl, permission as SharingPermissions, doc, undefined, undefined, isDashboard);
-
-                this.setDashboardBackground(doc, permission as SharingPermissions);
-                if (permission !== SharingPermissions.None) return Doc.AddDocToList(sharingDoc, storage, doc);
-                return GetEffectiveAcl(doc, user.email) === AclPrivate && Doc.RemoveDocFromList(sharingDoc, storage, (doc.createdFrom as Doc) || doc);
-            })
-            .some(success => !success);
-    };
+        const docs = SelectionManager.Views().length < 2 ? [target] : SelectionManager.Views().map(docView => docView.rootDoc);
+        docs.map(doc => (this.layoutDocAcls || doc.dockingConfig ? doc : Doc.GetProto(doc))).forEach(doc => {
+            distributeAcls(acl, permission as SharingPermissions, doc, undefined, this.overrideNested ? true : undefined);
+            if (permission !== SharingPermissions.None) {
+                Doc.AddDocToList(sharingDoc, doc.dockingConfig ? dashStorage : storage, doc);
+            } else GetEffectiveAcl(doc, user.email) === AclPrivate && Doc.RemoveDocFromList(sharingDoc, ((doc.createdFrom as Doc) || doc).dockingConfig ? dashStorage : storage, (doc.createdFrom as Doc) || doc);
+        });
+    }, 'set Doc permissions');
 
     /**
      * Sets the permission on the target for the group.
      * @param group
      * @param permission
      */
-    setInternalGroupSharing = (group: Doc | { title: string }, permission: string, targetDoc?: Doc) => {
+    setInternalGroupSharing = undoable((group: Doc | { title: string }, permission: string, targetDoc?: Doc) => {
         const target = targetDoc || this.targetDoc!;
-        const key = normalizeEmail(StrCast(group.title));
-        const acl = `acl-${key}`;
-        const isDashboard = DocListCast(Doc.MyDashboards.data).indexOf(target) !== -1;
-
-        const docs = SelectionManager.Views().length < 2 ? [target] : SelectionManager.Views().map(docView => docView.props.Document);
-
-        // ! ensures it returns true if document has been shared successfully, false otherwise
-        return !docs
-            .map(doc => (this.layoutDocAcls ? doc : doc[DocData]))
-            .map(doc => {
-                doc.author === Doc.CurrentUserEmail && !doc[`acl-${Doc.CurrentUserEmailNormalized}`] && distributeAcls(`acl-${Doc.CurrentUserEmailNormalized}`, SharingPermissions.Admin, doc, undefined, undefined, isDashboard);
-
-                if (permission === SharingPermissions.None) {
-                    if (doc[acl] && doc[acl] !== SharingPermissions.None) doc.numGroupsShared = NumCast(doc.numGroupsShared, 1) - 1;
-                } else {
-                    if (!doc[acl] || doc[acl] === SharingPermissions.None) doc.numGroupsShared = NumCast(doc.numGroupsShared, 0) + 1;
-                }
+        const acl = `acl-${normalizeEmail(StrCast(group.title))}`;
 
-                distributeAcls(acl, permission as SharingPermissions, doc, undefined, undefined, isDashboard);
-                this.setDashboardBackground(doc, permission as SharingPermissions);
+        const docs = SelectionManager.Views().length < 2 ? [target] : SelectionManager.Views().map(docView => docView.rootDoc);
+        docs.map(doc => (this.layoutDocAcls || doc.dockingConfig ? doc : Doc.GetProto(doc))).forEach(doc => {
+            distributeAcls(acl, permission as SharingPermissions, doc, undefined, this.overrideNested ? true : undefined);
 
-                if (group instanceof Doc) {
-                    const members: string[] = JSON.parse(StrCast(group.members));
-                    const users: ValidatedUser[] = this.users.filter(({ user: { email } }) => members.includes(email));
+            if (group instanceof Doc) {
+                Doc.AddDocToList(group, 'docsShared', doc);
 
-                    // if documents have been shared, add the doc to that list if it doesn't already exist, otherwise create a new list with the doc
-                    group.docsShared ? Doc.IndexOf(doc, DocListCast(group.docsShared)) === -1 && (group.docsShared as List<Doc>).push(doc) : (group.docsShared = new List<Doc>([doc]));
-
-                    return users
-                        .map(({ user, sharingDoc }) => {
-                            if (permission !== SharingPermissions.None) return Doc.AddDocToList(sharingDoc, storage, doc); // add the doc to the sharingDoc if it hasn't already been added
-                            else return GetEffectiveAcl(doc, user.email) === AclPrivate && Doc.RemoveDocFromList(sharingDoc, storage, (doc.createdFrom as Doc) || doc); // remove the doc from the list if it already exists
-                        })
-                        .some(success => !success);
-                }
-            })
-            .some(success => success);
-    };
+                this.users
+                    .filter(({ user: { email } }) => JSON.parse(StrCast(group.members)).includes(email))
+                    .forEach(({ user, sharingDoc }) => {
+                        if (permission !== SharingPermissions.None) Doc.AddDocToList(sharingDoc, doc.dockingConfig ? dashStorage : storage, doc); // add the doc to the sharingDoc if it hasn't already been added
+                        else GetEffectiveAcl(doc, user.email) === AclPrivate && Doc.RemoveDocFromList(sharingDoc, ((doc.createdFrom as Doc) || doc).dockingConfig ? dashStorage : storage, (doc.createdFrom as Doc) || doc); // remove the doc from the list if it already exists
+                    });
+            }
+        });
+    }, 'set group permissions');
 
     /**
      * Shares the documents shared with a group with a new user who has been added to that group.
@@ -237,7 +208,13 @@ export class SharingManager extends React.Component<{}> {
             else {
                 DocListCastAsync(user.sharingDoc[storage]).then(userdocs =>
                     DocListCastAsync(group.docsShared).then(dl => {
-                        const filtered = dl?.filter(doc => !userdocs?.includes(doc));
+                        const filtered = dl?.filter(doc => !doc.dockingConfig && !userdocs?.includes(doc));
+                        filtered && userdocs?.push(...filtered);
+                    })
+                );
+                DocListCastAsync(user.sharingDoc[dashStorage]).then(userdocs =>
+                    DocListCastAsync(group.docsShared).then(dl => {
+                        const filtered = dl?.filter(doc => doc.dockingConfig && !userdocs?.includes(doc));
                         filtered && userdocs?.push(...filtered);
                     })
                 );
@@ -248,44 +225,23 @@ export class SharingManager extends React.Component<{}> {
     /**
      * Called from the properties sidebar to change permissions of a user.
      */
-    shareFromPropertiesSidebar = (shareWith: string, permission: SharingPermissions, docs: Doc[]) => {
-        if (shareWith !== 'Public' && shareWith !== 'Override') {
+    shareFromPropertiesSidebar = undoable((shareWith: string, permission: SharingPermissions, docs: Doc[], layout: boolean) => {
+        if (layout) this.layoutDocAcls = true;
+        if (shareWith !== 'Guest') {
             const user = this.users.find(({ user: { email } }) => email === (shareWith === 'Me' ? Doc.CurrentUserEmail : shareWith));
             docs.forEach(doc => {
                 if (user) this.setInternalSharing(user, permission, doc);
-                else this.setInternalGroupSharing(GroupManager.Instance.getGroup(shareWith)!, permission, doc);
+                else this.setInternalGroupSharing(GroupManager.Instance.getGroup(shareWith)!, permission, doc, undefined, true);
             });
         } else {
-            const dashboards = DocListCast(Doc.MyDashboards.data);
             docs.forEach(doc => {
-                const isDashboard = dashboards.indexOf(doc) !== -1;
-                if (GetEffectiveAcl(doc) === AclAdmin) distributeAcls(`acl-${shareWith}`, permission, doc, undefined, undefined, isDashboard);
-                this.setDashboardBackground(doc, permission as SharingPermissions);
-            });
-        }
-    };
-
-    /**
-     * Sets the background of the Dashboard if it has been shared as a visual indicator
-     */
-    setDashboardBackground = (doc: Doc, permission: SharingPermissions) => {
-        if (Doc.IndexOf(doc, DocListCast(Doc.MyDashboards.data)) !== -1) {
-            if (permission !== SharingPermissions.None) {
-                doc.isShared = true;
-                doc.backgroundColor = 'green';
-            } else {
-                const acls = doc[DocData][DocAcl];
-                if (
-                    Object.keys(acls)
-                        .filter(key => key !== `acl-${Doc.CurrentUserEmailNormalized}` && key !== 'acl-Me')
-                        .every(key => [AclUnset, AclPrivate].includes(acls[key]))
-                ) {
-                    doc.isShared = undefined;
-                    doc.backgroundColor = undefined;
+                if (GetEffectiveAcl(doc) === AclAdmin) {
+                    distributeAcls(`acl-${shareWith}`, permission, doc, undefined);
                 }
-            }
+            });
         }
-    };
+        this.layoutDocAcls = false;
+    }, 'sidebar set permissions');
 
     /**
      * Removes the documents shared with a user through a group when the user is removed from the group.
@@ -295,13 +251,19 @@ export class SharingManager extends React.Component<{}> {
     removeMember = (group: Doc, emailId: string) => {
         const user: ValidatedUser = this.users.find(({ user: { email } }) => email === emailId)!;
 
-        if (group.docsShared) {
+        if (group.docsShared && user) {
             DocListCastAsync(user.sharingDoc[storage]).then(userdocs =>
                 DocListCastAsync(group.docsShared).then(dl => {
                     const remaining = userdocs?.filter(doc => !dl?.includes(doc)) || [];
                     userdocs?.splice(0, userdocs.length, ...remaining);
                 })
             );
+            DocListCastAsync(user.sharingDoc[dashStorage]).then(userdocs =>
+                DocListCastAsync(group.docsShared).then(dl => {
+                    const remaining = userdocs?.filter(doc => !dl?.includes(doc)) || [];
+                    userdocs?.splice(0, userdocs.length, ...remaining);
+                })
+            );
         }
     };
 
@@ -311,11 +273,9 @@ export class SharingManager extends React.Component<{}> {
      */
     removeGroup = (group: Doc) => {
         if (group.docsShared) {
-            const dashboards = DocListCast(Doc.MyDashboards.data);
             DocListCast(group.docsShared).forEach(doc => {
                 const acl = `acl-${StrCast(group.title)}`;
-                const isDashboard = dashboards.indexOf(doc) !== -1;
-                distributeAcls(acl, SharingPermissions.None, doc, undefined, undefined, isDashboard);
+                distributeAcls(acl, SharingPermissions.None, doc);
 
                 const members: string[] = JSON.parse(StrCast(group.members));
                 const users: ValidatedUser[] = this.users.filter(({ user: { email } }) => members.includes(email));
@@ -331,37 +291,26 @@ export class SharingManager extends React.Component<{}> {
     //         return;
     //     }
     //     targetDoc["acl-" + PublicKey] = permission;
-    // }
+    // }s
 
-    // private get sharingUrl() {
-    //     if (!this.targetDoc) {
-    //         return undefined;
-    //     }
-    //     const baseUrl = Utils.prepend("/doc/" + this.targetDoc[Id]);
-    //     return `${baseUrl}?sharing=true`;
-    // }
-
-    // copy = action(() => {
-    //     if (this.sharingUrl) {
-    //         Utils.CopyText(this.sharingUrl);
-    //         this.copied = true;
-    //     }
-    // });
+    /**
+     * Copies the Public sharing url to the user's clipboard.
+     */
+    private copyURL = (e: any) => {
+        Utils.CopyText(Utils.shareUrl(this.targetDoc![Id]));
+    };
 
     /**
      * Returns the SharingPermissions (Admin, Can Edit etc) access that's used to share
      */
-    private sharingOptions(uniform: boolean, override?: boolean) {
-        const dropdownValues: string[] = Object.values(SharingPermissions);
+    private sharingOptions(uniform: boolean, showGuestOptions?: boolean) {
+        const dropdownValues: string[] = showGuestOptions ? [SharingPermissions.None, SharingPermissions.View] : Object.values(SharingPermissions);
         if (!uniform) dropdownValues.unshift('-multiple-');
-        if (!override) dropdownValues.splice(dropdownValues.indexOf(SharingPermissions.Unset), 1);
-        return dropdownValues
-            .filter(permission => !Doc.noviceMode || ![SharingPermissions.SelfEdit].includes(permission as any))
-            .map(permission => (
-                <option key={permission} value={permission}>
-                    {permission}
-                </option>
-            ));
+        return dropdownValues.map(permission => (
+            <option key={permission} value={permission}>
+                {concat(ReverseHierarchyMap.get(permission)?.image, ' ', permission)}
+            </option>
+        ));
     }
 
     private focusOn = (contents: string) => {
@@ -406,38 +355,43 @@ export class SharingManager extends React.Component<{}> {
     /**
      * Handles changes in the permission chosen to share with someone with
      */
-    @action
-    handlePermissionsChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-        this.permissions = event.currentTarget.value as SharingPermissions;
-    };
+    handlePermissionsChange = undoable(
+        action((event: React.ChangeEvent<HTMLSelectElement>) => {
+            this.permissions = event.currentTarget.value as SharingPermissions;
+        }),
+        'permission change'
+    );
 
     /**
      * Calls the relevant method for sharing, displays the popup, and resets the relevant variables.
      */
-    @action
-    share = () => {
-        if (this.selectedUsers) {
-            this.selectedUsers.forEach(user => {
-                if (user.value.includes(indType)) {
-                    this.setInternalSharing(this.users.find(u => u.user.email === user.label)!, this.permissions);
-                } else {
-                    this.setInternalGroupSharing(GroupManager.Instance.getGroup(user.label)!, this.permissions);
-                }
-            });
-
-            const { left, width, top, height } = this.shareDocumentButtonRef.current!.getBoundingClientRect();
-            TaskCompletionBox.popupX = left - 1.5 * width;
-            TaskCompletionBox.popupY = top - 1.5 * height;
-            TaskCompletionBox.textDisplayed = 'Document shared!';
-            TaskCompletionBox.taskCompleted = true;
-            setTimeout(
-                action(() => (TaskCompletionBox.taskCompleted = false)),
-                2000
-            );
+    share = undoable(
+        action(() => {
+            if (this.selectedUsers) {
+                this.selectedUsers.forEach(user => {
+                    if (user.value.includes(indType)) {
+                        this.setInternalSharing(this.users.find(u => u.user.email === user.label)!, this.permissions, undefined);
+                    } else {
+                        this.setInternalGroupSharing(GroupManager.Instance.getGroup(user.label)!, this.permissions);
+                    }
+                });
+
+                const { left, width, top, height } = this.shareDocumentButtonRef.current!.getBoundingClientRect();
+                TaskCompletionBox.popupX = left - 1.5 * width;
+                TaskCompletionBox.popupY = top - 1.5 * height;
+                TaskCompletionBox.textDisplayed = 'Document shared!';
+                TaskCompletionBox.taskCompleted = true;
+                setTimeout(
+                    action(() => (TaskCompletionBox.taskCompleted = false)),
+                    2000
+                );
 
-            this.selectedUsers = null;
-        }
-    };
+                this.layoutDocAcls = false;
+                this.selectedUsers = null;
+            }
+        }),
+        'share Doc'
+    );
 
     /**
      * Sorting algorithm to sort users.
@@ -464,6 +418,7 @@ export class SharingManager extends React.Component<{}> {
         if (!this.targetDoc) return null;
         TraceMobx();
         const groupList = GroupManager.Instance?.allGroups || [];
+
         const sortedUsers = this.users
             .slice()
             .sort(this.sortUsers)
@@ -485,8 +440,7 @@ export class SharingManager extends React.Component<{}> {
         const users = this.individualSort === 'ascending' ? this.users.slice().sort(this.sortUsers) : this.individualSort === 'descending' ? this.users.slice().sort(this.sortUsers).reverse() : this.users;
         const groups = this.groupSort === 'ascending' ? groupList.slice().sort(this.sortGroups) : this.groupSort === 'descending' ? groupList.slice().sort(this.sortGroups).reverse() : groupList;
 
-        // handles the case where multiple documents are selected
-        let docs = SelectionManager.Views().length < 2 ? [this.layoutDocAcls ? this.targetDoc : this.targetDoc?.[DocData]] : SelectionManager.Views().map(docView => (this.layoutDocAcls ? docView.props.Document : docView.props.Document?.[DocData]));
+        let docs = SelectionManager.Views().length < 2 ? [this.targetDoc] : SelectionManager.Views().map(docView => docView.rootDoc);
 
         if (this.myDocAcls) {
             const newDocs: Doc[] = [];
@@ -501,26 +455,32 @@ export class SharingManager extends React.Component<{}> {
         const admin = this.myDocAcls ? Boolean(docs.length) : effectiveAcls.every(acl => acl === AclAdmin);
 
         // users in common between all docs
-        const commonKeys = intersection(...docs.map(doc => (this.layoutDocAcls ? doc : doc[DocData])).map(doc => doc?.[DocAcl] && Object.keys(doc[DocAcl])));
+        const commonKeys = intersection(docs).reduce((list, doc) => (doc?.[DocAcl] ? [...list, ...Object.keys(doc[DocAcl])] : list), [] as string[]);
 
         // the list of users shared with
-        const userListContents: (JSX.Element | null)[] = users
-            .filter(({ user }) => (docs.length > 1 ? commonKeys.includes(`acl-${normalizeEmail(user.email)}`) : docs[0]?.author !== user.email))
+        const userListContents = users
+            // .filter(({ user }) => (docs.length > 1 ? commonKeys.includes(`acl-${normalizeEmail(user.email)}`) : docs[0]?.author !== user.email))
+            .filter(({ user }) => docs[0]?.author !== user.email)
             .map(({ user, linkDatabase, sharingDoc, userColor }) => {
                 const userKey = `acl-${normalizeEmail(user.email)}`;
-                const uniform = docs.map(doc => (this.layoutDocAcls ? doc : doc[DocData])).every(doc => doc?.[DocAcl]?.[userKey] === docs[0]?.[DocAcl]?.[userKey]);
-                const permissions = uniform ? StrCast(targetDoc?.[userKey]) : '-multiple-';
+                const uniform = docs.every(doc => doc?.[DocAcl]?.[userKey] === docs[0]?.[DocAcl]?.[userKey]);
+                // const permissions = uniform ? StrCast(targetDoc?.[userKey]) : '-multiple-';
+                let permissions = targetDoc[DocAcl][userKey] ? HierarchyMapping.get(targetDoc[DocAcl][userKey])?.name : StrCast(targetDoc[userKey]);
+                permissions = uniform ? StrCast(targetDoc?.[userKey]) : '-multiple-';
 
                 return !permissions ? null : (
                     <div key={userKey} className={'container'}>
                         <span className={'padding'}>{user.email}</span>
                         <div className="edit-actions">
                             {admin || this.myDocAcls ? (
-                                <select className={'permissions-dropdown'} value={permissions} onChange={e => this.setInternalSharing({ user, linkDatabase, sharingDoc, userColor }, e.currentTarget.value)}>
+                                <select className={`permissions-dropdown-${permissions}`} value={permissions} onChange={e => this.setInternalSharing({ user, linkDatabase, sharingDoc, userColor }, e.currentTarget.value, undefined)}>
                                     {this.sharingOptions(uniform)}
                                 </select>
                             ) : (
-                                <div className={'permissions-dropdown'}>{permissions}</div>
+                                <div className={`permissions-dropdown-${permissions}`}>
+                                    {concat(ReverseHierarchyMap.get(permissions)?.image, ' ', permissions)}
+                                    &nbsp;
+                                </div>
                             )}
                         </div>
                     </div>
@@ -531,6 +491,9 @@ export class SharingManager extends React.Component<{}> {
         const sameAuthor = docs.every(doc => doc?.author === docs[0]?.author);
 
         // the owner of the doc and the current user are placed at the top of the user list.
+        const userKey = `acl-${normalizeEmail(Doc.CurrentUserEmail)}`;
+        const curUserPermission = StrCast(targetDoc[userKey]);
+        // const curUserPermission = HierarchyMapping.get(effectiveAcls[0])!.name
         userListContents.unshift(
             sameAuthor ? (
                 <div key={'owner'} className={'container'}>
@@ -544,7 +507,10 @@ export class SharingManager extends React.Component<{}> {
                 <div key={'me'} className={'container'}>
                     <span className={'padding'}>Me</span>
                     <div className="edit-actions">
-                        <div className={'permissions-dropdown'}>{effectiveAcls.every(acl => acl === effectiveAcls[0]) ? HierarchyMapping.get(effectiveAcls[0])!.name : '-multiple-'}</div>
+                        <div className={`permissions-dropdown-${curUserPermission}`}>
+                            {effectiveAcls.every(acl => acl === effectiveAcls[0]) ? concat(ReverseHierarchyMap.get(curUserPermission!)?.image, ' ', curUserPermission) : '-multiple-'}
+                            &nbsp;
+                        </div>
                     </div>
                 </div>
             ) : null
@@ -552,29 +518,31 @@ export class SharingManager extends React.Component<{}> {
 
         // the list of groups shared with
         const groupListMap: (Doc | { title: string })[] = groups.filter(({ title }) => (docs.length > 1 ? commonKeys.includes(`acl-${normalizeEmail(StrCast(title))}`) : true));
-        groupListMap.unshift({ title: 'Public' }); //, { title: "ALL" });
+        groupListMap.unshift({ title: 'Guest' }); //, { title: "ALL" });
         const groupListContents = groupListMap.map(group => {
-            const groupKey = `acl-${StrCast(group.title)}`;
-            const uniform = docs
-                .map(doc => (this.layoutDocAcls ? doc : doc[DocData]))
-                .every(doc => (this.layoutDocAcls ? doc?.[DocAcl]?.[groupKey] === docs[0]?.[DocAcl]?.[groupKey] : doc?.[DocData]?.[DocAcl]?.[groupKey] === docs[0]?.[DocData]?.[DocAcl]?.[groupKey]));
-            const permissions = uniform ? StrCast(targetDoc?.[`acl-${StrCast(group.title)}`]) : '-multiple-';
+            let groupKey = `acl-${StrCast(group.title)}`;
+            const uniform = docs.every(doc => doc?.[DocAcl]?.[groupKey] === docs[0]?.[DocAcl]?.[groupKey]);
+            const permissions = uniform ? StrCast(targetDoc?.[groupKey]) : '-multiple-';
 
             return !permissions ? null : (
                 <div key={groupKey} className={'container'}>
                     <div className={'padding'}>{StrCast(group.title)}</div>
+                    &nbsp;
                     {group instanceof Doc ? (
                         <div className="group-info" onClick={action(() => (GroupManager.Instance.currentGroup = group))}>
                             <FontAwesomeIcon icon={'info-circle'} color={'#e8e8e8'} size={'sm'} style={{ backgroundColor: '#1e89d7', borderRadius: '100%', border: '1px solid #1e89d7' }} />
                         </div>
                     ) : null}
-                    <div className="edit-actions">
+                    <div className={'edit-actions'}>
                         {admin || this.myDocAcls ? (
-                            <select className={'permissions-dropdown'} value={permissions} onChange={e => this.setInternalGroupSharing(group, e.currentTarget.value)}>
-                                {this.sharingOptions(uniform, group.title === 'Override')}
+                            <select className={`permissions-dropdown-${permissions}`} value={permissions} onChange={e => this.setInternalGroupSharing(group, e.currentTarget.value)}>
+                                {this.sharingOptions(uniform, group.title === 'Guest')}
                             </select>
                         ) : (
-                            <div className={'permissions-dropdown'}>{permissions}</div>
+                            <div className={`permissions-dropdown-${permissions}`}>
+                                {concat(ReverseHierarchyMap.get(permissions)?.image, ' ', permissions)}
+                                &nbsp;
+                            </div>
                         )}
                     </div>
                 </div>
@@ -583,20 +551,32 @@ export class SharingManager extends React.Component<{}> {
         return (
             <div className="sharing-interface">
                 {GroupManager.Instance?.currentGroup ? <GroupMemberView group={GroupManager.Instance.currentGroup} onCloseButtonClick={action(() => (GroupManager.Instance.currentGroup = undefined))} /> : null}
-                <div className="sharing-contents">
-                    <p className={'share-title'}>
+                <div className="sharing-contents"
+                    style={{
+                        background: StrCast(Doc.UserDoc().userBackgroundColor),
+                        color: StrCast(Doc.UserDoc().userColor)
+                    }}
+                >
+                    <p className="share-title">
+                        <div className="share-info" onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/properties/sharing-and-permissions/', '_blank')}>
+                            <FontAwesomeIcon icon={'question-circle'} size={'sm'} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/properties/sharing-and-permissions/', '_blank')} />
+                        </div>
                         <b>Share </b>
                         {this.focusOn(docs.length < 2 ? StrCast(targetDoc?.title, 'this document') : '-multiple-')}
                     </p>
-                    <div className={'close-button'} onClick={this.close}>
-                        <FontAwesomeIcon icon={'times'} color={'black'} size={'lg'} />
+                    <button
+                        className="share-copy-link"
+                        style={{ background: this._buttonDown ? Colors.LIGHT_BLUE : undefined }}
+                        onPointerDown={action(e => (this._buttonDown = true))}
+                        onPointerUp={action(e => (this._buttonDown = false))}
+                        onClick={this.copyURL}>
+                        <FontAwesomeIcon title="Copy Public URL" icon="copy" size="sm" />
+                        &nbsp; Copy Public URL
+                    </button>
+                    <div className="close-button" onClick={this.close}>
+                        <FontAwesomeIcon icon="times" color="black" size="lg" />
                     </div>
-                    {/* {this.linkVisible ?
-                        <div>
-                            {this.sharingUrl}
-                        </div> :
-                        (null)} */}
-                    {
+                    {admin ? (
                         <div className="share-container">
                             <div className="share-setup">
                                 <Select
@@ -615,9 +595,11 @@ export class SharingManager extends React.Component<{}> {
                                         }),
                                     }}
                                 />
-                                <select className="permissions-select" onChange={this.handlePermissionsChange} value={this.permissions}>
-                                    {this.sharingOptions(true)}
-                                </select>
+                                <div className="permissions-select">
+                                    <select className={`permissions-dropdown-${this.permissions}`} onChange={this.handlePermissionsChange} value={this.permissions}>
+                                        {this.sharingOptions(true)}
+                                    </select>
+                                </div>
                                 <button ref={this.shareDocumentButtonRef} className="share-button" onClick={this.share}>
                                     Share
                                 </button>
@@ -630,36 +612,41 @@ export class SharingManager extends React.Component<{}> {
                             <div className="acl-container">
                                 {Doc.noviceMode ? null : (
                                     <div className="layoutDoc-acls">
+                                        <input type="checkbox" onChange={action(() => (this.overrideNested = !this.overrideNested))} checked={this.overrideNested} /> <label>Override Nested </label>
                                         <input type="checkbox" onChange={action(() => (this.layoutDocAcls = !this.layoutDocAcls))} checked={this.layoutDocAcls} /> <label>Layout</label>
                                     </div>
                                 )}
                             </div>
                         </div>
-                    }
+                    ) : (
+                        <div className="share-container">
+                            <div className="acl-container">
+                                <div className="layoutDoc-acls">
+                                    <input type="checkbox" onChange={action(() => (this.layoutDocAcls = !this.layoutDocAcls))} checked={this.layoutDocAcls} /> <label>Layout</label>
+                                </div>
+                            </div>
+                        </div>
+                    )}
                     <div className="main-container">
                         <div className={'individual-container'}>
                             <div className="user-sort" onClick={action(() => (this.individualSort = this.individualSort === 'ascending' ? 'descending' : this.individualSort === 'descending' ? 'none' : 'ascending'))}>
-                                Individuals{' '}
-                                {this.individualSort === 'ascending' ? (
-                                    <FontAwesomeIcon icon={'caret-up'} size={'xs'} />
-                                ) : this.individualSort === 'descending' ? (
-                                    <FontAwesomeIcon icon={'caret-down'} size={'xs'} />
-                                ) : (
-                                    <FontAwesomeIcon icon={'caret-right'} size={'xs'} />
-                                )}
+                                <div className="title-individual">
+                                    Individuals &nbsp;
+                                    <FontAwesomeIcon icon={this.individualSort === 'ascending' ? 'caret-up' : this.individualSort === 'descending' ? 'caret-down' : 'caret-right'} size="xs" />
+                                </div>
                             </div>
-                            <div className={'users-list'}>{userListContents}</div>
+                            <div className="users-list">{userListContents}</div>
                         </div>
                         <div className={'group-container'}>
                             <div className="user-sort" onClick={action(() => (this.groupSort = this.groupSort === 'ascending' ? 'descending' : this.groupSort === 'descending' ? 'none' : 'ascending'))}>
-                                Groups{' '}
-                                {this.groupSort === 'ascending' ? (
-                                    <FontAwesomeIcon icon={'caret-up'} size={'xs'} />
-                                ) : this.groupSort === 'descending' ? (
-                                    <FontAwesomeIcon icon={'caret-down'} size={'xs'} />
-                                ) : (
-                                    <FontAwesomeIcon icon={'caret-right'} size={'xs'} />
-                                )}
+                                <div className="title-group">
+                                    Groups &nbsp;
+                                    <div className="group-info" onClick={action(() => GroupManager.Instance?.open())}>
+                                        <FontAwesomeIcon icon={'info-circle'} color={'#e8e8e8'} size={'sm'} style={{ backgroundColor: '#1e89d7', borderRadius: '100%', border: '1px solid #1e89d7' }} />
+                                    </div>
+                                    &nbsp;
+                                    <FontAwesomeIcon icon={this.groupSort === 'ascending' ? 'caret-up' : this.groupSort === 'descending' ? 'caret-down' : 'caret-right'} size="xs" />
+                                </div>
                             </div>
                             <div className={'groups-list'}>{groupListContents}</div>
                         </div>
@@ -670,6 +657,13 @@ export class SharingManager extends React.Component<{}> {
     }
 
     render() {
-        return <MainViewModal contents={this.sharingInterface} isDisplayed={this.isOpen} interactive={true} dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity} overlayDisplayedOpacity={this.overlayOpacity} closeOnExternalClick={this.close} />;
+        return <MainViewModal 
+            contents={this.sharingInterface} 
+            isDisplayed={this.isOpen} 
+            interactive={true} 
+            dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity} 
+            overlayDisplayedOpacity={this.overlayOpacity} 
+            closeOnExternalClick={this.close} 
+        />;
     }
 }
diff --git a/src/client/util/UndoManager.ts b/src/client/util/UndoManager.ts
index b59af6656..9a6719ea5 100644
--- a/src/client/util/UndoManager.ts
+++ b/src/client/util/UndoManager.ts
@@ -1,5 +1,6 @@
 import { observable, action, runInAction } from 'mobx';
 import { Field } from '../../fields/Doc';
+import { RichTextField } from '../../fields/RichTextField';
 import { Without } from '../../Utils';
 
 function getBatchName(target: any, key: string | symbol): string {
@@ -96,7 +97,13 @@ export namespace UndoManager {
 
     export function AddEvent(event: UndoEvent, value?: any): void {
         if (currentBatch && batchCounter.get() && !undoing) {
-            console.log('                         '.slice(0, batchCounter.get()) + 'UndoEvent : ' + event.prop + ' = ' + (value instanceof Array ? value.map(val => Field.toScriptString(val)).join(',') : Field.toScriptString(value)));
+            console.log(
+                '                         '.slice(0, batchCounter.get()) +
+                    'UndoEvent : ' +
+                    event.prop +
+                    ' = ' +
+                    (value instanceof RichTextField ? value.Text : value instanceof Array ? value.map(val => Field.toScriptString(val)).join(',') : Field.toScriptString(value))
+            );
             currentBatch.push(event);
             tempEvents?.push(event);
         }
diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss
index 8a0e5480e..b205a0f1e 100644
--- a/src/client/views/AntimodeMenu.scss
+++ b/src/client/views/AntimodeMenu.scss
@@ -5,11 +5,15 @@
     position: absolute;
     z-index: 10001;
     height: $antimodemenu-height;
-    background: $dark-gray;
-    border-bottom: $standard-border;
+    width: fit-content;
+    border-radius: $standard-border-radius;
+    overflow: hidden;
     // box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
     // border-radius: 0px 6px 6px 6px;
     display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 3px;
 
     &.with-rows {
         flex-direction: column
@@ -20,30 +24,6 @@
         height: 35px;
     }
 
-    .antimodeMenu-button {
-        background-color: transparent;
-        width: 35px;
-        height: 35px;
-        padding: 5;
-        text-align: center;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        position: relative;
-
-        .svg {
-            margin: 0;
-        }
-
-        &.active {
-            background-color: #121212;
-        }
-    }
-
-    .antimodeMenu-button:hover {
-        background-color: rgba(0, 0, 0, 0.4);
-    }
-
     .antimodeMenu-dragger {
         height: 100%;
         transition: width .2s;
diff --git a/src/client/views/AntimodeMenu.tsx b/src/client/views/AntimodeMenu.tsx
index de1207ce4..c41ea7053 100644
--- a/src/client/views/AntimodeMenu.tsx
+++ b/src/client/views/AntimodeMenu.tsx
@@ -1,6 +1,8 @@
 import React = require('react');
 import { observable, action, runInAction } from 'mobx';
 import './AntimodeMenu.scss';
+import { StrCast } from '../../fields/Types';
+import { Doc } from '../../fields/Doc';
 export interface AntimodeMenuProps {}
 
 /**
@@ -148,6 +150,7 @@ export abstract class AntimodeMenu<T extends AntimodeMenuProps> extends React.Co
                     left: this._left,
                     top: this._top,
                     opacity: this._opacity,
+                    background: StrCast(Doc.UserDoc().userBackgroundColor),
                     transitionProperty: this._transitionProperty,
                     transitionDuration: this._transitionDuration,
                     transitionDelay: this._transitionDelay,
@@ -173,6 +176,7 @@ export abstract class AntimodeMenu<T extends AntimodeMenuProps> extends React.Co
                     height: 'inherit',
                     width: 200,
                     opacity: this._opacity,
+                    background: StrCast(Doc.UserDoc().userBackgroundColor),
                     transitionProperty: this._transitionProperty,
                     transitionDuration: this._transitionDuration,
                     transitionDelay: this._transitionDelay,
@@ -195,6 +199,7 @@ export abstract class AntimodeMenu<T extends AntimodeMenuProps> extends React.Co
                     left: this._left,
                     top: this._top,
                     opacity: this._opacity,
+                    background: StrCast(Doc.UserDoc().userBackgroundColor),
                     transitionProperty: this._transitionProperty,
                     transitionDuration: this._transitionDuration,
                     transitionDelay: this._transitionDelay,
diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index cbe14060a..1361d99fc 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -7,6 +7,7 @@
     box-shadow: 0px 3px 4px rgba(0, 0, 0, 30%);
     flex-direction: column;
     background: whitesmoke;
+    color: black;
     border-radius: 3px;
 }
 
diff --git a/src/client/views/DashboardView.scss b/src/client/views/DashboardView.scss
index b8a6f6c05..6be2133ef 100644
--- a/src/client/views/DashboardView.scss
+++ b/src/client/views/DashboardView.scss
@@ -1,12 +1,15 @@
-@import "./global/globalCssVariables";
-
+@import './global/globalCssVariables';
 
 .dashboard-view {
-      padding: 50px;
-      display: flex;
-      flex-direction: row;
-      width: 100%;
-      position: absolute;
+    padding: 50px;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    position: absolute;
+    height: 100%;
+    width:100%;
+    padding-right: 0px;
+    overflow: auto;
 
       .left-menu {
             display: flex;
@@ -14,26 +17,28 @@
             flex-direction: column;
             width: 250px;
             min-width: 250px;
+            gap: 5px;
       }
 
-      .all-dashboards {
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-            overflow-y: scroll;
-      }
+    .all-dashboards {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        overflow-y: auto;
+        width: 100%;
+    }
 }
 
 .text-button {
     cursor: pointer;
-      padding: 3px 0;
-      &:hover {
-            font-weight: 500;
-      }
+    padding: 3px 0;
+    &:hover {
+        font-weight: 500;
+    }
 
-      &.selected {
-            font-weight: 700;
-      }
+    &.selected {
+        font-weight: 700;
+    }
 }
 
 .new-dashboard-button {
@@ -56,15 +61,26 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    position: relative;
 
     &:hover {
         color: $light-blue;
         border: solid 2px $light-blue;
     }
+
+    .background {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        z-index: -1;
+      }
 }
 
 .dashboard-container {
       border-radius: 10px;
+      position: relative;
       cursor: pointer;
       width: 250px;
       height: 200px;
@@ -74,35 +90,55 @@
       margin: 0 0px 30px 30px;
       overflow: hidden;
 
-      &:hover{
+    &:hover {
         outline: solid 2px $light-blue;
-      }
+    }
 
-      .title {
-            margin: 10px;
-            font-weight: 500;
-      }
+    .title {
+        margin: 10px;
+        font-weight: 500;
+    }
 
-      img {
-            width: auto;
-            height: 80%;
-      }
+    img {
+        width: auto;
+        height: 80%;
+    }
 
-      .info {
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-            align-items: center;
-            padding: 0px 10px;
-      }
+    .info {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0px 10px;
+    }
+    .dashboard-status,
+    .dashboard-status-shared {
+        font-size: 9;
+        left: 10%;
+        position: relative;
+        top: -5;
+    }
+    .dashboard-status-shared {
+        background: 'lightgreen';
+    }
 
       .more {
             z-index: 100;
       }
+
+      .background {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        z-index: -1;
+      }
 }
 
 .new-dashboard {
     color: $dark-gray;
+    padding: 10px;
     display: flex;
     width: 100%;
     height: 100%;
@@ -136,4 +172,4 @@
         flex-direction: row;
         justify-content: flex-end;
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx
index f6d843201..1a5781df0 100644
--- a/src/client/views/DashboardView.tsx
+++ b/src/client/views/DashboardView.tsx
@@ -1,16 +1,17 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, ColorPicker, FontSize, IconButton, Size } from 'browndash-components';
+import { Button, ColorPicker, EditableText, FontSize, IconButton, Size, Type } from 'browndash-components';
 import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
+import { FaPlus } from 'react-icons/fa';
 import { Doc, DocListCast, DocListCastAsync } from '../../fields/Doc';
-import { DocData } from '../../fields/DocSymbols';
+import { AclPrivate, DocAcl } from '../../fields/DocSymbols';
 import { Id } from '../../fields/FieldSymbols';
 import { List } from '../../fields/List';
 import { PrefetchProxy } from '../../fields/Proxy';
 import { listSpec } from '../../fields/Schema';
 import { ScriptField } from '../../fields/ScriptField';
-import { Cast, DocCast, ImageCast, StrCast } from '../../fields/Types';
+import { Cast, ImageCast, StrCast } from '../../fields/Types';
 import { DocServer } from '../DocServer';
 import { Docs, DocumentOptions, DocUtils } from '../documents/Documents';
 import { CollectionViewType } from '../documents/DocumentTypes';
@@ -24,8 +25,7 @@ import { ContextMenu } from './ContextMenu';
 import './DashboardView.scss';
 import { Colors } from './global/globalEnums';
 import { MainViewModal } from './MainViewModal';
-import { ButtonType } from './nodes/button/FontIconBox';
-import { FaPlus } from 'react-icons/fa';
+import { ButtonType } from './nodes/FontIconBox/FontIconBox';
 
 enum DashboardGroup {
     MyDashboards,
@@ -43,13 +43,16 @@ export class DashboardView extends React.Component {
     @observable private selectedDashboardGroup = DashboardGroup.MyDashboards;
 
     @observable private newDashboardName: string | undefined = undefined;
-    @observable private newDashboardColor: string | undefined = undefined;
+    @observable private newDashboardColor: string | undefined = "#AFAFAF";
     @action abortCreateNewDashboard = () => {
         this.newDashboardName = undefined;
     };
     @action setNewDashboardName(name: string) {
         this.newDashboardName = name;
     }
+    @action setNewDashboardColor(color: string) {
+        this.newDashboardColor = color;
+    }
 
     @action
     selectDashboardGroup = (group: DashboardGroup) => {
@@ -57,28 +60,30 @@ export class DashboardView extends React.Component {
     };
 
     clickDashboard = (e: React.MouseEvent, dashboard: Doc) => {
-        Doc.AddDocToList(Doc.MySharedDocs, 'viewed', dashboard);
-        Doc.ActiveDashboard = dashboard;
+        if (this.selectedDashboardGroup === DashboardGroup.SharedDashboards) {
+            DashboardView.openSharedDashboard(dashboard);
+        } else {
+            Doc.ActiveDashboard = dashboard;
+        }
         Doc.ActivePage = 'dashboard';
     };
 
-    getDashboards = () => {
+    getDashboards = (whichGroup: DashboardGroup) => {
         const allDashboards = DocListCast(Doc.MyDashboards.data);
-        if (this.selectedDashboardGroup === DashboardGroup.MyDashboards) {
+        if (whichGroup === DashboardGroup.MyDashboards) {
             return allDashboards.filter(dashboard => Doc.GetProto(dashboard).author === Doc.CurrentUserEmail);
-        } else {
-            const sharedDashboards = DocListCast(Doc.MySharedDocs.data).filter(doc => doc._type_collection === CollectionViewType.Docking);
-            return sharedDashboards;
         }
+        const sharedDashboards = DocListCast(Doc.MySharedDocs.data_dashboards).filter(doc => doc.dockingConfig);
+        return sharedDashboards;
     };
 
     isUnviewedSharedDashboard = (dashboard: Doc): boolean => {
-        // const sharedDashboards = DocListCast(Doc.MySharedDocs.data).filter(doc => doc._type_collection === CollectionViewType.Docking);
+        // const sharedDashboards = DocListCast(Doc.MySharedDocs.data_dashboards).filter(doc => doc._type_collection === CollectionViewType.Docking);
         return !DocListCast(Doc.MySharedDocs.viewed).includes(dashboard);
     };
 
     getSharedDashboards = () => {
-        const sharedDashs = DocListCast(Doc.MySharedDocs.data).filter(doc => doc._type_collection === CollectionViewType.Docking);
+        const sharedDashs = DocListCast(Doc.MySharedDocs.data_dashboards).filter(doc => doc._type_collection === CollectionViewType.Docking);
         return sharedDashs.filter(dashboard => !DocListCast(Doc.MySharedDocs.viewed).includes(dashboard));
     };
 
@@ -95,23 +100,33 @@ export class DashboardView extends React.Component {
         const dashboardCount = DocListCast(Doc.MyDashboards.data).length + 1;
         const placeholder = `Dashboard ${dashboardCount}`;
         return (
-            <div className="new-dashboard">
+            <div className="new-dashboard"
+                style={{ 
+                    background: StrCast(Doc.UserDoc().userBackgroundColor),
+                    color: StrCast(Doc.UserDoc().userColor)
+                }}
+            >
                 <div className="header">Create New Dashboard</div>
-                <div className="title-input">
-                    Title
-                    <input className="input" placeholder={placeholder} onChange={e => this.setNewDashboardName((e.target as any).value)} />
-                </div>
-                <div className="color-picker">
-                    Background
-                    <ColorPicker
-                        onChange={color => {
-                            this.newDashboardColor = color;
-                        }}
-                    />
-                </div>
+                <EditableText 
+                    formLabel='Title'
+                    placeholder={placeholder}
+                    type={Type.SEC}
+                    color={StrCast(Doc.UserDoc().userColor)}
+                    setVal={val => this.setNewDashboardName(val as string)}
+                    fillWidth
+                />
+                <ColorPicker
+                    formLabel='Background'
+                    colorPickerType='github'
+                    type={Type.TERT}
+                    selectedColor={this.newDashboardColor}
+                    setSelectedColor={color => {
+                        this.setNewDashboardColor(color);
+                    }}
+                />
                 <div className="button-bar">
-                    <Button text="Cancel" onClick={this.abortCreateNewDashboard} />
-                    <Button text="Create" onClick={() => this.createNewDashboard(this.newDashboardName!, this.newDashboardColor)} />
+                    <Button text="Cancel" color={StrCast(Doc.UserDoc().userColor)} onClick={this.abortCreateNewDashboard} />
+                    <Button type={Type.TERT} text="Create" color={StrCast(Doc.UserDoc().userVariantColor)} onClick={() => this.createNewDashboard(this.newDashboardName!, this.newDashboardColor)} />
                 </div>
             </div>
         );
@@ -150,32 +165,55 @@ export class DashboardView extends React.Component {
     };
 
     render() {
+        const color = StrCast(Doc.UserDoc().userColor)
+        const variant = StrCast(Doc.UserDoc().userVariantColor)
         return (
             <>
                 <div className="dashboard-view">
                     <div className="left-menu">
-                        <div className="new-dashboard-button">
-                            <Button icon={<FaPlus />} size={Size.MEDIUM} text="New" onClick={() => this.setNewDashboardName('')} />
-                        </div>
-                        <div className={`text-button ${this.selectedDashboardGroup === DashboardGroup.MyDashboards && 'selected'}`} onClick={() => this.selectDashboardGroup(DashboardGroup.MyDashboards)}>
-                            My Dashboards
-                        </div>
-                        <div className={`text-button ${this.selectedDashboardGroup === DashboardGroup.SharedDashboards && 'selected'}`} onClick={() => this.selectDashboardGroup(DashboardGroup.SharedDashboards)}>
-                            Shared Dashboards
-                        </div>
+                        <Button 
+                            text={'My Dashboards'}
+                            active={this.selectedDashboardGroup === DashboardGroup.MyDashboards}
+                            color={color}
+                            align={'flex-start'}
+                            onClick={() => this.selectDashboardGroup(DashboardGroup.MyDashboards)}
+                            fillWidth
+                        />
+                        <Button 
+                            text={'Shared Dashboards' + ' (' + this.getDashboards(DashboardGroup.SharedDashboards).length + ')'}
+                            active={this.selectedDashboardGroup === DashboardGroup.SharedDashboards}
+                            color={this.getDashboards(DashboardGroup.SharedDashboards).some(dash => !DocListCast(Doc.MySharedDocs.viewed).includes(dash)) ? 'green' : color}
+                            align={'flex-start'}
+                            onClick={() => this.selectDashboardGroup(DashboardGroup.SharedDashboards)}
+                            fillWidth
+                        />
+                        <Button icon={<FaPlus />} color={variant} iconPlacement="left" text="New Dashboard" type={Type.TERT} onClick={() => this.setNewDashboardName('')} />
                     </div>
                     <div className="all-dashboards">
-                        {this.getDashboards().map(dashboard => {
+                        {this.getDashboards(this.selectedDashboardGroup).map(dashboard => {
                             const href = ImageCast(dashboard.thumb)?.url.href;
+                            const shared = Object.keys(dashboard[DocAcl])
+                                .filter(key => key !== `acl-${Doc.CurrentUserEmailNormalized}` && !['acl-Me', 'acl-Guest'].includes(key))
+                                .some(key => dashboard[DocAcl][key] !== AclPrivate);
                             return (
-                                <div className="dashboard-container" key={dashboard[Id]} onContextMenu={e => this.onContextMenu(dashboard, e)} onClick={e => this.clickDashboard(e, dashboard)}>
+                                <div 
+                                    className="dashboard-container" 
+                                    key={dashboard[Id]} 
+                                    style={{ background: this.isUnviewedSharedDashboard(dashboard) && this.selectedDashboardGroup === DashboardGroup.SharedDashboards ? 'green' : shared ? 'blue' : '' }}
+                                    onContextMenu={e => this.onContextMenu(dashboard, e)} 
+                                    onClick={e => this.clickDashboard(e, dashboard)}>
                                     <img
                                         src={
                                             href ?? 'https://media.istockphoto.com/photos/hot-air-balloons-flying-over-the-botan-canyon-in-turkey-picture-id1297349747?b=1&k=20&m=1297349747&s=170667a&w=0&h=oH31fJty_4xWl_JQ4OIQWZKP8C6ji9Mz7L4XmEnbqRU='
                                         }
                                     />
                                     <div className="info">
-                                        <input style={{ border: 'unset' }} className="input" onClick={e => e.stopPropagation()} defaultValue={StrCast(dashboard.title)} onChange={e => (Doc.GetProto(dashboard).title = (e.target as any).value)} />
+                                        <EditableText 
+                                            type={Type.PRIM}
+                                            color={color}
+                                            val={StrCast(dashboard.title)} 
+                                            setVal={val => (Doc.GetProto(dashboard).title = val)}
+                                        />
                                         {this.selectedDashboardGroup === DashboardGroup.SharedDashboards && this.isUnviewedSharedDashboard(dashboard) ? <div>unviewed</div> : <div></div>}
                                         <div
                                             className="more"
@@ -188,9 +226,14 @@ export class DashboardView extends React.Component {
                                                 e.stopPropagation();
                                                 this.onContextMenu(dashboard, e);
                                             }}>
-                                            <Button size={Size.SMALL} icon={<FontAwesomeIcon color="black" size="lg" icon="bars" />} />
+                                            <Button size={Size.SMALL} color={color} icon={<FontAwesomeIcon color={color} icon="bars" />} />
                                         </div>
                                     </div>
+                                    <div className={`background`} style={{
+                                        background: StrCast(Doc.UserDoc().userColor),
+                                        filter: 'opacity(0.2)'
+                                    }}/>
+                                    <div className={'dashboard-status' + (shared ? '-shared' : '')}>{shared ? 'shared' : ''}</div>
                                 </div>
                             );
                         })}
@@ -200,6 +243,10 @@ export class DashboardView extends React.Component {
                                 this.setNewDashboardName('');
                             }}>
                             +
+                            <div className={`background`} style={{
+                                background: StrCast(Doc.UserDoc().userColor),
+                                filter: 'opacity(0.2)'
+                            }}/>
                         </div>
                     </div>
                 </div>
@@ -221,6 +268,11 @@ export class DashboardView extends React.Component {
         return CollectionDockingView.TakeSnapshot(Doc.ActiveDashboard);
     }
 
+    public static openSharedDashboard = (dashboard: Doc) => {
+        Doc.AddDocToList(Doc.MySharedDocs, 'viewed', dashboard);
+        DashboardView.openDashboard(Doc.BestEmbedding(dashboard));
+    };
+
     /// opens a dashboard as the ActiveDashboard (and adds the dashboard to the users list of dashboards if it's not already there).
     /// this also sets the readonly state of the dashboard based on the current mode of dash (from its url)
     public static openDashboard = (doc: Doc | undefined, fromHistory = false) => {
@@ -353,8 +405,7 @@ export class DashboardView extends React.Component {
     };
 
     public static createNewDashboard = (id?: string, name?: string, background?: string) => {
-        const dashboards = Doc.MyDashboards;
-        const dashboardCount = DocListCast(dashboards.data).length + 1;
+        const dashboardCount = DocListCast(Doc.MyDashboards.data).length + 1;
         const freeformOptions: DocumentOptions = {
             x: 0,
             y: 400,
@@ -369,12 +420,9 @@ export class DashboardView extends React.Component {
         const freeformDoc = Doc.GuestTarget || Docs.Create.FreeformDocument([], freeformOptions);
         const dashboardDoc = Docs.Create.StandardCollectionDockingDocument([{ doc: freeformDoc, initialWidth: 600 }], { title: title }, id, 'row');
 
-        // switching the tabs from the datadoc to the regular doc
-        const dashboardTabs = DocListCast(dashboardDoc[DocData].data);
-        dashboardDoc.data = new List<Doc>(dashboardTabs);
         dashboardDoc['pane-count'] = 1;
 
-        Doc.AddDocToList(dashboards, 'data', dashboardDoc);
+        Doc.AddDocToList(Doc.MyDashboards, 'data', dashboardDoc);
 
         DashboardView.SetupDashboardTrails(dashboardDoc);
 
@@ -394,6 +442,7 @@ export class DashboardView extends React.Component {
             _layout_hideContextMenu: true,
             title: 'New trail',
             toolTip: 'Create new trail',
+            color: Colors.BLACK,
             btnType: ButtonType.ClickButton,
             buttonText: 'New trail',
             icon: 'plus',
@@ -436,10 +485,6 @@ export class DashboardView extends React.Component {
     }
 }
 
-export function AddToList(MySharedDocs: Doc, arg1: string, dash: any) {
-    throw new Error('Function not implemented.');
-}
-
 ScriptingGlobals.add(function createNewDashboard() {
     return DashboardView.createNewDashboard();
 }, 'creates a new dashboard when called');
diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx
index 70d208a0b..a41fc8ded 100644
--- a/src/client/views/DocComponent.tsx
+++ b/src/client/views/DocComponent.tsx
@@ -1,15 +1,14 @@
 import { action, computed, observable } from 'mobx';
 import { DateField } from '../../fields/DateField';
-import { DocListCast, Opt, Doc } from '../../fields/Doc';
+import { Doc, DocListCast, HierarchyMapping, Opt, ReverseHierarchyMap } from '../../fields/Doc';
 import { AclAdmin, AclAugment, AclEdit, AclPrivate, AclReadonly, DocAcl, DocData } from '../../fields/DocSymbols';
 import { List } from '../../fields/List';
-import { Cast, ScriptCast } from '../../fields/Types';
-import { denormalizeEmail, distributeAcls, GetEffectiveAcl, inheritParentAcls, SharingPermissions } from '../../fields/util';
+import { Cast, StrCast } from '../../fields/Types';
+import { distributeAcls, GetEffectiveAcl, inheritParentAcls, SharingPermissions } from '../../fields/util';
 import { returnFalse } from '../../Utils';
 import { DocUtils } from '../documents/Documents';
 import { DocumentType } from '../documents/DocumentTypes';
 import { InteractionUtils } from '../util/InteractionUtils';
-import { UndoManager } from '../util/UndoManager';
 import { DocumentView } from './nodes/DocumentView';
 import { Touchable } from './Touchable';
 
@@ -183,7 +182,7 @@ export function ViewBoxAnnotatableComponent<P extends ViewBoxAnnotatableProps>()
             if (this.props.filterAddDocument?.(docs) === false || docs.find(doc => Doc.AreProtosEqual(doc, this.props.Document) && Doc.LayoutField(doc) === Doc.LayoutField(this.props.Document))) {
                 return false;
             }
-            const targetDataDoc = this.props.Document[DocData];
+            const targetDataDoc = this.rootDoc[DocData];
             const effectiveAcl = GetEffectiveAcl(targetDataDoc);
 
             if (effectiveAcl === AclPrivate || effectiveAcl === AclReadonly) {
@@ -191,34 +190,14 @@ export function ViewBoxAnnotatableComponent<P extends ViewBoxAnnotatableProps>()
             }
             const added = docs;
             if (added.length) {
-                const aclKeys = Object.keys(this.props.Document[DocAcl] ?? {});
-                aclKeys.forEach(key =>
-                    added.forEach(d => {
-                        if (d.author === denormalizeEmail(key.substring(4)) && !d.createdFrom) {
-                            distributeAcls(key, SharingPermissions.Admin, d);
-                        }
-                    })
-                );
-
-                if (effectiveAcl === AclAugment) {
-                    added.map(doc => {
-                        if ([AclAdmin, AclEdit].includes(GetEffectiveAcl(doc)) && Doc.ActiveDashboard) inheritParentAcls(Doc.ActiveDashboard, doc);
-                        doc.embedContainer = this.props.Document;
-                        if (annotationKey ?? this._annotationKeySuffix()) Doc.GetProto(doc).annotationOn = this.props.Document;
-                        Doc.AddDocToList(targetDataDoc, annotationKey ?? this.annotationKey, doc);
+                if ([AclAugment, AclEdit, AclAdmin].includes(effectiveAcl)) {
+                    added.forEach(doc => {
+                        doc._dragOnlyWithinContainer = undefined;
+                        if (annotationKey ?? this._annotationKeySuffix()) Doc.GetProto(doc).annotationOn = this.rootDoc;
+                        Doc.SetContainer(doc, this.rootDoc);
+                        inheritParentAcls(targetDataDoc, doc, true);
                     });
-                } else {
-                    added
-                        .filter(doc => [AclAdmin, AclEdit].includes(GetEffectiveAcl(doc)))
-                        .map(doc => {
-                            // only make a pushpin if we have acl's to edit the document
-                            //DocUtils.LeavePushpin(doc);
-                            doc._dragOnlyWithinContainer = undefined;
-                            doc.embedContainer = this.props.Document;
-                            if (annotationKey ?? this._annotationKeySuffix()) Doc.GetProto(doc).annotationOn = this.rootDoc;
-
-                            Doc.ActiveDashboard && inheritParentAcls(Doc.ActiveDashboard, doc);
-                        });
+
                     const annoDocs = targetDataDoc[annotationKey ?? this.annotationKey] as List<Doc>;
                     if (annoDocs instanceof List) annoDocs.push(...added.filter(add => !annoDocs.includes(add)));
                     else targetDataDoc[annotationKey ?? this.annotationKey] = new List<Doc>(added);
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index ccac5ffe4..ca3610cc0 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -112,6 +112,33 @@ $resizeHandler: 8px;
             }
         }
 
+        .documentDecorations-lockButton {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: grey;
+            border: solid 1.5px rgb(72, 71, 71);
+            color: grey;
+            transition: 0.1s ease;
+            opacity: 1;
+            pointer-events: all;
+            width: 20px;
+            height: 20px;
+            min-width: 20px;
+            border-radius: 100%;
+            opacity: 0.5;
+            cursor: pointer;
+
+            &:hover {
+                color: rgb(72, 71, 71);
+                opacity: 1;
+            }
+
+            > svg {
+                margin: 0;
+            }
+        }
+
         .documentDecorations-minimizeButton {
             display: flex;
             align-items: center;
@@ -152,6 +179,7 @@ $resizeHandler: 8px;
             display: flex;
             height: 20px;
             border-radius: 8px;
+            gap: 2px;
             outline: none;
             border: none;
             opacity: 0.3;
@@ -186,6 +214,79 @@ $resizeHandler: 8px;
         }
     }
 
+    .documentDecorations-share {
+        background: none;
+        opacity: 1;
+        grid-column: 3;
+        pointer-events: auto;
+        min-width: fit-content;
+        text-align: center;
+        display: flex;
+        height: 21px;
+        opacity: 0.3;
+        &:hover {
+            opacity: 1;
+        }
+        
+
+        .checkbox{
+            display: inline;
+
+            .checkbox-box{
+                display: inline;
+                position: relative;
+                top: -2.5;
+                left: 35;
+                zoom: .7;
+            }
+
+            & .checkbox-text{
+                display: inline;
+                position: relative;
+                top: 1.5;
+                font-size: 8px;
+            }
+        }
+
+        .documentDecorations-shareNone{
+            width: calc(100% + 10px);
+            background: grey;
+            color: rgb(71, 71, 71);
+            border-radius: 8px;
+            border: 2px solid rgb(71, 71, 71);
+        }
+        .documentDecorations-shareEdit,
+        .documentDecorations-shareAdmin{
+            width: calc(100% + 10px);
+            background: rgb(254, 254, 199);
+            color: rgb(75, 75, 5);
+            border-radius: 8px;
+            border: 2px solid rgb(75, 75, 5);
+        }
+        .documentDecorations-shareAugment{
+            width: calc(100% + 10px);
+            background: rgb(208, 255, 208);
+            color:rgb(19, 80, 19);
+            border-radius: 8px;
+            border: 2px solid rgb(19, 80, 19);
+
+        }
+        .documentDecorations-shareView{
+            width: calc(100% + 10px);
+            background: rgb(213, 213, 255);
+            color: rgb(25, 25, 101);
+            border-radius: 8px;
+            border: 2px solid rgb(25, 25, 101);
+        }
+        .documentDecorations-shareNot-Shared{
+            width: calc(100% + 10px);
+            background: rgb(255, 207, 207);
+            color: rgb(146, 58, 58);
+            border-radius: 8px;
+            border: 2px solid rgb(146, 58, 58);
+        }
+    }
+
     .documentDecorations-centerCont {
         grid-column: 2;
         background: none;
@@ -264,7 +365,7 @@ $resizeHandler: 8px;
     .documentDecorations-lock {
         position: relative;
         background: black;
-        color: gray;
+        color: rgb(145, 144, 144);
         height: 14;
         width: 14;
         pointer-events: all;
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 3f71111e3..3522830e5 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -6,8 +6,8 @@ import { action, computed, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import { FaUndo } from 'react-icons/fa';
 import { DateField } from '../../fields/DateField';
-import { Doc, DocListCast, Field } from '../../fields/Doc';
-import { AclAdmin, AclEdit, DocData, Height, Width } from '../../fields/DocSymbols';
+import { Doc, DocListCast, Field, HierarchyMapping, ReverseHierarchyMap } from '../../fields/Doc';
+import { AclAdmin, AclAugment, AclEdit, DocData, Height, Width } from '../../fields/DocSymbols';
 import { InkField } from '../../fields/InkField';
 import { RichTextField } from '../../fields/RichTextField';
 import { ScriptField } from '../../fields/ScriptField';
@@ -64,6 +64,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
     @observable private _isRotating: boolean = false;
     @observable private _isRounding: boolean = false;
     @observable private _isResizing: boolean = false;
+    @observable private showLayoutAcl: boolean = false;
 
     constructor(props: any) {
         super(props);
@@ -162,33 +163,46 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
     };
 
     @action onContainerDown = (e: React.PointerEvent): void => {
-        setupMoveUpEvents(
-            this,
-            e,
-            e => this.onBackgroundMove(true, e),
-            e => {},
-            emptyFunction
-        );
+        const first = SelectionManager.Views()[0];
+        const effectiveLayoutAcl = GetEffectiveAcl(first.rootDoc);
+        if (effectiveLayoutAcl == AclAdmin || effectiveLayoutAcl == AclEdit || effectiveLayoutAcl == AclAugment) {
+            setupMoveUpEvents(
+                this,
+                e,
+                e => this.onBackgroundMove(true, e),
+                e => {},
+                emptyFunction
+            );
+        }
     };
 
     @action onTitleDown = (e: React.PointerEvent): void => {
-        setupMoveUpEvents(
-            this,
-            e,
-            e => this.onBackgroundMove(true, e),
-            e => {},
-            action(e => {
-                !this._editingTitle && (this._accumulatedTitle = this._titleControlString.startsWith('#') ? this.selectionTitle : this._titleControlString);
-                this._editingTitle = true;
-                this._keyinput.current && setTimeout(this._keyinput.current.focus);
-            })
-        );
+        const first = SelectionManager.Views()[0];
+        const effectiveLayoutAcl = GetEffectiveAcl(first.rootDoc);
+        if (effectiveLayoutAcl == AclAdmin || effectiveLayoutAcl == AclEdit || effectiveLayoutAcl == AclAugment) {
+            setupMoveUpEvents(
+                this,
+                e,
+                e => this.onBackgroundMove(true, e),
+                e => {},
+                action(e => {
+                    !this._editingTitle && (this._accumulatedTitle = this._titleControlString.startsWith('#') ? this.selectionTitle : this._titleControlString);
+                    this._editingTitle = true;
+                    this._keyinput.current && setTimeout(this._keyinput.current.focus);
+                })
+            );
+        }
     };
 
     onBackgroundDown = (e: React.PointerEvent) => setupMoveUpEvents(this, e, e => this.onBackgroundMove(false, e), emptyFunction, emptyFunction);
 
     @action
     onBackgroundMove = (dragTitle: boolean, e: PointerEvent): boolean => {
+        const first = SelectionManager.Views()[0];
+        const effectiveLayoutAcl = GetEffectiveAcl(first.rootDoc);
+        if (effectiveLayoutAcl != AclAdmin && effectiveLayoutAcl != AclEdit && effectiveLayoutAcl != AclAugment) {
+            return false;
+        }
         const dragDocView = SelectionManager.Views()[0];
         const containers = new Set<Doc | undefined>();
         SelectionManager.Views().forEach(v => containers.add(DocCast(v.rootDoc.embedContainer)));
@@ -481,6 +495,8 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
 
     onPointerMove = (e: PointerEvent, down: number[], move: number[]): boolean => {
         const first = SelectionManager.Views()[0];
+        const effectiveAcl = GetEffectiveAcl(first.rootDoc);
+        if (!(effectiveAcl == AclAdmin || effectiveAcl == AclEdit || effectiveAcl == AclAugment)) return false;
         if (!first) return false;
         let thisPt = { x: e.clientX - this._offX, y: e.clientY - this._offY };
         var fixedAspect = Doc.NativeAspect(first.layoutDoc);
@@ -746,9 +762,17 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
             setTimeout(action(() => (this._showNothing = true)));
             return null;
         }
+
+        // sharing
+        const acl = GetEffectiveAcl(!this.showLayoutAcl ? Doc.GetProto(seldocview.rootDoc) : seldocview.rootDoc);
+        const docShareMode = HierarchyMapping.get(acl)!.name;
+        const shareMode = StrCast(docShareMode);
+        var shareSymbolIcon = ReverseHierarchyMap.get(shareMode)?.image;
+
         // hide the decorations if the parent chooses to hide it or if the document itself hides it
         const hideDecorations = seldocview.props.hideDecorations || seldocview.rootDoc.hideDecorations;
-        const hideResizers = hideDecorations || seldocview.props.hideResizeHandles || seldocview.rootDoc.layout_hideResizeHandles || this._isRounding || this._isRotating;
+        const hideResizers =
+            ![AclAdmin, AclEdit, AclAugment].includes(GetEffectiveAcl(seldocview.rootDoc)) || hideDecorations || seldocview.props.hideResizeHandles || seldocview.rootDoc.layout_hideResizeHandles || this._isRounding || this._isRotating;
         const hideTitle = hideDecorations || seldocview.props.hideDecorationTitle || seldocview.rootDoc.layout_hideDecorationTitle || this._isRounding || this._isRotating;
         const hideDocumentButtonBar = hideDecorations || seldocview.props.hideDocumentButtonBar || seldocview.rootDoc.layout_hideDocumentButtonBar || this._isRounding || this._isRotating;
         // if multiple documents have been opened at the same time, then don't show open button
@@ -769,7 +793,6 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                 const collectionAcl = docView.props.docViewPath()?.lastElement() ? GetEffectiveAcl(docView.props.docViewPath().lastElement().rootDoc[DocData]) : AclEdit;
                 return collectionAcl !== AclAdmin && collectionAcl !== AclEdit && GetEffectiveAcl(docView.rootDoc) !== AclAdmin;
             });
-
         const topBtn = (key: string, icon: string, pointerDown: undefined | ((e: React.PointerEvent) => void), click: undefined | ((e: any) => void), title: string) => (
             <Tooltip key={key} title={<div className="dash-tooltip">{title}</div>} placement="top">
                 <div className={`documentDecorations-${key}Button`} onContextMenu={e => e.preventDefault()} onPointerDown={pointerDown ?? (e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, e => click!(e)))}>
@@ -802,6 +825,27 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
         const radiusHandle = (borderRadius / docMax) * maxDist;
         const radiusHandleLocation = Math.min(radiusHandle, maxDist);
 
+        const sharingMenu = docShareMode ? (
+            <div className="documentDecorations-share">
+                <div className={`documentDecorations-share${shareMode}`}>
+                    &nbsp;
+                    {shareSymbolIcon + ' ' + shareMode}
+                    &nbsp;
+                    {!Doc.noviceMode ? (
+                        <div className="checkbox">
+                            <div className="checkbox-box">
+                                <input type="checkbox" checked={this.showLayoutAcl} onChange={action(() => (this.showLayoutAcl = !this.showLayoutAcl))} />
+                            </div>
+                            <div className="checkbox-text"> Layout </div>
+                        </div>
+                    ) : null}
+                    &nbsp;
+                </div>
+            </div>
+        ) : (
+            <div />
+        );
+
         const titleArea = this._editingTitle ? (
             <input
                 ref={this._keyinput}
@@ -816,8 +860,18 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                 onPointerDown={e => e.stopPropagation()}
             />
         ) : (
-            <div className="documentDecorations-title" key="title" onPointerDown={this.onTitleDown}>
-                <span className={`documentDecorations-titleSpan${colorScheme}`}>{`${hideTitle ? '' : this.selectionTitle}`}</span>
+            <div
+                className="documentDecorations-title"
+                key="title"
+                onPointerDown={e => {
+                    e.stopPropagation;
+                }}>
+                {hideTitle ? null : (
+                    <span className={`documentDecorations-titleSpan${colorScheme}`} onPointerDown={this.onTitleDown}>
+                        {this.selectionTitle}
+                    </span>
+                )}
+                {sharingMenu}
                 {!useLock ? null : (
                     <Tooltip key="lock" title={<div className="dash-tooltip">toggle ability to interact with document</div>} placement="top">
                         <div className="documentDecorations-lock" style={{ color: seldocview.rootDoc._lockedPosition ? 'red' : undefined }} onPointerDown={this.onLockDown} onContextMenu={e => e.preventDefault()}>
@@ -827,6 +881,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                 )}
             </div>
         );
+
         return (
             <div className={`documentDecorations${colorScheme}`} style={{ opacity: this._showNothing ? 0.1 : undefined }}>
                 <div
@@ -859,8 +914,8 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                             <div className="documentDecorations-topbar" style={{ display: hideDeleteButton && hideTitle && hideOpenButton ? 'none' : undefined }} onPointerDown={this.onContainerDown}>
                                 {hideDeleteButton ? null : topBtn('close', 'times', undefined, e => this.onCloseClick(true), 'Close')}
                                 {hideResizers || hideDeleteButton ? null : topBtn('minimize', 'window-maximize', undefined, e => this.onCloseClick(undefined), 'Minimize')}
-                                {hideTitle ? null : titleArea}
-                                {hideOpenButton ? null : topBtn('open', 'external-link-alt', this.onMaximizeDown, undefined, 'Open in Lightbox (ctrl: as new embedding, shift: in new collection)')}
+                                {titleArea}
+                                {hideOpenButton ? <div /> : topBtn('open', 'external-link-alt', this.onMaximizeDown, undefined, 'Open in Lightbox (ctrl: as alias, shift: in new collection)')}
                             </div>
                             {hideResizers ? null : (
                                 <>
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 7043edcee..4a986cb54 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -6,6 +6,7 @@ import { ObjectField } from '../../fields/ObjectField';
 import './EditableView.scss';
 import { DocumentIconContainer } from './nodes/DocumentIcon';
 import { OverlayView } from './OverlayView';
+import { EditableText } from 'browndash-components';
 
 export interface EditableProps {
     /**
@@ -231,7 +232,7 @@ export class EditableView extends React.Component<EditableProps> {
                     onChange: this.props.autosuggestProps.onChange,
                 }}
             />
-        ) : this.props.oneLine !== false && this.props.GetValue()?.toString().indexOf('\n') === -1 ? (
+        ) : 
             <input
                 className="editableView-input"
                 ref={r => (this._inputref = r)}
@@ -247,23 +248,23 @@ export class EditableView extends React.Component<EditableProps> {
                 onClick={this.stopPropagation}
                 onPointerUp={this.stopPropagation}
             />
-        ) : (
-            <textarea
-                className="editableView-input"
-                ref={r => (this._inputref = r)}
-                style={{ display: this.props.display, overflow: 'auto', fontSize: this.props.fontSize, minHeight: `min(100%, ${(this.props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20, background: this.props.background }}
-                placeholder={this.props.placeholder}
-                onBlur={e => this.finalizeEdit(e.currentTarget.value, false, true, false)}
-                defaultValue={this.props.GetValue()}
-                autoFocus={true}
-                onChange={this.onChange}
-                onKeyDown={this.onKeyDown}
-                onKeyPress={this.stopPropagation}
-                onPointerDown={this.stopPropagation}
-                onClick={this.stopPropagation}
-                onPointerUp={this.stopPropagation}
-            />
-        );
+        // ) : (
+        //     <textarea
+        //         className="editableView-input"
+        //         ref={r => (this._inputref = r)}
+        //         style={{ display: this.props.display, overflow: 'auto', fontSize: this.props.fontSize, minHeight: `min(100%, ${(this.props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20, background: this.props.background }}
+        //         placeholder={this.props.placeholder}
+        //         onBlur={e => this.finalizeEdit(e.currentTarget.value, false, true, false)}
+        //         defaultValue={this.props.GetValue()}
+        //         autoFocus={true}
+        //         onChange={this.onChange}
+        //         onKeyDown={this.onKeyDown}
+        //         onKeyPress={this.stopPropagation}
+        //         onPointerDown={this.stopPropagation}
+        //         onClick={this.stopPropagation}
+        //         onPointerUp={this.stopPropagation}
+        //     />
+        // );
     }
 
     render() {
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 54ad519de..35d6d73e4 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -2,19 +2,19 @@ import React = require('react');
 import * as fitCurve from 'fit-curve';
 import { action, computed, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, setupMoveUpEvents } from '../../Utils';
 import { Doc, Opt } from '../../fields/Doc';
 import { InkData, InkTool } from '../../fields/InkField';
 import { NumCast } from '../../fields/Types';
 import MobileInkOverlay from '../../mobile/MobileInkOverlay';
 import { GestureUtils } from '../../pen-gestures/GestureUtils';
 import { MobileInkOverlayContent } from '../../server/Message';
-import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, setupMoveUpEvents } from '../../Utils';
 import { CognitiveServices } from '../cognitive_services/CognitiveServices';
-import { Docs, DocUtils } from '../documents/Documents';
 import { InteractionUtils } from '../util/InteractionUtils';
 import { ScriptingGlobals } from '../util/ScriptingGlobals';
 import { Transform } from '../util/Transform';
 import './GestureOverlay.scss';
+import { InkTranscription } from './InkTranscription';
 import {
     ActiveArrowEnd,
     ActiveArrowScale,
@@ -30,12 +30,11 @@ import {
     SetActiveInkColor,
     SetActiveInkWidth,
 } from './InkingStroke';
-import { InkTranscription } from './InkTranscription';
-import { checkInksToGroup } from './nodes/button/FontIconBox';
+import TouchScrollableMenu, { TouchScrollableMenuItem } from './TouchScrollableMenu';
+import { Touchable } from './Touchable';
+import { checkInksToGroup } from './global/globalScripts';
 import { DocumentView } from './nodes/DocumentView';
 import { RadialMenu } from './nodes/RadialMenu';
-import { Touchable } from './Touchable';
-import TouchScrollableMenu, { TouchScrollableMenuItem } from './TouchScrollableMenu';
 
 interface GestureOverlayProps {
     isActive: boolean;
diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts
index 47dcdd2e4..347c40c18 100644
--- a/src/client/views/GlobalKeyHandler.ts
+++ b/src/client/views/GlobalKeyHandler.ts
@@ -285,13 +285,17 @@ export class KeyManager {
                 preventDefault = false;
                 break;
             case 'y':
-                SelectionManager.DeselectAll();
-                UndoManager.Redo();
+                if (Doc.ActivePage !== 'home') {
+                    SelectionManager.DeselectAll();
+                    UndoManager.Redo();
+                }
                 stopPropagation = false;
                 break;
             case 'z':
-                SelectionManager.DeselectAll();
-                UndoManager.Undo();
+                if (Doc.ActivePage !== 'home') {
+                    SelectionManager.DeselectAll();
+                    UndoManager.Undo();
+                }
                 stopPropagation = false;
                 break;
             case 'a':
diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index c7a7614ac..a403a10e3 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -11,6 +11,7 @@ body {
     height: 100%;
     overflow: hidden;
     font-family: $sans-serif;
+    font-size: $body-text;
     margin: 0;
     position: absolute;
     top: 0;
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index b0b757388..2fa42d091 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -16,6 +16,7 @@ import { CollectionView } from './collections/CollectionView';
 import { MainView } from './MainView';
 import * as dotenv from 'dotenv'; // see https://github.com/motdotla/dotenv#how-do-i-use-dotenv-with-import
 import { PingManager } from '../util/PingManager';
+import './global/globalScripts';
 dotenv.config();
 
 AssignAllExtensions();
@@ -27,7 +28,7 @@ FieldLoader.ServerLoadStatus = { requested: 0, retrieved: 0 }; // bcz: not sure
     root.render(<FieldLoader />);
     window.location.search.includes('safe') && CollectionView.SetSafeMode(true);
     const info = await CurrentUserUtils.loadCurrentUser();
-    if (info.email === 'guest') DocServer.Control.makeReadOnly();
+    // if (info.email === 'guest') DocServer.Control.makeReadOnly();
     await CurrentUserUtils.loadUserDocument(info.id);
     setTimeout(() => {
         document.getElementById('root')!.addEventListener(
@@ -46,7 +47,6 @@ FieldLoader.ServerLoadStatus = { requested: 0, retrieved: 0 }; // bcz: not sure
         d.setTime(d.getTime() + 100 * 24 * 60 * 60 * 1000);
         const expires = 'expires=' + d.toUTCString();
         document.cookie = `loadtime=${loading};${expires};path=/`;
-        new LinkManager();
         new TrackMovements();
         new ReplayMovements();
         new PingManager();
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index eee9066b5..0c377730e 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -68,10 +68,6 @@ h1,
     left: 0;
     z-index: 1;
     touch-action: none;
-
-    .searchBox-container {
-        background: $light-gray;
-    }
 }
 
 .mainView-container,
@@ -118,10 +114,6 @@ h1,
         background: $light-gray;
     }
 
-    .searchBox-container {
-        background: $dark-gray;
-    }
-
     .contextMenu-cont,
     .contextMenu-item {
         background: $dark-gray;
@@ -250,7 +242,6 @@ h1,
 
 .mainView-leftMenuPanel {
     min-width: var(--menuPanelWidth);
-    background-color: $dark-gray;
     border-right: $standard-border;
 
     .collectionStackingView {
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 79c308221..efd8206bf 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -49,6 +49,7 @@ import { InkTranscription } from './InkTranscription';
 import { LightboxView } from './LightboxView';
 import { LinkMenu } from './linking/LinkMenu';
 import './MainView.scss';
+import { NewLightboxView } from './newlightbox/NewLightboxView';
 import { AudioBox } from './nodes/AudioBox';
 import { DocumentLinksButton } from './nodes/DocumentLinksButton';
 import { DocumentView, DocumentViewInternal, OpenWhere, OpenWhereMod } from './nodes/DocumentView';
@@ -153,37 +154,33 @@ export class MainView extends React.Component {
         }
         this._sidebarContent.proto = undefined;
         if (!MainView.Live) {
-            DocServer.setPlaygroundFields([
+            DocServer.setLivePlaygroundFields([
                 'dataTransition',
                 'viewTransition',
                 'treeViewOpen',
-                'layout_showSidebar',
+                'treeViewExpandedView',
                 'carousel_index',
                 'itemIndex', // for changing slides in presentations
                 'layout_sidebarWidthPercent',
                 'layout_currentTimecode',
                 'layout_timelineHeightPercent',
+                'layout_hideMinimap',
+                'layout_showSidebar',
+                'layout_scrollTop',
+                'layout_fitWidth',
+                'layout_curPage',
                 'presStatus',
                 'freeform_panX',
                 'freeform_panY',
+                'freeform_scale',
                 'overlayX',
                 'overlayY',
-                'layout_fitWidth',
-                'nativeWidth',
-                'nativeHeight',
                 'text_scrollHeight',
                 'text_height',
-                'layout_hideMinimap',
-                'freeform_scale',
-                'layout_scrollTop',
                 'hidden',
-                'layout_curPage',
-                'type_collection',
+                //'type_collection',
                 'chromeHidden',
                 'currentFrame',
-                'width',
-                'height',
-                'nativeWidth',
             ]); // can play with these fields on someone else's
         }
         DocServer.GetRefField('rtfProto').then(
@@ -753,7 +750,8 @@ export class MainView extends React.Component {
 
     @computed get leftMenuPanel() {
         return (
-            <div key="menu" className="mainView-leftMenuPanel" style={{ display: LightboxView.LightboxDoc ? 'none' : undefined }}>
+            <div key="menu" className="mainView-leftMenuPanel" style={{ background: StrCast(Doc.UserDoc().userBackgroundColor),
+                display: LightboxView.LightboxDoc ? 'none' : undefined }}>
                 <DocumentView
                     Document={Doc.MyLeftSidebarMenu}
                     DataDoc={undefined}
@@ -808,8 +806,8 @@ export class MainView extends React.Component {
                 {this._hideUI ? null : this.leftMenuPanel}
                 <div key="inner" className={`mainView-innerContent${this.colorScheme}`}>
                     {this.flyout}
-                    <div className="mainView-libraryHandle" style={{ left: leftMenuFlyoutWidth - 10 /* ~half width of handle */, display: !this._leftMenuFlyoutWidth ? 'none' : undefined }} onPointerDown={this.onFlyoutPointerDown}>
-                        <FontAwesomeIcon icon="chevron-left" color={this.colorScheme === ColorScheme.Dark ? 'white' : 'black'} style={{ opacity: '50%' }} size="sm" />
+                    <div className="mainView-libraryHandle" style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), left: leftMenuFlyoutWidth - 10 /* ~half width of handle */, display: !this._leftMenuFlyoutWidth ? 'none' : undefined }} onPointerDown={this.onFlyoutPointerDown}>
+                        <FontAwesomeIcon icon="chevron-left" color={StrCast(Doc.UserDoc().userColor)} style={{ opacity: '50%' }} size="sm" />
                     </div>
                     <div className="mainView-innerContainer" style={{ width: `calc(100% - ${width}px)` }}>
                         {this.dockingContent}
@@ -963,7 +961,11 @@ export class MainView extends React.Component {
     render() {
         return (
             <div
-                className={`mainView-container${this.colorScheme}`}
+                className={`mainView-container ${this.colorScheme}`}
+                style={{
+                    color: StrCast(Doc.UserDoc().userColor),
+                    background: StrCast(Doc.UserDoc().userBackgroundColor),
+                }}
                 onScroll={() => (ele => (ele.scrollTop = ele.scrollLeft = 0))(document.getElementById('root')!)}
                 ref={r => {
                     r &&
@@ -1018,6 +1020,7 @@ export class MainView extends React.Component {
                 <InkTranscription />
                 {this.snapLines}
                 <LightboxView key="lightbox" PanelWidth={this._windowWidth} PanelHeight={this._windowHeight} maxBorder={[200, 50]} />
+                {/* <NewLightboxView key="newLightbox" PanelWidth={this._windowWidth} PanelHeight={this._windowHeight} maxBorder={[200, 50]} /> */}
             </div>
         );
     }
diff --git a/src/client/views/MainViewModal.scss b/src/client/views/MainViewModal.scss
index 0648e31c5..4bf9eb79f 100644
--- a/src/client/views/MainViewModal.scss
+++ b/src/client/views/MainViewModal.scss
@@ -4,22 +4,23 @@
     z-index: 10000;
     width: 100%;
     height: 100%;
+    box-shadow: #00000044 5px 5px 10px;
 
     .dialogue-box {
-        padding: 10px;
         position: absolute;
         z-index: 1000;
         text-align: center;
         justify-content: center;
         align-self: center;
         align-content: center;
-        background: white;
         // border-radius: 10px;
         box-shadow: #00000044 5px 5px 10px;
         transform: translate(-50%, -50%);
         top: 50%;
         left: 50%;
         transition: 0.5s all ease;
+        border-radius: 10px;
+        overflow: hidden;
     }
 
     .overlay {
@@ -28,6 +29,7 @@
         position: absolute;
         z-index: 999;
         transition: 0.5s all ease;
+        backdrop-filter: blur(5px);
     }
 
 }
\ No newline at end of file
diff --git a/src/client/views/MainViewModal.tsx b/src/client/views/MainViewModal.tsx
index 32997a944..42df99864 100644
--- a/src/client/views/MainViewModal.tsx
+++ b/src/client/views/MainViewModal.tsx
@@ -1,6 +1,10 @@
 import * as React from 'react';
 import './MainViewModal.scss';
 import { observer } from 'mobx-react';
+import { Doc } from '../../fields/Doc';
+import { StrCast } from '../../fields/Types';
+import { isDark } from 'browndash-components';
+import { Colors } from './global/globalEnums';
 
 export interface MainViewOverlayProps {
     isDisplayed: boolean;
@@ -41,9 +45,8 @@ export class MainViewModal extends React.Component<MainViewOverlayProps> {
                     className="overlay"
                     onClick={this.props?.closeOnExternalClick}
                     style={{
-                        backgroundColor: 'black',
+                        backgroundColor: isDark(StrCast(Doc.UserDoc().userColor)) ? "#DFDFDF30" : "#32323230",
                         ...(p.overlayStyle || {}),
-                        opacity: p.isDisplayed ? overlayOpacity : 0,
                     }}
                 />
             </div>
diff --git a/src/client/views/OverlayView.scss b/src/client/views/OverlayView.scss
index 033cdf1f7..5362bf9f0 100644
--- a/src/client/views/OverlayView.scss
+++ b/src/client/views/OverlayView.scss
@@ -5,7 +5,6 @@
     width: 100vw;
     height: 100vh;
     /* background-color: pink; */
-    z-index: 100000;
 }
 
 .overlayWindow-outerDiv {
@@ -55,8 +54,8 @@
 }
 
 .overlayView-doc {
-    z-index: 9002; //so that it appears above chroma 
+    z-index: 9002; //so that it appears above chroma
     position: absolute;
     top: 0;
     left: 0;
-}
\ No newline at end of file
+}
diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx
index b513fe245..82d2bff56 100644
--- a/src/client/views/PreviewCursor.tsx
+++ b/src/client/views/PreviewCursor.tsx
@@ -50,18 +50,20 @@ export class PreviewCursor extends React.Component<{}> {
                     PreviewCursor._slowLoadDocuments?.(plain.split('v=')[1].split('&')[0], options, generatedDocuments, '', undefined, PreviewCursor._addDocument).then(batch.end);
                 } else if (re.test(plain)) {
                     const url = plain;
-                    undoBatch(() =>
-                        PreviewCursor._addDocument(
-                            Docs.Create.WebDocument(url, {
-                                title: url,
-                                _width: 500,
-                                _height: 300,
-                                data_useCors: true,
-                                x: newPoint[0],
-                                y: newPoint[1],
-                            })
-                        )
-                    )();
+                    if (url.startsWith(window.location.href)) {
+                        undoBatch(() =>
+                            PreviewCursor._addDocument(
+                                Docs.Create.WebDocument(url, {
+                                    title: url,
+                                    _width: 500,
+                                    _height: 300,
+                                    data_useCors: true,
+                                    x: newPoint[0],
+                                    y: newPoint[1],
+                                })
+                            )
+                        )();
+                    } else alert('cannot paste dash into itself');
                 } else if (plain.startsWith('__DashDocId(') || plain.startsWith('__DashCloneId(')) {
                     const clone = plain.startsWith('__DashCloneId(');
                     const docids = plain.split(':');
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 7a9820a35..6105cc1b5 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -31,6 +31,7 @@ import { BsGrid3X3GapFill } from 'react-icons/bs';
 import { TfiBarChart } from 'react-icons/tfi';
 import { CiGrid31 } from 'react-icons/ci';
 import { RxWidth } from 'react-icons/rx';
+import { Dropdown, DropdownType, IListItemProps, Toggle, ToggleType, Type } from 'browndash-components';
 const higflyout = require('@hig/flyout');
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -55,29 +56,51 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     propertyToggleBtn = (label: (on?: any) => string, property: string, tooltip: (on?: any) => string, icon: (on?: any) => any, onClick?: (dv: Opt<DocumentView>, doc: Doc, property: string) => void, useUserDoc?: boolean) => {
         const targetDoc = useUserDoc ? Doc.UserDoc() : this.selectedDoc;
         const onPropToggle = (dv: Opt<DocumentView>, doc: Doc, prop: string) => ((dv?.layoutDoc || doc)[prop] = (dv?.layoutDoc || doc)[prop] ? false : true);
+        return !targetDoc ? null : <Toggle
+            toggleStatus={BoolCast(targetDoc[property])}
+            text={label(targetDoc?.[property])}
+            color={StrCast(Doc.UserDoc().userColor)}
+            icon={icon(targetDoc?.[property] as any)}
+            iconPlacement={'left'}
+            align={'flex-start'}
+            fillWidth={true}
+            toggleType={ToggleType.BUTTON}
+            onClick={undoable(() => {
+                if (SelectionManager.Views().length > 1) {
+                    SelectionManager.Views().forEach(dv => (onClick ?? onPropToggle)(dv, dv.rootDoc, property));
+                } else if (targetDoc) (onClick ?? onPropToggle)(undefined, targetDoc, property);
+            }, property)}
+        />
+    };
 
-     //   console.log('current icon ' + icon(targetDoc?.[property]));
-
-        return !targetDoc ? null : (
-            <Tooltip title={<div className={`dash-tooltip`}>{tooltip(targetDoc?.[property])} </div>} placement="top">
-              
-                    <div
-                        className={`propertiesButtons-linkButton-empty toggle-${StrCast(targetDoc[property]).includes(':hover') ? 'hover' : targetDoc[property] ? 'on' : 'off'}`}
-                        onPointerDown={e => e.stopPropagation()}
-                        onClick={undoable(() => {
-                            if (SelectionManager.Views().length > 1) {
-                                SelectionManager.Views().forEach(dv => (onClick ?? onPropToggle)(dv, dv.rootDoc, property));
-                            } else if (targetDoc) (onClick ?? onPropToggle)(undefined, targetDoc, property);
-                        }, property)}>
-                        <div className="propertiesButtons-icon"> {icon(targetDoc?.[property] as any)} </div>
 
-                        <div className="propertiesButtons-label"> {label(targetDoc?.[property])}</div>
-                        {/* <FontAwesomeIcon className="documentdecorations-icon" size="lg" icon={icon(BoolCast(targetDoc?.[property])) as any} /> */}
-                    </div>
-                
-            </Tooltip>
+    // this implments a container pattern by marking the targetDoc (collection) as a lightbox
+    // that always fits its contents to its container and that hides all other documents when
+    // a link is followed that targets a 'lightbox' destination
+    @computed get isLightboxButton() {
+        return this.propertyToggleBtn(
+            on => 'Lightbox',
+            'isLightbox',
+            on => `${on ? 'Set' : 'Remove'} lightbox flag`,
+            on => 'window-restore',
+            onClick => {
+                SelectionManager.Views().forEach(dv => {
+                    const containerDoc = dv.rootDoc;
+                    //containerDoc.followAllLinks =
+                    // containerDoc.noShadow =
+                    // containerDoc.layout_disableBrushing =
+                    // containerDoc._forceActive =
+                    //containerDoc._freeform_fitContentsToBox =
+                    containerDoc._isLightbox = !containerDoc._isLightbox;
+                    //containerDoc._xPadding = containerDoc._yPadding = containerDoc._isLightbox ? 10 : undefined;
+                    const containerContents = DocListCast(dv.dataDoc[dv.props.fieldKey ?? Doc.LayoutFieldKey(containerDoc)]);
+                    //dv.rootDoc.onClick = ScriptField.MakeScript('{self.data = undefined; documentView.select(false)}', { documentView: 'any' });
+                    containerContents.forEach(doc => LinkManager.Links(doc).forEach(link => (link.link_displayLine = false)));
+                });
+            }
         );
-    };
+    }
+
     @computed get titleButton() {
         return this.propertyToggleBtn(
             on => (!on ? 'SHOW TITLE' : this.selectedDoc?.['_layout_showTitle'] === 'title:hover' ? 'HIDE TITLE' : 'HOVER TITLE'),
@@ -318,6 +341,63 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             .map(dv => dv.docView!)
             .forEach(docView => (docView.layoutDoc._type_collection = e.target.value));
     };
+    @computed get onClickVal() {
+        const linkButton = IsFollowLinkScript(this.selectedDoc.onClick);
+        const followLoc = this.selectedDoc._followLinkLocation;
+        const linkedToLightboxView = () => LinkManager.Links(this.selectedDoc).some(link => LinkManager.getOppositeAnchor(link, this.selectedDoc)?._isLightbox);
+
+        if (followLoc === OpenWhere.lightbox && !linkedToLightboxView()) return 'linkInPlace'
+        else if (linkButton && followLoc === OpenWhere.addRight) return 'linkOnRight'
+        else if (linkButton && this.selectedDoc._followLinkLocation === OpenWhere.lightbox && linkedToLightboxView()) return 'enterPortal'
+        else if (ScriptCast(this.selectedDoc.onClick)?.script.originalScript.includes('toggleDetail')) return 'toggleDetail'
+        else return 'nothing'
+    }
+
+    @computed
+    get onClickButton() {
+        const buttonList = [
+            ['nothing', 'Select Document'],
+            ['enterPortal', 'Enter Portal'],
+            ['toggleDetail', 'Toggle Detail'],
+            ['linkInPlace', 'Open Link in Lightbox'],
+            ['linkOnRight', 'Open Link on Right'],
+        ];
+        
+        const items: IListItemProps[] = buttonList.map(value => {
+            return (
+                {
+                    text: value[1],
+                    val: value[1],
+                }
+            );
+        });
+        console.log("click val: ", this.onClickVal)
+        return !this.selectedDoc ? null : (
+            <Dropdown
+                tooltip={'Choose onClick behavior'} 
+                items={items}
+                selectedVal={this.onClickVal}
+                setSelectedVal={(val) => this.handleOptionChange(val as string)}
+                title={'Choose onClick behaviour'}
+                color={StrCast(Doc.UserDoc().userColor)}
+                dropdownType={DropdownType.SELECT}
+                type={Type.SEC}
+                fillWidth
+            />
+            // <Tooltip title={<div className="dash-tooltip">Choose onClick behavior</div>} placement="top">
+            //     <div>
+            //         <div className="propertiesButtons-linkFlyout">
+            //             <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={this.onClickFlyout}>
+            //                 <div className={'propertiesButtons-linkButton-empty'} onPointerDown={e => e.stopPropagation()}>
+            //                     <FontAwesomeIcon className="documentdecorations-icon" icon="mouse-pointer" size="lg" />
+            //                 </div>
+            //             </Flyout>
+            //         </div>
+            //         <div className="propertiesButtons-title"> onclick </div>
+            //     </div>
+            // </Tooltip>
+        );
+    }
 
     @undoBatch
     @action
@@ -397,26 +477,6 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             </div>
         );
     }
-    // @computed WHERE IS THIS
-    // get onPerspectiveFlyout() {
-    //     const excludedViewTypes = [CollectionViewType.Invalid, CollectionViewType.Docking, CollectionViewType.Pile, CollectionViewType.StackedTimeline, CollectionViewType.Linear];
-
-    //     const makeLabel = (value: string, label: string) => (
-    //         <div className="radio" key={label}>
-    //             <label>
-    //                 <input type="radio" value={value} checked={(this.selectedDoc?._type_collection ?? 'invalid') === value} onChange={this.handlePerspectiveChange} />
-    //                 {label}
-    //             </label>
-    //         </div>
-    //     );
-    //     return (
-    //         <form>
-    //             {Object.values(CollectionViewType)
-    //                 .filter(type => !excludedViewTypes.includes(type))
-    //                 .map(type => makeLabel(type, type))}
-    //         </form>
-    //     );
-    // }
 
     render() {
         const layoutField = this.selectedDoc?.[Doc.LayoutFieldKey(this.selectedDoc)];
@@ -457,7 +517,6 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                 {toggle(this.snapButton, { display: !isCollection ? 'none' : '' })}
                 {toggle(this.clustersButton, { display: !isFreeForm ? 'none' : '' })}
                 {toggle(this.panButton, { display: !isFreeForm ? 'none' : '' })}
-                {/* {toggle(this.perspectiveButton, { display: !isCollection || isNovice ? 'none' : '' })} */}
             </div>
         );
     }
diff --git a/src/client/views/PropertiesDocBacklinksSelector.scss b/src/client/views/PropertiesDocBacklinksSelector.scss
index 4d2a61c3b..5c53acf48 100644
--- a/src/client/views/PropertiesDocBacklinksSelector.scss
+++ b/src/client/views/PropertiesDocBacklinksSelector.scss
@@ -1,4 +1,4 @@
-.propertiesView-contexts-content {
+.propertiesDocBacklinksSelector {
     .linkMenu {
         position: relative;
     }
diff --git a/src/client/views/PropertiesDocBacklinksSelector.tsx b/src/client/views/PropertiesDocBacklinksSelector.tsx
index 3e69bcba6..da4438481 100644
--- a/src/client/views/PropertiesDocBacklinksSelector.tsx
+++ b/src/client/views/PropertiesDocBacklinksSelector.tsx
@@ -31,7 +31,7 @@ export class PropertiesDocBacklinksSelector extends React.Component<PropertiesDo
 
     render() {
         return !SelectionManager.Views().length ? null : (
-            <div className="preroptiesDocBacklinksSelector">
+            <div className="propertiesDocBacklinksSelector">
                 {this.props.hideTitle ? null : <p key="contexts">Contexts:</p>}
                 <LinkMenu docView={SelectionManager.Views().lastElement()} clearLinkEditor={undefined} itemHandler={this.getOnClick} style={{ left: 0, top: 0 }} />
             </div>
diff --git a/src/client/views/PropertiesDocContextSelector.tsx b/src/client/views/PropertiesDocContextSelector.tsx
index ea3bb434b..6a54f0002 100644
--- a/src/client/views/PropertiesDocContextSelector.tsx
+++ b/src/client/views/PropertiesDocContextSelector.tsx
@@ -56,6 +56,7 @@ export class PropertiesDocContextSelector extends React.Component<PropertiesDocC
     };
 
     render() {
+        if (this._docs.length < 1) return undefined
         return (
             <div>
                 {this.props.hideTitle ? null : <p key="contexts">Contexts:</p>}
diff --git a/src/client/views/PropertiesSection.scss b/src/client/views/PropertiesSection.scss
new file mode 100644
index 000000000..79479a4ce
--- /dev/null
+++ b/src/client/views/PropertiesSection.scss
@@ -0,0 +1,24 @@
+@import './global/globalCssVariables.scss';
+
+.propertiesView-section {
+    
+    .propertiesView-content {
+        padding: 10px;
+    }
+    
+    .propertiesView-sectionTitle {
+        text-align: center;
+        display: flex;
+        padding: 10px;
+        font-size: 14px;
+        font-weight: bold;
+        justify-content: space-between;
+        align-items: center;
+    
+        .propertiesView-sectionTitle-icon {
+            width: 20px;
+            height: 20px;
+            align-items: flex-end;
+        }
+    }
+}
diff --git a/src/client/views/PropertiesSection.tsx b/src/client/views/PropertiesSection.tsx
new file mode 100644
index 000000000..b900d17ca
--- /dev/null
+++ b/src/client/views/PropertiesSection.tsx
@@ -0,0 +1,51 @@
+import React = require('react');
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { action, computed } from "mobx"
+import { observer } from "mobx-react"
+import './PropertiesSection.scss'
+import { Doc } from '../../fields/Doc';
+import { StrCast } from '../../fields/Types';
+
+export interface PropertiesSectionProps {
+    title: string, 
+    content?: JSX.Element | string | null, 
+    isOpen: boolean,
+    setIsOpen: (bool: boolean) => any 
+    inSection?: boolean,
+    setInSection?: (bool: boolean) => any 
+}
+
+@observer
+export class PropertiesSection extends React.Component<PropertiesSectionProps> {
+    @computed get color() {
+        return StrCast(Doc.UserDoc().userColor);
+    }
+
+    @computed get backgroundColor() {
+        return StrCast(Doc.UserDoc().userBackgroundColor);
+    }
+
+    @computed get variantColor() {
+        return StrCast(Doc.UserDoc().userVariantColor);
+    }
+    render() {
+        console.log(this.props.title, this.props.content)
+        if (this.props.content === undefined || this.props.content === null) return null
+        else return <div className="propertiesView-section" onPointerEnter={action(() => (this.props.setInSection && this.props.setInSection(true)))} onPointerLeave={action(() => (this.props.setInSection && this.props.setInSection(false)))}>
+        <div className="propertiesView-sectionTitle" onPointerDown={action(() => (this.props.setIsOpen(!this.props.isOpen)))} style={{ 
+            background: this.props.isOpen ?  this.variantColor : this.backgroundColor,
+            color: this.color
+        }}>
+            {this.props.title}
+            <div className="propertiesView-sectionTitle-icon">
+                <FontAwesomeIcon icon={this.props.isOpen ? 'caret-down' : 'caret-right'} size="lg"  />
+            </div>
+        </div>
+        {!this.props.isOpen ? null :
+            <div className="propertiesView-content">
+                {this.props.content}
+            </div>
+        }
+    </div>
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss
index 023e08e6a..060b506e3 100644
--- a/src/client/views/PropertiesView.scss
+++ b/src/client/views/PropertiesView.scss
@@ -6,139 +6,31 @@
     font-family: 'Roboto';
     font-size: 12px;
     cursor: auto;
+    border-left: $standard-border;
 
     .slider-text {
         font-size: 8px;
     }
 
-    overflow-x: hidden;
-    overflow-y: auto;
-
-    .propertiesView-propAndInfoGrouping{
-        display: flex;
-    }
-
     .propertiesView-title {
-        text-align: left;
-        padding-top: 12px;
-        // padding-bottom: 12px;
-        padding-left: 10px;
-        display: flex;
-        font-size: 25px;
+        padding: 10px;
+        font-size: 24px;
         font-weight: bold;
-        // justify-content: center;
-
-        .propertiesView-title-icon {
-            width: 20px;
-            height: 20px;
-            padding-left: 38px;
-            margin-top: -5px;
-            align-items: flex-end;
-            margin-left: auto;
-            margin-right: 10px;
-
-            &:hover {
-                color: grey;
-                cursor: pointer;
-            }
-        }
     }
 
-    .propertiesView-info{
-        margin-top: 20;
-        margin-right: 10;
-        float: right;
-        font-size: 20;
-    }
-
-    .propertiesView-name {
-       // border-bottom: 1px solid black;
-        padding: 8.5px;
-        font-size: 12.5px;
-
-        &:hover {
-            cursor: text;
-        }
-    }
+    overflow-x: hidden;
+    overflow-y: auto;
 
-    .propertiesView-type{
-        padding: 8.5px;
-        font-size: 12.5px;
+    .propertiesView-name,
+    .propertiesView-type {
+        padding: 5px 10px;
     }
 
-    .propertiesView-settings {
-        //border-bottom: 1px solid black;
-        //padding: 8.5px;
-        font-size: 12.5px;
-        font-weight: bold;
-
-        .propertiesView-settings-title {
-            font-weight: bold;
-            font-size: 12.5px;
-            padding: 4px;
-            display: flex;
-            color: white;
-            padding-left: 8px;
-            background-color: rgb(51, 51, 51);
-
-            &:hover {
-                cursor: pointer;
-            }
-
-            .propertiesView-settings-title-icon {
-                float: right;
-                justify-items: right;
-                align-items: flex-end;
-                margin-left: auto;
-                margin-right: 9px;
-
-                &:hover {
-                    cursor: pointer;
-                }
-            }
-        }
-
-        .propertiesView-settings-content {
-            margin-left: 12px;
-            padding-bottom: 10px;
-            padding-top: 8px;
-        }
-    }
 
     .propertiesView-sharing {
         //border-bottom: 1px solid black;
         //padding: 8.5px;
 
-        .propertiesView-sharing-title {
-            font-weight: bold;
-            font-size: 12.5px;
-            padding: 4px;
-            display: flex;
-            color: white;
-            padding-left: 8px;
-            background-color: rgb(51, 51, 51);
-
-            &:hover {
-                cursor: pointer;
-            }
-
-            .propertiesView-sharing-title-icon {
-                float: right;
-                justify-items: right;
-                align-items: flex-end;
-                margin-left: auto;
-                margin-right: 9px;
-
-                &:hover {
-                    cursor: pointer;
-                }
-            }
-        }
-
-        .propertiesView-sharing-content {
-            font-size: 10px;
-            padding: 10px;
-            margin-left: 5px;
 
             .propertiesView-buttonContainer {
                 float: right;
@@ -152,12 +44,12 @@
                 }
 
                 .propertiesView-acls-checkbox {
-                    margin-top: -20px;
+                    margin-top: -15px;
+                    margin-bottom: -10px;
 
                     .propertiesView-acls-checkbox-text {
-                        font-size: 7px;
-                        margin-top: -10px;
-                        margin-left: 6px;
+                        display: inline;
+                        font-size: 9px;
                     }
                 }
             }
@@ -174,6 +66,58 @@
                     width: 100%;
                 }
             }
+    }
+
+    .propertiesView-shareDropDown{
+        margin-right: 10px;
+        min-width: 65px;
+        
+        & .propertiesView-shareDropDownNone{
+            height: 16px;
+            padding: 0px;
+            padding-left: 3px;
+            background: grey;
+            color: rgb(71, 71, 71);
+            border-radius: 6px;
+            border: 1px solid rgb(71, 71, 71);
+        }
+        & .propertiesView-shareDropDownEdit,
+        .propertiesView-shareDropDownAdmin{
+            height: 16px;
+            padding: 0px;
+            padding-left: 3px;
+            background: rgb(254, 254, 199);
+            color: rgb(75, 75, 5);
+            border-radius: 6px;
+            border: 1px solid rgb(75, 75, 5);
+        }
+        & .propertiesView-shareDropDownAugment{
+            height: 16px;
+            padding: 0px;
+            padding-left: 3px;
+            background: rgb(208, 255, 208);
+            color:rgb(19, 80, 19);
+            border-radius: 6px;
+            border: 1px solid rgb(19, 80, 19);
+
+        }
+        & .propertiesView-shareDropDownView{
+            height: 16px;
+            padding: 0px;
+            padding-left: 3px;
+            background: rgb(213, 213, 255);
+            color: rgb(25, 25, 101);
+            border-radius: 6px;
+            border: 1px solid rgb(25, 25, 101);
+        }
+        & .propertiesView-shareDropDownNot-Shared{
+            height: 16px;
+            padding: 0px;
+            padding-left: 3px;
+            background: rgb(255, 207, 207);
+            color: rgb(138, 47, 47);
+            border-radius: 6px;
+            border: 1px solid rgb(138, 47, 47);
         }
     }
 
@@ -181,33 +125,7 @@
         //border-bottom: 1px solid black;
         //padding: 8.5px;
 
-        .propertiesView-filters-title {
-            font-weight: bold;
-            font-size: 12.5px;
-            padding: 4px;
-            display: flex;
-            color: white;
-            padding-left: 8px;
-            background-color: rgb(51, 51, 51);
-
-            &:hover {
-                cursor: pointer;
-            }
-
-            .propertiesView-filters-title-icon {
-                float: right;
-                justify-items: right;
-                align-items: flex-end;
-                margin-left: auto;
-                margin-right: 9px;
-
-                &:hover {
-                    cursor: pointer;
-                }
-            }
-        }
-
-        .propertiesView-filters-content {
+        .propertiesView-content {
             font-size: 10px;
             padding: 10px;
             margin-left: 5px;
@@ -236,85 +154,10 @@
         }
     }
 
-    .propertiesView-appearance {
-        //border-bottom: 1px solid black;
-        //padding: 8.5px;
-
-        .propertiesView-appearance-title {
-            font-weight: bold;
-            font-size: 12.5px;
-            padding: 4px;
-            display: flex;
-            color: white;
-            padding-left: 8px;
-            background-color: rgb(51, 51, 51);
-
-            &:hover {
-                cursor: pointer;
-            }
-
-            .propertiesView-appearance-title-icon {
-                float: right;
-                justify-items: right;
-                align-items: flex-end;
-                margin-left: auto;
-                margin-right: 9px;
-
-                &:hover {
-                    cursor: pointer;
-                }
-            }
-        }
-
-        .propertiesView-appearance-content {
-            font-size: 10px;
-            padding: 10px;
-            margin-left: 5px;
-        }
-    }
-
-    .propertiesView-transform {
-        //border-bottom: 1px solid black;
-        //padding: 8.5px;
-
-        .propertiesView-transform-title {
-            font-weight: bold;
-            font-size: 12.5px;
-            padding: 4px;
-            display: flex;
-            color: white;
-            padding-left: 8px;
-            background-color: rgb(51, 51, 51);
-
-            &:hover {
-                cursor: pointer;
-            }
-
-            .propertiesView-transform-title-icon {
-                float: right;
-                justify-items: right;
-                align-items: flex-end;
-                margin-left: auto;
-                margin-right: 9px;
-
-                &:hover {
-                    cursor: pointer;
-                }
-            }
-        }
-
-        .propertiesView-transform-content {
-            font-size: 10px;
-            padding: 10px;
-            margin-left: 5px;
-        }
-    }
-
     .notify-button {
         padding: 2px;
         width: 12px;
         height: 12px;
-        background-color: black;
         border-radius: 10px;
         padding-left: 2px;
         padding-right: 2px;
@@ -334,13 +177,13 @@
     }
 
     .expansion-button {
-        margin-left: -20;
+        margin-left: -15px;
+        margin-right: 20px;
 
         .expansion-button-icon {
             width: 11px;
             height: 11px;
             color: black;
-            margin-left: 27px;
 
             &:hover {
                 color: rgb(131, 131, 131);
@@ -357,18 +200,13 @@
         padding: 5px; // remove when adding buttons
         border-radius: 6px; // remove when adding buttons
         margin-right: 10px; // remove when adding buttons
-        // width: 100%;
-        // display: inline-table;
         background-color: #ececec;
-        max-height: 130px;
-        overflow-y: auto;
-        width: 92%;
+        width: 97%;
 
         .propertiesView-sharingTable-item {
             display: flex;
-            // padding: 5px;
             padding: 3px;
-            align-items: center;
+            align-items: right;
             border-bottom: 0.5px solid grey;
 
             &:hover .propertiesView-sharingTable-item-name {
@@ -389,19 +227,9 @@
             .propertiesView-sharingTable-item-permission {
                 display: flex;
                 align-items: flex-end;
+                text-align: right;
                 margin-left: auto;
-
-                .permissions-select {
-                    border: none;
-                    background-color: inherit;
-                    width: 87px;
-                    text-align: justify; // for Edge
-                    text-align-last: end;
-
-                    &:hover {
-                        cursor: pointer;
-                    }
-                }
+                margin-right: -12px;
             }
 
             &:last-child {
@@ -410,67 +238,6 @@
         }
     }
 
-    .propertiesView-fields {
-        //border-bottom: 1px solid black;
-        //padding: 8.5px;
-
-        .propertiesView-fields-title {
-            font-weight: bold;
-            font-size: 12.5px;
-            padding: 4px;
-            display: flex;
-            color: white;
-            padding-left: 8px;
-            background-color: rgb(51, 51, 51);
-
-            &:hover {
-                cursor: pointer;
-            }
-
-            .propertiesView-fields-title-icon {
-                float: right;
-                justify-items: right;
-                align-items: flex-end;
-                margin-left: auto;
-                margin-right: 9px;
-
-                &:hover {
-                    cursor: pointer;
-                }
-            }
-        }
-
-        .propertiesView-fields-checkbox {
-            float: right;
-            height: 20px;
-            margin-top: -4px;
-            //margin-top: -9px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            color:black;
-           // justify-content: center;
-
-            .propertiesView-fields-checkbox-text {
-                font-size: 7px;
-                text-align: center;
-                margin-right: 6px;
-                 margin-top: -10px;
-                // margin-left: 6px;
-            }
-        }
-
-        .propertiesView-fields-content {
-            font-size: 10px;
-            margin-left: 2px;
-            padding: 10px;
-
-            &:hover {
-                cursor: pointer;
-            }
-        }
-    }
-
     .propertiesView-field {
         display: flex;
         font-size: 7px;
@@ -491,109 +258,14 @@
         }
     }
 
-    .propertiesView-contexts {
-        .propertiesView-contexts-title {
-            font-weight: bold;
-            font-size: 12.5px;
-            padding: 4px;
-            display: flex;
-            color: white;
-            padding-left: 8px;
-            background-color: rgb(51, 51, 51);
-
-            &:hover {
-                cursor: pointer;
-            }
-
-            .propertiesView-contexts-title-icon {
-                float: right;
-                justify-items: right;
-                align-items: flex-end;
-                margin-left: auto;
-                margin-right: 9px;
-
-                &:hover {
-                    cursor: pointer;
-                }
-            }
-        }
-
-        .propertiesView-contexts-content {
-            overflow: hidden;
-            padding: 10px;
-        }
-    }
-
-    .propertiesView-layout {
-        .propertiesView-layout-title {
-            font-weight: bold;
-            font-size: 12.5px;
-            padding: 4px;
-            display: flex;
-            color: white;
-            padding-left: 8px;
-            background-color: rgb(51, 51, 51);
-
-            &:hover {
-                cursor: pointer;
-            }
-
-            .propertiesView-layout-title-icon {
-                float: right;
-                justify-items: right;
-                align-items: flex-end;
-                margin-left: auto;
-                margin-right: 9px;
-
-                &:hover {
-                    cursor: pointer;
-                }
-            }
-        }
-
-        .propertiesView-layout-content {
-            overflow: hidden;
-            padding: 10px;
-        }
     }
 
     .propertiesView-presTrails {
         //border-bottom: 1px solid black;
         //padding: 8.5px;
 
-        .propertiesView-presTrails-title {
-            font-weight: bold;
-            font-size: 12.5px;
-            padding: 4px;
-            display: flex;
-            color: white;
-            padding-left: 8px;
-            background-color: rgb(51, 51, 51);
-
-            &:hover {
-                cursor: pointer;
-            }
-
-            .propertiesView-presTrails-title-icon {
-                float: right;
-                justify-items: right;
-                align-items: flex-end;
-                margin-left: auto;
-                margin-right: 9px;
-
-                &:hover {
-                    cursor: pointer;
-                }
-            }
-        }
-
-        .propertiesView-presTrails-content {
-            font-size: 10px;
-            padding: 10px;
-            margin-left: 5px;
-        }
+      
     }
-}
 
 .inking-button {
     display: flex;
@@ -900,10 +572,6 @@
     padding: 5%;
 }
 
-.propertiesView-section {
-    padding-left: 20px;
-}
-
 .propertiesView-input {
     padding: 4px 8px;
 
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 9f6c86502..31c03de4c 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -1,51 +1,44 @@
 import React = require('react');
 import { IconLookup } from '@fortawesome/fontawesome-svg-core';
-import { faAnchor, faArrowRight, faListNumeric, faWindowMaximize } from '@fortawesome/free-solid-svg-icons';
+import { faAnchor, faArrowRight, faWindowMaximize } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Checkbox, Icon, Tooltip } from '@material-ui/core';
-import { intersection } from 'lodash';
-import { action, computed, Lambda, observable } from 'mobx';
+import { Checkbox, Tooltip } from '@material-ui/core';
+import { Button, Colors, EditableText, NumberInput, Size, Slider, Type } from 'browndash-components';
+import { concat } from 'lodash';
+import { Lambda, action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { ColorState, SketchPicker } from 'react-color';
-import { Doc, DocListCast, Field, FieldResult, HierarchyMapping, NumListCast, Opt, StrListCast } from '../../fields/Doc';
+import * as Icons from "react-icons/bs"; //{BsCollectionFill, BsFillFileEarmarkImageFill} from "react-icons/bs"
+import { GrCircleInformation } from 'react-icons/gr';
+import { Utils, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents } from '../../Utils';
+import { Doc, DocListCast, Field, FieldResult, HierarchyMapping, NumListCast, Opt, ReverseHierarchyMap, StrListCast } from '../../fields/Doc';
 import { AclAdmin, DocAcl, DocData, Height, Width } from '../../fields/DocSymbols';
 import { Id } from '../../fields/FieldSymbols';
 import { InkField } from '../../fields/InkField';
 import { List } from '../../fields/List';
 import { ComputedField } from '../../fields/ScriptField';
 import { Cast, DocCast, NumCast, StrCast } from '../../fields/Types';
-import { denormalizeEmail, GetEffectiveAcl, SharingPermissions } from '../../fields/util';
-import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents } from '../../Utils';
+import { GetEffectiveAcl, SharingPermissions, normalizeEmail } from '../../fields/util';
 import { DocumentType } from '../documents/DocumentTypes';
 import { DocumentManager } from '../util/DocumentManager';
+import { GroupManager } from '../util/GroupManager';
 import { LinkManager } from '../util/LinkManager';
 import { SelectionManager } from '../util/SelectionManager';
 import { SharingManager } from '../util/SharingManager';
 import { Transform } from '../util/Transform';
-import { undoable, undoBatch, UndoManager } from '../util/UndoManager';
+import { UndoManager, undoBatch, undoable } from '../util/UndoManager';
 import { EditableView } from './EditableView';
 import { FilterPanel } from './FilterPanel';
-import { Colors } from './global/globalEnums';
 import { InkStrokeProperties } from './InkStrokeProperties';
-import { DocumentView, OpenWhere, StyleProviderFunc } from './nodes/DocumentView';
-import { KeyValueBox } from './nodes/KeyValueBox';
-import { PresBox, PresEffect, PresEffectDirection } from './nodes/trails';
 import { PropertiesButtons } from './PropertiesButtons';
 import { PropertiesDocBacklinksSelector } from './PropertiesDocBacklinksSelector';
 import { PropertiesDocContextSelector } from './PropertiesDocContextSelector';
+import { PropertiesSection } from './PropertiesSection';
 import './PropertiesView.scss';
 import { DefaultStyleProvider } from './StyleProvider';
-import { RichTextField } from '../../fields/RichTextField';
-import { AiFillFileText } from "react-icons/ai" //* as Icons from "react-icons/ai" //
-import * as Icons from "react-icons/bs" //{BsCollectionFill, BsFillFileEarmarkImageFill} from "react-icons/bs"
-import { GrCircleInformation } from 'react-icons/gr'
-import { CgBrowser} from "react-icons/cg"
-import { ImageField, VideoField, WebField } from '../../fields/URLField';
-import { FaFileVideo } from 'react-icons/fa'; //* as Icons from "react-icons/fa"; //
-import { IconButton } from 'browndash-components';
-import { IconBase } from 'react-icons';
-import { MdOutlineAddShoppingCart, MdOutlineMedicalServices } from 'react-icons/md';
-import { createPromiseCapability } from 'pdfjs-dist';
+import { DocumentView, OpenWhere, StyleProviderFunc } from './nodes/DocumentView';
+import { KeyValueBox } from './nodes/KeyValueBox';
+import { PresBox, PresEffect, PresEffectDirection } from './nodes/trails';
 const higflyout = require('@hig/flyout');
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -336,26 +329,22 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     @undoBatch
     changePermissions = (e: any, user: string) => {
         const docs = (SelectionManager.Views().length < 2 ? [this.selectedDoc] : SelectionManager.Views().map(dv => dv.props.Document)).filter(doc => doc).map(doc => (this.layoutDocAcls ? doc! : DocCast(doc)[DocData]));
-        SharingManager.Instance.shareFromPropertiesSidebar(user, e.currentTarget.value as SharingPermissions, docs);
+        SharingManager.Instance.shareFromPropertiesSidebar(user, e.currentTarget.value as SharingPermissions, docs, this.layoutDocAcls);
     };
 
     /**
      * @returns the options for the permissions dropdown.
      */
-    getPermissionsSelect(user: string, permission: string) {
-        const dropdownValues: string[] = Object.values(SharingPermissions);
+    getPermissionsSelect(user: string, permission: string, showGuestOptions: boolean) {
+        const dropdownValues: string[] = showGuestOptions ? [SharingPermissions.None, SharingPermissions.View] : Object.values(SharingPermissions);
         if (permission === '-multiple-') dropdownValues.unshift(permission);
-        if (user !== 'Override') dropdownValues.splice(dropdownValues.indexOf(SharingPermissions.Unset), 1);
         return (
-            <select className="permissions-select" value={permission} onChange={e => this.changePermissions(e, user)}>
-                {dropdownValues
-                    .filter(permission => !Doc.noviceMode || ![SharingPermissions.View, SharingPermissions.SelfEdit].includes(permission as any))
-                    .map(permission => (
-                        <option key={permission} value={permission}>
-                            {' '}
-                            {permission}{' '}
-                        </option>
-                    ))}
+            <select className="propertiesView-permissions-select" value={permission} onChange={e => this.changePermissions(e, user)}>
+                {dropdownValues.map(permission => (
+                    <option className="propertiesView-permisssions-select" key={permission} value={permission}>
+                        {concat(ReverseHierarchyMap.get(permission)?.image, ' ', permission)}
+                    </option>
+                ))}
             </select>
         );
     }
@@ -367,7 +356,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         return (
             <Tooltip title={<div className="dash-tooltip">Notify with message</div>}>
                 <div className="notify-button">
-                    <FontAwesomeIcon className="notify-button-icon" icon="bell" color="white" size="sm" />
+                    <FontAwesomeIcon className="notify-button-icon" icon="bell"  size="sm" />
                 </div>
             </Tooltip>
         );
@@ -396,6 +385,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
      * @returns a row of the permissions panel
      */
     sharingItem(name: string, admin: boolean, permission: string, showExpansionIcon?: boolean) {
+        if (name == Doc.CurrentUserEmail) {
+            name = 'Me';
+        }
         return (
             <div
                 className="propertiesView-sharingTable-item"
@@ -409,58 +401,141 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 </div>
                 {/* {name !== "Me" ? this.notifyIcon : null} */}
                 <div className="propertiesView-sharingTable-item-permission">
-                    {admin && permission !== 'Owner' ? this.getPermissionsSelect(name, permission) : permission}
-                    {permission === 'Owner' || showExpansionIcon ? this.expansionIcon : null}
+                    {this.colorACLDropDown(name, admin, permission, false)}
+                    {(permission === 'Owner' && name == 'Me') || showExpansionIcon ? this.expansionIcon : null}
+                </div>
+            </div>
+        );
+    }
+
+    /**
+     * @returns a colored dropdown bar reflective of the permission
+     */
+    colorACLDropDown(name: string, admin: boolean, permission: string, showGuestOptions: boolean) {
+        var shareImage = ReverseHierarchyMap.get(permission)?.image;
+        return (
+            <div>
+                <div className={'propertiesView-shareDropDown'}>
+                    <div className={`propertiesView-shareDropDown${permission}`}>
+                        <div className="propertiesView-shareDropDown">{admin && permission !== 'Owner' ? this.getPermissionsSelect(name, permission, showGuestOptions) : concat(shareImage, ' ', permission)}</div>
+                    </div>
                 </div>
             </div>
         );
     }
 
     /**
+     * Sorting algorithm to sort users.
+     */
+    sortUsers = (u1: String, u2: String) => {
+        return u1 > u2 ? -1 : u1 === u2 ? 0 : 1;
+    };
+
+    /**
+     * Sorting algorithm to sort groups.
+     */
+    sortGroups = (group1: Doc, group2: Doc) => {
+        const g1 = StrCast(group1.title);
+        const g2 = StrCast(group2.title);
+        return g1 > g2 ? -1 : g1 === g2 ? 0 : 1;
+    };
+
+    /**
      * @returns the sharing and permissions panel.
      */
     @computed get sharingTable() {
         // all selected docs
-        const docs =
-            SelectionManager.Views().length < 2 && this.selectedDoc ? [this.layoutDocAcls ? this.selectedDoc : this.dataDoc!] : SelectionManager.Views().map(docView => (this.layoutDocAcls ? docView.props.Document : docView.props.Document[DocData]));
-
+        const docs = SelectionManager.Views().length < 2 && this.selectedDoc ? [this.selectedDoc] : SelectionManager.Views().map(docView => docView.rootDoc);
         const target = docs[0];
 
-        // tslint:disable-next-line: no-unnecessary-callback-wrapper
-        const effectiveAcls = docs.map(doc => GetEffectiveAcl(doc));
-        const showAdmin = effectiveAcls.every(acl => acl === AclAdmin);
+        const showAdmin = GetEffectiveAcl(target) == AclAdmin;
+        const individualTableEntries = [];
+        const usersAdded: string[] = []; // all shared users being added - organized by denormalized email
+
+        const seldoc = this.layoutDocAcls || !this.selectedDoc ? this.selectedDoc : Doc.GetProto(this.selectedDoc);
+        // adds each user to usersAdded
+        SharingManager.Instance.users.forEach(eachUser => {
+            var userOnDoc = true;
+            if (seldoc) {
+                if (Doc.GetT(seldoc, 'acl-' + normalizeEmail(eachUser.user.email), 'string', true) === '' || Doc.GetT(seldoc, 'acl-' + normalizeEmail(eachUser.user.email), 'string', true) === undefined) {
+                    userOnDoc = false;
+                }
+            }
+            if (userOnDoc && !usersAdded.includes(eachUser.user.email) && eachUser.user.email !== 'guest' && eachUser.user.email != target.author) {
+                usersAdded.push(eachUser.user.email);
+            }
+        });
 
-        // users in common between all docs
-        const commonKeys: string[] = intersection(...docs.map(doc => doc?.[DocAcl] && Object.keys(doc[DocAcl]).filter(key => key !== 'acl-Me')));
+        // sorts and then adds each user to the table
+        usersAdded.sort(this.sortUsers);
+        usersAdded.map(userEmail => {
+            const userKey = `acl-${normalizeEmail(userEmail)}`;
+            var aclField = Doc.GetT(this.layoutDocAcls ? target : Doc.GetProto(target), userKey, 'string', true);
+            var permission = StrCast(aclField);
+            individualTableEntries.unshift(this.sharingItem(userEmail, showAdmin, permission!, false)); // adds each user
+        });
 
-        const tableEntries = [];
+        // adds current user
+        var userEmail = Doc.CurrentUserEmail;
+        if (userEmail == 'guest') userEmail = 'Guest';
+        const userKey = `acl-${normalizeEmail(userEmail)}`;
+        if (!usersAdded.includes(userEmail) && userEmail !== 'Guest' && userEmail != target.author) {
+            var permission;
+            if (this.layoutDocAcls) {
+                if (target[DocAcl][userKey]) permission = HierarchyMapping.get(target[DocAcl][userKey])?.name;
+                else if (target['embedContainer']) permission = StrCast(Doc.GetProto(DocCast(target['embedContainer']))[userKey]);
+                else permission = StrCast(Doc.GetProto(target)?.[userKey]);
+            } else permission = StrCast(target[userKey]);
+            individualTableEntries.unshift(this.sharingItem(userEmail, showAdmin, permission!, false)); // adds each user
+        }
 
-        // DocCastAsync(Doc.UserDoc().sidebarUsersDisplayed).then(sidebarUsersDisplayed => {
-        if (commonKeys.length) {
-            for (const key of commonKeys) {
-                const name = denormalizeEmail(key.substring(4));
-                const uniform = docs.every(doc => doc?.[DocAcl]?.[key] === docs[0]?.[DocAcl]?.[key]);
-                if (name !== Doc.CurrentUserEmail && name !== target.author && name !== 'Public' && name !== 'Override' /* && sidebarUsersDisplayed![name] !== false*/) {
-                    tableEntries.push(this.sharingItem(name, showAdmin, uniform ? HierarchyMapping.get(target[DocAcl][key])!.name : '-multiple-'));
+        // shift owner to top
+        individualTableEntries.unshift(this.sharingItem(StrCast(target.author), showAdmin, 'Owner'), false);
+
+        // adds groups
+        const groupTableEntries: JSX.Element[] = [];
+        const groupList = GroupManager.Instance?.allGroups || [];
+        groupList.sort(this.sortGroups);
+        groupList.map(group => {
+            if (group.title != 'Guest' && this.selectedDoc) {
+                const groupKey = 'acl-' + normalizeEmail(StrCast(group.title));
+                if (this.selectedDoc[groupKey] != '' && this.selectedDoc[groupKey] != undefined) {
+                    var permission;
+                    if (this.layoutDocAcls) {
+                        if (target[DocAcl][groupKey]) {
+                            permission = HierarchyMapping.get(target[DocAcl][groupKey])?.name;
+                        } else if (target['embedContainer']) permission = StrCast(Doc.GetProto(DocCast(target['embedContainer']))[groupKey]);
+                        else permission = StrCast(Doc.GetProto(target)?.[groupKey]);
+                    } else permission = StrCast(target[groupKey]);
+                    groupTableEntries.unshift(this.sharingItem(StrCast(group.title), showAdmin, permission!, false));
                 }
             }
-        }
+        });
 
-        const ownerSame = Doc.CurrentUserEmail !== target.author && docs.filter(doc => doc).every(doc => doc.author === docs[0].author);
-        // shifts the current user, owner, public to the top of the doc.
-        // tableEntries.unshift(this.sharingItem("Override", showAdmin, docs.filter(doc => doc).every(doc => doc["acl-Override"] === docs[0]["acl-Override"]) ? (AclMap.get(target[AclSym]?.["acl-Override"]) || "None") : "-multiple-"));
-        if (ownerSame) tableEntries.unshift(this.sharingItem(StrCast(target.author), showAdmin, 'Owner'));
-        tableEntries.unshift(this.sharingItem('Public', showAdmin, StrCast(docs.filter(doc => doc).every(doc => doc['acl-Public'] === target['acl-Public']) ? target['acl-Public'] || SharingPermissions.None : '-multiple-')));
-        tableEntries.unshift(
-            this.sharingItem(
-                'Me',
-                showAdmin,
-                docs.filter(doc => doc).every(doc => doc.author === Doc.CurrentUserEmail) ? 'Owner' : effectiveAcls.every(acl => acl === effectiveAcls[0]) ? HierarchyMapping.get(effectiveAcls[0])!.name : '-multiple-',
-                !ownerSame
-            )
-        );
+        // public permission
+        const publicPermission = StrCast((this.layoutDocAcls ? target : Doc.GetProto(target))['acl-Guest']);
 
-        return <div className="propertiesView-sharingTable">{tableEntries}</div>;
+        return (
+            <div>
+                <br />
+                <div className="propertiesView-sharingTable">{<div> {individualTableEntries}</div>}</div>
+                {groupTableEntries.length > 0 ? (
+                    <div>
+                        <div>
+                            {' '}
+                            <br></br> Groups with Access to this Document{' '}
+                        </div>
+                        <div className="propertiesView-sharingTable">{<div> {groupTableEntries}</div>}</div>
+                    </div>
+                ) : null}
+                Guest
+                <div>{this.colorACLDropDown('Guest', true, publicPermission!, true)}</div>
+                <div>
+                    {' '}
+                    <br></br> Individual Users with Access to this Document{' '}
+                </div>
+            </div>
+        );
     }
 
     @computed get fieldsCheckbox() {
@@ -471,19 +546,46 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     @action
     toggleCheckbox = () => (this.layoutFields = !this.layoutFields);
 
+    @computed get color() {
+        return StrCast(Doc.UserDoc().userColor);
+    }
+
+    @computed get backgroundColor() {
+        return StrCast(Doc.UserDoc().userBackgroundColor);
+    }
+
+    @computed get variantColor() {
+        return StrCast(Doc.UserDoc().userVariantColor);
+    }
+
     @computed get editableTitle() {
 
         const titles = new Set<string>();
-        SelectionManager.Views().forEach(dv => titles.add(StrCast(dv.rootDoc.title)));
         const title = Array.from(titles.keys()).length > 1 ? '--multiple selected--' : StrCast(this.selectedDoc?.title);
+        SelectionManager.Views().forEach(dv => titles.add(StrCast(dv.rootDoc.title)));
         return (
-            <div>
-                <div className="propertiesView-wordTitle">Title</div> 
-                <div className="editable-title">
-                    <EditableView key="editableView" contents={title} height={25} fontSize={14} GetValue={() => title} SetValue={this.setTitle} />
-                </div>
-            </div>
-            
+            <EditableText
+                val={title}
+                setVal={this.setTitle}
+                color={this.color}
+                type={Type.SEC}
+                formLabel={"Title"}
+                fillWidth
+            />
+        );
+    }
+
+    @computed get type() {
+        const type = Utils.cleanDocumentType(StrCast(this.selectedDoc?.type) as DocumentType);
+        return (
+            <Button
+                formLabel={"Type"}
+                text={type}
+                type={Type.SEC}
+                color={this.color}
+                align='flex-start'
+                fillWidth
+            />
         );
     }
 
@@ -531,16 +633,14 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
     @undoBatch
     @action
-    setTitle = (value: string) => {
+    setTitle = (value: string | number) => {
+        console.log(value)
         if (SelectionManager.Views().length > 1) {
             SelectionManager.Views().map(dv => Doc.SetInPlace(dv.rootDoc, 'title', value, true));
-            return true;
         } else if (this.dataDoc) {
             if (this.selectedDoc) Doc.SetInPlace(this.selectedDoc, 'title', value, true);
-            else KeyValueBox.SetField(this.dataDoc, 'title', value, true);
-            return true;
+            else KeyValueBox.SetField(this.dataDoc, 'title', value as string, true);
         }
-        return false;
     };
 
     @undoBatch
@@ -598,7 +698,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                         className="inking-button-points"
                         style={{ backgroundColor: InkStrokeProperties.Instance._controlButton ? 'black' : '' }}
                         onPointerDown={action(() => (InkStrokeProperties.Instance._controlButton = !InkStrokeProperties.Instance._controlButton))}>
-                        <FontAwesomeIcon icon="bezier-curve" color="white" size="lg" />
+                        <FontAwesomeIcon icon="bezier-curve"  size="lg" />
                     </div>
                 </Tooltip>
             </div>
@@ -617,10 +717,10 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 <input className="inputBox-input" type="text" value={value} onChange={e => setter(e.target.value)} onKeyPress={e => e.stopPropagation()} />
                 <div className="inputBox-button">
                     <div className="inputBox-button-up" key="up2" onPointerDown={undoBatch(action(() => this.upDownButtons('up', key)))}>
-                        <FontAwesomeIcon icon="caret-up" color="white" size="sm" />
+                        <FontAwesomeIcon icon="caret-up"  size="sm" />
                     </div>
                     <div className="inputbox-Button-down" key="down2" onPointerDown={undoBatch(action(() => this.upDownButtons('down', key)))}>
-                        <FontAwesomeIcon icon="caret-down" color="white" size="sm" />
+                        <FontAwesomeIcon icon="caret-down"  size="sm" />
                     </div>
                 </div>
             </div>
@@ -874,16 +974,28 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 <input className="inputBox-input" type="text" value={value} onChange={e => setter(e.target.value)} />
                 <div className="inputBox-button">
                     <div className="inputBox-button-up" key="up2" onPointerDown={undoBatch(action(() => this.upDownButtons('up', key)))}>
-                        <FontAwesomeIcon icon="caret-up" color="white" size="sm" />
+                        <FontAwesomeIcon icon="caret-up"  size="sm" />
                     </div>
                     <div className="inputbox-Button-down" key="down2" onPointerDown={undoBatch(action(() => this.upDownButtons('down', key)))}>
-                        <FontAwesomeIcon icon="caret-down" color="white" size="sm" />
+                        <FontAwesomeIcon icon="caret-down"  size="sm" />
                     </div>
                 </div>
             </div>
         );
     };
 
+    @action
+    onDoubleClick = () => {
+        this.openContexts = false;
+        this.openLinks = false;
+        this.openOptions = false;
+        this.openTransform = false;
+        this.openFields = false;
+        this.openSharing = false;
+        this.openLayout = false;
+        this.openFilters = false;
+    }
+
     @computed get widthAndDash() {
         return (
             <div className="widthAndDash">
@@ -963,111 +1075,115 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         );
     }
 
+    getNumber = (label: string, unit: string, min: number, max: number, number: number, setNumber: any) => {
+        return <div>
+            <NumberInput
+                formLabel={label}
+                formLabelPlacement={'left'}
+                type={Type.SEC}
+                unit={unit}
+                fillWidth
+                color={this.color}
+                number={number}
+                setNumber={setNumber} 
+                min={min}
+                max={max}            
+            />
+            <Slider 
+                multithumb={false}
+                color={this.color}
+                size={Size.XSMALL} 
+                min={min} 
+                max={max}
+                unit={unit} 
+                number={number}
+                setNumber={setNumber}
+                fillWidth
+            />
+        </div>
+    }
+
     @computed get transformEditor() {
         return (
             <div className="transform-editor">
                 {this.isInk ? this.controlPointsButton : null}
-                {this.hgtInput}
-                {this.XpsInput}
+                {this.getNumber(
+                    "Height",
+                    " px",
+                    0,
+                    1000,
+                    Number(this.shapeHgt),
+                    undoable((val: string) => !isNaN(Number(val)) && (this.shapeHgt = val), 'set height')
+                )}
+                {this.getNumber(
+                    "Width",
+                    " px",
+                    0,
+                    1000,
+                    Number(this.shapeWid),
+                    undoable((val: string) => !isNaN(Number(val)) && (this.shapeWid = val), 'set width')
+                )}
+                {this.getNumber(
+                    "X Coordinate",
+                    " px",
+                    -2000,
+                    2000,
+                    Number(this.shapeXps),
+                    undoable((val: string) => !isNaN(Number(val)) && (this.shapeXps = val), 'set x coord')
+                )}
+                {this.getNumber(
+                    "Y Coordinate",
+                    " px",
+                    -2000,
+                    2000,
+                    Number(this.shapeYps),
+                    undoable((val: string) => !isNaN(Number(val)) && (this.shapeYps = val), 'set y coord')
+                )}
             </div>
         );
     }
 
     @computed get optionsSubMenu() {
-        let isDouble = false;
-
-        return (
-            <div className="propertiesView-settings" onPointerEnter={action(() => (this.inOptions = true))} onPointerLeave={action(() => (this.inOptions = false))}>
-                <div className="propertiesView-settings-title" onClick ={action(() => {
-                    if (!isDouble){
-                        this.openOptions = !this.openOptions
-                    } } )}
-                 onDoubleClick={action(() => {
-                    isDouble = true;
-
-                    this.openContexts = false;
-                    this.openLinks = false;
-                    this.openOptions = true;
-                    this.openTransform = false;
-                    this.openFields = false;
-                    this.openSharing = false;
-                    this.openLayout = false;
-                    this.openFilters = false;
-                    
-
-                    setTimeout(() => {
-                        isDouble = false;
-                    }, 300)
-                }
-                    
-    )}
-                 style={{ backgroundColor: this.openOptions ? 'black' : '' }}>
-                    Options
-                    <div className="propertiesView-settings-title-icon">
-                        <FontAwesomeIcon icon={this.openOptions ? 'caret-down' : 'caret-right'} size="lg" color="white" />
-                    </div>
-                </div>
-                {!this.openOptions ? null : (
-                    <div className="propertiesView-settings-content">
-                        <PropertiesButtons />
-                    </div>
-                )}
-            </div>
-        );
+        return <PropertiesSection
+            title="Options"
+            content={<PropertiesButtons />}
+            inSection={this.inOptions}
+            isOpen={this.openOptions}
+            setInSection={(bool) => this.inOptions = bool}
+            setIsOpen={(bool) => this.openOptions = bool}
+            onDoubleClick={() => this.onDoubleClick()}
+        />
     }
 
     @computed get sharingSubMenu() {
-        let isDouble:boolean = false;
-
-        return (
-            <div className="propertiesView-sharing">
-                <div className="propertiesView-sharing-title" onClick ={action(() => {
-                    if (!isDouble){
-                        this.openSharing = !this.openSharing
-                    } } )}
-                 onDoubleClick={action(() => {
-                    isDouble = true;
-
-                    this.openContexts = false;
-                    this.openLinks = false;
-                    this.openOptions = false;
-                    this.openTransform = false;
-                    this.openFields = false;
-                    this.openSharing = true;
-                    this.openLayout = false;
-                    this.openFilters = false;
-                    
-
-                    setTimeout(() => {
-                        isDouble = false;
-                    }, 300)
-                })}
-                style={{ backgroundColor: this.openSharing ? 'black' : '' }}>
-                    Sharing {'&'} Permissions
-                    <div className="propertiesView-sharing-title-icon">
-                        <FontAwesomeIcon icon={this.openSharing ? 'caret-down' : 'caret-right'} size="lg" color="white" />
-                    </div>
-                </div>
-                {!this.openSharing ? null : (
-                    <div className="propertiesView-sharing-content">
+        return <PropertiesSection
+            title="Sharing & Permissions"
+            content={<>
+            <div className="propertiesView-buttonContainer">
+                {!Doc.noviceMode ? (
                         <div className="propertiesView-buttonContainer">
-                            {!Doc.noviceMode ? (
-                                <div className="propertiesView-acls-checkbox">
-                                    <Checkbox color="primary" onChange={action(() => (this.layoutDocAcls = !this.layoutDocAcls))} checked={this.layoutDocAcls} />
-                                    <div className="propertiesView-acls-checkbox-text">Layout</div>
-                                </div>
-                            ) : null}
-                            {/* <Tooltip title={<><div className="dash-tooltip">{"Re-distribute sharing settings"}</div></>}>
-                                        <button onPointerDown={() => SharingManager.Instance.distributeOverCollection(this.selectedDoc!)}>
-                                            <FontAwesomeIcon icon="redo-alt" color="white" size="1x" />
-                                        </button>
-                                    </Tooltip> */}
+                        <div className="propertiesView-acls-checkbox">
+                            <div className="propertiesView-acls-checkbox-text"> Show / Contol Layout Permissions </div>
+                            <Checkbox color="primary" onChange={action(() => (this.layoutDocAcls = !this.layoutDocAcls))} checked={this.layoutDocAcls} />
                         </div>
-                        {this.sharingTable}
-                    </div>
-                )}
-            </div>
-        );
+                        {/* <Tooltip title={<><div className="dash-tooltip">{"Re-distribute sharing settings"}</div></>}>
+                                    <button onPointerDown={() => SharingManager.Instance.distributeOverCollection(this.selectedDoc!)}>
+                                        <FontAwesomeIcon icon="redo-alt" color="white" size="1x" />
+                                    </button>
+                                </Tooltip> */}
+                        </div>
+                    ) : null}
+                    {/* <Tooltip title={<><div className="dash-tooltip">{"Re-distribute sharing settings"}</div></>}>
+                        <button onPointerDown={() => SharingManager.Instance.distributeOverCollection(this.selectedDoc!)}>
+                            <FontAwesomeIcon icon="redo-alt"  size="1x" />
+                        </button>
+                    </Tooltip> */}
+                </div>
+                {this.sharingTable}
+            </>}
+            isOpen={this.openSharing}
+            setIsOpen={(bool) => this.openSharing = bool}
+        />
     }
 
     /**
@@ -1095,46 +1211,15 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     };
 
     @computed get filtersSubMenu() {
-        let isDouble: boolean = false;
-
-        return (
-            <div className="propertiesView-filters">
-                <div className="propertiesView-filters-title" onClick ={action(() => {
-                    if (!isDouble){
-                        this.openFilters = !this.openFilters
-                    } } )}
-                 onDoubleClick={action(() => {
-                    isDouble = true;
-
-                    this.openContexts = false;
-                    this.openLinks = false;
-                    this.openOptions = false;
-                    this.openTransform = false;
-                    this.openFields = false;
-                    this.openSharing = false;
-                    this.openLayout = false;
-                    this.openFilters = true;
-                    
-
-                    setTimeout(() => {
-                        isDouble = false;
-                    }, 300)
-                }
-                    
-    )}
-                 style={{ backgroundColor: this.openFilters ? 'black' : '' }}>
-                    Filters
-                    <div className="propertiesView-filters-title-icon">
-                        <FontAwesomeIcon icon={this.openFilters ? 'caret-down' : 'caret-right'} size="lg" color="white" />
-                    </div>
-                </div>
-                {!this.openFilters ? null : (
-                    <div className="propertiesView-filters-content" style={{ position: 'relative', height: 'auto' }}>
-                        <FilterPanel rootDoc={this.selectedDoc ?? Doc.ActiveDashboard!} />
-                    </div>
-                )}
-            </div>
-        );
+        return <PropertiesSection 
+            title="Filters"
+            content={<div className="propertiesView-content filters" style={{ position: 'relative', height: 'auto' }}>
+                <FilterPanel rootDoc={this.selectedDoc ?? Doc.ActiveDashboard!} />
+            </div>}
+            isOpen={this.openFilters}
+            setIsOpen={(bool) => this.openFilters = bool}
+            onDoubleClick={() => this.onDoubleClick()}
+        />
     }
 
     @computed get inkSubMenu() {
@@ -1142,217 +1227,66 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
         return (
             <>
-                {!this.isInk ? null : (
-                    <div className="propertiesView-appearance">
-                        <div className="propertiesView-appearance-title" onPointerDown={action(() => (this.openAppearance = !this.openAppearance))} style={{ backgroundColor: this.openAppearance ? 'black' : '' }}>
-                            Appearance
-                            <div className="propertiesView-appearance-title-icon">
-                                <FontAwesomeIcon icon={this.openAppearance ? 'caret-down' : 'caret-right'} size="lg" color="white" />
-                            </div>
-                        </div>
-                        {!this.openAppearance ? null : <div className="propertiesView-appearance-content">{this.appearanceEditor}</div>}
-                    </div>
-                )}
-
-                <div className="propertiesView-transform">
-                    <div className="propertiesView-transform-title" onClick ={action(() => {
-                    if (!isDouble){
-                        this.openTransform = !this.openTransform
-                    } } )}
-                 onDoubleClick={action(() => {
-                    isDouble = true;
-
-                    this.openContexts = false;
-                    this.openLinks = false;
-                    this.openOptions = false;
-                    this.openTransform = true;
-                    this.openFields = false;
-                    this.openSharing = false;
-                    this.openLayout = false;
-                    this.openFilters = false;
-                    
-
-                    setTimeout(() => {
-                        isDouble = false;
-                    }, 300)
-                })}
-                     style={{ backgroundColor: this.openTransform ? 'black' : '' }}>
-                        Transform
-                        <div className="propertiesView-transform-title-icon">
-                            <FontAwesomeIcon icon={this.openTransform ? 'caret-down' : 'caret-right'} size="lg" color="white" />
-                        </div>
-                    </div>
-                    {this.openTransform ? <div className="propertiesView-transform-content">{this.transformEditor}</div> : null}
-                </div>
+                <PropertiesSection
+                    title="Appearance"
+                    content={this.isInk ? this.appearanceEditor : null}
+                    isOpen={this.openAppearance}
+                    setIsOpen={(bool) => this.openAppearance = bool}
+                    onDoubleClick={() => this.onDoubleClick()}
+                />
+                <PropertiesSection
+                    title="Transform"
+                    content={this.transformEditor}
+                    isOpen={this.openTransform}
+                    setIsOpen={(bool) => this.openTransform = bool}
+                    onDoubleClick={() => this.onDoubleClick()}
+                />
             </>
         );
     }
 
     @computed get fieldsSubMenu() {
-        let isDouble: boolean = false;
-
-        return (
-            <div className="propertiesView-fields">
-                <div className="propertiesView-fields-title" onClick ={action(() => {
-                    if (!isDouble){
-                        this.openFields = !this.openFields
-                    } } )}
-                 onDoubleClick={action(() => {
-                    isDouble = true;
-
-                    this.openContexts = false;
-                    this.openLinks = false;
-                    this.openOptions = false;
-                    this.openTransform = false;
-                    this.openFields = true;
-                    this.openSharing = false;
-                    this.openLayout = false;
-                    this.openFilters = false;
-                    
-
-                    setTimeout(() => {
-                        isDouble = false;
-                    }, 300)
-                }
-                    
-    )}
-                  style={{ backgroundColor: this.openFields ? 'black' : '' }}>
-                    Fields {'&'} Tags
-                    <div className="propertiesView-fields-title-icon">
-                        <FontAwesomeIcon icon={this.openFields ? 'caret-down' : 'caret-right'} size="lg" color="white" />
-                    </div>
-                </div>
-                {!Doc.noviceMode && this.openFields ? (
-                    <div className="propertiesView-fields-checkbox">
-                        {this.fieldsCheckbox}
-                        <div className="propertiesView-fields-checkbox-text">Embedding</div>
-                    </div>
-                ) : null}
-                {!this.openFields ? null : <div className="propertiesView-fields-content">{Doc.noviceMode ? this.noviceFields : this.expandedField}</div>}
-            </div>
-        );
+        return <PropertiesSection
+            title="Fields & Tags"
+            content={<div className="propertiesView-content fields">{
+                Doc.noviceMode ? this.noviceFields : this.expandedField}
+            </div>}
+            isOpen={this.openFields}
+            setIsOpen={(bool) => this.openFields = bool}
+            onDoubleClick={() => this.onDoubleClick()}
+        />
     }
 
     @computed get contextsSubMenu() {
-        let isDouble = false;
-        return (
-            <div className="propertiesView-contexts">
-                <div className="propertiesView-contexts-title" onClick ={action(() => {
-                    if (!isDouble){
-                        this.openContexts = !this.openContexts
-                    } } )}
-                 onDoubleClick={action(() => {
-                    isDouble = true;
-
-                    this.openContexts = true;
-                    this.openLinks = false;
-                    this.openOptions = false;
-                    this.openTransform = false;
-                    this.openFields = false;
-                    this.openSharing = false;
-                    this.openLayout = false;
-                    this.openFilters = false;
-                    
-
-                    setTimeout(() => {
-                        isDouble = false;
-                    }, 300)
-                }
-                    
-    )}
-                      style={{ backgroundColor: this.openContexts ? 'black' : '' }}>
-                    Other Contexts
-                    <div className="propertiesView-contexts-title-icon">
-                        <FontAwesomeIcon icon={this.openContexts ? 'caret-down' : 'caret-right'} size="lg" color="white" />
-                    </div>
-                </div>
-                {!this.openContexts ? null : this.contextCount > 0 ? <div className="propertiesView-contexts-content">{this.contexts}</div> : <div className="propertiesView-contexts-content">There are no other contexts.</div>} 
-            </div>
-        );
+        return <PropertiesSection
+            title="Other Contexts"
+            content={this.contexts}
+            isOpen={this.openContexts}
+            setIsOpen={(bool) => this.openContexts = bool}
+            onDoubleClick={() => this.onDoubleClick()}
+        />
     }
 
 
 
     @computed get linksSubMenu() {
-//onClick={action(() => (this.openLinks = !this.openLinks))} onDoubleClick={action(() => (this.openContexts = false, this.openOptions = false, this.openTransform = false, 
-//this.openFields = false, this.openSharing = false, this.openLayout = false, this.openFilters = false, this.openLinks = false ))}
-
-        let isDouble = false;
-
-        return (
-            <div className="propertiesView-contexts">
-            
-                <div className="propertiesView-contexts-title" onClick = {action(() => {
-                    if (!isDouble){
-                        this.openLinks = !this.openLinks
-                    } } )}
-
-                    onDoubleClick = {action(() => {
-                        isDouble = true;
-
-                        this.openContexts = false;
-                        this.openOptions = false;
-                        this.openTransform = false;
-                        this.openFields = false;
-                        this.openSharing = false;
-                        this.openLayout = false;
-                        this.openFilters = false;
-                        this.openLinks = true;
-
-                        setTimeout(() => {
-                            isDouble = false;
-                        }, 300)
-                    }
-                        
-        )}
-                    style={{ backgroundColor: this.openLinks ? 'black' : '' }}>
-                    Linked To
-                    <div className="propertiesView-contexts-title-icon">
-                        <FontAwesomeIcon icon={this.openLinks ? 'caret-down' : 'caret-right'} size="lg" color="white" />
-                    </div>
-                </div>
-                {!this.openLinks ? null : this.linkCount > 0 ? <div className="propertiesView-contexts-content">{this.links}</div> : <div className="propertiesView-contexts-content">There are no current links.</div>}
-            </div>
-        );
+        return <PropertiesSection
+            title="Linked To"
+            content={this.links}
+            isOpen={this.openLinks}
+            setIsOpen={(bool) => this.openLinks = bool}
+            onDoubleClick={() => this.onDoubleClick()}
+        />
     }
 
     @computed get layoutSubMenu() {
-        let isDouble: boolean = false;
-
-        return (
-            <div className="propertiesView-layout">
-                <div className="propertiesView-layout-title" onClick ={action(() => {
-                    if (!isDouble){
-                        this.openLayout = !this.openLayout
-                    } } )}
-                 onDoubleClick={action(() => {
-                    isDouble = true;
-
-                    this.openContexts = false;
-                    this.openLinks = false;
-                    this.openOptions = false;
-                    this.openTransform = false;
-                    this.openFields = false;
-                    this.openSharing = false;
-                    this.openLayout = true;
-                    this.openFilters = false;
-                    
-
-                    setTimeout(() => {
-                        isDouble = false;
-                    }, 300)
-                }
-                    
-    )}
-                  style={{ backgroundColor: this.openLayout ? 'black' : '' }}>
-                    Layout
-                    <div className="propertiesView-layout-title-icon">
-                        <FontAwesomeIcon icon={this.openLayout ? 'caret-down' : 'caret-right'} size="lg" color="white" />
-                    </div>
-                </div>
-                {this.openLayout ? <div className="propertiesView-layout-content">{this.layoutPreview}</div> : null}
-            </div>
-        );
+        return <PropertiesSection
+            title="Layout"
+            content={this.layoutPreview}
+            isOpen={this.openLayout}
+            setIsOpen={(bool) => this.openLayout = bool}
+            onDoubleClick={() => this.onDoubleClick()}
+        />
     }
 
     @computed get description() {
@@ -1553,6 +1487,226 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         if (scale > 1) scale = 1;
         this.sourceAnchor && (this.sourceAnchor.followLinkZoomScale = scale);
     };
+    
+    @computed get linkProperties() {
+        const zoom = Number((NumCast(this.sourceAnchor?.followLinkZoomScale, 1) * 100).toPrecision(3));
+        const targZoom = this.sourceAnchor?.followLinkZoom;
+        const indent = 30;
+        const hasSelectedAnchor = LinkManager.Links(this.sourceAnchor).includes(LinkManager.currentLink!);
+
+        return <>
+        <div className="propertiesView-section" style={{ background: 'darkgray' }}>
+            <div className="propertiesView-input first" style={{ display: 'grid', gridTemplateColumns: '84px auto' }}>
+                <p>Relationship</p>
+                {this.editRelationship}
+            </div>
+            <div className="propertiesView-input" style={{ display: 'grid', gridTemplateColumns: '84px auto' }}>
+                <p>Description</p>
+                {this.editDescription}
+            </div>
+            <div className="propertiesView-input inline">
+                <p>Show link</p>
+                <button
+                    style={{ background: !LinkManager.currentLink?.link_displayLine ? '' : '#4476f7', borderRadius: 3 }}
+                    onPointerDown={e => this.toggleLinkProp(e, 'link_displayLine')}
+                    onClick={e => e.stopPropagation()}
+                    className="propertiesButton">
+                    <FontAwesomeIcon className="fa-icon" icon={faArrowRight as IconLookup} size="lg" />
+                </button>
+            </div>
+            <div className="propertiesView-input inline" style={{ marginLeft: 10 }}>
+                <p>Auto-move anchors</p>
+                <button
+                    style={{ background: !LinkManager.currentLink?.link_autoMoveAnchors ? '' : '#4476f7', borderRadius: 3 }}
+                    onPointerDown={e => this.toggleLinkProp(e, 'link_autoMoveAnchors')}
+                    onClick={e => e.stopPropagation()}
+                    className="propertiesButton">
+                    <FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
+                </button>
+            </div>
+            <div className="propertiesView-input inline" style={{ marginLeft: 10 }}>
+                <p>Display arrow</p>
+                <button
+                    style={{ background: !LinkManager.currentLink?.link_displayArrow ? '' : '#4476f7', borderRadius: 3 }}
+                    onPointerDown={e => this.toggleLinkProp(e, 'link_displayArrow')}
+                    onClick={e => e.stopPropagation()}
+                    className="propertiesButton">
+                    <FontAwesomeIcon className="fa-icon" icon={faArrowRight as IconLookup} size="lg" />
+                </button>
+            </div>
+        </div>
+        {!hasSelectedAnchor ? null : (
+            <div className="propertiesView-section">
+                <div className="propertiesView-input inline first" style={{ display: 'grid', gridTemplateColumns: '84px calc(100% - 84px)' }}>
+                    <p>Follow by</p>
+                    <select onChange={e => this.changeFollowBehavior(e.currentTarget.value === 'Default' ? undefined : e.currentTarget.value)} value={Cast(this.sourceAnchor?.followLinkLocation, 'string', null)}>
+                        <option value={undefined}>Default</option>
+                        <option value={OpenWhere.addLeft}>Opening in new left pane</option>
+                        <option value={OpenWhere.addRight}>Opening in new right pane</option>
+                        <option value={OpenWhere.replaceLeft}>Replacing left tab</option>
+                        <option value={OpenWhere.replaceRight}>Replacing right tab</option>
+                        <option value={OpenWhere.fullScreen}>Overlaying current tab</option>
+                        <option value={OpenWhere.lightbox}>Opening in lightbox</option>
+                        <option value={OpenWhere.add}>Opening in new tab</option>
+                        <option value={OpenWhere.replace}>Replacing current tab</option>
+                        <option value={OpenWhere.inParent}>Opening in same collection</option>
+                        {LinkManager.currentLink?.linksToAnnotation ? <option value="openExternal">Open in external page</option> : null}
+                    </select>
+                </div>
+                <div className="propertiesView-input inline first" style={{ display: 'grid', gridTemplateColumns: '84px calc(100% - 134px) 50px' }}>
+                    <p>Animation</p>
+                    <select style={{ width: '100%', gridColumn: 2 }} onChange={e => this.changeAnimationBehavior(e.currentTarget.value)} value={StrCast(this.sourceAnchor?.followLinkAnimEffect, 'default')}>
+                        <option value="default">Default</option>
+                        {[PresEffect.None, PresEffect.Zoom, PresEffect.Lightspeed, PresEffect.Fade, PresEffect.Flip, PresEffect.Rotate, PresEffect.Bounce, PresEffect.Roll].map(effect => (
+                            <option key={effect.toString()} value={effect.toString()}>
+                                {effect.toString()}
+                            </option>
+                        ))}
+                    </select>
+                    <div className="effectDirection" style={{ marginLeft: '10px', display: 'grid', width: 40, height: 36, gridColumn: 3, gridTemplateRows: '12px 12px 12px' }}>
+                        {this.animationDirection(PresEffectDirection.Left, 'angle-right', 1, 2, {})}
+                        {this.animationDirection(PresEffectDirection.Right, 'angle-left', 3, 2, {})}
+                        {this.animationDirection(PresEffectDirection.Top, 'angle-down', 2, 1, {})}
+                        {this.animationDirection(PresEffectDirection.Bottom, 'angle-up', 2, 3, {})}
+                        {this.animationDirection(PresEffectDirection.Center, '', 2, 2, { width: 10, height: 10, alignSelf: 'center' })}
+                    </div>
+                </div>
+                {PresBox.inputter(
+                    '0.1',
+                    '0.1',
+                    '10',
+                    NumCast(this.sourceAnchor?.followLinkTransitionTime) / 1000,
+                    true,
+                    (val: string) => PresBox.SetTransitionTime(val, (timeInMS: number) => this.sourceAnchor && (this.sourceAnchor.followLinkTransitionTime = timeInMS)),
+                    indent
+                )}{' '}
+                <div
+                    className={'slider-headers'}
+                    style={{
+                        display: 'grid',
+                        justifyContent: 'space-between',
+                        width: `calc(100% - ${indent * 2}px)`,
+                        marginLeft: indent,
+                        marginRight: indent,
+                        gridTemplateColumns: 'auto auto',
+                        borderTop: 'solid',
+                    }}>
+                    <div className="slider-text">Fast</div>
+                    <div className="slider-text">Slow</div>
+                </div>{' '}
+                <div className="propertiesView-input inline">
+                    <p>Play Target Audio</p>
+                    <button
+                        style={{ background: !this.sourceAnchor?.followLinkAudio ? '' : '#4476f7', borderRadius: 3 }}
+                        onPointerDown={e => this.toggleAnchorProp(e, 'followLinkAudio', this.sourceAnchor)}
+                        onClick={e => e.stopPropagation()}
+                        className="propertiesButton">
+                        <FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
+                    </button>
+                </div>
+                <div className="propertiesView-input inline">
+                    <p>Zoom Text Selections</p>
+                    <button
+                        style={{ background: !this.sourceAnchor?.followLinkZoomText ? '' : '#4476f7', borderRadius: 3 }}
+                        onPointerDown={e => this.toggleAnchorProp(e, 'followLinkZoomText', this.sourceAnchor)}
+                        onClick={e => e.stopPropagation()}
+                        className="propertiesButton">
+                        <FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
+                    </button>
+                </div>
+                <div className="propertiesView-input inline">
+                    <p>Toggle Follow to Outer Context</p>
+                    <button
+                        style={{ background: !this.sourceAnchor?.followLinkToOuterContext ? '' : '#4476f7', borderRadius: 3 }}
+                        onPointerDown={e => this.toggleAnchorProp(e, 'followLinkToOuterContext', this.sourceAnchor)}
+                        onClick={e => e.stopPropagation()}
+                        className="propertiesButton">
+                        <FontAwesomeIcon className="fa-icon" icon={faWindowMaximize as IconLookup} size="lg" />
+                    </button>
+                </div>
+                <div className="propertiesView-input inline">
+                    <p>Toggle Target (Show/Hide)</p>
+                    <button
+                        style={{ background: !this.sourceAnchor?.followLinkToggle ? '' : '#4476f7', borderRadius: 3 }}
+                        onPointerDown={e => this.toggleAnchorProp(e, 'followLinkToggle', this.sourceAnchor)}
+                        onClick={e => e.stopPropagation()}
+                        className="propertiesButton">
+                        <FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
+                    </button>
+                </div>
+                <div className="propertiesView-input inline">
+                    <p>Ease Transitions</p>
+                    <button
+                        style={{ background: this.sourceAnchor?.followLinkEase === 'linear' ? '' : '#4476f7', borderRadius: 3 }}
+                        onPointerDown={e => this.toggleAnchorProp(e, 'followLinkEase', this.sourceAnchor, 'ease', 'linear')}
+                        onClick={e => e.stopPropagation()}
+                        className="propertiesButton">
+                        <FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
+                    </button>
+                </div>
+                <div className="propertiesView-input inline">
+                    <p>Capture Offset to Target</p>
+                    <button
+                        style={{ background: this.sourceAnchor?.followLinkXoffset === undefined ? '' : '#4476f7', borderRadius: 3 }}
+                        onPointerDown={e => {
+                            this.toggleAnchorProp(e, 'followLinkXoffset', this.sourceAnchor, NumCast(this.destinationAnchor?.x) - NumCast(this.sourceAnchor?.x), undefined);
+                            this.toggleAnchorProp(e, 'followLinkYoffset', this.sourceAnchor, NumCast(this.destinationAnchor?.y) - NumCast(this.sourceAnchor?.y), undefined);
+                        }}
+                        onClick={e => e.stopPropagation()}
+                        className="propertiesButton">
+                        <FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
+                    </button>
+                </div>
+                <div className="propertiesView-input inline">
+                    <p>Center Target (no zoom)</p>
+                    <button
+                        style={{ background: this.sourceAnchor?.followLinkZoom ? '' : '#4476f7', borderRadius: 3 }}
+                        onPointerDown={e => this.toggleAnchorProp(e, 'followLinkZoom', this.sourceAnchor)}
+                        onClick={e => e.stopPropagation()}
+                        className="propertiesButton">
+                        <FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
+                    </button>
+                </div>
+                <div className="propertiesView-input inline" style={{ display: 'grid', gridTemplateColumns: '78px calc(100% - 108px) 50px' }}>
+                    <p>Zoom %</p>
+                    <div className="ribbon-property" style={{ display: !targZoom ? 'none' : 'inline-flex' }}>
+                        <input className="presBox-input" style={{ width: '100%' }} readOnly={true} type="number" value={zoom} />
+                        <div className="ribbon-propertyUpDown" style={{ display: 'flex', flexDirection: 'column' }}>
+                            <div className="ribbon-propertyUpDownItem" onClick={undoBatch(() => this.setZoom(String(zoom), 0.1))}>
+                                <FontAwesomeIcon icon={'caret-up'} />
+                            </div>
+                            <div className="ribbon-propertyUpDownItem" onClick={undoBatch(() => this.setZoom(String(zoom), -0.1))}>
+                                <FontAwesomeIcon icon={'caret-down'} />
+                            </div>
+                        </div>
+                    </div>
+                    <button
+                        style={{ background: !targZoom || this.sourceAnchor?.followLinkZoomScale === 0 ? '' : '#4476f7', borderRadius: 3, gridColumn: 3 }}
+                        onPointerDown={e => this.toggleAnchorProp(e, 'followLinkZoom', this.sourceAnchor)}
+                        onClick={e => e.stopPropagation()}
+                        className="propertiesButton">
+                        <FontAwesomeIcon className="fa-icon" icon={faArrowRight as IconLookup} size="lg" />
+                    </button>
+                </div>
+                {!targZoom ? null : PresBox.inputter('0', '1', '100', zoom, true, this.setZoom, 30)}
+                <div
+                    className={'slider-headers'}
+                    style={{
+                        display: !targZoom ? 'none' : 'grid',
+                        justifyContent: 'space-between',
+                        width: `calc(100% - ${indent * 2}px)`,
+                        marginLeft: indent,
+                        marginRight: indent,
+                        gridTemplateColumns: 'auto auto',
+                        borderTop: 'solid',
+                    }}>
+                    <div className="slider-text">0%</div>
+                    <div className="slider-text">100%</div>
+                </div>{' '}
+            </div>
+        )}
+    </>
+    }
 
     /**
      * Handles adding and removing members from the sharing panel
@@ -1567,9 +1721,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
     render() {
         const isNovice = Doc.noviceMode;
-        const zoom = Number((NumCast(this.sourceAnchor?.followLinkZoomScale, 1) * 100).toPrecision(3));
-        const targZoom = this.sourceAnchor?.followLinkZoom;
-        const indent = 30;
         const hasSelectedAnchor = LinkManager.Links(this.sourceAnchor).includes(LinkManager.currentLink!);
         if (!this.selectedDoc && !this.isPres) {
             return (
@@ -1585,9 +1736,10 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     <div
                         className="propertiesView"
                         style={{
+                            background: StrCast(Doc.UserDoc().userBackgroundColor),
+                            color: StrCast(Doc.UserDoc().userColor),
                             width: this.props.width,
                             minWidth: this.props.width,
-                            //overflowY: this.scrolling ? "scroll" : "visible"
                         }}>
                         <div className = "propertiesView-propAndInfoGrouping">
                             <div className="propertiesView-title" style={{ width: this.props.width }}>
@@ -1600,238 +1752,18 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
                         
                         <div className="propertiesView-name">{this.editableTitle}</div>
-
                         <div className = "propertiesView-type"> {this.currentType} </div>
-                        
-
+                        <div className="propertiesView-type">{this.type}</div>
                         {this.contextsSubMenu}
-
                         {this.linksSubMenu}
                         {!this.selectedDoc || !LinkManager.currentLink || (!hasSelectedAnchor && this.selectedDoc !== LinkManager.currentLink) ? null : (
-                            <>
-                                <div className="propertiesView-section" style={{ background: 'darkgray' }}>
-                                    <div className="propertiesView-input first" style={{ display: 'grid', gridTemplateColumns: '84px auto' }}>
-                                        <p>Relationship</p>
-                                        {this.editRelationship}
-                                    </div>
-                                    <div className="propertiesView-input" style={{ display: 'grid', gridTemplateColumns: '84px auto' }}>
-                                        <p>Description</p>
-                                        {this.editDescription}
-                                    </div>
-                                    <div className="propertiesView-input inline">
-                                        <p>Show link</p>
-                                        <button
-                                            style={{ background: !LinkManager.currentLink?.link_displayLine ? '' : '#4476f7', borderRadius: 3 }}
-                                            onPointerDown={e => this.toggleLinkProp(e, 'link_displayLine')}
-                                            onClick={e => e.stopPropagation()}
-                                            className="propertiesButton">
-                                            <FontAwesomeIcon className="fa-icon" icon={faArrowRight as IconLookup} size="lg" />
-                                        </button>
-                                    </div>
-                                    <div className="propertiesView-input inline" style={{ marginLeft: 10 }}>
-                                        <p>Auto-move anchors</p>
-                                        <button
-                                            style={{ background: !LinkManager.currentLink?.link_autoMoveAnchors ? '' : '#4476f7', borderRadius: 3 }}
-                                            onPointerDown={e => this.toggleLinkProp(e, 'link_autoMoveAnchors')}
-                                            onClick={e => e.stopPropagation()}
-                                            className="propertiesButton">
-                                            <FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
-                                        </button>
-                                    </div>
-                                    <div className="propertiesView-input inline" style={{ marginLeft: 10 }}>
-                                        <p>Display arrow</p>
-                                        <button
-                                            style={{ background: !LinkManager.currentLink?.link_displayArrow ? '' : '#4476f7', borderRadius: 3 }}
-                                            onPointerDown={e => this.toggleLinkProp(e, 'link_displayArrow')}
-                                            onClick={e => e.stopPropagation()}
-                                            className="propertiesButton">
-                                            <FontAwesomeIcon className="fa-icon" icon={faArrowRight as IconLookup} size="lg" />
-                                        </button>
-                                    </div>
-                                </div>
-                                {!hasSelectedAnchor ? null : (
-                                    <div className="propertiesView-section">
-                                        <div className="propertiesView-input inline first" style={{ display: 'grid', gridTemplateColumns: '84px calc(100% - 84px)' }}>
-                                            <p>Follow by</p>
-                                            <select onChange={e => this.changeFollowBehavior(e.currentTarget.value === 'Default' ? undefined : e.currentTarget.value)} value={Cast(this.sourceAnchor?.followLinkLocation, 'string', null)}>
-                                                <option value={undefined}>Default</option>
-                                                <option value={OpenWhere.addLeft}>Opening in new left pane</option>
-                                                <option value={OpenWhere.addRight}>Opening in new right pane</option>
-                                                <option value={OpenWhere.replaceLeft}>Replacing left tab</option>
-                                                <option value={OpenWhere.replaceRight}>Replacing right tab</option>
-                                                <option value={OpenWhere.fullScreen}>Overlaying current tab</option>
-                                                <option value={OpenWhere.lightbox}>Opening in lightbox</option>
-                                                <option value={OpenWhere.add}>Opening in new tab</option>
-                                                <option value={OpenWhere.replace}>Replacing current tab</option>
-                                                <option value={OpenWhere.inParent}>Opening in same collection</option>
-                                                {LinkManager.currentLink?.linksToAnnotation ? <option value="openExternal">Open in external page</option> : null}
-                                            </select>
-                                        </div>
-                                        <div className="propertiesView-input inline first" style={{ display: 'grid', gridTemplateColumns: '84px calc(100% - 134px) 50px' }}>
-                                            <p>Animation</p>
-                                            <select style={{ width: '100%', gridColumn: 2 }} onChange={e => this.changeAnimationBehavior(e.currentTarget.value)} value={StrCast(this.sourceAnchor?.followLinkAnimEffect, 'default')}>
-                                                <option value="default">Default</option>
-                                                {[PresEffect.None, PresEffect.Zoom, PresEffect.Lightspeed, PresEffect.Fade, PresEffect.Flip, PresEffect.Rotate, PresEffect.Bounce, PresEffect.Roll].map(effect => (
-                                                    <option key={effect.toString()} value={effect.toString()}>
-                                                        {effect.toString()}
-                                                    </option>
-                                                ))}
-                                            </select>
-                                            <div className="effectDirection" style={{ marginLeft: '10px', display: 'grid', width: 40, height: 36, gridColumn: 3, gridTemplateRows: '12px 12px 12px' }}>
-                                                {this.animationDirection(PresEffectDirection.Left, 'angle-right', 1, 2, {})}
-                                                {this.animationDirection(PresEffectDirection.Right, 'angle-left', 3, 2, {})}
-                                                {this.animationDirection(PresEffectDirection.Top, 'angle-down', 2, 1, {})}
-                                                {this.animationDirection(PresEffectDirection.Bottom, 'angle-up', 2, 3, {})}
-                                                {this.animationDirection(PresEffectDirection.Center, '', 2, 2, { width: 10, height: 10, alignSelf: 'center' })}
-                                            </div>
-                                        </div>
-                                        {PresBox.inputter(
-                                            '0.1',
-                                            '0.1',
-                                            '10',
-                                            NumCast(this.sourceAnchor?.followLinkTransitionTime) / 1000,
-                                            true,
-                                            (val: string) => PresBox.SetTransitionTime(val, (timeInMS: number) => this.sourceAnchor && (this.sourceAnchor.followLinkTransitionTime = timeInMS)),
-                                            indent
-                                        )}{' '}
-                                        <div
-                                            className={'slider-headers'}
-                                            style={{
-                                                display: 'grid',
-                                                justifyContent: 'space-between',
-                                                width: `calc(100% - ${indent * 2}px)`,
-                                                marginLeft: indent,
-                                                marginRight: indent,
-                                                gridTemplateColumns: 'auto auto',
-                                                borderTop: 'solid',
-                                            }}>
-                                            <div className="slider-text">Fast</div>
-                                            <div className="slider-text">Slow</div>
-                                        </div>{' '}
-                                        <div className="propertiesView-input inline">
-                                            <p>Play Target Audio</p>
-                                            <button
-                                                style={{ background: !this.sourceAnchor?.followLinkAudio ? '' : '#4476f7', borderRadius: 3 }}
-                                                onPointerDown={e => this.toggleAnchorProp(e, 'followLinkAudio', this.sourceAnchor)}
-                                                onClick={e => e.stopPropagation()}
-                                                className="propertiesButton">
-                                                <FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
-                                            </button>
-                                        </div>
-                                        <div className="propertiesView-input inline">
-                                            <p>Zoom Text Selections</p>
-                                            <button
-                                                style={{ background: !this.sourceAnchor?.followLinkZoomText ? '' : '#4476f7', borderRadius: 3 }}
-                                                onPointerDown={e => this.toggleAnchorProp(e, 'followLinkZoomText', this.sourceAnchor)}
-                                                onClick={e => e.stopPropagation()}
-                                                className="propertiesButton">
-                                                <FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
-                                            </button>
-                                        </div>
-                                        <div className="propertiesView-input inline">
-                                            <p>Toggle Follow to Outer Context</p>
-                                            <button
-                                                style={{ background: !this.sourceAnchor?.followLinkToOuterContext ? '' : '#4476f7', borderRadius: 3 }}
-                                                onPointerDown={e => this.toggleAnchorProp(e, 'followLinkToOuterContext', this.sourceAnchor)}
-                                                onClick={e => e.stopPropagation()}
-                                                className="propertiesButton">
-                                                <FontAwesomeIcon className="fa-icon" icon={faWindowMaximize as IconLookup} size="lg" />
-                                            </button>
-                                        </div>
-                                        <div className="propertiesView-input inline">
-                                            <p>Toggle Target (Show/Hide)</p>
-                                            <button
-                                                style={{ background: !this.sourceAnchor?.followLinkToggle ? '' : '#4476f7', borderRadius: 3 }}
-                                                onPointerDown={e => this.toggleAnchorProp(e, 'followLinkToggle', this.sourceAnchor)}
-                                                onClick={e => e.stopPropagation()}
-                                                className="propertiesButton">
-                                                <FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
-                                            </button>
-                                        </div>
-                                        <div className="propertiesView-input inline">
-                                            <p>Ease Transitions</p>
-                                            <button
-                                                style={{ background: this.sourceAnchor?.followLinkEase === 'linear' ? '' : '#4476f7', borderRadius: 3 }}
-                                                onPointerDown={e => this.toggleAnchorProp(e, 'followLinkEase', this.sourceAnchor, 'ease', 'linear')}
-                                                onClick={e => e.stopPropagation()}
-                                                className="propertiesButton">
-                                                <FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
-                                            </button>
-                                        </div>
-                                        <div className="propertiesView-input inline">
-                                            <p>Capture Offset to Target</p>
-                                            <button
-                                                style={{ background: this.sourceAnchor?.followLinkXoffset === undefined ? '' : '#4476f7', borderRadius: 3 }}
-                                                onPointerDown={e => {
-                                                    this.toggleAnchorProp(e, 'followLinkXoffset', this.sourceAnchor, NumCast(this.destinationAnchor?.x) - NumCast(this.sourceAnchor?.x), undefined);
-                                                    this.toggleAnchorProp(e, 'followLinkYoffset', this.sourceAnchor, NumCast(this.destinationAnchor?.y) - NumCast(this.sourceAnchor?.y), undefined);
-                                                }}
-                                                onClick={e => e.stopPropagation()}
-                                                className="propertiesButton">
-                                                <FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
-                                            </button>
-                                        </div>
-                                        <div className="propertiesView-input inline">
-                                            <p>Center Target (no zoom)</p>
-                                            <button
-                                                style={{ background: this.sourceAnchor?.followLinkZoom ? '' : '#4476f7', borderRadius: 3 }}
-                                                onPointerDown={e => this.toggleAnchorProp(e, 'followLinkZoom', this.sourceAnchor)}
-                                                onClick={e => e.stopPropagation()}
-                                                className="propertiesButton">
-                                                <FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
-                                            </button>
-                                        </div>
-                                        <div className="propertiesView-input inline" style={{ display: 'grid', gridTemplateColumns: '78px calc(100% - 108px) 50px' }}>
-                                            <p>Zoom %</p>
-                                            <div className="ribbon-property" style={{ display: !targZoom ? 'none' : 'inline-flex' }}>
-                                                <input className="presBox-input" style={{ width: '100%' }} readOnly={true} type="number" value={zoom} />
-                                                <div className="ribbon-propertyUpDown" style={{ display: 'flex', flexDirection: 'column' }}>
-                                                    <div className="ribbon-propertyUpDownItem" onClick={undoBatch(() => this.setZoom(String(zoom), 0.1))}>
-                                                        <FontAwesomeIcon icon={'caret-up'} />
-                                                    </div>
-                                                    <div className="ribbon-propertyUpDownItem" onClick={undoBatch(() => this.setZoom(String(zoom), -0.1))}>
-                                                        <FontAwesomeIcon icon={'caret-down'} />
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <button
-                                                style={{ background: !targZoom || this.sourceAnchor?.followLinkZoomScale === 0 ? '' : '#4476f7', borderRadius: 3, gridColumn: 3 }}
-                                                onPointerDown={e => this.toggleAnchorProp(e, 'followLinkZoom', this.sourceAnchor)}
-                                                onClick={e => e.stopPropagation()}
-                                                className="propertiesButton">
-                                                <FontAwesomeIcon className="fa-icon" icon={faArrowRight as IconLookup} size="lg" />
-                                            </button>
-                                        </div>
-                                        {!targZoom ? null : PresBox.inputter('0', '1', '100', zoom, true, this.setZoom, 30)}
-                                        <div
-                                            className={'slider-headers'}
-                                            style={{
-                                                display: !targZoom ? 'none' : 'grid',
-                                                justifyContent: 'space-between',
-                                                width: `calc(100% - ${indent * 2}px)`,
-                                                marginLeft: indent,
-                                                marginRight: indent,
-                                                gridTemplateColumns: 'auto auto',
-                                                borderTop: 'solid',
-                                            }}>
-                                            <div className="slider-text">0%</div>
-                                            <div className="slider-text">100%</div>
-                                        </div>{' '}
-                                    </div>
-                                )}
-                            </>
+                            this.linkProperties
                         )}
-
                         {this.inkSubMenu}
-
                         {this.optionsSubMenu}
-
                         {this.fieldsSubMenu}
-
                         {isNovice ? null : this.sharingSubMenu}
-
                         {isNovice ? null : this.filtersSubMenu}
-
                         {isNovice ? null : this.layoutSubMenu}
                     </div>
                 );
@@ -1843,7 +1775,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     : PresBox.targetRenderedDoc(PresBox.Instance.activeItem)?.type;
                 return (
                     <div className="propertiesView" style={{ width: this.props.width }}>
-                        <div className="propertiesView-title" style={{ width: this.props.width }}>
+                        <div className="propertiesView-sectionTitle" style={{ width: this.props.width }}>
                             Presentation
                         </div>
                         <div className="propertiesView-name" style={{ borderBottom: 0 }}>
@@ -1859,7 +1791,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                                 <div className="propertiesView-presTrails-title" onPointerDown={action(() => (this.openPresTransitions = !this.openPresTransitions))} style={{ backgroundColor: this.openPresTransitions ? 'black' : '' }}>
                                     &nbsp; <FontAwesomeIcon style={{ alignSelf: 'center' }} icon={'rocket'} /> &nbsp; Transitions
                                     <div className="propertiesView-presTrails-title-icon">
-                                        <FontAwesomeIcon icon={this.openPresTransitions ? 'caret-down' : 'caret-right'} size="lg" color="white" />
+                                        <FontAwesomeIcon icon={this.openPresTransitions ? 'caret-down' : 'caret-right'} size="lg"  />
                                     </div>
                                 </div>
                                 {this.openPresTransitions ? <div className="propertiesView-presTrails-content">{PresBox.Instance.transitionDropdown}</div> : null}
@@ -1873,7 +1805,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                                     style={{ backgroundColor: this.openPresTransitions ? 'black' : '' }}>
                                     &nbsp; <FontAwesomeIcon style={{ alignSelf: 'center' }} icon={'rocket'} /> &nbsp; Visibilty
                                     <div className="propertiesView-presTrails-title-icon">
-                                        <FontAwesomeIcon icon={this.openPresVisibilityAndDuration ? 'caret-down' : 'caret-right'} size="lg" color="white" />
+                                        <FontAwesomeIcon icon={this.openPresVisibilityAndDuration ? 'caret-down' : 'caret-right'} size="lg"  />
                                     </div>
                                 </div>
                                 {this.openPresVisibilityAndDuration ? <div className="propertiesView-presTrails-content">{PresBox.Instance.visibiltyDurationDropdown}</div> : null}
@@ -1884,7 +1816,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                                 <div className="propertiesView-presTrails-title" onPointerDown={action(() => (this.openPresProgressivize = !this.openPresProgressivize))} style={{ backgroundColor: this.openPresTransitions ? 'black' : '' }}>
                                     &nbsp; <FontAwesomeIcon style={{ alignSelf: 'center' }} icon={'rocket'} /> &nbsp; Progressivize
                                     <div className="propertiesView-presTrails-title-icon">
-                                        <FontAwesomeIcon icon={this.openPresProgressivize ? 'caret-down' : 'caret-right'} size="lg" color="white" />
+                                        <FontAwesomeIcon icon={this.openPresProgressivize ? 'caret-down' : 'caret-right'} size="lg"  />
                                     </div>
                                 </div>
                                 {this.openPresProgressivize ? <div className="propertiesView-presTrails-content">{PresBox.Instance.progressivizeDropdown}</div> : null}
@@ -1895,7 +1827,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                                 <div className="propertiesView-presTrails-title" onPointerDown={action(() => (this.openSlideOptions = !this.openSlideOptions))} style={{ backgroundColor: this.openSlideOptions ? 'black' : '' }}>
                                     &nbsp; <FontAwesomeIcon style={{ alignSelf: 'center' }} icon={type === DocumentType.AUDIO ? 'file-audio' : 'file-video'} /> &nbsp; {type === DocumentType.AUDIO ? 'Audio Options' : 'Video Options'}
                                     <div className="propertiesView-presTrails-title-icon">
-                                        <FontAwesomeIcon icon={this.openSlideOptions ? 'caret-down' : 'caret-right'} size="lg" color="white" />
+                                        <FontAwesomeIcon icon={this.openSlideOptions ? 'caret-down' : 'caret-right'} size="lg"  />
                                     </div>
                                 </div>
                                 {this.openSlideOptions ? <div className="propertiesView-presTrails-content">{PresBox.Instance.mediaOptionsDropdown}</div> : null}
diff --git a/src/client/views/ScriptingRepl.tsx b/src/client/views/ScriptingRepl.tsx
index 5dfe10def..2bc2d5e6b 100644
--- a/src/client/views/ScriptingRepl.tsx
+++ b/src/client/views/ScriptingRepl.tsx
@@ -5,6 +5,7 @@ import * as React from 'react';
 import { DocumentManager } from '../util/DocumentManager';
 import { CompileScript, Transformer, ts } from '../util/Scripting';
 import { ScriptingGlobals } from '../util/ScriptingGlobals';
+import { undoable } from '../util/UndoManager';
 import { DocumentIconContainer } from './nodes/DocumentIcon';
 import { OverlayView } from './OverlayView';
 import './ScriptingRepl.scss';
@@ -161,7 +162,7 @@ export class ScriptingRepl extends React.Component {
                     this.commands.push({ command: this.commandString, result: script.errors });
                     return;
                 }
-                const result = script.run({ args: this.args }, e => this.commands.push({ command: this.commandString, result: e.toString() }));
+                const result = undoable(() => script.run({ args: this.args }, e => this.commands.push({ command: this.commandString, result: e.toString() })), 'run:' + this.commandString)();
                 if (result.success) {
                     this.commands.push({ command: this.commandString, result: result.result });
                     this.commandsHistory.push(this.commandString);
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 9ba0e5e26..a030c7052 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -116,6 +116,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
             allSorts[TreeSort.None] = { color: 'darkgray', label: '\u00A0\u00A0\u00A0' };
             return allSorts;
         case StyleProp.Highlighting:
+            if (doc && (Doc.IsSystem(doc) || doc.type === DocumentType.FONTICON)) return undefined;            
             if (doc && !doc.layout_disableBrushing && !props?.disableBrushing) {
                 const selected = SelectionManager.Views().some(dv => dv.rootDoc === doc);
                 const highlightIndex = Doc.isBrushedHighlightedDegree(doc) || (selected ? Doc.DocBrushStatus.selfBrushed : 0);
@@ -159,7 +160,9 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
                 ''
             );
         case StyleProp.Color:
-            if (MainView.Instance.LastButton === doc) return Colors.DARK_GRAY;
+            if (MainView.Instance.LastButton === doc) return Doc.UserDoc().userBackgroundColor;
+            if (Doc.IsSystem(doc!)) return StrCast(Doc.UserDoc().userColor)
+            if (doc?.type === DocumentType.FONTICON) return Doc.UserDoc().userColor;
             const docColor: Opt<string> = StrCast(doc?.[fieldKey + 'color'], StrCast(doc?._color));
             if (docColor) return docColor;
             const docView = props?.DocumentView?.();
@@ -195,7 +198,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
                 ? 15
                 : 0;
         case StyleProp.BackgroundColor: {
-            if (MainView.Instance.LastButton === doc) return Colors.LIGHT_GRAY;
+            if (MainView.Instance.LastButton === doc) return StrCast(Doc.UserDoc().userColor); // hack to indicate active menu panel item
             let docColor: Opt<string> = StrCast(doc?.[fieldKey + '_backgroundColor'], StrCast(doc?._backgroundColor, isCaption ? 'rgba(0,0,0,0.4)' : ''));
             // prettier-ignore
             switch (doc?.type) {
@@ -220,9 +223,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
                 case DocumentType.COL:
                     if (StrCast(Doc.LayoutField(doc)).includes(SliderBox.name)) break;
                     docColor = docColor || (Doc.IsSystem(doc)
-                            ? darkScheme()
-                                ? Colors.DARK_GRAY
-                                : Colors.LIGHT_GRAY // system docs (seen in treeView) get a grayish background
+                            ? StrCast(Doc.UserDoc().userBackgroundColor)
                             : doc.annotationOn
                             ? '#00000010' // faint interior for collections on PDFs, images, etc
                             : doc?._isGroup
@@ -280,7 +281,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
                 if (props?.docViewPath().lastElement()?.rootDoc?._type_collection === CollectionViewType.Freeform) {
                     return doc?.pointerEvents !== 'none' ? null : (
                         <div className="styleProvider-lock" onClick={() => toggleLockedPosition(doc)}>
-                            <FontAwesomeIcon icon={'lock'} style={{ color: 'red' }} size="lg" />
+                            <FontAwesomeIcon icon='lock' style={{ color: 'red' }} size="lg" />
                         </div>
                     );
                 }
diff --git a/src/client/views/UndoStack.scss b/src/client/views/UndoStack.scss
index ab21e6d7e..192b99a12 100644
--- a/src/client/views/UndoStack.scss
+++ b/src/client/views/UndoStack.scss
@@ -2,9 +2,10 @@
     height: 100%;
     display: flex;
     flex-direction: column;
+    justify-content: center;
+    align-items: center;
     position: relative;
     pointer-events: all;
-    padding-left: 4px;
 }
 
 .undoStack-resultContainer {
@@ -21,9 +22,11 @@
 }
 
 .undoStack-commandsContainer {
-    background-color: whitesmoke;
     flex: 1 1 auto;
     overflow-y: scroll;
-    height: 30px;
+    height: fit-content;
+    width: 200px;
     border-radius: 5px;
+    padding: 5px;
+    max-height: 200px;
 }
diff --git a/src/client/views/UndoStack.tsx b/src/client/views/UndoStack.tsx
index f5af09e5b..aaca7110e 100644
--- a/src/client/views/UndoStack.tsx
+++ b/src/client/views/UndoStack.tsx
@@ -3,6 +3,9 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import { UndoManager } from '../util/UndoManager';
 import './UndoStack.scss';
+import { StrCast } from '../../fields/Types';
+import { Doc } from '../../fields/Doc';
+import { Popup, Type } from 'browndash-components';
 
 interface UndoStackProps {
     width?: number;
@@ -15,32 +18,35 @@ export class UndoStack extends React.Component<UndoStackProps> {
     @observable static Expand: boolean;
     render() {
         return this.props.inline && UndoStack.HideInline ? null : (
-            <div
-                className="undoStack-outerContainer"
-                style={{ width: this.props.width, height: this.props.height ? (UndoStack.Expand ? 4 : 1) * this.props.height : undefined, top: UndoStack.Expand && this.props.height ? -this.props.height * 3 : undefined }}
-                onClick={action(e => (UndoStack.Expand = !UndoStack.Expand))}
-                onDoubleClick={action(e => (UndoStack.Expand = UndoStack.HideInline = false))}>
-                <div className="undoStack-commandsContainer" ref={r => r?.scroll({ behavior: 'auto', top: r?.scrollHeight + 20 })} style={{ background: UndoManager.batchCounter.get() ? 'yellow' : undefined }}>
-                    <div className="undoStack-resultContainer" key={0}>
-                        <div className="undoStack-commandString" style={{ fontWeight: 'bold', textAlign: 'center' }}>
-                            Undo/Redo Stack
-                        </div>
-                    </div>
-                    {UndoManager.undoStackNames.map((name, i) => (
-                        <div className="undoStack-resultContainer" key={i}>
-                            <div className="undoStack-commandString">{name.replace(/[^\.]*\./, '')}</div>
-                        </div>
-                    ))}
-                    {Array.from(UndoManager.redoStackNames)
-                        .reverse()
-                        .map((name, i) => (
+            <div className="undoStack-outerContainer">
+                <Popup 
+                    text={'Undo/Redo Stack'}
+                    color={StrCast(Doc.UserDoc().userVariantColor)}
+                    placement={`top-start`}
+                    type={Type.TERT}
+                    popup={
+                    <div className="undoStack-commandsContainer" ref={r => r?.scroll({ behavior: 'auto', top: r?.scrollHeight + 20 })} 
+                        style={{ 
+                            background: UndoManager.batchCounter.get() ? 'yellow' : StrCast(Doc.UserDoc().userBackgroundColor),
+                            color: StrCast(Doc.UserDoc().userColor)
+                        }}>
+                        {UndoManager.undoStackNames.map((name, i) => (
                             <div className="undoStack-resultContainer" key={i}>
-                                <div className="undoStack-commandString" style={{ fontWeight: 'bold', color: 'red' }}>
-                                    {name.replace(/[^\.]*\./, '')}
-                                </div>
+                                <div className="undoStack-commandString">{name.replace(/[^\.]*\./, '')}</div>
                             </div>
                         ))}
-                </div>
+                        {Array.from(UndoManager.redoStackNames)
+                            .reverse()
+                            .map((name, i) => (
+                                <div className="undoStack-resultContainer" key={i}>
+                                    <div className="undoStack-commandString" style={{ fontWeight: 'bold', color: 'red' }}>
+                                        {name.replace(/[^\.]*\./, '')}
+                                    </div>
+                                </div>
+                        ))}
+                    </div>    
+                    }
+                />
             </div>
         );
     }
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 2ed55b3ca..8d1b46ebb 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -8,7 +8,7 @@ import { InkTool } from '../../../fields/InkField';
 import { List } from '../../../fields/List';
 import { ImageCast, NumCast, StrCast } from '../../../fields/Types';
 import { ImageField } from '../../../fields/URLField';
-import { inheritParentAcls } from '../../../fields/util';
+import { GetEffectiveAcl, inheritParentAcls } from '../../../fields/util';
 import { emptyFunction, incrementTitleCopy } from '../../../Utils';
 import { DocServer } from '../../DocServer';
 import { Docs } from '../../documents/Documents';
@@ -28,8 +28,9 @@ import './CollectionDockingView.scss';
 import { CollectionFreeFormView } from './collectionFreeForm';
 import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView';
 import { TabDocView } from './TabDocView';
-import React = require('react');
 import { DocumentManager } from '../../util/DocumentManager';
+import { AclAdmin, AclEdit } from '../../../fields/DocSymbols';
+import React = require('react');
 const _global = (window /* browser */ || global) /* node */ as any;
 
 @observer
@@ -385,8 +386,13 @@ export class CollectionDockingView extends CollectionSubView() {
                   .map(f => f as Doc);
         const changesMade = this.props.Document.dockingConfig !== json;
         if (changesMade) {
-            this.props.Document.dockingConfig = json;
-            this.props.Document.data = new List<Doc>(docs);
+            if (![AclAdmin, AclEdit].includes(GetEffectiveAcl(this.dataDoc))) {
+                this.layoutDoc.dockingConfig = json;
+                this.layoutDoc.data = new List<Doc>(docs);
+            } else {
+                Doc.SetInPlace(this.rootDoc, 'dockingConfig', json, true);
+                Doc.SetInPlace(this.rootDoc, 'data', new List<Doc>(docs), true);
+            }
         }
         this._flush?.end();
         this._flush = undefined;
@@ -460,7 +466,7 @@ export class CollectionDockingView extends CollectionSubView() {
             const newtabdocs = origtabdocs.map(origtabdoc => Doc.MakeEmbedding(origtabdoc));
             if (newtabdocs.length) {
                 Doc.GetProto(newtab).data = new List<Doc>(newtabdocs);
-                newtabdocs.forEach(ntab => (ntab.embedContainer = newtab));
+                newtabdocs.forEach(ntab => Doc.SetContainer(ntab, newtab));
             }
             json = json.replace(origtab[Id], newtab[Id]);
             return newtab;
@@ -511,7 +517,7 @@ export class CollectionDockingView extends CollectionSubView() {
                     _layout_fitWidth: true,
                     title: `Untitled Tab ${NumCast(dashboard['pane-count'])}`,
                 });
-                this.props.Document.isShared && inheritParentAcls(this.props.Document, docToAdd);
+                inheritParentAcls(this.rootDoc, docToAdd, false);
                 CollectionDockingView.AddSplit(docToAdd, OpenWhereMod.none, stack);
             }
         });
@@ -554,7 +560,7 @@ export class CollectionDockingView extends CollectionSubView() {
                             _freeform_backgroundGrid: true,
                             title: `Untitled Tab ${NumCast(dashboard['pane-count'])}`,
                         });
-                        this.props.Document.isShared && inheritParentAcls(this.props.Document, docToAdd);
+                        inheritParentAcls(this.dataDoc, docToAdd, false);
                         CollectionDockingView.AddSplit(docToAdd, OpenWhereMod.none, stack);
                     }
                 })
diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss
index c35f088a6..6eeccc94e 100644
--- a/src/client/views/collections/CollectionMenu.scss
+++ b/src/client/views/collections/CollectionMenu.scss
@@ -8,652 +8,15 @@
     background-color: $dark-gray;
     height: 35px;
     border-bottom: $standard-border;
-    padding-right: 5px;
+    padding: 0 10px;
     align-items: center;
+    overflow-x: scroll;
+    &::-webkit-scrollbar {
+        display: none;
+    }
 
-    .collectionMenu-hardCodedButton {
-        cursor: pointer;
-        color: $white;
-        width: 25px;
-        height: 25px;
-        padding: 5;
-        text-align: center;
+    .hardCodedButtons {
         display: flex;
-        justify-content: center;
-        align-items: center;
-        position: relative;
-        transition: 0.2s;
-        border-radius: 3px;
-
-        &:hover {
-            background-color: rgba(0, 0, 0, 0.2);
-        }
+        flex-direction: row;
     }
-}
-
-// .collectionMenu-cont {
-//     position: relative;
-//     display: inline-flex;
-//     width: 100%;
-//     opacity: 0.9;
-//     z-index: 901;
-//     transition: top .5s;
-//     background: $dark-gray;
-//     color: $white;
-//     transform-origin: top left;
-//     top: 0;
-//     width: 100%;
-
-//     .recordButtonOutline {
-//         border-radius: 100%;
-//         width: 18px;
-//         height: 18px;
-//         border: solid 1px $white;
-//         display: flex;
-//         align-items: center;
-//         justify-content: center;
-//     }
-
-//     .recordButtonInner {
-//         border-radius: 100%;
-//         width: 70%;
-//         height: 70%;
-//         background: $white;
-//     }
-
-//     .collectionMenu {
-//         display: flex;
-//         height: 100%;
-//         overflow: visible;
-//         z-index: 901;
-//         border: unset;
-
-//         .collectionMenu-divider {
-//             height: 100%;
-//             margin-left: 3px;
-//             margin-right: 3px;
-//             width: 2px;
-//             background-color: $medium-gray;
-//         }
-
-//         .collectionViewBaseChrome {
-//             display: flex;
-//             align-items: center;
-
-//             .collectionViewBaseChrome-viewPicker {
-//                 font-size: $small-text;
-//                 outline-color: $black;
-//                 color: $white;
-//                 border: none;
-//                 background: $dark-gray;               
-//             }
-
-//             .collectionViewBaseChrome-viewPicker:focus {
-//                 outline: none;
-//                 border: none;
-//             }
-
-//             .collectionViewBaseChrome-viewPicker:active {
-//                 outline-color: $black;
-//             }
-
-//             .collectionViewBaseChrome-button {
-//                 font-size: $small-text;
-//                 text-transform: uppercase;
-//                 letter-spacing: 2px;
-//                 background: $white;
-//                 color: $pink;
-//                 outline-color: $black;
-//                 border: none;
-//                 padding: 12px 10px 11px 10px;
-//                 margin-left: 10px;
-//             }
-
-//             .collectionViewBaseChrome-cmdPicker {
-//                 margin-left: 3px;
-//                 margin-right: 0px;
-//                 font-size: $small-text;
-//                 text-transform: capitalize;
-//                 color: $white;
-//                 border: none;
-//                 background: $dark-gray;     
-//             }
-
-//             .collectionViewBaseChrome-cmdPicker:focus {
-//                 border: none;
-//                 outline: none;
-//             }
-
-//             .commandEntry-outerDiv {
-//                 pointer-events: all;
-//                 background-color: transparent;
-//                 display: flex;
-//                 flex-direction: row;
-//                 align-items: center;
-//                 justify-content: center;
-//                 height: 100%;
-//                 overflow: hidden;
-
-//                 .commandEntry-drop {
-//                     color: $white;
-//                     width: 30px;
-//                     margin-top: auto;
-//                     margin-bottom: auto;
-//                 }
-//             }
-
-//             .commandEntry-outerDiv:hover{
-//                 background-color: $drop-shadow;
-
-//                 .collectionViewBaseChrome-viewPicker,
-//                 .collectionViewBaseChrome-cmdPicker{
-//                     background: $dark-gray;
-//                 }
-//             }
-
-//             .collectionViewBaseChrome-collapse {
-//                 transition: all .5s, opacity 0.3s;
-//                 position: absolute;
-//                 width: 30px;
-//                 transform-origin: top left;
-//                 pointer-events: all;
-//                 // margin-top: 10px;
-//             }
-
-//             @media only screen and (max-device-width: 480px) {
-//                 .collectionViewBaseChrome-collapse {
-//                     display: none;
-//                 }
-//             }
-
-//             .collectionViewBaseChrome-template,
-//             .collectionViewBaseChrome-viewModes {
-//                 align-items: center;
-//                 height: 100%;
-//                 display: flex;
-//                 background: transparent;
-//                 color: $medium-gray;
-//                 justify-content: center;
-//             }
-
-//             .collectionViewBaseChrome-viewSpecs {
-//                 margin-left: 5px;
-//                 display: grid;
-//                 border: none;
-//                 border-right: solid $medium-gray 1px;
-
-//                 .collectionViewBaseChrome-filterIcon {
-//                     position: relative;
-//                     display: flex;
-//                     margin: auto;
-//                     background: $dark-gray;
-//                     color: $white;
-//                     width: 30px;
-//                     height: 30px;
-//                     align-items: center;
-//                     justify-content: center;
-//                     border: none;
-//                     border-right: solid $medium-gray 1px;
-//                 }
-
-//                 .collectionViewBaseChrome-viewSpecsInput {
-//                     padding: 12px 10px 11px 10px;
-//                     border: 0px;
-//                     color: $medium-gray;
-//                     text-align: center;
-//                     letter-spacing: 2px;
-//                     outline-color: $black;
-//                     font-size: $small-text;
-//                     background: $white;
-//                     height: 100%;
-//                     width: 75px;
-//                 }
-
-//                 .collectionViewBaseChrome-viewSpecsMenu {
-//                     overflow: hidden;
-//                     transition: height .5s, display .5s;
-//                     position: absolute;
-//                     top: 60px;
-//                     z-index: 100;
-//                     display: flex;
-//                     flex-direction: column;
-//                     background: $white;
-//                     box-shadow: $medium-gray 2px 2px 4px;
-
-//                     .qs-datepicker {
-//                         left: unset;
-//                         right: 0;
-//                     }
-
-//                     .collectionViewBaseChrome-viewSpecsMenu-row {
-//                         display: grid;
-//                         grid-template-columns: 150px 200px 150px;
-//                         margin-top: 10px;
-//                         margin-right: 10px;
-
-//                         .collectionViewBaseChrome-viewSpecsMenu-rowLeft,
-//                         .collectionViewBaseChrome-viewSpecsMenu-rowMiddle,
-//                         .collectionViewBaseChrome-viewSpecsMenu-rowRight {
-//                             font-size: $small-text;
-//                             letter-spacing: 2px;
-//                             color: $medium-gray;
-//                             margin-left: 10px;
-//                             padding: 5px;
-//                             border: none;
-//                             outline-color: $black;
-//                         }
-//                     }
-
-//                     .collectionViewBaseChrome-viewSpecsMenu-lastRow {
-//                         display: grid;
-//                         grid-template-columns: 1fr 1fr 1fr;
-//                         grid-gap: 10px;
-//                         margin: 10px;
-//                     }
-//                 }
-//             }
-//         }
-
-//         .collectionStackingViewChrome-cont,
-//         .collectionTreeViewChrome-cont,
-//         .collection3DCarouselViewChrome-cont {
-//             display: flex;
-//             justify-content: space-between;
-//         }
-
-//         .collectionGridViewChrome-cont {
-//             display: flex;
-//             margin-left: 10;
-
-//             .collectionGridViewChrome-viewPicker {
-//                 font-size: $small-text;
-//                 //text-transform: uppercase;
-//                 //letter-spacing: 2px;
-//                 background: $dark-gray;
-//                 color: $white;
-//                 outline-color: $black;
-//                 color: $white;
-//                 border: none;
-//                 border-right: solid $medium-gray 1px;
-//             }
-
-//             .collectionGridViewChrome-viewPicker:active {
-//                 outline-color: $black;
-//             }
-
-//             .grid-control {
-//                 align-self: center;
-//                 display: flex;
-//                 flex-direction: row;
-//                 margin-right: 5px;
-
-//                 .grid-icon {
-//                     margin-right: 5px;
-//                     align-self: center;
-//                 }
-
-//                 .flexLabel {
-//                     margin-bottom: 0;
-//                 }
-
-//                 .collectionGridViewChrome-entryBox {
-//                     width: 50%;
-//                     color: $black;
-//                 }
-
-//                 .collectionGridViewChrome-columnButton {
-//                     color: $black;
-//                 }
-//             }
-//         }
-
-//         .collectionStackingViewChrome-sort,
-//         .collectionTreeViewChrome-sort {
-//             display: flex;
-//             align-items: center;
-//             justify-content: space-between;
-
-//             .collectionStackingViewChrome-sortIcon,
-//             .collectionTreeViewChrome-sortIcon {
-//                 transition: transform .5s;
-//                 margin-left: 10px;
-//             }
-//         }
-
-//         button:hover {
-//             transform: scale(1);
-//         }
-
-
-//         .collectionStackingViewChrome-pivotField-cont,
-//         .collectionTreeViewChrome-pivotField-cont,
-//         .collection3DCarouselViewChrome-scrollSpeed-cont {
-//             justify-self: right;
-//             align-items: center;
-//             display: flex;
-//             grid-auto-columns: auto;
-//             font-size: $small-text;
-//             letter-spacing: 2px;
-
-//             .collectionStackingViewChrome-pivotField-label,
-//             .collectionTreeViewChrome-pivotField-label,
-//             .collection3DCarouselViewChrome-scrollSpeed-label {
-//                 grid-column: 1;
-//                 margin-right: 7px;
-//                 user-select: none;
-//                 font-family: $sans-serif;
-//                 letter-spacing: normal;
-//             }
-
-//             .collectionStackingViewChrome-sortIcon {
-//                 transition: transform .5s;
-//                 grid-column: 3;
-//                 text-align: center;
-//                 display: flex;
-//                 justify-content: center;
-//                 align-items: center;
-//                 cursor: pointer;
-//                 width: 25px;
-//                 height: 25px;
-//                 border-radius: 100%;
-//             }
-
-//             .collectionStackingViewChrome-sortIcon:hover {
-//                 background-color: $drop-shadow;
-//             }
-
-//             .collectionStackingViewChrome-pivotField,
-//             .collectionTreeViewChrome-pivotField,
-//             .collection3DCarouselViewChrome-scrollSpeed {
-//                 color: $white;
-//                 grid-column: 2;
-//                 grid-row: 1;
-//                 width: 90%;
-//                 min-width: 100px;
-//                 display: flex;
-//                 height: 80%;
-//                 border-radius: 7px;
-//                 align-items: center;
-//                 background: $white;
-
-//                 .editable-view-input,
-//                 input,
-//                 .editableView-container-editing-oneLine,
-//                 .editableView-container-editing {
-//                     margin: auto;
-//                     border: 0px;
-//                     color: $light-gray !important;
-//                     text-align: center;
-//                     letter-spacing: 2px;
-//                     outline-color: $black;
-//                     height: 100%;
-//                 }
-
-//                 .react-autosuggest__container {
-//                     margin: 0;
-//                     color: $medium-gray;
-//                     padding: 0px;
-//                 }
-//             }
-//         }
-
-//         .collectionStackingViewChrome-pivotField:hover,
-//         .collectionTreeViewChrome-pivotField:hover,
-//         .collection3DCarouselViewChrome-scrollSpeed:hover {
-//             cursor: text;
-//         }
-
-//     }
-// }
-
-// .collectionMenu-webUrlButtons {
-//     margin-left: 44;
-//     background: lightGray;
-//     display: flex;
-// }
-
-// .webBox-urlEditor {
-//     position: relative;
-//     opacity: 0.9;
-//     z-index: 901;
-//     transition: top .5s;
-
-//     .urlEditor {
-//         display: grid;
-//         grid-template-columns: 1fr auto;
-//         padding-bottom: 10px;
-//         overflow: hidden;
-//         margin-top: 5px;
-//         height: 35px;
-
-//         .editorBase {
-//             display: flex;
-
-//             .editor-collapse {
-//                 transition: all .5s, opacity 0.3s;
-//                 position: absolute;
-//                 width: 40px;
-//                 transform-origin: top left;
-//             }
-
-//             .switchToText {
-//                 color: $medium-gray;
-//             }
-
-//             .switchToText:hover {
-//                 color: $dark-gray;
-//             }
-//         }
-
-//         button:hover {
-//             transform: scale(1);
-//         }
-//     }
-// }
-
-// .collectionMenu-urlInput {
-//     padding: 12px 10px 11px 10px;
-//     border: 0px;
-//     color: $black;
-//     font-size: $small-text;
-//     letter-spacing: 2px;
-//     outline-color: $black;
-//     background: $white;
-//     width: 100%;
-//     min-width: 350px;
-//     margin-right: 10px;
-//     height: 100%;
-// }
-
-// .collectionFreeFormMenu-cont {
-//     display: inline-flex;
-//     position: relative;
-//     align-items: center;
-//     height: 100%;
-
-//     .color-previewI {
-//         width: 60%;
-//         top: 80%;
-//         position: absolute;
-//         height: 4px;
-//     }
-
-//     .color-previewII {
-//         width: 80%;
-//         height: 80%;
-//         margin-left: 10%;
-//         position: absolute;
-//         bottom: 5;
-//     }
-
-//     .btn-group {
-//         display: grid;
-//         grid-template-columns: auto auto auto auto;
-//         margin: auto;
-//         /* Make the buttons appear below each other */
-//     }
-
-//     .btn-draw {
-//         display: inline-flex;
-//         margin: auto;
-//         /* Make the buttons appear below each other */
-//     }
-
-//     .fwdKeyframe,
-//     .numKeyframe,
-//     .backKeyframe {
-//         cursor: pointer;
-//         position: relative;
-//         width: 20;
-//         height: 30;
-//         bottom: 0;
-//         background: $dark-gray;
-//         display: inline-flex;
-//         align-items: center;
-//         color: $white;
-//     }
-
-//     .backKeyframe {
-//         svg {
-//             display: block;
-//             margin: auto;
-//         }
-//     }
-
-
-//     .numKeyframe {
-//         flex-direction: column;
-//         padding-top: 5px;
-//     }
-
-//     .fwdKeyframe {
-//         svg {
-//             display: block;
-//             margin: auto;
-//         }
-
-//         border-right: solid $medium-gray 1px;
-//     }
-// }
-
-// .collectionSchemaViewChrome-cont {
-//     display: flex;
-//     font-size: $small-text;
-
-//     .collectionSchemaViewChrome-toggle {
-//         display: flex;
-//         margin-left: 10px;
-//     }
-
-//     .collectionSchemaViewChrome-label {
-//         text-transform: uppercase;
-//         letter-spacing: 2px;
-//         margin-right: 5px;
-//         display: flex;
-//         flex-direction: column;
-//         justify-content: center;
-//     }
-
-//     .collectionSchemaViewChrome-toggler {
-//         width: 100px;
-//         height: 35px;
-//         background-color: $black;
-//         position: relative;
-//     }
-
-//     .collectionSchemaViewChrome-togglerButton {
-//         width: 47px;
-//         height: 30px;
-//         background-color: $light-gray;
-//         // position: absolute;
-//         transition: all 0.5s ease;
-//         // top: 3px;
-//         margin-top: 3px;
-//         color: $medium-gray;
-//         letter-spacing: 2px;
-//         text-transform: uppercase;
-//         display: flex;
-//         flex-direction: column;
-//         justify-content: center;
-//         text-align: center;
-
-//         &.on {
-//             margin-left: 3px;
-//         }
-
-//         &.off {
-//             margin-left: 50px;
-//         }
-//     }
-// }
-
-
-// .commandEntry-outerDiv {
-//     display: flex;
-//     flex-direction: column;
-//     height: 40px;
-// }
-
-// .commandEntry-inputArea {
-//     display: flex;
-//     flex-direction: row;
-//     width: 150px;
-//     margin: auto auto auto auto;
-// }
-
-// .react-autosuggest__container {
-//     position: relative;
-//     width: 100%;
-//     margin-left: 5px;
-//     margin-right: 5px;
-// }
-
-// .react-autosuggest__input {
-//     border: 1px solid $light-gray;
-//     border-radius: 4px;
-//     width: 100%;
-// }
-
-// .react-autosuggest__input--focused {
-//     outline: none;
-// }
-
-// .react-autosuggest__input--open {
-//     border-bottom-left-radius: 0;
-//     border-bottom-right-radius: 0;
-// }
-
-// .react-autosuggest__suggestions-container {
-//     display: none;
-// }
-
-// .react-autosuggest__suggestions-container--open {
-//     display: block;
-//     position: fixed;
-//     overflow-y: auto;
-//     max-height: 400px;
-//     width: 180px;
-//     border: 1px solid $light-gray;
-//     background-color: $white;
-//     font-family: $sans-serif;
-//     font-weight: 300;
-//     font-size: $large-header;
-//     border-bottom-left-radius: 4px;
-//     border-bottom-right-radius: 4px;
-//     z-index: 2;
-// }
-
-// .react-autosuggest__suggestions-list {
-//     margin: 0;
-//     padding: 0;
-//     list-style-type: none;
-// }
-
-// .react-autosuggest__suggestion {
-//     cursor: pointer;
-//     padding: 10px 20px;
-// }
-
-// .react-autosuggest__suggestion--highlighted {
-//     background-color: $light-gray;
-// }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 7d71bce13..9eb716763 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -2,23 +2,23 @@ import React = require('react');
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@material-ui/core';
-import { action, computed, Lambda, observable, reaction, runInAction } from 'mobx';
+import { Toggle, ToggleType, Type } from 'browndash-components';
+import { Lambda, action, computed, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { ColorState } from 'react-color';
+import { Utils, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents } from '../../../Utils';
 import { Doc, DocListCast, Opt } from '../../../fields/Doc';
-import { Document } from '../../../fields/documentSchemas';
 import { Id } from '../../../fields/FieldSymbols';
 import { InkTool } from '../../../fields/InkField';
 import { List } from '../../../fields/List';
 import { ObjectField } from '../../../fields/ObjectField';
 import { RichTextField } from '../../../fields/RichTextField';
 import { listSpec } from '../../../fields/Schema';
-import { ScriptField } from '../../../fields/ScriptField';
 import { BoolCast, Cast, DocCast, NumCast, StrCast } from '../../../fields/Types';
+import { Document } from '../../../fields/documentSchemas';
 import { GestureUtils } from '../../../pen-gestures/GestureUtils';
-import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents, Utils } from '../../../Utils';
-import { Docs } from '../../documents/Documents';
 import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes';
+import { Docs } from '../../documents/Documents';
 import { DragManager } from '../../util/DragManager';
 import { ScriptingGlobals } from '../../util/ScriptingGlobals';
 import { SelectionManager } from '../../util/SelectionManager';
@@ -28,20 +28,19 @@ import { undoBatch } from '../../util/UndoManager';
 import { AntimodeMenu } from '../AntimodeMenu';
 import { EditableView } from '../EditableView';
 import { GestureOverlay } from '../GestureOverlay';
-import { Colors } from '../global/globalEnums';
 import { ActiveFillColor, ActiveInkColor, SetActiveArrowEnd, SetActiveArrowStart, SetActiveBezierApprox, SetActiveFillColor, SetActiveInkColor, SetActiveInkWidth } from '../InkingStroke';
 import { LightboxView } from '../LightboxView';
+import { MainView } from '../MainView';
+import { DefaultStyleProvider } from '../StyleProvider';
 import { CollectionFreeFormDocumentView } from '../nodes/CollectionFreeFormDocumentView';
 import { DocumentView, OpenWhereMod } from '../nodes/DocumentView';
-import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 import { RichTextMenu } from '../nodes/formattedText/RichTextMenu';
-import { DefaultStyleProvider } from '../StyleProvider';
 import { CollectionDockingView } from './CollectionDockingView';
-import { CollectionLinearView } from './collectionLinear';
 import './CollectionMenu.scss';
 import { COLLECTION_BORDER_WIDTH } from './CollectionView';
 import { TabDocView } from './TabDocView';
 import { CollectionFreeFormView } from './collectionFreeForm';
+import { CollectionLinearView } from './collectionLinear';
 
 interface CollectionMenuProps {
     panelHeight: () => number;
@@ -95,6 +94,15 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> {
         }
     };
 
+    @action
+    toggleProperties = () => {
+        if (MainView.Instance.propertiesWidth() > 0) {
+            SettingsManager.propertiesWidth = 0;
+        } else {
+            SettingsManager.propertiesWidth = 300;
+        }
+    };
+
     buttonBarXf = () => {
         if (!this._docBtnRef.current) return Transform.Identity();
         const { scale, translateX, translateY } = Utils.GetScreenTransform(this._docBtnRef.current);
@@ -139,23 +147,44 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> {
     }
 
     render() {
-        const propIcon = SettingsManager.headerBarHeight > 0 ? 'angle-double-up' : 'angle-double-down';
-        const propTitle = SettingsManager.headerBarHeight > 0 ? 'Close Header Bar' : 'Open Header Bar';
-
-        const prop = (
-            <Tooltip title={<div className="dash-tooltip">{propTitle}</div>} key="topar" placement="bottom">
-                <div className="collectionMenu-hardCodedButton" style={{ backgroundColor: SettingsManager.propertiesWidth > 0 ? Colors.MEDIUM_BLUE : undefined }} onPointerDown={this.toggleTopBar}>
-                    <FontAwesomeIcon icon={propIcon} size="lg" />
-                </div>
-            </Tooltip>
+        const headerIcon = SettingsManager.headerBarHeight > 0 ? 'angle-double-up' : 'angle-double-down';
+        const headerTitle = SettingsManager.headerBarHeight > 0 ? 'Close Header Bar' : 'Open Header Bar';
+        const propIcon = SettingsManager.propertiesWidth > 0 ? 'angle-double-right' : 'angle-double-left';
+        const propTitle = SettingsManager.propertiesWidth > 0 ? 'Close Properties' : 'Open Properties';
+
+        const hardCodedButtons = (
+            <div className={`hardCodedButtons`}>
+                <Toggle 
+                    toggleType={ToggleType.BUTTON} 
+                    type={Type.PRIM} 
+                    color={StrCast(Doc.UserDoc().userColor)} 
+                    onClick={this.toggleTopBar} 
+                    toggleStatus={SettingsManager.headerBarHeight > 0} 
+                    icon={<FontAwesomeIcon icon={headerIcon} size="lg" />}
+                    tooltip={headerTitle}
+                />
+                <Toggle 
+                    toggleType={ToggleType.BUTTON} 
+                    type={Type.PRIM}
+                    color={StrCast(Doc.UserDoc().userColor)} 
+                    onClick={this.toggleProperties} 
+                    toggleStatus={SettingsManager.propertiesWidth > 0} 
+                    icon={<FontAwesomeIcon icon={propIcon} size="lg" />}
+                    tooltip={propTitle}
+                />
+            </div>
         );
 
         // NEW BUTTONS
         //dash col linear view buttons
         const contMenuButtons = (
-            <div className="collectionMenu-container">
+            <div className="collectionMenu-container" 
+            style={{
+                background: StrCast(Doc.UserDoc().userBackgroundColor),
+                // borderColor: StrCast(Doc.UserDoc().userColor)
+            }} >
                 {this.contMenuButtons}
-                {prop}
+                {hardCodedButtons}
             </div>
         );
 
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index ec529afc3..805002452 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -138,7 +138,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
             // assuming we need to get rowSpan because we might be dealing with many columns. Grid gap makes sense if multiple columns
             const rowSpan = Math.ceil((height() + this.gridGap) / this.gridGap);
             // just getting the style
-            const style = this.isStackingView ? { background: Colors.MEDIUM_GRAY, width: width(), marginTop: i ? this.gridGap : 0, height: height() } : { gridRowEnd: `span ${rowSpan}` };
+            const style = this.isStackingView ? { width: width(), marginTop: i ? this.gridGap : 0, height: height() } : { gridRowEnd: `span ${rowSpan}` };
             // So we're choosing whether we're going to render a column or a masonry doc
             return (
                 <div className={`collectionStackingView-${this.isStackingView ? 'columnDoc' : 'masonryDoc'}`} key={d[Id]} style={style}>
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 78789247f..c189ef126 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -230,7 +230,6 @@ export function CollectionSubView<X>(moreProps?: X) {
                 added === true && e.stopPropagation();
                 return added ? true : false;
             } else if (de.complete.annoDragData) {
-                e.stopPropagation();
                 const dropCreator = de.complete.annoDragData.dropDocCreator;
                 de.complete.annoDragData.dropDocCreator = () => {
                     const dropped = dropCreator(this.props.isAnnotationOverlay ? this.rootDoc : undefined);
diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index 273b08247..2bf649caf 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -13,7 +13,7 @@
     width: 100%;
     position: relative;
     top: 0;
-    background: $light-gray;
+    // background: $light-gray;
     font-size: 13px;
     overflow: auto;
     user-select: none;
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 4cd3885f5..00137736d 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -180,7 +180,7 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree
         const doAddDoc = (doc: Doc | Doc[]) =>
             (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) => {
                 const res = flg && Doc.AddDocToList(this.doc[DocData], this.props.fieldKey, doc, relativeTo, before);
-                res && (doc.embedContainer = this.props.Document);
+                res && Doc.SetContainer(doc, this.props.Document);
                 return res;
             }, true);
         if (this.doc.resolvedDataDoc instanceof Promise) return false;
@@ -386,6 +386,7 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree
     @observable _headerHeight = 0;
     @computed get content() {
         const background = () => this.props.styleProvider?.(this.doc, this.props, StyleProp.BackgroundColor);
+        const color = () => this.props.styleProvider?.(this.doc, this.props, StyleProp.Color);
         const pointerEvents = () => (this.props.isContentActive() === false ? 'none' : undefined);
         const titleBar = this.props.treeViewHideTitle || this.doc.treeViewHideTitle ? null : this.titleBar;
         return (
@@ -402,6 +403,7 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree
                     ref={r => !this.doc.treeViewHasOverlay && r && this.createTreeDropTarget(r)}
                     style={{
                         ...(!titleBar ? { marginLeft: this.marginX(), paddingTop: this.marginTop() } : {}),
+                        color: color(),
                         overflow: 'auto',
                         width: '100%',
                         height: '100%',
diff --git a/src/client/views/collections/TabDocView.scss b/src/client/views/collections/TabDocView.scss
index 58605c3f4..13bb3a577 100644
--- a/src/client/views/collections/TabDocView.scss
+++ b/src/client/views/collections/TabDocView.scss
@@ -65,11 +65,7 @@ input.lm_title {
 }
 
 .miniMap {
-    position: absolute;
     overflow: hidden;
-    right: 15;
-    bottom: 15;
-    border: solid 1px;
     width: 100%;
     height: 100%;
     transition: all 0.5s;
@@ -90,18 +86,5 @@ input.lm_title {
     cursor: pointer;
     position: absolute;
     bottom: 5;
-    display: flex;
     right: 5;
-    width: 25px;
-    height: 25px;
-    border-radius: 3px;
-    padding: 2px;
-    justify-content: center;
-    align-items: center;
-    align-content: center;
-    background-color: $light-gray;
-
-    &:hover {
-        box-shadow: none;
-    }
 }
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 4d780f46b..b9f13b188 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -34,6 +34,7 @@ import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormV
 import { CollectionView } from './CollectionView';
 import './TabDocView.scss';
 import React = require('react');
+import { Popup, Toggle, Type } from 'browndash-components';
 const _global = (window /* browser */ || global) /* node */ as any;
 
 interface TabDocViewProps {
@@ -262,7 +263,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
             pinDoc.presMovement = doc.type === DocumentType.SCRIPTING || pinProps?.pinDocLayout ? PresMovement.None : PresMovement.Zoom;
             pinDoc.presDuration = pinDoc.presDuration ?? 1000;
             pinDoc.groupWithUp = false;
-            pinDoc.embedContainer = curPres;
+            Doc.SetContainer(pinDoc, curPres);
             // these should potentially all be props passed down by the CollectionTreeView to the TreeView elements.  That way the PresBox could configure all of its children at render time
             pinDoc.treeViewRenderAsBulletHeader = true; // forces a tree view to render the document next to the bullet in the header area
             pinDoc.treeViewHeaderWidth = '100%'; // forces the header to grow to be the same size as its largest sibling.
@@ -573,63 +574,53 @@ export class TabMinimapView extends React.Component<TabMinimapViewProps> {
         const miniTop = 50 + ((NumCast(this.props.document._freeform_panY) - this.renderBounds.cy) / this.renderBounds.dim) * 100 - miniHeight / 2;
         const miniSize = this.returnMiniSize();
         return (
-            <>
-                {' '}
-                {this.props.document?.layout_hideMinimap ? null : (
-                    <div className="miniMap" style={{ width: miniSize, height: miniSize, background: this.props.background() }}>
-                        <CollectionFreeFormView
-                            Document={this.props.document}
-                            docViewPath={returnEmptyDoclist}
-                            childLayoutTemplate={this.childLayoutTemplate} // bcz: Ugh .. should probably be rendering a CollectionView or the minimap should be part of the collectionFreeFormView to avoid having to set stuff like this.
-                            noOverlay={true} // don't render overlay Docs since they won't scale
-                            setHeight={returnFalse}
-                            isContentActive={emptyFunction}
-                            isAnyChildContentActive={returnFalse}
-                            select={emptyFunction}
-                            isSelected={returnFalse}
-                            dontRegisterView={true}
-                            fieldKey={Doc.LayoutFieldKey(this.props.document)}
-                            bringToFront={emptyFunction}
-                            rootSelected={returnTrue}
-                            addDocument={returnFalse}
-                            moveDocument={returnFalse}
-                            removeDocument={returnFalse}
-                            PanelWidth={this.returnMiniSize}
-                            PanelHeight={this.returnMiniSize}
-                            ScreenToLocalTransform={Transform.Identity}
-                            renderDepth={0}
-                            whenChildContentsActiveChanged={emptyFunction}
-                            focus={emptyFunction}
-                            styleProvider={TabMinimapView.miniStyleProvider}
-                            addDocTab={this.props.addDocTab}
-                            pinToPres={TabDocView.PinDoc}
-                            childFilters={CollectionDockingView.Instance?.childDocFilters ?? returnEmptyDoclist}
-                            childFiltersByRanges={CollectionDockingView.Instance?.childDocRangeFilters ?? returnEmptyDoclist}
-                            searchFilterDocs={CollectionDockingView.Instance?.searchFilterDocs ?? returnEmptyDoclist}
-                            fitContentsToBox={returnTrue}
-                        />
-                        <div className="miniOverlay" onPointerDown={this.miniDown}>
-                            <div className="miniThumb" style={{ width: `${miniWidth}% `, height: `${miniHeight}% `, left: `${miniLeft}% `, top: `${miniTop}% ` }} />
+            <div className="miniMap-hidden">
+                <Popup
+                    icon={<FontAwesomeIcon icon="globe-asia" size="lg" />}
+                    color={StrCast(Doc.UserDoc().userVariantColor, Colors.MEDIUM_BLUE)}
+                    type={Type.TERT}
+                    onPointerDown={e => e.stopPropagation()}
+                    placement={'top-end'}
+                    popup={
+                        <div className="miniMap" style={{ width: miniSize, height: miniSize, background: this.props.background() }}>
+                            <CollectionFreeFormView
+                                Document={this.props.document}
+                                docViewPath={returnEmptyDoclist}
+                                childLayoutTemplate={this.childLayoutTemplate} // bcz: Ugh .. should probably be rendering a CollectionView or the minimap should be part of the collectionFreeFormView to avoid having to set stuff like this.
+                                noOverlay={true} // don't render overlay Docs since they won't scale
+                                setHeight={returnFalse}
+                                isContentActive={emptyFunction}
+                                isAnyChildContentActive={returnFalse}
+                                select={emptyFunction}
+                                isSelected={returnFalse}
+                                dontRegisterView={true}
+                                fieldKey={Doc.LayoutFieldKey(this.props.document)}
+                                bringToFront={emptyFunction}
+                                rootSelected={returnTrue}
+                                addDocument={returnFalse}
+                                moveDocument={returnFalse}
+                                removeDocument={returnFalse}
+                                PanelWidth={this.returnMiniSize}
+                                PanelHeight={this.returnMiniSize}
+                                ScreenToLocalTransform={Transform.Identity}
+                                renderDepth={0}
+                                whenChildContentsActiveChanged={emptyFunction}
+                                focus={emptyFunction}
+                                styleProvider={TabMinimapView.miniStyleProvider}
+                                addDocTab={this.props.addDocTab}
+                                pinToPres={TabDocView.PinDoc}
+                                childFilters={CollectionDockingView.Instance?.childDocFilters ?? returnEmptyDoclist}
+                                childFiltersByRanges={CollectionDockingView.Instance?.childDocRangeFilters ?? returnEmptyDoclist}
+                                searchFilterDocs={CollectionDockingView.Instance?.searchFilterDocs ?? returnEmptyDoclist}
+                                fitContentsToBox={returnTrue}
+                            />
+                            <div className="miniOverlay" onPointerDown={this.miniDown}>
+                                <div className="miniThumb" style={{ width: `${miniWidth}% `, height: `${miniHeight}% `, left: `${miniLeft}% `, top: `${miniTop}% ` }} />
+                            </div>
                         </div>
-                    </div>
-                )}
-                <Tooltip key="ttip" title={<div className="dash-tooltip">{this.props.document.layout_hideMinimap ? 'Open minimap' : 'Close minimap'}</div>}>
-                    <div
-                        className="miniMap-hidden"
-                        style={{
-                            color: this.props.document.layout_hideMinimap ? Colors.BLACK : Colors.WHITE,
-                            backgroundColor: this.props.document.layout_hideMinimap ? Colors.LIGHT_GRAY : Colors.MEDIUM_BLUE,
-                            boxShadow: this.props.document.layout_hideMinimap ? Shadows.STANDARD_SHADOW : undefined,
-                        }}
-                        onPointerDown={e => e.stopPropagation()}
-                        onClick={action(e => {
-                            e.stopPropagation();
-                            this.props.document!.layout_hideMinimap = !this.props.document!.layout_hideMinimap;
-                        })}>
-                        <FontAwesomeIcon icon="globe-asia" size="lg" />
-                    </div>
-                </Tooltip>
-            </>
+                    }
+                />
+            </div>
         );
     }
 }
diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss
index 7eab03e1d..85f99b9c2 100644
--- a/src/client/views/collections/TreeView.scss
+++ b/src/client/views/collections/TreeView.scss
@@ -24,34 +24,18 @@
         // width: $TREE_BULLET_WIDTH;
         width: 100%;
         height: 100%;
-        position: absolute;
-
-        .treeView-expandIcon {
-            display: none;
-            left: -10px;
-            position: absolute;
-        }
-
-        .treeView-checkIcon {
-            left: 3.5px;
-            top: 2px;
-            position: absolute;
-        }
-
-        &:hover {
-            .treeView-expandIcon {
-                display: unset;
-            }
-        }
+        position: relative;
+        display: flex;
+        flex-direction: row;
     }
 
-    .treeView-bulletIcons:hover img {
-        left: 14px;
-        position: absolute;
-        transform-origin: center left;
-        transform: scale(6);
-        pointer-events: none;
-    }
+    // .treeView-bulletIcons:hover img {
+    //     left: 14px;
+    //     position: absolute;
+    //     transform-origin: center left;
+    //     transform: scale(6);
+    //     pointer-events: none;
+    // }
 
     .bullet {
         grid-column: 1;
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index 8d8d895c6..fa9f895fd 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -34,6 +34,7 @@ import { CollectionTreeView, TreeViewType } from './CollectionTreeView';
 import { CollectionView } from './CollectionView';
 import './TreeView.scss';
 import React = require('react');
+import { IconButton, Size } from 'browndash-components';
 
 export interface TreeViewProps {
     treeView: CollectionTreeView;
@@ -221,12 +222,10 @@ export class TreeView extends React.Component<TreeViewProps> {
             this.treeViewOpen = !this.treeViewOpen;
         } else {
             // choose an appropriate embedding or make one. --- choose the first embedding that (1) user owns,  (2) has no context field ... otherwise make a new embedding
-            const bestEmbedding =
-                docView.props.Document.author === Doc.CurrentUserEmail && !Doc.IsDataProto(docView.props.Document)
-                    ? docView.props.Document
-                    : DocListCast(this.props.document.proto_embeddings).find(doc => !doc.embedContainer && doc.author === Doc.CurrentUserEmail);
-            const nextBestEmbedding = DocListCast(this.props.document.proto_embeddings).find(doc => doc.author === Doc.CurrentUserEmail);
-            this.props.addDocTab(bestEmbedding ?? nextBestEmbedding ?? Doc.MakeEmbedding(this.props.document), OpenWhere.lightbox);
+            const bestEmbedding =  docView.rootDoc.author === Doc.CurrentUserEmail && !Doc.IsDataProto(docView.props.Document)
+                    ? docView.rootDoc
+                    : Doc.BestEmbedding(docView.rootDoc);
+              this.props.addDocTab(bestEmbedding, OpenWhere.lightbox);
         }
     };
 
@@ -392,7 +391,7 @@ export class TreeView extends React.Component<TreeViewProps> {
             const innerAdd = (doc: Doc) => {
                 const dataIsComputed = ComputedField.WithoutComputed(() => FieldValue(this.dataDoc[this.fieldKey])) instanceof ComputedField;
                 const added = (!dataIsComputed || (this.dropping && this.moving)) && Doc.AddDocToList(this.dataDoc, this.fieldKey, doc);
-                dataIsComputed && (doc.embedContainer = this.doc.embedContainer);
+                dataIsComputed && Doc.SetContainer(doc, DocCast(this.doc.embedContainer));
                 return added;
             };
             return (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) => flg && innerAdd(doc), true as boolean);
@@ -455,7 +454,7 @@ export class TreeView extends React.Component<TreeViewProps> {
                     const innerAdd = (doc: Doc) => {
                         const dataIsComputed = ComputedField.WithoutComputed(() => FieldValue(this.dataDoc[key])) instanceof ComputedField;
                         const added = (!dataIsComputed || (this.dropping && this.moving)) && Doc.AddDocToList(this.dataDoc, key, doc, addBefore, before, false, true);
-                        dataIsComputed && (doc.embedContainer = this.doc.embedContainer);
+                        dataIsComputed && Doc.SetContainer(doc, DocCast(this.doc.embedContainer));
                         return added;
                     };
                     return (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) => flg && innerAdd(doc), true as boolean);
@@ -541,6 +540,8 @@ export class TreeView extends React.Component<TreeViewProps> {
         TraceMobx();
         const expandKey = this.treeViewExpandedView;
         const sortings = (this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.TreeViewSortings) as { [key: string]: { color: string; label: string } }) ?? {};
+        const color = this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Color)
+        console.log("tree view", color, this.doc.title, Doc.IsSystem(this.doc))
         if (['links', 'annotations', 'embeddings', this.fieldKey].includes(expandKey)) {
             const sorting = StrCast(this.doc.treeViewSortCriterion, TreeSort.None);
             const sortKeys = Object.keys(sortings);
@@ -563,7 +564,7 @@ export class TreeView extends React.Component<TreeViewProps> {
                 }
                 const dataIsComputed = ComputedField.WithoutComputed(() => FieldValue(this.dataDoc[key])) instanceof ComputedField;
                 const added = (!dataIsComputed || (this.dropping && this.moving)) && Doc.AddDocToList(this.dataDoc, key, doc, addBefore, before, false, true);
-                !dataIsComputed && added && (doc.embedContainer = this.doc.embedContainer);
+                !dataIsComputed && added && Doc.SetContainer(doc, DocCast(this.doc.embedContainer));
 
                 return added;
             };
@@ -580,7 +581,9 @@ export class TreeView extends React.Component<TreeViewProps> {
                 );
             }
             return (
-                <>
+                <div style={{ 
+                    color: color
+                 }}>
                     {!docs?.length || this.props.AddToMap /* hack to identify pres box trees */ ? null : (
                         <div className={'treeView-sorting'} style={{ background: sortings[sorting]?.color }}>
                             {sortings[sorting]?.label}
@@ -640,17 +643,18 @@ export class TreeView extends React.Component<TreeViewProps> {
                                   this._renderCount
                               )}
                     </ul>
-                </>
+                </div>
             );
         } else if (this.treeViewExpandedView === 'fields') {
             return (
-                <ul key={this.doc[Id] + this.doc.title} style={{ cursor: 'inherit' }}>
+                <ul key={this.doc[Id] + this.doc.title} style={{ cursor: 'inherit', color: color }}>
                     <div>{this.expandedField}</div>
                 </ul>
             );
         }
         return (
             <ul
+                style={{ color: color }}
                 onPointerDown={e => {
                     e.preventDefault();
                     e.stopPropagation();
@@ -685,6 +689,7 @@ export class TreeView extends React.Component<TreeViewProps> {
     @computed get renderBullet() {
         TraceMobx();
         const iconType = this.props.treeView.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.TreeViewIcon + (this.treeViewOpen ? ':open' : !this.childDocs.length ? ':empty' : '')) || 'question';
+        const color = this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Color)
         const checked = this.onCheckedClick ? this.doc.treeViewChecked ?? 'unchecked' : undefined;
         return (
             <div
@@ -705,14 +710,26 @@ export class TreeView extends React.Component<TreeViewProps> {
                 }>
                 {this.props.treeView.outlineMode ? (
                     !(this.doc.text as RichTextField)?.Text ? null : (
-                        <FontAwesomeIcon size="sm" icon={[this.childDocs?.length && !this.treeViewOpen ? 'fas' : 'far', 'circle']} />
+                        <IconButton
+                            color={color} 
+                            icon={<FontAwesomeIcon icon={[this.childDocs?.length && !this.treeViewOpen ? 'fas' : 'far', 'circle']} />}
+                            size={Size.XSMALL}
+                        />
                     )
                 ) : (
                     <div className="treeView-bulletIcons" style={{ color: Doc.IsSystem(DocCast(this.doc.proto)) ? 'red' : undefined }}>
-                        <div className={`treeView-${this.onCheckedClick ? 'checkIcon' : 'expandIcon'}`}>
-                            <FontAwesomeIcon size="sm" icon={checked === 'check' ? 'check' : checked === 'x' ? 'times' : checked === 'unchecked' ? 'square' : !this.treeViewOpen ? 'caret-right' : 'caret-down'} />
-                        </div>
-                        {this.onCheckedClick ? null : typeof iconType === 'string' ? <FontAwesomeIcon icon={iconType as IconProp} /> : iconType}
+                        <IconButton
+                            color={color} 
+                            icon={<FontAwesomeIcon size="sm" icon={checked === 'check' ? 'check' : checked === 'x' ? 'times' : checked === 'unchecked' ? 'square' : !this.treeViewOpen ? 'caret-right' : 'caret-down'} />}
+                            size={Size.XSMALL}
+                        />
+                        {this.onCheckedClick ? null : 
+                        <IconButton
+                            color={color} 
+                            icon={<FontAwesomeIcon icon={iconType as IconProp} />}
+                            size={Size.XSMALL}
+                        />
+                        }
                     </div>
                 )}
             </div>
@@ -1192,7 +1209,7 @@ export class TreeView extends React.Component<TreeViewProps> {
                         TreeView._editTitleOnLoad = editTitle ? { id: child[Id], parent } : undefined;
                         Doc.AddDocToList(newParent, fieldKey, child, addAfter, false);
                         newParent.treeViewOpen = true;
-                        child.embedContainer = treeView.Document;
+                        Doc.SetContainer(child, treeView.Document);
                     }
                 };
                 const indent = i === 0 ? undefined : (editTitle: boolean) => dentDoc(editTitle, docs[i - 1], undefined, treeViewRefs.get(docs[i - 1]));
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
index c9168d40a..0f51fe6ff 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
@@ -4,6 +4,10 @@ import { Tooltip } from '@material-ui/core';
 import { observer } from 'mobx-react';
 import { unimplementedFunction } from '../../../../Utils';
 import { AntimodeMenu, AntimodeMenuProps } from '../../AntimodeMenu';
+import { IconButton } from 'browndash-components';
+import { StrCast } from '../../../../fields/Types';
+import { Doc } from '../../../../fields/Doc';
+import { computed } from 'mobx';
 
 @observer
 export class MarqueeOptionsMenu extends AntimodeMenu<AntimodeMenuProps> {
@@ -22,39 +26,44 @@ export class MarqueeOptionsMenu extends AntimodeMenu<AntimodeMenuProps> {
         MarqueeOptionsMenu.Instance = this;
     }
 
+    @computed get userColor() {
+        return StrCast(Doc.UserDoc().userColor)
+    }
+
     render() {
-        const presPinWithViewIcon = <img src="/assets/pinWithView.png" style={{ margin: 'auto', width: 19, transform: 'translate(-2px, -2px)' }} />;
+        const presPinWithViewIcon = <img src="/assets/pinWithView.png" style={{ width: 19 }} />;
         const buttons = (
             <>
-                <Tooltip key="collect" title={<div className="dash-tooltip">Create a Collection</div>} placement="bottom">
-                    <button className="antimodeMenu-button" onPointerDown={this.createCollection}>
-                        <FontAwesomeIcon icon="object-group" size="lg" />
-                    </button>
-                </Tooltip>
-                ,
-                <Tooltip key="group" title={<div className="dash-tooltip">Create a Grouping</div>} placement="bottom">
-                    <button className="antimodeMenu-button" onPointerDown={e => this.createCollection(e, true)}>
-                        <FontAwesomeIcon icon="layer-group" size="lg" />
-                    </button>
-                </Tooltip>
-                ,
-                <Tooltip key="summarize" title={<div className="dash-tooltip">Summarize Documents</div>} placement="bottom">
-                    <button className="antimodeMenu-button" onPointerDown={this.summarize}>
-                        <FontAwesomeIcon icon="compress-arrows-alt" size="lg" />
-                    </button>
-                </Tooltip>
-                ,
-                <Tooltip key="delete" title={<div className="dash-tooltip">Delete Documents</div>} placement="bottom">
-                    <button className="antimodeMenu-button" onPointerDown={this.delete}>
-                        <FontAwesomeIcon icon="trash-alt" size="lg" />
-                    </button>
-                </Tooltip>
-                ,
-                <Tooltip key="pinWithView" title={<div className="dash-tooltip">Pin selected region to trail</div>} placement="bottom">
-                    <button className="antimodeMenu-button" onPointerDown={this.pinWithView}>
-                        {presPinWithViewIcon}
-                    </button>
-                </Tooltip>
+                <IconButton 
+                    tooltip={"Create a Collection"}
+                    onPointerDown={this.createCollection}
+                    icon={<FontAwesomeIcon icon="object-group"/>}
+                    color={this.userColor}
+                />
+                <IconButton 
+                    tooltip={"Create a Grouping"}
+                    onPointerDown={e => this.createCollection(e, true)}
+                    icon={<FontAwesomeIcon icon="layer-group"/>}
+                    color={this.userColor}
+                />
+                <IconButton 
+                    tooltip={"Summarize Documents"}
+                    onPointerDown={this.summarize}
+                    icon={<FontAwesomeIcon icon="compress-arrows-alt"/>}
+                    color={this.userColor}
+                />
+                <IconButton 
+                    tooltip={"Delete Documents"}
+                    onPointerDown={this.delete}
+                    icon={<FontAwesomeIcon icon="trash-alt"/>}
+                    color={this.userColor}
+                />
+                <IconButton 
+                    tooltip={"Pin selected region"}
+                    onPointerDown={this.pinWithView}
+                    icon={presPinWithViewIcon}
+                    color={this.userColor}
+                />
             </>
         );
         return this.getElement(buttons);
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 5febbe83e..e2718b52d 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -9,7 +9,7 @@ import { RichTextField } from '../../../../fields/RichTextField';
 import { SchemaHeaderField } from '../../../../fields/SchemaHeaderField';
 import { Cast, DocCast, FieldValue, NumCast, StrCast } from '../../../../fields/Types';
 import { ImageField } from '../../../../fields/URLField';
-import { GetEffectiveAcl } from '../../../../fields/util';
+import { distributeAcls, GetEffectiveAcl, SharingPermissions } from '../../../../fields/util';
 import { intersectRect, returnFalse, Utils } from '../../../../Utils';
 import { CognitiveServices } from '../../../cognitive_services/CognitiveServices';
 import { Docs, DocumentOptions, DocUtils } from '../../../documents/Documents';
@@ -390,7 +390,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
         newCollection.x = this.Bounds.left;
         newCollection.y = this.Bounds.top;
         newCollection.layout_fitWidth = true;
-        selected.forEach(d => (d.embedContainer = newCollection));
+        selected.forEach(d => Doc.SetContainer(d, newCollection));
         this.hideMarquee();
         return newCollection;
     });
diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.scss b/src/client/views/collections/collectionLinear/CollectionLinearView.scss
index 3e3709827..6b3318bf3 100644
--- a/src/client/views/collections/collectionLinear/CollectionLinearView.scss
+++ b/src/client/views/collections/collectionLinear/CollectionLinearView.scss
@@ -17,12 +17,7 @@
     .collectionLinearView-menuOpener {
         user-select: none;
     }
-
-    &.true {
-        border-left: $standard-border;
-        background-color: $medium-blue-alt;
-    }
-
+    
     > input:not(:checked) ~ &.true {
         background-color: transparent;
     }
diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
index 8f90e4444..56b8366d0 100644
--- a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
+++ b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
@@ -20,6 +20,8 @@ import { UndoStack } from '../../UndoStack';
 import { CollectionStackedTimeline } from '../CollectionStackedTimeline';
 import { CollectionSubView } from '../CollectionSubView';
 import './CollectionLinearView.scss';
+import { Button, Toggle, ToggleType, Type } from 'browndash-components';
+import { Colors } from '../../global/globalEnums';
 
 /**
  * CollectionLinearView is the class for rendering the horizontal collection
@@ -46,7 +48,7 @@ export class CollectionLinearView extends CollectionSubView() {
 
     componentDidMount() {
         this._widthDisposer = reaction(
-            () => 5 + NumCast(this.rootDoc.linearBtnWidth, this.dimension()) + (this.layoutDoc.linearView_IsExpanded ? this.childDocs.filter(doc => !doc.hidden).reduce((tot, doc) => (doc[Width]() || this.dimension()) + tot + 4, 0) : 0),
+            () => 5 + NumCast(this.rootDoc.linearBtnWidth, this.dimension()) + (this.layoutDoc.linearView_IsOpen ? this.childDocs.filter(doc => !doc.hidden).reduce((tot, doc) => (doc[Width]() || this.dimension()) + tot + 4, 0) : 0),
             width => this.childDocs.length && (this.layoutDoc._width = width),
             { fireImmediately: true }
         );
@@ -198,54 +200,48 @@ export class CollectionLinearView extends CollectionSubView() {
     render() {
         const flexDir = StrCast(this.Document.flexDirection); // Specify direction of linear view content
         const flexGap = NumCast(this.Document.flexGap); // Specify the gap between linear view content
-        const isExpanded = BoolCast(this.layoutDoc.linearView_IsExpanded);
+        const isExpanded = BoolCast(this.layoutDoc.linearView_IsOpen);
 
         const menuOpener = (
-            <label
-                className={`collectionlinearView-label${isExpanded ? '-expanded' : ''}`}
-                htmlFor={this.Document[Id] + '-input'}
-                style={{ boxShadow: this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BoxShadow) }}
-                onPointerDown={StopEvent}>
-                <div className="collectionLinearView-menuOpener">{Cast(this.props.Document.icon, 'string', null) ?? <FontAwesomeIcon icon={isExpanded ? 'minus' : 'plus'} />}</div>
-            </label>
+            <Toggle
+                text={Cast(this.props.Document.icon, 'string', null)} 
+                icon={Cast(this.props.Document.icon, 'string', null) ? undefined : <FontAwesomeIcon icon={isExpanded ? 'minus' : 'plus'} />}
+                type={Type.TERT}
+                color={StrCast(Doc.UserDoc().userVariantColor, Colors.MEDIUM_BLUE)}
+                onPointerDown={e => e.stopPropagation()}
+                toggleType={ToggleType.BUTTON}
+                toggleStatus={BoolCast(this.layoutDoc.linearView_IsOpen)}
+                onClick={() => {
+                        this.layoutDoc.linearView_IsOpen = !isExpanded;
+                }}
+                tooltip={isExpanded ? 'Close' : 'Open'}
+                fillWidth={true}
+                align={'center'}
+            />
         );
 
         return (
-            <div className={`collectionLinearView-outer ${this.layoutDoc.linearView_SubMenu}`} style={{ backgroundColor: this.layoutDoc.linearView_IsExpanded ? undefined : 'transparent' }}>
-                <div className="collectionLinearView" ref={this.createDashEventsTarget} onContextMenu={this.myContextMenu} style={{ minHeight: this.dimension() }}>
-                    {!this.props.Document.linearView_Expandable ? null : (
-                        <Tooltip title={<div className="dash-tooltip">{isExpanded ? 'Close' : 'Open'}</div>} placement="top">
-                            {menuOpener}
-                        </Tooltip>
-                    )}
-                    <input
-                        id={this.Document[Id] + '-input'}
-                        type="checkbox"
-                        checked={isExpanded}
-                        ref={this.addMenuToggle}
-                        onChange={action(e => {
-                            ScriptCast(this.Document.onClick)?.script.run({
-                                this: this.layoutDoc,
-                                self: this.rootDoc,
-                                _readOnly_: false,
-                                scriptContext: this.props.scriptContext,
-                                documentView: this.props.DocumentView?.(),
-                            });
-                            this.layoutDoc.linearView_IsExpanded = this.addMenuToggle.current!.checked;
-                        })}
-                    />
-
-                    {!this.layoutDoc.linearView_IsExpanded ? null : (
-                        <div
-                            className="collectionLinearView-content"
-                            style={{
-                                height: this.dimension(),
-                                flexDirection: flexDir as any,
-                                gap: flexGap,
-                            }}>
-                            {this.childLayoutPairs.map(pair => this.getDisplayDoc(pair.layout))}
-                        </div>
-                    )}
+            <div className={`collectionLinearView-outer ${this.layoutDoc.linearView_SubMenu}`} style={{ backgroundColor: this.layoutDoc.linearView_IsOpen ? undefined : 'transparent' }}>
+                <div className="collectionLinearView" ref={this.createDashEventsTarget} onContextMenu={this.myContextMenu} style={{ minHeight: this.dimension(), pointerEvents: 'all' }}>
+                    {this.props.Document.linearView_Dropdown ? 
+                        <div>Hello World!</div>
+                        : 
+                        <>
+                        {!this.props.Document.linearView_Expandable ? null : menuOpener}
+                        {!this.layoutDoc.linearView_IsOpen ? null : (
+                            <div
+                                className="collectionLinearView-content"
+                                style={{
+                                    height: this.dimension(),
+                                    flexDirection: flexDir as any,
+                                    gap: flexGap,
+                                }}>
+                                {this.childLayoutPairs.map(pair => this.getDisplayDoc(pair.layout))}
+                            </div>
+                        )}
+                        </>
+                    }
+                    
                 </div>
             </div>
         );
diff --git a/src/client/views/global/globalCssVariables.scss b/src/client/views/global/globalCssVariables.scss
index 422dae15b..7b2ac5713 100644
--- a/src/client/views/global/globalCssVariables.scss
+++ b/src/client/views/global/globalCssVariables.scss
@@ -36,8 +36,8 @@ $icon-size: 28px;
 // fonts
 $sans-serif: 'Roboto', sans-serif;
 $large-header: 16px;
-$body-text: 12px;
-$small-text: 9px;
+$body-text: 13px;
+$small-text: 10px;
 // $sans-serif: "Roboto Slab", sans-serif;
 
 // misc values
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
new file mode 100644
index 000000000..d22b6b4d9
--- /dev/null
+++ b/src/client/views/global/globalScripts.ts
@@ -0,0 +1,418 @@
+import { Colors } from "browndash-components";
+import { runInAction, action } from "mobx";
+import { aggregateBounds } from "../../../Utils";
+import { Doc } from "../../../fields/Doc";
+import { Width, Height } from "../../../fields/DocSymbols";
+import { InkTool } from "../../../fields/InkField";
+import { Cast, StrCast, NumCast, BoolCast } from "../../../fields/Types";
+import { WebField } from "../../../fields/URLField";
+import { GestureUtils } from "../../../pen-gestures/GestureUtils";
+import { LinkManager } from "../../util/LinkManager";
+import { ScriptingGlobals } from "../../util/ScriptingGlobals";
+import { SelectionManager } from "../../util/SelectionManager";
+import { UndoManager } from "../../util/UndoManager";
+import { GestureOverlay } from "../GestureOverlay";
+import { InkTranscription } from "../InkTranscription";
+import { ActiveFillColor, SetActiveFillColor, ActiveIsInkMask, SetActiveIsInkMask, ActiveInkWidth, SetActiveInkWidth, ActiveInkColor, SetActiveInkColor } from "../InkingStroke";
+import { CollectionFreeFormView } from "../collections/collectionFreeForm";
+import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
+import { WebBox } from "../nodes/WebBox";
+import { RichTextMenu } from "../nodes/formattedText/RichTextMenu";
+import { DocumentType } from "../../documents/DocumentTypes";
+
+// toggle: Set overlay status of selected document
+ScriptingGlobals.add(function setView(view: string) {
+    const selected = SelectionManager.Docs().lastElement();
+    selected ? (selected._type_collection = view) : console.log('[FontIconBox.tsx] changeView failed');
+});
+
+// toggle: Set overlay status of selected document
+ScriptingGlobals.add(function setBackgroundColor(color?: string, checkResult?: boolean) {
+    const selectedViews = SelectionManager.Views();
+    console.log(color, checkResult);
+    if (Doc.ActiveTool !== InkTool.None) {
+        if (checkResult) {
+            return ActiveFillColor();
+        }
+        SetActiveFillColor(color ?? 'transparent');
+    } else if (selectedViews.length) {
+        if (checkResult) {
+            const selView = selectedViews.lastElement();
+            const fieldKey = selView.rootDoc.type === DocumentType.INK ? 'fillColor' : 'backgroundColor';
+            const layoutFrameNumber = Cast(selView.props.docViewPath().lastElement()?.rootDoc?._currentFrame, 'number'); // frame number that container is at which determines layout frame values
+            const contentFrameNumber = Cast(selView.rootDoc?._currentFrame, 'number', layoutFrameNumber ?? null); // frame number that content is at which determines what content is displayed
+            return CollectionFreeFormDocumentView.getStringValues(selView?.rootDoc, contentFrameNumber)[fieldKey] ?? 'transparent';
+        }
+        selectedViews.forEach(dv => {
+            const fieldKey = dv.rootDoc.type === DocumentType.INK ? 'fillColor' : 'backgroundColor';
+            const layoutFrameNumber = Cast(dv.props.docViewPath().lastElement()?.rootDoc?._currentFrame, 'number'); // frame number that container is at which determines layout frame values
+            const contentFrameNumber = Cast(dv.rootDoc?._currentFrame, 'number', layoutFrameNumber ?? null); // frame number that content is at which determines what content is displayed
+            if (contentFrameNumber !== undefined) {
+                CollectionFreeFormDocumentView.setStringValues(contentFrameNumber, dv.rootDoc, { fieldKey: color });
+            } else {
+                console.log('setting color to: ', color)
+                dv.rootDoc['_' + fieldKey] = color;
+            }
+        });
+    } else {
+        const selected = SelectionManager.Docs().length ? SelectionManager.Docs() : LinkManager.currentLink ? [LinkManager.currentLink] : [];
+        if (checkResult) {
+            return selected.lastElement()?._backgroundColor ?? 'transparent';
+        }
+        selected.forEach(doc => (doc._backgroundColor = color));
+    }
+});
+
+// toggle: Set overlay status of selected document
+ScriptingGlobals.add(function setHeaderColor(color?: string, checkResult?: boolean) {
+    if (checkResult) {
+        return Doc.SharingDoc().headingColor;
+    }
+    Doc.SharingDoc().headingColor = undefined;
+    Doc.GetProto(Doc.SharingDoc()).headingColor = color;
+    Doc.UserDoc().layout_showTitle = color === 'transparent' ? undefined : StrCast(Doc.UserDoc().layout_showTitle, 'author_date');
+});
+
+// toggle: Set overlay status of selected document
+ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) {
+    console.log(checkResult);
+    const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
+    if (checkResult) {
+        if (NumCast(selected?.Document.z) >= 1) return true;
+        return false;
+    }
+    selected ? selected.props.CollectionFreeFormDocumentView?.().float() : console.log('[FontIconBox.tsx] toggleOverlay failed');
+});
+
+ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll', checkResult?: boolean) {
+    const selected = SelectionManager.Docs().lastElement();
+    // prettier-ignore
+    const map: Map<'flashcards' | 'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc) => void;}> = new Map([
+        ['grid', {
+            checkResult: (doc:Doc) => BoolCast(doc._freeform_backgroundGrid, false),
+            setDoc: (doc:Doc) => doc._freeform_backgroundGrid = !doc._freeform_backgroundGrid,
+        }],
+        ['snaplines', {
+            checkResult: (doc:Doc) => BoolCast(doc._freeform_snapLines, false),
+            setDoc: (doc:Doc) => doc._freeform_snapLines = !doc._freeform_snapLines,
+        }],
+        ['viewAll', {
+            checkResult: (doc:Doc) => BoolCast(doc._freeform_fitContentsToBox, false),
+            setDoc: (doc:Doc) => doc._freeform_fitContentsToBox = !doc._freeform_fitContentsToBox,
+        }],
+        ['clusters', {
+            waitForRender: true, // flags that undo batch should terminate after a re-render giving the script the chance to fire
+            checkResult: (doc:Doc) => BoolCast(doc._freeform_useClusters, false),
+            setDoc: (doc:Doc) => doc._freeform_useClusters = !doc._freeform_useClusters,
+        }],
+        ['arrange', {
+            waitForRender: true, // flags that undo batch should terminate after a re-render giving the script the chance to fire
+            checkResult: (doc:Doc) => BoolCast(doc._autoArrange, false),
+            setDoc: (doc:Doc) => doc._autoArrange = !doc._autoArrange,
+        }],
+        ['flashcards', {
+            checkResult: (doc:Doc) => BoolCast(Doc.UserDoc().defaultToFlashcards, false),
+            setDoc: (doc:Doc) => Doc.UserDoc().defaultToFlashcards = !Doc.UserDoc().defaultToFlashcards,
+        }],
+   ]);
+
+    if (checkResult) {
+        console.log(attr, map.get(attr)?.checkResult(selected))
+        return map.get(attr)?.checkResult(selected);
+    }
+    const batch = map.get(attr)?.waitForRender ? UndoManager.StartBatch('set freeform attribute') : { end: () => {} };
+    SelectionManager.Docs().map(dv => map.get(attr)?.setDoc(dv));
+    setTimeout(() => batch.end(), 100);
+});
+
+ScriptingGlobals.add(function setFontAttr(attr: 'font' | 'fontColor' | 'highlight' | 'fontSize' | 'alignment', value: any, checkResult?: boolean) {
+    const editorView = RichTextMenu.Instance?.TextView?.EditorView;
+    const selected = SelectionManager.Docs().lastElement();
+    // prettier-ignore
+    const map: Map<'font'|'fontColor'|'highlight'|'fontSize'|'alignment', { checkResult: () => any; setDoc: () => void;}> = new Map([
+        ['font', {
+            checkResult: () => RichTextMenu.Instance?.fontFamily,
+            setDoc: () => value && RichTextMenu.Instance.setFontFamily(value),
+        }],
+        ['highlight', {
+            checkResult: () =>(selected ?? Doc.UserDoc())._fontHighlight,
+            setDoc: () => value  && RichTextMenu.Instance.setHighlight(value),
+        }],
+        ['fontColor', {
+            checkResult: () => RichTextMenu.Instance?.fontColor,
+            setDoc: () => value && RichTextMenu.Instance.setColor(value),
+        }],
+        ['alignment', {
+            checkResult: () => RichTextMenu.Instance.textAlign,
+            setDoc: () => value && editorView?.state ? RichTextMenu.Instance.align(editorView, editorView.dispatch, value):(Doc.UserDoc().textAlign = value),
+        }],
+        ['fontSize', {
+            checkResult: () => RichTextMenu.Instance?.fontSize.replace('px', ''),
+            setDoc: () => {
+                if (typeof value === 'number') value = value.toString();
+                if (value && Number(value).toString() === value) value += 'px';
+                RichTextMenu.Instance.setFontSize(value);
+            },
+        }],
+    ]);
+
+    if (checkResult) {
+        return map.get(attr)?.checkResult();
+    }
+    map.get(attr)?.setDoc?.();
+});
+
+type attrname = 'noAutoLink' | 'dictation' | 'bold' | 'italics' | 'underline' | 'left' | 'center' | 'right' | 'bullet' | 'decimal';
+type attrfuncs = [attrname, { checkResult: () => boolean; toggle: () => any }];
+
+ScriptingGlobals.add(function toggleCharStyle(charStyle: attrname, checkResult?: boolean) {
+    const textView = RichTextMenu.Instance?.TextView;
+    const editorView = textView?.EditorView;
+    // prettier-ignore
+    const alignments:attrfuncs[] = (['left','right','center'] as ("left"|"center"|"right")[]).map((where) =>
+        [ where, {      checkResult: () =>(editorView ? (RichTextMenu.Instance.textAlign ===where): (Doc.UserDoc().textAlign ===where) ? true:false),
+                        toggle: () => (editorView?.state ? RichTextMenu.Instance.align(editorView, editorView.dispatch, where):(Doc.UserDoc().textAlign = where))}]);
+    // prettier-ignore
+    const listings:attrfuncs[] = (['bullet','decimal'] as attrname[]).map(list =>
+        [ list, {       checkResult: () => (editorView ? RichTextMenu.Instance.getActiveListStyle() === list:false),
+                        toggle: () => editorView?.state && RichTextMenu.Instance.changeListType(list) }]);
+    // prettier-ignore
+    const attrs:attrfuncs[] = [
+        ['dictation', { checkResult: () => textView?._recording ? true:false,
+                        toggle: () => textView && runInAction(() => (textView._recording = !textView._recording)) }],
+        ['noAutoLink',{ checkResult: () => (editorView ? RichTextMenu.Instance.noAutoLink : false),
+                        toggle: () => editorView && RichTextMenu.Instance?.toggleNoAutoLinkAnchor()}],
+        ['bold',      { checkResult: () => (editorView ? RichTextMenu.Instance.bold : (Doc.UserDoc().fontWeight === 'bold') ? true:false),
+                        toggle: editorView ? RichTextMenu.Instance.toggleBold : () => (Doc.UserDoc().fontWeight = Doc.UserDoc().fontWeight === 'bold' ? undefined : 'bold')}],
+        ['italics',   { checkResult: () => (editorView ? RichTextMenu.Instance.italics : (Doc.UserDoc().fontStyle === 'italics') ? true:false),
+                        toggle: editorView ? RichTextMenu.Instance.toggleItalics : () => (Doc.UserDoc().fontStyle = Doc.UserDoc().fontStyle === 'italics' ? undefined : 'italics')}],
+        ['underline', { checkResult: () => (editorView ? RichTextMenu.Instance.underline : (Doc.UserDoc().textDecoration === 'underline') ? true:false),
+                        toggle: editorView ? RichTextMenu.Instance.toggleUnderline : () => (Doc.UserDoc().textDecoration = Doc.UserDoc().textDecoration === 'underline' ? undefined : 'underline') }]]
+
+    const map = new Map(attrs.concat(alignments).concat(listings));
+    if (checkResult) {
+        console.log(charStyle, checkResult, map.get(charStyle)?.checkResult());
+        return map.get(charStyle)?.checkResult();
+    }
+    map.get(charStyle)?.toggle();
+});
+
+export function checkInksToGroup() {
+    // console.log("getting here to inks group");
+    if (Doc.ActiveTool === InkTool.Write) {
+        CollectionFreeFormView.collectionsWithUnprocessedInk.forEach(ffView => {
+            // TODO: nda - will probably want to go through ffView unprocessed docs and then see if any of the inksToGroup docs are in it and only use those
+            // find all inkDocs in ffView.unprocessedDocs that are within 200 pixels of each other
+            const inksToGroup = ffView.unprocessedDocs.filter(inkDoc => {
+                // console.log(inkDoc.x, inkDoc.y);
+            });
+        });
+    }
+}
+
+export function createInkGroup(inksToGroup?: Doc[], isSubGroup?: boolean) {
+    // TODO nda - if document being added to is a inkGrouping then we can just add to that group
+    if (Doc.ActiveTool === InkTool.Write) {
+        CollectionFreeFormView.collectionsWithUnprocessedInk.forEach(ffView => {
+            // TODO: nda - will probably want to go through ffView unprocessed docs and then see if any of the inksToGroup docs are in it and only use those
+            const selected = ffView.unprocessedDocs;
+            // loop through selected an get the bound
+            const bounds: { x: number; y: number; width?: number; height?: number }[] = [];
+
+            selected.map(
+                action(d => {
+                    const x = NumCast(d.x);
+                    const y = NumCast(d.y);
+                    const width = d[Width]();
+                    const height = d[Height]();
+                    bounds.push({ x, y, width, height });
+                })
+            );
+
+            const aggregBounds = aggregateBounds(bounds, 0, 0);
+            const marqViewRef = ffView._marqueeViewRef.current;
+
+            // set the vals for bounds in marqueeView
+            if (marqViewRef) {
+                marqViewRef._downX = aggregBounds.x;
+                marqViewRef._downY = aggregBounds.y;
+                marqViewRef._lastX = aggregBounds.r;
+                marqViewRef._lastY = aggregBounds.b;
+            }
+
+            selected.map(
+                action(d => {
+                    const dx = NumCast(d.x);
+                    const dy = NumCast(d.y);
+                    delete d.x;
+                    delete d.y;
+                    delete d.activeFrame;
+                    delete d._timecodeToShow; // bcz: this should be automatic somehow.. along with any other properties that were logically associated with the original collection
+                    delete d._timecodeToHide; // bcz: this should be automatic somehow.. along with any other properties that were logically associated with the original collection
+                    // calculate pos based on bounds
+                    if (marqViewRef?.Bounds) {
+                        d.x = dx - marqViewRef.Bounds.left - marqViewRef.Bounds.width / 2;
+                        d.y = dy - marqViewRef.Bounds.top - marqViewRef.Bounds.height / 2;
+                    }
+                    return d;
+                })
+            );
+            ffView.props.removeDocument?.(selected);
+            // TODO: nda - this is the code to actually get a new grouped collection
+            const newCollection = marqViewRef?.getCollection(selected, undefined, true);
+            if (newCollection) {
+                newCollection.height = newCollection[Height]();
+                newCollection.width = newCollection[Width]();
+            }
+
+            // nda - bug: when deleting a stroke before leaving writing mode, delete the stroke from unprocessed ink docs
+            newCollection && ffView.props.addDocument?.(newCollection);
+            // TODO: nda - will probably need to go through and only remove the unprocessed selected docs
+            ffView.unprocessedDocs = [];
+
+            InkTranscription.Instance.transcribeInk(newCollection, selected, false);
+        });
+    }
+    CollectionFreeFormView.collectionsWithUnprocessedInk.clear();
+}
+
+function setActiveTool(tool: InkTool | GestureUtils.Gestures, keepPrim: boolean, checkResult?: boolean) {
+    InkTranscription.Instance?.createInkGroup();
+    if (checkResult) {
+        return (Doc.ActiveTool === tool && !GestureOverlay.Instance?.InkShape) || GestureOverlay.Instance?.InkShape === tool
+            ? GestureOverlay.Instance?.KeepPrimitiveMode || ![GestureUtils.Gestures.Circle, GestureUtils.Gestures.Line, GestureUtils.Gestures.Rectangle].includes(tool as GestureUtils.Gestures)
+                ? true
+                : true
+            : false;
+    }
+    runInAction(() => {
+        if (GestureOverlay.Instance) {
+            GestureOverlay.Instance.KeepPrimitiveMode = keepPrim;
+        }
+        if (Object.values(GestureUtils.Gestures).includes(tool as any)) {
+            if (GestureOverlay.Instance.InkShape === tool && !keepPrim) {
+                Doc.ActiveTool = InkTool.None;
+                GestureOverlay.Instance.InkShape = undefined;
+            } else {
+                Doc.ActiveTool = InkTool.Pen;
+                GestureOverlay.Instance.InkShape = tool as GestureUtils.Gestures;
+            }
+        } else if (tool) {
+            // pen or eraser
+            if (Doc.ActiveTool === tool && !GestureOverlay.Instance.InkShape && !keepPrim) {
+                Doc.ActiveTool = InkTool.None;
+            } else {
+                Doc.ActiveTool = tool as any;
+                GestureOverlay.Instance.InkShape = undefined;
+            }
+        } else {
+            Doc.ActiveTool = InkTool.None;
+        }
+    });
+}
+
+ScriptingGlobals.add(setActiveTool, 'sets the active ink tool mode');
+
+// toggle: Set overlay status of selected document
+ScriptingGlobals.add(function setInkProperty(option: 'inkMask' | 'fillColor' | 'strokeWidth' | 'strokeColor', value: any, checkResult?: boolean) {
+    const selected = SelectionManager.Docs().lastElement();
+    // prettier-ignore
+    const map: Map<'inkMask' | 'fillColor' | 'strokeWidth' | 'strokeColor', { checkResult: () => any; setInk: (doc: Doc) => void; setMode: () => void }> = new Map([
+        ['inkMask', {
+            checkResult: () => ((selected?.type === DocumentType.INK ? BoolCast(selected.stroke_isInkMask) : ActiveIsInkMask())),
+            setInk: (doc: Doc) => (doc.stroke_isInkMask = !doc.stroke_isInkMask),
+            setMode: () => selected?.type !== DocumentType.INK && SetActiveIsInkMask(!ActiveIsInkMask()),
+        }],
+        ['fillColor', {
+            checkResult: () => (selected?.type === DocumentType.INK ? StrCast(selected.fillColor) : ActiveFillColor() ?? "transparent"),
+            setInk: (doc: Doc) => (doc.fillColor = StrCast(value)),
+            setMode: () => SetActiveFillColor(StrCast(value)),
+        }],
+        [ 'strokeWidth', {
+            checkResult: () => (selected?.type === DocumentType.INK ? NumCast(selected.stroke_width) : ActiveInkWidth()),
+            setInk: (doc: Doc) => (doc.stroke_width = NumCast(value)),
+            setMode: () => SetActiveInkWidth(value.toString()),
+        }],
+        ['strokeColor', {
+            checkResult: () => (selected?.type === DocumentType.INK ? StrCast(selected.color) : ActiveInkColor()),
+            setInk: (doc: Doc) => (doc.color = String(value)),
+            setMode: () => SetActiveInkColor(StrCast(value)),
+        }],
+    ]);
+
+    if (checkResult) {
+        return map.get(option)?.checkResult();
+    }
+    map.get(option)?.setMode();
+    SelectionManager.Docs()
+        .filter(doc => doc.type === DocumentType.INK)
+        .map(doc => map.get(option)?.setInk(doc));
+});
+
+/** WEB
+ *      webSetURL
+ **/
+ScriptingGlobals.add(function webSetURL(url: string, checkResult?: boolean) {
+    const selected = SelectionManager.Views().lastElement();
+    if (selected?.rootDoc.type === DocumentType.WEB) {
+        if (checkResult) {
+            return StrCast(selected.rootDoc.data, Cast(selected.rootDoc.data, WebField, null)?.url?.href);
+        }
+        selected.ComponentView?.setData?.(url);
+        //selected.rootDoc.data = new WebField(url);
+    }
+});
+ScriptingGlobals.add(function webForward(checkResult?: boolean) {
+    const selected = SelectionManager.Views().lastElement()?.ComponentView as WebBox;
+    if (checkResult) {
+        return selected?.forward(checkResult) ? undefined : 'lightGray';
+    }
+    selected?.forward();
+});
+ScriptingGlobals.add(function webBack(checkResult?: boolean) {
+    const selected = SelectionManager.Views().lastElement()?.ComponentView as WebBox;
+    if (checkResult) {
+        return selected?.back(checkResult) ? undefined : 'lightGray';
+    }
+    selected?.back();
+});
+
+/** Schema
+ *      toggleSchemaPreview
+ **/
+ScriptingGlobals.add(function toggleSchemaPreview(checkResult?: boolean) {
+    const selected = SelectionManager.Docs().lastElement();
+    if (checkResult && selected) {
+        const result: boolean = NumCast(selected.schema_previewWidth) > 0;
+        if (result) return Colors.MEDIUM_BLUE;
+        else return 'transparent';
+    } else if (selected) {
+        if (NumCast(selected.schema_previewWidth) > 0) {
+            selected.schema_previewWidth = 0;
+        } else {
+            selected.schema_previewWidth = 200;
+        }
+    }
+});
+ScriptingGlobals.add(function toggleSingleLineSchema(checkResult?: boolean) {
+    const selected = SelectionManager.Docs().lastElement();
+    if (checkResult && selected) {
+        return NumCast(selected._schema_singleLine) > 0 ? Colors.MEDIUM_BLUE : 'transparent';
+    }
+    if (selected) {
+        selected._schema_singleLine = !selected._schema_singleLine;
+    }
+});
+
+/** STACK
+ *      groupBy
+ */
+ScriptingGlobals.add(function setGroupBy(key: string, checkResult?: boolean) {
+    SelectionManager.Docs().map(doc => (doc._text_fontFamily = key));
+    const editorView = RichTextMenu.Instance.TextView?.EditorView;
+    if (checkResult) {
+        return StrCast((editorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily);
+    }
+    if (editorView) RichTextMenu.Instance.setFontFamily(key);
+    else Doc.UserDoc().fontFamily = key;
+});
diff --git a/src/client/views/linking/LinkPopup.scss b/src/client/views/linking/LinkPopup.scss
index b20ad9476..4bfb4b0b9 100644
--- a/src/client/views/linking/LinkPopup.scss
+++ b/src/client/views/linking/LinkPopup.scss
@@ -4,7 +4,6 @@
     top: 0;
     height: 200px;
     width: 200px;
-    position: absolute;
     // padding: 15px;
     border-radius: 3px;
 
@@ -37,8 +36,4 @@
             margin: auto;
         }
     }
-
-    .searchBox-container {
-        background: pink;
-    }
 }
diff --git a/src/client/views/linking/LinkPopup.tsx b/src/client/views/linking/LinkPopup.tsx
index 745efea08..6895c0746 100644
--- a/src/client/views/linking/LinkPopup.tsx
+++ b/src/client/views/linking/LinkPopup.tsx
@@ -14,7 +14,6 @@ import React = require('react');
 import { OpenWhere } from '../nodes/DocumentView';
 
 interface LinkPopupProps {
-    showPopup: boolean;
     linkFrom?: () => Doc | undefined;
     linkCreateAnchor?: () => Doc | undefined;
     linkCreated?: (link: Doc) => void;
@@ -44,10 +43,9 @@ export class LinkPopup extends React.Component<LinkPopupProps> {
     getPHeight = () => 500;
 
     render() {
-        const popupVisibility = this.props.showPopup ? 'block' : 'none';
         const linkDoc = this.props.linkFrom ? this.props.linkFrom : undefined;
         return (
-            <div className="linkPopup-container" style={{ display: popupVisibility }}>
+            <div className="linkPopup-container">
                 {/* <div className="linkPopup-url-container">
                     <input autoComplete="off" type="text" value={this.linkURL} placeholder="Enter URL..." onChange={this.onLinkChange} />
                     <button onPointerDown={e => this.makeLinkToURL(this.linkURL, "add:right")}
diff --git a/src/client/views/newlightbox/ButtonMenu/ButtonMenu.scss b/src/client/views/newlightbox/ButtonMenu/ButtonMenu.scss
new file mode 100644
index 000000000..74fbfbb2c
--- /dev/null
+++ b/src/client/views/newlightbox/ButtonMenu/ButtonMenu.scss
@@ -0,0 +1,15 @@
+@import '../NewLightboxStyles.scss';
+
+.newLightboxButtonMeny-container {
+    width: 100vw;
+    height: 100vh;
+  
+    &.dark {
+      background: $black;
+    }
+  
+    &.light,
+    &.default {
+      background: $white;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx b/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx
new file mode 100644
index 000000000..0ede75407
--- /dev/null
+++ b/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx
@@ -0,0 +1,53 @@
+import './ButtonMenu.scss';
+import * as React from 'react';
+import { IButtonMenu } from "./utils";
+import { NewLightboxView } from '../NewLightboxView';
+import { SelectionManager } from '../../../util/SelectionManager';
+import { CollectionDockingView } from '../../collections/CollectionDockingView';
+import { OpenWhereMod } from '../../nodes/DocumentView';
+import { Doc } from '../../../../fields/Doc';
+import { InkTool } from '../../../../fields/InkField';
+import { MainView } from '../../MainView';
+import { action } from 'mobx';
+
+export const ButtonMenu = (props: IButtonMenu) => {
+    
+    return <div className={`newLightboxButtonMenu-container`}>
+        <div
+                    className="newLightboxView-navBtn"
+                    title="toggle fit width"
+                    onClick={e => {
+                        e.stopPropagation();
+                        NewLightboxView.NewLightboxDoc!._fitWidth = !NewLightboxView.NewLightboxDoc!._fitWidth;
+                    }}>
+                </div>
+                <div
+                    className="newLightboxView-tabBtn"
+                    title="open in tab"
+                    onClick={e => {
+                        e.stopPropagation();
+                        CollectionDockingView.AddSplit(NewLightboxView.NewLightboxDoc || NewLightboxView.NewLightboxDoc!, OpenWhereMod.none);
+                        SelectionManager.DeselectAll();
+                        NewLightboxView.SetNewLightboxDoc(undefined);
+                    }}>
+                </div>
+                <div
+                    className="newLightboxView-penBtn"
+                    title="toggle pen annotation"
+                    style={{ background: Doc.ActiveTool === InkTool.Pen ? 'white' : undefined }}
+                    onClick={e => {
+                        e.stopPropagation();
+                        Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen;
+                    }}>
+                </div>
+                <div
+                    className="newLightboxView-exploreBtn"
+                    title="toggle explore mode to navigate among documents only"
+                    style={{ background: MainView.Instance._exploreMode ? 'white' : undefined }}
+                    onClick={action(e => {
+                        e.stopPropagation();
+                        MainView.Instance._exploreMode = !MainView.Instance._exploreMode;
+                    })}>
+                </div>
+    </div>
+}
\ No newline at end of file
diff --git a/src/client/views/newlightbox/ButtonMenu/index.ts b/src/client/views/newlightbox/ButtonMenu/index.ts
new file mode 100644
index 000000000..f53a8c729
--- /dev/null
+++ b/src/client/views/newlightbox/ButtonMenu/index.ts
@@ -0,0 +1 @@
+export * from './ButtonMenu'
\ No newline at end of file
diff --git a/src/client/views/newlightbox/ButtonMenu/utils.ts b/src/client/views/newlightbox/ButtonMenu/utils.ts
new file mode 100644
index 000000000..096ea87ad
--- /dev/null
+++ b/src/client/views/newlightbox/ButtonMenu/utils.ts
@@ -0,0 +1,3 @@
+export interface IButtonMenu {
+
+}
\ No newline at end of file
diff --git a/src/client/views/newlightbox/ExploreView/ExploreView.scss b/src/client/views/newlightbox/ExploreView/ExploreView.scss
new file mode 100644
index 000000000..5a8ab2f87
--- /dev/null
+++ b/src/client/views/newlightbox/ExploreView/ExploreView.scss
@@ -0,0 +1,44 @@
+@import '../NewLightboxStyles.scss';
+
+.exploreView-container {
+    width: 100%;
+    height: 100%;
+    border-radius: 20px;
+    position: relative;
+    // transform: scale(1);
+    background: $gray-l1;
+    border-top: $standard-border;
+    border-color: $gray-l2;
+    border-radius: 0px 0px 20px 20px;
+    transform-origin: 50% 50%;
+    overflow: hidden;
+
+    &.dark {
+      background: $black;
+    }
+  
+    &.light,
+    &.default {
+      background: $gray-l1;
+    }
+
+    .exploreView-doc {
+      width: 60px;
+      height: 80px;
+      position: absolute;
+      background: $blue-l2;
+      // opacity: 0.8;
+      transform-origin: 50% 50%;
+      transform: translate(-50%, -50%) scale(1);
+      cursor: pointer;
+      transition: 0.2s ease;
+      overflow: hidden;
+      font-size: 9px;
+      padding: 10px;
+      border-radius: 5px;
+
+      &:hover {
+        transform: translate(calc(-50% * 1.125), calc(-50% * 1.125)) scale(1.5);
+      }
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/newlightbox/ExploreView/ExploreView.tsx b/src/client/views/newlightbox/ExploreView/ExploreView.tsx
new file mode 100644
index 000000000..855bfd9e2
--- /dev/null
+++ b/src/client/views/newlightbox/ExploreView/ExploreView.tsx
@@ -0,0 +1,30 @@
+import './ExploreView.scss';
+import { IBounds, IExploreView, emptyBounds } from "./utils";
+import { IRecommendation } from "../components";
+import * as React from 'react';
+import { NewLightboxView } from '../NewLightboxView';
+import { StrCast } from '../../../../fields/Types';
+
+
+
+export const ExploreView = (props: IExploreView) => {
+    const { recs, bounds=emptyBounds } = props
+    
+    return <div className={`exploreView-container`}>
+        {recs && recs.map((rec) => {
+            console.log(rec.embedding, bounds)
+            const x_bound: number = Math.max(Math.abs(bounds.max_x), Math.abs(bounds.min_x))
+            const y_bound: number = Math.max(Math.abs(bounds.max_y), Math.abs(bounds.min_y))
+            console.log(x_bound, y_bound)
+            if (rec.embedding) {
+                const x = (rec.embedding.x / x_bound) * 50;
+                const y = (rec.embedding.y / y_bound) * 50;
+                console.log(x, y)
+                return <div className={`exploreView-doc`} onClick={() => {}} style={{top: `calc(50% + ${y}%)`, left: `calc(50% + ${x}%)`}}>
+                    {rec.title}
+                </div>
+            } else return (null)
+        })}
+        <div className={`exploreView-doc`} style={{top: `calc(50% + ${0}%)`, left: `calc(50% + ${0}%)`, background: '#073763', color: 'white'}}>{StrCast(NewLightboxView.NewLightboxDoc?.title)}</div>
+    </div>
+}
\ No newline at end of file
diff --git a/src/client/views/newlightbox/ExploreView/index.ts b/src/client/views/newlightbox/ExploreView/index.ts
new file mode 100644
index 000000000..bf94eedcd
--- /dev/null
+++ b/src/client/views/newlightbox/ExploreView/index.ts
@@ -0,0 +1 @@
+export * from './ExploreView'
\ No newline at end of file
diff --git a/src/client/views/newlightbox/ExploreView/utils.ts b/src/client/views/newlightbox/ExploreView/utils.ts
new file mode 100644
index 000000000..7d9cf226d
--- /dev/null
+++ b/src/client/views/newlightbox/ExploreView/utils.ts
@@ -0,0 +1,20 @@
+import { IRecommendation } from "../components";
+
+export interface IExploreView {
+    recs?: IRecommendation[],
+    bounds?: IBounds
+}
+
+export const emptyBounds = {
+    max_x: 0,
+    max_y: 0,
+    min_x: 0,
+    min_y: 0
+}
+
+export interface IBounds {
+    max_x: number,
+    max_y: number,
+    min_x: number,
+    min_y: number
+}
\ No newline at end of file
diff --git a/src/client/views/newlightbox/Header/LightboxHeader.scss b/src/client/views/newlightbox/Header/LightboxHeader.scss
new file mode 100644
index 000000000..a9e60ea98
--- /dev/null
+++ b/src/client/views/newlightbox/Header/LightboxHeader.scss
@@ -0,0 +1,71 @@
+@import '../NewLightboxStyles.scss';
+
+.newLightboxHeader-container {
+    width: 100%;
+    height: 100%;
+    background: $gray-l1;
+    border-radius: 20px 20px 0px 0px;
+    padding: 20px;
+    display: grid;
+    grid-template-columns: 70% 30%;
+    grid-template-rows: 50% 50%;
+
+    .title-container,
+    .type-container {
+        display: flex;
+        flex-direction: row;
+        gap: 5px;
+        justify-content: flex-start;
+        align-items: center;
+    }
+
+    .title-container {
+        grid-column: 1;
+        grid-row: 1;
+    }
+
+    .type-container {
+        grid-column: 1;
+        grid-row: 2;
+        .type {
+            padding: 2px 7px !important;
+            background: $gray-l2;
+        }
+    }
+
+    .lb-label {
+        color: $gray-l3;
+        font-weight: $h1-weight;
+    }
+
+    .lb-button {
+        border: solid 1.5px black;
+        padding: 3px 5px;
+        cursor: pointer;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-evenly;
+        align-items: center;
+        transition: 0.2s ease;
+        gap: 5px; 
+        font-size: $body-size;
+        height: fit-content;
+
+        &:hover {
+            background: $gray-l2;
+        }
+
+        &.true {
+            background: $blue-l1;
+        }
+    }
+    
+    &.dark {
+      background: $black;
+    }
+  
+    &.light,
+    &.default {
+      background: $white;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/newlightbox/Header/LightboxHeader.tsx b/src/client/views/newlightbox/Header/LightboxHeader.tsx
new file mode 100644
index 000000000..a272ce294
--- /dev/null
+++ b/src/client/views/newlightbox/Header/LightboxHeader.tsx
@@ -0,0 +1,62 @@
+import './LightboxHeader.scss';
+import * as React from 'react';
+import { INewLightboxHeader } from "./utils";
+import { NewLightboxView } from '../NewLightboxView';
+import { StrCast } from '../../../../fields/Types';
+import { EditableText } from '../components/EditableText';
+import { getType } from '../utils';
+import { Button, IconButton, Size, Type } from 'browndash-components';
+import { MdExplore, MdTravelExplore } from 'react-icons/md'
+import { BsBookmark, BsBookmarkFill } from 'react-icons/bs'
+import { Doc } from '../../../../fields/Doc';
+import { LightboxView } from '../../LightboxView';
+import { Colors } from '../../global/globalEnums';
+
+
+export const NewLightboxHeader = (props: INewLightboxHeader) => {
+    const {height = 100, width} = props;
+    const [doc, setDoc] = React.useState<Doc | undefined>(LightboxView.LightboxDoc)
+    const [editing, setEditing] = React.useState<boolean>(false)
+    const [title, setTitle] = React.useState<JSX.Element | null>(
+        (null)
+    )
+    React.useEffect(() => {
+        let lbDoc = LightboxView.LightboxDoc
+        setDoc(lbDoc)
+        if (lbDoc) {
+            setTitle(
+                <EditableText 
+                editing={editing}
+                text={StrCast(lbDoc.title)} 
+                onEdit={(newText: string) => {
+                    if(lbDoc) lbDoc.title = newText;
+                }} 
+                setEditing={setEditing}            
+            />)
+        }
+    }, [LightboxView.LightboxDoc])
+
+    const [saved, setSaved] = React.useState<boolean>(false)
+
+    if (!doc) return null
+    else return <div className={`newLightboxHeader-container`} onPointerDown={(e) => e.stopPropagation()} style={{ minHeight: height, height: height, width: width }}>
+        <div className={`title-container`}>
+            <div className={`lb-label`}>Title</div>
+            {title}
+        </div>
+        <div className={`type-container`}>
+            <div className={`lb-label`}>Type</div>
+            <div className={`type`}>{getType(StrCast(doc.type))}</div>
+        </div>
+        <div style={{gridColumn: 2, gridRow: 1, height: '100%', display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}>
+            <IconButton size={Size.XSMALL} onClick={() => setSaved(!saved)} color={Colors.DARK_GRAY} icon={saved ? <BsBookmarkFill/> : <BsBookmark/>}/>
+            <IconButton size={Size.XSMALL} onClick={() => setSaved(!saved)} color={Colors.DARK_GRAY} icon={saved ? <BsBookmarkFill/> : <BsBookmark/>}/>
+        </div>
+        <div  style={{gridColumn: 2, gridRow: 2, height: '100%', display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}>
+            <Button onClick={() => {
+                console.log(NewLightboxView.ExploreMode)
+                NewLightboxView.SetExploreMode(!NewLightboxView.ExploreMode)
+            }} size={Size.XSMALL} color={Colors.DARK_GRAY} type={Type.SEC} text={"t-SNE 2D Embeddings"} icon={<MdTravelExplore/>}/>
+        </div>
+    </div>
+}
\ No newline at end of file
diff --git a/src/client/views/newlightbox/Header/index.ts b/src/client/views/newlightbox/Header/index.ts
new file mode 100644
index 000000000..090677c16
--- /dev/null
+++ b/src/client/views/newlightbox/Header/index.ts
@@ -0,0 +1 @@
+export * from './LightboxHeader'
\ No newline at end of file
diff --git a/src/client/views/newlightbox/Header/utils.ts b/src/client/views/newlightbox/Header/utils.ts
new file mode 100644
index 000000000..22e0487c2
--- /dev/null
+++ b/src/client/views/newlightbox/Header/utils.ts
@@ -0,0 +1,4 @@
+export interface INewLightboxHeader {
+    height?: number
+    width?: number
+}
\ No newline at end of file
diff --git a/src/client/views/newlightbox/NewLightboxStyles.scss b/src/client/views/newlightbox/NewLightboxStyles.scss
new file mode 100644
index 000000000..ff4a6c971
--- /dev/null
+++ b/src/client/views/newlightbox/NewLightboxStyles.scss
@@ -0,0 +1,73 @@
+$white: white;
+$black: black;
+
+// gray
+$gray-l1: rgba(230, 230, 230, 1);
+$gray-l2: rgb(201, 201, 201);
+$gray-l3: rgba(87, 87, 87, 1);
+
+// blue
+$blue-l1: #cfe2f3;
+$blue-l2: #6fa8dc;
+$blue-l3: #0b5394;
+$blue-l4: #073763;
+
+// view backgrounds
+$background-dm: black;
+$background-lm: white;
+$header-dm: $gray-l3;
+$header-lm: $gray-l1;
+
+// border
+$standard-border: solid 2px;
+
+// standard shadow
+
+
+$text-color-dm: $gray-l1;
+$text-color-lm: $gray-l3;
+
+
+// text / font
+$title-size: 2rem;
+$title-weight: 700;
+
+$h1-size: 15px;
+$h1-weight: 700;
+
+$h2-size: 13px;
+$h2-weight: 600;
+
+
+$body-size: 10px;
+$body-weight: 400;
+
+// header
+$header-height: 40px;
+
+@keyframes skeleton-loading-l3 {
+    0% {
+      background-color: rgba(128, 128, 128, 1);
+    }
+    100% {
+      background-color: rgba(128, 128, 128, 0.5);
+    }
+}
+
+@keyframes skeleton-loading-l2 {
+    0% {
+      background-color: rgba(182, 182, 182, 1);
+    }
+    100% {
+      background-color: rgba(182, 182, 182, 0.5);
+    }
+}
+
+@keyframes skeleton-loading-l1 {
+    0% {
+      background-color: rgba(230, 230, 230, 1);
+    }
+    100% {
+      background-color: rgba(230, 230, 230, 0.5);
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/newlightbox/NewLightboxView.scss b/src/client/views/newlightbox/NewLightboxView.scss
new file mode 100644
index 000000000..76c34bcf9
--- /dev/null
+++ b/src/client/views/newlightbox/NewLightboxView.scss
@@ -0,0 +1,34 @@
+@import './NewLightboxStyles.scss';
+
+.newLightboxView-frame {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #474545bb;
+    backdrop-filter: blur(4px);
+    z-index: 1000;
+
+    .app-document {
+        width: 100%;
+        height: 100%;
+        display: grid;
+    }
+
+    .explore {
+        width: 100%;
+        height: 100%;
+        display: grid;
+    }
+
+    .newLightboxView-contents {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+
+        .newLightboxView-doc {
+            position: relative;
+        }
+    }
+}
diff --git a/src/client/views/newlightbox/NewLightboxView.tsx b/src/client/views/newlightbox/NewLightboxView.tsx
new file mode 100644
index 000000000..c5e98da86
--- /dev/null
+++ b/src/client/views/newlightbox/NewLightboxView.tsx
@@ -0,0 +1,388 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { action, computed, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnTrue } from '../../../Utils';
+import { Doc, DocListCast, Opt, StrListCast } from '../../../fields/Doc';
+import { InkTool } from '../../../fields/InkField';
+import { Cast, NumCast, StrCast } from '../../../fields/Types';
+import { DocUtils } from '../../documents/Documents';
+import { DocumentManager } from '../../util/DocumentManager';
+import { LinkManager } from '../../util/LinkManager';
+import { SelectionManager } from '../../util/SelectionManager';
+import { Transform } from '../../util/Transform';
+import { GestureOverlay } from '../GestureOverlay';
+import { MainView } from '../MainView';
+import { DefaultStyleProvider } from '../StyleProvider';
+import { CollectionStackedTimeline } from '../collections/CollectionStackedTimeline';
+import { TabDocView } from '../collections/TabDocView';
+import { DocumentView, OpenWhere } from '../nodes/DocumentView';
+import { ExploreView } from './ExploreView';
+import { IBounds, emptyBounds } from './ExploreView/utils';
+import { NewLightboxHeader } from './Header';
+import './NewLightboxView.scss';
+import { RecommendationList } from './RecommendationList';
+import { IRecommendation } from './components';
+import { fetchKeywords, fetchRecommendations } from './utils';
+import { List } from '../../../fields/List';
+import { LightboxView } from '../LightboxView';
+
+enum LightboxStatus {
+    RECOMMENDATIONS = "recommendations",
+    ANNOTATIONS = "annotations",
+    NONE = "none"
+}
+
+interface LightboxViewProps {
+    PanelWidth: number;
+    PanelHeight: number;
+    maxBorder: number[];
+}
+
+type LightboxSavedState = {
+    panX: Opt<number>;
+    panY: Opt<number>;
+    scale: Opt<number>;
+    scrollTop: Opt<number>;
+    layout_fieldKey: Opt<string>;
+};
+@observer
+export class NewLightboxView extends React.Component<LightboxViewProps> {
+    @computed public static get LightboxDoc() {
+        return this._doc;
+    }
+    private static LightboxDocTemplate = () => NewLightboxView._layoutTemplate;
+    @observable private static _layoutTemplate: Opt<Doc>;
+    @observable private static _layoutTemplateString: Opt<string>;
+    @observable private static _doc: Opt<Doc>;
+    @observable private static _docTarget: Opt<Doc>;
+    @observable private static _docFilters: string[] = []; // filters
+    private static _savedState: Opt<LightboxSavedState>;
+    private static _history: Opt<{ doc: Doc; target?: Doc }[]> = [];
+    @observable private static _future: Opt<Doc[]> = [];
+    @observable private static _docView: Opt<DocumentView>;
+
+    // keywords
+    @observable private static _keywords: string[] = []
+    @action public static SetKeywords(kw: string[]) {
+        this._keywords = kw
+    }
+    @computed public static get Keywords() {
+        return this._keywords
+    }
+
+    // query
+    @observable private static _query: string = ''
+    @action public static SetQuery(query: string) {
+        this._query = query
+    }
+    @computed public static get Query() {
+        return this._query
+    }
+
+    // keywords
+    @observable private static _recs: IRecommendation[] = []
+    @action public static SetRecs(recs: IRecommendation[]) {
+        this._recs = recs
+    }
+    @computed public static get Recs() {
+        return this._recs
+    }
+
+    // bounds
+    @observable private static _bounds: IBounds = emptyBounds;
+    @action public static SetBounds(bounds: IBounds) {
+        this._bounds = bounds;
+    }
+    @computed public static get Bounds() {
+        return this._bounds;
+    }
+
+    // explore
+    @observable private static _explore: Opt<boolean> = false;
+    @action public static SetExploreMode(status: Opt<boolean>) {
+        this._explore = status;
+    }
+    @computed public static get ExploreMode() {
+        return this._explore;
+    }
+
+    // newLightbox sidebar status
+    @observable private static _sidebarStatus: Opt<string> = "";
+    @action public static SetSidebarStatus(sidebarStatus: Opt<string>) {
+        this._sidebarStatus = sidebarStatus;
+    }
+    @computed public static get SidebarStatus() {
+        return this._sidebarStatus;
+    }
+
+    static path: { doc: Opt<Doc>; target: Opt<Doc>; history: Opt<{ doc: Doc; target?: Doc }[]>; future: Opt<Doc[]>; saved: Opt<LightboxSavedState> }[] = [];
+    @action public static SetNewLightboxDoc(doc: Opt<Doc>, target?: Doc, future?: Doc[], layoutTemplate?: Doc | string) {
+        if (this.LightboxDoc && this.LightboxDoc !== doc && this._savedState) {
+            if (this._savedState.panX !== undefined) this.LightboxDoc._freeform_panX = this._savedState.panX;
+            if (this._savedState.panY !== undefined) this.LightboxDoc._freeform_panY = this._savedState.panY;
+            if (this._savedState.scrollTop !== undefined) this.LightboxDoc._layout_scrollTop = this._savedState.scrollTop;
+            if (this._savedState.scale !== undefined) this.LightboxDoc._freeform_scale = this._savedState.scale;
+            this.LightboxDoc.layout_fieldKey = this._savedState.layout_fieldKey;
+        }
+        if (!doc) {
+            this._docFilters && (this._docFilters.length = 0);
+            this._future = this._history = [];
+            Doc.ActiveTool = InkTool.None;
+            MainView.Instance._exploreMode = false;
+        } else {
+            const l = DocUtils.MakeLinkToActiveAudio(() => doc).lastElement();
+            l && (Cast(l.link_anchor_2, Doc, null).backgroundColor = 'lightgreen');
+            CollectionStackedTimeline.CurrentlyPlaying?.forEach(dv => dv.ComponentView?.Pause?.());
+            //TabDocView.PinDoc(doc, { hidePresBox: true });
+            this._history ? this._history.push({ doc, target }) : (this._history = [{ doc, target }]);
+            if (doc !== LightboxView.LightboxDoc) {
+                this._savedState = {
+                    layout_fieldKey: StrCast(doc.layout_fieldKey),
+                    panX: Cast(doc.freeform_panX, 'number', null),
+                    panY: Cast(doc.freeform_panY, 'number', null),
+                    scale: Cast(doc.freeform_scale, 'number', null),
+                    scrollTop: Cast(doc.layout_scrollTop, 'number', null),
+                };
+            }
+        }
+        if (future) {
+            this._future = [
+                ...(this._future ?? []),
+                ...(this.LightboxDoc ? [this.LightboxDoc] : []),
+                ...future
+                    .slice()
+                    .sort((a, b) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow))
+                    .sort((a, b) => LinkManager.Links(a).length - LinkManager.Links(b).length),
+            ];
+        }
+        this._doc = doc;
+        this._layoutTemplate = layoutTemplate instanceof Doc ? layoutTemplate : undefined;
+        if (doc && (typeof layoutTemplate === 'string' ? layoutTemplate : undefined)) {
+            doc.layout_fieldKey = layoutTemplate;
+        }
+        this._docTarget = target || doc;
+
+        return true;
+    }
+    public static IsNewLightboxDocView(path: DocumentView[]) {
+        return (path ?? []).includes(this._docView!);
+    }
+    @computed get leftBorder() {
+        return Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]);
+    }
+    @computed get topBorder() {
+        return Math.min(this.props.PanelHeight / 4, this.props.maxBorder[1]);
+    }
+    newLightboxWidth = () => this.props.PanelWidth - 420;
+    newLightboxHeight = () => this.props.PanelHeight - 140;
+    newLightboxScreenToLocal = () => new Transform(-this.leftBorder, -this.topBorder, 1);
+    navBtn = (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: string, display: () => string, click: (e: React.MouseEvent) => void, color?: string) => {
+        return (
+            <div
+                className="newLightboxView-navBtn-frame"
+                style={{
+                    display: display(),
+                    left,
+                    width: bottom !== undefined ? undefined : Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]),
+                    bottom,
+                }}>
+                <div className="newLightboxView-navBtn" title={color} style={{ top, color: color ? 'red' : 'white', background: color ? 'white' : undefined }} onClick={click}>
+                    <div style={{ height: 10 }}>{color}</div>
+                    <FontAwesomeIcon icon={icon as any} size="3x" />
+                </div>
+            </div>
+        );
+    };
+    public static GetSavedState(doc: Doc) {
+        return this.LightboxDoc === doc && this._savedState ? this._savedState : undefined;
+    }
+
+    // adds a cookie to the newLightbox view - the cookie becomes part of a filter which will display any documents whose cookie metadata field matches this cookie
+    @action
+    public static SetCookie(cookie: string) {
+        if (this.LightboxDoc && cookie) {
+            this._docFilters = (f => (this._docFilters ? [this._docFilters.push(f) as any, this._docFilters][1] : [f]))(`cookies:${cookie}:provide`);
+        }
+    }
+    public static AddDocTab = (doc: Doc, location: OpenWhere, layoutTemplate?: Doc | string) => {
+        SelectionManager.DeselectAll();
+        return NewLightboxView.SetNewLightboxDoc(
+            doc,
+            undefined,
+            [...DocListCast(doc[Doc.LayoutFieldKey(doc)]), ...DocListCast(doc[Doc.LayoutFieldKey(doc) + '_annotations']).filter(anno => anno.annotationOn !== doc), ...(NewLightboxView._future ?? [])].sort(
+                (a: Doc, b: Doc) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow)
+            ),
+            layoutTemplate
+        );
+    };
+    docFilters = () => NewLightboxView._docFilters || [];
+    addDocTab = NewLightboxView.AddDocTab;
+    @action public static Next() {
+        const doc = NewLightboxView._doc!;
+        const target = (NewLightboxView._docTarget = this._future?.pop());
+        const targetDocView = target && DocumentManager.Instance.getLightboxDocumentView(target);
+        if (targetDocView && target) {
+            const l = DocUtils.MakeLinkToActiveAudio(() => targetDocView.ComponentView?.getAnchor?.(true) || target).lastElement();
+            l && (Cast(l.link_anchor_2, Doc, null).backgroundColor = 'lightgreen');
+            DocumentManager.Instance.showDocument(target, { willZoomCentered: true, zoomScale: 0.9 });
+            if (NewLightboxView._history?.lastElement().target !== target) NewLightboxView._history?.push({ doc, target });
+        } else {
+            if (!target && NewLightboxView.path.length) {
+                const saved = NewLightboxView._savedState;
+                if (LightboxView.LightboxDoc && saved) {
+                    LightboxView.LightboxDoc._freeform_panX = saved.panX;
+                    LightboxView.LightboxDoc._freeform_panY = saved.panY;
+                    LightboxView.LightboxDoc._freeform_scale = saved.scale;
+                    LightboxView.LightboxDoc._layout_scrollTop = saved.scrollTop;
+                }
+                const pop = NewLightboxView.path.pop();
+                if (pop) {
+                    NewLightboxView._doc = pop.doc;
+                    NewLightboxView._docTarget = pop.target;
+                    NewLightboxView._future = pop.future;
+                    NewLightboxView._history = pop.history;
+                    NewLightboxView._savedState = pop.saved;
+                }
+            } else {
+                NewLightboxView.SetNewLightboxDoc(target);
+            }
+        }
+    }
+
+    @action public static Previous() {
+        const previous = NewLightboxView._history?.pop();
+        if (!previous || !NewLightboxView._history?.length) {
+            NewLightboxView.SetNewLightboxDoc(undefined);
+            return;
+        }
+        const { doc, target } = NewLightboxView._history?.lastElement();
+        const docView = DocumentManager.Instance.getLightboxDocumentView(target || doc);
+        if (docView) {
+            NewLightboxView._docTarget = target;
+            target && DocumentManager.Instance.showDocument(target, { willZoomCentered: true, zoomScale: 0.9 });
+        } else {
+            NewLightboxView.SetNewLightboxDoc(doc, target);
+        }
+        if (NewLightboxView._future?.lastElement() !== previous.target || previous.doc) NewLightboxView._future?.push(previous.target || previous.doc);
+    }
+    @action
+    stepInto = () => {
+        NewLightboxView.path.push({
+            doc: LightboxView.LightboxDoc,
+            target: NewLightboxView._docTarget,
+            future: NewLightboxView._future,
+            history: NewLightboxView._history,
+            saved: NewLightboxView._savedState,
+        });
+        const coll = NewLightboxView._docTarget;
+        if (coll) {
+            const fieldKey = Doc.LayoutFieldKey(coll);
+            const contents = [...DocListCast(coll[fieldKey]), ...DocListCast(coll[fieldKey + '_annotations'])];
+            const links = LinkManager.Links(coll)
+                .map(link => LinkManager.getOppositeAnchor(link, coll))
+                .filter(doc => doc)
+                .map(doc => doc!);
+            NewLightboxView.SetNewLightboxDoc(coll, undefined, contents.length ? contents : links);
+        }
+    };
+
+    @computed
+    get documentView() {
+        if (!LightboxView.LightboxDoc) return null
+        else return (<GestureOverlay isActive={true}>
+                            <DocumentView
+                                ref={action((r: DocumentView | null) => (NewLightboxView._docView = r !== null ? r : undefined))}
+                                Document={LightboxView.LightboxDoc}
+                                DataDoc={undefined}
+                                PanelWidth={this.newLightboxWidth}
+                                PanelHeight={this.newLightboxHeight}
+                                LayoutTemplate={NewLightboxView.LightboxDocTemplate}
+                                isDocumentActive={returnTrue} // without this being true, sidebar annotations need to be activated before text can be selected.
+                                isContentActive={returnTrue}
+                                styleProvider={DefaultStyleProvider}
+                                ScreenToLocalTransform={this.newLightboxScreenToLocal}
+                                renderDepth={0}
+                                rootSelected={returnTrue}
+                                docViewPath={returnEmptyDoclist}
+                                docFilters={this.docFilters}
+                                docRangeFilters={returnEmptyFilter}
+                                searchFilterDocs={returnEmptyDoclist}
+                                addDocument={undefined}
+                                removeDocument={undefined}
+                                whenChildContentsActiveChanged={emptyFunction}
+                                addDocTab={this.addDocTab}
+                                pinToPres={TabDocView.PinDoc}
+                                bringToFront={emptyFunction}
+                                onBrowseClick={MainView.Instance.exploreMode}
+                                focus={emptyFunction}
+                            />
+                        </GestureOverlay>)
+    }
+
+    future = () => NewLightboxView._future;
+    render() {
+        let newLightboxHeaderHeight = 100;
+        let downx = 0,
+            downy = 0;
+        return !LightboxView.LightboxDoc ? null : (
+            <div
+                className="newLightboxView-frame"
+                onPointerDown={e => {
+                    downx = e.clientX;
+                    downy = e.clientY;
+                }}
+                onClick={e => {
+                    if (Math.abs(downx - e.clientX) < 4 && Math.abs(downy - e.clientY) < 4) {
+                        NewLightboxView.SetNewLightboxDoc(undefined);
+                    }
+                }}>
+                <div className={`app-document`} style={{gridTemplateColumns: `calc(100% - 400px) 400px`}}>
+                <div
+                    className="newLightboxView-contents"
+                    style={{
+                        top: 20,
+                        left: 20,
+                        width: this.newLightboxWidth(),
+                        height: this.newLightboxHeight() - 40,
+                    }}>
+                        <NewLightboxHeader height={newLightboxHeaderHeight} width={this.newLightboxWidth()} />
+                        {!NewLightboxView._explore ? 
+                            <div className="newLightboxView-doc" style={{height: this.newLightboxHeight()}}>
+                                {this.documentView}
+                            </div>
+                        :
+                            <div className={`explore`}>
+                                <ExploreView recs={NewLightboxView.Recs} bounds={NewLightboxView.Bounds}/>
+                            </div>
+                        }
+                </div>
+                    <RecommendationList keywords={NewLightboxView.Keywords}/>
+                </div>
+                
+            </div>
+        );
+    }
+}
+interface NewLightboxTourBtnProps {
+    navBtn: (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: string, display: () => string, click: (e: React.MouseEvent) => void, color?: string) => JSX.Element;
+    future: () => Opt<Doc[]>;
+    stepInto: () => void;
+}
+@observer
+export class NewLightboxTourBtn extends React.Component<NewLightboxTourBtnProps> {
+    render() {
+        return this.props.navBtn(
+            '50%',
+            0,
+            0,
+            'chevron-down',
+            () => (LightboxView.LightboxDoc /*&& this.props.future()?.length*/ ? '' : 'none'),
+            e => {
+                e.stopPropagation();
+                this.props.stepInto();
+            },
+            ''
+        );
+    }
+}
diff --git a/src/client/views/newlightbox/RecommendationList/RecommendationList.scss b/src/client/views/newlightbox/RecommendationList/RecommendationList.scss
new file mode 100644
index 000000000..40dd47e47
--- /dev/null
+++ b/src/client/views/newlightbox/RecommendationList/RecommendationList.scss
@@ -0,0 +1,117 @@
+@import '../NewLightboxStyles.scss';
+
+.recommendationlist-container {
+    height: calc(100% - 40px);
+    margin: 20px;
+    border-radius: 20px;
+    overflow-y: scroll;
+
+    .recommendations {
+      height: fit-content;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+      background: $gray-l1;
+      border-radius: 0px 0px 20px 20px;
+    }
+
+    .header {
+      top: 0px;
+      position: sticky;
+      background: $gray-l1;
+      border-bottom: $standard-border;
+      border-color: $gray-l2;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: flex-start;
+      border-radius: 20px 20px 0px 0px;
+      padding: 20px;
+      z-index: 2;
+      gap: 10px;
+      color: $text-color-lm;
+
+      .lb-label {
+        color: $gray-l3;
+        font-weight: $h1-weight;
+        font-size: $body-size;
+      }
+
+      .lb-caret {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 5px;
+        cursor: pointer;
+        width: 100%;
+        user-select: none;
+        font-size: $body-size;
+      }
+
+      .more {
+        width: 100%;
+      }
+
+      &.dark {
+        color: $text-color-dm;
+      }
+
+      .title {
+        height: 30px;
+        min-height: 30px;
+        font-size: $h1-size;
+        font-weight: $h1-weight;
+        text-align: left;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+      }
+
+      .keywords {
+        display: flex;
+        flex-flow: row wrap;
+        gap: 5px;
+
+        .keyword-input {
+          padding: 3px 7px;
+          background: $gray-l2;
+          outline: none;
+          border: none;
+          height: 21.5px;
+          color: $text-color-lm;
+        }
+
+        .keyword {
+          padding: 3px 7px;
+          width: fit-content;
+          background: $gray-l2;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-direction: row;
+          gap: 10px;
+          font-size: $body-size;
+          font-weight: $body-weight;
+
+          &.loading {
+            animation: skeleton-loading-l2 1s linear infinite alternate;
+            min-width: 70px;
+            height: 21.5px;
+          }
+        }
+
+      }
+    }
+  
+    &.dark {
+      background: $black;
+    }
+  
+    &.light,
+    &.default {
+      background: $gray-l1;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/newlightbox/RecommendationList/RecommendationList.tsx b/src/client/views/newlightbox/RecommendationList/RecommendationList.tsx
new file mode 100644
index 000000000..9f3c32e4e
--- /dev/null
+++ b/src/client/views/newlightbox/RecommendationList/RecommendationList.tsx
@@ -0,0 +1,196 @@
+import { GrClose } from 'react-icons/gr';
+import { IRecommendation, Recommendation } from "../components";
+import './RecommendationList.scss';
+import * as React from 'react';
+import { IRecommendationList } from "./utils";
+import { NewLightboxView } from '../NewLightboxView';
+import { DocCast, StrCast } from '../../../../fields/Types';
+import { FaCaretDown, FaCaretUp } from 'react-icons/fa';
+import { Doc, DocListCast, StrListCast } from '../../../../fields/Doc';
+import { IDocRequest, fetchKeywords, fetchRecommendations } from '../utils';
+import { IBounds } from '../ExploreView/utils';
+import { List } from '../../../../fields/List';
+import { Id } from '../../../../fields/FieldSymbols';
+import { LightboxView } from '../../LightboxView';
+import { IconButton, Size, Type } from 'browndash-components';
+import { Colors } from '../../global/globalEnums';
+
+export const RecommendationList = (props: IRecommendationList) => {
+    const {loading, keywords} = props
+    const [loadingKeywords, setLoadingKeywords] = React.useState<boolean>(true)
+    const [showMore, setShowMore] = React.useState<boolean>(false)
+    const [keywordsLoc, setKeywordsLoc] = React.useState<string[]>([])
+    const [update, setUpdate] = React.useState<boolean>(true)
+    const initialRecs: IRecommendation[] = [
+        {loading: true},
+        {loading: true},
+        {loading: true},
+        {loading: true},
+        {loading: true}
+    ];
+    const [recs, setRecs] = React.useState<IRecommendation[]>(initialRecs)
+
+    React.useEffect(() => {
+        const getKeywords = async () => {
+            let text = StrCast(LightboxView.LightboxDoc?.text)
+            console.log('[1] fetching keywords')
+            const response = await fetchKeywords(text, 5, true)
+            console.log('[2] response:', response)
+            const kw = response.keywords;
+            console.log(kw);
+            NewLightboxView.SetKeywords(kw);
+            if (LightboxView.LightboxDoc) {
+                console.log('setting keywords on doc')
+                LightboxView.LightboxDoc.keywords = new List<string>(kw);
+                setKeywordsLoc(NewLightboxView.Keywords);
+            }
+            setLoadingKeywords(false)
+        }
+        let keywordsList = StrListCast(LightboxView.LightboxDoc!.keywords)
+        if (!keywordsList || keywordsList.length < 2) {
+            setLoadingKeywords(true)
+            getKeywords()
+            setUpdate(!update)
+        } else {
+            setKeywordsLoc(keywordsList)
+            setLoadingKeywords(false)
+            setUpdate(!update)
+        }
+    }, [NewLightboxView.LightboxDoc])
+
+    // terms: vannevar bush, information spaces, 
+    React.useEffect(() => {
+        const getRecommendations = async () => {
+            console.log('fetching recommendations')
+            let query = 'undefined'
+            if (keywordsLoc) query = keywordsLoc.join(',')
+            let src = StrCast(NewLightboxView.LightboxDoc?.text)
+            let dashDocs:IDocRequest[] = [];
+            // get linked docs
+            let linkedDocs = DocListCast(NewLightboxView.LightboxDoc?.links)
+            console.log("linked docs", linkedDocs)
+            // get context docs (docs that are also in the collection)
+            // let contextDocs: Doc[] = DocListCast(DocCast(LightboxView.LightboxDoc?.context).data)
+            // let docId = LightboxView.LightboxDoc && LightboxView.LightboxDoc[Id]
+            // console.log("context docs", contextDocs)
+            // contextDocs.forEach((doc: Doc) => {
+            //     if (docId !== doc[Id]){
+            //         dashDocs.push({
+            //             title: StrCast(doc.title),
+            //             text: StrCast(doc.text),
+            //             id: doc[Id],
+            //             type: StrCast(doc.type)
+            //         })
+            //     }
+            // })
+            console.log("dash docs", dashDocs)
+            if (query !== undefined) {
+                const response = await fetchRecommendations(src, query, [], true)
+                const num_recs = response.num_recommendations
+                const recs = response.recommendations
+                const keywords = response.keywords
+                const response_bounds: IBounds = {
+                  max_x: response.max_x,
+                  max_y: response.max_y,
+                  min_x: response.min_x,
+                  min_y: response.min_y
+                }
+                // if (NewLightboxView.NewLightboxDoc) {
+                //     NewLightboxView.NewLightboxDoc.keywords = new List<string>(keywords);
+                //     setKeywordsLoc(NewLightboxView.Keywords);
+                // }
+                // console.log(response_bounds)
+                NewLightboxView.SetBounds(response_bounds)
+                const recommendations: IRecommendation[] = [];
+                for (const key in recs) {
+                    console.log(key)
+                    const title = recs[key].title;
+                    const url = recs[key].url
+                    const type = recs[key].type
+                    const text = recs[key].text
+                    const transcript = recs[key].transcript
+                    const previewUrl = recs[key].previewUrl
+                    const embedding = recs[key].embedding
+                    const distance = recs[key].distance
+                    const source = recs[key].source
+                    const related_concepts = recs[key].related_concepts
+                    const docId = recs[key].doc_id
+                    related_concepts.length >= 1 && recommendations.push({
+                        title: title,
+                        data: url,
+                        type: type,
+                        text: text,
+                        transcript: transcript,
+                        previewUrl: previewUrl,
+                        embedding: embedding,
+                        distance: Math.round(distance * 100) / 100,
+                        source: source,
+                        related_concepts: related_concepts,
+                        docId: docId
+                    })
+                }
+                recommendations.sort((a, b) => {
+                    if (a.distance && b.distance) {
+                        return a.distance - b.distance
+                    } else return 0
+                })
+                console.log("[rec]: ", recommendations)
+                NewLightboxView.SetRecs(recommendations)
+                setRecs(recommendations)
+            }
+        }
+        getRecommendations();
+    }, [update])
+    
+    
+
+    return <div className={`recommendationlist-container`} onPointerDown={(e) => {e.stopPropagation()}}>
+        <div className={`header`}>
+            <div className={`title`}>
+                Recommendations
+            </div>
+            {NewLightboxView.LightboxDoc && <div style={{fontSize: 10}}>
+                The recommendations are produced based on the text in the document <b><u>{StrCast(NewLightboxView.LightboxDoc.title)}</u></b>. The following keywords are used to fetch the recommendations.
+            </div>}
+            <div className={`lb-label`}>Keywords</div>
+            {loadingKeywords ? <div className={`keywords`}>
+                    <div className={`keyword ${loadingKeywords && 'loading'}`}/>
+                    <div className={`keyword ${loadingKeywords && 'loading'}`}/>
+                    <div className={`keyword ${loadingKeywords && 'loading'}`}/>
+                    <div className={`keyword ${loadingKeywords && 'loading'}`}/>
+                    </div>
+                :
+                <div className={`keywords`}>
+                {keywordsLoc && keywordsLoc.map((word, ind) => {
+                    return <div className={`keyword`}>
+                        {word}
+                        <IconButton type={Type.PRIM} size={Size.XSMALL} color={Colors.DARK_GRAY} icon={<GrClose/>} onClick={() => {
+                            let kw = keywordsLoc
+                            kw.splice(ind)
+                            NewLightboxView.SetKeywords(kw)
+                        }}/>
+                    </div>
+                })}
+            </div>
+            }
+            {!showMore ?
+            <div className={`lb-caret`} onClick={() => {setShowMore(true)}}>
+                More <FaCaretDown/>
+            </div>
+            :
+            <div className={`more`}>
+                <div className={`lb-caret`} onClick={() => {setShowMore(false)}}>
+                    Less <FaCaretUp/>
+                </div>
+                <div className={`lb-label`}>Type</div>
+                <div className={`lb-label`}>Sources</div>
+            </div>
+            }
+        </div>
+        <div className={`recommendations`}>
+            {recs && recs.map((rec: IRecommendation) => {
+                return <Recommendation {...rec} />
+            })}
+        </div>
+    </div>
+}
\ No newline at end of file
diff --git a/src/client/views/newlightbox/RecommendationList/index.ts b/src/client/views/newlightbox/RecommendationList/index.ts
new file mode 100644
index 000000000..f4555c1f2
--- /dev/null
+++ b/src/client/views/newlightbox/RecommendationList/index.ts
@@ -0,0 +1 @@
+export * from './RecommendationList'
\ No newline at end of file
diff --git a/src/client/views/newlightbox/RecommendationList/utils.ts b/src/client/views/newlightbox/RecommendationList/utils.ts
new file mode 100644
index 000000000..cdfff3258
--- /dev/null
+++ b/src/client/views/newlightbox/RecommendationList/utils.ts
@@ -0,0 +1,9 @@
+import { IRecommendation } from "../components";
+
+export interface IRecommendationList {
+    loading?: boolean,
+    keywords?: string[],
+    recs?: IRecommendation[]
+    getRecs?: any
+}
+
diff --git a/src/client/views/newlightbox/components/EditableText/EditableText.scss b/src/client/views/newlightbox/components/EditableText/EditableText.scss
new file mode 100644
index 000000000..7828538ab
--- /dev/null
+++ b/src/client/views/newlightbox/components/EditableText/EditableText.scss
@@ -0,0 +1,34 @@
+@import '../../NewLightboxStyles.scss';
+
+.lb-editableText,
+.lb-displayText {
+    padding: 4px 7px !important;
+    border: $standard-border !important;
+    border-color: $gray-l2 !important;
+}
+
+.lb-editableText {
+  -webkit-appearance: none;
+  overflow: hidden;
+  font-size: inherit;
+  border: none;
+  outline: none;
+  width: 100%;
+  margin: 0px;
+  padding: 0px;
+  box-shadow: none !important;
+  background: none;
+
+  &:focus {
+    outline: none;
+    background-color: $blue-l1;
+  }
+}
+
+.lb-displayText {
+  cursor: text !important;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  font-size: inherit;
+}
\ No newline at end of file
diff --git a/src/client/views/newlightbox/components/EditableText/EditableText.tsx b/src/client/views/newlightbox/components/EditableText/EditableText.tsx
new file mode 100644
index 000000000..e9e7ca264
--- /dev/null
+++ b/src/client/views/newlightbox/components/EditableText/EditableText.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react'
+import './EditableText.scss'
+import { Size } from 'browndash-components'
+
+export interface IEditableTextProps {
+  text: string
+  placeholder?: string
+  editing: boolean
+  onEdit: (newText: string) => void
+  setEditing: (editing: boolean) => void
+  backgroundColor?: string
+  size?: Size
+  height?: number
+}
+
+/**
+ * Editable Text is used for inline renaming of some text.
+ * It appears as normal UI text but transforms into a text input field when the user clicks on or focuses it.
+ * @param props
+ * @returns
+ */
+export const EditableText = (props: IEditableTextProps) => {
+  const {
+    editing,
+    height,
+    size,
+    text,
+    onEdit,
+    setEditing,
+    backgroundColor,
+    placeholder,
+  } = props
+
+  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onEdit(event.target.value)
+  }
+
+  return editing ? (
+    <input
+      style={{ background: backgroundColor, height: height }}
+      placeholder={placeholder}
+      size={1}
+      className="lb-editableText"
+      autoFocus
+      onChange={handleOnChange}
+      onBlur={() => setEditing(false)}
+      defaultValue={text}
+    ></input>
+  ) : (
+    <input
+      style={{ background: backgroundColor, height: height }}
+      placeholder={placeholder}
+      size={1}
+      className="lb-editableText"
+      autoFocus
+      onChange={handleOnChange}
+      onBlur={() => setEditing(false)}
+      defaultValue={text}
+    ></input>
+    // <div className="lb-displayText" onClick={(e) => {
+    //     e.stopPropagation()
+    //     setEditing(true)
+    // }}>{text}</div>
+  )
+}
diff --git a/src/client/views/newlightbox/components/EditableText/index.ts b/src/client/views/newlightbox/components/EditableText/index.ts
new file mode 100644
index 000000000..e3367b175
--- /dev/null
+++ b/src/client/views/newlightbox/components/EditableText/index.ts
@@ -0,0 +1 @@
+export * from './EditableText'
diff --git a/src/client/views/newlightbox/components/Recommendation/Recommendation.scss b/src/client/views/newlightbox/components/Recommendation/Recommendation.scss
new file mode 100644
index 000000000..c86c63ba0
--- /dev/null
+++ b/src/client/views/newlightbox/components/Recommendation/Recommendation.scss
@@ -0,0 +1,176 @@
+@import '../../NewLightboxStyles.scss';
+
+.recommendation-container {
+    width: 100%;
+    height: fit-content;
+    min-height: 180px;
+    border-radius: 20px;
+    display: grid;
+    grid-template-columns: 0% 100%;
+    grid-template-rows: auto auto auto auto auto;
+    gap: 5px 0px;   
+    padding: 10px;
+    cursor: pointer;
+    transition: 0.2s ease;
+    border: $standard-border;
+    border-color: $gray-l2;
+    background: white;
+
+    &:hover {
+    //   background: white !important;
+      transform: scale(1.02);
+      z-index: 0;
+
+      .title {
+        text-decoration: underline;
+      }
+    }
+
+    &.previewUrl {
+        grid-template-columns: calc(30% - 10px) 70%;
+        grid-template-rows: auto auto auto auto auto;
+        gap: 5px 10px;
+    }
+
+    &.loading {
+        animation: skeleton-loading-l2 1s linear infinite alternate;
+        border: none;
+        grid-template-columns: calc(30% - 10px) 70%;
+        grid-template-rows: auto auto auto auto auto;
+        gap: 5px 10px;
+
+      .image-container,
+      .title,
+      .info,
+      .source,
+      .explainer,
+      .hide-rec {
+        animation: skeleton-loading-l3 1s linear infinite alternate;
+      }
+
+      .title {
+        border-radius: 20px;
+      }
+    }
+
+    .distance-container,
+    .type-container,
+    .source-container {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 5px;
+    }
+
+    .image-container {
+      grid-row: 2/5;
+      grid-column: 1;
+      border-radius: 20px;
+      overflow: hidden;
+
+      .image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    .title {
+      grid-row: 1;
+      grid-column: 1/3;
+      border-radius: 20px;
+      font-size: $h2-size;
+      font-weight: $h2-weight;
+      overflow: hidden;
+      border-radius: 0px;
+      min-height: 30px;
+    }
+
+    .info {
+      grid-row: 2;
+      grid-column: 2;
+      border-radius: 20px;
+      display: flex;
+      flex-direction: row;
+      gap: 5px;
+      font-size: $body-size;
+
+        .lb-type {
+            padding: 2px 7px !important;
+            background: $gray-l2;
+        }
+    }
+
+    .lb-label {
+        color: $gray-l3;
+        font-weight: $h1-weight;
+        font-size: $body-size;
+    }
+
+    .source {
+        grid-row: 3;
+        grid-column: 2;
+        border-radius: 20px;
+        font-size: $body-size;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+
+        .lb-source {
+            padding: 2px 7px !important;
+            background: $gray-l2;
+            border-radius: 10px;
+            white-space: nowrap;
+            max-width: 130px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+    }
+
+    .explainer {
+        grid-row: 4;
+        grid-column: 2;
+        border-radius: 20px;
+        font-size: 10px;
+        width: 100%;
+        background: $blue-l1;
+        border-radius: 0;
+        padding: 10px;
+
+        .concepts-container {
+            display: flex;
+            flex-flow: row wrap;
+            margin-top: 3px;
+            gap: 3px;
+            .concept {
+                padding: 2px 7px !important;
+                background: $gray-l2;
+            }
+        }
+    }
+
+    .hide-rec {
+        grid-row: 5;
+        grid-column: 2;
+        border-radius: 20px;
+        font-size: $body-size;
+        display: flex;
+        align-items: center;
+        margin-top: 5px;
+        gap: 5px;
+        justify-content: flex-end;
+        text-transform: underline;
+    }
+  
+    &.dark {
+      background: $black;
+      border-color: $white;
+    }
+  
+    &.light,
+    &.default {
+      background: $white;
+      border-color: $white;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/newlightbox/components/Recommendation/Recommendation.tsx b/src/client/views/newlightbox/components/Recommendation/Recommendation.tsx
new file mode 100644
index 000000000..c0d357ad5
--- /dev/null
+++ b/src/client/views/newlightbox/components/Recommendation/Recommendation.tsx
@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { IRecommendation } from "./utils";
+import './Recommendation.scss';
+import { getType } from '../../utils';
+import { FaEyeSlash } from 'react-icons/fa';
+import { NewLightboxView } from '../../NewLightboxView';
+import { DocumentManager } from '../../../../util/DocumentManager';
+import { Doc } from '../../../../../fields/Doc';
+import { Docs } from '../../../../documents/Documents';
+
+export const Recommendation = (props: IRecommendation) => {
+    const {title, data, type, text, transcript, loading, source, previewUrl, related_concepts, distance, docId} = props
+    
+    return <div className={`recommendation-container ${loading && 'loading'} ${previewUrl && 'previewUrl'}`} onClick={() => {
+        let doc: Doc | null = null;
+        if (source == "Dash" && docId) {
+            const docView = DocumentManager.Instance.getDocumentViewById(docId)
+            if (docView) {
+                doc = docView.rootDoc;
+            }
+        } else if (data) {
+            console.log(data, type)
+            switch(type) {
+                case "YouTube":
+                    console.log('create ', type, 'document')
+                    doc = Docs.Create.VideoDocument(data, { title: title, _width: 400, _height: 315, transcript: transcript })
+                    break;
+                case "Video":
+                    console.log('create ', type, 'document')
+                    doc = Docs.Create.VideoDocument(data, { title: title, _width: 400, _height: 315, transcript: transcript })
+                    break;
+                case "Webpage":
+                    console.log('create ', type, 'document')
+                    doc = Docs.Create.WebDocument(data, { title: title, text: text })
+                    break;
+                case "HTML":
+                    console.log('create ', type, 'document')
+                    doc = Docs.Create.WebDocument(data, { title: title, text: text })
+                    break;
+                case "Text":
+                    console.log('create ', type, 'document')
+                    doc = Docs.Create.TextDocument(data, { title: title, text: text })
+                    break;
+                case "PDF":
+                    console.log('create ', type, 'document')
+                    doc = Docs.Create.PdfDocument(data, { title: title, text: text })
+                    break;
+            }
+        }
+        if (doc !== null) NewLightboxView.SetNewLightboxDoc(doc)
+    }}>
+        {loading ? 
+        <div className={`image-container`}>
+        </div>
+        :
+        previewUrl ? <div className={`image-container`}>
+            {<img className={`image`} src={previewUrl}></img>}
+        </div>
+        : null
+        }
+        <div className={`title`}>{title}</div>
+        <div className={`info`}>
+            {!loading && <div className={`type-container`}>
+                <div className={`lb-label`}>Type</div><div className={`lb-type`}>{getType(type!)}</div>
+            </div>}
+            {!loading && <div className={`distance-container`}>
+                <div className={`lb-label`}>Distance</div><div className={`lb-distance`}>{distance}</div>
+            </div>}
+        </div>
+        <div className={`source`}>
+            {!loading && <div className={`source-container`}>
+                <div className={`lb-label`}>Source</div><div className={`lb-source`}>{source}</div>
+            </div>}
+        </div>
+        <div className={`explainer`}>
+            {!loading && 
+            <div>
+                You are seeing this recommendation because this document also explores
+                <div className={`concepts-container`}>
+                    {related_concepts?.map((val) => {
+                        return <div className={'concept'}>{val}</div>
+                    })}
+                </div>
+            </div>}
+        </div>
+        <div className={`hide-rec`}>
+            {!loading && <><div>Hide Recommendation</div><div style={{fontSize: 15, paddingRight: 5}}><FaEyeSlash/></div></>}
+        </div>
+    </div>
+}
\ No newline at end of file
diff --git a/src/client/views/newlightbox/components/Recommendation/index.ts b/src/client/views/newlightbox/components/Recommendation/index.ts
new file mode 100644
index 000000000..12ebf9d6e
--- /dev/null
+++ b/src/client/views/newlightbox/components/Recommendation/index.ts
@@ -0,0 +1,2 @@
+export * from './utils'
+export * from './Recommendation'
\ No newline at end of file
diff --git a/src/client/views/newlightbox/components/Recommendation/utils.ts b/src/client/views/newlightbox/components/Recommendation/utils.ts
new file mode 100644
index 000000000..796ce0eb0
--- /dev/null
+++ b/src/client/views/newlightbox/components/Recommendation/utils.ts
@@ -0,0 +1,23 @@
+import { DocumentType } from "../../../../documents/DocumentTypes"
+
+export interface IRecommendation {
+    loading?: boolean
+    type?: DocumentType | string,
+    data?: string,
+    title?: string,
+    text?: string,
+    source?: string,
+    previewUrl?: string,
+    transcript?: {
+        text: string,
+        start: number,
+        duration: number
+    }[],
+    embedding?: {
+        x: number,
+        y: number
+    },
+    distance?: number,
+    related_concepts?: string[],
+    docId?: string
+}
\ No newline at end of file
diff --git a/src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.scss b/src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.scss
new file mode 100644
index 000000000..e541e3f3c
--- /dev/null
+++ b/src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.scss
@@ -0,0 +1,82 @@
+@import '../../NewLightboxStyles.scss';
+
+.skeletonDoc-container {
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 40px);
+  margin: 20px;
+  gap: 20px;
+
+  .header {
+    width: calc(100% - 20px);
+    height: 80px;
+    background: $gray-l2;
+    animation: skeleton-loading-l2 1s linear infinite alternate; 
+    display: grid;
+    grid-template-rows: 60% 40%;
+    padding: 10px;
+    grid-template-columns: auto auto auto auto;
+    border-radius: 20px;
+
+    .title {
+      grid-row: 1;
+      grid-column: 1 / 5;
+      display: flex;
+      width: fit-content;
+      height: 100%;
+      min-width: 500px;
+      font-size: $title-size;
+      animation: skeleton-loading-l3 1s linear infinite alternate;
+      border-radius: 20px;
+    }
+
+    .type {
+      display: flex;
+      padding: 3px 7px;
+      width: fit-content;
+      height: fit-content;
+      margin-top: 8px;
+      min-height: 15px;
+      min-width: 60px;
+      grid-row: 2;
+      grid-column: 1;
+      animation: skeleton-loading-l3 1s linear infinite alternate;
+      border-radius: 20px;
+    }
+
+    .buttons-container {
+      grid-row: 1 / 3;
+      grid-column: 5;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      gap: 10px;
+
+      .button {
+        width: 50px;
+        height: 50px;
+        border-radius: 100%;
+        animation: skeleton-loading-l3 1s linear infinite alternate;
+      }
+    }
+
+  }
+
+  .content {
+    width: 100%;
+    flex: 1;
+    -webkit-flex: 1; /* Chrome */
+    background: $gray-l2;
+    animation: skeleton-loading-l2 1s linear infinite alternate;
+    border-radius: 20px;
+  }
+
+    // &.dark {
+    //   background: $black;
+    // }
+  
+    // &.light,
+    // &.default {
+    //   background: $white;
+    // }
+}
\ No newline at end of file
diff --git a/src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.tsx b/src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.tsx
new file mode 100644
index 000000000..50cee893f
--- /dev/null
+++ b/src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.tsx
@@ -0,0 +1,22 @@
+import './SkeletonDoc.scss';
+import { ISkeletonDoc } from "./utils";
+import * as React from 'react';
+
+export const SkeletonDoc = (props: ISkeletonDoc) => {
+    const { type, data } = props
+    
+    return <div className={`skeletonDoc-container`}>
+        <div className={`header`}>
+            <div className={`title`}></div>
+            <div className={`type`}></div>
+            <div className={`tags`}></div>
+            <div className={`buttons-container`}>
+                <div className={`button`}></div>
+                <div className={`button`}></div>
+            </div>
+        </div>
+        <div className={`content`}>
+            {data}
+        </div>
+    </div>
+}
\ No newline at end of file
diff --git a/src/client/views/newlightbox/components/SkeletonDoc/index.ts b/src/client/views/newlightbox/components/SkeletonDoc/index.ts
new file mode 100644
index 000000000..396b7272b
--- /dev/null
+++ b/src/client/views/newlightbox/components/SkeletonDoc/index.ts
@@ -0,0 +1 @@
+export * from './SkeletonDoc'
\ No newline at end of file
diff --git a/src/client/views/newlightbox/components/SkeletonDoc/utils.ts b/src/client/views/newlightbox/components/SkeletonDoc/utils.ts
new file mode 100644
index 000000000..81c32c328
--- /dev/null
+++ b/src/client/views/newlightbox/components/SkeletonDoc/utils.ts
@@ -0,0 +1,5 @@
+import { IRecommendation } from "../Recommendation";
+
+export interface ISkeletonDoc extends IRecommendation {
+
+}
\ No newline at end of file
diff --git a/src/client/views/newlightbox/components/Template/Template.scss b/src/client/views/newlightbox/components/Template/Template.scss
new file mode 100644
index 000000000..5b72ddaf9
--- /dev/null
+++ b/src/client/views/newlightbox/components/Template/Template.scss
@@ -0,0 +1,15 @@
+@import '../../NewLightboxStyles.scss';
+
+.template-container {
+    width: 100vw;
+    height: 100vh;
+  
+    &.dark {
+      background: $black;
+    }
+  
+    &.light,
+    &.default {
+      background: $white;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/newlightbox/components/Template/Template.tsx b/src/client/views/newlightbox/components/Template/Template.tsx
new file mode 100644
index 000000000..9c6f0f59c
--- /dev/null
+++ b/src/client/views/newlightbox/components/Template/Template.tsx
@@ -0,0 +1,10 @@
+import './Template.scss';
+import * as React from 'react';
+import { ITemplate } from "./utils";
+
+export const Template = (props: ITemplate) => {
+    
+    return <div className={`template-container`}>
+
+    </div>
+}
\ No newline at end of file
diff --git a/src/client/views/newlightbox/components/Template/index.ts b/src/client/views/newlightbox/components/Template/index.ts
new file mode 100644
index 000000000..36b5f3f46
--- /dev/null
+++ b/src/client/views/newlightbox/components/Template/index.ts
@@ -0,0 +1 @@
+export * from './Template'
\ No newline at end of file
diff --git a/src/client/views/newlightbox/components/Template/utils.ts b/src/client/views/newlightbox/components/Template/utils.ts
new file mode 100644
index 000000000..965e653ec
--- /dev/null
+++ b/src/client/views/newlightbox/components/Template/utils.ts
@@ -0,0 +1,3 @@
+export interface ITemplate {
+
+}
\ No newline at end of file
diff --git a/src/client/views/newlightbox/components/index.ts b/src/client/views/newlightbox/components/index.ts
new file mode 100644
index 000000000..3f9128690
--- /dev/null
+++ b/src/client/views/newlightbox/components/index.ts
@@ -0,0 +1,3 @@
+export * from './Template'
+export * from './Recommendation'
+export * from './SkeletonDoc'
\ No newline at end of file
diff --git a/src/client/views/newlightbox/utils.ts b/src/client/views/newlightbox/utils.ts
new file mode 100644
index 000000000..6016abca4
--- /dev/null
+++ b/src/client/views/newlightbox/utils.ts
@@ -0,0 +1,121 @@
+import { DocumentType } from "../../documents/DocumentTypes";
+import { IRecommendation } from "./components";
+
+export interface IDocRequest {
+    id: string,
+    title: string,
+    text: string,
+    type: string
+}
+
+export const fetchRecommendations = async (src: string, query: string, docs?: IDocRequest[], dummy?: boolean) => {
+    console.log("[rec] making request")
+    if (dummy) {
+        return {
+            "recommendations": dummyRecs,
+            "keywords": dummyKeywords,
+            "num_recommendations": 4,
+            "max_x": 100,
+            "max_y": 100,
+            "min_x": 0,
+            "min_y": 0
+
+        };
+    }
+    const response = await fetch('http://127.0.0.1:8000/recommend', {
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ 
+            "src": src,
+            "query": query,
+            "docs": docs
+        })
+    })
+    const data = await response.json();
+    
+    return data;
+}
+
+export const fetchKeywords = async (text: string, n: number, dummy?: boolean) => {
+    console.log("[fetchKeywords]")
+    if (dummy) {
+        return {
+            "keywords": dummyKeywords
+        };
+    }
+    const response = await fetch('http://127.0.0.1:8000/keywords', {
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ 
+            "text": text,
+            "n": n
+        })
+    })
+    const data = await response.json()
+    return data;
+}
+
+export const getType = (type: DocumentType | string) => {
+    switch(type) {
+        case DocumentType.AUDIO:
+            return "Audio"
+        case DocumentType.VID:
+            return "Video"
+        case DocumentType.PDF:
+            return "PDF"
+        case DocumentType.WEB:
+            return "Webpage"
+        case "YouTube":
+            return "Video"
+        case "HTML":
+            return "Webpage"
+        default:
+            return "Unknown: " + type
+    }
+}
+
+const dummyRecs = {
+    "a": {
+        title: 'Vannevar Bush - American Engineer',
+        previewUrl: 'https://cdn.britannica.com/98/23598-004-1E6A382E/Vannevar-Bush-Differential-Analyzer-1935.jpg', 
+        type: 'web',
+        distance: 2.3,
+        source: 'www.britannica.com',
+        related_concepts: ['vannevar bush', 'knowledge'],
+        embedding: {
+            x: 0,
+            y: 0
+        }
+    },
+    "b": {
+        title: "From Memex to hypertext: Vannevar Bush and the mind's machine",
+        type: 'pdf',
+        distance: 5.4,
+        source: 'Google Scholar',
+        related_concepts: ['memex', 'vannevar bush', 'hypertext'],
+    },
+    "c": {
+        title: 'How the hyperlink changed everything | Small Thing Big Idea, a TED series',
+        previewUrl: 'https://pi.tedcdn.com/r/talkstar-photos.s3.amazonaws.com/uploads/b17d043f-2642-4117-a913-52204505513f/MargaretGouldStewart_2018V-embed.jpg?u%5Br%5D=2&u%5Bs%5D=0.5&u%5Ba%5D=0.8&u%5Bt%5D=0.03&quality=82w=640', 
+        type: 'youtube',
+        distance: 5.3,
+        source: 'www.youtube.com',
+        related_concepts: ['User Control', 'Explanations']
+    },
+    "d": {
+        title: 'Recommender Systems: Behind the Scenes of Machine Learning-Based Personalization',
+        previewUrl: 'https://sloanreview.mit.edu/wp-content/uploads/2018/10/MAG-Ransbotham-Ratings-Recommendations-1200X627-1200x627.jpg', 
+        type: 'pdf',
+        distance: 9.3,
+        source: 'www.altexsoft.com',
+        related_concepts: ['User Control', 'Explanations']
+    }
+}
+
+const dummyKeywords = ['user control', 'vannevar bush', 'hypermedia', 'hypertext']
\ No newline at end of file
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index 2290e0711..ca5ec9389 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -46,7 +46,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
         if (dropEvent.complete.docDragData) {
             const droppedDocs = dropEvent.complete.docDragData?.droppedDocuments;
             const added = dropEvent.complete.docDragData.moveDocument?.(droppedDocs, this.rootDoc, (doc: Doc | Doc[]) => this.addDoc(doc instanceof Doc ? doc : doc.lastElement(), fieldKey));
-            droppedDocs.lastElement().embedContainer = this.dataDoc;
+            Doc.SetContainer(droppedDocs.lastElement(), this.dataDoc);
             !added && e.preventDefault();
             e.stopPropagation(); // prevent parent Doc from registering new position so that it snaps back into place
             return added;
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 0fe24fe8d..d548ab9f1 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -71,13 +71,14 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     };
 
     getAnchor = (addAsAnnotation?: boolean, pinProps?: PinProps) => {
-        const anchor =
-            this._chartRenderer?.getAnchor(pinProps) ??
-            Docs.Create.ConfigDocument({
-                // when we clear selection -> we should have it so chartBox getAnchor returns undefined
-                // this is for when we want the whole doc (so when the chartBox getAnchor returns without a marker)
-                /*put in some options*/
-            });
+        const anchor = !pinProps
+            ? this.rootDoc
+            : this._chartRenderer?.getAnchor(pinProps) ??
+              Docs.Create.ConfigDocument({
+                  // when we clear selection -> we should have it so chartBox getAnchor returns undefined
+                  // this is for when we want the whole doc (so when the chartBox getAnchor returns without a marker)
+                  /*put in some options*/
+              });
 
         anchor.presDataVizView = this.dataVizView;
         anchor.presDataVizAxes = this.axes.length ? new List<string>(this.axes) : undefined;
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index e954d0484..7e8eef0a5 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -18,7 +18,7 @@ import { SearchBox } from '../search/SearchBox';
 import { DashWebRTCVideo } from '../webcam/DashWebRTCVideo';
 import { YoutubeBox } from './../../apis/youtube/YoutubeBox';
 import { AudioBox } from './AudioBox';
-import { FontIconBox } from './button/FontIconBox';
+import { FontIconBox } from './FontIconBox/FontIconBox';
 import { ColorBox } from './ColorBox';
 import { ComparisonBox } from './ComparisonBox';
 import { DataVizBox } from './DataVizBox/DataVizBox';
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index f1627e1e1..b25540dd3 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -115,7 +115,10 @@
         width: 100%;
         height: 100%;
         transition: inherit;
-
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        
         .sharingIndicator {
             height: 30px;
             width: 30px;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 19f9f15a4..6b47564a4 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -535,7 +535,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
             // if this is part of a template, let the event go up to the template root unless right/ctrl clicking
             if (
                 // prettier-ignore
-                this.props.isDocumentActive?.() &&
+                (this.props.isDocumentActive?.() || this.props.isContentActive?.()) &&
                 !this.props.onBrowseClick?.() &&
                 !this.Document.ignoreClick &&
                 e.button === 0 &&
@@ -1084,8 +1084,8 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
     @computed get innards() {
         TraceMobx();
         const ffscale = () => this.props.DocumentView().props.CollectionFreeFormDocumentView?.().props.ScreenToLocalTransform().Scale || 1;
-        const layout_showTitle = this.layout_showTitle?.split(':')[0];
-        const layout_showTitleHover = this.layout_showTitle?.includes(':hover');
+        const showTitle = this.layout_showTitle?.split(':')[0];
+        const showTitleHover = this.layout_showTitle?.includes(':hover');
         const captionView = !this.layout_showCaption ? null : (
             <div
                 className="documentView-captionWrapper"
@@ -1109,27 +1109,27 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                 />
             </div>
         );
-        const targetDoc = layout_showTitle?.startsWith('_') ? this.layoutDoc : this.rootDoc;
+        const targetDoc = showTitle?.startsWith('_') ? this.layoutDoc : this.rootDoc;
         const background = StrCast(
-            SharingManager.Instance.users.find(u => u.user.email === this.dataDoc.author)?.sharingDoc.userColor,
-            Doc.UserDoc().layout_showTitle && [DocumentType.RTF, DocumentType.COL].includes(this.rootDoc.type as any) ? StrCast(Doc.SharingDoc().userColor) : 'rgba(0,0,0,0.4)'
+            SharingManager.Instance.users.find(u => u.user.email === this.dataDoc.author)?.sharingDoc.headingColor,
+            Doc.UserDoc().layout_showTitle && [DocumentType.RTF, DocumentType.COL].includes(this.rootDoc.type as any) ? StrCast(Doc.SharingDoc().headingColor) : 'rgba(0,0,0,0.4)'
         );
-        const layout_sidebarWidthPercent = +StrCast(this.layoutDoc.layout_sidebarWidthPercent).replace('%', '');
-        const titleView = !layout_showTitle ? null : (
+        const sidebarWidthPercent = +StrCast(this.layoutDoc.layout_sidebarWidthPercent).replace('%', '');
+        const titleView = !showTitle ? null : (
             <div
-                className={`documentView-titleWrapper${layout_showTitleHover ? '-hover' : ''}`}
+                className={`documentView-titleWrapper${showTitleHover ? '-hover' : ''}`}
                 key="title"
                 style={{
                     position: this.headerMargin ? 'relative' : 'absolute',
                     height: this.titleHeight,
-                    width: !this.headerMargin ? `calc(${layout_sidebarWidthPercent || 100}% - 18px)` : (layout_sidebarWidthPercent || 100) + '%', // leave room for annotation button
+                    width: !this.headerMargin ? `calc(${sidebarWidthPercent || 100}% - 18px)` : (sidebarWidthPercent || 100) + '%', // leave room for annotation button
                     color: lightOrDark(background),
                     background,
                     pointerEvents: (!this.disableClickScriptFunc && this.onClickHandler) || this.Document.ignoreClick ? 'none' : this.isContentActive() || this.props.isDocumentActive?.() ? 'all' : undefined,
                 }}>
                 <EditableView
                     ref={this._titleRef}
-                    contents={layout_showTitle
+                    contents={showTitle
                         .split(';')
                         .map(field => field.trim())
                         .map(field => targetDoc[field]?.toString())
@@ -1138,7 +1138,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                     fontSize={10}
                     GetValue={() => {
                         this.props.select(false);
-                        return layout_showTitle.split(';').length === 1 ? layout_showTitle + '=' + Field.toString(targetDoc[layout_showTitle.split(';')[0]] as any as Field) : '#' + layout_showTitle;
+                        return showTitle.split(';').length === 1 ? showTitle + '=' + Field.toString(targetDoc[showTitle.split(';')[0]] as any as Field) : '#' + showTitle;
                     }}
                     SetValue={undoBatch((input: string) => {
                         if (input?.startsWith('#')) {
@@ -1148,17 +1148,17 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                                 Doc.UserDoc().layout_showTitle = input?.substring(1) ? input.substring(1) : 'author_date';
                             }
                         } else {
-                            var value = input.replace(new RegExp(layout_showTitle + '='), '') as string | number;
-                            if (layout_showTitle !== 'title' && Number(value).toString() === value) value = Number(value);
-                            if (layout_showTitle.includes('Date') || layout_showTitle === 'author') return true;
-                            Doc.SetInPlace(targetDoc, layout_showTitle, value, true);
+                            var value = input.replace(new RegExp(showTitle + '='), '') as string | number;
+                            if (showTitle !== 'title' && Number(value).toString() === value) value = Number(value);
+                            if (showTitle.includes('Date') || showTitle === 'author') return true;
+                            Doc.SetInPlace(targetDoc, showTitle, value, true);
                         }
                         return true;
                     })}
                 />
             </div>
         );
-        return this.props.hideTitle || (!layout_showTitle && !this.layout_showCaption) ? (
+        return this.props.hideTitle || (!showTitle && !this.layout_showCaption) ? (
             this.contents
         ) : (
             <div className="documentView-styleWrapper">
@@ -1238,7 +1238,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
         const renderDoc = this.renderDoc({
             borderRadius: this.borderRounding,
             outline: highlighting && !this.borderRounding && !highlighting.highlightStroke ? `${highlighting.highlightColor} ${highlighting.highlightStyle} ${highlighting.highlightIndex}px` : 'solid 0px',
-            border: highlighting && this.borderRounding && highlighting.highlightStyle === 'dashed' ? `${highlighting.highlightStyle} ${highlighting.highlightColor} ${highlighting.highlightIndex}px` : undefined,
+            border:  highlighting && this.borderRounding && highlighting.highlightStyle === 'dashed' ? `${highlighting.highlightStyle} ${highlighting.highlightColor} ${highlighting.highlightIndex}px` : undefined,
             boxShadow,
             clipPath: borderPath?.clipPath,
         });
diff --git a/src/client/views/nodes/EquationBox.tsx b/src/client/views/nodes/EquationBox.tsx
index 8d45c5724..a77e4bdd1 100644
--- a/src/client/views/nodes/EquationBox.tsx
+++ b/src/client/views/nodes/EquationBox.tsx
@@ -26,7 +26,8 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
             this.props.select(false);
 
             this._ref.current!.mathField.focus();
-            this._ref.current!.mathField.select();
+            this.rootDoc.text === 'x' && this._ref.current!.mathField.select();
+            EquationBox.SelectOnLoad = '';
         }
         reaction(
             () => StrCast(this.dataDoc.text),
@@ -35,6 +36,7 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     this._ref.current!.mathField.latex(text);
                 }
             }
+            //{ fireImmediately: true }
         );
         reaction(
             () => this.props.isSelected(),
@@ -53,9 +55,8 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
         const _height = Number(getComputedStyle(this._ref.current!.element.current).height.replace('px', ''));
         const _width = Number(getComputedStyle(this._ref.current!.element.current).width.replace('px', ''));
         if (e.key === 'Enter') {
-            const nextEq = Docs.Create.EquationDocument({
+            const nextEq = Docs.Create.EquationDocument(e.shiftKey ? StrCast(this.dataDoc.text) : 'x', {
                 title: '# math',
-                text: StrCast(this.dataDoc.text),
                 _width,
                 _height: 25,
                 x: NumCast(this.layoutDoc.x),
diff --git a/src/client/views/nodes/button/ButtonInterface.ts b/src/client/views/nodes/FontIconBox/ButtonInterface.ts
index 0aa2ac8e1..0aa2ac8e1 100644
--- a/src/client/views/nodes/button/ButtonInterface.ts
+++ b/src/client/views/nodes/FontIconBox/ButtonInterface.ts
diff --git a/src/client/views/nodes/button/FontIconBadge.scss b/src/client/views/nodes/FontIconBox/FontIconBadge.scss
index 78f506e57..2ff5c651f 100644
--- a/src/client/views/nodes/button/FontIconBadge.scss
+++ b/src/client/views/nodes/FontIconBox/FontIconBadge.scss
@@ -1,11 +1,12 @@
 .fontIconBadge {
-    background: red;
+    background: lightgreen;
     width: 15px;
     height: 15px;
     top: 8px;
+    color: black;
     display: block;
     position: absolute;
     right: 5;
     border-radius: 50%;
     text-align: center;
-}
\ No newline at end of file
+}
diff --git a/src/client/views/nodes/button/FontIconBadge.tsx b/src/client/views/nodes/FontIconBox/FontIconBadge.tsx
index b50588ce2..b50588ce2 100644
--- a/src/client/views/nodes/button/FontIconBadge.tsx
+++ b/src/client/views/nodes/FontIconBox/FontIconBadge.tsx
diff --git a/src/client/views/nodes/button/FontIconBox.scss b/src/client/views/nodes/FontIconBox/FontIconBox.scss
index 9d9fa26b0..9d9fa26b0 100644
--- a/src/client/views/nodes/button/FontIconBox.scss
+++ b/src/client/views/nodes/FontIconBox/FontIconBox.scss
diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
new file mode 100644
index 000000000..39be4022e
--- /dev/null
+++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
@@ -0,0 +1,423 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Button, ColorPicker, Dropdown, DropdownType, EditableText, IconButton, IListItemProps, NumberDropdown, NumberDropdownType, Popup, Size, Toggle, ToggleType, Type } from 'browndash-components';
+import { action, computed, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { Doc, DocListCast, StrListCast } from '../../../../fields/Doc';
+import { ScriptField } from '../../../../fields/ScriptField';
+import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
+import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes';
+import { SelectionManager } from '../../../util/SelectionManager';
+import { undoable, UndoManager } from '../../../util/UndoManager';
+import { ContextMenu } from '../../ContextMenu';
+import { DocComponent } from '../../DocComponent';
+import { EditableView } from '../../EditableView';
+import { Colors } from '../../global/globalEnums';
+import { StyleProp } from '../../StyleProvider';
+import { FieldView, FieldViewProps } from '../FieldView';
+import { OpenWhere } from '../DocumentView';
+import { RichTextMenu } from '../formattedText/RichTextMenu';
+import './FontIconBox.scss';
+import { SelectedDocView } from '../../selectedDoc';
+import { Utils } from '../../../../Utils';
+
+export enum ButtonType {
+    TextButton = 'textBtn',
+    MenuButton = 'menuBtn',
+    DropdownList = 'dropdownList',
+    DropdownButton = 'dropdownBtn',
+    ClickButton = 'clickBtn',
+    ToggleButton = 'toggleBtn',
+    ColorButton = 'colorBtn',
+    ToolButton = 'toolBtn',
+    MultiToggleButton = 'multiToggleBtn',
+    NumberSliderButton = 'numSliderBtn',
+    NumberDropdownButton = 'numDropdownBtn',
+    NumberInlineButton = 'numInlineBtn',
+    EditableText = 'editableText',
+}
+
+export interface ButtonProps extends FieldViewProps {
+    type?: ButtonType;
+}
+@observer
+export class FontIconBox extends DocComponent<ButtonProps>() {
+    public static LayoutString(fieldKey: string) {
+        return FieldView.LayoutString(FontIconBox, fieldKey);
+    }
+    @observable noTooltip = false;
+    showTemplate = (): void => {
+        const dragFactory = Cast(this.layoutDoc.dragFactory, Doc, null);
+        dragFactory && this.props.addDocTab(dragFactory, OpenWhere.addRight);
+    };
+    dragAsTemplate = (): void => {
+        this.layoutDoc.onDragStart = ScriptField.MakeFunction('getCopy(this.dragFactory, true)');
+    };
+    useAsPrototype = (): void => {
+        this.layoutDoc.onDragStart = ScriptField.MakeFunction('makeDelegate(this.dragFactory, true)');
+    };
+
+    specificContextMenu = (): void => {
+        if (!Doc.noviceMode) {
+            const cm = ContextMenu.Instance;
+            cm.addItem({ description: 'Show Template', event: this.showTemplate, icon: 'tag' });
+            cm.addItem({ description: 'Use as Render Template', event: this.dragAsTemplate, icon: 'tag' });
+            cm.addItem({ description: 'Use as Prototype', event: this.useAsPrototype, icon: 'tag' });
+        }
+    };
+
+    static GetShowLabels() {
+        return BoolCast(Doc.UserDoc()._showLabel);
+    }
+    static SetShowLabels(show: boolean) {
+        Doc.UserDoc()._showLabel = show;
+    }
+    static GetRecognizeGestures() {
+        return BoolCast(Doc.UserDoc()._recognizeGestures);
+    }
+    static SetRecognizeGestures(show: boolean) {
+        Doc.UserDoc()._recognizeGestures = show;
+    }
+
+    // Determining UI Specs
+    @computed get label() {
+        return StrCast(this.rootDoc.icon_label, StrCast(this.rootDoc.title));
+    }
+    Icon = (color: string, iconFalse?: boolean) => {
+        let icon;
+        if (iconFalse ) {
+            icon = StrCast(this.dataDoc[this.fieldKey ?? 'iconFalse'] ?? this.dataDoc.icon, 'user') as any;
+            if (icon) return <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />
+            else return null
+        }
+        icon = StrCast(this.dataDoc[this.fieldKey ?? 'icon'] ?? this.dataDoc.icon, 'user') as any;
+        const trailsIcon = () => <img src={`/assets/${'presTrails.png'}`} style={{ width: 30, height: 30, filter: `invert(${color === Colors.DARK_GRAY ? '0%' : '100%'})` }} />;
+        return !icon ? null : icon === 'pres-trail' ? trailsIcon() : <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />;
+    };
+    @computed get dropdown() {
+        return BoolCast(this.rootDoc.dropDownOpen);
+    }
+    @computed get buttonList() {
+        return StrListCast(this.rootDoc.btnList);
+    }
+    @computed get type() {
+        return StrCast(this.rootDoc.btnType);
+    }
+
+    /**
+     * Types of buttons in dash:
+     * - Main menu button (LHS)
+     * - Tool button
+     * - Expandable button (CollectionLinearView)
+     * - Button inside of CollectionLinearView vs. outside of CollectionLinearView
+     * - Action button
+     * - Dropdown button
+     * - Color button
+     * - Dropdown list
+     * - Number button
+     **/
+
+    _batch: UndoManager.Batch | undefined = undefined;
+    /**
+     * Number button
+     */
+    @computed get numberDropdown() {
+        let type: NumberDropdownType;
+        switch(this.type) {
+            case ButtonType.NumberDropdownButton: 
+                type = 'dropdown'
+                break;
+            case ButtonType.NumberInlineButton:
+                type = 'input'
+                break;
+            case ButtonType.NumberSliderButton:
+            default:
+                type = 'slider'
+                break;
+        }
+        const numScript = (value?: number) => ScriptCast(this.rootDoc.script).script.run({ self: this.rootDoc, value, _readOnly_: value === undefined });
+        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
+        // Script for checking the outcome of the toggle
+        const checkResult = Number(Number(numScript().result ?? 0).toPrecision(NumCast(this.dataDoc.numPrecision, 3)));
+        const label = !FontIconBox.GetShowLabels() ? null : <div className="fontIconBox-label">{this.label}</div>;
+
+        return <NumberDropdown 
+            color={color} 
+            numberDropdownType={type} 
+            showPlusMinus={false} 
+            tooltip={this.label}
+            type={Type.PRIM}
+            min={NumCast(this.rootDoc.numBtnMin, 0)}
+            max={NumCast(this.rootDoc.numBtnMax, 100)}
+            number={checkResult} 
+            setNumber={undoable(value => numScript(value), `${this.rootDoc.title} button set from list`)}
+            fillWidth
+        />
+    }
+
+    /**
+     * Dropdown button
+     */
+    @computed get dropdownButton() {
+        const active: string = StrCast(this.rootDoc.dropDownOpen);
+        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
+        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
+        return (
+            <div
+                className={`menuButton ${this.type} ${active}`}
+                style={{ color: color, backgroundColor: backgroundColor, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
+                onClick={action(() => {
+                    this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen;
+                    this.noTooltip = this.rootDoc.dropDownOpen;
+                    Doc.UnBrushAllDocs();
+                })}>
+                {this.Icon(color)}
+                {!this.label || !FontIconBox.GetShowLabels() ? null : (
+                    <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}>
+                        {' '}
+                        {this.label}{' '}
+                    </div>
+                )}
+                <div className="menuButton-dropdown" style={{ borderBottomRightRadius: this.dropdown ? 0 : undefined }}>
+                    <FontAwesomeIcon icon={'caret-down'} color={color} size="sm" />
+                </div>
+                {this.rootDoc.dropDownOpen ? <div className="menuButton-dropdownBox">{/* DROPDOWN BOX CONTENTS */}</div> : null}
+            </div>
+        );
+    }
+
+    /**
+     * Dropdown list
+     */
+    @computed get dropdownListButton() {
+        const active: string = StrCast(this.rootDoc.dropDownOpen);
+        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
+        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
+
+        const script = ScriptCast(this.rootDoc.script);
+
+        let noviceList: string[] = [];
+        let text: string | undefined;
+        let dropdown = true;
+        let getStyle: (val: string) => any = () => {};
+        let icon: IconProp = 'caret-down';
+        let isViewDropdown: boolean = script?.script.originalScript.startsWith('setView')
+        try {
+            if (isViewDropdown) {
+                const selectedDocs: Doc[] = SelectionManager.Docs();
+                const selected = SelectionManager.Docs().lastElement();
+                console.log('selected')
+                if (selected) {
+                    if (StrCast(selected.type) === DocumentType.COL) {
+                        text = StrCast(selected._type_collection);
+                        console.log("collection selected", text)
+                    } else {
+                        console.log("doc selected", selected.title);
+                        dropdown = false;
+                        if (selectedDocs.length > 1) {
+                            text = selectedDocs.length + " selected"
+                        } else {
+                            text = Utils.cleanDocumentType(StrCast(selected.type) as DocumentType);
+                            icon = Doc.toIcon(selected);
+                        }
+                        return <Popup
+                            icon={<FontAwesomeIcon size={'1x'} icon={icon} />}
+                            text={text}
+                            type={Type.TERT}
+                            color={color}
+                            popup={<SelectedDocView selectedDocs={selectedDocs}/>}
+                            fillWidth
+                        />
+                    }
+                } else {
+                    dropdown = false;
+                    return <Button 
+                        text={`None Selected`} 
+                        type={Type.TERT}
+                        color={color}
+                        fillWidth
+                        inactive
+                    />
+                }
+                noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking, CollectionViewType.NoteTaking];
+            } else { 
+                text = StrCast((RichTextMenu.Instance?.TextView?.EditorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily);
+                getStyle = (val: string) => { return { fontFamily: val } }
+            }
+        } catch (e) {
+            console.log(e);
+        }
+
+        console.log("current item: ", text);
+
+        // Get items to place into the list
+        const list: IListItemProps[] = this.buttonList
+            .filter(value => !Doc.noviceMode || !noviceList.length || noviceList.includes(value))
+            .map(value => (
+                {
+                    text: value.charAt(0).toUpperCase() + value.slice(1),
+                    val: value,
+                    style: getStyle(value),
+                    onClick: undoable(() => script.script.run({ self: this.rootDoc, value }), value)
+                    // shortcut: '#',
+                }
+            ));
+
+
+        return (
+            <Dropdown 
+                selectedVal={text}
+                setSelectedVal={undoable((val) => script.script.run({ self: this.rootDoc, val }), `dropdown select ${this.label}`)}
+                color={color} 
+                type={isViewDropdown ? Type.TERT : Type.PRIM} 
+                dropdownType={DropdownType.SELECT} 
+                items={list}
+                tooltip={this.label}
+                fillWidth
+            />
+        )
+    }
+
+
+    @computed get colorScript() {
+        return ScriptCast(this.rootDoc.script);
+    }
+
+    /**
+     * Color button
+     */
+    @computed get colorButton() {
+        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
+        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
+        const curColor = this.colorScript?.script.run({ self: this.rootDoc, value: undefined, _readOnly_: true }).result ?? 'transparent';
+        const tooltip: string = StrCast(this.rootDoc.toolTip);
+
+        return (
+            <ColorPicker 
+                setSelectedColor={(value) => {
+                    const s = this.colorScript;
+                    s && undoable(() => s.script.run({ self: this.rootDoc, value: value, _readOnly_: false }).result, `Set ${tooltip} to ${value}`)();
+                }}
+                selectedColor={curColor}
+                type={Type.PRIM}
+                color={color}
+                icon={this.Icon(color)!}
+                tooltip={tooltip}
+                label={this.label}
+            />
+        )
+    }
+
+    @computed get toggleButton() {
+        // Determine the type of toggle button
+        const buttonText: string = StrCast(this.rootDoc.buttonText);
+        const tooltip: string = StrCast(this.rootDoc.toolTip);
+
+        const script = ScriptCast(this.rootDoc.onClick);
+        const toggleStatus = script ? script.script.run({ self: this.rootDoc, value: undefined, _readOnly_: true }).result : false;
+        // Colors
+        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
+        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
+
+        console.log(tooltip, toggleStatus);
+        return (
+            <Toggle 
+                tooltip={`Toggle ${tooltip}`} 
+                toggleType={ToggleType.BUTTON} 
+                type={Type.PRIM} 
+                toggleStatus={toggleStatus} 
+                text={buttonText} 
+                color={color} 
+                icon={this.Icon(color)!} 
+                label={this.label}
+                onPointerDown={() => script.script.run({ self: this.rootDoc, value: !toggleStatus, _readOnly_: false })}
+            />
+        )
+    }
+
+    /**
+     * Default
+     */
+    @computed get defaultButton() {
+        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
+        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
+        const tooltip: string = StrCast(this.rootDoc.toolTip);
+
+        return (
+            <IconButton tooltip={tooltip} icon={this.Icon(color)!} label={this.label}/>
+        )
+    }
+
+    @computed get editableText() {
+        // Script for running the toggle
+        const script = ScriptCast(this.rootDoc.script);
+        // Function to run the script
+        const checkResult = script?.script.run({ value: '', _readOnly_: true }).result;
+
+        const setValue = (value: string, shiftDown?: boolean): boolean => script?.script.run({ value, _readOnly_: false }).result;
+        
+        return <EditableText 
+            editing={false} setEditing={(editing: boolean) => {}}            
+        />
+        
+        return (
+            <div className="menuButton editableText">
+                <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={'lock'} />
+                <div style={{ width: 'calc(100% - .875em)', paddingLeft: '4px' }}>
+                    <EditableView GetValue={() => script?.script.run({ value: '', _readOnly_: true }).result} SetValue={setValue} oneLine={true} contents={checkResult} />
+                </div>
+            </div>
+        );
+    }
+
+    render() {
+        // determine dash button metadata
+        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
+        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
+        const tooltip: string = StrCast(this.rootDoc.toolTip);
+        // TODO:glr Add label of button type
+        let button: JSX.Element = this.defaultButton;
+        // prettier-ignore
+        switch (this.type) {
+            case ButtonType.EditableText: 
+                button = this.editableText;
+                break;
+            case ButtonType.DropdownList:
+                button = this.dropdownListButton;
+                break;
+            case ButtonType.ColorButton: 
+                button = this.colorButton; 
+                break;
+            case ButtonType.NumberDropdownButton: 
+            case ButtonType.NumberInlineButton:
+            case ButtonType.NumberSliderButton: 
+                button = this.numberDropdown; 
+                break;
+            case ButtonType.DropdownButton: 
+                button = this.dropdownButton; 
+                break;
+            case ButtonType.ToggleButton: button = this.toggleButton; break;
+            case ButtonType.TextButton: 
+                const script = ScriptCast(this.rootDoc.script);
+                const checkResult = script?.script.run({ _readOnly_: true }).result;
+                // Script for checking the outcome of the toggle
+                button = (
+                    <Button tooltip={tooltip} color={checkResult ?? backgroundColor} icon={this.Icon(color)!} text={StrCast(this.rootDoc.buttonText)} label={this.label}/>
+                );
+                break;
+            case ButtonType.ClickButton:
+            case ButtonType.ToolButton: 
+                button = (
+                    <IconButton tooltip={tooltip} onPointerDown={() => script?.script.run({ _readOnly_: false })} color={color} icon={this.Icon(color)!} label={this.label}/>
+                );
+                break;
+            case ButtonType.MenuButton: button = (
+                    <IconButton tooltip={tooltip} tooltipPlacement='right' size={Size.LARGE} color={color} icon={this.Icon(color)!} label={this.label}/>
+                );
+                break;
+        }
+
+        return button;
+    }
+}
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
deleted file mode 100644
index 5bba51ec8..000000000
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ /dev/null
@@ -1,953 +0,0 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Tooltip } from '@material-ui/core';
-import { action, computed, observable, runInAction } from 'mobx';
-import { observer } from 'mobx-react';
-import * as React from 'react';
-import { ColorState, SketchPicker } from 'react-color';
-import { Doc, StrListCast } from '../../../../fields/Doc';
-import { Height, Width } from '../../../../fields/DocSymbols';
-import { InkTool } from '../../../../fields/InkField';
-import { ScriptField } from '../../../../fields/ScriptField';
-import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
-import { WebField } from '../../../../fields/URLField';
-import { GestureUtils } from '../../../../pen-gestures/GestureUtils';
-import { aggregateBounds, Utils } from '../../../../Utils';
-import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes';
-import { LinkManager } from '../../../util/LinkManager';
-import { ScriptingGlobals } from '../../../util/ScriptingGlobals';
-import { SelectionManager } from '../../../util/SelectionManager';
-import { undoable, undoBatch, UndoManager } from '../../../util/UndoManager';
-import { CollectionFreeFormView } from '../../collections/collectionFreeForm';
-import { ContextMenu } from '../../ContextMenu';
-import { DocComponent } from '../../DocComponent';
-import { EditableView } from '../../EditableView';
-import { GestureOverlay } from '../../GestureOverlay';
-import { Colors } from '../../global/globalEnums';
-import { ActiveFillColor, ActiveInkColor, ActiveInkWidth, ActiveIsInkMask, SetActiveFillColor, SetActiveInkColor, SetActiveInkWidth, SetActiveIsInkMask } from '../../InkingStroke';
-import { InkTranscription } from '../../InkTranscription';
-import { StyleProp } from '../../StyleProvider';
-import { FieldView, FieldViewProps } from '.././FieldView';
-import { CollectionFreeFormDocumentView } from '../CollectionFreeFormDocumentView';
-import { OpenWhere } from '../DocumentView';
-import { RichTextMenu } from '../formattedText/RichTextMenu';
-import { WebBox } from '../WebBox';
-import { FontIconBadge } from './FontIconBadge';
-import './FontIconBox.scss';
-
-export enum ButtonType {
-    TextButton = 'textBtn',
-    MenuButton = 'menuBtn',
-    DropdownList = 'drpdownList',
-    DropdownButton = 'drpdownBtn',
-    ClickButton = 'clickBtn',
-    DoubleButton = 'dblBtn',
-    ToggleButton = 'tglBtn',
-    ColorButton = 'colorBtn',
-    ToolButton = 'toolBtn',
-    NumberSliderButton = 'numSliderBtn',
-    NumberDropdownButton = 'numDropdownBtn',
-    NumberInlineButton = 'numInlineBtn',
-    EditableText = 'editableText',
-}
-
-export interface ButtonProps extends FieldViewProps {
-    type?: ButtonType;
-}
-@observer
-export class FontIconBox extends DocComponent<ButtonProps>() {
-    public static LayoutString(fieldKey: string) {
-        return FieldView.LayoutString(FontIconBox, fieldKey);
-    }
-    @observable noTooltip = false;
-    showTemplate = (): void => {
-        const dragFactory = Cast(this.layoutDoc.dragFactory, Doc, null);
-        dragFactory && this.props.addDocTab(dragFactory, OpenWhere.addRight);
-    };
-    dragAsTemplate = (): void => {
-        this.layoutDoc.onDragStart = ScriptField.MakeFunction('getCopy(this.dragFactory, true)');
-    };
-    useAsPrototype = (): void => {
-        this.layoutDoc.onDragStart = ScriptField.MakeFunction('makeDelegate(this.dragFactory, true)');
-    };
-
-    specificContextMenu = (): void => {
-        if (!Doc.noviceMode) {
-            const cm = ContextMenu.Instance;
-            cm.addItem({ description: 'Show Template', event: this.showTemplate, icon: 'tag' });
-            cm.addItem({ description: 'Use as Render Template', event: this.dragAsTemplate, icon: 'tag' });
-            cm.addItem({ description: 'Use as Prototype', event: this.useAsPrototype, icon: 'tag' });
-        }
-    };
-
-    static GetShowLabels() {
-        return BoolCast(Doc.UserDoc()._showLabel);
-    }
-    static SetShowLabels(show: boolean) {
-        Doc.UserDoc()._showLabel = show;
-    }
-    static GetRecognizeGestures() {
-        return BoolCast(Doc.UserDoc()._recognizeGestures);
-    }
-    static SetRecognizeGestures(show: boolean) {
-        Doc.UserDoc()._recognizeGestures = show;
-    }
-
-    // Determining UI Specs
-    @computed get label() {
-        return StrCast(this.rootDoc.icon_label, StrCast(this.rootDoc.title));
-    }
-    Icon = (color: string) => {
-        const icon = StrCast(this.dataDoc[this.fieldKey ?? 'icon'] ?? this.dataDoc.icon, 'user') as any;
-        const trailsIcon = () => <img src={`/assets/${'presTrails.png'}`} style={{ width: 30, height: 30, filter: `invert(${color === Colors.DARK_GRAY ? '0%' : '100%'})` }} />;
-        return !icon ? null : icon === 'pres-trail' ? trailsIcon() : <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />;
-    };
-    @computed get dropdown() {
-        return BoolCast(this.rootDoc.dropDownOpen);
-    }
-    @computed get buttonList() {
-        return StrListCast(this.rootDoc.btnList);
-    }
-    @computed get type() {
-        return StrCast(this.rootDoc.btnType);
-    }
-
-    /**
-     * Types of buttons in dash:
-     * - Main menu button (LHS)
-     * - Tool button
-     * - Expandable button (CollectionLinearView)
-     * - Button inside of CollectionLinearView vs. outside of CollectionLinearView
-     * - Action button
-     * - Dropdown button
-     * - Color button
-     * - Dropdown list
-     * - Number button
-     **/
-
-    _batch: UndoManager.Batch | undefined = undefined;
-    /**
-     * Number button
-     */
-    @computed get numberSliderButton() {
-        const numScript = (value?: number) => ScriptCast(this.rootDoc.script).script.run({ self: this.rootDoc, value, _readOnly_: value === undefined });
-        // Script for checking the outcome of the toggle
-        const checkResult = Number(numScript().result ?? 0).toPrecision(NumCast(this.dataDoc.numPrecision, 3));
-        const label = !FontIconBox.GetShowLabels() ? null : <div className="fontIconBox-label">{this.label}</div>;
-
-        const dropdown = (
-            <div className="menuButton-dropdownBox" onPointerDown={e => e.stopPropagation()}>
-                <input
-                    className="menu-slider"
-                    type="range"
-                    step="1"
-                    min={NumCast(this.rootDoc.numBtnMin, 0)}
-                    max={NumCast(this.rootDoc.numBtnMax, 100)}
-                    //readOnly={true}
-                    value={checkResult}
-                    onPointerDown={() => (this._batch = UndoManager.StartBatch('num slider changing'))}
-                    onPointerUp={() => this._batch?.end()}
-                    onChange={undoable(e => {
-                        e.stopPropagation();
-                        numScript(Number(e.target.value));
-                    }, 'set num value')}
-                />
-            </div>
-        );
-        return (
-            <div
-                className="menuButton numBtn slider"
-                onPointerDown={e => e.stopPropagation()}
-                onClick={action(() => {
-                    this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen;
-                    this.noTooltip = this.rootDoc.dropDownOpen;
-                    Doc.UnBrushAllDocs();
-                })}>
-                {checkResult}
-                {label}
-                {this.rootDoc.dropDownOpen ? dropdown : null}
-            </div>
-        );
-    }
-    /**
-     * Number button
-     */
-    @computed get numberDropdownButton() {
-        const numScript = (value?: number) => ScriptCast(this.rootDoc.script)?.script.run({ self: this.rootDoc, value, _readOnly_: value === undefined });
-
-        const checkResult = Number(numScript().result ?? 0).toPrecision(NumCast(this.dataDoc.numPrecision, 3));
-
-        const items: number[] = [];
-        for (let i = 0; i < 100; i += 2) items.push(i);
-
-        const list = items.map(value => {
-            return (
-                <div
-                    className="list-item"
-                    key={`${value}`}
-                    style={{
-                        backgroundColor: value.toString() === checkResult ? Colors.LIGHT_BLUE : undefined,
-                    }}
-                    onClick={undoable(value => numScript(value), `${this.rootDoc.title} button set from list`)}>
-                    {value}
-                </div>
-            );
-        });
-        return (
-            <div className="menuButton numBtn list">
-                <div className="button" onClick={undoable(e => numScript(Number(checkResult) - 1), `${this.rootDoc.title} decrement value`)}>
-                    <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon="minus" />
-                </div>
-                <div
-                    className={`button ${'number'}`}
-                    onPointerDown={e => {
-                        e.stopPropagation();
-                        e.preventDefault();
-                    }}
-                    onClick={action(() => {
-                        this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen;
-                        this.noTooltip = this.rootDoc.dropDownOpen;
-                        Doc.UnBrushAllDocs();
-                    })}>
-                    <input style={{ width: 30 }} className="button-input" type="number" value={checkResult} readOnly={true} onChange={undoable(e => numScript(Number(e.target.value)), `${this.rootDoc.title} button set value`)} />
-                </div>
-                <div className={`button`} onClick={undoable(e => numScript(Number(checkResult) + 1), `${this.rootDoc.title} increment value`)}>
-                    <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={'plus'} />
-                </div>
-
-                {this.rootDoc.dropDownOpen ? (
-                    <div>
-                        <div className="menuButton-dropdownList" style={{ left: '25%' }}>
-                            {list}
-                        </div>
-                        <div
-                            className="dropbox-background"
-                            onClick={action(e => {
-                                e.stopPropagation();
-                                this.rootDoc.dropDownOpen = false;
-                                this.noTooltip = false;
-                                Doc.UnBrushAllDocs();
-                            })}
-                        />
-                    </div>
-                ) : null}
-            </div>
-        );
-    }
-    /**
-     * Number button
-     */
-    @computed get numberInlineButton() {
-        return <div />;
-    }
-
-    /**
-     * Dropdown button
-     */
-    @computed get dropdownButton() {
-        const active: string = StrCast(this.rootDoc.dropDownOpen);
-        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
-        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
-        return (
-            <div
-                className={`menuButton ${this.type} ${active}`}
-                style={{ color: color, backgroundColor: backgroundColor, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
-                onClick={action(() => {
-                    this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen;
-                    this.noTooltip = this.rootDoc.dropDownOpen;
-                    Doc.UnBrushAllDocs();
-                })}>
-                {this.Icon(color)}
-                {!this.label || !FontIconBox.GetShowLabels() ? null : (
-                    <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}>
-                        {' '}
-                        {this.label}{' '}
-                    </div>
-                )}
-                <div className="menuButton-dropdown" style={{ borderBottomRightRadius: this.dropdown ? 0 : undefined }}>
-                    <FontAwesomeIcon icon={'caret-down'} color={color} size="sm" />
-                </div>
-                {this.rootDoc.dropDownOpen ? <div className="menuButton-dropdownBox">{/* DROPDOWN BOX CONTENTS */}</div> : null}
-            </div>
-        );
-    }
-
-    /**
-     * Dropdown list
-     */
-    @computed get dropdownListButton() {
-        const active: string = StrCast(this.rootDoc.dropDownOpen);
-        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
-        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
-
-        const script = ScriptCast(this.rootDoc.script);
-
-        let noviceList: string[] = [];
-        let text: string | undefined;
-        let dropdown = true;
-        let icon: IconProp = 'caret-down';
-        try {
-            if (script?.script.originalScript.startsWith('setView')) {
-                const selected = SelectionManager.Docs().lastElement();
-                if (selected) {
-                    if (StrCast(selected.type) === DocumentType.COL) {
-                        text = StrCast(selected._type_collection);
-                    } else {
-                        dropdown = false;
-                        text = selected.type === DocumentType.RTF ? 'Text' : StrCast(selected.type);
-                        icon = Doc.toIcon(selected);
-                    }
-                } else {
-                    dropdown = false;
-                    icon = 'globe-asia';
-                    text = 'User Default';
-                }
-                noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking, CollectionViewType.NoteTaking];
-            } else text = StrCast((RichTextMenu.Instance?.TextView?.EditorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily);
-        } catch (e) {
-            console.log(e);
-        }
-
-        // Get items to place into the list
-        const list = this.buttonList
-            .filter(value => !Doc.noviceMode || !noviceList.length || noviceList.includes(value))
-            .map(value => (
-                <div
-                    className="list-item"
-                    key={value}
-                    style={{
-                        fontFamily: script.script.originalScript.startsWith('{ return setFont') ? value : undefined,
-                        backgroundColor: value === text ? Colors.LIGHT_BLUE : undefined,
-                    }}
-                    onClick={undoable(() => script.script.run({ self: this.rootDoc, value }), value)}>
-                    {value[0].toUpperCase() + value.slice(1)}
-                </div>
-            ));
-
-        const label =
-            !this.label || !FontIconBox.GetShowLabels() ? null : (
-                <div className="fontIconBox-label" style={{ bottom: 0, position: 'absolute', color: color, backgroundColor: backgroundColor }}>
-                    {this.label}
-                </div>
-            );
-
-        return (
-            <div
-                className={`menuButton ${this.type} ${active}`}
-                style={{ backgroundColor: this.rootDoc.dropDownOpen ? Colors.MEDIUM_BLUE : backgroundColor, color: color, display: dropdown ? undefined : 'flex' }}
-                onClick={
-                    dropdown
-                        ? action(() => {
-                              this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen;
-                              this.noTooltip = this.rootDoc.dropDownOpen;
-                              Doc.UnBrushAllDocs();
-                          })
-                        : undefined
-                }>
-                {dropdown ? null : <FontAwesomeIcon style={{ marginLeft: 5 }} className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />}
-                <div className="menuButton-dropdown-header">{text && text[0].toUpperCase() + text.slice(1)}</div>
-                {label}
-                {!dropdown ? null : (
-                    <div className="menuButton-dropDown">
-                        <FontAwesomeIcon icon={icon} color={color} size="sm" />
-                    </div>
-                )}
-                {this.rootDoc.dropDownOpen ? (
-                    <div>
-                        <div className="menuButton-dropdownList" style={{ left: 0 }}>
-                            {list}
-                        </div>
-                        <div
-                            className="dropbox-background"
-                            onClick={action(e => {
-                                e.stopPropagation();
-                                this.rootDoc.dropDownOpen = false;
-                                this.noTooltip = false;
-                                Doc.UnBrushAllDocs();
-                            })}
-                        />
-                    </div>
-                ) : null}
-            </div>
-        );
-    }
-
-    @observable colorPickerClosed: boolean = true;
-    @computed get colorScript() {
-        return ScriptCast(this.rootDoc.script);
-    }
-
-    colorPicker = (curColor: string) => {
-        const change = (value: ColorState, ev: MouseEvent) => {
-            ev.preventDefault();
-            ev.stopPropagation();
-            const s = this.colorScript;
-            s && undoBatch(() => s.script.run({ self: this.rootDoc, value: Utils.colorString(value), _readOnly_: false }).result)();
-        };
-        const presets = ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', '#f1efeb', 'transparent'];
-        return <SketchPicker onChange={change as any /* SketchPicker passes the mouse event to the callback, but the type system doesn't know that */} color={curColor} presetColors={presets} />;
-    };
-    /**
-     * Color button
-     */
-    @computed get colorButton() {
-        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
-        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
-        const curColor = this.colorScript?.script.run({ self: this.rootDoc, value: undefined, _readOnly_: true }).result ?? 'transparent';
-
-        const label =
-            !this.label || !FontIconBox.GetShowLabels() ? null : (
-                <div className="fontIconBox-label" style={{ color, backgroundColor }}>
-                    {this.label}
-                </div>
-            );
-
-        return (
-            <div
-                className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? 'Label' : '')} ${this.colorPickerClosed}`}
-                style={{ color: color, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
-                onClick={action(e => {
-                    this.colorPickerClosed = !this.colorPickerClosed;
-                    this.noTooltip = !this.colorPickerClosed;
-                    setTimeout(() => Doc.UnBrushAllDocs());
-                    e.stopPropagation();
-                })}
-                onPointerDown={e => e.stopPropagation()}>
-                {this.Icon(color)}
-                <div className="colorButton-color" style={{ backgroundColor: curColor }} />
-                {label}
-                {/* {dropdownCaret} */}
-                {this.colorPickerClosed ? null : (
-                    <div>
-                        <div className="menuButton-dropdownBox" onPointerDown={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onClick={e => e.stopPropagation()}>
-                            {this.colorPicker(curColor)}
-                        </div>
-                        <div
-                            className="dropbox-background"
-                            onPointerDown={action(e => {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                this.colorPickerClosed = true;
-                                this.noTooltip = false;
-                                Doc.UnBrushAllDocs();
-                            })}
-                        />
-                    </div>
-                )}
-            </div>
-        );
-    }
-
-    @computed get toggleButton() {
-        // Determine the type of toggle button
-        const switchToggle: boolean = BoolCast(this.rootDoc.switchToggle);
-        const buttonText: string = StrCast(this.rootDoc.buttonText);
-        // Colors
-        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
-        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
-
-        // Button label
-        const label =
-            !this.label || !FontIconBox.GetShowLabels() ? null : (
-                <div className="fontIconBox-label" style={{ color, backgroundColor }}>
-                    {this.label}
-                </div>
-            );
-
-        if (switchToggle) {
-            return (
-                <div className={`menuButton ${this.type} ${'switch'}`}>
-                    {buttonText ? buttonText : null}
-                    <label className="switch">
-                        <input type="checkbox" checked={backgroundColor === Colors.MEDIUM_BLUE} />
-                        <span className="slider round" />
-                    </label>
-                </div>
-            );
-        } else {
-            return (
-                <div className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? 'Label' : '')}`} style={{ opacity: 1, backgroundColor, color }}>
-                    {this.Icon(color)}
-                    {label}
-                </div>
-            );
-        }
-    }
-
-    /**
-     * Default
-     */
-    @computed get defaultButton() {
-        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
-        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
-        return (
-            <div className={`menuButton ${this.type}`} onContextMenu={this.specificContextMenu} style={{ backgroundColor: 'transparent', borderBottomLeftRadius: this.dropdown ? 0 : undefined }}>
-                <div className="menuButton-wrap">
-                    {this.Icon(color)}
-                    {!this.label || !FontIconBox.GetShowLabels() ? null : (
-                        <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}>
-                            {' '}
-                            {this.label}{' '}
-                        </div>
-                    )}
-                </div>
-            </div>
-        );
-    }
-
-    @computed get editableText() {
-        // Script for running the toggle
-        const script = ScriptCast(this.rootDoc.script);
-        // Function to run the script
-        const checkResult = script?.script.run({ value: '', _readOnly_: true }).result;
-
-        const setValue = (value: string, shiftDown?: boolean): boolean => script?.script.run({ value, _readOnly_: false }).result;
-        return (
-            <div className="menuButton editableText">
-                <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={'lock'} />
-                <div style={{ width: 'calc(100% - .875em)', paddingLeft: '4px' }}>
-                    <EditableView GetValue={() => script?.script.run({ value: '', _readOnly_: true }).result} SetValue={setValue} oneLine={true} contents={checkResult} />
-                </div>
-            </div>
-        );
-    }
-
-    render() {
-        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
-        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
-        const label = (noBackground: boolean = false) =>
-            !this.label || !FontIconBox.GetShowLabels() ? null : (
-                <div className="fontIconBox-label" style={{ color, backgroundColor: noBackground ? 'transparent' : backgroundColor }}>
-                    {this.label}
-                </div>
-            );
-        // TODO:glr Add label of button type
-        let button: JSX.Element = this.defaultButton;
-
-        // prettier-ignore
-        switch (this.type) {
-            case ButtonType.EditableText: return this.editableText;
-            case ButtonType.DropdownList: button = this.dropdownListButton; break;
-            case ButtonType.ColorButton: button = this.colorButton; break;
-            case ButtonType.NumberDropdownButton: button = this.numberDropdownButton; break;
-            case ButtonType.NumberInlineButton: button = this.numberInlineButton; break;
-            case ButtonType.NumberSliderButton: button = this.numberSliderButton; break;
-            case ButtonType.DropdownButton: button = this.dropdownButton; break;
-            case ButtonType.ToggleButton: button = this.toggleButton; break;
-            case ButtonType.TextButton: 
-                    // Script for checking the outcome of the toggle
-                    const script = ScriptCast(this.rootDoc.script);
-                    const checkResult = script?.script.run({ _readOnly_: true }).result;
-                    button = (
-                    <div className={`menuButton ${this.type}`} style={{ color, backgroundColor:checkResult ?? backgroundColor, opacity: 1, gridAutoColumns: `${NumCast(this.rootDoc._height)} auto` }}>
-                        {this.Icon(color)}
-                        {StrCast(this.rootDoc.buttonText) ? <div className="button-text">{StrCast(this.rootDoc.buttonText)}</div> : null}
-                        {label()}
-                    </div>
-                );
-                break;
-            case ButtonType.ClickButton:
-            case ButtonType.ToolButton: button = (
-                    <div className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? 'Label' : '')}`} style={{ backgroundColor, color, opacity: 1 }}>
-                        {this.Icon(color)}
-                        {label()}
-                    </div>
-                );
-                break;
-            case ButtonType.MenuButton: button = (
-                    <div className={`menuButton ${this.type}`} style={{ color, backgroundColor }}>
-                        {this.Icon(color)}
-                        {label(true)}
-                        <FontIconBadge value={Cast(this.Document.badgeValue, 'string', null)} />
-                    </div>
-                );
-                break;
-        }
-
-        return !this.layoutDoc.toolTip || this.noTooltip ? button : <Tooltip title={<div className="dash-tooltip">{StrCast(this.layoutDoc.toolTip)}</div>}>{button}</Tooltip>;
-    }
-}
-
-// toggle: Set overlay status of selected document
-ScriptingGlobals.add(function setView(view: string) {
-    const selected = SelectionManager.Docs().lastElement();
-    selected ? (selected._type_collection = view) : console.log('[FontIconBox.tsx] changeView failed');
-});
-
-// toggle: Set overlay status of selected document
-ScriptingGlobals.add(function setBackgroundColor(color?: string, checkResult?: boolean) {
-    const selectedViews = SelectionManager.Views();
-    if (Doc.ActiveTool !== InkTool.None) {
-        if (checkResult) {
-            return ActiveFillColor();
-        }
-        SetActiveFillColor(color ?? 'transparent');
-    } else if (selectedViews.length) {
-        if (checkResult) {
-            const selView = selectedViews.lastElement();
-            const fieldKey = selView.rootDoc.type === DocumentType.INK ? 'fillColor' : 'backgroundColor';
-            const layoutFrameNumber = Cast(selView.props.docViewPath().lastElement()?.rootDoc?._currentFrame, 'number'); // frame number that container is at which determines layout frame values
-            const contentFrameNumber = Cast(selView.rootDoc?._currentFrame, 'number', layoutFrameNumber ?? null); // frame number that content is at which determines what content is displayed
-            return CollectionFreeFormDocumentView.getStringValues(selView?.rootDoc, contentFrameNumber)[fieldKey] ?? 'transparent';
-        }
-        selectedViews.forEach(dv => {
-            const fieldKey = dv.rootDoc.type === DocumentType.INK ? 'fillColor' : 'backgroundColor';
-            const layoutFrameNumber = Cast(dv.props.docViewPath().lastElement()?.rootDoc?._currentFrame, 'number'); // frame number that container is at which determines layout frame values
-            const contentFrameNumber = Cast(dv.rootDoc?._currentFrame, 'number', layoutFrameNumber ?? null); // frame number that content is at which determines what content is displayed
-            if (contentFrameNumber !== undefined) {
-                CollectionFreeFormDocumentView.setStringValues(contentFrameNumber, dv.rootDoc, { fieldKey: color });
-            } else {
-                dv.rootDoc['_' + fieldKey] = color;
-            }
-        });
-    } else {
-        const selected = SelectionManager.Docs().length ? SelectionManager.Docs() : LinkManager.currentLink ? [LinkManager.currentLink] : [];
-        if (checkResult) {
-            return selected.lastElement()?._backgroundColor ?? 'transparent';
-        }
-        selected.forEach(doc => (doc._backgroundColor = color));
-    }
-});
-
-// toggle: Set overlay status of selected document
-ScriptingGlobals.add(function setHeaderColor(color?: string, checkResult?: boolean) {
-    if (checkResult) {
-        return Doc.SharingDoc().userColor;
-    }
-    Doc.SharingDoc().userColor = undefined;
-    Doc.GetProto(Doc.SharingDoc()).userColor = color;
-    Doc.UserDoc().layout_showTitle = color === 'transparent' ? undefined : StrCast(Doc.UserDoc().layout_showTitle, 'author_date');
-});
-
-// toggle: Set overlay status of selected document
-ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) {
-    const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
-    if (checkResult) {
-        if (NumCast(selected?.Document.z) >= 1) return Colors.MEDIUM_BLUE;
-        return 'transparent';
-    }
-    selected ? selected.props.CollectionFreeFormDocumentView?.().float() : console.log('[FontIconBox.tsx] toggleOverlay failed');
-});
-
-ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll', checkResult?: boolean) {
-    const selected = SelectionManager.Docs().lastElement();
-    // prettier-ignore
-    const map: Map<'flashcards' | 'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc) => void;}> = new Map([
-        ['grid', {
-            checkResult: (doc:Doc) => doc._freeform_backgroundGrid,
-            setDoc: (doc:Doc) => doc._freeform_backgroundGrid = !doc._freeform_backgroundGrid,
-        }],
-        ['snaplines', {
-            checkResult: (doc:Doc) => doc._freeform_snapLines,
-            setDoc: (doc:Doc) => doc._freeform_snapLines = !doc._freeform_snapLines,
-        }],
-        ['viewAll', {
-            checkResult: (doc:Doc) => doc._freeform_fitContentsToBox,
-            setDoc: (doc:Doc) => doc._freeform_fitContentsToBox = !doc._freeform_fitContentsToBox,
-        }],
-        ['clusters', {
-            waitForRender: true, // flags that undo batch should terminate after a re-render giving the script the chance to fire
-            checkResult: (doc:Doc) => doc._freeform_useClusters,
-            setDoc: (doc:Doc) => doc._freeform_useClusters = !doc._freeform_useClusters,
-        }],
-        ['arrange', {
-            waitForRender: true, // flags that undo batch should terminate after a re-render giving the script the chance to fire
-            checkResult: (doc:Doc) => doc._autoArrange,
-            setDoc: (doc:Doc) => doc._autoArrange = !doc._autoArrange,
-        }],
-        ['flashcards', {
-            checkResult: (doc:Doc) => Doc.UserDoc().defaultToFlashcards,
-            setDoc: (doc:Doc) => Doc.UserDoc().defaultToFlashcards = !Doc.UserDoc().defaultToFlashcards,
-        }],
-   ]);
-
-    if (checkResult) {
-        return map.get(attr)?.checkResult(selected) ? Colors.MEDIUM_BLUE : 'transparent';
-    }
-    const batch = map.get(attr)?.waitForRender ? UndoManager.StartBatch('set freeform attribute') : { end: () => {} };
-    SelectionManager.Docs().map(dv => map.get(attr)?.setDoc(dv));
-    setTimeout(() => batch.end(), 100);
-});
-ScriptingGlobals.add(function setFontAttr(attr: 'font' | 'fontColor' | 'highlight' | 'fontSize', value: any, checkResult?: boolean) {
-    const editorView = RichTextMenu.Instance?.TextView?.EditorView;
-    const selected = SelectionManager.Docs().lastElement();
-    // prettier-ignore
-    const map: Map<'font'|'fontColor'|'highlight'|'fontSize', { checkResult: () => any; setDoc: () => void;}> = new Map([
-        ['font', {
-            checkResult: () => RichTextMenu.Instance?.fontFamily,
-            setDoc: () => value && RichTextMenu.Instance.setFontFamily(value),
-        }],
-        ['highlight', {
-            checkResult: () =>(selected ?? Doc.UserDoc())._fontHighlight,
-            setDoc: () => value  && RichTextMenu.Instance.setHighlight(value),
-        }],
-        ['fontColor', {
-            checkResult: () => RichTextMenu.Instance?.fontColor,
-            setDoc: () => value && RichTextMenu.Instance.setColor(value),
-        }],
-        ['fontSize', {
-            checkResult: () => RichTextMenu.Instance?.fontSize.replace('px', ''),
-            setDoc: () => {
-                if (typeof value === 'number') value = value.toString();
-                if (value && Number(value).toString() === value) value += 'px';
-                RichTextMenu.Instance.setFontSize(value);
-            },
-        }],
-    ]);
-
-    if (checkResult) {
-        return map.get(attr)?.checkResult();
-    }
-    map.get(attr)?.setDoc?.();
-});
-
-type attrname = 'noAutoLink' | 'dictation' | 'bold' | 'italics' | 'underline' | 'left' | 'center' | 'right' | 'bullet' | 'decimal';
-type attrfuncs = [attrname, { checkResult: () => boolean; toggle: () => any }];
-ScriptingGlobals.add(function toggleCharStyle(charStyle: attrname, checkResult?: boolean) {
-    const textView = RichTextMenu.Instance?.TextView;
-    const editorView = textView?.EditorView;
-    // prettier-ignore
-    const alignments:attrfuncs[] = (['left','right','center'] as ("left"|"center"|"right")[]).map((where) =>
-        [ where, {      checkResult: () =>(editorView ? (RichTextMenu.Instance.textAlign ===where): (Doc.UserDoc().textAlign ===where) ? true:false),
-                        toggle: () => (editorView?.state ? RichTextMenu.Instance.align(editorView, editorView.dispatch, where):(Doc.UserDoc().textAlign = where))}]);
-    // prettier-ignore
-    const listings:attrfuncs[] = (['bullet','decimal'] as attrname[]).map(list =>
-        [ list, {       checkResult: () => (editorView ? RichTextMenu.Instance.getActiveListStyle() === list:false),
-                        toggle: () => editorView?.state && RichTextMenu.Instance.changeListType(list) }]);
-    // prettier-ignore
-    const attrs:attrfuncs[] = [
-        ['dictation', { checkResult: () => textView?._recording ? true:false,
-                        toggle: () => textView && runInAction(() => (textView._recording = !textView._recording)) }],
-        ['noAutoLink',{ checkResult: () => (editorView ? RichTextMenu.Instance.noAutoLink : false),
-                        toggle: () => editorView && RichTextMenu.Instance?.toggleNoAutoLinkAnchor()}],
-        ['bold',      { checkResult: () => (editorView ? RichTextMenu.Instance.bold : (Doc.UserDoc().fontWeight === 'bold') ? true:false),
-                        toggle: editorView ? RichTextMenu.Instance.toggleBold : () => (Doc.UserDoc().fontWeight = Doc.UserDoc().fontWeight === 'bold' ? undefined : 'bold')}],
-        ['italics',   { checkResult: () => (editorView ? RichTextMenu.Instance.italics : (Doc.UserDoc().fontStyle === 'italics') ? true:false),
-                        toggle: editorView ? RichTextMenu.Instance.toggleItalics : () => (Doc.UserDoc().fontStyle = Doc.UserDoc().fontStyle === 'italics' ? undefined : 'italics')}],
-        ['underline', { checkResult: () => (editorView ? RichTextMenu.Instance.underline : (Doc.UserDoc().textDecoration === 'underline') ? true:false),
-                        toggle: editorView ? RichTextMenu.Instance.toggleUnderline : () => (Doc.UserDoc().textDecoration = Doc.UserDoc().textDecoration === 'underline' ? undefined : 'underline') }]]
-
-    const map = new Map(attrs.concat(alignments).concat(listings));
-    if (checkResult) return map.get(charStyle)?.checkResult() ? Colors.MEDIUM_BLUE : 'transparent';
-    map.get(charStyle)?.toggle();
-});
-
-export function checkInksToGroup() {
-    // console.log("getting here to inks group");
-    if (Doc.ActiveTool === InkTool.Write) {
-        CollectionFreeFormView.collectionsWithUnprocessedInk.forEach(ffView => {
-            // TODO: nda - will probably want to go through ffView unprocessed docs and then see if any of the inksToGroup docs are in it and only use those
-            // find all inkDocs in ffView.unprocessedDocs that are within 200 pixels of each other
-            const inksToGroup = ffView.unprocessedDocs.filter(inkDoc => {
-                // console.log(inkDoc.x, inkDoc.y);
-            });
-        });
-    }
-}
-
-export function createInkGroup(inksToGroup?: Doc[], isSubGroup?: boolean) {
-    // TODO nda - if document being added to is a inkGrouping then we can just add to that group
-    if (Doc.ActiveTool === InkTool.Write) {
-        CollectionFreeFormView.collectionsWithUnprocessedInk.forEach(ffView => {
-            // TODO: nda - will probably want to go through ffView unprocessed docs and then see if any of the inksToGroup docs are in it and only use those
-            const selected = ffView.unprocessedDocs;
-            // loop through selected an get the bound
-            const bounds: { x: number; y: number; width?: number; height?: number }[] = [];
-
-            selected.map(
-                action(d => {
-                    const x = NumCast(d.x);
-                    const y = NumCast(d.y);
-                    const width = d[Width]();
-                    const height = d[Height]();
-                    bounds.push({ x, y, width, height });
-                })
-            );
-
-            const aggregBounds = aggregateBounds(bounds, 0, 0);
-            const marqViewRef = ffView._marqueeViewRef.current;
-
-            // set the vals for bounds in marqueeView
-            if (marqViewRef) {
-                marqViewRef._downX = aggregBounds.x;
-                marqViewRef._downY = aggregBounds.y;
-                marqViewRef._lastX = aggregBounds.r;
-                marqViewRef._lastY = aggregBounds.b;
-            }
-
-            selected.map(
-                action(d => {
-                    const dx = NumCast(d.x);
-                    const dy = NumCast(d.y);
-                    delete d.x;
-                    delete d.y;
-                    delete d.activeFrame;
-                    delete d._timecodeToShow; // bcz: this should be automatic somehow.. along with any other properties that were logically associated with the original collection
-                    delete d._timecodeToHide; // bcz: this should be automatic somehow.. along with any other properties that were logically associated with the original collection
-                    // calculate pos based on bounds
-                    if (marqViewRef?.Bounds) {
-                        d.x = dx - marqViewRef.Bounds.left - marqViewRef.Bounds.width / 2;
-                        d.y = dy - marqViewRef.Bounds.top - marqViewRef.Bounds.height / 2;
-                    }
-                    return d;
-                })
-            );
-            ffView.props.removeDocument?.(selected);
-            // TODO: nda - this is the code to actually get a new grouped collection
-            const newCollection = marqViewRef?.getCollection(selected, undefined, true);
-            if (newCollection) {
-                newCollection.height = newCollection[Height]();
-                newCollection.width = newCollection[Width]();
-            }
-
-            // nda - bug: when deleting a stroke before leaving writing mode, delete the stroke from unprocessed ink docs
-            newCollection && ffView.props.addDocument?.(newCollection);
-            // TODO: nda - will probably need to go through and only remove the unprocessed selected docs
-            ffView.unprocessedDocs = [];
-
-            InkTranscription.Instance.transcribeInk(newCollection, selected, false);
-        });
-    }
-    CollectionFreeFormView.collectionsWithUnprocessedInk.clear();
-}
-
-function setActiveTool(tool: InkTool | GestureUtils.Gestures, keepPrim: boolean, checkResult?: boolean) {
-    InkTranscription.Instance?.createInkGroup();
-    if (checkResult) {
-        return (Doc.ActiveTool === tool && !GestureOverlay.Instance?.InkShape) || GestureOverlay.Instance?.InkShape === tool
-            ? GestureOverlay.Instance?.KeepPrimitiveMode || ![GestureUtils.Gestures.Circle, GestureUtils.Gestures.Line, GestureUtils.Gestures.Rectangle].includes(tool as GestureUtils.Gestures)
-                ? Colors.MEDIUM_BLUE
-                : Colors.MEDIUM_BLUE_ALT
-            : 'transparent';
-    }
-    runInAction(() => {
-        if (GestureOverlay.Instance) {
-            GestureOverlay.Instance.KeepPrimitiveMode = keepPrim;
-        }
-        if (Object.values(GestureUtils.Gestures).includes(tool as any)) {
-            if (GestureOverlay.Instance.InkShape === tool && !keepPrim) {
-                Doc.ActiveTool = InkTool.None;
-                GestureOverlay.Instance.InkShape = undefined;
-            } else {
-                Doc.ActiveTool = InkTool.Pen;
-                GestureOverlay.Instance.InkShape = tool as GestureUtils.Gestures;
-            }
-        } else if (tool) {
-            // pen or eraser
-            if (Doc.ActiveTool === tool && !GestureOverlay.Instance.InkShape && !keepPrim) {
-                Doc.ActiveTool = InkTool.None;
-            } else {
-                Doc.ActiveTool = tool as any;
-                GestureOverlay.Instance.InkShape = undefined;
-            }
-        } else {
-            Doc.ActiveTool = InkTool.None;
-        }
-    });
-}
-
-ScriptingGlobals.add(setActiveTool, 'sets the active ink tool mode');
-
-// toggle: Set overlay status of selected document
-ScriptingGlobals.add(function setInkProperty(option: 'inkMask' | 'fillColor' | 'strokeWidth' | 'strokeColor', value: any, checkResult?: boolean) {
-    const selected = SelectionManager.Docs().lastElement();
-    // prettier-ignore
-    const map: Map<'inkMask' | 'fillColor' | 'strokeWidth' | 'strokeColor', { checkResult: () => any; setInk: (doc: Doc) => void; setMode: () => void }> = new Map([
-        ['inkMask', {
-            checkResult: () => ((selected?.type === DocumentType.INK ? BoolCast(selected.stroke_isInkMask) : ActiveIsInkMask()) ? Colors.MEDIUM_BLUE : 'transparent'),
-            setInk: (doc: Doc) => (doc.stroke_isInkMask = !doc.stroke_isInkMask),
-            setMode: () => selected?.type !== DocumentType.INK && SetActiveIsInkMask(!ActiveIsInkMask()),
-        }],
-        ['fillColor', {
-            checkResult: () => (selected?.type === DocumentType.INK ? StrCast(selected.fillColor) : ActiveFillColor() ?? "transparent"),
-            setInk: (doc: Doc) => (doc.fillColor = StrCast(value)),
-            setMode: () => SetActiveFillColor(StrCast(value)),
-        }],
-        [ 'strokeWidth', {
-            checkResult: () => (selected?.type === DocumentType.INK ? NumCast(selected.stroke_width) : ActiveInkWidth()),
-            setInk: (doc: Doc) => (doc.stroke_width = NumCast(value)),
-            setMode: () => SetActiveInkWidth(value.toString()),
-        }],
-        ['strokeColor', {
-            checkResult: () => (selected?.type === DocumentType.INK ? StrCast(selected.color) : ActiveInkColor()),
-            setInk: (doc: Doc) => (doc.color = String(value)),
-            setMode: () => SetActiveInkColor(StrCast(value)),
-        }],
-    ]);
-
-    if (checkResult) {
-        return map.get(option)?.checkResult();
-    }
-    map.get(option)?.setMode();
-    SelectionManager.Docs()
-        .filter(doc => doc.type === DocumentType.INK)
-        .map(doc => map.get(option)?.setInk(doc));
-});
-
-/** WEB
- *      webSetURL
- **/
-ScriptingGlobals.add(function webSetURL(url: string, checkResult?: boolean) {
-    const selected = SelectionManager.Views().lastElement();
-    if (selected?.rootDoc.type === DocumentType.WEB) {
-        if (checkResult) {
-            return StrCast(selected.rootDoc.data, Cast(selected.rootDoc.data, WebField, null)?.url?.href);
-        }
-        selected.ComponentView?.setData?.(url);
-        //selected.rootDoc.data = new WebField(url);
-    }
-});
-ScriptingGlobals.add(function webForward(checkResult?: boolean) {
-    const selected = SelectionManager.Views().lastElement()?.ComponentView as WebBox;
-    if (checkResult) {
-        return selected?.forward(checkResult) ? undefined : 'lightGray';
-    }
-    selected?.forward();
-});
-ScriptingGlobals.add(function webBack(checkResult?: boolean) {
-    const selected = SelectionManager.Views().lastElement()?.ComponentView as WebBox;
-    if (checkResult) {
-        return selected?.back(checkResult) ? undefined : 'lightGray';
-    }
-    selected?.back();
-});
-
-/** Schema
- *      toggleSchemaPreview
- **/
-ScriptingGlobals.add(function toggleSchemaPreview(checkResult?: boolean) {
-    const selected = SelectionManager.Docs().lastElement();
-    if (checkResult && selected) {
-        const result: boolean = NumCast(selected.schema_previewWidth) > 0;
-        if (result) return Colors.MEDIUM_BLUE;
-        else return 'transparent';
-    } else if (selected) {
-        if (NumCast(selected.schema_previewWidth) > 0) {
-            selected.schema_previewWidth = 0;
-        } else {
-            selected.schema_previewWidth = 200;
-        }
-    }
-});
-ScriptingGlobals.add(function toggleSingleLineSchema(checkResult?: boolean) {
-    const selected = SelectionManager.Docs().lastElement();
-    if (checkResult && selected) {
-        return NumCast(selected._schema_singleLine) > 0 ? Colors.MEDIUM_BLUE : 'transparent';
-    }
-    if (selected) {
-        selected._schema_singleLine = !selected._schema_singleLine;
-    }
-});
-
-/** STACK
- *      groupBy
- */
-ScriptingGlobals.add(function setGroupBy(key: string, checkResult?: boolean) {
-    SelectionManager.Docs().map(doc => (doc._text_fontFamily = key));
-    const editorView = RichTextMenu.Instance.TextView?.EditorView;
-    if (checkResult) {
-        return StrCast((editorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily);
-    }
-    if (editorView) RichTextMenu.Instance.setFontFamily(key);
-    else Doc.UserDoc().fontFamily = key;
-});
diff --git a/src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx b/src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx
deleted file mode 100644
index 74c3c563c..000000000
--- a/src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React, { Component } from 'react';
-import { BoolCast, StrCast } from '../../../../../fields/Types';
-import { IButtonProps } from '../ButtonInterface';
-import { ColorState, SketchPicker } from 'react-color';
-import { ScriptField } from '../../../../../fields/ScriptField';
-import { Doc } from '../../../../../fields/Doc';
-import { FontIconBox } from '../FontIconBox';
-
-export class ColorDropdown extends Component<IButtonProps> {
-    render() {
-        const active: string = StrCast(this.props.rootDoc.dropDownOpen);
-
-        const script: string = StrCast(this.props.rootDoc.script);
-        const scriptCheck: string = script + '(undefined, true)';
-        const boolResult = ScriptField.MakeScript(scriptCheck)?.script.run().result;
-
-        const stroke: boolean = false;
-        // if (script === "setStrokeColor") {
-        //     stroke = true;
-        //     const checkWidth = ScriptField.MakeScript("setStrokeWidth(0, true)")?.script.run().result;
-        //     const width = 20 + (checkWidth / 100) * 70;
-        //     const height = 20 + (checkWidth / 100) * 70;
-        //     strokeIcon = (<div style={{ borderRadius: "100%", width: width + '%', height: height + '%', backgroundColor: boolResult ? boolResult : "#FFFFFF" }} />);
-        // }
-
-        const colorOptions: string[] = ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', '#f1efeb'];
-
-        const colorBox = (func: (color: ColorState) => void) => <SketchPicker disableAlpha={!stroke} onChange={func} color={boolResult ? boolResult : '#FFFFFF'} presetColors={colorOptions} />;
-        const label =
-            !this.props.label || !FontIconBox.GetShowLabels() ? null : (
-                <div className="fontIconBox-label" style={{ color: this.props.color, backgroundColor: this.props.backgroundColor, position: 'absolute' }}>
-                    {this.props.label}
-                </div>
-            );
-
-        const dropdownCaret = (
-            <div className="menuButton-dropDown" style={{ borderBottomRightRadius: active ? 0 : undefined }}>
-                <FontAwesomeIcon icon={'caret-down'} color={this.props.color} size="sm" />
-            </div>
-        );
-
-        const click = (value: ColorState) => {
-            const hex: string = value.hex;
-            const s = ScriptField.MakeScript(script + '("' + hex + '", false)');
-            if (s) {
-                s.script.run().result;
-            }
-        };
-        return (
-            <div
-                className={`menuButton ${this.props.type} ${active}`}
-                style={{ color: this.props.color, borderBottomLeftRadius: active ? 0 : undefined }}
-                onClick={() => (this.props.rootDoc.dropDownOpen = !this.props.rootDoc.dropDownOpen)}
-                onPointerDown={e => e.stopPropagation()}>
-                <FontAwesomeIcon className={`fontIconBox-icon-${this.props.type}`} icon={this.props.icon} color={this.props.color} />
-                <div className="colorButton-color" style={{ backgroundColor: boolResult ? boolResult : '#FFFFFF' }} />
-                {label}
-                {/* {dropdownCaret} */}
-                {this.props.rootDoc.dropDownOpen ? (
-                    <div>
-                        <div className="menuButton-dropdownBox" onPointerDown={e => e.stopPropagation()} onClick={e => e.stopPropagation()}>
-                            {colorBox(click)}
-                        </div>
-                        <div
-                            className="dropbox-background"
-                            onClick={e => {
-                                e.stopPropagation();
-                                this.props.rootDoc.dropDownOpen = false;
-                            }}
-                        />
-                    </div>
-                ) : null}
-            </div>
-        );
-    }
-}
diff --git a/src/client/views/nodes/button/colorDropdown/index.ts b/src/client/views/nodes/button/colorDropdown/index.ts
deleted file mode 100644
index 1147d6457..000000000
--- a/src/client/views/nodes/button/colorDropdown/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ColorDropdown';
\ No newline at end of file
diff --git a/src/client/views/nodes/button/textButton/TextButton.tsx b/src/client/views/nodes/button/textButton/TextButton.tsx
deleted file mode 100644
index 5d7d55863..000000000
--- a/src/client/views/nodes/button/textButton/TextButton.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React, { Component } from 'react';
-import { BoolCast } from '../../../../../fields/Types';
-import { IButtonProps } from '../ButtonInterface';
-
-export class TextButton extends Component<IButtonProps> {
-    render() {
-        const type = this.props.type;
-        // Determine the type of toggle button
-        const buttonText: boolean = BoolCast(this.props.rootDoc.switchToggle);
-
-        return (
-            <div
-                className={`menuButton ${this.props.type}`}
-                style={{
-                    opacity: 1,
-                    backgroundColor: this.props.backgroundColor,
-                    color: this.props.color,
-                }}
-            >
-                <FontAwesomeIcon
-                    className={`fontIconBox-icon-${this.props.type}`}
-                    icon={this.props.icon}
-                    color={this.props.color}
-                />
-                {this.props.label}
-            </div>
-        );
-    }
-}
diff --git a/src/client/views/nodes/button/textButton/index.ts b/src/client/views/nodes/button/textButton/index.ts
deleted file mode 100644
index 01d62eb7e..000000000
--- a/src/client/views/nodes/button/textButton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './TextButton';
\ No newline at end of file
diff --git a/src/client/views/nodes/button/toggleButton/ToggleButton.tsx b/src/client/views/nodes/button/toggleButton/ToggleButton.tsx
deleted file mode 100644
index dca6487d8..000000000
--- a/src/client/views/nodes/button/toggleButton/ToggleButton.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React, { Component } from 'react';
-import { BoolCast } from '../../../../../fields/Types';
-import { Colors } from '../../../global/globalEnums';
-import { IButtonProps } from '../ButtonInterface';
-
-export class ToggleButton extends Component<IButtonProps> {
-    render() {
-        const type = this.props.type;
-        // Determine the type of toggle button
-        const switchToggle: boolean = BoolCast(this.props.rootDoc.switchToggle);
-
-        if (switchToggle) {
-            return (
-                <div className={`menuButton ${type} ${'switch'}`}>
-                    <label className="switch">
-                        <input type="checkbox"
-                            checked={this.props.backgroundColor === Colors.MEDIUM_BLUE}
-                        />
-                        <span className="slider round"></span>
-                    </label>
-                </div>
-            );
-        } else {
-            return (
-                <div className={`menuButton ${type}`}
-                    style={{ opacity: 1, backgroundColor: this.props.backgroundColor, color: this.props.color }}>
-                    <FontAwesomeIcon className={`fontIconBox-icon-${type}`} icon={this.props.icon} color={this.props.color} />
-                    {this.props.label}
-                </div>
-            );
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/client/views/nodes/button/toggleButton/index.ts b/src/client/views/nodes/button/toggleButton/index.ts
deleted file mode 100644
index cdb9c527c..000000000
--- a/src/client/views/nodes/button/toggleButton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ToggleButton';
\ No newline at end of file
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 44cb56d53..a0eb328a1 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -12,8 +12,8 @@ import { Fragment, Mark, Node, Slice } from 'prosemirror-model';
 import { EditorState, NodeSelection, Plugin, TextSelection, Transaction } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import { DateField } from '../../../../fields/DateField';
-import { Doc, DocListCast, Field, Opt } from '../../../../fields/Doc';
-import { AclAdmin, AclAugment, AclEdit, AclSelfEdit, DocCss, ForceServerWrite, Height, UpdatingFromServer, Width } from '../../../../fields/DocSymbols';
+import { Doc, DocListCast, StrListCast, Field, Opt } from '../../../../fields/Doc';
+import { AclAdmin, AclAugment, AclEdit, AclSelfEdit, DocCss, Height, Width, ForceServerWrite, UpdatingFromServer } from '../../../../fields/DocSymbols';
 import { Id } from '../../../../fields/FieldSymbols';
 import { InkTool } from '../../../../fields/InkField';
 import { List } from '../../../../fields/List';
@@ -34,7 +34,6 @@ import { DictationManager } from '../../../util/DictationManager';
 import { DocumentManager } from '../../../util/DocumentManager';
 import { DragManager } from '../../../util/DragManager';
 import { MakeTemplate } from '../../../util/DropConverter';
-import { IsFollowLinkScript } from '../../../util/LinkFollower';
 import { LinkManager } from '../../../util/LinkManager';
 import { RTFMarkup } from '../../../util/RTFMarkup';
 import { SelectionManager } from '../../../util/SelectionManager';
@@ -305,13 +304,13 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
             const newText = state.doc.textBetween(0, state.doc.content.size, ' \n');
             const newJson = JSON.stringify(state.toJSON());
             const prevData = Cast(this.layoutDoc[this.fieldKey], RichTextField, null); // the actual text in the text box
-            const prevLayoutData = this.rootDoc !== this.layoutDoc ? Cast(this.layoutDoc[this.fieldKey], RichTextField, null) : undefined; // the default text stored in a layout template
+            const templateData = this.rootDoc !== this.layoutDoc ? prevData : undefined; // the default text stored in a layout template
             const protoData = Cast(Cast(dataDoc.proto, Doc, null)?.[this.fieldKey], RichTextField, null); // the default text inherited from a prototype
             const effectiveAcl = GetEffectiveAcl(dataDoc);
 
-            const removeSelection = (json: string | undefined) => (json?.indexOf('"storedMarks"') === -1 ? json?.replace(/"selection":.*/, '') : json?.replace(/"selection":"\"storedMarks\""/, '"storedMarks"'));
+            const removeSelection = (json: string | undefined) => json?.replace(/"selection":.*/, '');
 
-            if ([AclEdit, AclAdmin, AclSelfEdit].includes(effectiveAcl)) {
+            if ([AclEdit, AclAdmin, AclSelfEdit, AclAugment].includes(effectiveAcl)) {
                 const accumTags = [] as string[];
                 state.tr.doc.nodesBetween(0, state.doc.content.size, (node: any, pos: number, parent: any) => {
                     if (node.type === schema.nodes.dashField && node.attrs.fieldKey.startsWith('#')) {
@@ -325,12 +324,12 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                     this._applyingChange = this.fieldKey;
                     const textChange = newText !== prevData?.Text;
                     textChange && (dataDoc[this.fieldKey + '_modificationDate'] = new DateField(new Date(Date.now())));
-                    if ((!prevData && !protoData) || newText || (!newText && !protoData)) {
+                    if ((!prevData && !protoData) || newText || (!newText && !templateData)) {
                         // if no template, or there's text that didn't come from the layout template, write it to the document. (if this is driven by a template, then this overwrites the template text which is intended)
-                        if (removeSelection(newJson) !== removeSelection(prevLayoutData?.Data)) {
+                        if (this.props.isContentActive() && removeSelection(newJson) !== removeSelection(prevData?.Data)) {
                             const numstring = NumCast(dataDoc[this.fieldKey], null);
                             dataDoc[this.fieldKey] = numstring !== undefined ? Number(newText) : new RichTextField(newJson, newText);
-                            dataDoc[this.fieldKey + '_noTemplate'] = true; //(curTemp?.Text || "") !== curText; // mark the data field as being split from the template if it has been edited
+                            dataDoc[this.fieldKey + '_noTemplate'] = true; // mark the data field as being split from the template if it has been edited
                             textChange && ScriptCast(this.layoutDoc.onTextChanged, null)?.script.run({ this: this.layoutDoc, self: this.rootDoc, text: newText });
                             unchanged = false;
                         }
@@ -415,6 +414,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
             DocListCast(Doc.MyPublishedDocs.data).forEach(term => (tr = this.hyperlinkTerm(tr, term, newAutoLinks)));
             tr = tr.setSelection(isNodeSel && false ? new NodeSelection(tr.doc.resolve(f)) : new TextSelection(tr.doc.resolve(f), tr.doc.resolve(t)));
             this._editorView?.dispatch(tr);
+            this.prepareForTyping();
         }
         oldAutoLinks.filter(oldLink => !newAutoLinks.has(oldLink) && oldLink.link_anchor_2 !== this.rootDoc).forEach(LinkManager.Instance.deleteLink);
     };
@@ -564,7 +564,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                     }
                     if (added) {
                         draggedDoc._freeform_fitContentsToBox = true;
-                        draggedDoc.embedContainer = this.rootDoc;
+                        Doc.SetContainer(draggedDoc, this.rootDoc);
                         const view = this._editorView!;
                         view.dispatch(view.state.tr.insert(view.posAtCoords({ left: de.x, top: de.y })!.pos, node));
                     }
@@ -1230,6 +1230,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         this._disposers.selected = reaction(
             () => this.props.isSelected(),
             action(selected => {
+                selected && this.prepareForTyping();
                 if (FormattedTextBox._globalHighlights.has('Bold Text')) {
                     this.layoutDoc[DocCss] = this.layoutDoc[DocCss] + 1; // css change happens outside of mobx/react, so this will notify anyone interested in the layout that it has changed
                 }
@@ -1524,24 +1525,13 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
             }
         }
         selectOnLoad && this._editorView!.focus();
-        // add user mark for any first character that was typed since the user mark that gets set in KeyPress won't have been called yet.
+        if (this.props.isContentActive()) this.prepareForTyping();
         if (this._editorView) {
             const tr = this._editorView.state.tr;
             const { from, to } = tr.selection;
             // for some reason, the selection is sometimes lost in the sidebar view when prosemirror syncs the seledtion with the dom, so reset the selection after the document has ben fully instantiated.
             if (FormattedTextBox.DontSelectInitialText) setTimeout(() => this._editorView?.dispatch(tr.setSelection(new TextSelection(tr.doc.resolve(from), tr.doc.resolve(to)))), 250);
-            this._editorView.dispatch(
-                this._editorView.state.tr.setStoredMarks([
-                    ...(this._editorView.state.storedMarks ?? []),
-                    ...[schema.marks.user_mark.create({ userid: Doc.CurrentUserEmail, modified: Math.floor(Date.now() / 1000) })],
-                    ...(Doc.UserDoc().fontColor !== 'transparent' && Doc.UserDoc().fontColor ? [schema.mark(schema.marks.pFontColor, { color: StrCast(Doc.UserDoc().fontColor) })] : []),
-                    ...(Doc.UserDoc().fontStyle === 'italics' ? [schema.mark(schema.marks.em)] : []),
-                    ...(Doc.UserDoc().textDecoration === 'underline' ? [schema.mark(schema.marks.underline)] : []),
-                    ...(Doc.UserDoc().fontFamily ? [schema.mark(schema.marks.pFontFamily, { family: this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.FontFamily) })] : []),
-                    ...(Doc.UserDoc().fontSize ? [schema.mark(schema.marks.pFontSize, { fontSize: this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.FontSize) })] : []),
-                    ...(Doc.UserDoc().fontWeight === 'bold' ? [schema.mark(schema.marks.strong)] : []),
-                ])
-            );
+
             if (FormattedTextBox.PasteOnLoad) {
                 const pdfAnchorId = FormattedTextBox.PasteOnLoad.clipboardData?.getData('dash/pdfAnchor');
                 FormattedTextBox.PasteOnLoad = undefined;
@@ -1551,6 +1541,22 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         FormattedTextBox.DontSelectInitialText = false;
     }
 
+    // add user mark for any first character that was typed since the user mark that gets set in KeyPress won't have been called yet.
+    prepareForTyping = () => {
+        this._editorView?.dispatch(
+            this._editorView?.state.tr.setStoredMarks([
+                ...(this._editorView.state.storedMarks?.filter(mark => ![schema.marks.em, schema.marks.underline, schema.marks.pFontFamily, schema.marks.pFontSize, schema.marks.strong, schema.marks.pFontColor].includes(mark.type)) ?? []),
+                ...[schema.marks.user_mark.create({ userid: Doc.CurrentUserEmail, modified: Math.floor(Date.now() / 1000) })],
+                ...(Doc.UserDoc().fontColor !== 'transparent' && Doc.UserDoc().fontColor ? [schema.mark(schema.marks.pFontColor, { color: StrCast(Doc.UserDoc().fontColor) })] : []),
+                ...(Doc.UserDoc().fontStyle === 'italics' ? [schema.mark(schema.marks.em)] : []),
+                ...(Doc.UserDoc().textDecoration === 'underline' ? [schema.mark(schema.marks.underline)] : []),
+                ...(Doc.UserDoc().fontFamily ? [schema.mark(schema.marks.pFontFamily, { family: this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.FontFamily) })] : []),
+                ...(Doc.UserDoc().fontSize ? [schema.mark(schema.marks.pFontSize, { fontSize: this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.FontSize) })] : []),
+                ...(Doc.UserDoc().fontWeight === 'bold' ? [schema.mark(schema.marks.strong)] : []),
+            ])
+        );
+    };
+
     componentWillUnmount() {
         Object.values(this._disposers).forEach(disposer => disposer?.());
         this.endUndoTypingBatch();
@@ -1829,8 +1835,11 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
             default:
                 if (this._lastTimedMark?.attrs.userid === Doc.CurrentUserEmail) break;
             case ' ':
-                [AclEdit, AclAdmin, AclSelfEdit].includes(GetEffectiveAcl(this.dataDoc)) &&
-                    this._editorView!.dispatch(this._editorView!.state.tr.removeStoredMark(schema.marks.user_mark.create({})).addStoredMark(schema.marks.user_mark.create({ userid: Doc.CurrentUserEmail, modified: Math.floor(Date.now() / 1000) })));
+                if (e.code !== 'Space') {
+                    [AclEdit, AclAugment, AclAdmin].includes(GetEffectiveAcl(this.rootDoc)) &&
+                        this._editorView!.dispatch(this._editorView!.state.tr.removeStoredMark(schema.marks.user_mark).addStoredMark(schema.marks.user_mark.create({ userid: Doc.CurrentUserEmail, modified: Math.floor(Date.now() / 1000) })));
+                }
+                break;
         }
         this.startUndoTypingBatch();
     };
diff --git a/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts b/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts
index 8d57cc081..112a0d87e 100644
--- a/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts
+++ b/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts
@@ -4,8 +4,7 @@ import { Schema } from 'prosemirror-model';
 import { splitListItem, wrapInList } from 'prosemirror-schema-list';
 import { EditorState, NodeSelection, TextSelection, Transaction } from 'prosemirror-state';
 import { liftTarget } from 'prosemirror-transform';
-import { Doc } from '../../../../fields/Doc';
-import { AclAugment, AclSelfEdit } from '../../../../fields/DocSymbols';
+import { AclAdmin, AclAugment, AclEdit } from '../../../../fields/DocSymbols';
 import { GetEffectiveAcl } from '../../../../fields/util';
 import { Utils } from '../../../../Utils';
 import { Docs } from '../../../documents/Documents';
@@ -13,6 +12,7 @@ import { RTFMarkup } from '../../../util/RTFMarkup';
 import { SelectionManager } from '../../../util/SelectionManager';
 import { OpenWhere } from '../DocumentView';
 import { liftListItem, sinkListItem } from './prosemirrorPatches.js';
+import { Doc } from '../../../../fields/Doc';
 
 const mac = typeof navigator !== 'undefined' ? /Mac/.test(navigator.platform) : false;
 
@@ -49,15 +49,11 @@ export function buildKeymap<S extends Schema<any>>(schema: S, props: any, mapKey
     const canEdit = (state: any) => {
         switch (GetEffectiveAcl(props.DataDoc)) {
             case AclAugment:
-                return false;
-            case AclSelfEdit:
-                for (var i = state.selection.from; i < state.selection.to; i++) {
-                    const marks = state.doc.resolve(i)?.marks?.();
-                    if (marks?.some((mark: any) => mark.type === schema.marks.user_mark && mark.attrs.userid !== Doc.CurrentUserEmail)) {
-                        return false;
-                    }
+                const prevNode = state.selection.$cursor.nodeBefore;
+                const prevUser = !prevNode ? Doc.CurrentUserEmail : prevNode.marks[prevNode.marks.length - 1].attrs.userid;
+                if (prevUser != Doc.CurrentUserEmail) {
+                    return false;
                 }
-                break;
         }
         return true;
     };
@@ -338,7 +334,7 @@ export function buildKeymap<S extends Schema<any>>(schema: S, props: any, mapKey
 
     //Command to create a blank space
     bind('Space', (state: EditorState, dispatch: (tx: Transaction) => void) => {
-        if (!canEdit(state)) return true;
+        if (GetEffectiveAcl(props.DataDoc) != AclEdit && GetEffectiveAcl(props.DataDoc) != AclAugment && GetEffectiveAcl(props.DataDoc) != AclAdmin) return true;
         const marks = state.storedMarks || (state.selection.$to.parentOffset && state.selection.$from.marks());
         dispatch(splitMetadata(marks, state.tr));
         return false;
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index ef1c3911c..56af67802 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -1025,7 +1025,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         });
         return true;
     };
-    childLayoutTemplate = () => (!this.isTreeOrStack ? undefined : DocCast(Doc.UserDoc().presElement));
+    childLayoutTemplate = () => (!this.isTreeOrStack ? DocCast(Doc.UserDoc().presElement) : DocCast(Doc.UserDoc().presElement));
     removeDocument = (doc: Doc) => Doc.RemoveDocFromList(this.rootDoc, this.fieldKey, doc);
     getTransform = () => this.props.ScreenToLocalTransform().translate(-5, -65); // listBox padding-left and pres-box-cont minHeight
     panelHeight = () => this.props.PanelHeight() - 40;
diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index 5480600b0..07b2afd91 100644
--- a/src/client/views/pdf/AnchorMenu.tsx
+++ b/src/client/views/pdf/AnchorMenu.tsx
@@ -15,6 +15,8 @@ import { GPTPopup, GPTPopupMode } from './GPTPopup/GPTPopup';
 import { LightboxView } from '../LightboxView';
 import { EditorView } from 'prosemirror-view';
 import './AnchorMenu.scss';
+import { ColorPicker, Group, IconButton, Popup, Size, Toggle, ToggleType, Type } from 'browndash-components';
+import { StrCast } from '../../../fields/Types';
 
 @observer
 export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
@@ -42,7 +44,6 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
     ];
 
     @observable private highlightColor: string = 'rgba(245, 230, 95, 0.616)';
-    @observable private _showLinkPopup: boolean = false;
 
     @observable public Status: 'marquee' | 'annotation' | '' = '';
 
@@ -131,7 +132,6 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
             () => this._opacity,
             opacity => {
                 if (!opacity) {
-                    this._showLinkPopup = false;
                     this.setGPTPopupVis(false);
                     this.setGPTPopupText('');
                 }
@@ -141,7 +141,6 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
         this._disposer = reaction(
             () => SelectionManager.Views().slice(),
             selected => {
-                this._showLinkPopup = false;
                 this.setGPTPopupVis(false);
                 this.setGPTPopupText('');
                 AnchorMenu.Instance.fadeOut(true);
@@ -253,49 +252,25 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
         AnchorMenu.Instance.fadeOut(true);
     };
 
-    @action
-    toggleLinkPopup = (e: React.MouseEvent) => {
-        //ignore the potential null type error because this method cannot be called unless the user selects text and clicks the link button
-        //change popup visibility field to visible
-        this._showLinkPopup = !this._showLinkPopup;
-    };
-
     @computed get highlighter() {
-        const button = (
-            <button className="antimodeMenu-button anchor-color-preview-button" title="" key="highlighter-button" onClick={this.highlightClicked}>
-                <div className="anchor-color-preview">
-                    <FontAwesomeIcon icon="highlighter" size="lg" style={{ transition: 'transform 0.1s', transform: 'rotate(-45deg)' }} />
-                    <div className="color-preview" style={{ backgroundColor: this.highlightColor }}></div>
-                </div>
-            </button>
-        );
-
-        const dropdownContent = (
-            <div className="dropdown">
-                <p>Change highlighter color:</p>
-                <div className="color-wrapper">
-                    {this._palette.map(color => {
-                        if (color) {
-                            return this.highlightColor === color ? (
-                                <button className="color-button active" key={`active ${color}`} style={{ backgroundColor: color }} onPointerDown={e => this.changeHighlightColor(color, e)}></button>
-                            ) : (
-                                <button className="color-button" key={`inactive ${color}`} style={{ backgroundColor: color }} onPointerDown={e => this.changeHighlightColor(color, e)}></button>
-                            );
-                        }
-                    })}
-                </div>
-            </div>
-        );
-        return (
-            <Tooltip key="highlighter" title={<div className="dash-tooltip">{'Click to Highlight'}</div>}>
-                <div className="anchorMenu-highlighter">
-                    <ButtonDropdown key={'highlighter'} button={button} dropdownContent={dropdownContent} pdf={true} />
-                </div>
-            </Tooltip>
-        );
+        return <Group>
+            <IconButton 
+                icon={<FontAwesomeIcon icon="highlighter" style={{ transition: 'transform 0.1s', transform: 'rotate(-45deg)' }} />}
+                tooltip={'Click to Highlight'}
+                onClick={this.highlightClicked}
+                colorPicker={this.highlightColor}
+                color={StrCast(Doc.UserDoc().userColor)}
+            />
+            <ColorPicker
+                colorPickerType={'github'}
+                selectedColor={this.highlightColor}
+                setSelectedColor={color => this.changeHighlightColor(color)}
+                size={Size.XSMALL}
+            />
+        </Group>
     }
 
-    @action changeHighlightColor = (color: string, e: React.PointerEvent) => {
+    @action changeHighlightColor = (color: string) => {
         const col: ColorState = {
             hex: color,
             hsl: { a: 0, h: 0, s: 0, l: 0, source: '' },
@@ -304,8 +279,6 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
             oldHue: 0,
             source: '',
         };
-        e.preventDefault();
-        e.stopPropagation();
         this.highlightColor = Utils.colorString(col);
     };
 
@@ -339,11 +312,12 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
             this.Status === 'marquee' ? (
                 <>
                     {this.highlighter}
-                    <Tooltip key="annotate" title={<div className="dash-tooltip">Drag to Place Annotation</div>}>
-                        <button className="antimodeMenu-button annotate" ref={this._commentCont} onPointerDown={this.pointerDown} style={{ cursor: 'grab' }}>
-                            <FontAwesomeIcon icon="comment-alt" size="lg" />
-                        </button>
-                    </Tooltip>
+                    <IconButton 
+                        tooltip={'Drag to Place Annotation'} 
+                        onPointerDown={this.pointerDown} 
+                        icon={<FontAwesomeIcon icon="comment-alt"/>}
+                        color={StrCast(Doc.UserDoc().userColor)}
+                    />
                     {/* GPT Summarize icon only shows up when text is highlighted, not on marquee selection*/}
                     {AnchorMenu.Instance.StartCropDrag === unimplementedFunction && this.canSummarize() && (
                         <Tooltip key="gpt" title={<div className="dash-tooltip">Summarize with AI</div>}>
@@ -364,59 +338,66 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
                         mode={this.GPTMode}
                     />
                     {AnchorMenu.Instance.OnAudio === unimplementedFunction ? null : (
-                        <Tooltip key="annoaudiotate" title={<div className="dash-tooltip">Click to Record Annotation</div>}>
-                            <button className="antimodeMenu-button annotate" onPointerDown={this.audioDown} style={{ cursor: 'grab' }}>
-                                <FontAwesomeIcon icon="microphone" size="lg" />
-                            </button>
-                        </Tooltip>
+                        <IconButton 
+                            tooltip={'Click to Record Annotation'}
+                            onPointerDown={this.audioDown}
+                            icon={<FontAwesomeIcon icon="microphone" />}
+                            color={StrCast(Doc.UserDoc().userColor)}
+                        />
                     )}
                     {this.canEdit() && (
-                        <Tooltip key="gpttextedit" title={<div className="dash-tooltip">AI edit suggestions</div>}>
-                            <button className="antimodeMenu-button annotate" onPointerDown={this.gptEdit} style={{ cursor: 'grab' }}>
-                                <FontAwesomeIcon icon="pencil-alt" size="lg" />
-                            </button>
-                        </Tooltip>
+                        <IconButton 
+                            tooltip={'AI edit suggestions'}
+                            onPointerDown={this.gptEdit}
+                            icon={<FontAwesomeIcon icon="pencil-alt" />}
+                            color={StrCast(Doc.UserDoc().userColor)}
+                        />
                     )}
-                    <Tooltip key="link" title={<div className="dash-tooltip">Find document to link to selected text</div>}>
-                        <button className="antimodeMenu-button link" onPointerDown={this.toggleLinkPopup}>
-                            <FontAwesomeIcon style={{ position: 'absolute', transform: 'scale(1.5)' }} icon={'search'} size="lg" />
-                            <FontAwesomeIcon style={{ position: 'absolute', transform: 'scale(0.5)', transformOrigin: 'top left', top: 12, left: 12 }} icon={'link'} size="lg" />
-                        </button>
-                    </Tooltip>
-                    <LinkPopup key="popup" showPopup={this._showLinkPopup} linkCreateAnchor={this.onMakeAnchor} />,
+                    <Popup 
+                        tooltip='Find document to link to selected text'
+                        type={Type.PRIM}
+                        icon={<FontAwesomeIcon icon={'search'} />}
+                        popup={<LinkPopup key="popup" linkCreateAnchor={this.onMakeAnchor} />}
+                        color={StrCast(Doc.UserDoc().userColor)}
+                    />
                     {AnchorMenu.Instance.StartCropDrag === unimplementedFunction ? null : (
-                        <Tooltip key="crop" title={<div className="dash-tooltip">Click/Drag to create cropped image</div>}>
-                            <button className="antimodeMenu-button annotate" onPointerDown={this.cropDown} style={{ cursor: 'grab' }}>
-                                <FontAwesomeIcon icon="image" size="lg" />
-                            </button>
-                        </Tooltip>
+                        <IconButton 
+                            tooltip={'Click/Drag to create cropped image'}
+                            onPointerDown={this.cropDown}
+                            icon={<FontAwesomeIcon icon="image"/>}
+                            color={StrCast(Doc.UserDoc().userColor)}
+                        />
                     )}
                 </>
             ) : (
                 <>
-                    <Tooltip key="trash" title={<div className="dash-tooltip">Remove Link Anchor</div>}>
-                        <button className="antimodeMenu-button" style={{ display: this.Delete === returnFalse ? 'none' : undefined }} onPointerDown={this.Delete}>
-                            <FontAwesomeIcon icon="trash-alt" size="lg" />
-                        </button>
-                    </Tooltip>
-                    <Tooltip key="Pin" title={<div className="dash-tooltip">Pin to Presentation</div>}>
-                        <button className="antimodeMenu-button" style={{ display: this.PinToPres === returnFalse ? 'none' : undefined }} onPointerDown={this.PinToPres}>
-                            <FontAwesomeIcon icon="map-pin" size="lg" />
-                        </button>
-                    </Tooltip>
-                    <Tooltip key="trail" title={<div className="dash-tooltip">Show Linked Trail</div>}>
-                        <button className="antimodeMenu-button" style={{ display: this.ShowTargetTrail === returnFalse ? 'none' : undefined }} onPointerDown={this.ShowTargetTrail}>
-                            <FontAwesomeIcon icon="taxi" size="lg" />
-                        </button>
-                    </Tooltip>
-                    <Tooltip key="toggle" title={<div className="dash-tooltip">make target visibility toggle on click</div>}>
-                        <button
-                            className="antimodeMenu-button"
-                            style={{ display: this.IsTargetToggler === returnFalse ? 'none' : undefined, color: this.IsTargetToggler() ? 'black' : 'white', backgroundColor: this.IsTargetToggler() ? 'white' : 'black' }}
-                            onPointerDown={this.MakeTargetToggle}>
-                            <FontAwesomeIcon icon="thumbtack" size="lg" />
-                        </button>
-                    </Tooltip>
+                    {this.Delete !== returnFalse && <IconButton 
+                        tooltip={'Remove Link Anchor'}
+                        onPointerDown={this.Delete}
+                        icon={<FontAwesomeIcon icon="trash-alt" />}
+                        color={StrCast(Doc.UserDoc().userColor)}
+                    />}
+                    {this.PinToPres !== returnFalse && <IconButton 
+                        tooltip={'Pin to Presentation'}
+                        onPointerDown={this.PinToPres}
+                        icon={<FontAwesomeIcon icon="map-pin" />}
+                        color={StrCast(Doc.UserDoc().userColor)}
+                    />}
+                    {this.ShowTargetTrail !== returnFalse && <IconButton 
+                        tooltip={'Show Linked Trail'}
+                        onPointerDown={this.ShowTargetTrail}
+                        icon={<FontAwesomeIcon icon="taxi" />}
+                        color={StrCast(Doc.UserDoc().userColor)}
+                    />}
+                    {this.IsTargetToggler !== returnFalse && <Toggle
+                        tooltip={'Make target visibility toggle on click'}
+                        type={Type.PRIM}
+                        toggleType={ToggleType.BUTTON}
+                        toggleStatus={this.IsTargetToggler()}
+                        onClick={this.MakeTargetToggle}
+                        icon={<FontAwesomeIcon icon="thumbtack" />}
+                        color={StrCast(Doc.UserDoc().userColor)}
+                    />}
                 </>
             );
 
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index e8865b918..a439aea3e 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -13,12 +13,16 @@
 
     .searchBox-bar {
         width: 100%;
-        height: 35px;
+        height: fit-content;
         display: flex;
         justify-content: center;
         align-items: center;
         background-color: none;
         padding: 5px;
+        top: 0px;
+        position: sticky;
+        overflow-y: scroll;
+        border-bottom: $standard-border;
 
         .searchBox-type {
             display: block;
@@ -42,34 +46,66 @@
         }
     }
 
-    .searchBox-results-container {
+    .section-header {
+
+        .section-title {
+            font-size: $body-text;
+            font-weight: 600;
+        }
+
+        .section-subtitle {
+            display: flex;
+            color: $light-gray;
+        }
+        
+        padding: 5px 10px;
+        display: flex;
+        flex-direction: column;
+        gap: 3px;
+        background: $medium-blue;
+        color: white;
+    }
+
+    .searchBox-recommendations-container {
         display: flex;
         flex-direction: column;
         width: 100%;
-        height: 100%;
+        height: fit-content;
         justify-content: "center";
-    
-        .searchBox-results-count {
+
+        .searchBox-recommendations-view {
+            margin-top: 10px;
             display: flex;
-            color: gray;
-            margin-left: 5px;
+            width: 100%;
+            height: fit-content;
+            flex-direction: column;
+            gap: 10px;
+            padding: 0px 10px;
+            
+
         }
+    }
+
+    .searchBox-results-container {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: fit-content;
+        justify-content: "center";
     
-        .searchBox-results-scroll-view {
-            margin-top: 10px;
+        .searchBox-results-view {
             display: inline-block;
             width: 100%;
-            height: calc(100% - 55px);
-            overflow-y: scroll;
+            height: fit-content;
 
             .searchBox-results-scroll-view-result {
                 display: inline-block;
                 vertical-align: middle;
                 width: 100%;
-                height: 50px;
+                height: fit-content;
                 cursor: pointer;
                 font-size: 15px;
-                padding: 11px;
+                padding: 10px;
 
                 &.searchBox-results-scroll-view-result-selected {
                     background: #999;
@@ -81,6 +117,8 @@
                     width: calc(100% - 45px);
                     text-align: left;
                     overflow: hidden;
+                    max-height: 2.4em;
+                    line-height: 1.2em;
                     text-overflow: ellipsis;
                 }
 
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index d13c09443..e911bd283 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -15,6 +15,9 @@ import { CollectionDockingView } from '../collections/CollectionDockingView';
 import { ViewBoxBaseComponent } from '../DocComponent';
 import { FieldView, FieldViewProps } from '../nodes/FieldView';
 import './SearchBox.scss';
+import { fetchRecommendations } from '../newlightbox/utils';
+import { IRecommendation, Recommendation } from '../newlightbox/components';
+import { Colors } from '../global/globalEnums';
 
 const DAMPENING_FACTOR = 0.9;
 const MAX_ITERATIONS = 25;
@@ -43,6 +46,7 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
     @observable _searchString = '';
     @observable _docTypeString = 'all';
     @observable _results: Map<Doc, string[]> = new Map<Doc, string[]>();
+    @observable _recommendations: IRecommendation[] = [];
     @observable _pageRanks: Map<Doc, number> = new Map<Doc, number>();
     @observable _linkedDocsOut: Map<Doc, Set<Doc>> = new Map<Doc, Set<Doc>>();
     @observable _linkedDocsIn: Map<Doc, Set<Doc>> = new Map<Doc, Set<Doc>>();
@@ -222,7 +226,7 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
             'width',
             'layout_autoHeight',
             'acl-Override',
-            'acl-Public',
+            'acl-Guest',
             'embedContainer',
             'zIndex',
             'height',
@@ -394,6 +398,38 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
 
         if (query) {
             this.searchCollection(query);
+            const response = await fetchRecommendations('', query, [], true)
+            const recs = response.recommendations
+            const recommendations:IRecommendation[] = []
+            for (const key in recs) {
+                const title = recs[key].title;
+                console.log(title);
+                const url = recs[key].url
+                const type = recs[key].type
+                const text = recs[key].text
+                const transcript = recs[key].transcript
+                const previewUrl = recs[key].previewUrl
+                const embedding = recs[key].embedding
+                const distance = recs[key].distance
+                const source = recs[key].source
+                const related_concepts = recs[key].related_concepts
+                const docId = recs[key].doc_id
+                recommendations.push({
+                    title: title,
+                    data: url,
+                    type: type,
+                    text: text,
+                    transcript: transcript,
+                    previewUrl: previewUrl,
+                    embedding: embedding,
+                    distance: Math.round(distance * 100) / 100,
+                    source: source,
+                    related_concepts: related_concepts,
+                    docId: docId
+                })
+            }
+            const setRecommendations = action(() => this._recommendations = recommendations)
+            setRecommendations()
         }
     };
 
@@ -488,8 +524,12 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
             }
         });
 
+        const recommendationsJSX: JSX.Element[] = this._recommendations.map((props) => (
+            <Recommendation {...props}/>
+        ))
+
         return (
-            <div style={{ pointerEvents: 'all' }} className="searchBox-container">
+            <div className="searchBox-container" style={{pointerEvents: 'all', background: StrCast(Doc.UserDoc().userBackgroundColor)}}>
                 <div className="searchBox-bar">
                     {isLinkSearch ? null : (
                         <select name="type" id="searchBox-type" className="searchBox-type" onChange={this.onSelectChange}>
@@ -512,10 +552,20 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
                         ref={this._inputRef}
                     />
                 </div>
-                <div className="searchBox-results-container">
-                    <div className="searchBox-results-count">{`${validResults}` + ' result' + (validResults === 1 ? '' : 's')}</div>
-                    <div className="searchBox-results-scroll-view">{resultsJSX}</div>
-                </div>
+                {resultsJSX.length > 0 && <div className="searchBox-results-container">
+                    <div className="section-header" style={{background: StrCast(Doc.UserDoc().userVariantColor, Colors.MEDIUM_BLUE)}}>
+                        <div className="section-title">Results</div>
+                        <div className="section-subtitle">{`${validResults}` + ' result' + (validResults === 1 ? '' : 's')}</div>
+                    </div>
+                    <div className="searchBox-results-view">{resultsJSX}</div>
+                </div>}
+                {recommendationsJSX.length > 0 && <div className="searchBox-recommendations-container">
+                    <div className="section-header" style={{background: StrCast(Doc.UserDoc().userVariantColor, Colors.MEDIUM_BLUE)}}>
+                        <div className="section-title">Recommendations</div>
+                        <div className="section-subtitle">{`${validResults}` + ' result' + (validResults === 1 ? '' : 's')}</div>
+                    </div>
+                    <div className="searchBox-recommendations-view">{recommendationsJSX}</div>
+                </div>}
             </div>
         );
     }
diff --git a/src/client/views/selectedDoc/SelectedDocView.scss b/src/client/views/selectedDoc/SelectedDocView.scss
new file mode 100644
index 000000000..156dfc37b
--- /dev/null
+++ b/src/client/views/selectedDoc/SelectedDocView.scss
@@ -0,0 +1,3 @@
+.selectedDocView-container {
+    
+}
\ No newline at end of file
diff --git a/src/client/views/selectedDoc/SelectedDocView.tsx b/src/client/views/selectedDoc/SelectedDocView.tsx
new file mode 100644
index 000000000..955a4a174
--- /dev/null
+++ b/src/client/views/selectedDoc/SelectedDocView.tsx
@@ -0,0 +1,47 @@
+import React = require('react');
+import { Doc } from "../../../fields/Doc";
+import { observer } from "mobx-react";
+import { computed } from "mobx";
+import { StrCast } from "../../../fields/Types";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Colors, ListBox } from 'browndash-components';
+import { DocumentManager } from '../../util/DocumentManager';
+import { DocFocusOptions } from '../nodes/DocumentView';
+
+export interface SelectedDocViewProps {
+    selectedDocs: Doc[];
+}
+
+@observer
+export class SelectedDocView extends React.Component<SelectedDocViewProps> {
+
+    @computed get selectedDocs() {
+        return this.props.selectedDocs;
+    }
+    
+
+    render() {
+        return <div className={`selectedDocView-container`}>
+            <ListBox
+                items={this.selectedDocs.map((doc) => {
+                    const icon = Doc.toIcon(doc);
+                    const iconEle = <FontAwesomeIcon size={'1x'} icon={icon} />;
+                    const text = StrCast(doc.title)
+                    const finished = () => {
+                        
+                    };
+                    const options: DocFocusOptions = {
+                        playAudio: false,
+                    };
+                    return {
+                        text: text,
+                        val: StrCast(doc._id),
+                        icon: iconEle,
+                        onClick: () => {DocumentManager.Instance.showDocument(doc, options, finished);}
+                    }
+                })}
+                color={StrCast(Doc.UserDoc().userColor)}
+            />
+        </div>
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/selectedDoc/index.ts b/src/client/views/selectedDoc/index.ts
new file mode 100644
index 000000000..1f1db91f6
--- /dev/null
+++ b/src/client/views/selectedDoc/index.ts
@@ -0,0 +1 @@
+export * from './SelectedDocView'
\ No newline at end of file
diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss
index ede59a910..2237d5ac1 100644
--- a/src/client/views/topbar/TopBar.scss
+++ b/src/client/views/topbar/TopBar.scss
@@ -1,22 +1,6 @@
 @import '../global/globalCssVariables';
 
-.iconButton-container.primary {
-    color: white;
-    .iconButton-background {
-        filter: unset;
-        background: transparent;
-    }
-}
-.topbarHeart-red {
-    .iconButton-container.primary {
-        .iconButton-content {
-            color: red;
-        }
-        .iconButton-background {
-            background: black;
-        }
-    }
-}
+
 .topbar-container {
     flex-direction: column;
     font-size: 10px;
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 20cf563c1..130e47a41 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -1,11 +1,10 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Tooltip } from '@mui/material';
-import { Button, FontSize, IconButton, Size } from 'browndash-components';
+import { Button, IconButton, Size, Type, isDark } from 'browndash-components';
 import { action, computed, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { FaBug, FaCamera, FaStamp } from 'react-icons/fa';
-import { Doc } from '../../../fields/Doc';
+import { Doc, DocListCast } from '../../../fields/Doc';
 import { AclAdmin } from '../../../fields/DocSymbols';
 import { StrCast } from '../../../fields/Types';
 import { GetEffectiveAcl } from '../../../fields/util';
@@ -16,11 +15,11 @@ import { ServerStats } from '../../util/ServerStats';
 import { SettingsManager } from '../../util/SettingsManager';
 import { SharingManager } from '../../util/SharingManager';
 import { UndoManager } from '../../util/UndoManager';
-import { CollectionDockingView } from '../collections/CollectionDockingView';
 import { ContextMenu } from '../ContextMenu';
 import { DashboardView } from '../DashboardView';
-import { Colors } from '../global/globalEnums';
 import { MainView } from '../MainView';
+import { CollectionDockingView } from '../collections/CollectionDockingView';
+import { Colors } from '../global/globalEnums';
 import './TopBar.scss';
 
 /**
@@ -36,9 +35,10 @@ export class TopBar extends React.Component {
         });
     };
 
-    @observable textColor: string = Colors.LIGHT_GRAY;
+    @computed get color() { return StrCast(Doc.UserDoc().userColor, Colors.LIGHT_GRAY); }
+    @computed get variantColor() { return StrCast(Doc.UserDoc().userVariantColor, Colors.MEDIUM_BLUE); }
     @computed get backgroundColor() {
-        return PingManager.Instance.IsBeating ? Colors.DARK_GRAY : Colors.MEDIUM_GRAY;
+        return PingManager.Instance.IsBeating ? StrCast(Doc.UserDoc().userBackgroundColor, Colors.DARK_GRAY) : Colors.MEDIUM_GRAY;
     }
 
     @observable happyHeart: boolean = PingManager.Instance.IsBeating;
@@ -59,16 +59,20 @@ export class TopBar extends React.Component {
         return (
             <div className="topbar-left">
                 {Doc.ActiveDashboard ? (
-                    <IconButton onClick={this.navigateToHome} icon={<FontAwesomeIcon icon="home" />} color={this.textColor} />
+                    <IconButton
+                        onClick={this.navigateToHome}
+                        icon={<FontAwesomeIcon icon={DocListCast(Doc.MySharedDocs.data_dashboards).some(dash => !DocListCast(Doc.MySharedDocs.viewed).includes(dash)) ? 'portrait' : 'home'} />}
+                        color={this.color}
+                    />
                 ) : (
                     <div className="logo-container">
                         <img className="logo" src="/assets/medium-blue-light-blue-circle.png" alt="dash logo"></img>
-                        <span style={{ color: Colors.LIGHT_GRAY, fontWeight: 200 }}>brown</span>
-                        <span style={{ color: Colors.LIGHT_BLUE, fontWeight: 500 }}>dash</span>
+                        <span style={{ color: isDark(this.backgroundColor) ? Colors.LIGHT_GRAY : Colors.DARK_GRAY, fontWeight: 200 }}>brown</span>
+                        <span style={{ color: isDark(this.backgroundColor) ? Colors.LIGHT_BLUE : Colors.MEDIUM_BLUE, fontWeight: 500 }}>dash</span>
                     </div>
                 )}
                 {Doc.ActiveDashboard && (
-                    <Button text="Explore" tooltip="Browsing mode for directly navigating to documents" size={Size.SMALL} color={this.textColor} onClick={action(() => (MainView.Instance._exploreMode = !MainView.Instance._exploreMode))} />
+                    <Button text="Explore" tooltip="Browsing mode for directly navigating to documents" size={Size.SMALL} color={this.color} onClick={action(() => (MainView.Instance._exploreMode = !MainView.Instance._exploreMode))} />
                 )}
             </div>
         );
@@ -95,9 +99,10 @@ export class TopBar extends React.Component {
             <div className="topbar-center">
                 <Button
                     text={StrCast(Doc.ActiveDashboard.title)}
-                    tooltip="Browsing mode for directly navigating to documents"
+                    tooltip="Open Dashboards"
                     size={Size.SMALL}
-                    color={'white'}
+                    color={this.color}
+                    style={{fontWeight: 700, fontSize: '1rem'}}
                     onClick={(e: React.MouseEvent) => {
                         const dashView = Doc.ActiveDashboard && DocumentManager.Instance.getDocumentView(Doc.ActiveDashboard);
                         ContextMenu.Instance.addItem({ description: 'Open Dashboard View', event: this.navigateToHome, icon: 'edit' });
@@ -113,18 +118,11 @@ export class TopBar extends React.Component {
                         dashView?.showContextMenu(e.clientX + 20, e.clientY + 30);
                     }}
                 />
-                <Button
-                    text={GetEffectiveAcl(Doc.GetProto(Doc.ActiveDashboard)) === AclAdmin ? 'Share' : 'View Original'}
-                    onClick={() => {
-                        SharingManager.Instance.open(undefined, Doc.ActiveDashboard);
-                    }}
-                    size={Size.SMALL}
-                />
                 {!Doc.noviceMode && (
                     <IconButton
                         tooltip="Work on a copy of the dashboard layout"
                         size={Size.SMALL}
-                        color={this.textColor}
+                        color={this.color}
                         onClick={async () => {
                             const batch = UndoManager.StartBatch('snapshot');
                             await DashboardView.snapshotDashboard();
@@ -145,22 +143,26 @@ export class TopBar extends React.Component {
     @computed get topbarRight() {
         return (
             <div className="topbar-right">
-                <IconButton size={Size.SMALL} color={Colors.LIGHT_GRAY} onClick={ServerStats.Instance.open} icon={<FaStamp />} />
-                <IconButton size={Size.SMALL} color={Colors.LIGHT_GRAY} onClick={ReportManager.Instance.open} icon={<FaBug />} />
-                <IconButton size={Size.SMALL} color={Colors.LIGHT_GRAY} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')} icon={<FontAwesomeIcon icon="question-circle" />} />
-                <IconButton size={Size.SMALL} color={Colors.LIGHT_GRAY} onClick={SettingsManager.Instance.open} icon={<FontAwesomeIcon icon="cog" />} />
-                <Tooltip title={<div className="dash-tooltip">{'Server connection ' + (PingManager.Instance.IsBeating ? 'active' : 'broken')}</div>}>
-                    <div className={'topbarHeart' + (this.happyHeart ? '' : '-red')}>
-                        <IconButton
-                            size={Size.SMALL}
-                            onClick={PingManager.Instance.showAlert}
-                            tooltip={'Server is ' + (PingManager.Instance.IsBeating ? '' : 'NOT ') + 'running'}
-                            color={this.happyHeart ? Colors.LIGHT_BLUE : Colors.ERROR_RED}
-                            icon={<FontAwesomeIcon icon={this.happyHeart ? 'heart' : 'heart-broken'} />}
-                        />
-                    </div>
-                </Tooltip>
-                {/* <Button text={'Logout'} borderRadius={5} hoverStyle={'gray'} backgroundColor={Colors.DARK_GRAY} color={this.textColor} fontSize={FontSize.SECONDARY} onClick={() => window.location.assign(Utils.prepend('/logout'))} /> */}
+                <Button
+                    text={GetEffectiveAcl(Doc.ActiveDashboard) === AclAdmin ? 'Share' : 'View Original'}
+                    type={Type.TERT}
+                    color={this.variantColor}
+                    onClick={() => {
+                        SharingManager.Instance.open(undefined, Doc.ActiveDashboard);
+                    }}
+                />
+                <IconButton tooltip={"Issue Reporter ⌘I"} size={Size.SMALL} color={this.color} onClick={ReportManager.Instance.open} icon={<FaBug />} />
+                <IconButton tooltip={"Documentation ⌘D"} size={Size.SMALL} color={this.color} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')} icon={<FontAwesomeIcon icon="question-circle" />} />
+                <IconButton tooltip={"Settings ⌘⇧S"} size={Size.SMALL} color={this.color} onClick={SettingsManager.Instance.open} icon={<FontAwesomeIcon icon="cog" />} />
+                <IconButton
+                    size={Size.SMALL}
+                    onClick={ServerStats.Instance.open}
+                    type={Type.TERT}
+                    tooltip={'Server is ' + (PingManager.Instance.IsBeating ? '' : 'NOT ') + 'running'}
+                    color={this.happyHeart ? Colors.LIGHT_BLUE : Colors.ERROR_RED}
+                    icon={<FontAwesomeIcon icon={this.happyHeart ? 'heart' : 'heart-broken'} />}
+                />
+                {/* <Button text={'Logout'} borderRadius={5} hoverStyle={'gray'} backgroundColor={Colors.DARK_GRAY} color={this.color} fontSize={FontSize.SECONDARY} onClick={() => window.location.assign(Utils.prepend('/logout'))} /> */}
             </div>
         );
     }
@@ -168,13 +170,13 @@ export class TopBar extends React.Component {
     render() {
         return (
             //TODO:glr Add support for light / dark mode
-            <div style={{ pointerEvents: 'all' }} className="topbar-container">
-                <div
-                    className="topbar-inner-container"
-                    style={{
-                        color: this.textColor,
-                        background: this.backgroundColor,
-                    }}>
+            <div style={{ 
+                pointerEvents: 'all',
+                color: this.color,
+                background: this.backgroundColor,
+                // borderColor: this.color
+            }} className="topbar-container">
+                <div className="topbar-inner-container">
                     {this.topbarLeft}
                     {this.topbarCenter}
                     {this.topbarRight}
diff --git a/src/fields/CursorField.ts b/src/fields/CursorField.ts
index a8a2859d2..46f5a8e1c 100644
--- a/src/fields/CursorField.ts
+++ b/src/fields/CursorField.ts
@@ -1,44 +1,43 @@
-import { ObjectField } from "./ObjectField";
-import { observable } from "mobx";
-import { Deserializable } from "../client/util/SerializationHelper";
-import { serializable, createSimpleSchema, object, date } from "serializr";
-import { OnUpdate, ToScriptString, ToString, Copy } from "./FieldSymbols";
+import { ObjectField } from './ObjectField';
+import { observable } from 'mobx';
+import { Deserializable } from '../client/util/SerializationHelper';
+import { serializable, createSimpleSchema, object, date } from 'serializr';
+import { FieldChanged, ToScriptString, ToString, Copy } from './FieldSymbols';
 
 export type CursorPosition = {
-    x: number,
-    y: number
+    x: number;
+    y: number;
 };
 
 export type CursorMetadata = {
-    id: string,
-    identifier: string,
-    timestamp: number
+    id: string;
+    identifier: string;
+    timestamp: number;
 };
 
 export type CursorData = {
-    metadata: CursorMetadata,
-    position: CursorPosition
+    metadata: CursorMetadata;
+    position: CursorPosition;
 };
 
 const PositionSchema = createSimpleSchema({
     x: true,
-    y: true
+    y: true,
 });
 
 const MetadataSchema = createSimpleSchema({
     id: true,
     identifier: true,
-    timestamp: true
+    timestamp: true,
 });
 
 const CursorSchema = createSimpleSchema({
     metadata: object(MetadataSchema),
-    position: object(PositionSchema)
+    position: object(PositionSchema),
 });
 
-@Deserializable("cursor")
+@Deserializable('cursor')
 export default class CursorField extends ObjectField {
-
     @serializable(object(CursorSchema))
     readonly data: CursorData;
 
@@ -50,7 +49,7 @@ export default class CursorField extends ObjectField {
     setPosition(position: CursorPosition) {
         this.data.position = position;
         this.data.metadata.timestamp = Date.now();
-        this[OnUpdate]?.();
+        this[FieldChanged]?.();
     }
 
     [Copy]() {
@@ -58,9 +57,9 @@ export default class CursorField extends ObjectField {
     }
 
     [ToScriptString]() {
-        return "invalid";
+        return 'invalid';
     }
     [ToString]() {
-        return "invalid";
+        return 'invalid';
     }
-}
\ No newline at end of file
+}
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index f13dab68c..5a8a6e4b6 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -20,8 +20,6 @@ import {
     AclEdit,
     AclPrivate,
     AclReadonly,
-    AclSelfEdit,
-    AclUnset,
     Animation,
     CachedUpdates,
     DirectLinks,
@@ -38,11 +36,10 @@ import {
     Initializing,
     Self,
     SelfProxy,
-    Update,
     UpdatingFromServer,
     Width,
 } from './DocSymbols';
-import { Copy, HandleUpdate, Id, OnUpdate, Parent, ToScriptString, ToString } from './FieldSymbols';
+import { Copy, FieldChanged, HandleUpdate, Id, Parent, ToScriptString, ToString } from './FieldSymbols';
 import { InkField, InkTool } from './InkField';
 import { List, ListFieldName } from './List';
 import { ObjectField } from './ObjectField';
@@ -53,7 +50,7 @@ import { listSpec } from './Schema';
 import { ComputedField, ScriptField } from './ScriptField';
 import { Cast, DocCast, FieldValue, NumCast, StrCast, ToConstructor } from './Types';
 import { AudioField, CsvField, ImageField, PdfField, VideoField, WebField } from './URLField';
-import { deleteProperty, GetEffectiveAcl, getField, getter, makeEditable, makeReadOnly, normalizeEmail, setter, SharingPermissions, updateFunction } from './util';
+import { deleteProperty, GetEffectiveAcl, getField, getter, makeEditable, makeReadOnly, normalizeEmail, setter, SharingPermissions, containedFieldChangedHandler } from './util';
 import JSZip = require('jszip');
 export namespace Field {
     export function toKeyValueString(doc: Doc, key: string): string {
@@ -126,21 +123,18 @@ export enum aclLevel {
     unshared = 0,
     viewable = 1,
     augmentable = 2,
-    selfEditable = 2.5,
     editable = 3,
     admin = 4,
 }
 // prettier-ignore
-export const HierarchyMapping: Map<symbol, { level:aclLevel; name: SharingPermissions }> = new Map([
-    [AclPrivate,  { level: aclLevel.unshared,     name: SharingPermissions.None }],
-    [AclReadonly, { level: aclLevel.viewable,     name: SharingPermissions.View }],
-    [AclAugment,  { level: aclLevel.augmentable,  name: SharingPermissions.Augment}],
-    [AclSelfEdit, { level: aclLevel.selfEditable, name: SharingPermissions.SelfEdit }],
-    [AclEdit,     { level: aclLevel.editable,     name: SharingPermissions.Edit }],
-    [AclAdmin,    { level: aclLevel.admin,        name: SharingPermissions.Admin }],
-    [AclUnset,    { level: aclLevel.unset,        name: SharingPermissions.Unset }],
+export const HierarchyMapping: Map<symbol, { level:aclLevel; name: SharingPermissions; image: string }> = new Map([
+    [AclPrivate,  { level: aclLevel.unshared,     name: SharingPermissions.None,    image: '▲' }],
+    [AclReadonly, { level: aclLevel.viewable,     name: SharingPermissions.View,    image: '♦' }],
+    [AclAugment,  { level: aclLevel.augmentable,  name: SharingPermissions.Augment, image: '⬟' }],
+    [AclEdit,     { level: aclLevel.editable,     name: SharingPermissions.Edit,    image: '⬢' }],
+    [AclAdmin,    { level: aclLevel.admin,        name: SharingPermissions.Admin,   image: '⬢' }],
 ]);
-export const ReverseHierarchyMap: Map<string, { level: aclLevel; acl: symbol }> = new Map(Array.from(HierarchyMapping.entries()).map(value => [value[1].name, { level: value[1].level, acl: value[0] }]));
+export const ReverseHierarchyMap: Map<string, { level: aclLevel; acl: symbol; image: string }> = new Map(Array.from(HierarchyMapping.entries()).map(value => [value[1].name, { level: value[1].level, acl: value[0], image: value[1].image }]));
 
 // caches the document access permissions for the current user.
 // this recursively updates all protos as well.
@@ -340,9 +334,10 @@ export class Doc extends RefField {
         for (const key in value) {
             const field = value[key];
             field !== undefined && (this[FieldKeys][key] = true);
-            if (!(field instanceof ObjectField)) continue;
-            field[Parent] = this[Self];
-            field[OnUpdate] = updateFunction(this[Self], key, field, this[SelfProxy]);
+            if (field instanceof ObjectField) {
+                field[Parent] = this[Self];
+                field[FieldChanged] = containedFieldChangedHandler(this[SelfProxy], key, field);
+            }
         }
     }
 
@@ -351,7 +346,7 @@ export class Doc extends RefField {
     /// all of the raw acl's that have been set on this document.  Use GetEffectiveAcl to determine the actual ACL of the doc for editing
     @observable public [DocAcl]: { [key: string]: symbol } = {};
     @observable public [DocCss]: number = 0; // incrementer denoting a change to CSS layout
-    @observable public [DirectLinks]: Set<Doc> = new Set();
+    @observable public [DirectLinks] = new ObservableSet<Doc>();
     @observable public [Animation]: Opt<Doc>;
     @observable public [Highlight]: boolean = false;
     static __Anim(Doc: Doc) {
@@ -363,12 +358,13 @@ export class Doc extends RefField {
     private [ForceServerWrite]: boolean = false;
     public [Initializing]: boolean = false;
 
-    private [Update] = (diff: any) => {
-        (!this[UpdatingFromServer] || this[ForceServerWrite]) && DocServer.UpdateField(this[Id], diff);
-    };
-
     private [Self] = this;
     private [SelfProxy]: any;
+    public [FieldChanged] = (diff: undefined | { op: '$addToSet' | '$remFromSet' | '$set'; items: Field[] | undefined; length: number | undefined; hint?: any }, serverOp: any) => {
+        if (!this[UpdatingFromServer] || this[ForceServerWrite]) {
+            DocServer.UpdateField(this[Id], serverOp);
+        }
+    };
     public [DocFields] = () => this[Self][FieldTuples]; // Object.keys(this).reduce((fields, key) => { fields[key] = this[key]; return fields; }, {} as any);
     public [Width] = () => NumCast(this[SelfProxy]._width);
     public [Height] = () => NumCast(this[SelfProxy]._height);
@@ -382,7 +378,8 @@ export class Doc extends RefField {
         return self.resolvedDataDoc && !self.isTemplateForField ? self : Doc.GetProto(Cast(Doc.Layout(self).resolvedDataDoc, Doc, null) || self);
     }
     @computed get __LAYOUT__(): Doc | undefined {
-        const templateLayoutDoc = Cast(Doc.LayoutField(this[SelfProxy]), Doc, null);
+        const self = this[SelfProxy];
+        const templateLayoutDoc = Cast(Doc.LayoutField(self), Doc, null);
         if (templateLayoutDoc) {
             let renderFieldKey: any;
             const layoutField = templateLayoutDoc[StrCast(templateLayoutDoc.layout_fieldKey, 'layout')];
@@ -391,7 +388,7 @@ export class Doc extends RefField {
             } else {
                 return Cast(layoutField, Doc, null);
             }
-            return Cast(this[SelfProxy][renderFieldKey + '-layout[' + templateLayoutDoc[Id] + ']'], Doc, null) || templateLayoutDoc;
+            return Cast(self[renderFieldKey + '-layout[' + templateLayoutDoc[Id] + ']'], Doc, null) || templateLayoutDoc;
         }
         return undefined;
     }
@@ -480,6 +477,9 @@ export namespace Doc {
     //     });
     // }
 
+    export function SetContainer(doc: Doc, container: Doc) {
+        doc.embedContainer = container;
+    }
     export function RunCachedUpdate(doc: Doc, field: string) {
         const update = doc[CachedUpdates][field];
         if (update) {
@@ -691,7 +691,7 @@ export namespace Doc {
             Doc.SetLayout(embedding, Doc.MakeEmbedding(layout));
         }
         embedding.createdFrom = doc;
-        embedding.proto_embeddingId = Doc.GetProto(doc).proto_embeddingId = NumCast(Doc.GetProto(doc).proto_embeddingId) + 1;
+        embedding.proto_embeddingId = Doc.GetProto(doc).proto_embeddingId = DocListCast(Doc.GetProto(doc).proto_embeddings).length - 1;
         embedding.title = ComputedField.MakeFunction(`renameEmbedding(this)`);
         embedding.author = Doc.CurrentUserEmail;
 
@@ -746,7 +746,9 @@ export namespace Doc {
                     }
                 };
                 const docAtKey = doc[key];
-                if (docAtKey instanceof Doc) {
+                if (key === 'author') {
+                    assignKey(Doc.CurrentUserEmail);
+                } else if (docAtKey instanceof Doc) {
                     if (pruneDocs.includes(docAtKey)) {
                         // prune doc and do nothing
                     } else if (!Doc.IsSystem(docAtKey) && (key.startsWith('layout') || ['embedContainer', 'annotationOn', 'proto'].includes(key) || ((key === 'link_anchor_1' || key === 'link_anchor_2') && doc.author === Doc.CurrentUserEmail))) {
@@ -934,6 +936,7 @@ export namespace Doc {
                             newLayoutDoc.rootDocument = targetDoc;
                             const dataDoc = Doc.GetProto(targetDoc);
                             newLayoutDoc.resolvedDataDoc = dataDoc;
+                            newLayoutDoc['acl-Guest'] = SharingPermissions.Edit;
                             if (dataDoc[templateField] === undefined && templateLayoutDoc[templateField] instanceof List && (templateLayoutDoc[templateField] as any).length) {
                                 dataDoc[templateField] = ComputedField.MakeFunction(`ObjectField.MakeCopy(templateLayoutDoc["${templateField}"] as List)`, { templateLayoutDoc: Doc.name }, { templateLayoutDoc });
                             }
@@ -1019,7 +1022,6 @@ export namespace Doc {
             Doc.AddDocToList(Doc.GetProto(copy)[DocData], 'proto_embeddings', copy);
         }
         copy.embedContainer = undefined;
-        Doc.defaultAclPrivate && (copy['acl-Public'] = 'Not Shared');
         if (retitle) {
             copy.title = incrementTitleCopy(StrCast(copy.title));
         }
@@ -1079,7 +1081,6 @@ export namespace Doc {
             const applied = ApplyTemplateTo(templateDoc, target, targetKey, templateDoc.title + '(...' + _applyCount++ + ')');
             target.layout_fieldKey = targetKey;
             applied && (Doc.GetProto(applied).type = templateDoc.type);
-            Doc.defaultAclPrivate && (applied['acl-Public'] = 'Not Shared');
             return applied;
         }
         return undefined;
@@ -1090,7 +1091,7 @@ export namespace Doc {
                 target[targetKey] = new PrefetchProxy(templateDoc);
             } else {
                 titleTarget && (Doc.GetProto(target).title = titleTarget);
-                const setDoc = [AclAdmin, AclEdit].includes(GetEffectiveAcl(Doc.GetProto(target))) ? Doc.GetProto(target) : target;
+                const setDoc = [AclAdmin, AclEdit, AclAugment].includes(GetEffectiveAcl(Doc.GetProto(target))) ? Doc.GetProto(target) : target;
                 setDoc[targetKey] = new PrefetchProxy(templateDoc);
             }
         }
diff --git a/src/fields/DocSymbols.ts b/src/fields/DocSymbols.ts
index 65decc147..66d1ab094 100644
--- a/src/fields/DocSymbols.ts
+++ b/src/fields/DocSymbols.ts
@@ -1,4 +1,4 @@
-export const Update = Symbol('DocUpdate');
+export const DocUpdated = Symbol('DocUpdated');
 export const Self = Symbol('DocSelf');
 export const SelfProxy = Symbol('DocSelfProxy');
 export const FieldKeys = Symbol('DocFieldKeys');
@@ -13,7 +13,6 @@ export const DocFields = Symbol('DocFields');
 export const DocCss = Symbol('DocCss');
 export const DocAcl = Symbol('DocAcl');
 export const DirectLinks = Symbol('DocDirectLinks');
-export const AclUnset = Symbol('DocAclUnset');
 export const AclPrivate = Symbol('DocAclOwnerOnly');
 export const AclReadonly = Symbol('DocAclReadOnly');
 export const AclAugment = Symbol('DocAclAugment');
diff --git a/src/fields/FieldSymbols.ts b/src/fields/FieldSymbols.ts
index c381f14f5..0dbeb064b 100644
--- a/src/fields/FieldSymbols.ts
+++ b/src/fields/FieldSymbols.ts
@@ -1,6 +1,6 @@
 export const HandleUpdate = Symbol('FieldHandleUpdate');
 export const Id = Symbol('FieldId');
-export const OnUpdate = Symbol('FieldOnUpdate');
+export const FieldChanged = Symbol('FieldChanged');
 export const Parent = Symbol('FieldParent');
 export const Copy = Symbol('FieldCopy');
 export const ToValue = Symbol('FieldToValue');
diff --git a/src/fields/List.ts b/src/fields/List.ts
index 033fa569b..183d644d3 100644
--- a/src/fields/List.ts
+++ b/src/fields/List.ts
@@ -3,217 +3,15 @@ import { alias, list, serializable } from 'serializr';
 import { DocServer } from '../client/DocServer';
 import { ScriptingGlobals } from '../client/util/ScriptingGlobals';
 import { afterDocDeserialize, autoObject, Deserializable } from '../client/util/SerializationHelper';
-import { FieldTuples, Self, SelfProxy, Update } from './DocSymbols';
 import { Field } from './Doc';
-import { Copy, OnUpdate, Parent, ToScriptString, ToString } from './FieldSymbols';
+import { FieldTuples, Self, SelfProxy } from './DocSymbols';
+import { Copy, FieldChanged, Parent, ToScriptString, ToString } from './FieldSymbols';
 import { ObjectField } from './ObjectField';
 import { ProxyField } from './Proxy';
 import { RefField } from './RefField';
 import { listSpec } from './Schema';
 import { Cast } from './Types';
-import { deleteProperty, getter, setter, updateFunction } from './util';
-
-const listHandlers: any = {
-    /// Mutator methods
-    copyWithin() {
-        throw new Error('copyWithin not supported yet');
-    },
-    fill(value: any, start?: number, end?: number) {
-        if (value instanceof RefField) {
-            throw new Error('fill with RefFields not supported yet');
-        }
-        const res = this[Self].__fieldTuples.fill(value, start, end);
-        this[Update]();
-        return res;
-    },
-    pop(): any {
-        const field = toRealField(this[Self].__fieldTuples.pop());
-        this[Update]();
-        return field;
-    },
-    push: action(function (this: any, ...items: any[]) {
-        items = items.map(toObjectField);
-
-        const list = this[Self];
-        const length = list.__fieldTuples.length;
-        for (let i = 0; i < items.length; i++) {
-            const item = items[i];
-            //TODO Error checking to make sure parent doesn't already exist
-            if (item instanceof ObjectField) {
-                item[Parent] = list;
-                item[OnUpdate] = updateFunction(list, i + length, item, this);
-            }
-        }
-        const res = list.__fieldTuples.push(...items);
-        this[Update]({ op: '$addToSet', items, length: length + items.length });
-        return res;
-    }),
-    reverse() {
-        const res = this[Self].__fieldTuples.reverse();
-        this[Update]();
-        return res;
-    },
-    shift() {
-        const res = toRealField(this[Self].__fieldTuples.shift());
-        this[Update]();
-        return res;
-    },
-    sort(cmpFunc: any) {
-        this[Self].__realFields(); // coerce retrieving entire array
-        const res = this[Self].__fieldTuples.sort(cmpFunc ? (first: any, second: any) => cmpFunc(toRealField(first), toRealField(second)) : undefined);
-        this[Update]();
-        return res;
-    },
-    splice: action(function (this: any, start: number, deleteCount: number, ...items: any[]) {
-        this[Self].__realFields(); // coerce retrieving entire array
-        items = items.map(toObjectField);
-        const list = this[Self];
-        const removed = list.__fieldTuples.filter((item: any, i: number) => i >= start && i < start + deleteCount);
-        for (let i = 0; i < items.length; i++) {
-            const item = items[i];
-            //TODO Error checking to make sure parent doesn't already exist
-            //TODO Need to change indices of other fields in array
-            if (item instanceof ObjectField) {
-                item[Parent] = list;
-                item[OnUpdate] = updateFunction(list, i + start, item, this);
-            }
-        }
-        let hintArray: { val: any; index: number }[] = [];
-        for (let i = start; i < start + deleteCount; i++) {
-            hintArray.push({ val: list.__fieldTuples[i], index: i });
-        }
-        const res = list.__fieldTuples.splice(start, deleteCount, ...items);
-        // the hint object sends the starting index of the slice and the number
-        // of elements to delete.
-        this[Update](
-            items.length === 0 && deleteCount
-                ? { op: '$remFromSet', items: removed, hint: { start: start, deleteCount: deleteCount }, length: list.__fieldTuples.length }
-                : items.length && !deleteCount && start === list.__fieldTuples.length
-                ? { op: '$addToSet', items, length: list.__fieldTuples.length }
-                : undefined
-        );
-        return res.map(toRealField);
-    }),
-    unshift(...items: any[]) {
-        items = items.map(toObjectField);
-        const list = this[Self];
-        const length = list.__fieldTuples.length;
-        for (let i = 0; i < items.length; i++) {
-            const item = items[i];
-            //TODO Error checking to make sure parent doesn't already exist
-            //TODO Need to change indices of other fields in array
-            if (item instanceof ObjectField) {
-                item[Parent] = list;
-                item[OnUpdate] = updateFunction(list, i, item, this);
-            }
-        }
-        const res = this[Self].__fieldTuples.unshift(...items);
-        this[Update]();
-        return res;
-    },
-    /// Accessor methods
-    concat: action(function (this: any, ...items: any[]) {
-        this[Self].__realFields();
-        return this[Self].__fieldTuples.map(toRealField).concat(...items);
-    }),
-    includes(valueToFind: any, fromIndex: number) {
-        if (valueToFind instanceof RefField) {
-            return this[Self].__realFields().includes(valueToFind, fromIndex);
-        } else {
-            return this[Self].__fieldTuples.includes(valueToFind, fromIndex);
-        }
-    },
-    indexOf(valueToFind: any, fromIndex: number) {
-        if (valueToFind instanceof RefField) {
-            return this[Self].__realFields().indexOf(valueToFind, fromIndex);
-        } else {
-            return this[Self].__fieldTuples.indexOf(valueToFind, fromIndex);
-        }
-    },
-    join(separator: any) {
-        this[Self].__realFields();
-        return this[Self].__fieldTuples.map(toRealField).join(separator);
-    },
-    lastElement() {
-        return this[Self].__realFields().lastElement();
-    },
-    lastIndexOf(valueToFind: any, fromIndex: number) {
-        if (valueToFind instanceof RefField) {
-            return this[Self].__realFields().lastIndexOf(valueToFind, fromIndex);
-        } else {
-            return this[Self].__fieldTuples.lastIndexOf(valueToFind, fromIndex);
-        }
-    },
-    slice(begin: number, end: number) {
-        this[Self].__realFields();
-        return this[Self].__fieldTuples.slice(begin, end).map(toRealField);
-    },
-
-    /// Iteration methods
-    entries() {
-        return this[Self].__realFields().entries();
-    },
-    every(callback: any, thisArg: any) {
-        return this[Self].__realFields().every(callback, thisArg);
-        // TODO This is probably more efficient, but technically the callback can take the array, which would mean we would have to map the actual array anyway.
-        // If we don't want to support the array parameter, we should use this version instead
-        // return this[Self].__fieldTuples.every((element:any, index:number, array:any) => callback(toRealField(element), index, array), thisArg);
-    },
-    filter(callback: any, thisArg: any) {
-        return this[Self].__realFields().filter(callback, thisArg);
-        // TODO This is probably more efficient, but technically the callback can take the array, which would mean we would have to map the actual array anyway.
-        // If we don't want to support the array parameter, we should use this version instead
-        // return this[Self].__fieldTuples.filter((element:any, index:number, array:any) => callback(toRealField(element), index, array), thisArg);
-    },
-    find(callback: any, thisArg: any) {
-        return this[Self].__realFields().find(callback, thisArg);
-        // TODO This is probably more efficient, but technically the callback can take the array, which would mean we would have to map the actual array anyway.
-        // If we don't want to support the array parameter, we should use this version instead
-        // return this[Self].__fieldTuples.find((element:any, index:number, array:any) => callback(toRealField(element), index, array), thisArg);
-    },
-    findIndex(callback: any, thisArg: any) {
-        return this[Self].__realFields().findIndex(callback, thisArg);
-        // TODO This is probably more efficient, but technically the callback can take the array, which would mean we would have to map the actual array anyway.
-        // If we don't want to support the array parameter, we should use this version instead
-        // return this[Self].__fieldTuples.findIndex((element:any, index:number, array:any) => callback(toRealField(element), index, array), thisArg);
-    },
-    forEach(callback: any, thisArg: any) {
-        return this[Self].__realFields().forEach(callback, thisArg);
-        // TODO This is probably more efficient, but technically the callback can take the array, which would mean we would have to map the actual array anyway.
-        // If we don't want to support the array parameter, we should use this version instead
-        // return this[Self].__fieldTuples.forEach((element:any, index:number, array:any) => callback(toRealField(element), index, array), thisArg);
-    },
-    map(callback: any, thisArg: any) {
-        return this[Self].__realFields().map(callback, thisArg);
-        // TODO This is probably more efficient, but technically the callback can take the array, which would mean we would have to map the actual array anyway.
-        // If we don't want to support the array parameter, we should use this version instead
-        // return this[Self].__fieldTuples.map((element:any, index:number, array:any) => callback(toRealField(element), index, array), thisArg);
-    },
-    reduce(callback: any, initialValue: any) {
-        return this[Self].__realFields().reduce(callback, initialValue);
-        // TODO This is probably more efficient, but technically the callback can take the array, which would mean we would have to map the actual array anyway.
-        // If we don't want to support the array parameter, we should use this version instead
-        // return this[Self].__fieldTuples.reduce((acc:any, element:any, index:number, array:any) => callback(acc, toRealField(element), index, array), initialValue);
-    },
-    reduceRight(callback: any, initialValue: any) {
-        return this[Self].__realFields().reduceRight(callback, initialValue);
-        // TODO This is probably more efficient, but technically the callback can take the array, which would mean we would have to map the actual array anyway.
-        // If we don't want to support the array parameter, we should use this version instead
-        // return this[Self].__fieldTuples.reduceRight((acc:any, element:any, index:number, array:any) => callback(acc, toRealField(element), index, array), initialValue);
-    },
-    some(callback: any, thisArg: any) {
-        return this[Self].__realFields().some(callback, thisArg);
-        // TODO This is probably more efficient, but technically the callback can take the array, which would mean we would have to map the actual array anyway.
-        // If we don't want to support the array parameter, we should use this version instead
-        // return this[Self].__fieldTuples.some((element:any, index:number, array:any) => callback(toRealField(element), index, array), thisArg);
-    },
-    values() {
-        return this[Self].__realFields().values();
-    },
-    [Symbol.iterator]() {
-        return this[Self].__realFields().values();
-    },
-};
+import { deleteProperty, getter, setter, containedFieldChangedHandler } from './util';
 
 function toObjectField(field: Field) {
     return field instanceof RefField ? new ProxyField(field) : field;
@@ -223,38 +21,221 @@ function toRealField(field: Field) {
     return field instanceof ProxyField ? field.value : field;
 }
 
-function listGetter(target: any, prop: string | symbol, receiver: any): any {
-    if (listHandlers.hasOwnProperty(prop)) {
-        return listHandlers[prop];
-    }
-    return getter(target, prop, receiver);
-}
-
-interface ListSpliceUpdate<T> {
-    type: 'splice';
-    index: number;
-    added: T[];
-    removedCount: number;
-}
-
-interface ListIndexUpdate<T> {
-    type: 'update';
-    index: number;
-    newValue: T;
-}
-
-type ListUpdate<T> = ListSpliceUpdate<T> | ListIndexUpdate<T>;
-
 type StoredType<T extends Field> = T extends RefField ? ProxyField<T> : T;
 
 export const ListFieldName = 'fields';
 @Deserializable('list')
 class ListImpl<T extends Field> extends ObjectField {
+    static listHandlers: any = {
+        /// Mutator methods
+        copyWithin() {
+            throw new Error('copyWithin not supported yet');
+        },
+        fill(value: any, start?: number, end?: number) {
+            if (value instanceof RefField) {
+                throw new Error('fill with RefFields not supported yet');
+            }
+            const res = this[Self].__fieldTuples.fill(value, start, end);
+            this[SelfProxy][FieldChanged]?.();
+            return res;
+        },
+        pop(): any {
+            const field = toRealField(this[Self].__fieldTuples.pop());
+            this[SelfProxy][FieldChanged]?.();
+            return field;
+        },
+        push: action(function (this: ListImpl<any>, ...items: any[]) {
+            items = items.map(toObjectField);
+
+            const list = this[Self];
+            const length = list.__fieldTuples.length;
+            for (let i = 0; i < items.length; i++) {
+                const item = items[i];
+                //TODO Error checking to make sure parent doesn't already exist
+                if (item instanceof ObjectField) {
+                    item[Parent] = list;
+                    item[FieldChanged] = containedFieldChangedHandler(this[SelfProxy], i + length, item);
+                }
+            }
+            const res = list.__fieldTuples.push(...items);
+            this[SelfProxy][FieldChanged]?.({ op: '$addToSet', items, length: length + items.length });
+            return res;
+        }),
+        reverse() {
+            const res = this[Self].__fieldTuples.reverse();
+            this[SelfProxy][FieldChanged]?.();
+            return res;
+        },
+        shift() {
+            const res = toRealField(this[Self].__fieldTuples.shift());
+            this[SelfProxy][FieldChanged]?.();
+            return res;
+        },
+        sort(cmpFunc: any) {
+            this[Self].__realFields(); // coerce retrieving entire array
+            const res = this[Self].__fieldTuples.sort(cmpFunc ? (first: any, second: any) => cmpFunc(toRealField(first), toRealField(second)) : undefined);
+            this[SelfProxy][FieldChanged]?.();
+            return res;
+        },
+        splice: action(function (this: any, start: number, deleteCount: number, ...items: any[]) {
+            this[Self].__realFields(); // coerce retrieving entire array
+            items = items.map(toObjectField);
+            const list = this[Self];
+            const removed = list.__fieldTuples.filter((item: any, i: number) => i >= start && i < start + deleteCount);
+            for (let i = 0; i < items.length; i++) {
+                const item = items[i];
+                //TODO Error checking to make sure parent doesn't already exist
+                //TODO Need to change indices of other fields in array
+                if (item instanceof ObjectField) {
+                    item[Parent] = list;
+                    item[FieldChanged] = containedFieldChangedHandler(this, i + start, item);
+                }
+            }
+            let hintArray: { val: any; index: number }[] = [];
+            for (let i = start; i < start + deleteCount; i++) {
+                hintArray.push({ val: list.__fieldTuples[i], index: i });
+            }
+            const res = list.__fieldTuples.splice(start, deleteCount, ...items);
+            // the hint object sends the starting index of the slice and the number
+            // of elements to delete.
+            this[SelfProxy][FieldChanged]?.(
+                items.length === 0 && deleteCount
+                    ? { op: '$remFromSet', items: removed, hint: { start, deleteCount }, length: list.__fieldTuples.length }
+                    : items.length && !deleteCount && start === list.__fieldTuples.length
+                    ? { op: '$addToSet', items, length: list.__fieldTuples.length }
+                    : undefined
+            );
+            return res.map(toRealField);
+        }),
+        unshift(...items: any[]) {
+            items = items.map(toObjectField);
+            const list = this[Self];
+            for (let i = 0; i < items.length; i++) {
+                const item = items[i];
+                //TODO Error checking to make sure parent doesn't already exist
+                //TODO Need to change indices of other fields in array
+                if (item instanceof ObjectField) {
+                    item[Parent] = list;
+                    item[FieldChanged] = containedFieldChangedHandler(this, i, item);
+                }
+            }
+            const res = this[Self].__fieldTuples.unshift(...items);
+            this[SelfProxy][FieldChanged]?.();
+            return res;
+        },
+        /// Accessor methods
+        concat: action(function (this: any, ...items: any[]) {
+            this[Self].__realFields();
+            return this[Self].__fieldTuples.map(toRealField).concat(...items);
+        }),
+        includes(valueToFind: any, fromIndex: number) {
+            if (valueToFind instanceof RefField) {
+                return this[Self].__realFields().includes(valueToFind, fromIndex);
+            } else {
+                return this[Self].__fieldTuples.includes(valueToFind, fromIndex);
+            }
+        },
+        indexOf(valueToFind: any, fromIndex: number) {
+            if (valueToFind instanceof RefField) {
+                return this[Self].__realFields().indexOf(valueToFind, fromIndex);
+            }
+            return this[Self].__fieldTuples.indexOf(valueToFind, fromIndex);
+        },
+        join(separator: any) {
+            this[Self].__realFields();
+            return this[Self].__fieldTuples.map(toRealField).join(separator);
+        },
+        lastElement() {
+            return this[Self].__realFields().lastElement();
+        },
+        lastIndexOf(valueToFind: any, fromIndex: number) {
+            if (valueToFind instanceof RefField) {
+                return this[Self].__realFields().lastIndexOf(valueToFind, fromIndex);
+            } else {
+                return this[Self].__fieldTuples.lastIndexOf(valueToFind, fromIndex);
+            }
+        },
+        slice(begin: number, end: number) {
+            this[Self].__realFields();
+            return this[Self].__fieldTuples.slice(begin, end).map(toRealField);
+        },
+
+        /// Iteration methods
+        entries() {
+            return this[Self].__realFields().entries();
+        },
+        every(callback: any, thisArg: any) {
+            return this[Self].__realFields().every(callback, thisArg);
+            // TODO This is probably more efficient, but technically the callback can take the array, which would mean we would have to map the actual array anyway.
+            // If we don't want to support the array parameter, we should use this version instead
+            // return this[Self].__fieldTuples.every((element:any, index:number, array:any) => callback(toRealField(element), index, array), thisArg);
+        },
+        filter(callback: any, thisArg: any) {
+            return this[Self].__realFields().filter(callback, thisArg);
+            // TODO This is probably more efficient, but technically the callback can take the array, which would mean we would have to map the actual array anyway.
+            // If we don't want to support the array parameter, we should use this version instead
+            // return this[Self].__fieldTuples.filter((element:any, index:number, array:any) => callback(toRealField(element), index, array), thisArg);
+        },
+        find(callback: any, thisArg: any) {
+            return this[Self].__realFields().find(callback, thisArg);
+            // TODO This is probably more efficient, but technically the callback can take the array, which would mean we would have to map the actual array anyway.
+            // If we don't want to support the array parameter, we should use this version instead
+            // return this[Self].__fieldTuples.find((element:any, index:number, array:any) => callback(toRealField(element), index, array), thisArg);
+        },
+        findIndex(callback: any, thisArg: any) {
+            return this[Self].__realFields().findIndex(callback, thisArg);
+            // TODO This is probably more efficient, but technically the callback can take the array, which would mean we would have to map the actual array anyway.
+            // If we don't want to support the array parameter, we should use this version instead
+            // return this[Self].__fieldTuples.findIndex((element:any, index:number, array:any) => callback(toRealField(element), index, array), thisArg);
+        },
+        forEach(callback: any, thisArg: any) {
+            return this[Self].__realFields().forEach(callback, thisArg);
+            // TODO This is probably more efficient, but technically the callback can take the array, which would mean we would have to map the actual array anyway.
+            // If we don't want to support the array parameter, we should use this version instead
+            // return this[Self].__fieldTuples.forEach((element:any, index:number, array:any) => callback(toRealField(element), index, array), thisArg);
+        },
+        map(callback: any, thisArg: any) {
+            return this[Self].__realFields().map(callback, thisArg);
+            // TODO This is probably more efficient, but technically the callback can take the array, which would mean we would have to map the actual array anyway.
+            // If we don't want to support the array parameter, we should use this version instead
+            // return this[Self].__fieldTuples.map((element:any, index:number, array:any) => callback(toRealField(element), index, array), thisArg);
+        },
+        reduce(callback: any, initialValue: any) {
+            return this[Self].__realFields().reduce(callback, initialValue);
+            // TODO This is probably more efficient, but technically the callback can take the array, which would mean we would have to map the actual array anyway.
+            // If we don't want to support the array parameter, we should use this version instead
+            // return this[Self].__fieldTuples.reduce((acc:any, element:any, index:number, array:any) => callback(acc, toRealField(element), index, array), initialValue);
+        },
+        reduceRight(callback: any, initialValue: any) {
+            return this[Self].__realFields().reduceRight(callback, initialValue);
+            // TODO This is probably more efficient, but technically the callback can take the array, which would mean we would have to map the actual array anyway.
+            // If we don't want to support the array parameter, we should use this version instead
+            // return this[Self].__fieldTuples.reduceRight((acc:any, element:any, index:number, array:any) => callback(acc, toRealField(element), index, array), initialValue);
+        },
+        some(callback: any, thisArg: any) {
+            return this[Self].__realFields().some(callback, thisArg);
+            // TODO This is probably more efficient, but technically the callback can take the array, which would mean we would have to map the actual array anyway.
+            // If we don't want to support the array parameter, we should use this version instead
+            // return this[Self].__fieldTuples.some((element:any, index:number, array:any) => callback(toRealField(element), index, array), thisArg);
+        },
+        values() {
+            return this[Self].__realFields().values();
+        },
+        [Symbol.iterator]() {
+            return this[Self].__realFields().values();
+        },
+    };
+    static listGetter(target: any, prop: string | symbol, receiver: any): any {
+        if (ListImpl.listHandlers.hasOwnProperty(prop)) {
+            return ListImpl.listHandlers[prop];
+        }
+        return getter(target, prop, receiver);
+    }
     constructor(fields?: T[]) {
         super();
         const list = new Proxy<this>(this, {
             set: setter,
-            get: listGetter,
+            get: ListImpl.listGetter,
             ownKeys: target => Object.keys(target.__fieldTuples),
             getOwnPropertyDescriptor: (target, prop) => {
                 if (prop in target[FieldTuples]) {
@@ -270,9 +251,9 @@ class ListImpl<T extends Field> extends ObjectField {
                 throw new Error("Currently properties can't be defined on documents using Object.defineProperty");
             },
         });
-        this[SelfProxy] = list;
+        this[SelfProxy] = list as any as List<Field>; // bcz: ugh .. don't know how to convince typesecript that list is a List
         if (fields) {
-            (list as any).push(...fields);
+            this[SelfProxy].push(...fields);
         }
         return list;
     }
@@ -305,10 +286,10 @@ class ListImpl<T extends Field> extends ObjectField {
     private set __fieldTuples(value) {
         this[FieldTuples] = value;
         for (const key in value) {
-            const field = value[key];
-            if (field instanceof ObjectField) {
-                field[Parent] = this[Self];
-                field[OnUpdate] = updateFunction(this[Self], key, field, this[SelfProxy]);
+            const item = value[key];
+            if (item instanceof ObjectField) {
+                item[Parent] = this[Self];
+                item[FieldChanged] = containedFieldChangedHandler(this[SelfProxy], Number(key), item);
             }
         }
     }
@@ -322,16 +303,8 @@ class ListImpl<T extends Field> extends ObjectField {
     // @serializable(alias("fields", list(autoObject())))
     @observable
     private [FieldTuples]: StoredType<T>[] = [];
-
-    private [Update] = (diff: any) => {
-        // console.log(diff);
-        const update = this[OnUpdate];
-        // update && update(diff);
-        update?.(diff);
-    };
-
     private [Self] = this;
-    private [SelfProxy]: any;
+    private [SelfProxy]: List<Field>; // also used in utils.ts even though it won't be found using find all references
 
     [ToScriptString]() {
         return `new List([${(this as any).map((field: any) => Field.toScriptString(field))}])`;
diff --git a/src/fields/ObjectField.ts b/src/fields/ObjectField.ts
index daa8a7777..b5bc2952a 100644
--- a/src/fields/ObjectField.ts
+++ b/src/fields/ObjectField.ts
@@ -1,9 +1,14 @@
-import { RefField } from "./RefField";
-import { OnUpdate, Parent, Copy, ToScriptString, ToString } from "./FieldSymbols";
-import { ScriptingGlobals } from "../client/util/ScriptingGlobals";
+import { RefField } from './RefField';
+import { FieldChanged, Parent, Copy, ToScriptString, ToString } from './FieldSymbols';
+import { ScriptingGlobals } from '../client/util/ScriptingGlobals';
+import { Field } from './Doc';
 
 export abstract class ObjectField {
-    public [OnUpdate]?: (diff?: any) => void;
+    // prettier-ignore
+    public [FieldChanged]?: (diff?: { op: '$addToSet' | '$remFromSet' | '$set'; 
+                             items: Field[] | undefined; 
+                             length: number | undefined; 
+                             hint?: any }, serverOp?: any) => void;
     public [Parent]?: RefField | ObjectField;
     abstract [Copy](): ObjectField;
 
@@ -17,4 +22,4 @@ export namespace ObjectField {
     }
 }
 
-ScriptingGlobals.add(ObjectField);
\ No newline at end of file
+ScriptingGlobals.add(ObjectField);
diff --git a/src/fields/SchemaHeaderField.ts b/src/fields/SchemaHeaderField.ts
index 4b1855cb0..6dde2e5aa 100644
--- a/src/fields/SchemaHeaderField.ts
+++ b/src/fields/SchemaHeaderField.ts
@@ -1,7 +1,7 @@
 import { Deserializable } from '../client/util/SerializationHelper';
 import { serializable, primitive } from 'serializr';
 import { ObjectField } from './ObjectField';
-import { Copy, ToScriptString, ToString, OnUpdate } from './FieldSymbols';
+import { Copy, ToScriptString, ToString, FieldChanged } from './FieldSymbols';
 import { scriptingGlobal, ScriptingGlobals } from '../client/util/ScriptingGlobals';
 import { ColumnType } from '../client/views/collections/collectionSchema/CollectionSchemaView';
 
@@ -82,32 +82,32 @@ export class SchemaHeaderField extends ObjectField {
 
     setHeading(heading: string) {
         this.heading = heading;
-        this[OnUpdate]?.();
+        this[FieldChanged]?.();
     }
 
     setColor(color: string) {
         this.color = color;
-        this[OnUpdate]?.();
+        this[FieldChanged]?.();
     }
 
     setType(type: ColumnType) {
         this.type = type;
-        this[OnUpdate]?.();
+        this[FieldChanged]?.();
     }
 
     setWidth(width: number) {
         this.width = width;
-        this[OnUpdate]?.();
+        this[FieldChanged]?.();
     }
 
     setDesc(desc: boolean | undefined) {
         this.desc = desc;
-        this[OnUpdate]?.();
+        this[FieldChanged]?.();
     }
 
     setCollapsed(collapsed: boolean | undefined) {
         this.collapsed = collapsed;
-        this[OnUpdate]?.();
+        this[FieldChanged]?.();
     }
 
     [Copy]() {
diff --git a/src/fields/util.ts b/src/fields/util.ts
index 0f164a709..28db77c65 100644
--- a/src/fields/util.ts
+++ b/src/fields/util.ts
@@ -1,23 +1,21 @@
 import { $mobx, action, observable, runInAction, trace } from 'mobx';
 import { computedFn } from 'mobx-utils';
 import { DocServer } from '../client/DocServer';
-import { CollectionViewType } from '../client/documents/DocumentTypes';
 import { LinkManager } from '../client/util/LinkManager';
 import { SerializationHelper } from '../client/util/SerializationHelper';
 import { UndoManager } from '../client/util/UndoManager';
 import { returnZero } from '../Utils';
-import CursorField from './CursorField';
-import { aclLevel, Doc, DocListCast, DocListCastAsync, HierarchyMapping, ReverseHierarchyMap, StrListCast, updateCachedAcls } from './Doc';
-import { AclAdmin, AclEdit, AclPrivate, AclSelfEdit, DocAcl, DocData, DocLayout, FieldKeys, ForceServerWrite, Height, Initializing, SelfProxy, Update, UpdatingFromServer, Width } from './DocSymbols';
-import { Id, OnUpdate, Parent, ToValue } from './FieldSymbols';
+import { aclLevel, Doc, DocListCast, Field, FieldResult, HierarchyMapping, ReverseHierarchyMap, StrListCast, updateCachedAcls } from './Doc';
+import { AclAdmin, AclAugment, AclEdit, AclPrivate, DocAcl, DocData, DocLayout, FieldKeys, ForceServerWrite, Height, Initializing, SelfProxy, UpdatingFromServer, Width } from './DocSymbols';
+import { FieldChanged, Id, Parent, ToValue } from './FieldSymbols';
 import { List } from './List';
 import { ObjectField } from './ObjectField';
 import { PrefetchProxy, ProxyField } from './Proxy';
 import { RefField } from './RefField';
 import { RichTextField } from './RichTextField';
 import { SchemaHeaderField } from './SchemaHeaderField';
-import { ComputedField, ScriptField } from './ScriptField';
-import { ScriptCast, StrCast } from './Types';
+import { ComputedField } from './ScriptField';
+import { DocCast, ScriptCast, StrCast } from './Types';
 
 function _readOnlySetter(): never {
     throw new Error("Documents can't be modified in read-only mode");
@@ -51,11 +49,11 @@ const _setterImpl = action(function (target: any, prop: string | symbol | number
             throw new Error("Can't put the same object in multiple documents at the same time");
         }
         value[Parent] = receiver;
-        value[OnUpdate] = updateFunction(target, prop, value, receiver);
+        value[FieldChanged] = containedFieldChangedHandler(receiver, prop, value);
     }
     if (curValue instanceof ObjectField) {
         delete curValue[Parent];
-        delete curValue[OnUpdate];
+        delete curValue[FieldChanged];
     }
 
     const effectiveAcl = GetEffectiveAcl(target);
@@ -63,8 +61,11 @@ const _setterImpl = action(function (target: any, prop: string | symbol | number
     const writeMode = DocServer.getFieldWriteMode(prop as string);
     const fromServer = target[UpdatingFromServer];
     const sameAuthor = fromServer || receiver.author === Doc.CurrentUserEmail;
-    const writeToDoc = sameAuthor || effectiveAcl === AclEdit || effectiveAcl === AclAdmin || writeMode !== DocServer.WriteMode.LiveReadonly;
-    const writeToServer = (sameAuthor || effectiveAcl === AclEdit || effectiveAcl === AclAdmin || (effectiveAcl === AclSelfEdit && value instanceof RichTextField)) && !DocServer.Control.isReadOnly();
+    const writeToDoc =
+        sameAuthor || effectiveAcl === AclEdit || effectiveAcl === AclAdmin || writeMode === DocServer.WriteMode.Playground || writeMode === DocServer.WriteMode.LivePlayground || (effectiveAcl === AclAugment && value instanceof RichTextField);
+    const writeToServer =
+        !DocServer.Control.isReadOnly() && //
+        (sameAuthor || effectiveAcl === AclEdit || effectiveAcl === AclAdmin || (effectiveAcl === AclAugment && value instanceof RichTextField));
 
     if (writeToDoc) {
         if (value === undefined) {
@@ -78,8 +79,10 @@ const _setterImpl = action(function (target: any, prop: string | symbol | number
         }
 
         if (writeToServer) {
-            if (value === undefined) target[Update]({ $unset: { ['fields.' + prop]: '' } });
-            else target[Update]({ $set: { ['fields.' + prop]: value instanceof ObjectField ? SerializationHelper.Serialize(value) : value === undefined ? null : value } });
+            // prettier-ignore
+            if (value === undefined) 
+                 (target as Doc|ObjectField)[FieldChanged]?.(undefined, { $unset: { ['fields.' + prop]: '' } });
+            else (target as Doc|ObjectField)[FieldChanged]?.(undefined, { $set:   { ['fields.' + prop]: value instanceof ObjectField ? SerializationHelper.Serialize(value) :value}});
             if (prop === 'author' || prop.toString().startsWith('acl')) updateCachedAcls(target);
         } else {
             DocServer.registerDocWithCachedUpdate(receiver, prop as string, curValue);
@@ -105,7 +108,7 @@ const _setterImpl = action(function (target: any, prop: string | symbol | number
             );
         return true;
     }
-    return false;
+    return true;
 });
 
 let _setter: (target: any, prop: string | symbol | number, value: any, receiver: any) => boolean = _setterImpl;
@@ -128,14 +131,18 @@ export function denormalizeEmail(email: string) {
 /**
  * Copies parent's acl fields to the child
  */
-export function inheritParentAcls(parent: Doc, child: Doc) {
-    return;
-    // const dataDoc = parent[DataSym];
-    // for (const key of Object.keys(dataDoc)) {
-    //     // if the default acl mode is private, then don't inherit the acl-Public permission, but set it to private.
-    //     const permission = key === 'acl-Public' && Doc.defaultAclPrivate ? AclPrivate : dataDoc[key];
-    //     key.startsWith('acl') && distributeAcls(key, permission, child);
-    // }
+export function inheritParentAcls(parent: Doc, child: Doc, layoutOnly: boolean) {
+    [...Object.keys(parent), ...(Doc.CurrentUserEmail !== parent.author ? ['acl-Owner'] : [])]
+        .filter(key => key.startsWith('acl'))
+        .forEach(key => {
+            // if the default acl mode is private, then don't inherit the acl-guest permission, but set it to private.
+            // const permission: string = key === 'acl-guest' && Doc.defaultAclPrivate ? AclPrivate : parent[key];
+            const parAcl = ReverseHierarchyMap.get(StrCast(key === 'acl-Owner' ? (Doc.defaultAclPrivate ? SharingPermissions.None : SharingPermissions.Edit) : parent[key]))?.acl;
+            if (parAcl) {
+                const sharePermission = HierarchyMapping.get(parAcl)?.name;
+                sharePermission && distributeAcls(key === 'acl-Owner' ? `acl-${normalizeEmail(StrCast(parent.author))}` : key, sharePermission, child, undefined, false, layoutOnly);
+            }
+        });
 }
 
 /**
@@ -154,13 +161,11 @@ export function inheritParentAcls(parent: Doc, child: Doc) {
  * Unset: Remove a sharing permission (eg., used )
  */
 export enum SharingPermissions {
-    Unset = 'None',
     Admin = 'Admin',
     Edit = 'Edit',
-    SelfEdit = 'Self Edit',
     Augment = 'Augment',
     View = 'View',
-    None = 'Not Shared',
+    None = 'Not-Shared',
 }
 
 // return acl from cache or cache the acl and return.
@@ -173,11 +178,11 @@ const getEffectiveAclCache = computedFn(function (target: any, user?: string) {
  */
 export function GetEffectiveAcl(target: any, user?: string): symbol {
     if (!target) return AclPrivate;
-    if (target[UpdatingFromServer]) return AclAdmin;
+    if (target[UpdatingFromServer] || Doc.CurrentUserEmail === 'guest') return AclAdmin;
     return getEffectiveAclCache(target, user); // all changes received from the server must be processed as Admin.  return this directly so that the acls aren't cached (UpdatingFromServer is not observable)
 }
 
-function getPropAcl(target: any, prop: string | symbol | number) {
+export function GetPropAcl(target: any, prop: string | symbol | number) {
     if (typeof prop === 'symbol' || target[UpdatingFromServer]) return AclAdmin; // requesting the UpdatingFromServer prop or AclSym must always go through to keep the local DB consistent
     if (prop && DocServer.IsPlaygroundField(prop.toString())) return AclEdit; // playground props are always editable
     return GetEffectiveAcl(target);
@@ -204,18 +209,13 @@ function getEffectiveAcl(target: any, user?: string): symbol {
             // there are issues with storing fields with . in the name, so they are replaced with _ during creation
             // as a result we need to restore them again during this comparison.
             const entity = denormalizeEmail(key.substring(4)); // an individual or a group
-            if (HierarchyMapping.get(value as symbol)!.level > HierarchyMapping.get(effectiveAcl)!.level) {
-                if (GetCachedGroupByName(entity) || userChecked === entity || entity === 'Me') {
+            if (GetCachedGroupByName(entity) || userChecked === entity || entity === 'Me') {
+                if (HierarchyMapping.get(value as symbol)!.level > HierarchyMapping.get(effectiveAcl)!.level) {
                     effectiveAcl = value as symbol;
                 }
             }
         }
 
-        // if there's an overriding acl set through the properties panel or sharing menu, that's what's returned if the user isn't an admin of the document
-        //const override = targetAcls['acl-Override'];
-        // if (override !== AclUnset && override !== undefined) effectiveAcl = override;
-
-        // if we're in playground mode, return AclEdit (or AclAdmin if that's the user's effectiveAcl)
         return DocServer?.Control?.isReadOnly?.() && HierarchyMapping.get(effectiveAcl)!.level < aclLevel.editable ? AclEdit : effectiveAcl;
     }
     // authored documents are private until an ACL is set.
@@ -223,73 +223,72 @@ function getEffectiveAcl(target: any, user?: string): symbol {
     if (targetAuthor && targetAuthor !== userChecked) return AclPrivate;
     return AclAdmin;
 }
+
 /**
  * Recursively distributes the access right for a user across the children of a document and its annotations.
  * @param key the key storing the access right (e.g. acl-groupname)
  * @param acl the access right being stored (e.g. "Can Edit")
  * @param target the document on which this access right is being set
- * @param inheritingFromCollection whether the target is being assigned rights after being dragged into a collection (and so is inheriting the acls from the collection)
- * inheritingFromCollection is not currently being used but could be used if acl assignment defaults change
+ * @param visited list of Doc's already distributed to.
+ * @param allowUpgrade whether permissions can be made less restrictive
+ * @param layoutOnly just sets the layout doc's ACL (unless the data doc has no entry for the ACL, in which case it will be set as well)
  */
-export function distributeAcls(key: string, acl: SharingPermissions, target: Doc, inheritingFromCollection?: boolean, visited?: Doc[], isDashboard?: boolean) {
+export function distributeAcls(key: string, acl: SharingPermissions, target: Doc, visited?: Doc[], allowUpgrade?: boolean, layoutOnly = false) {
+    const selfKey = `acl-${Doc.CurrentUserEmailNormalized}`;
     if (!visited) visited = [] as Doc[];
-    if (!target || visited.includes(target)) return;
-
-    if ((target._type_collection === CollectionViewType.Docking && visited.length > 1) || Doc.GetProto(visited[0]) !== Doc.GetProto(target)) {
-        target[key] = acl;
-        if (target !== Doc.GetProto(target)) {
-            //apparently we can't call updateCachedAcls twice (once for the main dashboard, and again for the nested dashboard...???)
-            updateCachedAcls(target);
-        }
-        return;
-    }
+    if (!target || visited.includes(target) || key === selfKey) return;
     visited.push(target);
 
-    let layoutDocChanged = false; // determines whether fetchProto should be called or not (i.e. is there a change that should be reflected in target[AclSym])
-    // if it is inheriting from a collection, it only inherits if A) the key doesn't already exist or B) the right being inherited is more restrictive
-    if (GetEffectiveAcl(target) === AclAdmin && (!inheritingFromCollection || !target[key] || ReverseHierarchyMap.get(StrCast(target[key]))!.level > ReverseHierarchyMap.get(acl)!.level)) {
-        target[key] = acl;
-        layoutDocChanged = true;
-
-        if (isDashboard) {
-            DocListCastAsync(target[Doc.LayoutFieldKey(target)]).then(docs => {
-                docs?.forEach(d => distributeAcls(key, acl, d, inheritingFromCollection, visited));
-            });
-        }
-    }
-
     let dataDocChanged = false;
     const dataDoc = target[DocData];
-    if (dataDoc && (!inheritingFromCollection || !dataDoc[key] || ReverseHierarchyMap.get(StrCast(dataDoc[key]))! > ReverseHierarchyMap.get(acl)!)) {
-        if (GetEffectiveAcl(dataDoc) === AclAdmin) {
-            dataDoc[key] = acl;
-            dataDocChanged = true;
-        }
+    const curVal = ReverseHierarchyMap.get(StrCast(dataDoc[key]))?.level ?? 0;
+    const aclVal = ReverseHierarchyMap.get(acl)?.level ?? 0;
+    if (!layoutOnly && dataDoc && (allowUpgrade !== false || !dataDoc[key] || curVal > aclVal)) {
+        // propagate ACLs to links, children, and annotations
 
-        // maps over the links of the document
-        LinkManager.Links(dataDoc).forEach(link => distributeAcls(key, acl, link, inheritingFromCollection, visited));
+        LinkManager.Links(dataDoc).forEach(link => distributeAcls(key, acl, link, visited, allowUpgrade ? true : false));
 
-        // maps over the children of the document
         DocListCast(dataDoc[Doc.LayoutFieldKey(dataDoc)]).forEach(d => {
-            distributeAcls(key, acl, d, inheritingFromCollection, visited);
-            distributeAcls(key, acl, d[DocData], inheritingFromCollection, visited);
+            distributeAcls(key, acl, d, visited, allowUpgrade ? true : false);
+            d !== d[DocData] && distributeAcls(key, acl, d[DocData], visited, allowUpgrade ? true : false);
         });
 
-        // maps over the annotations of the document
         DocListCast(dataDoc[Doc.LayoutFieldKey(dataDoc) + '_annotations']).forEach(d => {
-            distributeAcls(key, acl, d, inheritingFromCollection, visited);
-            distributeAcls(key, acl, d[DocData], inheritingFromCollection, visited);
+            distributeAcls(key, acl, d, visited, allowUpgrade ? true : false);
+            d !== d[DocData] && distributeAcls(key, acl, d[DocData], visited, allowUpgrade ? true : false);
         });
+
+        Object.keys(target) // share expanded layout templates (eg, for presElementBox'es )
+            .filter(lkey => lkey.includes('layout[') && DocCast(target[lkey]))
+            .map(lkey => {
+                distributeAcls(key, acl, DocCast(target[lkey]), visited, allowUpgrade ? true : false);
+            });
+
+        if (GetEffectiveAcl(dataDoc) === AclAdmin) {
+            dataDoc[key] = acl;
+            dataDocChanged = true;
+        }
+    }
+
+    let layoutDocChanged = false; // determines whether fetchProto should be called or not (i.e. is there a change that should be reflected in target[AclSym])
+    // if it is inheriting from a collection, it only inherits if A) allowUpgrade is set B) the key doesn't already exist or c) the right being inherited is more restrictive
+    if (GetEffectiveAcl(target) === AclAdmin && (allowUpgrade || !Doc.GetT(target, key, 'boolean', true) || ReverseHierarchyMap.get(StrCast(target[key]))!.level > aclVal)) {
+        target[key] = acl;
+        layoutDocChanged = true;
+        if (dataDoc[key] === undefined) dataDoc[key] = acl;
     }
 
     layoutDocChanged && updateCachedAcls(target); // updates target[AclSym] when changes to acls have been made
     dataDocChanged && updateCachedAcls(dataDoc);
 }
 
+//
+// target should be either a Doc or ListImpl.  receiver should be a Proxy<Doc> Or List.
+//
 export function setter(target: any, in_prop: string | symbol | number, value: any, receiver: any): boolean {
     let prop = in_prop;
-    const effectiveAcl = in_prop === 'constructor' || typeof in_prop === 'symbol' ? AclAdmin : getPropAcl(target, prop);
-    if (effectiveAcl !== AclEdit && effectiveAcl !== AclAdmin && !(effectiveAcl === AclSelfEdit && value instanceof RichTextField)) return true;
+    const effectiveAcl = in_prop === 'constructor' || typeof in_prop === 'symbol' ? AclAdmin : GetPropAcl(target, prop);
+    if (effectiveAcl !== AclEdit && effectiveAcl !== AclAugment && effectiveAcl !== AclAdmin) return true;
     // if you're trying to change an acl but don't have Admin access / you're trying to change it to something that isn't an acceptable acl, you can't
     if (typeof prop === 'string' && prop.startsWith('acl') && (effectiveAcl !== AclAdmin || ![...Object.values(SharingPermissions), undefined].includes(value))) return true;
 
@@ -356,86 +355,104 @@ export function deleteProperty(target: any, prop: string | number | symbol) {
     return true;
 }
 
-export function updateFunction(target: any, prop: any, value: any, receiver: any) {
-    let lastValue = ObjectField.MakeCopy(value);
-    return (diff?: any) => {
-        const op =
-            diff?.op === '$addToSet'
-                ? { $addToSet: { ['fields.' + prop]: SerializationHelper.Serialize(new List<Doc>(diff.items)) } }
-                : diff?.op === '$remFromSet'
-                ? { $remFromSet: { ['fields.' + prop]: SerializationHelper.Serialize(new List<Doc>(diff.items)), hint: diff.hint } }
-                : { $set: { ['fields.' + prop]: SerializationHelper.Serialize(value) } };
-        !op.$set && ((op as any).length = diff.length);
-        const prevValue = ObjectField.MakeCopy(lastValue as List<any>);
-        lastValue = ObjectField.MakeCopy(value);
-        const newValue = ObjectField.MakeCopy(value);
-
-        if (!(value instanceof CursorField) && !value?.some?.((v: any) => v instanceof CursorField)) {
-            !receiver[UpdatingFromServer] &&
+// this function creates a function that can be used to setup Undo for whenever an ObjectField changes.
+// the idea is that the Doc field setter can only setup undo at the granularity of an entire field and won't even be called if
+// just a part of a field (eg. field within an ObjectField) changes.  This function returns a function that can be called
+// whenever an internal ObjectField field changes. It should be passed a 'diff' specification describing the change. Currently,
+// List's are the only true ObjectFields that can be partially modified (ignoring SchemaHeaderFields which should go away).
+// The 'diff' specification that a list can send is limited to indicating that something was added, removed, or that the list contents
+// were replaced.  Based on this specification, an Undo event is setup that will save enough information about the ObjectField to be
+// able to undo and redo the partial change.
+//
+export function containedFieldChangedHandler(container: List<Field> | Doc, prop: string | number, liveContainedField: ObjectField) {
+    let lastValue: FieldResult = liveContainedField instanceof ObjectField ? ObjectField.MakeCopy(liveContainedField) : liveContainedField;
+    return (diff?: { op: '$addToSet' | '$remFromSet' | '$set'; items: Field[] | undefined; length: number | undefined; hint?: any }, dummyServerOp?: any) => {
+        const serializeItems = () => ({ __type: 'list', fields: diff?.items?.map((item: Field) => SerializationHelper.Serialize(item)) });
+        // prettier-ignore
+        const serverOp = diff?.op === '$addToSet'
+            ? { $addToSet:   { ['fields.' + prop]: serializeItems() }, length: diff.length }
+            : diff?.op === '$remFromSet'
+            ? { $remFromSet: { ['fields.' + prop]: serializeItems(), hint: diff.hint}, length: diff.length }
+            : { $set:        { ['fields.' + prop]: liveContainedField ? SerializationHelper.Serialize(liveContainedField) : undefined } };
+
+        if (!(container instanceof Doc) || !container[UpdatingFromServer]) {
+            const prevValue = ObjectField.MakeCopy(lastValue as List<any>);
+            lastValue = ObjectField.MakeCopy(liveContainedField);
+            const newValue = ObjectField.MakeCopy(liveContainedField);
+            if (diff?.op === '$addToSet') {
                 UndoManager.AddEvent(
-                    diff?.op === '$addToSet'
-                        ? {
-                              redo: () => {
-                                  console.log('redo $add: ' + prop, diff.items); // bcz: uncomment to log undo
-                                  receiver[prop].push(...diff.items.map((item: any) => item.value ?? item));
-                                  lastValue = ObjectField.MakeCopy(receiver[prop]);
-                              },
-                              undo: action(() => {
-                                  // console.log("undo $add: " + prop, diff.items) // bcz: uncomment to log undo
-                                  diff.items.forEach((item: any) => {
-                                      if (item instanceof SchemaHeaderField) {
-                                          const ind = receiver[prop].findIndex((ele: any) => ele instanceof SchemaHeaderField && ele.heading === item.heading);
-                                          ind !== -1 && receiver[prop].splice(ind, 1);
-                                      } else {
-                                          const ind = receiver[prop].indexOf(item.value ?? item);
-                                          ind !== -1 && receiver[prop].splice(ind, 1);
-                                      }
-                                  });
-                                  lastValue = ObjectField.MakeCopy(receiver[prop]);
-                              }),
-                              prop: 'add ' + diff.items.length + ' items to list',
-                          }
-                        : diff?.op === '$remFromSet'
-                        ? {
-                              redo: action(() => {
-                                  console.log('redo $rem: ' + prop, diff.items); // bcz: uncomment to log undo
-                                  diff.items.forEach((item: any) => {
-                                      const ind = item instanceof SchemaHeaderField ? receiver[prop].findIndex((ele: any) => ele instanceof SchemaHeaderField && ele.heading === item.heading) : receiver[prop].indexOf(item.value ?? item);
-                                      ind !== -1 && receiver[prop].splice(ind, 1);
-                                  });
-                                  lastValue = ObjectField.MakeCopy(receiver[prop]);
-                              }),
-                              undo: () => {
-                                  // console.log("undo $rem: " + prop, diff.items) // bcz: uncomment to log undo
-                                  diff.items.forEach((item: any) => {
-                                      if (item instanceof SchemaHeaderField) {
-                                          const ind = (prevValue as List<any>).findIndex((ele: any) => ele instanceof SchemaHeaderField && ele.heading === item.heading);
-                                          ind !== -1 && receiver[prop].findIndex((ele: any) => ele instanceof SchemaHeaderField && ele.heading === item.heading) === -1 && receiver[prop].splice(ind, 0, item);
-                                      } else {
-                                          const ind = (prevValue as List<any>).indexOf(item.value ?? item);
-                                          ind !== -1 && receiver[prop].indexOf(item.value ?? item) === -1 && receiver[prop].splice(ind, 0, item);
-                                      }
-                                  });
-                                  lastValue = ObjectField.MakeCopy(receiver[prop]);
-                              },
-                              prop: 'remove ' + diff.items.length + ' items from list',
-                          }
-                        : {
-                              redo: () => {
-                                  console.log('redo list: ' + prop, receiver[prop]); // bcz: uncomment to log undo
-                                  receiver[prop] = ObjectField.MakeCopy(newValue as List<any>);
-                                  lastValue = ObjectField.MakeCopy(receiver[prop]);
-                              },
-                              undo: () => {
-                                  // console.log("undo list: " + prop, receiver[prop]) // bcz: uncomment to log undo
-                                  receiver[prop] = ObjectField.MakeCopy(prevValue as List<any>);
-                                  lastValue = ObjectField.MakeCopy(receiver[prop]);
-                              },
-                              prop: 'assign list',
-                          },
+                    {
+                        redo: () => {
+                            //console.log('redo $add: ' + prop, diff.items); // bcz: uncomment to log undo
+                            (container as any)[prop as any]?.push(...(diff.items || [])?.map((item: any) => item.value ?? item));
+                            lastValue = ObjectField.MakeCopy((container as any)[prop as any]);
+                        },
+                        undo: action(() => {
+                            // console.log('undo $add: ' + prop, diff.items); // bcz: uncomment to log undo
+                            diff.items?.forEach((item: any) => {
+                                const ind =
+                                    item instanceof SchemaHeaderField //
+                                        ? (container as any)[prop as any]?.findIndex((ele: any) => ele instanceof SchemaHeaderField && ele.heading === item.heading)
+                                        : (container as any)[prop as any]?.indexOf(item.value ?? item);
+                                ind !== undefined && ind !== -1 && (container as any)[prop as any]?.splice(ind, 1);
+                            });
+                            lastValue = ObjectField.MakeCopy((container as any)[prop as any]);
+                        }),
+                        prop: 'add ' + diff.items?.length + ' items to list',
+                    },
+                    diff?.items
+                );
+            } else if (diff?.op === '$remFromSet') {
+                UndoManager.AddEvent(
+                    {
+                        redo: action(() => {
+                            // console.log('redo $rem: ' + prop, diff.items); // bcz: uncomment to log undo
+                            diff.items?.forEach((item: any) => {
+                                const ind =
+                                    item instanceof SchemaHeaderField //
+                                        ? (container as any)[prop as any]?.findIndex((ele: any) => ele instanceof SchemaHeaderField && ele.heading === item.heading)
+                                        : (container as any)[prop as any]?.indexOf(item.value ?? item);
+                                ind !== undefined && ind !== -1 && (container as any)[prop as any]?.splice(ind, 1);
+                            });
+                            lastValue = ObjectField.MakeCopy((container as any)[prop as any]);
+                        }),
+                        undo: () => {
+                            // console.log('undo $rem: ' + prop, diff.items); // bcz: uncomment to log undo
+                            diff.items?.forEach((item: any) => {
+                                if (item instanceof SchemaHeaderField) {
+                                    const ind = (prevValue as List<any>).findIndex((ele: any) => ele instanceof SchemaHeaderField && ele.heading === item.heading);
+                                    ind !== -1 && (container as any)[prop as any].findIndex((ele: any) => ele instanceof SchemaHeaderField && ele.heading === item.heading) === -1 && (container as any)[prop as any].splice(ind, 0, item);
+                                } else {
+                                    const ind = (prevValue as List<any>).indexOf(item.value ?? item);
+                                    ind !== -1 && (container as any)[prop as any].indexOf(item.value ?? item) === -1 && (container as any)[prop as any].splice(ind, 0, item);
+                                }
+                            });
+                            lastValue = ObjectField.MakeCopy((container as any)[prop as any]);
+                        },
+                        prop: 'remove ' + diff.items?.length + ' items from list',
+                    },
                     diff?.items
                 );
+            } else {
+                const setFieldVal = (val: Field | undefined) => (container instanceof Doc ? (container[prop as string] = val) : (container[prop as number] = val as Field));
+                UndoManager.AddEvent(
+                    {
+                        redo: () => {
+                            // console.log('redo list: ' + prop, fieldVal()); // bcz: uncomment to log undo
+                            setFieldVal(newValue instanceof ObjectField ? ObjectField.MakeCopy(newValue) : undefined);
+                            lastValue = ObjectField.MakeCopy((container as any)[prop as any]);
+                        },
+                        undo: () => {
+                            // console.log('undo list: ' + prop, fieldVal()); // bcz: uncomment to log undo
+                            setFieldVal(prevValue instanceof ObjectField ? ObjectField.MakeCopy(prevValue) : undefined);
+                            lastValue = ObjectField.MakeCopy((container as any)[prop as any]);
+                        },
+                        prop: 'set list field',
+                    },
+                    diff?.items
+                );
+            }
         }
-        target[Update](op);
+        container[FieldChanged]?.(undefined, serverOp);
     };
 }
diff --git a/src/server/DashSession/Session/utilities/session_config.ts b/src/server/DashSession/Session/utilities/session_config.ts
index bde98e9d2..266759929 100644
--- a/src/server/DashSession/Session/utilities/session_config.ts
+++ b/src/server/DashSession/Session/utilities/session_config.ts
@@ -120,7 +120,7 @@ export const defaultConfig: Configuration = {
             color: "green"
         }
     },
-    ports: { server: 3000 },
+    ports: { server: 1050 },
     polling: {
         route: "/",
         intervalSeconds: 30,