diff --git a/.idea/.idea.BoGLWeb/.idea/.name b/.idea/.idea.BoGLWeb/.idea/.name
new file mode 100644
index 00000000..bf2814d5
--- /dev/null
+++ b/.idea/.idea.BoGLWeb/.idea/.name
@@ -0,0 +1 @@
+BoGLWeb
\ No newline at end of file
diff --git a/.idea/.idea.BoGLWeb/.idea/workspace.xml b/.idea/.idea.BoGLWeb/.idea/workspace.xml
index fb82b795..854f33a7 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">
@@ -45,6 +45,9 @@
     <setting file="file://$PROJECT_DIR$/BoGLWeb/wwwroot/build/build.js.map" root0="FORCE_HIGHLIGHTING" />
   </component>
   <component name="MetaFilesCheckinStateConfiguration" checkMetaFiles="true" />
+  <component name="ProblemsViewState">
+    <option name="selectedTabId" value="SWEA" />
+  </component>
   <component name="ProjectColorInfo">{
   &quot;customColor&quot;: &quot;&quot;,
   &quot;associatedIndex&quot;: 4
@@ -54,34 +57,38 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent">{
-  &quot;keyToString&quot;: {
-    &quot;.NET Launch Settings Profile.BoGLWeb.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;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;vue.rearranger.settings.migration&quot;: &quot;true&quot;
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    ".NET Launch Settings Profile.BoGLWeb.executor": "Run",
+    ".NET Launch Settings Profile.BoGLWeb: IIS Express.executor": "Run",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "RunOnceActivity.git.unshallow": "true",
+    "git-widget-placeholder": "210-minimize-warning",
+    "ignore.virus.scanning.warn.message": "true",
+    "node.js.detected.package.eslint": "true",
+    "node.js.detected.package.tslint": "true",
+    "node.js.selected.package.eslint": "(autodetect)",
+    "node.js.selected.package.tslint": "(autodetect)",
+    "nodejs_package_manager_path": "npm",
+    "settings.editor.selected.configurable": "settings.typescriptcompiler",
+    "ts.external.directory.path": "C:\\Program Files\\JetBrains\\JetBrains Rider 2025.3.3\\plugins\\javascript-plugin\\jsLanguageServicesImpl\\external",
+    "vue.rearranger.settings.migration": "true"
   }
-}</component>
+}]]></component>
   <component name="RunManager" selected=".NET Launch Settings Profile.BoGLWeb">
     <configuration name="BoGLWeb" type="LaunchSettings" factoryName=".NET Launch Settings Profile">
       <option name="LAUNCH_PROFILE_PROJECT_FILE_PATH" value="$PROJECT_DIR$/BoGLWeb/BoGLWeb.csproj" />
       <option name="LAUNCH_PROFILE_TFM" value="net6.0" />
       <option name="LAUNCH_PROFILE_NAME" value="BoGLWeb" />
-      <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" />
       <option name="ADDITIONAL_IIS_EXPRESS_ARGUMENTS" value="" />
+      <option name="AUTO_ATTACH_CHILDREN" value="0" />
+      <option name="MIXED_MODE_DEBUG" value="0" />
       <method v="2">
         <option name="Build" />
       </method>
@@ -90,13 +97,15 @@
       <option name="LAUNCH_PROFILE_PROJECT_FILE_PATH" value="$PROJECT_DIR$/BoGLWeb/BoGLWeb.csproj" />
       <option name="LAUNCH_PROFILE_TFM" value="net6.0" />
       <option name="LAUNCH_PROFILE_NAME" value="IIS Express" />
-      <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" />
       <option name="ADDITIONAL_IIS_EXPRESS_ARGUMENTS" value="" />
+      <option name="AUTO_ATTACH_CHILDREN" value="0" />
+      <option name="MIXED_MODE_DEBUG" value="0" />
       <method v="2">
         <option name="Build" />
       </method>
@@ -129,11 +138,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 +176,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..eb830248 100644
--- a/BoGLWeb/wwwroot/css/main.css
+++ b/BoGLWeb/wwwroot/css/main.css
@@ -905,4 +905,105 @@ 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); 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.resolution-modal-content {
+    background-color: white;
+    width: 500px;
+    padding: 20px 24px;
+    text-align: center;
+    position: relative;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+}
+
+.resolution-modal-header{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 16px;
+    margin-bottom: 16px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.resolution-modal-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.85);
+}
+
+.resolution-modal-close {
+  position: absolute;
+    top: 16px;
+    right: 16px;
+    cursor: pointer;
+    font-size: 24px;
+    font-weight: lighter;
+    
+    
+    
+   /* background-color: ##0652ff;   
+    border: 1px solid #1677ff;
+    color: #fff;
+    font-size: 14px;
+    height: 32px;
+    padding: 4px 15px;
+    border-radius: 6px;
+    
+    
+    */
+    
+}
+
+.resolution-modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding-top: 20px;
+}
+
+.resolution-modal-footer button:first-child {
+    background-color: #5890F7;
+    
+    border: none;
+    color: #fff;
+    font-size: 14px;
+    height: 32px;
+    padding: 4px 15px;
+    border-radius: 3px;
+}
+.resolution-modal-footer button:first-child:hover {
+    background-color: #4096ff;
+    border-color: #4096ff;
+}
+
+.resolution-modal-footer button:last-child {
+    background-color: white;
+    border: 1px solid #d6d6d6;
+    height: 32px;
+    padding: 4px 15px;
+}
+    
+
+.hidden {
+    display: none !important;
+}
diff --git a/BoGLWeb/wwwroot/index.html b/BoGLWeb/wwwroot/index.html
index 9d3e546c..e56f1e99 100644
--- a/BoGLWeb/wwwroot/index.html
+++ b/BoGLWeb/wwwroot/index.html
@@ -42,6 +42,28 @@
     </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">
+            <div class="resolution-modal-header">
+                <div class="resolution-modal-title"> 
+                Warning : Resize Window
+                </div>
+                <span class="resolution-modal-close">&times; </span>
+                
+            </div>
+            <div class = "resolution-modal-body"> 
+            <p> Your window size is sub-optimal for this application. Please resize for best experience.</p>
+            </div>
+            
+            <div class="resolution-modal-footer">
+                <button> OK </button>
+                <button> Cancel </button> 
+                
+            </div>
+        </div>
+    </div>
 </body>
 
 </html>
diff --git a/BoGLWeb/wwwroot/main.ts b/BoGLWeb/wwwroot/main.ts
index 0a52eee0..3c9005b3 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 closeBtnElements = document.querySelector(".resolution-modal-close, .resolution-modal-footer button")!;
+
+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
+closeBtnElements.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"