diff --git a/dependency-graph.svg b/dependency-graph.svg
index 302d0af2..63564442 100644
--- a/dependency-graph.svg
+++ b/dependency-graph.svg
@@ -4,87 +4,92 @@
 <!-- Generated by graphviz version 2.43.0 (0)
  -->
 <!-- Title: dependency&#45;cruiser output Pages: 1 -->
-<svg width="690pt" height="996pt"
- viewBox="0.00 0.00 690.00 996.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 992)">
+<svg width="841pt" height="1253pt"
+ viewBox="0.00 0.00 840.50 1252.71" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 1248.71)">
 <title>dependency&#45;cruiser output</title>
-<polygon fill="white" stroke="transparent" points="-4,4 -4,-992 686,-992 686,4 -4,4"/>
+<polygon fill="white" stroke="transparent" points="-4,4 -4,-1248.71 836.5,-1248.71 836.5,4 -4,4"/>
 <g id="clust1" class="cluster">
 <title>cluster_src</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M16,-8C16,-8 662,-8 662,-8 668,-8 674,-14 674,-20 674,-20 674,-968 674,-968 674,-974 668,-980 662,-980 662,-980 16,-980 16,-980 10,-980 4,-974 4,-968 4,-968 4,-20 4,-20 4,-14 10,-8 16,-8"/>
-<text text-anchor="middle" x="339" y="-968.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">src</text>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M16,-16.71C16,-16.71 812.5,-16.71 812.5,-16.71 818.5,-16.71 824.5,-22.71 824.5,-28.71 824.5,-28.71 824.5,-1224.71 824.5,-1224.71 824.5,-1230.71 818.5,-1236.71 812.5,-1236.71 812.5,-1236.71 16,-1236.71 16,-1236.71 10,-1236.71 4,-1230.71 4,-1224.71 4,-1224.71 4,-28.71 4,-28.71 4,-22.71 10,-16.71 16,-16.71"/>
+<text text-anchor="middle" x="414.25" y="-1225.51" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">src</text>
 </g>
 <g id="clust2" class="cluster">
 <title>cluster_src/Components</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M119,-16C119,-16 652.5,-16 652.5,-16 658.5,-16 664.5,-22 664.5,-28 664.5,-28 664.5,-792 664.5,-792 664.5,-798 658.5,-804 652.5,-804 652.5,-804 119,-804 119,-804 113,-804 107,-798 107,-792 107,-792 107,-28 107,-28 107,-22 113,-16 119,-16"/>
-<text text-anchor="middle" x="385.75" y="-792.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Components</text>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M119,-26.71C119,-26.71 804.5,-26.71 804.5,-26.71 810.5,-26.71 816.5,-32.71 816.5,-38.71 816.5,-38.71 816.5,-1048.71 816.5,-1048.71 816.5,-1054.71 810.5,-1060.71 804.5,-1060.71 804.5,-1060.71 119,-1060.71 119,-1060.71 113,-1060.71 107,-1054.71 107,-1048.71 107,-1048.71 107,-38.71 107,-38.71 107,-32.71 113,-26.71 119,-26.71"/>
+<text text-anchor="middle" x="461.75" y="-1049.51" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Components</text>
 </g>
 <g id="clust3" class="cluster">
 <title>cluster_src/Components/AppShell</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M127,-666C127,-666 513.5,-666 513.5,-666 519.5,-666 525.5,-672 525.5,-678 525.5,-678 525.5,-766 525.5,-766 525.5,-772 519.5,-778 513.5,-778 513.5,-778 127,-778 127,-778 121,-778 115,-772 115,-766 115,-766 115,-678 115,-678 115,-672 121,-666 127,-666"/>
-<text text-anchor="middle" x="320.25" y="-766.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">AppShell</text>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M127,-922.71C127,-922.71 519.5,-922.71 519.5,-922.71 525.5,-922.71 531.5,-928.71 531.5,-934.71 531.5,-934.71 531.5,-1022.71 531.5,-1022.71 531.5,-1028.71 525.5,-1034.71 519.5,-1034.71 519.5,-1034.71 127,-1034.71 127,-1034.71 121,-1034.71 115,-1028.71 115,-1022.71 115,-1022.71 115,-934.71 115,-934.71 115,-928.71 121,-922.71 127,-922.71"/>
+<text text-anchor="middle" x="323.25" y="-1023.51" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">AppShell</text>
 </g>
 <g id="clust4" class="cluster">
 <title>cluster_src/Components/Auth</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M127,-546C127,-546 277.5,-546 277.5,-546 283.5,-546 289.5,-552 289.5,-558 289.5,-558 289.5,-646 289.5,-646 289.5,-652 283.5,-658 277.5,-658 277.5,-658 127,-658 127,-658 121,-658 115,-652 115,-646 115,-646 115,-558 115,-558 115,-552 121,-546 127,-546"/>
-<text text-anchor="middle" x="202.25" y="-646.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Auth</text>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M455,-34.71C455,-34.71 671.5,-34.71 671.5,-34.71 677.5,-34.71 683.5,-40.71 683.5,-46.71 683.5,-46.71 683.5,-134.71 683.5,-134.71 683.5,-140.71 677.5,-146.71 671.5,-146.71 671.5,-146.71 455,-146.71 455,-146.71 449,-146.71 443,-140.71 443,-134.71 443,-134.71 443,-46.71 443,-46.71 443,-40.71 449,-34.71 455,-34.71"/>
+<text text-anchor="middle" x="563.25" y="-135.51" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Auth</text>
 </g>
 <g id="clust5" class="cluster">
 <title>cluster_src/Components/Gaming</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M127,-456C127,-456 266,-456 266,-456 272,-456 278,-462 278,-468 278,-468 278,-526 278,-526 278,-532 272,-538 266,-538 266,-538 127,-538 127,-538 121,-538 115,-532 115,-526 115,-526 115,-468 115,-468 115,-462 121,-456 127,-456"/>
-<text text-anchor="middle" x="196.5" y="-526.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Gaming</text>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M127,-832.71C127,-832.71 263,-832.71 263,-832.71 269,-832.71 275,-838.71 275,-844.71 275,-844.71 275,-902.71 275,-902.71 275,-908.71 269,-914.71 263,-914.71 263,-914.71 127,-914.71 127,-914.71 121,-914.71 115,-908.71 115,-902.71 115,-902.71 115,-844.71 115,-844.71 115,-838.71 121,-832.71 127,-832.71"/>
+<text text-anchor="middle" x="195" y="-903.51" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Gaming</text>
 </g>
 <g id="clust6" class="cluster">
 <title>cluster_src/Components/Input</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M314,-464C314,-464 402,-464 402,-464 408,-464 414,-470 414,-476 414,-476 414,-534 414,-534 414,-540 408,-546 402,-546 402,-546 314,-546 314,-546 308,-546 302,-540 302,-534 302,-534 302,-476 302,-476 302,-470 308,-464 314,-464"/>
-<text text-anchor="middle" x="358" y="-534.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Input</text>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M607,-288.71C607,-288.71 796.5,-288.71 796.5,-288.71 802.5,-288.71 808.5,-294.71 808.5,-300.71 808.5,-300.71 808.5,-358.71 808.5,-358.71 808.5,-364.71 802.5,-370.71 796.5,-370.71 796.5,-370.71 607,-370.71 607,-370.71 601,-370.71 595,-364.71 595,-358.71 595,-358.71 595,-300.71 595,-300.71 595,-294.71 601,-288.71 607,-288.71"/>
+<text text-anchor="middle" x="701.75" y="-359.51" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Input</text>
 </g>
 <g id="clust7" class="cluster">
 <title>cluster_src/Components/Map</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M127,-158C127,-158 644.5,-158 644.5,-158 650.5,-158 656.5,-164 656.5,-170 656.5,-170 656.5,-436 656.5,-436 656.5,-442 650.5,-448 644.5,-448 644.5,-448 127,-448 127,-448 121,-448 115,-442 115,-436 115,-436 115,-170 115,-170 115,-164 121,-158 127,-158"/>
-<text text-anchor="middle" x="385.75" y="-436.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Map</text>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M127,-378.71C127,-378.71 675,-378.71 675,-378.71 681,-378.71 687,-384.71 687,-390.71 687,-390.71 687,-812.71 687,-812.71 687,-818.71 681,-824.71 675,-824.71 675,-824.71 127,-824.71 127,-824.71 121,-824.71 115,-818.71 115,-812.71 115,-812.71 115,-390.71 115,-390.71 115,-384.71 121,-378.71 127,-378.71"/>
+<text text-anchor="middle" x="401" y="-813.51" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Map</text>
 </g>
 <g id="clust8" class="cluster">
 <title>cluster_src/Components/Map/Subcomponents</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M309.5,-284C309.5,-284 517,-284 517,-284 523,-284 529,-290 529,-296 529,-296 529,-384 529,-384 529,-390 523,-396 517,-396 517,-396 309.5,-396 309.5,-396 303.5,-396 297.5,-390 297.5,-384 297.5,-384 297.5,-296 297.5,-296 297.5,-290 303.5,-284 309.5,-284"/>
-<text text-anchor="middle" x="413.25" y="-384.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Subcomponents</text>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M296,-494.71C296,-494.71 547.5,-494.71 547.5,-494.71 553.5,-494.71 559.5,-500.71 559.5,-506.71 559.5,-506.71 559.5,-718.71 559.5,-718.71 559.5,-724.71 553.5,-730.71 547.5,-730.71 547.5,-730.71 296,-730.71 296,-730.71 290,-730.71 284,-724.71 284,-718.71 284,-718.71 284,-506.71 284,-506.71 284,-500.71 290,-494.71 296,-494.71"/>
+<text text-anchor="middle" x="421.75" y="-719.51" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Subcomponents</text>
 </g>
 <g id="clust9" class="cluster">
-<title>cluster_src/Components/Map/hooks</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M566.5,-176C566.5,-176 636.5,-176 636.5,-176 642.5,-176 648.5,-182 648.5,-188 648.5,-188 648.5,-276 648.5,-276 648.5,-282 642.5,-288 636.5,-288 636.5,-288 566.5,-288 566.5,-288 560.5,-288 554.5,-282 554.5,-276 554.5,-276 554.5,-188 554.5,-188 554.5,-182 560.5,-176 566.5,-176"/>
-<text text-anchor="middle" x="601.5" y="-276.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">hooks</text>
+<title>cluster_src/Components/Map/Subcomponents/ItemPopupComponents</title>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M420.5,-502.71C420.5,-502.71 539.5,-502.71 539.5,-502.71 545.5,-502.71 551.5,-508.71 551.5,-514.71 551.5,-514.71 551.5,-692.71 551.5,-692.71 551.5,-698.71 545.5,-704.71 539.5,-704.71 539.5,-704.71 420.5,-704.71 420.5,-704.71 414.5,-704.71 408.5,-698.71 408.5,-692.71 408.5,-692.71 408.5,-514.71 408.5,-514.71 408.5,-508.71 414.5,-502.71 420.5,-502.71"/>
+<text text-anchor="middle" x="480" y="-693.51" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">ItemPopupComponents</text>
 </g>
 <g id="clust10" class="cluster">
-<title>cluster_src/Components/Profile</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M127,-98C127,-98 269.5,-98 269.5,-98 275.5,-98 281.5,-104 281.5,-110 281.5,-110 281.5,-138 281.5,-138 281.5,-144 275.5,-150 269.5,-150 269.5,-150 127,-150 127,-150 121,-150 115,-144 115,-138 115,-138 115,-110 115,-110 115,-104 121,-98 127,-98"/>
-<text text-anchor="middle" x="198.25" y="-138.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Profile</text>
+<title>cluster_src/Components/Map/hooks</title>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M597,-622.71C597,-622.71 667,-622.71 667,-622.71 673,-622.71 679,-628.71 679,-634.71 679,-634.71 679,-722.71 679,-722.71 679,-728.71 673,-734.71 667,-734.71 667,-734.71 597,-734.71 597,-734.71 591,-734.71 585,-728.71 585,-722.71 585,-722.71 585,-634.71 585,-634.71 585,-628.71 591,-622.71 597,-622.71"/>
+<text text-anchor="middle" x="632" y="-723.51" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">hooks</text>
 </g>
 <g id="clust11" class="cluster">
-<title>cluster_src/Components/Templates</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M127,-24C127,-24 390.5,-24 390.5,-24 396.5,-24 402.5,-30 402.5,-36 402.5,-36 402.5,-78 402.5,-78 402.5,-84 396.5,-90 390.5,-90 390.5,-90 127,-90 127,-90 121,-90 115,-84 115,-78 115,-78 115,-36 115,-36 115,-30 121,-24 127,-24"/>
-<text text-anchor="middle" x="258.75" y="-78.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Templates</text>
+<title>cluster_src/Components/Profile</title>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M319.5,-154.71C319.5,-154.71 511.5,-154.71 511.5,-154.71 517.5,-154.71 523.5,-160.71 523.5,-166.71 523.5,-166.71 523.5,-194.71 523.5,-194.71 523.5,-200.71 517.5,-206.71 511.5,-206.71 511.5,-206.71 319.5,-206.71 319.5,-206.71 313.5,-206.71 307.5,-200.71 307.5,-194.71 307.5,-194.71 307.5,-166.71 307.5,-166.71 307.5,-160.71 313.5,-154.71 319.5,-154.71"/>
+<text text-anchor="middle" x="415.5" y="-195.51" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Profile</text>
 </g>
 <g id="clust12" class="cluster">
-<title>cluster_src/Components/Typography</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M441,-516C441,-516 507,-516 507,-516 513,-516 519,-522 519,-528 519,-528 519,-586 519,-586 519,-592 513,-598 507,-598 507,-598 441,-598 441,-598 435,-598 429,-592 429,-586 429,-586 429,-528 429,-528 429,-522 435,-516 441,-516"/>
-<text text-anchor="middle" x="474" y="-586.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Typography</text>
+<title>cluster_src/Components/Templates</title>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M319.5,-214.71C319.5,-214.71 664.5,-214.71 664.5,-214.71 670.5,-214.71 676.5,-220.71 676.5,-226.71 676.5,-226.71 676.5,-268.71 676.5,-268.71 676.5,-274.71 670.5,-280.71 664.5,-280.71 664.5,-280.71 319.5,-280.71 319.5,-280.71 313.5,-280.71 307.5,-274.71 307.5,-268.71 307.5,-268.71 307.5,-226.71 307.5,-226.71 307.5,-220.71 313.5,-214.71 319.5,-214.71"/>
+<text text-anchor="middle" x="492" y="-269.51" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Templates</text>
 </g>
 <g id="clust13" class="cluster">
-<title>cluster_src/SampleData</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M24,-711C24,-711 79,-711 79,-711 85,-711 91,-717 91,-723 91,-723 91,-751 91,-751 91,-757 85,-763 79,-763 79,-763 24,-763 24,-763 18,-763 12,-757 12,-751 12,-751 12,-723 12,-723 12,-717 18,-711 24,-711"/>
-<text text-anchor="middle" x="51.5" y="-751.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">SampleData</text>
+<title>cluster_src/Components/Typography</title>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M719.5,-94.71C719.5,-94.71 785.5,-94.71 785.5,-94.71 791.5,-94.71 797.5,-100.71 797.5,-106.71 797.5,-106.71 797.5,-164.71 797.5,-164.71 797.5,-170.71 791.5,-176.71 785.5,-176.71 785.5,-176.71 719.5,-176.71 719.5,-176.71 713.5,-176.71 707.5,-170.71 707.5,-164.71 707.5,-164.71 707.5,-106.71 707.5,-106.71 707.5,-100.71 713.5,-94.71 719.5,-94.71"/>
+<text text-anchor="middle" x="752.5" y="-165.51" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Typography</text>
 </g>
 <g id="clust14" class="cluster">
+<title>cluster_src/SampleData</title>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M24,-860.71C24,-860.71 79,-860.71 79,-860.71 85,-860.71 91,-866.71 91,-872.71 91,-872.71 91,-900.71 91,-900.71 91,-906.71 85,-912.71 79,-912.71 79,-912.71 24,-912.71 24,-912.71 18,-912.71 12,-906.71 12,-900.71 12,-900.71 12,-872.71 12,-872.71 12,-866.71 18,-860.71 24,-860.71"/>
+<text text-anchor="middle" x="51.5" y="-901.51" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">SampleData</text>
+</g>
+<g id="clust15" class="cluster">
 <title>cluster_src/Utils</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M549,-812C549,-812 654,-812 654,-812 660,-812 666,-818 666,-824 666,-824 666,-942 666,-942 666,-948 660,-954 654,-954 654,-954 549,-954 549,-954 543,-954 537,-948 537,-942 537,-942 537,-824 537,-824 537,-818 543,-812 549,-812"/>
-<text text-anchor="middle" x="601.5" y="-942.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Utils</text>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M579.5,-1068.71C579.5,-1068.71 684.5,-1068.71 684.5,-1068.71 690.5,-1068.71 696.5,-1074.71 696.5,-1080.71 696.5,-1080.71 696.5,-1198.71 696.5,-1198.71 696.5,-1204.71 690.5,-1210.71 684.5,-1210.71 684.5,-1210.71 579.5,-1210.71 579.5,-1210.71 573.5,-1210.71 567.5,-1204.71 567.5,-1198.71 567.5,-1198.71 567.5,-1080.71 567.5,-1080.71 567.5,-1074.71 573.5,-1068.71 579.5,-1068.71"/>
+<text text-anchor="middle" x="632" y="-1199.51" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Utils</text>
 </g>
 <!-- src/Components/AppShell/AppShell.tsx -->
 <g id="node1" class="node">
 <title>src/Components/AppShell/AppShell.tsx</title>
 <g id="a_node1"><a xlink:href="src/Components/AppShell/AppShell.tsx" xlink:title="AppShell.tsx">
-<path fill="#bbfeff" stroke="black" d="M268.5,-692C268.5,-692 207.5,-692 207.5,-692 204.5,-692 201.5,-689 201.5,-686 201.5,-686 201.5,-680 201.5,-680 201.5,-677 204.5,-674 207.5,-674 207.5,-674 268.5,-674 268.5,-674 271.5,-674 274.5,-677 274.5,-680 274.5,-680 274.5,-686 274.5,-686 274.5,-689 271.5,-692 268.5,-692"/>
-<text text-anchor="start" x="209.5" y="-680.8" font-family="Helvetica,sans-Serif" font-size="9.00">AppShell.tsx</text>
+<path fill="#bbfeff" stroke="black" d="M265.5,-948.71C265.5,-948.71 204.5,-948.71 204.5,-948.71 201.5,-948.71 198.5,-945.71 198.5,-942.71 198.5,-942.71 198.5,-936.71 198.5,-936.71 198.5,-933.71 201.5,-930.71 204.5,-930.71 204.5,-930.71 265.5,-930.71 265.5,-930.71 268.5,-930.71 271.5,-933.71 271.5,-936.71 271.5,-936.71 271.5,-942.71 271.5,-942.71 271.5,-945.71 268.5,-948.71 265.5,-948.71"/>
+<text text-anchor="start" x="206.5" y="-937.51" font-family="Helvetica,sans-Serif" font-size="9.00">AppShell.tsx</text>
 </a>
 </g>
 </g>
