diff --git a/.idea/.idea.BoGLWeb/.idea/workspace.xml b/.idea/.idea.BoGLWeb/.idea/workspace.xml
index fb82b795..ec7d1dd6 100644
--- a/.idea/.idea.BoGLWeb/.idea/workspace.xml
+++ b/.idea/.idea.BoGLWeb/.idea/workspace.xml
@@ -12,9 +12,9 @@
   <component name="ChangeListManager">
     <list default="true" id="1c9962a9-7be5-402a-9c8d-d9ade5a215b5" name="Changes" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/.idea.BoGLWeb/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/.idea.BoGLWeb/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/BoGLWeb/SystemDiagram.cs" beforeDir="false" afterPath="$PROJECT_DIR$/BoGLWeb/SystemDiagram.cs" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/BoGLWeb/wwwroot/images/elements/pulley.svg" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/BoGLWeb/wwwroot/types/elements/ElementNamespace.ts" beforeDir="false" afterPath="$PROJECT_DIR$/BoGLWeb/wwwroot/types/elements/ElementNamespace.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/BoGLWeb/wwwroot/css/main.css" beforeDir="false" afterPath="$PROJECT_DIR$/BoGLWeb/wwwroot/css/main.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/BoGLWeb/wwwroot/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/BoGLWeb/wwwroot/index.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/BoGLWeb/wwwroot/main.ts" beforeDir="false" afterPath="$PROJECT_DIR$/BoGLWeb/wwwroot/main.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -36,7 +36,7 @@
   <component name="GithubPullRequestsUISettings">{
   &quot;selectedUrlAndAccountId&quot;: {
     &quot;url&quot;: &quot;https://github.com/BoGLWeb/BoGLWeb.github.io.git&quot;,
-    &quot;accountId&quot;: &quot;825f8be4-8d27-44fc-a16b-775ccb2d8ed1&quot;
+    &quot;accountId&quot;: &quot;17934695-2669-45d9-9eb8-d5786373706a&quot;
   }
 }</component>
   <component name="HighlightingSettingsPerFile">
@@ -57,16 +57,18 @@
   <component name="PropertiesComponent">{
   &quot;keyToString&quot;: {
     &quot;.NET Launch Settings Profile.BoGLWeb.executor&quot;: &quot;Run&quot;,
+    &quot;.NET Launch Settings Profile.BoGLWeb: IIS Express.executor&quot;: &quot;Run&quot;,
     &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
     &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
-    &quot;git-widget-placeholder&quot;: &quot;remove-element-from-namespace&quot;,
+    &quot;git-widget-placeholder&quot;: &quot;210-minimize-warning&quot;,
     &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
     &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
     &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
     &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
     &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
     &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
-    &quot;ts.external.directory.path&quot;: &quot;C:\\Program Files\\JetBrains\\JetBrains Rider 2024.3.4\\plugins\\javascript-plugin\\jsLanguageServicesImpl\\external&quot;,
+    &quot;settings.editor.selected.configurable&quot;: &quot;settings.typescriptcompiler&quot;,
+    &quot;ts.external.directory.path&quot;: &quot;C:\\Users\\Cindy\\AppData\\Local\\JetBrains\\JetBrains Rider 2024.3\\plugins\\javascript-plugin\\jsLanguageServicesImpl\\external&quot;,
     &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   }
 }</component>
@@ -78,6 +80,7 @@
       <option name="USE_EXTERNAL_CONSOLE" value="0" />
       <option name="USE_MONO" value="0" />
       <option name="RUNTIME_ARGUMENTS" value="" />
+      <browser name="98ca6316-2f89-46d9-a9e5-fa9e2b0625b3" />
       <option name="GENERATE_APPLICATIONHOST_CONFIG" value="1" />
       <option name="SHOW_IIS_EXPRESS_OUTPUT" value="0" />
       <option name="SEND_DEBUG_REQUEST" value="1" />
@@ -93,6 +96,7 @@
       <option name="USE_EXTERNAL_CONSOLE" value="0" />
       <option name="USE_MONO" value="0" />
       <option name="RUNTIME_ARGUMENTS" value="" />
+      <browser name="98ca6316-2f89-46d9-a9e5-fa9e2b0625b3" />
       <option name="GENERATE_APPLICATIONHOST_CONFIG" value="1" />
       <option name="SHOW_IIS_EXPRESS_OUTPUT" value="0" />
       <option name="SEND_DEBUG_REQUEST" value="1" />
@@ -129,11 +133,11 @@
       <workItem from="1739299678206" duration="564000" />
       <workItem from="1739412016434" duration="192000" />
       <workItem from="1740580510626" duration="143000" />