@@ -92,38 +97,38 @@
 <g id="node2" class="node">
 <title>src/Components/AppShell/NavBar.tsx</title>
 <g id="a_node2"><a xlink:href="src/Components/AppShell/NavBar.tsx" xlink:title="NavBar.tsx">
-<path fill="#bbfeff" stroke="black" d="M384.5,-692C384.5,-692 331.5,-692 331.5,-692 328.5,-692 325.5,-689 325.5,-686 325.5,-686 325.5,-680 325.5,-680 325.5,-677 328.5,-674 331.5,-674 331.5,-674 384.5,-674 384.5,-674 387.5,-674 390.5,-677 390.5,-680 390.5,-680 390.5,-686 390.5,-686 390.5,-689 387.5,-692 384.5,-692"/>
-<text text-anchor="start" x="333.5" y="-680.8" font-family="Helvetica,sans-Serif" font-size="9.00">NavBar.tsx</text>
+<path fill="#bbfeff" stroke="black" d="M371,-948.71C371,-948.71 318,-948.71 318,-948.71 315,-948.71 312,-945.71 312,-942.71 312,-942.71 312,-936.71 312,-936.71 312,-933.71 315,-930.71 318,-930.71 318,-930.71 371,-930.71 371,-930.71 374,-930.71 377,-933.71 377,-936.71 377,-936.71 377,-942.71 377,-942.71 377,-945.71 374,-948.71 371,-948.71"/>
+<text text-anchor="start" x="320" y="-937.51" font-family="Helvetica,sans-Serif" font-size="9.00">NavBar.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/AppShell/AppShell.tsx&#45;&gt;src/Components/AppShell/NavBar.tsx -->
 <g id="edge1" class="edge">
 <title>src/Components/AppShell/AppShell.tsx&#45;&gt;src/Components/AppShell/NavBar.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M274.72,-683C288.72,-683 304.81,-683 319.02,-683"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="319.4,-685.1 325.4,-683 319.4,-680.9 319.4,-685.1"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M271.8,-939.71C282.72,-939.71 294.76,-939.71 305.81,-939.71"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="305.83,-941.81 311.83,-939.71 305.83,-937.61 305.83,-941.81"/>
 </g>
 <!-- src/Components/AppShell/DialogModal.tsx -->
 <g id="node4" class="node">
 <title>src/Components/AppShell/DialogModal.tsx</title>
 <g id="a_node4"><a xlink:href="src/Components/AppShell/DialogModal.tsx" xlink:title="DialogModal.tsx">
-<path fill="#bbfeff" stroke="black" d="M511.5,-692C511.5,-692 436.5,-692 436.5,-692 433.5,-692 430.5,-689 430.5,-686 430.5,-686 430.5,-680 430.5,-680 430.5,-677 433.5,-674 436.5,-674 436.5,-674 511.5,-674 511.5,-674 514.5,-674 517.5,-677 517.5,-680 517.5,-680 517.5,-686 517.5,-686 517.5,-689 514.5,-692 511.5,-692"/>
-<text text-anchor="start" x="438.5" y="-680.8" font-family="Helvetica,sans-Serif" font-size="9.00">DialogModal.tsx</text>
+<path fill="#bbfeff" stroke="black" d="M517.5,-948.71C517.5,-948.71 442.5,-948.71 442.5,-948.71 439.5,-948.71 436.5,-945.71 436.5,-942.71 436.5,-942.71 436.5,-936.71 436.5,-936.71 436.5,-933.71 439.5,-930.71 442.5,-930.71 442.5,-930.71 517.5,-930.71 517.5,-930.71 520.5,-930.71 523.5,-933.71 523.5,-936.71 523.5,-936.71 523.5,-942.71 523.5,-942.71 523.5,-945.71 520.5,-948.71 517.5,-948.71"/>
+<text text-anchor="start" x="444.5" y="-937.51" font-family="Helvetica,sans-Serif" font-size="9.00">DialogModal.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/AppShell/NavBar.tsx&#45;&gt;src/Components/AppShell/DialogModal.tsx -->
 <g id="edge2" class="edge">
 <title>src/Components/AppShell/NavBar.tsx&#45;&gt;src/Components/AppShell/DialogModal.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M390.76,-683C401.09,-683 412.82,-683 424.12,-683"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="424.34,-685.1 430.34,-683 424.34,-680.9 424.34,-685.1"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M377.14,-939.71C392.93,-939.71 412.39,-939.71 430.06,-939.71"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="430.48,-941.81 436.48,-939.71 430.48,-937.61 430.48,-941.81"/>
 </g>
 <!-- src/Components/AppShell/Content.tsx -->
 <g id="node3" class="node">
 <title>src/Components/AppShell/Content.tsx</title>
 <g id="a_node3"><a xlink:href="src/Components/AppShell/Content.tsx" xlink:title="Content.tsx">
-<path fill="#bbfeff" stroke="black" d="M266.5,-722C266.5,-722 209.5,-722 209.5,-722 206.5,-722 203.5,-719 203.5,-716 203.5,-716 203.5,-710 203.5,-710 203.5,-707 206.5,-704 209.5,-704 209.5,-704 266.5,-704 266.5,-704 269.5,-704 272.5,-707 272.5,-710 272.5,-710 272.5,-716 272.5,-716 272.5,-719 269.5,-722 266.5,-722"/>
-<text text-anchor="start" x="211.5" y="-710.8" font-family="Helvetica,sans-Serif" font-size="9.00">Content.tsx</text>
+<path fill="#bbfeff" stroke="black" d="M263.5,-978.71C263.5,-978.71 206.5,-978.71 206.5,-978.71 203.5,-978.71 200.5,-975.71 200.5,-972.71 200.5,-972.71 200.5,-966.71 200.5,-966.71 200.5,-963.71 203.5,-960.71 206.5,-960.71 206.5,-960.71 263.5,-960.71 263.5,-960.71 266.5,-960.71 269.5,-963.71 269.5,-966.71 269.5,-966.71 269.5,-972.71 269.5,-972.71 269.5,-975.71 266.5,-978.71 263.5,-978.71"/>
+<text text-anchor="start" x="208.5" y="-967.51" font-family="Helvetica,sans-Serif" font-size="9.00">Content.tsx</text>
 </a>
 </g>
 </g>
@@ -131,8 +136,8 @@
 <g id="node5" class="node">
 <title>src/Components/AppShell/SideBar.tsx</title>
 <g id="a_node5"><a xlink:href="src/Components/AppShell/SideBar.tsx" xlink:title="SideBar.tsx">
-<path fill="#bbfeff" stroke="black" d="M265.5,-752C265.5,-752 210.5,-752 210.5,-752 207.5,-752 204.5,-749 204.5,-746 204.5,-746 204.5,-740 204.5,-740 204.5,-737 207.5,-734 210.5,-734 210.5,-734 265.5,-734 265.5,-734 268.5,-734 271.5,-737 271.5,-740 271.5,-740 271.5,-746 271.5,-746 271.5,-749 268.5,-752 265.5,-752"/>
-<text text-anchor="start" x="212.5" y="-740.8" font-family="Helvetica,sans-Serif" font-size="9.00">SideBar.tsx</text>
+<path fill="#bbfeff" stroke="black" d="M262.5,-1008.71C262.5,-1008.71 207.5,-1008.71 207.5,-1008.71 204.5,-1008.71 201.5,-1005.71 201.5,-1002.71 201.5,-1002.71 201.5,-996.71 201.5,-996.71 201.5,-993.71 204.5,-990.71 207.5,-990.71 207.5,-990.71 262.5,-990.71 262.5,-990.71 265.5,-990.71 268.5,-993.71 268.5,-996.71 268.5,-996.71 268.5,-1002.71 268.5,-1002.71 268.5,-1005.71 265.5,-1008.71 262.5,-1008.71"/>
+<text text-anchor="start" x="209.5" y="-997.51" font-family="Helvetica,sans-Serif" font-size="9.00">SideBar.tsx</text>
 </a>
 </g>
 </g>
@@ -140,146 +145,146 @@
 <g id="node6" class="node">
 <title>src/Components/AppShell/SidebarSubmenu.tsx</title>
 <g id="a_node6"><a xlink:href="src/Components/AppShell/SidebarSubmenu.tsx" xlink:title="SidebarSubmenu.tsx">
-<path fill="#bbfeff" stroke="black" d="M408,-752C408,-752 308,-752 308,-752 305,-752 302,-749 302,-746 302,-746 302,-740 302,-740 302,-737 305,-734 308,-734 308,-734 408,-734 408,-734 411,-734 414,-737 414,-740 414,-740 414,-746 414,-746 414,-749 411,-752 408,-752"/>
-<text text-anchor="start" x="310" y="-740.8" font-family="Helvetica,sans-Serif" font-size="9.00">SidebarSubmenu.tsx</text>
+<path fill="#bbfeff" stroke="black" d="M394.5,-1008.71C394.5,-1008.71 294.5,-1008.71 294.5,-1008.71 291.5,-1008.71 288.5,-1005.71 288.5,-1002.71 288.5,-1002.71 288.5,-996.71 288.5,-996.71 288.5,-993.71 291.5,-990.71 294.5,-990.71 294.5,-990.71 394.5,-990.71 394.5,-990.71 397.5,-990.71 400.5,-993.71 400.5,-996.71 400.5,-996.71 400.5,-1002.71 400.5,-1002.71 400.5,-1005.71 397.5,-1008.71 394.5,-1008.71"/>
+<text text-anchor="start" x="296.5" y="-997.51" font-family="Helvetica,sans-Serif" font-size="9.00">SidebarSubmenu.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/AppShell/SideBar.tsx&#45;&gt;src/Components/AppShell/SidebarSubmenu.tsx -->
 <g id="edge3" class="edge">
 <title>src/Components/AppShell/SideBar.tsx&#45;&gt;src/Components/AppShell/SidebarSubmenu.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M271.56,-743C279.06,-743 287.28,-743 295.56,-743"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="295.9,-745.1 301.9,-743 295.9,-740.9 295.9,-745.1"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M268.55,-999.71C272.98,-999.71 277.64,-999.71 282.38,-999.71"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="282.41,-1001.81 288.41,-999.71 282.41,-997.61 282.41,-1001.81"/>
 </g>
 <!-- src/Components/AppShell/index.tsx -->
 <g id="node7" class="node">
 <title>src/Components/AppShell/index.tsx</title>
 <g id="a_node7"><a xlink:href="src/Components/AppShell/index.tsx" xlink:title="index.tsx">
-<path fill="#bbfeff" stroke="black" d="M175,-707C175,-707 129,-707 129,-707 126,-707 123,-704 123,-701 123,-701 123,-695 123,-695 123,-692 126,-689 129,-689 129,-689 175,-689 175,-689 178,-689 181,-692 181,-695 181,-695 181,-701 181,-701 181,-704 178,-707 175,-707"/>
-<text text-anchor="start" x="131" y="-695.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
+<path fill="#bbfeff" stroke="black" d="M175,-963.71C175,-963.71 129,-963.71 129,-963.71 126,-963.71 123,-960.71 123,-957.71 123,-957.71 123,-951.71 123,-951.71 123,-948.71 126,-945.71 129,-945.71 129,-945.71 175,-945.71 175,-945.71 178,-945.71 181,-948.71 181,-951.71 181,-951.71 181,-957.71 181,-957.71 181,-960.71 178,-963.71 175,-963.71"/>
+<text text-anchor="start" x="131" y="-952.51" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/AppShell/index.tsx&#45;&gt;src/Components/AppShell/AppShell.tsx -->
 <g id="edge4" class="edge">
 <title>src/Components/AppShell/index.tsx&#45;&gt;src/Components/AppShell/AppShell.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.44,-692.92C185.92,-692.12 190.64,-691.28 195.35,-690.44"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="195.76,-692.5 201.29,-689.38 195.02,-688.36 195.76,-692.5"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.33,-949.47C184.84,-948.82 188.48,-948.14 192.13,-947.47"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="192.76,-949.49 198.28,-946.33 192,-945.36 192.76,-949.49"/>
 </g>
 <!-- src/Components/AppShell/index.tsx&#45;&gt;src/Components/AppShell/Content.tsx -->
 <g id="edge5" class="edge">
 <title>src/Components/AppShell/index.tsx&#45;&gt;src/Components/AppShell/Content.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.44,-703.08C186.5,-703.98 191.86,-704.94 197.17,-705.89"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="197.09,-708.01 203.36,-706.99 197.83,-703.87 197.09,-708.01"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.33,-959.96C185.53,-960.74 189.93,-961.55 194.31,-962.36"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="193.98,-964.44 200.26,-963.47 194.74,-960.31 193.98,-964.44"/>
 </g>
 <!-- src/Components/AppShell/index.tsx&#45;&gt;src/Components/AppShell/SideBar.tsx -->
 <g id="edge6" class="edge">
 <title>src/Components/AppShell/index.tsx&#45;&gt;src/Components/AppShell/SideBar.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M175.71,-707.08C177.75,-708.27 179.71,-709.58 181.5,-711 188.94,-716.93 186.81,-722.41 194.5,-728 196.08,-729.15 197.76,-730.22 199.5,-731.21"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="198.58,-733.1 204.88,-733.96 200.49,-729.36 198.58,-733.1"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M175.71,-963.79C177.75,-964.98 179.71,-966.29 181.5,-967.71 188.94,-973.64 186.87,-979.03 194.5,-984.71 195.93,-985.78 197.45,-986.78 199.03,-987.72"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="198.27,-989.7 204.55,-990.66 200.24,-985.99 198.27,-989.7"/>
 </g>
 <!-- src/Components/Auth/LoginPage.tsx -->
 <g id="node8" class="node">
 <title>src/Components/Auth/LoginPage.tsx</title>
 <g id="a_node8"><a xlink:href="src/Components/Auth/LoginPage.tsx" xlink:title="LoginPage.tsx">
-<path fill="#bbfeff" stroke="black" d="M271.5,-572C271.5,-572 204.5,-572 204.5,-572 201.5,-572 198.5,-569 198.5,-566 198.5,-566 198.5,-560 198.5,-560 198.5,-557 201.5,-554 204.5,-554 204.5,-554 271.5,-554 271.5,-554 274.5,-554 277.5,-557 277.5,-560 277.5,-560 277.5,-566 277.5,-566 277.5,-569 274.5,-572 271.5,-572"/>
-<text text-anchor="start" x="206.5" y="-560.8" font-family="Helvetica,sans-Serif" font-size="9.00">LoginPage.tsx</text>
+<path fill="#bbfeff" stroke="black" d="M665.5,-90.71C665.5,-90.71 598.5,-90.71 598.5,-90.71 595.5,-90.71 592.5,-87.71 592.5,-84.71 592.5,-84.71 592.5,-78.71 592.5,-78.71 592.5,-75.71 595.5,-72.71 598.5,-72.71 598.5,-72.71 665.5,-72.71 665.5,-72.71 668.5,-72.71 671.5,-75.71 671.5,-78.71 671.5,-78.71 671.5,-84.71 671.5,-84.71 671.5,-87.71 668.5,-90.71 665.5,-90.71"/>
+<text text-anchor="start" x="600.5" y="-79.51" font-family="Helvetica,sans-Serif" font-size="9.00">LoginPage.tsx</text>
 </a>
 </g>
 </g>
-<!-- src/Components/Input/InputText.tsx -->
+<!-- src/Components/Input/TextInput.tsx -->
 <g id="node9" class="node">
-<title>src/Components/Input/InputText.tsx</title>
-<g id="a_node9"><a xlink:href="src/Components/Input/InputText.tsx" xlink:title="InputText.tsx">
-<path fill="#bbfeff" stroke="black" d="M390,-520C390,-520 326,-520 326,-520 323,-520 320,-517 320,-514 320,-514 320,-508 320,-508 320,-505 323,-502 326,-502 326,-502 390,-502 390,-502 393,-502 396,-505 396,-508 396,-508 396,-514 396,-514 396,-517 393,-520 390,-520"/>
-<text text-anchor="start" x="328" y="-508.8" font-family="Helvetica,sans-Serif" font-size="9.00">InputText.tsx</text>
+<title>src/Components/Input/TextInput.tsx</title>
+<g id="a_node9"><a xlink:href="src/Components/Input/TextInput.tsx" xlink:title="TextInput.tsx">
+<path fill="#bbfeff" stroke="black" d="M784.5,-314.71C784.5,-314.71 720.5,-314.71 720.5,-314.71 717.5,-314.71 714.5,-311.71 714.5,-308.71 714.5,-308.71 714.5,-302.71 714.5,-302.71 714.5,-299.71 717.5,-296.71 720.5,-296.71 720.5,-296.71 784.5,-296.71 784.5,-296.71 787.5,-296.71 790.5,-299.71 790.5,-302.71 790.5,-302.71 790.5,-308.71 790.5,-308.71 790.5,-311.71 787.5,-314.71 784.5,-314.71"/>
+<text text-anchor="start" x="722.5" y="-303.51" font-family="Helvetica,sans-Serif" font-size="9.00">TextInput.tsx</text>
 </a>
 </g>
 </g>
-<!-- src/Components/Auth/LoginPage.tsx&#45;&gt;src/Components/Input/InputText.tsx -->
+<!-- src/Components/Auth/LoginPage.tsx&#45;&gt;src/Components/Input/TextInput.tsx -->
 <g id="edge7" class="edge">
-<title>src/Components/Auth/LoginPage.tsx&#45;&gt;src/Components/Input/InputText.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M260.15,-553.83C269.19,-549.89 279.87,-545.24 289.5,-541 303.24,-534.95 318.53,-528.16 331.08,-522.57"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="332.01,-524.46 336.64,-520.1 330.3,-520.62 332.01,-524.46"/>
+<title>src/Components/Auth/LoginPage.tsx&#45;&gt;src/Components/Input/TextInput.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M671.67,-83.14C681.04,-85.37 690.17,-89.46 696.5,-96.71 708.68,-110.68 700.34,-161.66 704.5,-179.71 714.08,-221.27 733.92,-267.68 744.5,-290.85"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="742.68,-291.92 747.1,-296.49 746.49,-290.16 742.68,-291.92"/>
 </g>
 <!-- src/Components/Typography/ErrorText.tsx -->
 <g id="node10" class="node">
 <title>src/Components/Typography/ErrorText.tsx</title>
 <g id="a_node10"><a xlink:href="src/Components/Typography/ErrorText.tsx" xlink:title="ErrorText.tsx">
-<path fill="#bbfeff" stroke="black" d="M505,-572C505,-572 443,-572 443,-572 440,-572 437,-569 437,-566 437,-566 437,-560 437,-560 437,-557 440,-554 443,-554 443,-554 505,-554 505,-554 508,-554 511,-557 511,-560 511,-560 511,-566 511,-566 511,-569 508,-572 505,-572"/>
-<text text-anchor="start" x="445" y="-560.8" font-family="Helvetica,sans-Serif" font-size="9.00">ErrorText.tsx</text>
+<path fill="#bbfeff" stroke="black" d="M783.5,-120.71C783.5,-120.71 721.5,-120.71 721.5,-120.71 718.5,-120.71 715.5,-117.71 715.5,-114.71 715.5,-114.71 715.5,-108.71 715.5,-108.71 715.5,-105.71 718.5,-102.71 721.5,-102.71 721.5,-102.71 783.5,-102.71 783.5,-102.71 786.5,-102.71 789.5,-105.71 789.5,-108.71 789.5,-108.71 789.5,-114.71 789.5,-114.71 789.5,-117.71 786.5,-120.71 783.5,-120.71"/>
+<text text-anchor="start" x="723.5" y="-109.51" font-family="Helvetica,sans-Serif" font-size="9.00">ErrorText.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Auth/LoginPage.tsx&#45;&gt;src/Components/Typography/ErrorText.tsx -->
 <g id="edge8" class="edge">
 <title>src/Components/Auth/LoginPage.tsx&#45;&gt;src/Components/Typography/ErrorText.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M277.64,-563C319.83,-563 387.18,-563 430.74,-563"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="430.99,-565.1 436.99,-563 430.99,-560.9 430.99,-565.1"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M671.67,-90.63C679.88,-92.58 688.49,-94.68 696.5,-96.71 701.85,-98.08 707.49,-99.56 713.02,-101.04"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="712.64,-103.11 718.98,-102.65 713.73,-99.06 712.64,-103.11"/>
 </g>
 <!-- src/Components/Auth/SignupPage.tsx -->
 <g id="node11" class="node">
 <title>src/Components/Auth/SignupPage.tsx</title>
 <g id="a_node11"><a xlink:href="src/Components/Auth/SignupPage.tsx" xlink:title="SignupPage.tsx">
-<path fill="#bbfeff" stroke="black" d="M275.5,-602C275.5,-602 200.5,-602 200.5,-602 197.5,-602 194.5,-599 194.5,-596 194.5,-596 194.5,-590 194.5,-590 194.5,-587 197.5,-584 200.5,-584 200.5,-584 275.5,-584 275.5,-584 278.5,-584 281.5,-587 281.5,-590 281.5,-590 281.5,-596 281.5,-596 281.5,-599 278.5,-602 275.5,-602"/>
-<text text-anchor="start" x="202.5" y="-590.8" font-family="Helvetica,sans-Serif" font-size="9.00">SignupPage.tsx</text>
+<path fill="#bbfeff" stroke="black" d="M669.5,-120.71C669.5,-120.71 594.5,-120.71 594.5,-120.71 591.5,-120.71 588.5,-117.71 588.5,-114.71 588.5,-114.71 588.5,-108.71 588.5,-108.71 588.5,-105.71 591.5,-102.71 594.5,-102.71 594.5,-102.71 669.5,-102.71 669.5,-102.71 672.5,-102.71 675.5,-105.71 675.5,-108.71 675.5,-108.71 675.5,-114.71 675.5,-114.71 675.5,-117.71 672.5,-120.71 669.5,-120.71"/>
+<text text-anchor="start" x="596.5" y="-109.51" font-family="Helvetica,sans-Serif" font-size="9.00">SignupPage.tsx</text>
 </a>
 </g>
 </g>
-<!-- src/Components/Auth/SignupPage.tsx&#45;&gt;src/Components/Input/InputText.tsx -->
+<!-- src/Components/Auth/SignupPage.tsx&#45;&gt;src/Components/Input/TextInput.tsx -->
 <g id="edge9" class="edge">
-<title>src/Components/Auth/SignupPage.tsx&#45;&gt;src/Components/Input/InputText.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M277.1,-583.92C281.42,-582.25 285.65,-580.29 289.5,-578 312.98,-564.08 334.28,-540.2 346.43,-525.03"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="348.13,-526.26 350.19,-520.24 344.83,-523.66 348.13,-526.26"/>
+<title>src/Components/Auth/SignupPage.tsx&#45;&gt;src/Components/Input/TextInput.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M645.22,-120.86C659.2,-131.86 682.02,-151.5 696.5,-172.71 722.99,-211.53 740.24,-265.09 747.53,-290.79"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="745.54,-291.47 749.17,-296.69 749.59,-290.35 745.54,-291.47"/>
 </g>
 <!-- src/Components/Auth/SignupPage.tsx&#45;&gt;src/Components/Typography/ErrorText.tsx -->
 <g id="edge10" class="edge">
 <title>src/Components/Auth/SignupPage.tsx&#45;&gt;src/Components/Typography/ErrorText.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M281.65,-587.53C323.99,-582.1 388.52,-573.83 430.73,-568.42"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="431.1,-570.49 436.79,-567.64 430.57,-566.32 431.1,-570.49"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M675.78,-111.71C686.64,-111.71 698.31,-111.71 709.15,-111.71"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="709.42,-113.81 715.42,-111.71 709.42,-109.61 709.42,-113.81"/>
 </g>
 <!-- src/Components/Auth/index.tsx -->
 <g id="node12" class="node">
 <title>src/Components/Auth/index.tsx</title>
 <g id="a_node12"><a xlink:href="src/Components/Auth/index.tsx" xlink:title="index.tsx">
-<path fill="#bbfeff" stroke="black" d="M175,-587C175,-587 129,-587 129,-587 126,-587 123,-584 123,-581 123,-581 123,-575 123,-575 123,-572 126,-569 129,-569 129,-569 175,-569 175,-569 178,-569 181,-572 181,-575 181,-575 181,-581 181,-581 181,-584 178,-587 175,-587"/>
-<text text-anchor="start" x="131" y="-575.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
+<path fill="#bbfeff" stroke="black" d="M503,-105.71C503,-105.71 457,-105.71 457,-105.71 454,-105.71 451,-102.71 451,-99.71 451,-99.71 451,-93.71 451,-93.71 451,-90.71 454,-87.71 457,-87.71 457,-87.71 503,-87.71 503,-87.71 506,-87.71 509,-90.71 509,-93.71 509,-93.71 509,-99.71 509,-99.71 509,-102.71 506,-105.71 503,-105.71"/>
+<text text-anchor="start" x="459" y="-94.51" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Auth/index.tsx&#45;&gt;src/Components/Auth/LoginPage.tsx -->
 <g id="edge11" class="edge">
 <title>src/Components/Auth/index.tsx&#45;&gt;src/Components/Auth/LoginPage.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.44,-572.92C184.91,-572.3 188.53,-571.66 192.17,-571"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="192.77,-573.03 198.31,-569.91 192.04,-568.9 192.77,-573.03"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M509.21,-93.89C530.89,-91.73 561.23,-88.69 586.21,-86.19"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="586.68,-88.26 592.44,-85.57 586.26,-84.08 586.68,-88.26"/>
 </g>
 <!-- src/Components/Auth/index.tsx&#45;&gt;src/Components/Auth/SignupPage.tsx -->
 <g id="edge12" class="edge">
 <title>src/Components/Auth/index.tsx&#45;&gt;src/Components/Auth/SignupPage.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.44,-583.08C183.66,-583.48 185.95,-583.88 188.26,-584.3"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="188.14,-586.41 194.42,-585.4 188.88,-582.27 188.14,-586.41"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M509.21,-99.54C529.79,-101.59 558.19,-104.43 582.39,-106.85"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="582.26,-108.95 588.44,-107.46 582.68,-104.77 582.26,-108.95"/>
 </g>
 <!-- src/Components/Auth/useAuth.tsx -->
 <g id="node13" class="node">
 <title>src/Components/Auth/useAuth.tsx</title>
 <g id="a_node13"><a xlink:href="src/Components/Auth/useAuth.tsx" xlink:title="useAuth.tsx">
-<path fill="#bbfeff" stroke="black" d="M267.5,-632C267.5,-632 208.5,-632 208.5,-632 205.5,-632 202.5,-629 202.5,-626 202.5,-626 202.5,-620 202.5,-620 202.5,-617 205.5,-614 208.5,-614 208.5,-614 267.5,-614 267.5,-614 270.5,-614 273.5,-617 273.5,-620 273.5,-620 273.5,-626 273.5,-626 273.5,-629 270.5,-632 267.5,-632"/>
-<text text-anchor="start" x="210.5" y="-620.8" font-family="Helvetica,sans-Serif" font-size="9.00">useAuth.tsx</text>
+<path fill="#bbfeff" stroke="black" d="M661.5,-60.71C661.5,-60.71 602.5,-60.71 602.5,-60.71 599.5,-60.71 596.5,-57.71 596.5,-54.71 596.5,-54.71 596.5,-48.71 596.5,-48.71 596.5,-45.71 599.5,-42.71 602.5,-42.71 602.5,-42.71 661.5,-42.71 661.5,-42.71 664.5,-42.71 667.5,-45.71 667.5,-48.71 667.5,-48.71 667.5,-54.71 667.5,-54.71 667.5,-57.71 664.5,-60.71 661.5,-60.71"/>
+<text text-anchor="start" x="604.5" y="-49.51" font-family="Helvetica,sans-Serif" font-size="9.00">useAuth.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Auth/index.tsx&#45;&gt;src/Components/Auth/useAuth.tsx -->
 <g id="edge13" class="edge">
 <title>src/Components/Auth/index.tsx&#45;&gt;src/Components/Auth/useAuth.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M163.71,-587.06C171.77,-593.55 183.32,-602.14 194.5,-608 196.84,-609.23 199.3,-610.39 201.81,-611.48"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="201.37,-613.58 207.72,-613.92 202.97,-609.69 201.37,-613.58"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M505.02,-87.64C522.27,-81.32 546.13,-72.93 567.5,-66.71 574.72,-64.61 582.47,-62.59 589.99,-60.75"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="590.89,-62.7 596.23,-59.25 589.9,-58.62 590.89,-62.7"/>
 </g>
 <!-- src/Components/Gaming/Modal.tsx -->
 <g id="node14" class="node">
 <title>src/Components/Gaming/Modal.tsx</title>
 <g id="a_node14"><a xlink:href="src/Components/Gaming/Modal.tsx" xlink:title="Modal.tsx">
-<path fill="#bbfeff" stroke="black" d="M261.5,-482C261.5,-482 214.5,-482 214.5,-482 211.5,-482 208.5,-479 208.5,-476 208.5,-476 208.5,-470 208.5,-470 208.5,-467 211.5,-464 214.5,-464 214.5,-464 261.5,-464 261.5,-464 264.5,-464 267.5,-467 267.5,-470 267.5,-470 267.5,-476 267.5,-476 267.5,-479 264.5,-482 261.5,-482"/>
-<text text-anchor="start" x="216.5" y="-470.8" font-family="Helvetica,sans-Serif" font-size="9.00">Modal.tsx</text>
+<path fill="#bbfeff" stroke="black" d="M258.5,-858.71C258.5,-858.71 211.5,-858.71 211.5,-858.71 208.5,-858.71 205.5,-855.71 205.5,-852.71 205.5,-852.71 205.5,-846.71 205.5,-846.71 205.5,-843.71 208.5,-840.71 211.5,-840.71 211.5,-840.71 258.5,-840.71 258.5,-840.71 261.5,-840.71 264.5,-843.71 264.5,-846.71 264.5,-846.71 264.5,-852.71 264.5,-852.71 264.5,-855.71 261.5,-858.71 258.5,-858.71"/>
+<text text-anchor="start" x="213.5" y="-847.51" font-family="Helvetica,sans-Serif" font-size="9.00">Modal.tsx</text>
 </a>
 </g>
 </g>
@@ -287,8 +292,8 @@
 <g id="node15" class="node">
 <title>src/Components/Gaming/Quests.tsx</title>
 <g id="a_node15"><a xlink:href="src/Components/Gaming/Quests.tsx" xlink:title="Quests.tsx">
-<path fill="#bbfeff" stroke="black" d="M264,-512C264,-512 212,-512 212,-512 209,-512 206,-509 206,-506 206,-506 206,-500 206,-500 206,-497 209,-494 212,-494 212,-494 264,-494 264,-494 267,-494 270,-497 270,-500 270,-500 270,-506 270,-506 270,-509 267,-512 264,-512"/>
-<text text-anchor="start" x="214" y="-500.8" font-family="Helvetica,sans-Serif" font-size="9.00">Quests.tsx</text>
+<path fill="#bbfeff" stroke="black" d="M261,-888.71C261,-888.71 209,-888.71 209,-888.71 206,-888.71 203,-885.71 203,-882.71 203,-882.71 203,-876.71 203,-876.71 203,-873.71 206,-870.71 209,-870.71 209,-870.71 261,-870.71 261,-870.71 264,-870.71 267,-873.71 267,-876.71 267,-876.71 267,-882.71 267,-882.71 267,-885.71 264,-888.71 261,-888.71"/>
+<text text-anchor="start" x="211" y="-877.51" font-family="Helvetica,sans-Serif" font-size="9.00">Quests.tsx</text>
 </a>
 </g>
 </g>
@@ -296,535 +301,655 @@
 <g id="node16" class="node">
 <title>src/Components/Gaming/index.tsx</title>
 <g id="a_node16"><a xlink:href="src/Components/Gaming/index.tsx" xlink:title="index.tsx">
-<path fill="#bbfeff" stroke="black" d="M175,-497C175,-497 129,-497 129,-497 126,-497 123,-494 123,-491 123,-491 123,-485 123,-485 123,-482 126,-479 129,-479 129,-479 175,-479 175,-479 178,-479 181,-482 181,-485 181,-485 181,-491 181,-491 181,-494 178,-497 175,-497"/>
-<text text-anchor="start" x="131" y="-485.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
+<path fill="#bbfeff" stroke="black" d="M175,-858.71C175,-858.71 129,-858.71 129,-858.71 126,-858.71 123,-855.71 123,-852.71 123,-852.71 123,-846.71 123,-846.71 123,-843.71 126,-840.71 129,-840.71 129,-840.71 175,-840.71 175,-840.71 178,-840.71 181,-843.71 181,-846.71 181,-846.71 181,-852.71 181,-852.71 181,-855.71 178,-858.71 175,-858.71"/>
+<text text-anchor="start" x="131" y="-847.51" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Gaming/index.tsx&#45;&gt;src/Components/Gaming/Modal.tsx -->
 <g id="edge14" class="edge">
 <title>src/Components/Gaming/index.tsx&#45;&gt;src/Components/Gaming/Modal.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.44,-482.92C188.07,-481.74 195.21,-480.46 202.08,-479.23"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="202.77,-481.25 208.3,-478.12 202.03,-477.11 202.77,-481.25"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.33,-849.71C187.03,-849.71 193.07,-849.71 198.97,-849.71"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="199.28,-851.81 205.27,-849.71 199.27,-847.61 199.28,-851.81"/>
 </g>
 <!-- src/Components/Gaming/index.tsx&#45;&gt;src/Components/Gaming/Quests.tsx -->
 <g id="edge15" class="edge">
 <title>src/Components/Gaming/index.tsx&#45;&gt;src/Components/Gaming/Quests.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.44,-493.08C187.36,-494.14 193.69,-495.27 199.88,-496.37"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="199.72,-498.48 206,-497.46 200.46,-494.34 199.72,-498.48"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M177.3,-858.72C185.56,-861.77 194.89,-865.23 203.56,-868.44"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="203.08,-870.5 209.43,-870.62 204.54,-866.56 203.08,-870.5"/>
 </g>
 <!-- src/Components/Input/TextAreaInput.tsx -->
 <g id="node17" class="node">
 <title>src/Components/Input/TextAreaInput.tsx</title>
 <g id="a_node17"><a xlink:href="src/Components/Input/TextAreaInput.tsx" xlink:title="TextAreaInput.tsx">
-<path fill="#bbfeff" stroke="black" d="M400,-490C400,-490 316,-490 316,-490 313,-490 310,-487 310,-484 310,-484 310,-478 310,-478 310,-475 313,-472 316,-472 316,-472 400,-472 400,-472 403,-472 406,-475 406,-478 406,-478 406,-484 406,-484 406,-487 403,-490 400,-490"/>
-<text text-anchor="start" x="318" y="-478.8" font-family="Helvetica,sans-Serif" font-size="9.00">TextAreaInput.tsx</text>
+<path fill="#bbfeff" stroke="black" d="M794.5,-344.71C794.5,-344.71 710.5,-344.71 710.5,-344.71 707.5,-344.71 704.5,-341.71 704.5,-338.71 704.5,-338.71 704.5,-332.71 704.5,-332.71 704.5,-329.71 707.5,-326.71 710.5,-326.71 710.5,-326.71 794.5,-326.71 794.5,-326.71 797.5,-326.71 800.5,-329.71 800.5,-332.71 800.5,-332.71 800.5,-338.71 800.5,-338.71 800.5,-341.71 797.5,-344.71 794.5,-344.71"/>
+<text text-anchor="start" x="712.5" y="-333.51" font-family="Helvetica,sans-Serif" font-size="9.00">TextAreaInput.tsx</text>
+</a>
+</g>
+</g>
+<!-- src/Components/Input/index.tsx -->
+<g id="node18" class="node">
+<title>src/Components/Input/index.tsx</title>
+<g id="a_node18"><a xlink:href="src/Components/Input/index.tsx" xlink:title="index.tsx">
+<path fill="#bbfeff" stroke="black" d="M655,-344.71C655,-344.71 609,-344.71 609,-344.71 606,-344.71 603,-341.71 603,-338.71 603,-338.71 603,-332.71 603,-332.71 603,-329.71 606,-326.71 609,-326.71 609,-326.71 655,-326.71 655,-326.71 658,-326.71 661,-329.71 661,-332.71 661,-332.71 661,-338.71 661,-338.71 661,-341.71 658,-344.71 655,-344.71"/>
+<text text-anchor="start" x="611" y="-333.51" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
+</a>
+</g>
+</g>
+<!-- src/Components/Input/index.tsx&#45;&gt;src/Components/Input/TextInput.tsx -->
+<g id="edge17" class="edge">
+<title>src/Components/Input/index.tsx&#45;&gt;src/Components/Input/TextInput.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M661.08,-328.6C675.59,-324.93 693.58,-320.38 709.69,-316.3"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="710.23,-318.33 715.53,-314.82 709.19,-314.26 710.23,-318.33"/>
+</g>
+<!-- src/Components/Input/index.tsx&#45;&gt;src/Components/Input/TextAreaInput.tsx -->
+<g id="edge16" class="edge">
+<title>src/Components/Input/index.tsx&#45;&gt;src/Components/Input/TextAreaInput.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M661.08,-335.71C672.14,-335.71 685.22,-335.71 697.95,-335.71"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="698.16,-337.81 704.16,-335.71 698.16,-333.61 698.16,-337.81"/>
+</g>
+<!-- src/Components/Map/ItemForm.tsx -->
+<g id="node19" class="node">
+<title>src/Components/Map/ItemForm.tsx</title>
+<g id="a_node19"><a xlink:href="src/Components/Map/ItemForm.tsx" xlink:title="ItemForm.tsx">
+<path fill="#bbfeff" stroke="black" d="M267.5,-404.71C267.5,-404.71 202.5,-404.71 202.5,-404.71 199.5,-404.71 196.5,-401.71 196.5,-398.71 196.5,-398.71 196.5,-392.71 196.5,-392.71 196.5,-389.71 199.5,-386.71 202.5,-386.71 202.5,-386.71 267.5,-386.71 267.5,-386.71 270.5,-386.71 273.5,-389.71 273.5,-392.71 273.5,-392.71 273.5,-398.71 273.5,-398.71 273.5,-401.71 270.5,-404.71 267.5,-404.71"/>
+<text text-anchor="start" x="204.5" y="-393.51" font-family="Helvetica,sans-Serif" font-size="9.00">ItemForm.tsx</text>
+</a>
+</g>
+</g>
+<!-- src/Components/Map/ItemView.tsx -->
+<g id="node20" class="node">
+<title>src/Components/Map/ItemView.tsx</title>
+<g id="a_node20"><a xlink:href="src/Components/Map/ItemView.tsx" xlink:title="ItemView.tsx">
+<path fill="#bbfeff" stroke="black" d="M266,-434.71C266,-434.71 204,-434.71 204,-434.71 201,-434.71 198,-431.71 198,-428.71 198,-428.71 198,-422.71 198,-422.71 198,-419.71 201,-416.71 204,-416.71 204,-416.71 266,-416.71 266,-416.71 269,-416.71 272,-419.71 272,-422.71 272,-422.71 272,-428.71 272,-428.71 272,-431.71 269,-434.71 266,-434.71"/>
+<text text-anchor="start" x="206" y="-423.51" font-family="Helvetica,sans-Serif" font-size="9.00">ItemView.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Layer.tsx -->
-<g id="node18" class="node">
+<g id="node21" class="node">
 <title>src/Components/Map/Layer.tsx</title>