-      <workItem from="1760372755480" duration="2973000" />
-      <workItem from="1761145113746" duration="2544000" />
-      <workItem from="1761928715675" duration="418000" />
-      <workItem from="1762136998050" duration="1830000" />
-      <workItem from="1762297075044" duration="429000" />
+      <workItem from="1756910190846" duration="339000" />
+      <workItem from="1758673800938" duration="59000" />
+      <workItem from="1758673948675" duration="9379000" />
+      <workItem from="1759880493231" duration="64000" />
+      <workItem from="1759881735060" duration="2291000" />
     </task>
     <task id="LOCAL-00001" summary="New spring images">
       <option name="closed" value="true" />
@@ -167,4 +171,8 @@
     <MESSAGE value="New spring images" />
     <option name="LAST_COMMIT_MESSAGE" value="New spring images" />
   </component>
+  <component name="XSLT-Support.FileAssociations.UIState">
+    <expand />
+    <select />
+  </component>
 </project>
\ No newline at end of file
diff --git a/BoGLWeb/wwwroot/css/main.css b/BoGLWeb/wwwroot/css/main.css
index 76522e22..44e672aa 100644
--- a/BoGLWeb/wwwroot/css/main.css
+++ b/BoGLWeb/wwwroot/css/main.css
@@ -905,4 +905,48 @@ input[type="file"] {
 .wideTooltip {
     min-width: 630px !important;
     max-width: 630px !important;
-}
\ No newline at end of file
+}
+
+/* Custom screen size warning modal */
+/* Hidden by default */
+.hidden {
+    display: none;
+}
+
+.resolution-modal {
+    position: fixed;
+    z-index: 9999;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.resolution-modal-content {
+    background-color: white;
+    padding: 20px;
+    border-radius: 8px;
+    max-width: 400px;
+    text-align: center;
+    position: relative;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+}
+
+.resolution-modal-close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 24px;
+    font-weight: bold;
+    color: #333;
+    cursor: pointer;
+}
+
+.hidden {
+    display: none !important;
+}
diff --git a/BoGLWeb/wwwroot/index.html b/BoGLWeb/wwwroot/index.html
index 9d3e546c..be133386 100644
--- a/BoGLWeb/wwwroot/index.html
+++ b/BoGLWeb/wwwroot/index.html
@@ -42,6 +42,14 @@
     </div>
     <script src="_framework/blazor.webassembly.js"></script>
     <script>navigator.serviceWorker.register('service-worker.js');</script>
+
+    <!-- screen-size modal -->
+    <div id="resolution-warning-modal" class="resolution-modal hidden">
+        <div class="resolution-modal-content">
+            <span class="resolution-modal-close">&times;</span>
+            <p>⚠️ Your window size is sub-optimal for this application. Please resize for best experience.</p>
+        </div>
+    </div>
 </body>
 
 </html>
diff --git a/BoGLWeb/wwwroot/main.ts b/BoGLWeb/wwwroot/main.ts
index 0a52eee0..2737685e 100644
--- a/BoGLWeb/wwwroot/main.ts
+++ b/BoGLWeb/wwwroot/main.ts
@@ -313,3 +313,31 @@ function pollDOM() {
 
 // starts the DOM polling
 pollDOM();
+
+
+//sub-optional resolution sizes - open to changes
+const min_width = 800;
+const min_height = 800;
+
+const modal = document.getElementById("resolution-warning-modal")!;
+const closeBtn = document.querySelector(".resolution-modal-close")!;
+
+function checkWindowSize() {
+    const isTooSmall = window.innerWidth < min_width || window.innerHeight < min_height;
+    if (isTooSmall) {
+        modal.classList.remove("hidden");
+    } else {
+        modal.classList.add("hidden");
+    }
+}
+
+// Hide modal when "X" is clicked
+closeBtn.addEventListener("click", () => {
+    modal.classList.add("hidden");
+});
+
+// Re-check when window is resized
+window.addEventListener("resize", checkWindowSize);
+
+// Run once on page load
+checkWindowSize();
diff --git a/BoGLWeb/wwwroot/tsconfig.json b/BoGLWeb/wwwroot/tsconfig.json
index 429f2816..5f8934b4 100644
--- a/BoGLWeb/wwwroot/tsconfig.json
+++ b/BoGLWeb/wwwroot/tsconfig.json
@@ -6,7 +6,8 @@
     "lib": [ "es2021", "dom" ],
     "esModuleInterop": true,
     "removeComments": true,
-    "outFile": "./build/build.js"
+    "outFile": "./build/build.js",
+    "moduleResolution": "node",
   },
   "exclude": [
     "node_modules"