-<g id="a_node18"><a xlink:href="src/Components/Map/Layer.tsx" xlink:title="Layer.tsx">
-<path fill="#bbfeff" stroke="black" d="M260.5,-316C260.5,-316 215.5,-316 215.5,-316 212.5,-316 209.5,-313 209.5,-310 209.5,-310 209.5,-304 209.5,-304 209.5,-301 212.5,-298 215.5,-298 215.5,-298 260.5,-298 260.5,-298 263.5,-298 266.5,-301 266.5,-304 266.5,-304 266.5,-310 266.5,-310 266.5,-313 263.5,-316 260.5,-316"/>
-<text text-anchor="start" x="217.5" y="-304.8" font-family="Helvetica,sans-Serif" font-size="9.00">Layer.tsx</text>
+<g id="a_node21"><a xlink:href="src/Components/Map/Layer.tsx" xlink:title="Layer.tsx">
+<path fill="#bbfeff" stroke="black" d="M257.5,-550.71C257.5,-550.71 212.5,-550.71 212.5,-550.71 209.5,-550.71 206.5,-547.71 206.5,-544.71 206.5,-544.71 206.5,-538.71 206.5,-538.71 206.5,-535.71 209.5,-532.71 212.5,-532.71 212.5,-532.71 257.5,-532.71 257.5,-532.71 260.5,-532.71 263.5,-535.71 263.5,-538.71 263.5,-538.71 263.5,-544.71 263.5,-544.71 263.5,-547.71 260.5,-550.71 257.5,-550.71"/>
+<text text-anchor="start" x="214.5" y="-539.51" font-family="Helvetica,sans-Serif" font-size="9.00">Layer.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Utils/MarkerIconFactory.ts -->
-<g id="node19" class="node">
+<g id="node22" class="node">
 <title>src/Utils/MarkerIconFactory.ts</title>
-<g id="a_node19"><a xlink:href="src/Utils/MarkerIconFactory.ts" xlink:title="MarkerIconFactory.ts">
-<path fill="#ddfeff" stroke="black" d="M650.5,-928C650.5,-928 552.5,-928 552.5,-928 549.5,-928 546.5,-925 546.5,-922 546.5,-922 546.5,-916 546.5,-916 546.5,-913 549.5,-910 552.5,-910 552.5,-910 650.5,-910 650.5,-910 653.5,-910 656.5,-913 656.5,-916 656.5,-916 656.5,-922 656.5,-922 656.5,-925 653.5,-928 650.5,-928"/>
-<text text-anchor="start" x="554.5" y="-916.8" font-family="Helvetica,sans-Serif" font-size="9.00">MarkerIconFactory.ts</text>
+<g id="a_node22"><a xlink:href="src/Utils/MarkerIconFactory.ts" xlink:title="MarkerIconFactory.ts">
+<path fill="#ddfeff" stroke="black" d="M681,-1184.71C681,-1184.71 583,-1184.71 583,-1184.71 580,-1184.71 577,-1181.71 577,-1178.71 577,-1178.71 577,-1172.71 577,-1172.71 577,-1169.71 580,-1166.71 583,-1166.71 583,-1166.71 681,-1166.71 681,-1166.71 684,-1166.71 687,-1169.71 687,-1172.71 687,-1172.71 687,-1178.71 687,-1178.71 687,-1181.71 684,-1184.71 681,-1184.71"/>
+<text text-anchor="start" x="585" y="-1173.51" font-family="Helvetica,sans-Serif" font-size="9.00">MarkerIconFactory.ts</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Layer.tsx&#45;&gt;src/Utils/MarkerIconFactory.ts -->
-<g id="edge16" class="edge">
+<g id="edge18" class="edge">
 <title>src/Components/Map/Layer.tsx&#45;&gt;src/Utils/MarkerIconFactory.ts</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M243.37,-316.29C253.8,-339 279.97,-399.39 289.5,-453 291.56,-464.57 289.71,-867.2 297.5,-876 360.47,-947.17 483.35,-939.88 551.69,-929.03"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="552.14,-931.08 557.72,-928.04 551.46,-926.94 552.14,-931.08"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M238.47,-550.72C245.76,-577.82 267.25,-661.11 275.5,-731.71 277.47,-748.61 276.36,-1022.52 284,-1037.71 336.28,-1141.69 485.85,-1167.7 570.57,-1173.96"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="570.68,-1176.08 576.81,-1174.4 570.97,-1171.89 570.68,-1176.08"/>
 </g>
 <!-- src/Components/Map/hooks/useItems.tsx -->
-<g id="node20" class="node">
+<g id="node23" class="node">
 <title>src/Components/Map/hooks/useItems.tsx</title>
-<g id="a_node20"><a xlink:href="src/Components/Map/hooks/useItems.tsx" xlink:title="useItems.tsx">
-<path fill="#bbfeff" stroke="black" d="M632.5,-262C632.5,-262 570.5,-262 570.5,-262 567.5,-262 564.5,-259 564.5,-256 564.5,-256 564.5,-250 564.5,-250 564.5,-247 567.5,-244 570.5,-244 570.5,-244 632.5,-244 632.5,-244 635.5,-244 638.5,-247 638.5,-250 638.5,-250 638.5,-256 638.5,-256 638.5,-259 635.5,-262 632.5,-262"/>
-<text text-anchor="start" x="572.5" y="-250.8" font-family="Helvetica,sans-Serif" font-size="9.00">useItems.tsx</text>
+<g id="a_node23"><a xlink:href="src/Components/Map/hooks/useItems.tsx" xlink:title="useItems.tsx">
+<path fill="#bbfeff" stroke="black" d="M663,-678.71C663,-678.71 601,-678.71 601,-678.71 598,-678.71 595,-675.71 595,-672.71 595,-672.71 595,-666.71 595,-666.71 595,-663.71 598,-660.71 601,-660.71 601,-660.71 663,-660.71 663,-660.71 666,-660.71 669,-663.71 669,-666.71 669,-666.71 669,-672.71 669,-672.71 669,-675.71 666,-678.71 663,-678.71"/>
+<text text-anchor="start" x="603" y="-667.51" font-family="Helvetica,sans-Serif" font-size="9.00">useItems.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/hooks/useItems.tsx -->
-<g id="edge17" class="edge">
+<g id="edge19" class="edge">
 <title>src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/hooks/useItems.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M266.69,-302.25C274.54,-300.02 282.78,-296.75 289.5,-292 294.44,-288.51 292.26,-284.01 297.5,-281 379.89,-233.71 496.04,-239.04 557.87,-246.4"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="557.83,-248.51 564.04,-247.16 558.34,-244.34 557.83,-248.51"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M240.01,-532.67C246.76,-518.69 261.88,-492.35 284,-481.71 394.36,-428.67 470.94,-397.16 559.5,-481.71 573.42,-495 555.21,-639.9 567.5,-654.71 572.86,-661.18 580.44,-665.15 588.5,-667.54"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="588.4,-669.68 594.73,-669.08 589.41,-665.6 588.4,-669.68"/>
 </g>
 <!-- src/Components/Map/hooks/useLayers.tsx -->
-<g id="node21" class="node">
+<g id="node24" class="node">
 <title>src/Components/Map/hooks/useLayers.tsx</title>
-<g id="a_node21"><a xlink:href="src/Components/Map/hooks/useLayers.tsx" xlink:title="useLayers.tsx">
-<path fill="#bbfeff" stroke="black" d="M634.5,-232C634.5,-232 568.5,-232 568.5,-232 565.5,-232 562.5,-229 562.5,-226 562.5,-226 562.5,-220 562.5,-220 562.5,-217 565.5,-214 568.5,-214 568.5,-214 634.5,-214 634.5,-214 637.5,-214 640.5,-217 640.5,-220 640.5,-220 640.5,-226 640.5,-226 640.5,-229 637.5,-232 634.5,-232"/>
-<text text-anchor="start" x="570.5" y="-220.8" font-family="Helvetica,sans-Serif" font-size="9.00">useLayers.tsx</text>
+<g id="a_node24"><a xlink:href="src/Components/Map/hooks/useLayers.tsx" xlink:title="useLayers.tsx">
+<path fill="#bbfeff" stroke="black" d="M665,-708.71C665,-708.71 599,-708.71 599,-708.71 596,-708.71 593,-705.71 593,-702.71 593,-702.71 593,-696.71 593,-696.71 593,-693.71 596,-690.71 599,-690.71 599,-690.71 665,-690.71 665,-690.71 668,-690.71 671,-693.71 671,-696.71 671,-696.71 671,-702.71 671,-702.71 671,-705.71 668,-708.71 665,-708.71"/>
+<text text-anchor="start" x="601" y="-697.51" font-family="Helvetica,sans-Serif" font-size="9.00">useLayers.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/hooks/useLayers.tsx -->
-<g id="edge18" class="edge">
+<g id="edge20" class="edge">
 <title>src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/hooks/useLayers.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M266.72,-304.47C275.15,-302.35 283.7,-298.59 289.5,-292 304.08,-275.44 281.17,-257.84 297.5,-243 334.32,-209.56 481.48,-214.55 556.32,-219.49"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="556.32,-221.59 562.45,-219.9 556.61,-217.4 556.32,-221.59"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M241.43,-532.55C249.14,-520.54 264.52,-500.02 284,-491.71 314.04,-478.91 555.3,-495.49 559.5,-499.71 574,-514.31 554.39,-668.86 567.5,-684.71 572.51,-690.77 579.46,-694.64 586.93,-697.07"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="586.39,-699.1 592.73,-698.66 587.5,-695.05 586.39,-699.1"/>
 </g>
 <!-- src/Components/Map/hooks/useTags.tsx -->
-<g id="node22" class="node">
+<g id="node25" class="node">
 <title>src/Components/Map/hooks/useTags.tsx</title>
-<g id="a_node22"><a xlink:href="src/Components/Map/hooks/useTags.tsx" xlink:title="useTags.tsx">
-<path fill="#bbfeff" stroke="black" d="M629.5,-202C629.5,-202 573.5,-202 573.5,-202 570.5,-202 567.5,-199 567.5,-196 567.5,-196 567.5,-190 567.5,-190 567.5,-187 570.5,-184 573.5,-184 573.5,-184 629.5,-184 629.5,-184 632.5,-184 635.5,-187 635.5,-190 635.5,-190 635.5,-196 635.5,-196 635.5,-199 632.5,-202 629.5,-202"/>
-<text text-anchor="start" x="575.5" y="-190.8" font-family="Helvetica,sans-Serif" font-size="9.00">useTags.tsx</text>
+<g id="a_node25"><a xlink:href="src/Components/Map/hooks/useTags.tsx" xlink:title="useTags.tsx">
+<path fill="#bbfeff" stroke="black" d="M660,-648.71C660,-648.71 604,-648.71 604,-648.71 601,-648.71 598,-645.71 598,-642.71 598,-642.71 598,-636.71 598,-636.71 598,-633.71 601,-630.71 604,-630.71 604,-630.71 660,-630.71 660,-630.71 663,-630.71 666,-633.71 666,-636.71 666,-636.71 666,-642.71 666,-642.71 666,-645.71 663,-648.71 660,-648.71"/>
+<text text-anchor="start" x="606" y="-637.51" font-family="Helvetica,sans-Serif" font-size="9.00">useTags.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/hooks/useTags.tsx -->
-<g id="edge19" class="edge">
+<g id="edge21" class="edge">
 <title>src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/hooks/useTags.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M266.69,-304.73C275.22,-302.64 283.84,-298.83 289.5,-292 300.62,-278.59 284.98,-226.12 297.5,-214 306.84,-204.97 481.43,-197.39 561.26,-194.39"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="561.39,-196.49 567.3,-194.16 561.23,-192.29 561.39,-196.49"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M242.53,-532.58C251.51,-519.54 267.47,-494.5 275.5,-470.71 279.73,-458.16 273.99,-420.39 284,-411.71 307.14,-391.67 534.83,-393.59 559.5,-411.71 629.32,-462.99 632.81,-582.33 631.72,-624.57"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="629.62,-624.59 631.52,-630.66 633.82,-624.73 629.62,-624.59"/>
 </g>
 <!-- src/Components/Map/Subcomponents/ItemFormPopup.tsx -->
-<g id="node23" class="node">
+<g id="node26" class="node">
 <title>src/Components/Map/Subcomponents/ItemFormPopup.tsx</title>
-<g id="a_node23"><a xlink:href="src/Components/Map/Subcomponents/ItemFormPopup.tsx" xlink:title="ItemFormPopup.tsx">
-<path fill="#bbfeff" stroke="black" d="M404.5,-340C404.5,-340 311.5,-340 311.5,-340 308.5,-340 305.5,-337 305.5,-334 305.5,-334 305.5,-328 305.5,-328 305.5,-325 308.5,-322 311.5,-322 311.5,-322 404.5,-322 404.5,-322 407.5,-322 410.5,-325 410.5,-328 410.5,-328 410.5,-334 410.5,-334 410.5,-337 407.5,-340 404.5,-340"/>
-<text text-anchor="start" x="313.5" y="-328.8" font-family="Helvetica,sans-Serif" font-size="9.00">ItemFormPopup.tsx</text>
+<g id="a_node26"><a xlink:href="src/Components/Map/Subcomponents/ItemFormPopup.tsx" xlink:title="ItemFormPopup.tsx">
+<path fill="#bbfeff" stroke="black" d="M391,-674.71C391,-674.71 298,-674.71 298,-674.71 295,-674.71 292,-671.71 292,-668.71 292,-668.71 292,-662.71 292,-662.71 292,-659.71 295,-656.71 298,-656.71 298,-656.71 391,-656.71 391,-656.71 394,-656.71 397,-659.71 397,-662.71 397,-662.71 397,-668.71 397,-668.71 397,-671.71 394,-674.71 391,-674.71"/>
+<text text-anchor="start" x="300" y="-663.51" font-family="Helvetica,sans-Serif" font-size="9.00">ItemFormPopup.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/Subcomponents/ItemFormPopup.tsx -->
-<g id="edge20" class="edge">
+<g id="edge22" class="edge">
 <title>src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/Subcomponents/ItemFormPopup.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M266.67,-312.63C278.48,-315.03 292.66,-317.91 306.24,-320.68"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="306.13,-322.8 312.43,-321.93 306.97,-318.68 306.13,-322.8"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M237.3,-550.93C240.77,-571.99 252.25,-623.89 284,-650.71 285.21,-651.74 286.48,-652.69 287.8,-653.58"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="286.88,-655.47 293.11,-656.71 289.01,-651.86 286.88,-655.47"/>
 </g>
 <!-- src/Components/Map/Subcomponents/ItemViewPopup.tsx -->
-<g id="node24" class="node">
+<g id="node27" class="node">
 <title>src/Components/Map/Subcomponents/ItemViewPopup.tsx</title>
-<g id="a_node24"><a xlink:href="src/Components/Map/Subcomponents/ItemViewPopup.tsx" xlink:title="ItemViewPopup.tsx">
-<path fill="#bbfeff" stroke="black" d="M404,-370C404,-370 312,-370 312,-370 309,-370 306,-367 306,-364 306,-364 306,-358 306,-358 306,-355 309,-352 312,-352 312,-352 404,-352 404,-352 407,-352 410,-355 410,-358 410,-358 410,-364 410,-364 410,-367 407,-370 404,-370"/>
-<text text-anchor="start" x="314" y="-358.8" font-family="Helvetica,sans-Serif" font-size="9.00">ItemViewPopup.tsx</text>
+<g id="a_node27"><a xlink:href="src/Components/Map/Subcomponents/ItemViewPopup.tsx" xlink:title="ItemViewPopup.tsx">
+<path fill="#bbfeff" stroke="black" d="M390.5,-644.71C390.5,-644.71 298.5,-644.71 298.5,-644.71 295.5,-644.71 292.5,-641.71 292.5,-638.71 292.5,-638.71 292.5,-632.71 292.5,-632.71 292.5,-629.71 295.5,-626.71 298.5,-626.71 298.5,-626.71 390.5,-626.71 390.5,-626.71 393.5,-626.71 396.5,-629.71 396.5,-632.71 396.5,-632.71 396.5,-638.71 396.5,-638.71 396.5,-641.71 393.5,-644.71 390.5,-644.71"/>
+<text text-anchor="start" x="300.5" y="-633.51" font-family="Helvetica,sans-Serif" font-size="9.00">ItemViewPopup.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/Subcomponents/ItemViewPopup.tsx -->
-<g id="edge21" class="edge">
+<g id="edge23" class="edge">
 <title>src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/Subcomponents/ItemViewPopup.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M250.4,-316.33C261.72,-325.16 279.87,-338.18 297.5,-346 300.89,-347.5 304.45,-348.87 308.08,-350.12"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="307.48,-352.13 313.83,-351.98 308.77,-348.14 307.48,-352.13"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M238.73,-550.93C244.28,-567.96 258.56,-604.34 284,-622.71 284.96,-623.41 285.96,-624.07 286.98,-624.7"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="285.99,-626.55 292.27,-627.55 287.99,-622.85 285.99,-626.55"/>
+</g>
+<!-- src/Components/Map/Subcomponents/ItemFormPopup.tsx&#45;&gt;src/Components/Input/TextInput.tsx -->
+<g id="edge28" class="edge">
+<title>src/Components/Map/Subcomponents/ItemFormPopup.tsx&#45;&gt;src/Components/Input/TextInput.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M394.05,-656.69C396.45,-655 398.64,-653.03 400.5,-650.71 411.05,-637.64 402.12,-515.26 408.5,-499.71 448.92,-401.28 472.29,-368.23 567.5,-320.71 611.73,-298.64 669.46,-297.72 708.37,-300.48"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="708.3,-302.58 714.44,-300.95 708.62,-298.39 708.3,-302.58"/>
+</g>
+<!-- src/Components/Map/Subcomponents/ItemFormPopup.tsx&#45;&gt;src/Components/Input/TextAreaInput.tsx -->
+<g id="edge27" class="edge">
+<title>src/Components/Map/Subcomponents/ItemFormPopup.tsx&#45;&gt;src/Components/Input/TextAreaInput.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M393.08,-674.84C395.79,-676.49 398.3,-678.44 400.5,-680.71 411.28,-691.88 397.05,-704.23 408.5,-714.71 503.18,-801.46 599.74,-822.13 696.5,-737.71 755.77,-686 753.49,-418.57 751.94,-351.16"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="754.03,-350.88 751.78,-344.94 749.83,-350.99 754.03,-350.88"/>
 </g>
 <!-- src/Components/Map/Subcomponents/ItemFormPopup.tsx&#45;&gt;src/Components/Map/hooks/useItems.tsx -->
-<g id="edge26" class="edge">
+<g id="edge29" class="edge">
 <title>src/Components/Map/Subcomponents/ItemFormPopup.tsx&#45;&gt;src/Components/Map/hooks/useItems.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M405.08,-321.98C408.28,-320.31 411.31,-318.33 414,-316 424.98,-306.48 415.47,-294.84 427,-286 463.37,-258.13 484.06,-279.94 529,-271 539.6,-268.89 550.99,-266.22 561.48,-263.58"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="562.26,-265.55 567.55,-262.03 561.22,-261.48 562.26,-265.55"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M392.68,-674.83C395.52,-676.49 398.17,-678.43 400.5,-680.71 409.45,-689.47 398.47,-700.23 408.5,-707.71 421.94,-717.75 545.83,-717.44 559.5,-707.71 568.32,-701.44 559.46,-691.96 567.5,-684.71 573.47,-679.33 581,-675.78 588.77,-673.46"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="589.46,-675.45 594.74,-671.91 588.41,-671.39 589.46,-675.45"/>
 </g>
 <!-- src/types.ts -->
-<g id="node28" class="node">
+<g id="node30" class="node">
 <title>src/types.ts</title>
-<g id="a_node28"><a xlink:href="src/types.ts" xlink:title="types.ts">
-<path fill="#ddfeff" stroke="black" d="M495,-830C495,-830 453,-830 453,-830 450,-830 447,-827 447,-824 447,-824 447,-818 447,-818 447,-815 450,-812 453,-812 453,-812 495,-812 495,-812 498,-812 501,-815 501,-818 501,-818 501,-824 501,-824 501,-827 498,-830 495,-830"/>
-<text text-anchor="start" x="455.5" y="-818.8" font-family="Helvetica,sans-Serif" font-size="9.00">types.ts</text>
+<g id="a_node30"><a xlink:href="src/types.ts" xlink:title="types.ts">
+<path fill="#ddfeff" stroke="black" d="M501,-1086.71C501,-1086.71 459,-1086.71 459,-1086.71 456,-1086.71 453,-1083.71 453,-1080.71 453,-1080.71 453,-1074.71 453,-1074.71 453,-1071.71 456,-1068.71 459,-1068.71 459,-1068.71 501,-1068.71 501,-1068.71 504,-1068.71 507,-1071.71 507,-1074.71 507,-1074.71 507,-1080.71 507,-1080.71 507,-1083.71 504,-1086.71 501,-1086.71"/>
+<text text-anchor="start" x="461.5" y="-1075.51" font-family="Helvetica,sans-Serif" font-size="9.00">types.ts</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Subcomponents/ItemFormPopup.tsx&#45;&gt;src/types.ts -->
-<g id="edge25" class="edge">
+<g id="edge26" class="edge">
 <title>src/Components/Map/Subcomponents/ItemFormPopup.tsx&#45;&gt;src/types.ts</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M408.09,-340.32C410.29,-341.94 412.29,-343.82 414,-346 445,-385.4 400.4,-754.51 427,-797 430.51,-802.61 435.8,-806.98 441.55,-810.35"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="440.64,-812.25 446.93,-813.18 442.6,-808.53 440.64,-812.25"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M394.61,-675.02C396.8,-676.65 398.79,-678.53 400.5,-680.71 412.72,-696.34 398.32,-1020.68 408.5,-1037.71 417.04,-1052.01 432.74,-1061.63 447.16,-1067.85"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="446.47,-1069.83 452.82,-1070.15 448.05,-1065.94 446.47,-1069.83"/>
 </g>
-<!-- src/Components/Map/Subcomponents/HeaderView.tsx -->
-<g id="node27" class="node">
-<title>src/Components/Map/Subcomponents/HeaderView.tsx</title>
-<g id="a_node27"><a xlink:href="src/Components/Map/Subcomponents/HeaderView.tsx" xlink:title="HeaderView.tsx">
-<path fill="#bbfeff" stroke="black" d="M511,-310C511,-310 437,-310 437,-310 434,-310 431,-307 431,-304 431,-304 431,-298 431,-298 431,-295 434,-292 437,-292 437,-292 511,-292 511,-292 514,-292 517,-295 517,-298 517,-298 517,-304 517,-304 517,-307 514,-310 511,-310"/>
-<text text-anchor="start" x="439" y="-298.8" font-family="Helvetica,sans-Serif" font-size="9.00">HeaderView.tsx</text>
+<!-- src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx -->
+<g id="node31" class="node">
+<title>src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx</title>
+<g id="a_node31"><a xlink:href="src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx" xlink:title="HeaderView.tsx">
+<path fill="#bbfeff" stroke="black" d="M517,-678.71C517,-678.71 443,-678.71 443,-678.71 440,-678.71 437,-675.71 437,-672.71 437,-672.71 437,-666.71 437,-666.71 437,-663.71 440,-660.71 443,-660.71 443,-660.71 517,-660.71 517,-660.71 520,-660.71 523,-663.71 523,-666.71 523,-666.71 523,-672.71 523,-672.71 523,-675.71 520,-678.71 517,-678.71"/>
+<text text-anchor="start" x="445" y="-667.51" font-family="Helvetica,sans-Serif" font-size="9.00">HeaderView.tsx</text>
 </a>
 </g>
 </g>
-<!-- src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Components/Map/Subcomponents/HeaderView.tsx -->
-<g id="edge27" class="edge">
-<title>src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Components/Map/Subcomponents/HeaderView.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M405.08,-351.98C408.28,-350.31 411.31,-348.33 414,-346 424.98,-336.48 416.25,-325.78 427,-316 428.01,-315.08 429.08,-314.22 430.19,-313.41"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="431.36,-315.15 435.32,-310.18 429.13,-311.6 431.36,-315.15"/>
+<!-- src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx -->
+<g id="edge36" class="edge">
+<title>src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M382.51,-644.73C388.59,-646.52 394.77,-648.52 400.5,-650.71 404.21,-652.13 404.75,-653.4 408.5,-654.71 415.51,-657.17 423.07,-659.29 430.53,-661.1"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="430.44,-663.24 436.76,-662.55 431.4,-659.15 430.44,-663.24"/>
 </g>
-<!-- src/Components/Map/Subcomponents/StartEndView.tsx -->
-<g id="node29" class="node">
-<title>src/Components/Map/Subcomponents/StartEndView.tsx</title>
-<g id="a_node29"><a xlink:href="src/Components/Map/Subcomponents/StartEndView.tsx" xlink:title="StartEndView.tsx">
-<path fill="#bbfeff" stroke="black" d="M515,-340C515,-340 433,-340 433,-340 430,-340 427,-337 427,-334 427,-334 427,-328 427,-328 427,-325 430,-322 433,-322 433,-322 515,-322 515,-322 518,-322 521,-325 521,-328 521,-328 521,-334 521,-334 521,-337 518,-340 515,-340"/>
-<text text-anchor="start" x="435" y="-328.8" font-family="Helvetica,sans-Serif" font-size="9.00">StartEndView.tsx</text>
+<!-- src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx -->
+<g id="node36" class="node">
+<title>src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx</title>
+<g id="a_node36"><a xlink:href="src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx" xlink:title="TextView.tsx">
+<path fill="#bbfeff" stroke="black" d="M509.5,-648.71C509.5,-648.71 450.5,-648.71 450.5,-648.71 447.5,-648.71 444.5,-645.71 444.5,-642.71 444.5,-642.71 444.5,-636.71 444.5,-636.71 444.5,-633.71 447.5,-630.71 450.5,-630.71 450.5,-630.71 509.5,-630.71 509.5,-630.71 512.5,-630.71 515.5,-633.71 515.5,-636.71 515.5,-636.71 515.5,-642.71 515.5,-642.71 515.5,-645.71 512.5,-648.71 509.5,-648.71"/>
+<text text-anchor="start" x="452.5" y="-637.51" font-family="Helvetica,sans-Serif" font-size="9.00">TextView.tsx</text>
 </a>
 </g>
 </g>
-<!-- src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Components/Map/Subcomponents/StartEndView.tsx -->
-<g id="edge28" class="edge">
-<title>src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Components/Map/Subcomponents/StartEndView.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M393.2,-352C405.6,-348.74 419.72,-345.02 432.61,-341.63"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="433.16,-343.66 438.43,-340.1 432.09,-339.59 433.16,-343.66"/>
-</g>
-<!-- src/Components/Map/Subcomponents/TextView.tsx -->
-<g id="node30" class="node">
-<title>src/Components/Map/Subcomponents/TextView.tsx</title>
-<g id="a_node30"><a xlink:href="src/Components/Map/Subcomponents/TextView.tsx" xlink:title="TextView.tsx">
-<path fill="#bbfeff" stroke="black" d="M503.5,-370C503.5,-370 444.5,-370 444.5,-370 441.5,-370 438.5,-367 438.5,-364 438.5,-364 438.5,-358 438.5,-358 438.5,-355 441.5,-352 444.5,-352 444.5,-352 503.5,-352 503.5,-352 506.5,-352 509.5,-355 509.5,-358 509.5,-358 509.5,-364 509.5,-364 509.5,-367 506.5,-370 503.5,-370"/>
-<text text-anchor="start" x="446.5" y="-358.8" font-family="Helvetica,sans-Serif" font-size="9.00">TextView.tsx</text>
-</a>
-</g>
-</g>
-<!-- src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Components/Map/Subcomponents/TextView.tsx -->
-<g id="edge29" class="edge">
-<title>src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Components/Map/Subcomponents/TextView.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M410.33,-361C417.57,-361 424.93,-361 431.95,-361"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="432.27,-363.1 438.27,-361 432.27,-358.9 432.27,-363.1"/>
+<!-- src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx -->
+<g id="edge37" class="edge">
+<title>src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M396.73,-637.25C410.38,-637.66 424.95,-638.09 437.97,-638.48"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="438.17,-640.59 444.23,-638.67 438.3,-636.39 438.17,-640.59"/>
 </g>
 <!-- src/Components/Map/Subcomponents/AddButton.tsx -->
-<g id="node25" class="node">
+<g id="node28" class="node">
 <title>src/Components/Map/Subcomponents/AddButton.tsx</title>
-<g id="a_node25"><a xlink:href="src/Components/Map/Subcomponents/AddButton.tsx" xlink:title="AddButton.tsx">
-<path fill="#bbfeff" stroke="black" d="M393,-310C393,-310 323,-310 323,-310 320,-310 317,-307 317,-304 317,-304 317,-298 317,-298 317,-295 320,-292 323,-292 323,-292 393,-292 393,-292 396,-292 399,-295 399,-298 399,-298 399,-304 399,-304 399,-307 396,-310 393,-310"/>
-<text text-anchor="start" x="325" y="-298.8" font-family="Helvetica,sans-Serif" font-size="9.00">AddButton.tsx</text>
+<g id="a_node28"><a xlink:href="src/Components/Map/Subcomponents/AddButton.tsx" xlink:title="AddButton.tsx">
+<path fill="#bbfeff" stroke="black" d="M379.5,-704.71C379.5,-704.71 309.5,-704.71 309.5,-704.71 306.5,-704.71 303.5,-701.71 303.5,-698.71 303.5,-698.71 303.5,-692.71 303.5,-692.71 303.5,-689.71 306.5,-686.71 309.5,-686.71 309.5,-686.71 379.5,-686.71 379.5,-686.71 382.5,-686.71 385.5,-689.71 385.5,-692.71 385.5,-692.71 385.5,-698.71 385.5,-698.71 385.5,-701.71 382.5,-704.71 379.5,-704.71"/>
+<text text-anchor="start" x="311.5" y="-693.51" font-family="Helvetica,sans-Serif" font-size="9.00">AddButton.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Subcomponents/AddButton.tsx&#45;&gt;src/Components/Map/hooks/useLayers.tsx -->
-<g id="edge23" class="edge">
+<g id="edge25" class="edge">
 <title>src/Components/Map/Subcomponents/AddButton.tsx&#45;&gt;src/Components/Map/hooks/useLayers.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M399.05,-294.31C404.25,-292.65 409.37,-290.58 414,-288 421.14,-284.02 419.7,-278.67 427,-275 467.94,-254.42 493.49,-288.95 529,-260 537.06,-253.43 529.23,-244.91 537,-238 542.49,-233.12 549.27,-229.75 556.34,-227.43"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="557.13,-229.39 562.32,-225.73 555.98,-225.35 557.13,-229.39"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M385.69,-702.15C390.87,-703.85 395.95,-706 400.5,-708.71 405.1,-711.46 403.62,-715.52 408.5,-717.71 469.72,-745.21 492.9,-725.97 559.5,-717.71 571.62,-716.21 584.63,-713.33 596.19,-710.31"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="596.84,-712.31 602.09,-708.72 595.75,-708.25 596.84,-712.31"/>
 </g>
 <!-- src/Utils/DynamicHeroIcon.tsx -->
-<g id="node26" class="node">
+<g id="node29" class="node">
 <title>src/Utils/DynamicHeroIcon.tsx</title>
-<g id="a_node26"><a xlink:href="src/Utils/DynamicHeroIcon.tsx" xlink:title="DynamicHeroIcon.tsx">
-<path fill="#bbfeff" stroke="black" d="M652,-898C652,-898 551,-898 551,-898 548,-898 545,-895 545,-892 545,-892 545,-886 545,-886 545,-883 548,-880 551,-880 551,-880 652,-880 652,-880 655,-880 658,-883 658,-886 658,-886 658,-892 658,-892 658,-895 655,-898 652,-898"/>
-<text text-anchor="start" x="553" y="-886.8" font-family="Helvetica,sans-Serif" font-size="9.00">DynamicHeroIcon.tsx</text>
+<g id="a_node29"><a xlink:href="src/Utils/DynamicHeroIcon.tsx" xlink:title="DynamicHeroIcon.tsx">
+<path fill="#bbfeff" stroke="black" d="M682.5,-1154.71C682.5,-1154.71 581.5,-1154.71 581.5,-1154.71 578.5,-1154.71 575.5,-1151.71 575.5,-1148.71 575.5,-1148.71 575.5,-1142.71 575.5,-1142.71 575.5,-1139.71 578.5,-1136.71 581.5,-1136.71 581.5,-1136.71 682.5,-1136.71 682.5,-1136.71 685.5,-1136.71 688.5,-1139.71 688.5,-1142.71 688.5,-1142.71 688.5,-1148.71 688.5,-1148.71 688.5,-1151.71 685.5,-1154.71 682.5,-1154.71"/>
+<text text-anchor="start" x="583.5" y="-1143.51" font-family="Helvetica,sans-Serif" font-size="9.00">DynamicHeroIcon.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Subcomponents/AddButton.tsx&#45;&gt;src/Utils/DynamicHeroIcon.tsx -->
-<g id="edge22" class="edge">
-<title>src/Components/Map/Subcomponents/AddButton.tsx&#45;&gt;src/Utils/DynamicHeroIcon.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M399.08,-305.36C404.86,-307.7 410.15,-311.1 414,-316 445.94,-356.63 393.04,-742.03 427,-781 457.19,-815.65 497.5,-764.54 529,-798 552.28,-822.73 514.56,-848.51 537,-874 537.87,-874.99 538.79,-875.92 539.76,-876.79"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="538.89,-878.77 544.95,-880.71 541.43,-875.42 538.89,-878.77"/>
-</g>
-<!-- src/Components/Map/Subcomponents/HeaderView.tsx&#45;&gt;src/Components/Map/hooks/useItems.tsx -->
 <g id="edge24" class="edge">
-<title>src/Components/Map/Subcomponents/HeaderView.tsx&#45;&gt;src/Components/Map/hooks/useItems.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M503.45,-291.96C511.73,-289.21 520.77,-286.09 529,-283 544.22,-277.28 560.98,-270.28 574.46,-264.48"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="575.34,-266.39 580.01,-262.08 573.67,-262.54 575.34,-266.39"/>
+<title>src/Components/Map/Subcomponents/AddButton.tsx&#45;&gt;src/Utils/DynamicHeroIcon.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M385.53,-698.54C391.31,-700.67 396.62,-703.9 400.5,-708.71 414.77,-726.4 393.3,-1100.82 408.5,-1117.71 429.29,-1140.82 510.71,-1146 569.04,-1146.62"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="569.3,-1148.72 575.32,-1146.67 569.34,-1144.52 569.3,-1148.72"/>
 </g>
-<!-- src/Components/Map/Subcomponents/TextView.tsx&#45;&gt;src/Components/Map/hooks/useTags.tsx -->
+<!-- src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx&#45;&gt;src/Components/Map/hooks/useItems.tsx -->
+<g id="edge30" class="edge">
+<title>src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx&#45;&gt;src/Components/Map/hooks/useItems.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M523.18,-669.71C543.6,-669.71 568.06,-669.71 588.52,-669.71"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="588.73,-671.81 594.73,-669.71 588.73,-667.61 588.73,-671.81"/>
+</g>
+<!-- src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx -->
+<g id="node32" class="node">
+<title>src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx</title>
+<g id="a_node32"><a xlink:href="src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx" xlink:title="PopupStartEndInput.tsx">
+<path fill="#bbfeff" stroke="black" d="M537.5,-618.71C537.5,-618.71 422.5,-618.71 422.5,-618.71 419.5,-618.71 416.5,-615.71 416.5,-612.71 416.5,-612.71 416.5,-606.71 416.5,-606.71 416.5,-603.71 419.5,-600.71 422.5,-600.71 422.5,-600.71 537.5,-600.71 537.5,-600.71 540.5,-600.71 543.5,-603.71 543.5,-606.71 543.5,-606.71 543.5,-612.71 543.5,-612.71 543.5,-615.71 540.5,-618.71 537.5,-618.71"/>
+<text text-anchor="start" x="424.5" y="-607.51" font-family="Helvetica,sans-Serif" font-size="9.00">PopupStartEndInput.tsx</text>
+</a>
+</g>
+</g>
+<!-- src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx&#45;&gt;src/Components/Input/index.tsx -->
+<g id="edge31" class="edge">
+<title>src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx&#45;&gt;src/Components/Input/index.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M543.72,-604.57C549.51,-602.16 554.91,-598.95 559.5,-594.71 596.33,-560.74 621.7,-401.36 628.91,-351"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="631.01,-351.14 629.77,-344.9 626.85,-350.55 631.01,-351.14"/>
+</g>
+<!-- src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx -->
+<g id="node33" class="node">
+<title>src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx</title>
+<g id="a_node33"><a xlink:href="src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx" xlink:title="PopupTextAreaInput.tsx">
+<path fill="#bbfeff" stroke="black" d="M536.5,-528.71C536.5,-528.71 423.5,-528.71 423.5,-528.71 420.5,-528.71 417.5,-525.71 417.5,-522.71 417.5,-522.71 417.5,-516.71 417.5,-516.71 417.5,-513.71 420.5,-510.71 423.5,-510.71 423.5,-510.71 536.5,-510.71 536.5,-510.71 539.5,-510.71 542.5,-513.71 542.5,-516.71 542.5,-516.71 542.5,-522.71 542.5,-522.71 542.5,-525.71 539.5,-528.71 536.5,-528.71"/>
+<text text-anchor="start" x="425.5" y="-517.51" font-family="Helvetica,sans-Serif" font-size="9.00">PopupTextAreaInput.tsx</text>
+</a>
+</g>
+</g>
+<!-- src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx&#45;&gt;src/Components/Input/index.tsx -->
 <g id="edge32" class="edge">
-<title>src/Components/Map/Subcomponents/TextView.tsx&#45;&gt;src/Components/Map/hooks/useTags.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M509.54,-358.07C517.01,-355.79 524.11,-352.06 529,-346 548.29,-322.09 517.25,-231.53 537,-208 543.09,-200.74 551.99,-196.62 561.2,-194.37"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="561.81,-196.39 567.27,-193.15 560.98,-192.27 561.81,-196.39"/>
+<title>src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx&#45;&gt;src/Components/Input/index.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M488.44,-510.59C512.78,-480.73 590.17,-385.8 619.54,-349.77"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="621.35,-350.87 623.52,-344.89 618.1,-348.22 621.35,-350.87"/>
+</g>
+<!-- src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx -->
+<g id="node34" class="node">
+<title>src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx</title>
+<g id="a_node34"><a xlink:href="src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx" xlink:title="PopupTextInput.tsx">
+<path fill="#ccffcc" stroke="black" d="M526,-588.71C526,-588.71 434,-588.71 434,-588.71 431,-588.71 428,-585.71 428,-582.71 428,-582.71 428,-576.71 428,-576.71 428,-573.71 431,-570.71 434,-570.71 434,-570.71 526,-570.71 526,-570.71 529,-570.71 532,-573.71 532,-576.71 532,-576.71 532,-582.71 532,-582.71 532,-585.71 529,-588.71 526,-588.71"/>
+<text text-anchor="start" x="436" y="-577.51" font-family="Helvetica,sans-Serif" font-size="9.00">PopupTextInput.tsx</text>
+</a>
+</g>
+</g>
+<!-- src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx -->
+<g id="node35" class="node">
+<title>src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx</title>
+<g id="a_node35"><a xlink:href="src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx" xlink:title="StartEndView.tsx">
+<path fill="#bbfeff" stroke="black" d="M521,-558.71C521,-558.71 439,-558.71 439,-558.71 436,-558.71 433,-555.71 433,-552.71 433,-552.71 433,-546.71 433,-546.71 433,-543.71 436,-540.71 439,-540.71 439,-540.71 521,-540.71 521,-540.71 524,-540.71 527,-543.71 527,-546.71 527,-546.71 527,-552.71 527,-552.71 527,-555.71 524,-558.71 521,-558.71"/>
+<text text-anchor="start" x="441" y="-547.51" font-family="Helvetica,sans-Serif" font-size="9.00">StartEndView.tsx</text>
+</a>
+</g>
+</g>
+<!-- src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx&#45;&gt;src/Components/Map/hooks/useTags.tsx -->
+<g id="edge35" class="edge">
+<title>src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx&#45;&gt;src/Components/Map/hooks/useTags.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M515.79,-639.71C538.51,-639.71 568.22,-639.71 591.78,-639.71"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="591.94,-641.81 597.94,-639.71 591.94,-637.61 591.94,-641.81"/>
 </g>
 <!-- src/Utils/HeighlightTags.ts -->
-<g id="node31" class="node">
+<g id="node37" class="node">
 <title>src/Utils/HeighlightTags.ts</title>
-<g id="a_node31"><a xlink:href="src/Utils/HeighlightTags.ts" xlink:title="HeighlightTags.ts">
-<path fill="#ddfeff" stroke="black" d="M642.5,-838C642.5,-838 560.5,-838 560.5,-838 557.5,-838 554.5,-835 554.5,-832 554.5,-832 554.5,-826 554.5,-826 554.5,-823 557.5,-820 560.5,-820 560.5,-820 642.5,-820 642.5,-820 645.5,-820 648.5,-823 648.5,-826 648.5,-826 648.5,-832 648.5,-832 648.5,-835 645.5,-838 642.5,-838"/>
-<text text-anchor="start" x="562.5" y="-826.8" font-family="Helvetica,sans-Serif" font-size="9.00">HeighlightTags.ts</text>
+<g id="a_node37"><a xlink:href="src/Utils/HeighlightTags.ts" xlink:title="HeighlightTags.ts">
+<path fill="#ddfeff" stroke="black" d="M673,-1124.71C673,-1124.71 591,-1124.71 591,-1124.71 588,-1124.71 585,-1121.71 585,-1118.71 585,-1118.71 585,-1112.71 585,-1112.71 585,-1109.71 588,-1106.71 591,-1106.71 591,-1106.71 673,-1106.71 673,-1106.71 676,-1106.71 679,-1109.71 679,-1112.71 679,-1112.71 679,-1118.71 679,-1118.71 679,-1121.71 676,-1124.71 673,-1124.71"/>
+<text text-anchor="start" x="593" y="-1113.51" font-family="Helvetica,sans-Serif" font-size="9.00">HeighlightTags.ts</text>
 </a>
 </g>
 </g>
-<!-- src/Components/Map/Subcomponents/TextView.tsx&#45;&gt;src/Utils/HeighlightTags.ts -->
-<g id="edge30" class="edge">
-<title>src/Components/Map/Subcomponents/TextView.tsx&#45;&gt;src/Utils/HeighlightTags.ts</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M478.67,-370.13C488.01,-393.56 513.03,-457.86 529,-513 562.04,-627.06 589.21,-767.9 597.72,-813.78"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="595.69,-814.33 598.84,-819.85 599.82,-813.57 595.69,-814.33"/>
+<!-- src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx&#45;&gt;src/Utils/HeighlightTags.ts -->
+<g id="edge33" class="edge">
+<title>src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx&#45;&gt;src/Utils/HeighlightTags.ts</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M515.65,-637.17C531.45,-638.03 548.95,-642.19 559.5,-654.71 575.46,-673.67 551.95,-1081.42 567.5,-1100.71 570.65,-1104.62 574.61,-1107.63 579.01,-1109.92"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="578.44,-1111.97 584.78,-1112.47 580.14,-1108.13 578.44,-1111.97"/>
 </g>
 <!-- src/Utils/ReplaceURLs.ts -->
-<g id="node32" class="node">
+<g id="node38" class="node">
 <title>src/Utils/ReplaceURLs.ts</title>
-<g id="a_node32"><a xlink:href="src/Utils/ReplaceURLs.ts" xlink:title="ReplaceURLs.ts">
-<path fill="#ddfeff" stroke="black" d="M638.5,-868C638.5,-868 564.5,-868 564.5,-868 561.5,-868 558.5,-865 558.5,-862 558.5,-862 558.5,-856 558.5,-856 558.5,-853 561.5,-850 564.5,-850 564.5,-850 638.5,-850 638.5,-850 641.5,-850 644.5,-853 644.5,-856 644.5,-856 644.5,-862 644.5,-862 644.5,-865 641.5,-868 638.5,-868"/>
-<text text-anchor="start" x="566.5" y="-856.8" font-family="Helvetica,sans-Serif" font-size="9.00">ReplaceURLs.ts</text>
+<g id="a_node38"><a xlink:href="src/Utils/ReplaceURLs.ts" xlink:title="ReplaceURLs.ts">
+<path fill="#ddfeff" stroke="black" d="M669,-1094.71C669,-1094.71 595,-1094.71 595,-1094.71 592,-1094.71 589,-1091.71 589,-1088.71 589,-1088.71 589,-1082.71 589,-1082.71 589,-1079.71 592,-1076.71 595,-1076.71 595,-1076.71 669,-1076.71 669,-1076.71 672,-1076.71 675,-1079.71 675,-1082.71 675,-1082.71 675,-1088.71 675,-1088.71 675,-1091.71 672,-1094.71 669,-1094.71"/>
+<text text-anchor="start" x="597" y="-1083.51" font-family="Helvetica,sans-Serif" font-size="9.00">ReplaceURLs.ts</text>
 </a>
 </g>
 </g>
-<!-- src/Components/Map/Subcomponents/TextView.tsx&#45;&gt;src/Utils/ReplaceURLs.ts -->
-<g id="edge31" class="edge">
-<title>src/Components/Map/Subcomponents/TextView.tsx&#45;&gt;src/Utils/ReplaceURLs.ts</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M479.49,-370.31C490.49,-393.66 518.62,-456.82 529,-513 532.34,-531.09 525.41,-829.71 537,-844 541.01,-848.95 546.33,-852.45 552.18,-854.89"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="551.83,-856.99 558.18,-857 553.22,-853.03 551.83,-856.99"/>
+<!-- src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx&#45;&gt;src/Utils/ReplaceURLs.ts -->
+<g id="edge34" class="edge">
+<title>src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx&#45;&gt;src/Utils/ReplaceURLs.ts</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M515.63,-637.57C531.23,-638.55 548.57,-642.72 559.5,-654.71 571.98,-668.41 564.95,-719.36 567.5,-737.71 585.53,-867.27 617.51,-1022.13 627.75,-1070.51"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="625.75,-1071.19 629.05,-1076.62 629.86,-1070.31 625.75,-1071.19"/>
 </g>
 <!-- src/Components/Map/Tags.tsx -->
-<g id="node33" class="node">
+<g id="node39" class="node">
 <title>src/Components/Map/Tags.tsx</title>
-<g id="a_node33"><a xlink:href="src/Components/Map/Tags.tsx" xlink:title="Tags.tsx">
-<path fill="#bbfeff" stroke="black" d="M259,-208C259,-208 217,-208 217,-208 214,-208 211,-205 211,-202 211,-202 211,-196 211,-196 211,-193 214,-190 217,-190 217,-190 259,-190 259,-190 262,-190 265,-193 265,-196 265,-196 265,-202 265,-202 265,-205 262,-208 259,-208"/>
-<text text-anchor="start" x="219.5" y="-196.8" font-family="Helvetica,sans-Serif" font-size="9.00">Tags.tsx</text>
+<g id="a_node39"><a xlink:href="src/Components/Map/Tags.tsx" xlink:title="Tags.tsx">
+<path fill="#bbfeff" stroke="black" d="M256,-464.71C256,-464.71 214,-464.71 214,-464.71 211,-464.71 208,-461.71 208,-458.71 208,-458.71 208,-452.71 208,-452.71 208,-449.71 211,-446.71 214,-446.71 214,-446.71 256,-446.71 256,-446.71 259,-446.71 262,-449.71 262,-452.71 262,-452.71 262,-458.71 262,-458.71 262,-461.71 259,-464.71 256,-464.71"/>
+<text text-anchor="start" x="216.5" y="-453.51" font-family="Helvetica,sans-Serif" font-size="9.00">Tags.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Tags.tsx&#45;&gt;src/Components/Map/hooks/useTags.tsx -->
-<g id="edge33" class="edge">
+<g id="edge38" class="edge">
 <title>src/Components/Map/Tags.tsx&#45;&gt;src/Components/Map/hooks/useTags.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M257.74,-189.98C268.98,-185.07 283.73,-179.5 297.5,-177 398.73,-158.59 426.73,-165.7 529,-177 539.57,-178.17 550.86,-180.28 561.27,-182.59"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="560.97,-184.68 567.29,-183.97 561.91,-180.59 560.97,-184.68"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M262.25,-450.08C267.27,-447.9 272.03,-444.89 275.5,-440.71 289.07,-424.39 267.71,-407.32 284,-393.71 377.97,-315.21 461.58,-320.2 559.5,-393.71 597.62,-422.34 622.04,-575.53 628.97,-624.59"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="626.89,-624.89 629.8,-630.55 631.05,-624.31 626.89,-624.89"/>
 </g>
 <!-- src/Components/Map/UtopiaMap.css -->
-<g id="node34" class="node">
+<g id="node40" class="node">
 <title>src/Components/Map/UtopiaMap.css</title>
-<g id="a_node34"><a xlink:href="src/Components/Map/UtopiaMap.css" xlink:title="UtopiaMap.css">
-<path fill="#ffffcc" stroke="black" d="M393,-422C393,-422 323,-422 323,-422 320,-422 317,-419 317,-416 317,-416 317,-410 317,-410 317,-407 320,-404 323,-404 323,-404 393,-404 393,-404 396,-404 399,-407 399,-410 399,-410 399,-416 399,-416 399,-419 396,-422 393,-422"/>
-<text text-anchor="start" x="325" y="-410.8" font-family="Helvetica,sans-Serif" font-size="9.00">UtopiaMap.css</text>
+<g id="a_node40"><a xlink:href="src/Components/Map/UtopiaMap.css" xlink:title="UtopiaMap.css">
+<path fill="#ffffcc" stroke="black" d="M379.5,-798.71C379.5,-798.71 309.5,-798.71 309.5,-798.71 306.5,-798.71 303.5,-795.71 303.5,-792.71 303.5,-792.71 303.5,-786.71 303.5,-786.71 303.5,-783.71 306.5,-780.71 309.5,-780.71 309.5,-780.71 379.5,-780.71 379.5,-780.71 382.5,-780.71 385.5,-783.71 385.5,-786.71 385.5,-786.71 385.5,-792.71 385.5,-792.71 385.5,-795.71 382.5,-798.71 379.5,-798.71"/>
+<text text-anchor="start" x="311.5" y="-787.51" font-family="Helvetica,sans-Serif" font-size="9.00">UtopiaMap.css</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/UtopiaMap.tsx -->
-<g id="node35" class="node">
+<g id="node41" class="node">
 <title>src/Components/Map/UtopiaMap.tsx</title>
-<g id="a_node35"><a xlink:href="src/Components/Map/UtopiaMap.tsx" xlink:title="UtopiaMap.tsx">
-<path fill="#bbfeff" stroke="black" d="M272.5,-286C272.5,-286 203.5,-286 203.5,-286 200.5,-286 197.5,-283 197.5,-280 197.5,-280 197.5,-274 197.5,-274 197.5,-271 200.5,-268 203.5,-268 203.5,-268 272.5,-268 272.5,-268 275.5,-268 278.5,-271 278.5,-274 278.5,-274 278.5,-280 278.5,-280 278.5,-283 275.5,-286 272.5,-286"/>
-<text text-anchor="start" x="205.5" y="-274.8" font-family="Helvetica,sans-Serif" font-size="9.00">UtopiaMap.tsx</text>
+<g id="a_node41"><a xlink:href="src/Components/Map/UtopiaMap.tsx" xlink:title="UtopiaMap.tsx">
+<path fill="#bbfeff" stroke="black" d="M269.5,-755.71C269.5,-755.71 200.5,-755.71 200.5,-755.71 197.5,-755.71 194.5,-752.71 194.5,-749.71 194.5,-749.71 194.5,-743.71 194.5,-743.71 194.5,-740.71 197.5,-737.71 200.5,-737.71 200.5,-737.71 269.5,-737.71 269.5,-737.71 272.5,-737.71 275.5,-740.71 275.5,-743.71 275.5,-743.71 275.5,-749.71 275.5,-749.71 275.5,-752.71 272.5,-755.71 269.5,-755.71"/>
+<text text-anchor="start" x="202.5" y="-744.51" font-family="Helvetica,sans-Serif" font-size="9.00">UtopiaMap.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/hooks/useItems.tsx -->
-<g id="edge35" class="edge">
+<g id="edge39" class="edge">
 <title>src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/hooks/useItems.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M252.22,-267.9C263.63,-260.63 280.86,-251.02 297.5,-247 388.3,-225.08 498.88,-236.45 558.14,-245.47"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="558.16,-247.6 564.41,-246.45 558.8,-243.45 558.16,-247.6"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M275.7,-749.45C357.44,-754.68 538.68,-764.04 559.5,-745.71 580.03,-727.65 549.17,-705.01 567.5,-684.71 573.07,-678.55 580.65,-674.69 588.64,-672.31"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="589.5,-674.26 594.81,-670.77 588.48,-670.19 589.5,-674.26"/>
 </g>
 <!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/hooks/useLayers.tsx -->
-<g id="edge36" class="edge">
+<g id="edge40" class="edge">
 <title>src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/hooks/useLayers.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M247.46,-267.67C257.99,-256.75 277.1,-239.13 297.5,-231 383.98,-196.52 495.65,-205.88 556.38,-214.95"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="556.21,-217.05 562.46,-215.88 556.85,-212.9 556.21,-217.05"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M271.5,-755.72C275.69,-756.52 279.93,-757.22 284,-757.71 344.78,-765.08 501.97,-780.66 559.5,-759.71 584.67,-750.55 607.15,-728.2 619.92,-713.52"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="621.58,-714.8 623.86,-708.86 618.38,-712.08 621.58,-714.8"/>
 </g>
 <!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/hooks/useTags.tsx -->
-<g id="edge37" class="edge">
+<g id="edge41" class="edge">
 <title>src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/hooks/useTags.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M246.41,-267.75C262.15,-248.11 297.5,-204 297.5,-204 342.52,-181.35 489.69,-186.43 561.03,-190.43"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="561.17,-192.54 567.28,-190.79 561.41,-188.35 561.17,-192.54"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M275.57,-744.67C357.52,-740.04 539.85,-727.61 559.5,-707.71 576.24,-690.77 551.36,-672.24 567.5,-654.71 573.86,-647.81 582.75,-643.81 591.87,-641.54"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="592.43,-643.57 597.88,-640.3 591.58,-639.46 592.43,-643.57"/>
 </g>
 <!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/Subcomponents/AddButton.tsx -->
-<g id="edge38" class="edge">
+<g id="edge42" class="edge">
 <title>src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/Subcomponents/AddButton.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M278.62,-285.06C288.92,-287.15 300.1,-289.43 310.71,-291.59"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="310.58,-293.7 316.88,-292.84 311.42,-289.59 310.58,-293.7"/>
-</g>
-<!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/types.ts -->
-<g id="edge34" class="edge">
-<title>src/Components/Map/UtopiaMap.tsx&#45;&gt;src/types.ts</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M278.62,-283.18C282.83,-285.34 286.62,-288.21 289.5,-292 305.93,-313.64 280.38,-759.9 297.5,-781 331.67,-823.13 400.2,-826.52 440.77,-824.33"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="440.93,-826.42 446.79,-823.95 440.67,-822.23 440.93,-826.42"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M245.04,-737.43C254.1,-728.69 268.82,-715.9 284,-708.71 288.23,-706.71 292.78,-705.01 297.41,-703.57"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="298.11,-705.55 303.3,-701.88 296.96,-701.51 298.11,-705.55"/>
 </g>
 <!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/UtopiaMap.css -->
-<g id="edge39" class="edge">
+<g id="edge43" class="edge">
 <title>src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/UtopiaMap.css</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M278.9,-283.59C282.96,-285.7 286.63,-288.44 289.5,-292 304.46,-310.57 282.01,-380.87 297.5,-399 301.2,-403.32 305.95,-406.45 311.17,-408.69"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="310.61,-410.73 316.97,-410.79 312.04,-406.78 310.61,-410.73"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M251.65,-755.81C260.86,-760.93 272.86,-767.18 284,-771.71 290.27,-774.27 297.05,-776.66 303.7,-778.8"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="303.41,-780.91 309.76,-780.7 304.66,-776.9 303.41,-780.91"/>
 </g>
 <!-- src/Components/Map/index.tsx -->
-<g id="node36" class="node">
+<g id="node42" class="node">
 <title>src/Components/Map/index.tsx</title>
-<g id="a_node36"><a xlink:href="src/Components/Map/index.tsx" xlink:title="index.tsx">
-<path fill="#bbfeff" stroke="black" d="M175,-301C175,-301 129,-301 129,-301 126,-301 123,-298 123,-295 123,-295 123,-289 123,-289 123,-286 126,-283 129,-283 129,-283 175,-283 175,-283 178,-283 181,-286 181,-289 181,-289 181,-295 181,-295 181,-298 178,-301 175,-301"/>
-<text text-anchor="start" x="131" y="-289.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
+<g id="a_node42"><a xlink:href="src/Components/Map/index.tsx" xlink:title="index.tsx">
+<path fill="#bbfeff" stroke="black" d="M175,-493.71C175,-493.71 129,-493.71 129,-493.71 126,-493.71 123,-490.71 123,-487.71 123,-487.71 123,-481.71 123,-481.71 123,-478.71 126,-475.71 129,-475.71 129,-475.71 175,-475.71 175,-475.71 178,-475.71 181,-478.71 181,-481.71 181,-481.71 181,-487.71 181,-487.71 181,-490.71 178,-493.71 175,-493.71"/>
+<text text-anchor="start" x="131" y="-482.51" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
 </a>
 </g>
 </g>
+<!-- src/Components/Map/index.tsx&#45;&gt;src/Components/Map/ItemForm.tsx -->
+<g id="edge44" class="edge">
+<title>src/Components/Map/index.tsx&#45;&gt;src/Components/Map/ItemForm.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M177.51,-475.59C178.99,-474.44 180.34,-473.16 181.5,-471.71 198.85,-450.1 176.45,-431.76 194.5,-410.71 195.13,-409.98 195.79,-409.29 196.49,-408.63"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="198.08,-410.06 201.55,-404.73 195.51,-406.73 198.08,-410.06"/>
+</g>
+<!-- src/Components/Map/index.tsx&#45;&gt;src/Components/Map/ItemView.tsx -->
+<g id="edge45" class="edge">
+<title>src/Components/Map/index.tsx&#45;&gt;src/Components/Map/ItemView.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M176.95,-475.53C178.59,-474.39 180.14,-473.12 181.5,-471.71 191.9,-460.99 183.76,-451.1 194.5,-440.71 195.37,-439.87 196.29,-439.08 197.26,-438.33"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="198.54,-439.99 202.37,-434.92 196.22,-436.5 198.54,-439.99"/>
+</g>
 <!-- src/Components/Map/index.tsx&#45;&gt;src/Components/Map/Layer.tsx -->
-<g id="edge40" class="edge">
+<g id="edge46" class="edge">
 <title>src/Components/Map/index.tsx&#45;&gt;src/Components/Map/Layer.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.44,-297.08C188.5,-298.34 196.14,-299.7 203.43,-301"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="203.17,-303.09 209.44,-302.08 203.91,-298.96 203.17,-303.09"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M161.19,-493.98C169.08,-502.52 181.69,-515.12 194.5,-523.71 197.86,-525.97 201.56,-528.07 205.29,-529.99"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="204.45,-531.91 210.76,-532.65 206.29,-528.14 204.45,-531.91"/>
+</g>
+<!-- src/Components/Map/index.tsx&#45;&gt;src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx -->
+<g id="edge47" class="edge">
+<title>src/Components/Map/index.tsx&#45;&gt;src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M174.75,-493.79C201.17,-503.24 245.87,-513.94 275.5,-492.71 285.04,-485.88 274.46,-474.55 284,-467.71 305.05,-452.64 381.63,-449.99 400.5,-467.71 421.11,-487.07 390.02,-573.31 408.5,-594.71 409.36,-595.71 410.27,-596.65 411.21,-597.53"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="410.28,-599.47 416.29,-601.53 412.87,-596.17 410.28,-599.47"/>
+</g>
+<!-- src/Components/Map/index.tsx&#45;&gt;src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx -->
+<g id="edge48" class="edge">
+<title>src/Components/Map/index.tsx&#45;&gt;src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.07,-485.04C212.78,-484.82 261.76,-482.48 275.5,-470.71 286.35,-461.42 272.64,-448.38 284,-439.71 325.17,-408.31 361.78,-405.34 400.5,-439.71 422.93,-459.62 387.98,-484.85 408.5,-506.71 409.74,-508.03 411.06,-509.24 412.46,-510.36"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="411.33,-512.12 417.47,-513.76 413.69,-508.65 411.33,-512.12"/>
+</g>
+<!-- src/Components/Map/index.tsx&#45;&gt;src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx -->
+<g id="edge49" class="edge">
+<title>src/Components/Map/index.tsx&#45;&gt;src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.09,-492.62C208.1,-498.41 248.66,-502.13 275.5,-481.71 285.85,-473.84 273.55,-461.46 284,-453.71 304.8,-438.29 381.32,-436.33 400.5,-453.71 413.9,-465.86 396.44,-521.23 408.5,-534.71 413.45,-540.25 419.9,-544.03 426.89,-546.56"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="426.5,-548.64 432.86,-548.41 427.74,-544.63 426.5,-548.64"/>
+</g>
+<!-- src/Components/Map/index.tsx&#45;&gt;src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx -->
+<g id="edge50" class="edge">
+<title>src/Components/Map/index.tsx&#45;&gt;src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M169.84,-493.89C177.19,-497.39 186.04,-500.96 194.5,-502.71 229.75,-510.03 243.19,-518.58 275.5,-502.71 281.05,-499.99 278.45,-494.44 284,-491.71 330.48,-468.89 362.8,-456.22 400.5,-491.71 422.06,-512.01 389.19,-602.27 408.5,-624.71 415.94,-633.36 427.01,-637.75 438.19,-639.82"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="438.15,-641.93 444.39,-640.74 438.77,-637.78 438.15,-641.93"/>
 </g>
 <!-- src/Components/Map/index.tsx&#45;&gt;src/Components/Map/Tags.tsx -->
-<g id="edge41" class="edge">
+<g id="edge51" class="edge">
 <title>src/Components/Map/index.tsx&#45;&gt;src/Components/Map/Tags.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M161.36,-282.74C176.2,-266.31 207.22,-231.97 224.57,-212.76"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="226.21,-214.08 228.67,-208.22 223.09,-211.26 226.21,-214.08"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M178.18,-475.7C185.96,-472.92 194.61,-469.82 202.74,-466.91"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="203.89,-468.73 208.83,-464.73 202.47,-464.77 203.89,-468.73"/>
 </g>
 <!-- src/Components/Map/index.tsx&#45;&gt;src/Components/Map/UtopiaMap.tsx -->
-<g id="edge42" class="edge">
+<g id="edge52" class="edge">
 <title>src/Components/Map/index.tsx&#45;&gt;src/Components/Map/UtopiaMap.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.44,-286.92C184.65,-286.35 187.98,-285.75 191.35,-285.15"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="191.88,-287.19 197.41,-284.07 191.14,-283.06 191.88,-287.19"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M155.79,-493.73C167.69,-532.23 214.3,-683 229.31,-731.56"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="227.36,-732.35 231.14,-737.46 231.37,-731.11 227.36,-732.35"/>
 </g>
 <!-- src/Components/Profile/Settings.tsx -->
-<g id="node37" class="node">
+<g id="node43" class="node">
 <title>src/Components/Profile/Settings.tsx</title>
-<g id="a_node37"><a xlink:href="src/Components/Profile/Settings.tsx" xlink:title="Settings.tsx">
-<path fill="#bbfeff" stroke="black" d="M267.5,-124C267.5,-124 208.5,-124 208.5,-124 205.5,-124 202.5,-121 202.5,-118 202.5,-118 202.5,-112 202.5,-112 202.5,-109 205.5,-106 208.5,-106 208.5,-106 267.5,-106 267.5,-106 270.5,-106 273.5,-109 273.5,-112 273.5,-112 273.5,-118 273.5,-118 273.5,-121 270.5,-124 267.5,-124"/>
-<text text-anchor="start" x="210.5" y="-112.8" font-family="Helvetica,sans-Serif" font-size="9.00">Settings.tsx</text>
+<g id="a_node43"><a xlink:href="src/Components/Profile/Settings.tsx" xlink:title="Settings.tsx">
+<path fill="#bbfeff" stroke="black" d="M509.5,-180.71C509.5,-180.71 450.5,-180.71 450.5,-180.71 447.5,-180.71 444.5,-177.71 444.5,-174.71 444.5,-174.71 444.5,-168.71 444.5,-168.71 444.5,-165.71 447.5,-162.71 450.5,-162.71 450.5,-162.71 509.5,-162.71 509.5,-162.71 512.5,-162.71 515.5,-165.71 515.5,-168.71 515.5,-168.71 515.5,-174.71 515.5,-174.71 515.5,-177.71 512.5,-180.71 509.5,-180.71"/>
+<text text-anchor="start" x="452.5" y="-169.51" font-family="Helvetica,sans-Serif" font-size="9.00">Settings.tsx</text>
 </a>
 </g>
 </g>
-<!-- src/Components/Profile/Settings.tsx&#45;&gt;src/Components/Input/InputText.tsx -->
-<g id="edge43" class="edge">
-<title>src/Components/Profile/Settings.tsx&#45;&gt;src/Components/Input/InputText.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M257.16,-124C268.69,-130.79 282.67,-141.28 289.5,-155 297.95,-171.96 285.68,-481.19 297.5,-496 301.72,-501.29 307.52,-504.88 313.84,-507.28"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="313.41,-509.35 319.77,-509.18 314.69,-505.35 313.41,-509.35"/>
+<!-- src/Components/Profile/Settings.tsx&#45;&gt;src/Components/Input/TextInput.tsx -->
+<g id="edge54" class="edge">
+<title>src/Components/Profile/Settings.tsx&#45;&gt;src/Components/Input/TextInput.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M515.84,-166.31C561.6,-161.15 642.46,-158.98 696.5,-196.71 728.73,-219.21 743.12,-266.31 748.61,-290.56"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="746.57,-291.05 749.88,-296.48 750.68,-290.18 746.57,-291.05"/>
 </g>
 <!-- src/Components/Profile/Settings.tsx&#45;&gt;src/Components/Input/TextAreaInput.tsx -->
-<g id="edge44" class="edge">
+<g id="edge53" class="edge">
 <title>src/Components/Profile/Settings.tsx&#45;&gt;src/Components/Input/TextAreaInput.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M257.15,-124.01C268.66,-130.8 282.64,-141.3 289.5,-155 304.22,-184.42 279.87,-423.22 297.5,-451 302.49,-458.86 310.21,-464.74 318.47,-469.11"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="317.92,-471.18 324.24,-471.9 319.75,-467.4 317.92,-471.18"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M515.85,-177.05C575.29,-186.31 690.49,-205 696.5,-211.71 712.7,-229.81 689.46,-301.64 704.5,-320.71 704.95,-321.29 705.42,-321.84 705.92,-322.37"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="704.92,-324.28 710.83,-326.6 707.66,-321.09 704.92,-324.28"/>
 </g>
 <!-- src/Components/Templates/TitleCard.tsx -->
-<g id="node38" class="node">
+<g id="node44" class="node">
 <title>src/Components/Templates/TitleCard.tsx</title>
-<g id="a_node38"><a xlink:href="src/Components/Templates/TitleCard.tsx" xlink:title="TitleCard.tsx">
-<path fill="#bbfeff" stroke="black" d="M388.5,-64C388.5,-64 327.5,-64 327.5,-64 324.5,-64 321.5,-61 321.5,-58 321.5,-58 321.5,-52 321.5,-52 321.5,-49 324.5,-46 327.5,-46 327.5,-46 388.5,-46 388.5,-46 391.5,-46 394.5,-49 394.5,-52 394.5,-52 394.5,-58 394.5,-58 394.5,-61 391.5,-64 388.5,-64"/>
-<text text-anchor="start" x="329.5" y="-52.8" font-family="Helvetica,sans-Serif" font-size="9.00">TitleCard.tsx</text>
+<g id="a_node44"><a xlink:href="src/Components/Templates/TitleCard.tsx" xlink:title="TitleCard.tsx">
+<path fill="#bbfeff" stroke="black" d="M662.5,-240.71C662.5,-240.71 601.5,-240.71 601.5,-240.71 598.5,-240.71 595.5,-237.71 595.5,-234.71 595.5,-234.71 595.5,-228.71 595.5,-228.71 595.5,-225.71 598.5,-222.71 601.5,-222.71 601.5,-222.71 662.5,-222.71 662.5,-222.71 665.5,-222.71 668.5,-225.71 668.5,-228.71 668.5,-228.71 668.5,-234.71 668.5,-234.71 668.5,-237.71 665.5,-240.71 662.5,-240.71"/>
+<text text-anchor="start" x="603.5" y="-229.51" font-family="Helvetica,sans-Serif" font-size="9.00">TitleCard.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Profile/Settings.tsx&#45;&gt;src/Components/Templates/TitleCard.tsx -->
-<g id="edge45" class="edge">
+<g id="edge55" class="edge">
 <title>src/Components/Profile/Settings.tsx&#45;&gt;src/Components/Templates/TitleCard.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M261.35,-105.84C270.21,-102.06 280.42,-97.52 289.5,-93 305.62,-84.98 323.34,-74.95 336.58,-67.22"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="337.85,-68.9 341.96,-64.05 335.72,-65.28 337.85,-68.9"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M503.78,-180.83C530.26,-191.42 573.96,-208.9 602.62,-220.36"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="602.14,-222.43 608.5,-222.71 603.7,-218.53 602.14,-222.43"/>
 </g>
 <!-- src/Components/Typography/Subtitle.tsx -->
-<g id="node41" class="node">
+<g id="node47" class="node">
 <title>src/Components/Typography/Subtitle.tsx</title>
-<g id="a_node41"><a xlink:href="src/Components/Typography/Subtitle.tsx" xlink:title="Subtitle.tsx">
-<path fill="#bbfeff" stroke="black" d="M502,-542C502,-542 446,-542 446,-542 443,-542 440,-539 440,-536 440,-536 440,-530 440,-530 440,-527 443,-524 446,-524 446,-524 502,-524 502,-524 505,-524 508,-527 508,-530 508,-530 508,-536 508,-536 508,-539 505,-542 502,-542"/>
-<text text-anchor="start" x="448" y="-530.8" font-family="Helvetica,sans-Serif" font-size="9.00">Subtitle.tsx</text>
+<g id="a_node47"><a xlink:href="src/Components/Typography/Subtitle.tsx" xlink:title="Subtitle.tsx">
+<path fill="#bbfeff" stroke="black" d="M780.5,-150.71C780.5,-150.71 724.5,-150.71 724.5,-150.71 721.5,-150.71 718.5,-147.71 718.5,-144.71 718.5,-144.71 718.5,-138.71 718.5,-138.71 718.5,-135.71 721.5,-132.71 724.5,-132.71 724.5,-132.71 780.5,-132.71 780.5,-132.71 783.5,-132.71 786.5,-135.71 786.5,-138.71 786.5,-138.71 786.5,-144.71 786.5,-144.71 786.5,-147.71 783.5,-150.71 780.5,-150.71"/>
+<text text-anchor="start" x="726.5" y="-139.51" font-family="Helvetica,sans-Serif" font-size="9.00">Subtitle.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Templates/TitleCard.tsx&#45;&gt;src/Components/Typography/Subtitle.tsx -->
-<g id="edge48" class="edge">
+<g id="edge58" class="edge">
 <title>src/Components/Templates/TitleCard.tsx&#45;&gt;src/Components/Typography/Subtitle.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M361.75,-64.38C370.65,-95.15 399.02,-195.89 414,-281 423.15,-332.96 415.48,-347.51 427,-399 436.96,-443.48 456.6,-493.77 466.69,-518.16"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="464.79,-519.06 469.04,-523.78 468.66,-517.44 464.79,-519.06"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M645.24,-222.42C666.55,-206.24 710.5,-172.85 734.67,-154.5"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="736,-156.12 739.51,-150.82 733.46,-152.78 736,-156.12"/>
 </g>
 <!-- src/Components/Profile/index.tsx -->
-<g id="node39" class="node">
+<g id="node45" class="node">
 <title>src/Components/Profile/index.tsx</title>
-<g id="a_node39"><a xlink:href="src/Components/Profile/index.tsx" xlink:title="index.tsx">
-<path fill="#bbfeff" stroke="black" d="M175,-124C175,-124 129,-124 129,-124 126,-124 123,-121 123,-118 123,-118 123,-112 123,-112 123,-109 126,-106 129,-106 129,-106 175,-106 175,-106 178,-106 181,-109 181,-112 181,-112 181,-118 181,-118 181,-121 178,-124 175,-124"/>
-<text text-anchor="start" x="131" y="-112.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
+<g id="a_node45"><a xlink:href="src/Components/Profile/index.tsx" xlink:title="index.tsx">
+<path fill="#bbfeff" stroke="black" d="M367.5,-180.71C367.5,-180.71 321.5,-180.71 321.5,-180.71 318.5,-180.71 315.5,-177.71 315.5,-174.71 315.5,-174.71 315.5,-168.71 315.5,-168.71 315.5,-165.71 318.5,-162.71 321.5,-162.71 321.5,-162.71 367.5,-162.71 367.5,-162.71 370.5,-162.71 373.5,-165.71 373.5,-168.71 373.5,-168.71 373.5,-174.71 373.5,-174.71 373.5,-177.71 370.5,-180.71 367.5,-180.71"/>
+<text text-anchor="start" x="323.5" y="-169.51" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Profile/index.tsx&#45;&gt;src/Components/Profile/Settings.tsx -->
-<g id="edge46" class="edge">
+<g id="edge56" class="edge">
 <title>src/Components/Profile/index.tsx&#45;&gt;src/Components/Profile/Settings.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.44,-115C186.19,-115 191.2,-115 196.19,-115"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="196.48,-117.1 202.48,-115 196.48,-112.9 196.48,-117.1"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M373.81,-171.71C392.48,-171.71 417.24,-171.71 438.04,-171.71"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="438.08,-173.81 444.08,-171.71 438.08,-169.61 438.08,-173.81"/>
 </g>
 <!-- src/Components/Templates/CardPage.tsx -->
-<g id="node40" class="node">
+<g id="node46" class="node">
 <title>src/Components/Templates/CardPage.tsx</title>
-<g id="a_node40"><a xlink:href="src/Components/Templates/CardPage.tsx" xlink:title="CardPage.tsx">
-<path fill="#bbfeff" stroke="black" d="M270,-50C270,-50 206,-50 206,-50 203,-50 200,-47 200,-44 200,-44 200,-38 200,-38 200,-35 203,-32 206,-32 206,-32 270,-32 270,-32 273,-32 276,-35 276,-38 276,-38 276,-44 276,-44 276,-47 273,-50 270,-50"/>
-<text text-anchor="start" x="208" y="-38.8" font-family="Helvetica,sans-Serif" font-size="9.00">CardPage.tsx</text>
+<g id="a_node46"><a xlink:href="src/Components/Templates/CardPage.tsx" xlink:title="CardPage.tsx">
+<path fill="#bbfeff" stroke="black" d="M512,-240.71C512,-240.71 448,-240.71 448,-240.71 445,-240.71 442,-237.71 442,-234.71 442,-234.71 442,-228.71 442,-228.71 442,-225.71 445,-222.71 448,-222.71 448,-222.71 512,-222.71 512,-222.71 515,-222.71 518,-225.71 518,-228.71 518,-228.71 518,-234.71 518,-234.71 518,-237.71 515,-240.71 512,-240.71"/>
+<text text-anchor="start" x="450" y="-229.51" font-family="Helvetica,sans-Serif" font-size="9.00">CardPage.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Templates/CardPage.tsx&#45;&gt;src/Components/Templates/TitleCard.tsx -->
-<g id="edge47" class="edge">
+<g id="edge57" class="edge">
 <title>src/Components/Templates/CardPage.tsx&#45;&gt;src/Components/Templates/TitleCard.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M276.01,-45.39C288.44,-46.87 302.39,-48.52 315.17,-50.04"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="315.12,-52.15 321.33,-50.77 315.62,-47.98 315.12,-52.15"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M518.08,-231.71C539.65,-231.71 566.9,-231.71 589.22,-231.71"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="589.38,-233.81 595.38,-231.71 589.38,-229.61 589.38,-233.81"/>
 </g>
 <!-- src/Components/Templates/index.tsx -->
-<g id="node42" class="node">
+<g id="node48" class="node">
 <title>src/Components/Templates/index.tsx</title>
-<g id="a_node42"><a xlink:href="src/Components/Templates/index.tsx" xlink:title="index.tsx">
-<path fill="#bbfeff" stroke="black" d="M175,-64C175,-64 129,-64 129,-64 126,-64 123,-61 123,-58 123,-58 123,-52 123,-52 123,-49 126,-46 129,-46 129,-46 175,-46 175,-46 178,-46 181,-49 181,-52 181,-52 181,-58 181,-58 181,-61 178,-64 175,-64"/>
-<text text-anchor="start" x="131" y="-52.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
+<g id="a_node48"><a xlink:href="src/Components/Templates/index.tsx" xlink:title="index.tsx">
+<path fill="#bbfeff" stroke="black" d="M367.5,-254.71C367.5,-254.71 321.5,-254.71 321.5,-254.71 318.5,-254.71 315.5,-251.71 315.5,-248.71 315.5,-248.71 315.5,-242.71 315.5,-242.71 315.5,-239.71 318.5,-236.71 321.5,-236.71 321.5,-236.71 367.5,-236.71 367.5,-236.71 370.5,-236.71 373.5,-239.71 373.5,-242.71 373.5,-242.71 373.5,-248.71 373.5,-248.71 373.5,-251.71 370.5,-254.71 367.5,-254.71"/>
+<text text-anchor="start" x="323.5" y="-243.51" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Templates/index.tsx&#45;&gt;src/Components/Templates/TitleCard.tsx -->
-<g id="edge50" class="edge">
+<g id="edge60" class="edge">
 <title>src/Components/Templates/index.tsx&#45;&gt;src/Components/Templates/TitleCard.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.13,-55.77C185.6,-55.87 190.18,-55.95 194.5,-56 236.72,-56.51 247.28,-56.31 289.5,-56 297.72,-55.94 306.5,-55.84 314.92,-55.72"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="315.3,-57.81 321.27,-55.63 315.24,-53.61 315.3,-57.81"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M373.64,-247.77C414.64,-250.34 493.17,-253.6 559.5,-246.71 569.22,-245.71 579.56,-243.95 589.27,-241.98"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="589.78,-244.02 595.22,-240.73 588.92,-239.91 589.78,-244.02"/>
 </g>
 <!-- src/Components/Templates/index.tsx&#45;&gt;src/Components/Templates/CardPage.tsx -->
-<g id="edge49" class="edge">
+<g id="edge59" class="edge">
 <title>src/Components/Templates/index.tsx&#45;&gt;src/Components/Templates/CardPage.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.44,-50.26C185.4,-49.6 189.55,-48.91 193.71,-48.21"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="194.23,-50.26 199.8,-47.2 193.54,-46.11 194.23,-50.26"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M373.81,-242.75C391.71,-240.87 415.19,-238.41 435.43,-236.28"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="435.85,-238.35 441.6,-235.64 435.42,-234.17 435.85,-238.35"/>
 </g>
 <!-- src/SampleData/data.js -->
-<g id="node43" class="node">
+<g id="node49" class="node">
 <title>src/SampleData/data.js</title>
-<g id="a_node43"><a xlink:href="src/SampleData/data.js" xlink:title="data.js">
-<path fill="#ccffcc" stroke="black" d="M72,-737C72,-737 30,-737 30,-737 27,-737 24,-734 24,-731 24,-731 24,-725 24,-725 24,-722 27,-719 30,-719 30,-719 72,-719 72,-719 75,-719 78,-722 78,-725 78,-725 78,-731 78,-731 78,-734 75,-737 72,-737"/>
-<text text-anchor="start" x="35.5" y="-725.8" font-family="Helvetica,sans-Serif" font-size="9.00">data.js</text>
+<g id="a_node49"><a xlink:href="src/SampleData/data.js" xlink:title="data.js">
+<path fill="#ccffcc" stroke="black" d="M72,-886.71C72,-886.71 30,-886.71 30,-886.71 27,-886.71 24,-883.71 24,-880.71 24,-880.71 24,-874.71 24,-874.71 24,-871.71 27,-868.71 30,-868.71 30,-868.71 72,-868.71 72,-868.71 75,-868.71 78,-871.71 78,-874.71 78,-874.71 78,-880.71 78,-880.71 78,-883.71 75,-886.71 72,-886.71"/>
+<text text-anchor="start" x="35.5" y="-875.51" font-family="Helvetica,sans-Serif" font-size="9.00">data.js</text>
 </a>
 </g>
 </g>
 <!-- src/index.css -->
-<g id="node44" class="node">
+<g id="node50" class="node">
 <title>src/index.css</title>
-<g id="a_node44"><a xlink:href="src/index.css" xlink:title="index.css">
-<path fill="#ffffcc" stroke="black" d="M175.5,-830C175.5,-830 128.5,-830 128.5,-830 125.5,-830 122.5,-827 122.5,-824 122.5,-824 122.5,-818 122.5,-818 122.5,-815 125.5,-812 128.5,-812 128.5,-812 175.5,-812 175.5,-812 178.5,-812 181.5,-815 181.5,-818 181.5,-818 181.5,-824 181.5,-824 181.5,-827 178.5,-830 175.5,-830"/>
-<text text-anchor="start" x="130.5" y="-818.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.css</text>
+<g id="a_node50"><a xlink:href="src/index.css" xlink:title="index.css">
+<path fill="#ffffcc" stroke="black" d="M175.5,-1086.71C175.5,-1086.71 128.5,-1086.71 128.5,-1086.71 125.5,-1086.71 122.5,-1083.71 122.5,-1080.71 122.5,-1080.71 122.5,-1074.71 122.5,-1074.71 122.5,-1071.71 125.5,-1068.71 128.5,-1068.71 128.5,-1068.71 175.5,-1068.71 175.5,-1068.71 178.5,-1068.71 181.5,-1071.71 181.5,-1074.71 181.5,-1074.71 181.5,-1080.71 181.5,-1080.71 181.5,-1083.71 178.5,-1086.71 175.5,-1086.71"/>
+<text text-anchor="start" x="130.5" y="-1075.51" font-family="Helvetica,sans-Serif" font-size="9.00">index.css</text>
 </a>
 </g>
 </g>
 <!-- src/index.tsx -->
-<g id="node45" class="node">
+<g id="node51" class="node">
 <title>src/index.tsx</title>
-<g id="a_node45"><a xlink:href="src/index.tsx" xlink:title="index.tsx">
-<path fill="#bbfeff" stroke="black" d="M74,-497C74,-497 28,-497 28,-497 25,-497 22,-494 22,-491 22,-491 22,-485 22,-485 22,-482 25,-479 28,-479 28,-479 74,-479 74,-479 77,-479 80,-482 80,-485 80,-485 80,-491 80,-491 80,-494 77,-497 74,-497"/>
-<text text-anchor="start" x="30" y="-485.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
+<g id="a_node51"><a xlink:href="src/index.tsx" xlink:title="index.tsx">
+<path fill="#bbfeff" stroke="black" d="M74,-404.71C74,-404.71 28,-404.71 28,-404.71 25,-404.71 22,-401.71 22,-398.71 22,-398.71 22,-392.71 22,-392.71 22,-389.71 25,-386.71 28,-386.71 28,-386.71 74,-386.71 74,-386.71 77,-386.71 80,-389.71 80,-392.71 80,-392.71 80,-398.71 80,-398.71 80,-401.71 77,-404.71 74,-404.71"/>
+<text text-anchor="start" x="30" y="-393.51" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/index.tsx&#45;&gt;src/Components/AppShell/index.tsx -->
-<g id="edge51" class="edge">
+<g id="edge61" class="edge">
 <title>src/index.tsx&#45;&gt;src/Components/AppShell/index.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M53.07,-497.03C56.64,-524.04 70.02,-605.73 107,-661 113.34,-670.48 122.79,-678.87 131.31,-685.25"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="130.36,-687.16 136.46,-688.96 132.81,-683.75 130.36,-687.16"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M52.54,-404.72C56.53,-470.09 81.88,-870.43 107,-917.71 112.2,-927.5 121.15,-935.75 129.64,-941.96"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="128.69,-943.86 134.82,-945.56 131.09,-940.41 128.69,-943.86"/>
 </g>
 <!-- src/index.tsx&#45;&gt;src/Components/Auth/index.tsx -->
-<g id="edge52" class="edge">
+<g id="edge62" class="edge">
 <title>src/index.tsx&#45;&gt;src/Components/Auth/index.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M61.16,-497.2C71.93,-507.93 90.44,-526.09 107,-541 115.97,-549.07 126.28,-557.78 134.67,-564.71"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="133.64,-566.59 139.61,-568.78 136.31,-563.34 133.64,-566.59"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M53.91,-386.49C59.04,-363.65 74.91,-303.48 107,-264.71 196.77,-156.27 371.24,-114.96 444.89,-101.9"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="445.3,-103.96 450.86,-100.87 444.59,-99.82 445.3,-103.96"/>
 </g>
 <!-- src/index.tsx&#45;&gt;src/Components/Gaming/index.tsx -->
-<g id="edge53" class="edge">
+<g id="edge63" class="edge">
 <title>src/index.tsx&#45;&gt;src/Components/Gaming/index.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M80.1,-488C91.5,-488 104.76,-488 116.71,-488"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="116.83,-490.1 122.83,-488 116.83,-485.9 116.83,-490.1"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M52.02,-404.87C52.33,-460.78 56.37,-756.33 107,-827.71 109.78,-831.63 113.46,-834.89 117.52,-837.59"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="116.58,-839.48 122.81,-840.72 118.71,-835.86 116.58,-839.48"/>
+</g>
+<!-- src/index.tsx&#45;&gt;src/Components/Input/index.tsx -->
+<g id="edge64" class="edge">
+<title>src/index.tsx&#45;&gt;src/Components/Input/index.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M52.12,-386.57C53.39,-329.59 67.92,-25.71 234,-25.71 234,-25.71 234,-25.71 345.5,-25.71 440.65,-25.71 492.1,35.44 559.5,-31.71 569.42,-41.6 561.3,-271.15 567.5,-283.71 575.96,-300.86 593,-314.32 607.3,-323.25"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="606.59,-325.27 612.82,-326.56 608.75,-321.67 606.59,-325.27"/>
 </g>
 <!-- src/index.tsx&#45;&gt;src/Components/Map/index.tsx -->
-<g id="edge54" class="edge">
+<g id="edge65" class="edge">
 <title>src/index.tsx&#45;&gt;src/Components/Map/index.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M56.64,-478.81C72.39,-447.63 123.88,-345.69 143.4,-307.04"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="145.42,-307.7 146.25,-301.4 141.67,-305.81 145.42,-307.7"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M56.17,-404.95C63.87,-420.98 81.87,-453.93 107,-471.71 110.07,-473.89 113.51,-475.7 117.07,-477.22"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="116.38,-479.2 122.74,-479.35 117.87,-475.27 116.38,-479.2"/>
 </g>
 <!-- src/index.tsx&#45;&gt;src/Components/Profile/index.tsx -->
-<g id="edge55" class="edge">
+<g id="edge66" class="edge">
 <title>src/index.tsx&#45;&gt;src/Components/Profile/index.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M52.71,-478.71C56.47,-431.02 75.14,-213.55 107,-155 112.91,-144.14 122.93,-134.68 131.91,-127.69"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="133.21,-129.34 136.76,-124.07 130.7,-125.98 133.21,-129.34"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M57.96,-386.46C67.29,-372.45 86.39,-345.49 107,-326.71 177.12,-262.82 276.13,-207.07 320.47,-183.58"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="321.52,-185.39 325.85,-180.74 319.56,-181.68 321.52,-185.39"/>
 </g>
 <!-- src/index.tsx&#45;&gt;src/Components/Templates/index.tsx -->
-<g id="edge56" class="edge">
+<g id="edge67" class="edge">
 <title>src/index.tsx&#45;&gt;src/Components/Templates/index.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M52.44,-478.83C55.09,-426.46 69.99,-165.05 107,-95 112.78,-84.06 122.78,-74.6 131.8,-67.63"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="133.1,-69.28 136.67,-64.02 130.6,-65.91 133.1,-69.28"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M69.8,-386.56C120.23,-360.61 264.08,-286.58 320.45,-257.58"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="321.56,-259.36 325.94,-254.75 319.64,-255.63 321.56,-259.36"/>
 </g>
 <!-- src/index.tsx&#45;&gt;src/index.css -->
-<g id="edge57" class="edge">
+<g id="edge68" class="edge">
 <title>src/index.tsx&#45;&gt;src/index.css</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M53.64,-497.19C62.41,-546.18 103.4,-774.55 107,-781 113.03,-791.8 123.05,-801.25 132.01,-808.25"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="130.79,-809.96 136.85,-811.88 133.31,-806.6 130.79,-809.96"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M52.76,-404.76C59.33,-482.56 106.08,-1035.85 107,-1037.71 112.41,-1048.65 122.19,-1058.01 131.16,-1064.92"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="129.95,-1066.63 136.03,-1068.5 132.44,-1063.25 129.95,-1066.63"/>
 </g>
 </g>
 </svg>
diff --git a/src/Components/Map/Layer.tsx b/src/Components/Map/Layer.tsx
index bf8627b2..230d44d4 100644
--- a/src/Components/Map/Layer.tsx
+++ b/src/Components/Map/Layer.tsx
@@ -8,6 +8,7 @@ import { useAddItem, useItems, useResetItems } from './hooks/useItems'
 import { useEffect, useState } from 'react'
 import { useAddLayer } from './hooks/useLayers'
 import { ItemFormPopupProps, ItemFormPopup } from './Subcomponents/ItemFormPopup'
+import { toast } from 'react-toastify'
 
 
 export const Layer = (props: LayerProps) => {
@@ -43,9 +44,7 @@ export const Layer = (props: LayerProps) => {
     const addLayer = useAddLayer();
     const resetItems = useResetItems();
 
-    useEffect(() => {
-        resetItems(props);
-
+    const loadItems = async () => {
         props.data?.map(item => {
             if (item.position) {
                 item.layer = props;
@@ -53,7 +52,15 @@ export const Layer = (props: LayerProps) => {
             }
         })
 
-        props.api?.getItems().then(result => {
+        if(props.api) {
+            const result = await toast.promise(
+                props.api!.getItems(),
+                {
+                  pending: `loading ${props.name} ...`,
+                  success: `${props.name} loaded` ,
+                  error: `error while loading ${props.name}`
+                }
+            );
             if (result) {
                 result.map(item => {
                     if (item.position) {
@@ -61,10 +68,20 @@ export const Layer = (props: LayerProps) => {
                     }
                 });
             }
-        })
-        if (props.api || props.api) {
+        }
+
+
+
+        if (props.api) {
             addLayer(props);
         }
+    }
+
+    useEffect(() => {
+        resetItems(props);
+        loadItems();
+
+
 
     }, [props.data, props.api])
 
@@ -82,6 +99,7 @@ export const Layer = (props: LayerProps) => {
                     if (tags[1]) {
                         color2 = tags[1].color;
                     }
+
                     return (
                         <Marker icon={MarkerIconFactory(props.markerShape, color1, color2, props.markerIcon)} key={place.id} position={[place.position.coordinates[1], place.position.coordinates[0]]}>