diff --git a/dependency-graph.svg b/dependency-graph.svg
index b9071069..08895c80 100644
--- a/dependency-graph.svg
+++ b/dependency-graph.svg
@@ -4,1159 +4,1481 @@
 <!-- Generated by graphviz version 2.43.0 (0)
  -->
 <!-- Title: dependency&#45;cruiser output Pages: 1 -->
-<svg width="874pt" height="1246pt"
- viewBox="0.00 0.00 873.50 1246.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 1242)">
+<svg width="1088pt" height="1604pt"
+ viewBox="0.00 0.00 1087.50 1604.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 1600)">
 <title>dependency&#45;cruiser output</title>
-<polygon fill="white" stroke="transparent" points="-4,4 -4,-1242 869.5,-1242 869.5,4 -4,4"/>
+<polygon fill="white" stroke="transparent" points="-4,4 -4,-1600 1083.5,-1600 1083.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 845.5,-8 845.5,-8 851.5,-8 857.5,-14 857.5,-20 857.5,-20 857.5,-1218 857.5,-1218 857.5,-1224 851.5,-1230 845.5,-1230 845.5,-1230 16,-1230 16,-1230 10,-1230 4,-1224 4,-1218 4,-1218 4,-20 4,-20 4,-14 10,-8 16,-8"/>
-<text text-anchor="middle" x="430.75" y="-1218.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,-8C16,-8 1059.5,-8 1059.5,-8 1065.5,-8 1071.5,-14 1071.5,-20 1071.5,-20 1071.5,-1576 1071.5,-1576 1071.5,-1582 1065.5,-1588 1059.5,-1588 1059.5,-1588 16,-1588 16,-1588 10,-1588 4,-1582 4,-1576 4,-1576 4,-20 4,-20 4,-14 10,-8 16,-8"/>
+<text text-anchor="middle" x="537.75" y="-1576.8" 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,-196C119,-196 837,-196 837,-196 843,-196 849,-202 849,-208 849,-208 849,-1138 849,-1138 849,-1144 843,-1150 837,-1150 837,-1150 119,-1150 119,-1150 113,-1150 107,-1144 107,-1138 107,-1138 107,-208 107,-208 107,-202 113,-196 119,-196"/>
-<text text-anchor="middle" x="478" y="-1138.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,-256C119,-256 1051.5,-256 1051.5,-256 1057.5,-256 1063.5,-262 1063.5,-268 1063.5,-268 1063.5,-1468 1063.5,-1468 1063.5,-1474 1057.5,-1480 1051.5,-1480 1051.5,-1480 119,-1480 119,-1480 113,-1480 107,-1474 107,-1468 107,-1468 107,-268 107,-268 107,-262 113,-256 119,-256"/>
+<text text-anchor="middle" x="585.25" y="-1468.8" 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,-952C127,-952 524.5,-952 524.5,-952 530.5,-952 536.5,-958 536.5,-964 536.5,-964 536.5,-1052 536.5,-1052 536.5,-1058 530.5,-1064 524.5,-1064 524.5,-1064 127,-1064 127,-1064 121,-1064 115,-1058 115,-1052 115,-1052 115,-964 115,-964 115,-958 121,-952 127,-952"/>
-<text text-anchor="middle" x="325.75" y="-1052.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">AppShell</text>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M212.5,-966C212.5,-966 685,-966 685,-966 691,-966 697,-972 697,-978 697,-978 697,-1080 697,-1080 697,-1086 691,-1092 685,-1092 685,-1092 212.5,-1092 212.5,-1092 206.5,-1092 200.5,-1086 200.5,-1080 200.5,-1080 200.5,-978 200.5,-978 200.5,-972 206.5,-966 212.5,-966"/>
+<text text-anchor="middle" x="448.75" y="-1080.8" 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="M460,-832C460,-832 686,-832 686,-832 692,-832 698,-838 698,-844 698,-844 698,-932 698,-932 698,-938 692,-944 686,-944 686,-944 460,-944 460,-944 454,-944 448,-938 448,-932 448,-932 448,-844 448,-844 448,-838 454,-832 460,-832"/>
-<text text-anchor="middle" x="573" y="-932.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Auth</text>
+<title>cluster_src/Components/AppShell/hooks</title>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M608,-977C608,-977 677,-977 677,-977 683,-977 689,-983 689,-989 689,-989 689,-1017 689,-1017 689,-1023 683,-1029 677,-1029 677,-1029 608,-1029 608,-1029 602,-1029 596,-1023 596,-1017 596,-1017 596,-989 596,-989 596,-983 602,-977 608,-977"/>
+<text text-anchor="middle" x="642.5" y="-1017.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">hooks</text>
 </g>
 <g id="clust5" class="cluster">
-<title>cluster_src/Components/Gaming</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M127,-862C127,-862 265.5,-862 265.5,-862 271.5,-862 277.5,-868 277.5,-874 277.5,-874 277.5,-932 277.5,-932 277.5,-938 271.5,-944 265.5,-944 265.5,-944 127,-944 127,-944 121,-944 115,-938 115,-932 115,-932 115,-874 115,-874 115,-868 121,-862 127,-862"/>
-<text text-anchor="middle" x="196.25" y="-932.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Gaming</text>
+<title>cluster_src/Components/Auth</title>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M617.5,-1100C617.5,-1100 820.5,-1100 820.5,-1100 826.5,-1100 832.5,-1106 832.5,-1112 832.5,-1112 832.5,-1200 832.5,-1200 832.5,-1206 826.5,-1212 820.5,-1212 820.5,-1212 617.5,-1212 617.5,-1212 611.5,-1212 605.5,-1206 605.5,-1200 605.5,-1200 605.5,-1112 605.5,-1112 605.5,-1106 611.5,-1100 617.5,-1100"/>
+<text text-anchor="middle" x="719" y="-1200.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Auth</text>
 </g>
 <g id="clust6" class="cluster">
-<title>cluster_src/Components/Input</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M621.5,-952C621.5,-952 829,-952 829,-952 835,-952 841,-958 841,-964 841,-964 841,-1022 841,-1022 841,-1028 835,-1034 829,-1034 829,-1034 621.5,-1034 621.5,-1034 615.5,-1034 609.5,-1028 609.5,-1022 609.5,-1022 609.5,-964 609.5,-964 609.5,-958 615.5,-952 621.5,-952"/>
-<text text-anchor="middle" x="725.25" y="-1022.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Input</text>
+<title>cluster_src/Components/Gaming</title>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M212.5,-1100C212.5,-1100 525,-1100 525,-1100 531,-1100 537,-1106 537,-1112 537,-1112 537,-1174 537,-1174 537,-1180 531,-1186 525,-1186 525,-1186 212.5,-1186 212.5,-1186 206.5,-1186 200.5,-1180 200.5,-1174 200.5,-1174 200.5,-1112 200.5,-1112 200.5,-1106 206.5,-1100 212.5,-1100"/>
+<text text-anchor="middle" x="368.75" y="-1174.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Gaming</text>
 </g>
 <g id="clust7" class="cluster">
-<title>cluster_src/Components/Map</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M127,-204C127,-204 828,-204 828,-204 834,-204 840,-210 840,-216 840,-216 840,-736 840,-736 840,-742 834,-748 828,-748 828,-748 127,-748 127,-748 121,-748 115,-742 115,-736 115,-736 115,-216 115,-216 115,-210 121,-204 127,-204"/>
-<text text-anchor="middle" x="477.5" y="-736.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Map</text>
+<title>cluster_src/Components/Gaming/hooks</title>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M445,-1108C445,-1108 517,-1108 517,-1108 523,-1108 529,-1114 529,-1120 529,-1120 529,-1148 529,-1148 529,-1154 523,-1160 517,-1160 517,-1160 445,-1160 445,-1160 439,-1160 433,-1154 433,-1148 433,-1148 433,-1120 433,-1120 433,-1114 439,-1108 445,-1108"/>
+<text text-anchor="middle" x="481" y="-1148.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">hooks</text>
 </g>
 <g id="clust8" class="cluster">
-<title>cluster_src/Components/Map/Subcomponents</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M301,-292C301,-292 552.5,-292 552.5,-292 558.5,-292 564.5,-298 564.5,-304 564.5,-304 564.5,-516 564.5,-516 564.5,-522 558.5,-528 552.5,-528 552.5,-528 301,-528 301,-528 295,-528 289,-522 289,-516 289,-516 289,-304 289,-304 289,-298 295,-292 301,-292"/>
-<text text-anchor="middle" x="426.75" y="-516.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Subcomponents</text>
+<title>cluster_src/Components/Input</title>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M756,-964C756,-964 945.5,-964 945.5,-964 951.5,-964 957.5,-970 957.5,-976 957.5,-976 957.5,-1064 957.5,-1064 957.5,-1070 951.5,-1076 945.5,-1076 945.5,-1076 756,-1076 756,-1076 750,-1076 744,-1070 744,-1064 744,-1064 744,-976 744,-976 744,-970 750,-964 756,-964"/>
+<text text-anchor="middle" x="850.75" y="-1064.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Input</text>
 </g>
 <g id="clust9" class="cluster">
-<title>cluster_src/Components/Map/Subcomponents/ItemPopupComponents</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M425.5,-300C425.5,-300 544.5,-300 544.5,-300 550.5,-300 556.5,-306 556.5,-312 556.5,-312 556.5,-490 556.5,-490 556.5,-496 550.5,-502 544.5,-502 544.5,-502 425.5,-502 425.5,-502 419.5,-502 413.5,-496 413.5,-490 413.5,-490 413.5,-312 413.5,-312 413.5,-306 419.5,-300 425.5,-300"/>
-<text text-anchor="middle" x="485" y="-490.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">ItemPopupComponents</text>
+<title>cluster_src/Components/Map</title>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M127,-264C127,-264 824,-264 824,-264 830,-264 836,-270 836,-276 836,-276 836,-944 836,-944 836,-950 830,-956 824,-956 824,-956 127,-956 127,-956 121,-956 115,-950 115,-944 115,-944 115,-276 115,-276 115,-270 121,-264 127,-264"/>
+<text text-anchor="middle" x="475.5" y="-944.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Map</text>
 </g>
 <g id="clust10" class="cluster">
-<title>cluster_src/Components/Map/hooks</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M584.5,-488C584.5,-488 820,-488 820,-488 826,-488 832,-494 832,-500 832,-500 832,-678 832,-678 832,-684 826,-690 820,-690 820,-690 584.5,-690 584.5,-690 578.5,-690 572.5,-684 572.5,-678 572.5,-678 572.5,-500 572.5,-500 572.5,-494 578.5,-488 584.5,-488"/>
-<text text-anchor="middle" x="702.25" y="-678.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">hooks</text>
+<title>cluster_src/Components/Map/Subcomponents</title>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M300.5,-540C300.5,-540 548.5,-540 548.5,-540 554.5,-540 560.5,-546 560.5,-552 560.5,-552 560.5,-794 560.5,-794 560.5,-800 554.5,-806 548.5,-806 548.5,-806 300.5,-806 300.5,-806 294.5,-806 288.5,-800 288.5,-794 288.5,-794 288.5,-552 288.5,-552 288.5,-546 294.5,-540 300.5,-540"/>
+<text text-anchor="middle" x="424.5" y="-794.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Subcomponents</text>
 </g>
 <g id="clust11" class="cluster">
-<title>cluster_src/Components/Profile</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M212.5,-1072C212.5,-1072 381,-1072 381,-1072 387,-1072 393,-1078 393,-1084 393,-1084 393,-1112 393,-1112 393,-1118 387,-1124 381,-1124 381,-1124 212.5,-1124 212.5,-1124 206.5,-1124 200.5,-1118 200.5,-1112 200.5,-1112 200.5,-1084 200.5,-1084 200.5,-1078 206.5,-1072 212.5,-1072"/>
-<text text-anchor="middle" x="296.75" y="-1112.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Profile</text>
+<title>cluster_src/Components/Map/Subcomponents/ItemPopupComponents</title>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M421.5,-548C421.5,-548 540.5,-548 540.5,-548 546.5,-548 552.5,-554 552.5,-560 552.5,-560 552.5,-768 552.5,-768 552.5,-774 546.5,-780 540.5,-780 540.5,-780 421.5,-780 421.5,-780 415.5,-780 409.5,-774 409.5,-768 409.5,-768 409.5,-560 409.5,-560 409.5,-554 415.5,-548 421.5,-548"/>
+<text text-anchor="middle" x="481" y="-768.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">ItemPopupComponents</text>
 </g>
 <g id="clust12" class="cluster">
-<title>cluster_src/Components/Templates</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M324.5,-758C324.5,-758 679,-758 679,-758 685,-758 691,-764 691,-770 691,-770 691,-812 691,-812 691,-818 685,-824 679,-824 679,-824 324.5,-824 324.5,-824 318.5,-824 312.5,-818 312.5,-812 312.5,-812 312.5,-770 312.5,-770 312.5,-764 318.5,-758 324.5,-758"/>
-<text text-anchor="middle" x="501.75" y="-812.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Templates</text>
+<title>cluster_src/Components/Map/hooks</title>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M580.5,-323C580.5,-323 816,-323 816,-323 822,-323 828,-329 828,-335 828,-335 828,-513 828,-513 828,-519 822,-525 816,-525 816,-525 580.5,-525 580.5,-525 574.5,-525 568.5,-519 568.5,-513 568.5,-513 568.5,-335 568.5,-335 568.5,-329 574.5,-323 580.5,-323"/>
+<text text-anchor="middle" x="698.25" y="-513.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">hooks</text>
 </g>
 <g id="clust13" class="cluster">
-<title>cluster_src/Components/Typography</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M752,-802C752,-802 818,-802 818,-802 824,-802 830,-808 830,-814 830,-814 830,-872 830,-872 830,-878 824,-884 818,-884 818,-884 752,-884 752,-884 746,-884 740,-878 740,-872 740,-872 740,-814 740,-814 740,-808 746,-802 752,-802"/>
-<text text-anchor="middle" x="785" y="-872.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Typography</text>
+<title>cluster_src/Components/Profile</title>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M324,-1282C324,-1282 829,-1282 829,-1282 835,-1282 841,-1288 841,-1294 841,-1294 841,-1352 841,-1352 841,-1358 835,-1364 829,-1364 829,-1364 324,-1364 324,-1364 318,-1364 312,-1358 312,-1352 312,-1352 312,-1294 312,-1294 312,-1288 318,-1282 324,-1282"/>
+<text text-anchor="middle" x="576.5" y="-1352.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Profile</text>
 </g>
 <g id="clust14" class="cluster">
-<title>cluster_src/SampleData</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M24,-1076C24,-1076 79,-1076 79,-1076 85,-1076 91,-1082 91,-1088 91,-1088 91,-1116 91,-1116 91,-1122 85,-1128 79,-1128 79,-1128 24,-1128 24,-1128 18,-1128 12,-1122 12,-1116 12,-1116 12,-1088 12,-1088 12,-1082 18,-1076 24,-1076"/>
-<text text-anchor="middle" x="51.5" y="-1116.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">SampleData</text>
+<title>cluster_src/Components/Templates</title>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M603,-1372C603,-1372 934,-1372 934,-1372 940,-1372 946,-1378 946,-1384 946,-1384 946,-1442 946,-1442 946,-1448 940,-1454 934,-1454 934,-1454 603,-1454 603,-1454 597,-1454 591,-1448 591,-1442 591,-1442 591,-1384 591,-1384 591,-1378 597,-1372 603,-1372"/>
+<text text-anchor="middle" x="768.5" y="-1442.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Templates</text>
 </g>
 <g id="clust15" class="cluster">
+<title>cluster_src/Components/Typography</title>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M977.5,-1130C977.5,-1130 1043.5,-1130 1043.5,-1130 1049.5,-1130 1055.5,-1136 1055.5,-1142 1055.5,-1142 1055.5,-1200 1055.5,-1200 1055.5,-1206 1049.5,-1212 1043.5,-1212 1043.5,-1212 977.5,-1212 977.5,-1212 971.5,-1212 965.5,-1206 965.5,-1200 965.5,-1200 965.5,-1142 965.5,-1142 965.5,-1136 971.5,-1130 977.5,-1130"/>
+<text text-anchor="middle" x="1010.5" y="-1200.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Typography</text>
+</g>
+<g id="clust16" class="cluster">
+<title>cluster_src/SampleData</title>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M24,-1509C24,-1509 79,-1509 79,-1509 85,-1509 91,-1515 91,-1521 91,-1521 91,-1549 91,-1549 91,-1555 85,-1561 79,-1561 79,-1561 24,-1561 24,-1561 18,-1561 12,-1555 12,-1549 12,-1549 12,-1521 12,-1521 12,-1515 18,-1509 24,-1509"/>
+<text text-anchor="middle" x="51.5" y="-1549.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">SampleData</text>
+</g>
+<g id="clust17" class="cluster">
 <title>cluster_src/Utils</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M732.5,-16C732.5,-16 837.5,-16 837.5,-16 843.5,-16 849.5,-22 849.5,-28 849.5,-28 849.5,-176 849.5,-176 849.5,-182 843.5,-188 837.5,-188 837.5,-188 732.5,-188 732.5,-188 726.5,-188 720.5,-182 720.5,-176 720.5,-176 720.5,-28 720.5,-28 720.5,-22 726.5,-16 732.5,-16"/>
-<text text-anchor="middle" x="785" y="-176.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Utils</text>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M728.5,-16C728.5,-16 833.5,-16 833.5,-16 839.5,-16 845.5,-22 845.5,-28 845.5,-28 845.5,-236 845.5,-236 845.5,-242 839.5,-248 833.5,-248 833.5,-248 728.5,-248 728.5,-248 722.5,-248 716.5,-242 716.5,-236 716.5,-236 716.5,-28 716.5,-28 716.5,-22 722.5,-16 728.5,-16"/>
+<text text-anchor="middle" x="781" y="-236.8" 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,-978C268,-978 207,-978 207,-978 204,-978 201,-975 201,-972 201,-972 201,-966 201,-966 201,-963 204,-960 207,-960 207,-960 268,-960 268,-960 271,-960 274,-963 274,-966 274,-966 274,-972 274,-972 274,-975 271,-978 268,-978"/>
-<text text-anchor="start" x="209" y="-966.8" font-family="Helvetica,sans-Serif" font-size="9.00">AppShell.tsx</text>
+<path fill="#bbfeff" stroke="black" d="M379.5,-1006C379.5,-1006 318.5,-1006 318.5,-1006 315.5,-1006 312.5,-1003 312.5,-1000 312.5,-1000 312.5,-994 312.5,-994 312.5,-991 315.5,-988 318.5,-988 318.5,-988 379.5,-988 379.5,-988 382.5,-988 385.5,-991 385.5,-994 385.5,-994 385.5,-1000 385.5,-1000 385.5,-1003 382.5,-1006 379.5,-1006"/>
+<text text-anchor="start" x="320.5" y="-994.8" font-family="Helvetica,sans-Serif" font-size="9.00">AppShell.tsx</text>
 </a>
 </g>
 </g>
-<!-- src/Components/AppShell/NavBar.tsx -->
+<!-- src/Components/Gaming/hooks/useQuests.tsx -->
 <g id="node2" class="node">
+<title>src/Components/Gaming/hooks/useQuests.tsx</title>
+<g id="a_node2"><a xlink:href="src/Components/Gaming/hooks/useQuests.tsx" xlink:title="useQuests.tsx">
+<path fill="#bbfeff" stroke="black" d="M515,-1134C515,-1134 447,-1134 447,-1134 444,-1134 441,-1131 441,-1128 441,-1128 441,-1122 441,-1122 441,-1119 444,-1116 447,-1116 447,-1116 515,-1116 515,-1116 518,-1116 521,-1119 521,-1122 521,-1122 521,-1128 521,-1128 521,-1131 518,-1134 515,-1134"/>
+<text text-anchor="start" x="449" y="-1122.8" font-family="Helvetica,sans-Serif" font-size="9.00">useQuests.tsx</text>
+</a>
+</g>
+</g>
+<!-- src/Components/AppShell/AppShell.tsx&#45;&gt;src/Components/Gaming/hooks/useQuests.tsx -->
+<g id="edge1" class="edge">
+<title>src/Components/AppShell/AppShell.tsx&#45;&gt;src/Components/Gaming/hooks/useQuests.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M385.73,-1001.4C391.77,-1003.68 397.4,-1007.05 401.5,-1012 413.32,-1026.27 398.55,-1080.05 409.5,-1095 415.81,-1103.61 425.09,-1109.77 434.86,-1114.17"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="434.3,-1116.21 440.65,-1116.56 435.91,-1112.33 434.3,-1116.21"/>
+</g>
+<!-- src/Components/AppShell/hooks/useAssets.tsx -->
+<g id="node3" class="node">
+<title>src/Components/AppShell/hooks/useAssets.tsx</title>
+<g id="a_node3"><a xlink:href="src/Components/AppShell/hooks/useAssets.tsx" xlink:title="useAssets.tsx">
+<path fill="#bbfeff" stroke="black" d="M675,-1003C675,-1003 610,-1003 610,-1003 607,-1003 604,-1000 604,-997 604,-997 604,-991 604,-991 604,-988 607,-985 610,-985 610,-985 675,-985 675,-985 678,-985 681,-988 681,-991 681,-991 681,-997 681,-997 681,-1000 678,-1003 675,-1003"/>
+<text text-anchor="start" x="612" y="-991.8" font-family="Helvetica,sans-Serif" font-size="9.00">useAssets.tsx</text>
+</a>
+</g>
+</g>
+<!-- src/Components/AppShell/AppShell.tsx&#45;&gt;src/Components/AppShell/hooks/useAssets.tsx -->
+<g id="edge2" class="edge">
+<title>src/Components/AppShell/AppShell.tsx&#45;&gt;src/Components/AppShell/hooks/useAssets.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M379.69,-987.98C389.13,-985.53 399.67,-983.22 409.5,-982 476.1,-973.73 493.57,-977.07 560.5,-982 572.57,-982.89 585.58,-984.51 597.56,-986.29"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="597.47,-988.4 603.72,-987.23 598.1,-984.25 597.47,-988.4"/>
+</g>
+<!-- src/Components/AppShell/NavBar.tsx -->
+<g id="node4" 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="M376,-978C376,-978 323,-978 323,-978 320,-978 317,-975 317,-972 317,-972 317,-966 317,-966 317,-963 320,-960 323,-960 323,-960 376,-960 376,-960 379,-960 382,-963 382,-966 382,-966 382,-972 382,-972 382,-975 379,-978 376,-978"/>
-<text text-anchor="start" x="325" y="-966.8" font-family="Helvetica,sans-Serif" font-size="9.00">NavBar.tsx</text>
+<g id="a_node4"><a xlink:href="src/Components/AppShell/NavBar.tsx" xlink:title="NavBar.tsx">
+<path fill="#bbfeff" stroke="black" d="M507.5,-1036C507.5,-1036 454.5,-1036 454.5,-1036 451.5,-1036 448.5,-1033 448.5,-1030 448.5,-1030 448.5,-1024 448.5,-1024 448.5,-1021 451.5,-1018 454.5,-1018 454.5,-1018 507.5,-1018 507.5,-1018 510.5,-1018 513.5,-1021 513.5,-1024 513.5,-1024 513.5,-1030 513.5,-1030 513.5,-1033 510.5,-1036 507.5,-1036"/>
+<text text-anchor="start" x="456.5" y="-1024.8" 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">
+<g id="edge3" 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.21,-969C285.86,-969 298.83,-969 310.63,-969"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="310.68,-971.1 316.68,-969 310.68,-966.9 310.68,-971.1"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M384.87,-1006.02C392.94,-1008.05 401.51,-1010.14 409.5,-1012 420.1,-1014.46 431.63,-1016.98 442.23,-1019.24"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="442.05,-1021.34 448.36,-1020.53 442.92,-1017.24 442.05,-1021.34"/>
 </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="M522.5,-978C522.5,-978 447.5,-978 447.5,-978 444.5,-978 441.5,-975 441.5,-972 441.5,-972 441.5,-966 441.5,-966 441.5,-963 444.5,-960 447.5,-960 447.5,-960 522.5,-960 522.5,-960 525.5,-960 528.5,-963 528.5,-966 528.5,-966 528.5,-972 528.5,-972 528.5,-975 525.5,-978 522.5,-978"/>
-<text text-anchor="start" x="449.5" y="-966.8" font-family="Helvetica,sans-Serif" font-size="9.00">DialogModal.tsx</text>
+<!-- src/Components/AppShell/SetAssetsApi.tsx -->
+<g id="node5" class="node">
+<title>src/Components/AppShell/SetAssetsApi.tsx</title>
+<g id="a_node5"><a xlink:href="src/Components/AppShell/SetAssetsApi.tsx" xlink:title="SetAssetsApi.tsx">
+<path fill="#bbfeff" stroke="black" d="M520.5,-1006C520.5,-1006 441.5,-1006 441.5,-1006 438.5,-1006 435.5,-1003 435.5,-1000 435.5,-1000 435.5,-994 435.5,-994 435.5,-991 438.5,-988 441.5,-988 441.5,-988 520.5,-988 520.5,-988 523.5,-988 526.5,-991 526.5,-994 526.5,-994 526.5,-1000 526.5,-1000 526.5,-1003 523.5,-1006 520.5,-1006"/>
+<text text-anchor="start" x="443.5" y="-994.8" font-family="Helvetica,sans-Serif" font-size="9.00">SetAssetsApi.tsx</text>
 </a>
 </g>
 </g>
-<!-- src/Components/AppShell/NavBar.tsx&#45;&gt;src/Components/AppShell/DialogModal.tsx -->
-<g id="edge3" 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="M382.14,-969C397.93,-969 417.39,-969 435.06,-969"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="435.48,-971.1 441.48,-969 435.48,-966.9 435.48,-971.1"/>
+<!-- src/Components/AppShell/AppShell.tsx&#45;&gt;src/Components/AppShell/SetAssetsApi.tsx -->
+<g id="edge4" class="edge">
+<title>src/Components/AppShell/AppShell.tsx&#45;&gt;src/Components/AppShell/SetAssetsApi.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M385.52,-997C398.94,-997 414.49,-997 429.05,-997"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="429.22,-999.1 435.22,-997 429.22,-994.9 429.22,-999.1"/>
 </g>
 <!-- src/Components/Auth/index.tsx -->
-<g id="node5" class="node">
+<g id="node7" class="node">
 <title>src/Components/Auth/index.tsx</title>
-<g id="a_node5"><a xlink:href="src/Components/Auth/index.tsx" xlink:title="index.tsx">
-<path fill="#bbfeff" stroke="black" d="M508,-873C508,-873 462,-873 462,-873 459,-873 456,-870 456,-867 456,-867 456,-861 456,-861 456,-858 459,-855 462,-855 462,-855 508,-855 508,-855 511,-855 514,-858 514,-861 514,-861 514,-867 514,-867 514,-870 511,-873 508,-873"/>
-<text text-anchor="start" x="464" y="-861.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
+<g id="a_node7"><a xlink:href="src/Components/Auth/index.tsx" xlink:title="index.tsx">
+<path fill="#bbfeff" stroke="black" d="M665.5,-1141C665.5,-1141 619.5,-1141 619.5,-1141 616.5,-1141 613.5,-1138 613.5,-1135 613.5,-1135 613.5,-1129 613.5,-1129 613.5,-1126 616.5,-1123 619.5,-1123 619.5,-1123 665.5,-1123 665.5,-1123 668.5,-1123 671.5,-1126 671.5,-1129 671.5,-1129 671.5,-1135 671.5,-1135 671.5,-1138 668.5,-1141 665.5,-1141"/>
+<text text-anchor="start" x="621.5" y="-1129.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/AppShell/NavBar.tsx&#45;&gt;src/Components/Auth/index.tsx -->
-<g id="edge2" class="edge">
+<g id="edge5" class="edge">
 <title>src/Components/AppShell/NavBar.tsx&#45;&gt;src/Components/Auth/index.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M362.35,-959.68C386.26,-940.88 440.32,-898.35 467.6,-876.9"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="468.95,-878.51 472.37,-873.15 466.36,-875.21 468.95,-878.51"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M513.79,-1028.41C528.75,-1030.21 546.36,-1034.03 560.5,-1042 593.31,-1060.5 619.87,-1097.18 632.85,-1117.54"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="631.19,-1118.84 636.15,-1122.82 634.75,-1116.62 631.19,-1118.84"/>
+</g>
+<!-- src/Components/Templates/DialogModal.tsx -->
+<g id="node8" class="node">
+<title>src/Components/Templates/DialogModal.tsx</title>
+<g id="a_node8"><a xlink:href="src/Components/Templates/DialogModal.tsx" xlink:title="DialogModal.tsx">
+<path fill="#bbfeff" stroke="black" d="M680,-1398C680,-1398 605,-1398 605,-1398 602,-1398 599,-1395 599,-1392 599,-1392 599,-1386 599,-1386 599,-1383 602,-1380 605,-1380 605,-1380 680,-1380 680,-1380 683,-1380 686,-1383 686,-1386 686,-1386 686,-1392 686,-1392 686,-1395 683,-1398 680,-1398"/>
+<text text-anchor="start" x="607" y="-1386.8" font-family="Helvetica,sans-Serif" font-size="9.00">DialogModal.tsx</text>
+</a>
+</g>
+</g>
+<!-- src/Components/AppShell/NavBar.tsx&#45;&gt;src/Components/Templates/DialogModal.tsx -->
+<g id="edge6" class="edge">
+<title>src/Components/AppShell/NavBar.tsx&#45;&gt;src/Components/Templates/DialogModal.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M513.82,-1024.37C530.3,-1024.89 549.28,-1028.77 560.5,-1042 572.18,-1055.78 557.55,-1352.64 568.5,-1367 574.55,-1374.93 583.36,-1380.1 592.79,-1383.45"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="592.36,-1385.51 598.72,-1385.3 593.62,-1381.51 592.36,-1385.51"/>
+</g>
+<!-- src/Components/AppShell/SetAssetsApi.tsx&#45;&gt;src/Components/AppShell/hooks/useAssets.tsx -->
+<g id="edge7" class="edge">
+<title>src/Components/AppShell/SetAssetsApi.tsx&#45;&gt;src/Components/AppShell/hooks/useAssets.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M526.85,-996.16C549.09,-995.74 575.83,-995.24 597.89,-994.82"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="598.03,-996.92 603.98,-994.71 597.95,-992.72 598.03,-996.92"/>
 </g>
 <!-- src/Components/AppShell/Content.tsx -->
-<g id="node3" class="node">
+<g id="node6" 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,-1008C266,-1008 209,-1008 209,-1008 206,-1008 203,-1005 203,-1002 203,-1002 203,-996 203,-996 203,-993 206,-990 209,-990 209,-990 266,-990 266,-990 269,-990 272,-993 272,-996 272,-996 272,-1002 272,-1002 272,-1005 269,-1008 266,-1008"/>
-<text text-anchor="start" x="211" y="-996.8" font-family="Helvetica,sans-Serif" font-size="9.00">Content.tsx</text>
+<g id="a_node6"><a xlink:href="src/Components/AppShell/Content.tsx" xlink:title="Content.tsx">
+<path fill="#bbfeff" stroke="black" d="M377.5,-1036C377.5,-1036 320.5,-1036 320.5,-1036 317.5,-1036 314.5,-1033 314.5,-1030 314.5,-1030 314.5,-1024 314.5,-1024 314.5,-1021 317.5,-1018 320.5,-1018 320.5,-1018 377.5,-1018 377.5,-1018 380.5,-1018 383.5,-1021 383.5,-1024 383.5,-1024 383.5,-1030 383.5,-1030 383.5,-1033 380.5,-1036 377.5,-1036"/>
+<text text-anchor="start" x="322.5" y="-1024.8" font-family="Helvetica,sans-Serif" font-size="9.00">Content.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Auth/LoginPage.tsx -->
-<g id="node9" class="node">
+<g id="node12" class="node">
 <title>src/Components/Auth/LoginPage.tsx</title>
-<g id="a_node9"><a xlink:href="src/Components/Auth/LoginPage.tsx" xlink:title="LoginPage.tsx">
-<path fill="#bbfeff" stroke="black" d="M680,-858C680,-858 613,-858 613,-858 610,-858 607,-855 607,-852 607,-852 607,-846 607,-846 607,-843 610,-840 613,-840 613,-840 680,-840 680,-840 683,-840 686,-843 686,-846 686,-846 686,-852 686,-852 686,-855 683,-858 680,-858"/>
-<text text-anchor="start" x="615" y="-846.8" font-family="Helvetica,sans-Serif" font-size="9.00">LoginPage.tsx</text>
+<g id="a_node12"><a xlink:href="src/Components/Auth/LoginPage.tsx" xlink:title="LoginPage.tsx">
+<path fill="#bbfeff" stroke="black" d="M814.5,-1126C814.5,-1126 747.5,-1126 747.5,-1126 744.5,-1126 741.5,-1123 741.5,-1120 741.5,-1120 741.5,-1114 741.5,-1114 741.5,-1111 744.5,-1108 747.5,-1108 747.5,-1108 814.5,-1108 814.5,-1108 817.5,-1108 820.5,-1111 820.5,-1114 820.5,-1114 820.5,-1120 820.5,-1120 820.5,-1123 817.5,-1126 814.5,-1126"/>
+<text text-anchor="start" x="749.5" y="-1114.8" font-family="Helvetica,sans-Serif" font-size="9.00">LoginPage.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Auth/index.tsx&#45;&gt;src/Components/Auth/LoginPage.tsx -->
-<g id="edge12" class="edge">
+<g id="edge16" 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="M514.15,-861.35C538.09,-859.1 572.92,-855.83 600.69,-853.21"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="601.09,-855.29 606.86,-852.63 600.69,-851.1 601.09,-855.29"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M671.78,-1128.89C690.12,-1126.88 714.4,-1124.21 735.31,-1121.91"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="735.67,-1123.98 741.4,-1121.24 735.21,-1119.81 735.67,-1123.98"/>
 </g>
 <!-- src/Components/Auth/SignupPage.tsx -->
-<g id="node12" class="node">
+<g id="node15" class="node">
 <title>src/Components/Auth/SignupPage.tsx</title>
-<g id="a_node12"><a xlink:href="src/Components/Auth/SignupPage.tsx" xlink:title="SignupPage.tsx">
-<path fill="#bbfeff" stroke="black" d="M684,-888C684,-888 609,-888 609,-888 606,-888 603,-885 603,-882 603,-882 603,-876 603,-876 603,-873 606,-870 609,-870 609,-870 684,-870 684,-870 687,-870 690,-873 690,-876 690,-876 690,-882 690,-882 690,-885 687,-888 684,-888"/>
-<text text-anchor="start" x="611" y="-876.8" font-family="Helvetica,sans-Serif" font-size="9.00">SignupPage.tsx</text>
+<g id="a_node15"><a xlink:href="src/Components/Auth/SignupPage.tsx" xlink:title="SignupPage.tsx">
+<path fill="#bbfeff" stroke="black" d="M818.5,-1156C818.5,-1156 743.5,-1156 743.5,-1156 740.5,-1156 737.5,-1153 737.5,-1150 737.5,-1150 737.5,-1144 737.5,-1144 737.5,-1141 740.5,-1138 743.5,-1138 743.5,-1138 818.5,-1138 818.5,-1138 821.5,-1138 824.5,-1141 824.5,-1144 824.5,-1144 824.5,-1150 824.5,-1150 824.5,-1153 821.5,-1156 818.5,-1156"/>
+<text text-anchor="start" x="745.5" y="-1144.8" font-family="Helvetica,sans-Serif" font-size="9.00">SignupPage.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Auth/index.tsx&#45;&gt;src/Components/Auth/SignupPage.tsx -->
-<g id="edge13" class="edge">
+<g id="edge17" 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="M514.15,-866.65C537.01,-868.8 569.79,-871.88 596.89,-874.43"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="596.76,-876.53 602.93,-875 597.15,-872.34 596.76,-876.53"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M671.78,-1135.11C688.98,-1137 711.4,-1139.46 731.38,-1141.66"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="731.29,-1143.76 737.49,-1142.33 731.75,-1139.59 731.29,-1143.76"/>
 </g>
 <!-- src/Components/Auth/useAuth.tsx -->
-<g id="node13" class="node">
+<g id="node16" 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="M676,-918C676,-918 617,-918 617,-918 614,-918 611,-915 611,-912 611,-912 611,-906 611,-906 611,-903 614,-900 617,-900 617,-900 676,-900 676,-900 679,-900 682,-903 682,-906 682,-906 682,-912 682,-912 682,-915 679,-918 676,-918"/>
-<text text-anchor="start" x="619" y="-906.8" font-family="Helvetica,sans-Serif" font-size="9.00">useAuth.tsx</text>
+<g id="a_node16"><a xlink:href="src/Components/Auth/useAuth.tsx" xlink:title="useAuth.tsx">
+<path fill="#bbfeff" stroke="black" d="M810.5,-1186C810.5,-1186 751.5,-1186 751.5,-1186 748.5,-1186 745.5,-1183 745.5,-1180 745.5,-1180 745.5,-1174 745.5,-1174 745.5,-1171 748.5,-1168 751.5,-1168 751.5,-1168 810.5,-1168 810.5,-1168 813.5,-1168 816.5,-1171 816.5,-1174 816.5,-1174 816.5,-1180 816.5,-1180 816.5,-1183 813.5,-1186 810.5,-1186"/>
+<text text-anchor="start" x="753.5" y="-1174.8" 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="edge14" class="edge">
+<g id="edge18" 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="M509.6,-873.13C526.84,-879.56 550.89,-888.06 572.5,-894 582.82,-896.84 594.1,-899.41 604.64,-901.59"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="604.45,-903.69 610.74,-902.83 605.28,-899.58 604.45,-903.69"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M663.02,-1141.01C677.54,-1147.47 697.98,-1156.05 716.5,-1162 723.89,-1164.38 731.88,-1166.55 739.61,-1168.47"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="739.13,-1170.52 745.45,-1169.88 740.12,-1166.43 739.13,-1170.52"/>
 </g>
 <!-- src/Components/AppShell/SideBar.tsx -->
-<g id="node6" class="node">
+<g id="node9" class="node">
 <title>src/Components/AppShell/SideBar.tsx</title>
-<g id="a_node6"><a xlink:href="src/Components/AppShell/SideBar.tsx" xlink:title="SideBar.tsx">
-<path fill="#bbfeff" stroke="black" d="M265,-1038C265,-1038 210,-1038 210,-1038 207,-1038 204,-1035 204,-1032 204,-1032 204,-1026 204,-1026 204,-1023 207,-1020 210,-1020 210,-1020 265,-1020 265,-1020 268,-1020 271,-1023 271,-1026 271,-1026 271,-1032 271,-1032 271,-1035 268,-1038 265,-1038"/>
-<text text-anchor="start" x="212" y="-1026.8" font-family="Helvetica,sans-Serif" font-size="9.00">SideBar.tsx</text>
+<g id="a_node9"><a xlink:href="src/Components/AppShell/SideBar.tsx" xlink:title="SideBar.tsx">
+<path fill="#bbfeff" stroke="black" d="M376.5,-1066C376.5,-1066 321.5,-1066 321.5,-1066 318.5,-1066 315.5,-1063 315.5,-1060 315.5,-1060 315.5,-1054 315.5,-1054 315.5,-1051 318.5,-1048 321.5,-1048 321.5,-1048 376.5,-1048 376.5,-1048 379.5,-1048 382.5,-1051 382.5,-1054 382.5,-1054 382.5,-1060 382.5,-1060 382.5,-1063 379.5,-1066 376.5,-1066"/>
+<text text-anchor="start" x="323.5" y="-1054.8" font-family="Helvetica,sans-Serif" font-size="9.00">SideBar.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/AppShell/SidebarSubmenu.tsx -->
-<g id="node7" class="node">
+<g id="node10" class="node">
 <title>src/Components/AppShell/SidebarSubmenu.tsx</title>
-<g id="a_node7"><a xlink:href="src/Components/AppShell/SidebarSubmenu.tsx" xlink:title="SidebarSubmenu.tsx">
-<path fill="#bbfeff" stroke="black" d="M399.5,-1038C399.5,-1038 299.5,-1038 299.5,-1038 296.5,-1038 293.5,-1035 293.5,-1032 293.5,-1032 293.5,-1026 293.5,-1026 293.5,-1023 296.5,-1020 299.5,-1020 299.5,-1020 399.5,-1020 399.5,-1020 402.5,-1020 405.5,-1023 405.5,-1026 405.5,-1026 405.5,-1032 405.5,-1032 405.5,-1035 402.5,-1038 399.5,-1038"/>
-<text text-anchor="start" x="301.5" y="-1026.8" font-family="Helvetica,sans-Serif" font-size="9.00">SidebarSubmenu.tsx</text>
+<g id="a_node10"><a xlink:href="src/Components/AppShell/SidebarSubmenu.tsx" xlink:title="SidebarSubmenu.tsx">
+<path fill="#bbfeff" stroke="black" d="M531,-1066C531,-1066 431,-1066 431,-1066 428,-1066 425,-1063 425,-1060 425,-1060 425,-1054 425,-1054 425,-1051 428,-1048 431,-1048 431,-1048 531,-1048 531,-1048 534,-1048 537,-1051 537,-1054 537,-1054 537,-1060 537,-1060 537,-1063 534,-1066 531,-1066"/>
+<text text-anchor="start" x="433" y="-1054.8" 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="edge4" class="edge">
+<g id="edge8" 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.21,-1029C276.32,-1029 281.75,-1029 287.26,-1029"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="287.26,-1031.1 293.26,-1029 287.26,-1026.9 287.26,-1031.1"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M382.8,-1057C393.79,-1057 406.42,-1057 418.87,-1057"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="418.95,-1059.1 424.95,-1057 418.95,-1054.9 418.95,-1059.1"/>
 </g>
 <!-- src/Components/AppShell/index.tsx -->
-<g id="node8" class="node">
+<g id="node11" class="node">
 <title>src/Components/AppShell/index.tsx</title>
-<g id="a_node8"><a xlink:href="src/Components/AppShell/index.tsx" xlink:title="index.tsx">
-<path fill="#bbfeff" stroke="black" d="M175,-993C175,-993 129,-993 129,-993 126,-993 123,-990 123,-987 123,-987 123,-981 123,-981 123,-978 126,-975 129,-975 129,-975 175,-975 175,-975 178,-975 181,-978 181,-981 181,-981 181,-987 181,-987 181,-990 178,-993 175,-993"/>
-<text text-anchor="start" x="131" y="-981.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
+<g id="a_node11"><a xlink:href="src/Components/AppShell/index.tsx" xlink:title="index.tsx">
+<path fill="#bbfeff" stroke="black" d="M260.5,-1051C260.5,-1051 214.5,-1051 214.5,-1051 211.5,-1051 208.5,-1048 208.5,-1045 208.5,-1045 208.5,-1039 208.5,-1039 208.5,-1036 211.5,-1033 214.5,-1033 214.5,-1033 260.5,-1033 260.5,-1033 263.5,-1033 266.5,-1036 266.5,-1039 266.5,-1039 266.5,-1045 266.5,-1045 266.5,-1048 263.5,-1051 260.5,-1051"/>
+<text text-anchor="start" x="216.5" y="-1039.8" 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="edge5" class="edge">
+<g id="edge9" 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.27,-978.92C185.56,-978.15 190.07,-977.34 194.58,-976.53"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="195.18,-978.56 200.71,-975.43 194.43,-974.42 195.18,-978.56"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M251.52,-1032.73C261.29,-1026.14 275.22,-1017.51 288.5,-1012 294.11,-1009.67 300.17,-1007.64 306.2,-1005.88"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="306.99,-1007.84 312.21,-1004.21 305.86,-1003.79 306.99,-1007.84"/>
 </g>
 <!-- src/Components/AppShell/index.tsx&#45;&gt;src/Components/AppShell/Content.tsx -->
-<g id="edge6" class="edge">
+<g id="edge10" 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.27,-989.08C186.23,-989.97 191.48,-990.91 196.69,-991.85"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="196.49,-993.95 202.77,-992.94 197.24,-989.81 196.49,-993.95"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M266.7,-1038.14C279.34,-1036.41 294.47,-1034.33 308.23,-1032.45"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="308.78,-1034.49 314.44,-1031.6 308.21,-1030.33 308.78,-1034.49"/>
 </g>
 <!-- src/Components/AppShell/index.tsx&#45;&gt;src/Components/AppShell/SideBar.tsx -->
-<g id="edge7" class="edge">
+<g id="edge11" 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,-993.08C177.75,-994.27 179.71,-995.58 181.5,-997 188.94,-1002.93 186.82,-1008.39 194.5,-1014 195.97,-1015.07 197.52,-1016.07 199.12,-1017"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="198.46,-1019.03 204.76,-1019.93 200.4,-1015.3 198.46,-1019.03"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M266.7,-1045.86C279.56,-1047.62 294.99,-1049.74 308.95,-1051.65"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="309.01,-1053.78 315.24,-1052.51 309.58,-1049.62 309.01,-1053.78"/>
 </g>
 <!-- src/Components/Input/TextInput.tsx -->
-<g id="node10" class="node">
+<g id="node13" class="node">
 <title>src/Components/Input/TextInput.tsx</title>
-<g id="a_node10"><a xlink:href="src/Components/Input/TextInput.tsx" xlink:title="TextInput.tsx">
-<path fill="#bbfeff" stroke="black" d="M817,-1008C817,-1008 753,-1008 753,-1008 750,-1008 747,-1005 747,-1002 747,-1002 747,-996 747,-996 747,-993 750,-990 753,-990 753,-990 817,-990 817,-990 820,-990 823,-993 823,-996 823,-996 823,-1002 823,-1002 823,-1005 820,-1008 817,-1008"/>
-<text text-anchor="start" x="755" y="-996.8" font-family="Helvetica,sans-Serif" font-size="9.00">TextInput.tsx</text>
+<g id="a_node13"><a xlink:href="src/Components/Input/TextInput.tsx" xlink:title="TextInput.tsx">
+<path fill="#bbfeff" stroke="black" d="M933.5,-1050C933.5,-1050 869.5,-1050 869.5,-1050 866.5,-1050 863.5,-1047 863.5,-1044 863.5,-1044 863.5,-1038 863.5,-1038 863.5,-1035 866.5,-1032 869.5,-1032 869.5,-1032 933.5,-1032 933.5,-1032 936.5,-1032 939.5,-1035 939.5,-1038 939.5,-1038 939.5,-1044 939.5,-1044 939.5,-1047 936.5,-1050 933.5,-1050"/>
+<text text-anchor="start" x="871.5" y="-1038.8" 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/TextInput.tsx -->
-<g id="edge8" class="edge">
+<g id="edge12" class="edge">
 <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="M686.2,-849.88C696.15,-852.04 705.89,-856.24 712.5,-864 729.83,-884.35 703.23,-963.61 720.5,-984 725.75,-990.2 733.04,-994.1 740.82,-996.51"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="740.5,-998.6 746.84,-998.07 741.56,-994.53 740.5,-998.6"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M797.83,-1107.91C810.79,-1100.38 829.51,-1089.29 845.5,-1079 858.08,-1070.9 871.94,-1061.32 882.59,-1053.81"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="883.87,-1055.48 887.55,-1050.3 881.44,-1052.06 883.87,-1055.48"/>
 </g>
 <!-- src/Components/Typography/ErrorText.tsx -->
-<g id="node11" class="node">
+<g id="node14" class="node">
 <title>src/Components/Typography/ErrorText.tsx</title>
-<g id="a_node11"><a xlink:href="src/Components/Typography/ErrorText.tsx" xlink:title="ErrorText.tsx">
-<path fill="#bbfeff" stroke="black" d="M816,-858C816,-858 754,-858 754,-858 751,-858 748,-855 748,-852 748,-852 748,-846 748,-846 748,-843 751,-840 754,-840 754,-840 816,-840 816,-840 819,-840 822,-843 822,-846 822,-846 822,-852 822,-852 822,-855 819,-858 816,-858"/>
-<text text-anchor="start" x="756" y="-846.8" font-family="Helvetica,sans-Serif" font-size="9.00">ErrorText.tsx</text>
+<g id="a_node14"><a xlink:href="src/Components/Typography/ErrorText.tsx" xlink:title="ErrorText.tsx">
+<path fill="#bbfeff" stroke="black" d="M1041.5,-1156C1041.5,-1156 979.5,-1156 979.5,-1156 976.5,-1156 973.5,-1153 973.5,-1150 973.5,-1150 973.5,-1144 973.5,-1144 973.5,-1141 976.5,-1138 979.5,-1138 979.5,-1138 1041.5,-1138 1041.5,-1138 1044.5,-1138 1047.5,-1141 1047.5,-1144 1047.5,-1144 1047.5,-1150 1047.5,-1150 1047.5,-1153 1044.5,-1156 1041.5,-1156"/>
+<text text-anchor="start" x="981.5" y="-1144.8" 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="edge9" class="edge">
+<g id="edge13" 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="M686.25,-849C703.52,-849 723.91,-849 741.58,-849"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="741.96,-851.1 747.96,-849 741.96,-846.9 741.96,-851.1"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M820.59,-1122.09C861.31,-1127.46 925.29,-1135.9 967.32,-1141.44"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="967.13,-1143.53 973.35,-1142.23 967.68,-1139.37 967.13,-1143.53"/>
 </g>
 <!-- src/Components/Auth/SignupPage.tsx&#45;&gt;src/Components/Input/TextInput.tsx -->
-<g id="edge10" class="edge">
+<g id="edge14" class="edge">
 <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="M690.14,-880.97C698.64,-883.34 706.72,-887.36 712.5,-894 725.68,-909.14 707.36,-968.82 720.5,-984 725.82,-990.14 733.14,-994.02 740.93,-996.42"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="740.61,-998.51 746.95,-997.98 741.66,-994.44 740.61,-998.51"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M824.7,-1141.85C832.09,-1139.63 839.37,-1136.47 845.5,-1132 872,-1112.69 888.21,-1076.37 895.64,-1055.94"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="897.67,-1056.5 897.67,-1050.14 893.71,-1055.11 897.67,-1056.5"/>
 </g>
 <!-- src/Components/Auth/SignupPage.tsx&#45;&gt;src/Components/Typography/ErrorText.tsx -->
-<g id="edge11" class="edge">
+<g id="edge15" 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="M688.45,-870C705.24,-866.31 724.66,-862.04 741.6,-858.32"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="742.3,-860.31 747.71,-856.98 741.4,-856.21 742.3,-860.31"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M824.52,-1147C865.26,-1147 926.39,-1147 967.08,-1147"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="967.19,-1149.1 973.19,-1147 967.19,-1144.9 967.19,-1149.1"/>
 </g>
 <!-- src/Components/Gaming/Modal.tsx -->
-<g id="node14" class="node">
+<g id="node17" 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,-888C261,-888 214,-888 214,-888 211,-888 208,-885 208,-882 208,-882 208,-876 208,-876 208,-873 211,-870 214,-870 214,-870 261,-870 261,-870 264,-870 267,-873 267,-876 267,-876 267,-882 267,-882 267,-885 264,-888 261,-888"/>
-<text text-anchor="start" x="216" y="-876.8" font-family="Helvetica,sans-Serif" font-size="9.00">Modal.tsx</text>
+<g id="a_node17"><a xlink:href="src/Components/Gaming/Modal.tsx" xlink:title="Modal.tsx">
+<path fill="#bbfeff" stroke="black" d="M372.5,-1130C372.5,-1130 325.5,-1130 325.5,-1130 322.5,-1130 319.5,-1127 319.5,-1124 319.5,-1124 319.5,-1118 319.5,-1118 319.5,-1115 322.5,-1112 325.5,-1112 325.5,-1112 372.5,-1112 372.5,-1112 375.5,-1112 378.5,-1115 378.5,-1118 378.5,-1118 378.5,-1124 378.5,-1124 378.5,-1127 375.5,-1130 372.5,-1130"/>
+<text text-anchor="start" x="327.5" y="-1118.8" font-family="Helvetica,sans-Serif" font-size="9.00">Modal.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Gaming/Quests.tsx -->
-<g id="node15" class="node">
+<g id="node18" 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="M263.5,-918C263.5,-918 211.5,-918 211.5,-918 208.5,-918 205.5,-915 205.5,-912 205.5,-912 205.5,-906 205.5,-906 205.5,-903 208.5,-900 211.5,-900 211.5,-900 263.5,-900 263.5,-900 266.5,-900 269.5,-903 269.5,-906 269.5,-906 269.5,-912 269.5,-912 269.5,-915 266.5,-918 263.5,-918"/>
-<text text-anchor="start" x="213.5" y="-906.8" font-family="Helvetica,sans-Serif" font-size="9.00">Quests.tsx</text>
+<g id="a_node18"><a xlink:href="src/Components/Gaming/Quests.tsx" xlink:title="Quests.tsx">
+<path fill="#bbfeff" stroke="black" d="M375,-1160C375,-1160 323,-1160 323,-1160 320,-1160 317,-1157 317,-1154 317,-1154 317,-1148 317,-1148 317,-1145 320,-1142 323,-1142 323,-1142 375,-1142 375,-1142 378,-1142 381,-1145 381,-1148 381,-1148 381,-1154 381,-1154 381,-1157 378,-1160 375,-1160"/>
+<text text-anchor="start" x="325" y="-1148.8" font-family="Helvetica,sans-Serif" font-size="9.00">Quests.tsx</text>
 </a>
 </g>
 </g>
+<!-- src/Components/Gaming/Quests.tsx&#45;&gt;src/Components/Gaming/hooks/useQuests.tsx -->
+<g id="edge20" class="edge">
+<title>src/Components/Gaming/Quests.tsx&#45;&gt;src/Components/Gaming/hooks/useQuests.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M381.15,-1143.99C390.27,-1142 400.27,-1139.86 409.5,-1138 417.57,-1136.37 426.18,-1134.72 434.5,-1133.16"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="435.29,-1135.15 440.8,-1131.99 434.52,-1131.02 435.29,-1135.15"/>
+</g>
+<!-- src/Components/Gaming/Quests.tsx&#45;&gt;src/Components/Auth/index.tsx -->
+<g id="edge19" class="edge">
+<title>src/Components/Gaming/Quests.tsx&#45;&gt;src/Components/Auth/index.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M381.01,-1158.47C390.13,-1160.33 400.17,-1162.07 409.5,-1163 476.28,-1169.67 494.51,-1175.2 560.5,-1163 580.54,-1159.3 602.04,-1150.84 617.85,-1143.69"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="618.83,-1145.55 623.4,-1141.13 617.07,-1141.74 618.83,-1145.55"/>
+</g>
 <!-- src/Components/Gaming/index.tsx -->
-<g id="node16" class="node">
+<g id="node19" 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,-918C175,-918 129,-918 129,-918 126,-918 123,-915 123,-912 123,-912 123,-906 123,-906 123,-903 126,-900 129,-900 129,-900 175,-900 175,-900 178,-900 181,-903 181,-906 181,-906 181,-912 181,-912 181,-915 178,-918 175,-918"/>
-<text text-anchor="start" x="131" y="-906.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
+<g id="a_node19"><a xlink:href="src/Components/Gaming/index.tsx" xlink:title="index.tsx">
+<path fill="#bbfeff" stroke="black" d="M260.5,-1160C260.5,-1160 214.5,-1160 214.5,-1160 211.5,-1160 208.5,-1157 208.5,-1154 208.5,-1154 208.5,-1148 208.5,-1148 208.5,-1145 211.5,-1142 214.5,-1142 214.5,-1142 260.5,-1142 260.5,-1142 263.5,-1142 266.5,-1145 266.5,-1148 266.5,-1148 266.5,-1154 266.5,-1154 266.5,-1157 263.5,-1160 260.5,-1160"/>
+<text text-anchor="start" x="216.5" y="-1148.8" 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="edge15" class="edge">
+<g id="edge21" 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="M178.01,-899.94C183.45,-897.98 189.16,-895.92 194.5,-894 198.04,-892.73 201.75,-891.4 205.43,-890.08"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="206.23,-892.02 211.18,-888.03 204.82,-888.07 206.23,-892.02"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M266.73,-1142.29C273.82,-1140.17 281.42,-1137.95 288.5,-1136 296.52,-1133.79 305.18,-1131.53 313.35,-1129.46"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="314.18,-1131.42 319.48,-1127.92 313.15,-1127.34 314.18,-1131.42"/>
 </g>
 <!-- src/Components/Gaming/index.tsx&#45;&gt;src/Components/Gaming/Quests.tsx -->
-<g id="edge16" class="edge">
+<g id="edge22" 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.27,-909C187.09,-909 193.3,-909 199.38,-909"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="199.39,-911.1 205.39,-909 199.39,-906.9 199.39,-911.1"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M266.7,-1151C280.12,-1151 296.34,-1151 310.76,-1151"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="310.81,-1153.1 316.81,-1151 310.81,-1148.9 310.81,-1153.1"/>
+</g>
+<!-- src/Components/Input/SelectBox.tsx -->
+<g id="node20" class="node">
+<title>src/Components/Input/SelectBox.tsx</title>
+<g id="a_node20"><a xlink:href="src/Components/Input/SelectBox.tsx" xlink:title="SelectBox.tsx">
+<path fill="#bbfeff" stroke="black" d="M934,-990C934,-990 869,-990 869,-990 866,-990 863,-987 863,-984 863,-984 863,-978 863,-978 863,-975 866,-972 869,-972 869,-972 934,-972 934,-972 937,-972 940,-975 940,-978 940,-978 940,-984 940,-984 940,-987 937,-990 934,-990"/>
+<text text-anchor="start" x="871" y="-978.8" font-family="Helvetica,sans-Serif" font-size="9.00">SelectBox.tsx</text>
+</a>
+</g>
 </g>
 <!-- src/Components/Input/TextAreaInput.tsx -->
-<g id="node17" class="node">
+<g id="node21" 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="M827,-978C827,-978 743,-978 743,-978 740,-978 737,-975 737,-972 737,-972 737,-966 737,-966 737,-963 740,-960 743,-960 743,-960 827,-960 827,-960 830,-960 833,-963 833,-966 833,-966 833,-972 833,-972 833,-975 830,-978 827,-978"/>
-<text text-anchor="start" x="745" y="-966.8" font-family="Helvetica,sans-Serif" font-size="9.00">TextAreaInput.tsx</text>
+<g id="a_node21"><a xlink:href="src/Components/Input/TextAreaInput.tsx" xlink:title="TextAreaInput.tsx">
+<path fill="#bbfeff" stroke="black" d="M943.5,-1020C943.5,-1020 859.5,-1020 859.5,-1020 856.5,-1020 853.5,-1017 853.5,-1014 853.5,-1014 853.5,-1008 853.5,-1008 853.5,-1005 856.5,-1002 859.5,-1002 859.5,-1002 943.5,-1002 943.5,-1002 946.5,-1002 949.5,-1005 949.5,-1008 949.5,-1008 949.5,-1014 949.5,-1014 949.5,-1017 946.5,-1020 943.5,-1020"/>
+<text text-anchor="start" x="861.5" y="-1008.8" font-family="Helvetica,sans-Serif" font-size="9.00">TextAreaInput.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/hooks/useTags.tsx -->
-<g id="node18" class="node">
+<g id="node22" class="node">
 <title>src/Components/Map/hooks/useTags.tsx</title>
-<g id="a_node18"><a xlink:href="src/Components/Map/hooks/useTags.tsx" xlink:title="useTags.tsx">
-<path fill="#bbfeff" stroke="black" d="M674.5,-604C674.5,-604 618.5,-604 618.5,-604 615.5,-604 612.5,-601 612.5,-598 612.5,-598 612.5,-592 612.5,-592 612.5,-589 615.5,-586 618.5,-586 618.5,-586 674.5,-586 674.5,-586 677.5,-586 680.5,-589 680.5,-592 680.5,-592 680.5,-598 680.5,-598 680.5,-601 677.5,-604 674.5,-604"/>
-<text text-anchor="start" x="620.5" y="-592.8" font-family="Helvetica,sans-Serif" font-size="9.00">useTags.tsx</text>
+<g id="a_node22"><a xlink:href="src/Components/Map/hooks/useTags.tsx" xlink:title="useTags.tsx">
+<path fill="#bbfeff" stroke="black" d="M670.5,-379C670.5,-379 614.5,-379 614.5,-379 611.5,-379 608.5,-376 608.5,-373 608.5,-373 608.5,-367 608.5,-367 608.5,-364 611.5,-361 614.5,-361 614.5,-361 670.5,-361 670.5,-361 673.5,-361 676.5,-364 676.5,-367 676.5,-367 676.5,-373 676.5,-373 676.5,-376 673.5,-379 670.5,-379"/>
+<text text-anchor="start" x="616.5" y="-367.8" font-family="Helvetica,sans-Serif" font-size="9.00">useTags.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Input/TextAreaInput.tsx&#45;&gt;src/Components/Map/hooks/useTags.tsx -->
-<g id="edge17" class="edge">
+<g id="edge23" class="edge">
 <title>src/Components/Input/TextAreaInput.tsx&#45;&gt;src/Components/Map/hooks/useTags.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M773.42,-959.68C758.38,-945.66 731.43,-917.51 720.5,-887 715.31,-872.51 722.26,-621.91 712.5,-610 706.12,-602.21 696.57,-597.98 686.75,-595.79"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="686.9,-593.69 680.62,-594.68 686.15,-597.82 686.9,-593.69"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M859.68,-1002C857.34,-1000.32 855.24,-998.34 853.5,-996 836.24,-972.76 859.44,-500.37 845.5,-475 812.55,-415.04 731.81,-388.16 682.97,-377.04"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="683.19,-374.94 676.88,-375.7 682.29,-379.04 683.19,-374.94"/>
 </g>
 <!-- src/Utils/HashTagRegex.tsx -->
-<g id="node37" class="node">
+<g id="node43" class="node">
 <title>src/Utils/HashTagRegex.tsx</title>
-<g id="a_node37"><a xlink:href="src/Utils/HashTagRegex.tsx" xlink:title="HashTagRegex.tsx">
-<path fill="#bbfeff" stroke="black" d="M828,-132C828,-132 742,-132 742,-132 739,-132 736,-129 736,-126 736,-126 736,-120 736,-120 736,-117 739,-114 742,-114 742,-114 828,-114 828,-114 831,-114 834,-117 834,-120 834,-120 834,-126 834,-126 834,-129 831,-132 828,-132"/>
-<text text-anchor="start" x="744" y="-120.8" font-family="Helvetica,sans-Serif" font-size="9.00">HashTagRegex.tsx</text>
+<g id="a_node43"><a xlink:href="src/Utils/HashTagRegex.tsx" xlink:title="HashTagRegex.tsx">
+<path fill="#bbfeff" stroke="black" d="M824,-192C824,-192 738,-192 738,-192 735,-192 732,-189 732,-186 732,-186 732,-180 732,-180 732,-177 735,-174 738,-174 738,-174 824,-174 824,-174 827,-174 830,-177 830,-180 830,-180 830,-186 830,-186 830,-189 827,-192 824,-192"/>
+<text text-anchor="start" x="740" y="-180.8" font-family="Helvetica,sans-Serif" font-size="9.00">HashTagRegex.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/hooks/useTags.tsx&#45;&gt;src/Utils/HashTagRegex.tsx -->
-<g id="edge65" class="edge">
+<g id="edge85" class="edge">
 <title>src/Components/Map/hooks/useTags.tsx&#45;&gt;src/Utils/HashTagRegex.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M680.67,-595.36C692.53,-593.67 704.84,-589.45 712.5,-580 727.96,-560.92 705.09,-157.12 720.5,-138 723.22,-134.62 726.55,-131.92 730.24,-129.77"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="731.43,-131.52 735.89,-126.99 729.58,-127.75 731.43,-131.52"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M676.51,-370.23C688.35,-368.52 700.69,-364.32 708.5,-355 730.94,-328.22 694.13,-224.83 716.5,-198 719.23,-194.73 722.53,-192.09 726.17,-189.98"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="727.27,-191.77 731.72,-187.24 725.41,-188.01 727.27,-191.77"/>
 </g>
 <!-- src/Components/Input/index.tsx -->
-<g id="node19" class="node">
+<g id="node23" class="node">
 <title>src/Components/Input/index.tsx</title>
-<g id="a_node19"><a xlink:href="src/Components/Input/index.tsx" xlink:title="index.tsx">
-<path fill="#bbfeff" stroke="black" d="M669.5,-978C669.5,-978 623.5,-978 623.5,-978 620.5,-978 617.5,-975 617.5,-972 617.5,-972 617.5,-966 617.5,-966 617.5,-963 620.5,-960 623.5,-960 623.5,-960 669.5,-960 669.5,-960 672.5,-960 675.5,-963 675.5,-966 675.5,-966 675.5,-972 675.5,-972 675.5,-975 672.5,-978 669.5,-978"/>
-<text text-anchor="start" x="625.5" y="-966.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
+<g id="a_node23"><a xlink:href="src/Components/Input/index.tsx" xlink:title="index.tsx">
+<path fill="#bbfeff" stroke="black" d="M804,-990C804,-990 758,-990 758,-990 755,-990 752,-987 752,-984 752,-984 752,-978 752,-978 752,-975 755,-972 758,-972 758,-972 804,-972 804,-972 807,-972 810,-975 810,-978 810,-978 810,-984 810,-984 810,-987 807,-990 804,-990"/>
+<text text-anchor="start" x="760" y="-978.8" 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="edge19" class="edge">
+<g id="edge26" 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="M675.78,-975.22C694.63,-979.36 719.75,-984.88 741.04,-989.56"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="740.63,-991.62 746.94,-990.85 741.53,-987.52 740.63,-991.62"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M807.49,-990.01C819.96,-995.32 834.59,-1002.98 845.5,-1013 850.5,-1017.59 848.16,-1021.82 853.5,-1026 854.89,-1027.09 856.36,-1028.1 857.89,-1029.04"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="857.02,-1030.95 863.29,-1031.96 859.01,-1027.26 857.02,-1030.95"/>
+</g>
+<!-- src/Components/Input/index.tsx&#45;&gt;src/Components/Input/SelectBox.tsx -->
+<g id="edge24" class="edge">
+<title>src/Components/Input/index.tsx&#45;&gt;src/Components/Input/SelectBox.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M810.08,-981C823.98,-981 841.07,-981 856.64,-981"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="856.75,-983.1 862.75,-981 856.75,-978.9 856.75,-983.1"/>
 </g>
 <!-- src/Components/Input/index.tsx&#45;&gt;src/Components/Input/TextAreaInput.tsx -->
-<g id="edge18" class="edge">
+<g id="edge25" 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="M675.78,-969C691.64,-969 711.94,-969 730.66,-969"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="730.94,-971.1 736.94,-969 730.94,-966.9 730.94,-971.1"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M810.08,-988.11C824.59,-991.78 842.58,-996.34 858.69,-1000.41"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="858.19,-1002.46 864.53,-1001.89 859.23,-998.38 858.19,-1002.46"/>
 </g>
 <!-- src/Components/Map/ItemForm.tsx -->
-<g id="node20" class="node">
+<g id="node24" class="node">
 <title>src/Components/Map/ItemForm.tsx</title>
-<g id="a_node20"><a xlink:href="src/Components/Map/ItemForm.tsx" xlink:title="ItemForm.tsx">
-<path fill="#bbfeff" stroke="black" d="M270,-230C270,-230 205,-230 205,-230 202,-230 199,-227 199,-224 199,-224 199,-218 199,-218 199,-215 202,-212 205,-212 205,-212 270,-212 270,-212 273,-212 276,-215 276,-218 276,-218 276,-224 276,-224 276,-227 273,-230 270,-230"/>
-<text text-anchor="start" x="207" y="-218.8" font-family="Helvetica,sans-Serif" font-size="9.00">ItemForm.tsx</text>
+<g id="a_node24"><a xlink:href="src/Components/Map/ItemForm.tsx" xlink:title="ItemForm.tsx">
+<path fill="#bbfeff" stroke="black" d="M270,-411C270,-411 205,-411 205,-411 202,-411 199,-408 199,-405 199,-405 199,-399 199,-399 199,-396 202,-393 205,-393 205,-393 270,-393 270,-393 273,-393 276,-396 276,-399 276,-399 276,-405 276,-405 276,-408 273,-411 270,-411"/>
+<text text-anchor="start" x="207" y="-399.8" font-family="Helvetica,sans-Serif" font-size="9.00">ItemForm.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/ItemView.tsx -->
-<g id="node21" class="node">
+<g id="node25" class="node">
 <title>src/Components/Map/ItemView.tsx</title>
-<g id="a_node21"><a xlink:href="src/Components/Map/ItemView.tsx" xlink:title="ItemView.tsx">
-<path fill="#bbfeff" stroke="black" d="M268.5,-260C268.5,-260 206.5,-260 206.5,-260 203.5,-260 200.5,-257 200.5,-254 200.5,-254 200.5,-248 200.5,-248 200.5,-245 203.5,-242 206.5,-242 206.5,-242 268.5,-242 268.5,-242 271.5,-242 274.5,-245 274.5,-248 274.5,-248 274.5,-254 274.5,-254 274.5,-257 271.5,-260 268.5,-260"/>
-<text text-anchor="start" x="208.5" y="-248.8" font-family="Helvetica,sans-Serif" font-size="9.00">ItemView.tsx</text>
+<g id="a_node25"><a xlink:href="src/Components/Map/ItemView.tsx" xlink:title="ItemView.tsx">
+<path fill="#bbfeff" stroke="black" d="M268.5,-441C268.5,-441 206.5,-441 206.5,-441 203.5,-441 200.5,-438 200.5,-435 200.5,-435 200.5,-429 200.5,-429 200.5,-426 203.5,-423 206.5,-423 206.5,-423 268.5,-423 268.5,-423 271.5,-423 274.5,-426 274.5,-429 274.5,-429 274.5,-435 274.5,-435 274.5,-438 271.5,-441 268.5,-441"/>
+<text text-anchor="start" x="208.5" y="-429.8" font-family="Helvetica,sans-Serif" font-size="9.00">ItemView.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Layer.tsx -->
-<g id="node22" class="node">
+<g id="node26" class="node">
 <title>src/Components/Map/Layer.tsx</title>
-<g id="a_node22"><a xlink:href="src/Components/Map/Layer.tsx" xlink:title="Layer.tsx">
-<path fill="#bbfeff" stroke="black" d="M260,-351C260,-351 215,-351 215,-351 212,-351 209,-348 209,-345 209,-345 209,-339 209,-339 209,-336 212,-333 215,-333 215,-333 260,-333 260,-333 263,-333 266,-336 266,-339 266,-339 266,-345 266,-345 266,-348 263,-351 260,-351"/>
-<text text-anchor="start" x="217" y="-339.8" font-family="Helvetica,sans-Serif" font-size="9.00">Layer.tsx</text>
+<g id="a_node26"><a xlink:href="src/Components/Map/Layer.tsx" xlink:title="Layer.tsx">
+<path fill="#bbfeff" stroke="black" d="M260,-501C260,-501 215,-501 215,-501 212,-501 209,-498 209,-495 209,-495 209,-489 209,-489 209,-486 212,-483 215,-483 215,-483 260,-483 260,-483 263,-483 266,-486 266,-489 266,-489 266,-495 266,-495 266,-498 263,-501 260,-501"/>
+<text text-anchor="start" x="217" y="-489.8" font-family="Helvetica,sans-Serif" font-size="9.00">Layer.tsx</text>
 </a>
 </g>
 </g>
+<!-- src/Components/Map/Layer.tsx&#45;&gt;src/Components/AppShell/hooks/useAssets.tsx -->
+<g id="edge29" class="edge">
+<title>src/Components/Map/Layer.tsx&#45;&gt;src/Components/AppShell/hooks/useAssets.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M242.19,-501.31C250.8,-523.5 272.07,-581.44 280.5,-632 284.27,-654.59 277.32,-818.01 288.5,-838 320.08,-894.48 349.03,-895.96 409.5,-919 472.82,-943.13 507.15,-898.23 560.5,-940 568.04,-945.9 561.92,-953.05 568.5,-960 578,-970.04 591.05,-977.4 603.49,-982.64"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="602.8,-984.63 609.15,-984.91 604.36,-980.73 602.8,-984.63"/>
+</g>
 <!-- src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/hooks/useTags.tsx -->
-<g id="edge24" class="edge">
+<g id="edge33" 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="M237.95,-351.07C236.64,-381.36 236.73,-480.01 289,-531 333.68,-574.59 523.47,-589.06 606.42,-593.36"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="606.35,-595.46 612.45,-593.67 606.56,-591.27 606.35,-595.46"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M266.39,-487.18C271.86,-484.96 276.99,-481.72 280.5,-477 290.92,-462.98 275.84,-332.03 288.5,-320 307.84,-301.62 538.29,-307.37 560.5,-325 571.31,-333.58 558.46,-345.53 568.5,-355 577.47,-363.47 589.89,-367.71 601.95,-369.7"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="601.97,-371.82 608.2,-370.54 602.53,-367.66 601.97,-371.82"/>
+</g>
+<!-- src/Utils/GetValue.ts -->
+<g id="node27" class="node">
+<title>src/Utils/GetValue.ts</title>
+<g id="a_node27"><a xlink:href="src/Utils/GetValue.ts" xlink:title="GetValue.ts">
+<path fill="#ddfeff" stroke="black" d="M809,-72C809,-72 753,-72 753,-72 750,-72 747,-69 747,-66 747,-66 747,-60 747,-60 747,-57 750,-54 753,-54 753,-54 809,-54 809,-54 812,-54 815,-57 815,-60 815,-60 815,-66 815,-66 815,-69 812,-72 809,-72"/>
+<text text-anchor="start" x="755" y="-60.8" font-family="Helvetica,sans-Serif" font-size="9.00">GetValue.ts</text>
+</a>
+</g>
+</g>
+<!-- src/Components/Map/Layer.tsx&#45;&gt;src/Utils/GetValue.ts -->
+<g id="edge27" class="edge">
+<title>src/Components/Map/Layer.tsx&#45;&gt;src/Utils/GetValue.ts</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M266,-487.39C271.64,-485.17 276.93,-481.87 280.5,-477 294.7,-457.63 280.01,-283.47 288.5,-261 318.53,-181.52 335.67,-155.04 409.5,-113 465.49,-81.12 657.46,-68.62 740.83,-64.61"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="740.99,-66.7 746.89,-64.32 740.79,-62.51 740.99,-66.7"/>
 </g>
 <!-- src/Utils/MarkerIconFactory.ts -->
-<g id="node23" class="node">
+<g id="node28" class="node">
 <title>src/Utils/MarkerIconFactory.ts</title>
-<g id="a_node23"><a xlink:href="src/Utils/MarkerIconFactory.ts" xlink:title="MarkerIconFactory.ts">
-<path fill="#ddfeff" stroke="black" d="M834,-162C834,-162 736,-162 736,-162 733,-162 730,-159 730,-156 730,-156 730,-150 730,-150 730,-147 733,-144 736,-144 736,-144 834,-144 834,-144 837,-144 840,-147 840,-150 840,-150 840,-156 840,-156 840,-159 837,-162 834,-162"/>
-<text text-anchor="start" x="738" y="-150.8" font-family="Helvetica,sans-Serif" font-size="9.00">MarkerIconFactory.ts</text>
+<g id="a_node28"><a xlink:href="src/Utils/MarkerIconFactory.ts" xlink:title="MarkerIconFactory.ts">
+<path fill="#ddfeff" stroke="black" d="M830,-42C830,-42 732,-42 732,-42 729,-42 726,-39 726,-36 726,-36 726,-30 726,-30 726,-27 729,-24 732,-24 732,-24 830,-24 830,-24 833,-24 836,-27 836,-30 836,-30 836,-36 836,-36 836,-39 833,-42 830,-42"/>
+<text text-anchor="start" x="734" y="-30.8" 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="edge20" class="edge">
+<g id="edge28" 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="M240.84,-351.14C248.37,-381.1 272.04,-479.22 280.5,-562 282.1,-577.61 280.42,-1113.86 289,-1127 322.26,-1177.96 354.04,-1171.04 413.5,-1184 429.89,-1187.57 552.57,-1195.8 564.5,-1184 578.31,-1170.35 566.31,-503.4 572.5,-485 605.83,-385.92 657.81,-385.09 712.5,-296 739.93,-251.33 765.8,-194.74 777.49,-168.13"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="779.54,-168.67 780.02,-162.33 775.69,-166.99 779.54,-168.67"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M266.05,-487.43C271.69,-485.2 276.97,-481.9 280.5,-477 292.27,-460.69 276.54,-131.17 288.5,-115 390.89,23.44 631.17,-3.82 733.03,-22.81"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="732.66,-24.88 738.95,-23.93 733.45,-20.75 732.66,-24.88"/>
 </g>
 <!-- src/Components/Map/hooks/useFilter.tsx -->
-<g id="node24" class="node">
+<g id="node29" class="node">
 <title>src/Components/Map/hooks/useFilter.tsx</title>
-<g id="a_node24"><a xlink:href="src/Components/Map/hooks/useFilter.tsx" xlink:title="useFilter.tsx">
-<path fill="#bbfeff" stroke="black" d="M675.5,-514C675.5,-514 617.5,-514 617.5,-514 614.5,-514 611.5,-511 611.5,-508 611.5,-508 611.5,-502 611.5,-502 611.5,-499 614.5,-496 617.5,-496 617.5,-496 675.5,-496 675.5,-496 678.5,-496 681.5,-499 681.5,-502 681.5,-502 681.5,-508 681.5,-508 681.5,-511 678.5,-514 675.5,-514"/>
-<text text-anchor="start" x="619.5" y="-502.8" font-family="Helvetica,sans-Serif" font-size="9.00">useFilter.tsx</text>
+<g id="a_node29"><a xlink:href="src/Components/Map/hooks/useFilter.tsx" xlink:title="useFilter.tsx">
+<path fill="#bbfeff" stroke="black" d="M671.5,-469C671.5,-469 613.5,-469 613.5,-469 610.5,-469 607.5,-466 607.5,-463 607.5,-463 607.5,-457 607.5,-457 607.5,-454 610.5,-451 613.5,-451 613.5,-451 671.5,-451 671.5,-451 674.5,-451 677.5,-454 677.5,-457 677.5,-457 677.5,-463 677.5,-463 677.5,-466 674.5,-469 671.5,-469"/>
+<text text-anchor="start" x="615.5" y="-457.8" font-family="Helvetica,sans-Serif" font-size="9.00">useFilter.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/hooks/useFilter.tsx -->
-<g id="edge21" class="edge">
+<g id="edge30" class="edge">
 <title>src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/hooks/useFilter.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M243.92,-332.72C251.91,-320.05 268.21,-297.91 289,-289 318.22,-276.48 559.18,-293.16 564.5,-297 629.27,-343.72 642.25,-450.01 644.85,-489.69"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="642.76,-490.01 645.2,-495.88 646.96,-489.77 642.76,-490.01"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M266.32,-486.61C271.66,-484.42 276.75,-481.34 280.5,-477 292.35,-463.28 274.48,-448.49 288.5,-437 381.99,-360.36 448.81,-390.74 560.5,-437 565.15,-438.92 564.07,-442.62 568.5,-445 578.5,-450.38 590.22,-453.84 601.3,-456.06"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="601.1,-458.15 607.38,-457.16 601.86,-454.02 601.1,-458.15"/>
 </g>
 <!-- src/Components/Map/hooks/useItems.tsx -->
-<g id="node25" class="node">
+<g id="node30" class="node">
 <title>src/Components/Map/hooks/useItems.tsx</title>
-<g id="a_node25"><a xlink:href="src/Components/Map/hooks/useItems.tsx" xlink:title="useItems.tsx">
-<path fill="#bbfeff" stroke="black" d="M677.5,-574C677.5,-574 615.5,-574 615.5,-574 612.5,-574 609.5,-571 609.5,-568 609.5,-568 609.5,-562 609.5,-562 609.5,-559 612.5,-556 615.5,-556 615.5,-556 677.5,-556 677.5,-556 680.5,-556 683.5,-559 683.5,-562 683.5,-562 683.5,-568 683.5,-568 683.5,-571 680.5,-574 677.5,-574"/>
-<text text-anchor="start" x="617.5" y="-562.8" font-family="Helvetica,sans-Serif" font-size="9.00">useItems.tsx</text>
+<g id="a_node30"><a xlink:href="src/Components/Map/hooks/useItems.tsx" xlink:title="useItems.tsx">
+<path fill="#bbfeff" stroke="black" d="M673.5,-409C673.5,-409 611.5,-409 611.5,-409 608.5,-409 605.5,-406 605.5,-403 605.5,-403 605.5,-397 605.5,-397 605.5,-394 608.5,-391 611.5,-391 611.5,-391 673.5,-391 673.5,-391 676.5,-391 679.5,-394 679.5,-397 679.5,-397 679.5,-403 679.5,-403 679.5,-406 676.5,-409 673.5,-409"/>
+<text text-anchor="start" x="613.5" y="-397.8" 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="edge22" class="edge">
+<g id="edge31" 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="M241.24,-332.97C246.94,-315.98 261.85,-279.66 289,-265 396.74,-206.82 476.71,-179.64 564.5,-265 587.21,-287.08 552.14,-525.73 572.5,-550 580.08,-559.03 591.51,-563.53 603.09,-565.59"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="602.91,-567.68 609.14,-566.45 603.5,-563.52 602.91,-567.68"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M266.34,-487.15C271.82,-484.93 276.96,-481.7 280.5,-477 297.13,-454.95 268.36,-371.89 288.5,-353 332.6,-311.66 512.86,-315.8 560.5,-353 572.06,-362.02 557.92,-374.86 568.5,-385 576.7,-392.86 587.85,-397.09 598.97,-399.26"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="598.87,-401.37 605.13,-400.26 599.54,-397.23 598.87,-401.37"/>
 </g>
 <!-- src/Components/Map/hooks/useLeafletRefs.tsx -->
-<g id="node26" class="node">
+<g id="node31" class="node">
 <title>src/Components/Map/hooks/useLeafletRefs.tsx</title>
-<g id="a_node26"><a xlink:href="src/Components/Map/hooks/useLeafletRefs.tsx" xlink:title="useLeafletRefs.tsx">
-<path fill="#bbfeff" stroke="black" d="M689.5,-634C689.5,-634 603.5,-634 603.5,-634 600.5,-634 597.5,-631 597.5,-628 597.5,-628 597.5,-622 597.5,-622 597.5,-619 600.5,-616 603.5,-616 603.5,-616 689.5,-616 689.5,-616 692.5,-616 695.5,-619 695.5,-622 695.5,-622 695.5,-628 695.5,-628 695.5,-631 692.5,-634 689.5,-634"/>
-<text text-anchor="start" x="605.5" y="-622.8" font-family="Helvetica,sans-Serif" font-size="9.00">useLeafletRefs.tsx</text>
+<g id="a_node31"><a xlink:href="src/Components/Map/hooks/useLeafletRefs.tsx" xlink:title="useLeafletRefs.tsx">
+<path fill="#bbfeff" stroke="black" d="M685.5,-349C685.5,-349 599.5,-349 599.5,-349 596.5,-349 593.5,-346 593.5,-343 593.5,-343 593.5,-337 593.5,-337 593.5,-334 596.5,-331 599.5,-331 599.5,-331 685.5,-331 685.5,-331 688.5,-331 691.5,-334 691.5,-337 691.5,-337 691.5,-343 691.5,-343 691.5,-346 688.5,-349 685.5,-349"/>
+<text text-anchor="start" x="601.5" y="-337.8" font-family="Helvetica,sans-Serif" font-size="9.00">useLeafletRefs.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/hooks/useLeafletRefs.tsx -->
-<g id="edge23" class="edge">
+<g id="edge32" class="edge">
 <title>src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/hooks/useLeafletRefs.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M243.92,-332.72C251.91,-320.05 268.21,-297.91 289,-289 319.03,-276.13 560.29,-292.69 564.5,-297 576.65,-309.45 561.34,-596.66 572.5,-610 577.43,-615.89 584,-619.86 591.18,-622.47"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="590.99,-624.61 597.34,-624.37 592.22,-620.59 590.99,-624.61"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M266.4,-487.2C271.88,-484.97 277,-481.73 280.5,-477 291.88,-461.62 274.66,-318.21 288.5,-305 381.72,-216.02 558.39,-295.89 619.81,-328.02"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="619.1,-330.02 625.39,-330.98 621.07,-326.31 619.1,-330.02"/>
 </g>
 <!-- src/Components/Map/Subcomponents/ItemFormPopup.tsx -->
-<g id="node27" class="node">
+<g id="node32" class="node">
 <title>src/Components/Map/Subcomponents/ItemFormPopup.tsx</title>
-<g id="a_node27"><a xlink:href="src/Components/Map/Subcomponents/ItemFormPopup.tsx" xlink:title="ItemFormPopup.tsx">
-<path fill="#bbfeff" stroke="black" d="M396,-502C396,-502 303,-502 303,-502 300,-502 297,-499 297,-496 297,-496 297,-490 297,-490 297,-487 300,-484 303,-484 303,-484 396,-484 396,-484 399,-484 402,-487 402,-490 402,-490 402,-496 402,-496 402,-499 399,-502 396,-502"/>
-<text text-anchor="start" x="305" y="-490.8" font-family="Helvetica,sans-Serif" font-size="9.00">ItemFormPopup.tsx</text>
+<g id="a_node32"><a xlink:href="src/Components/Map/Subcomponents/ItemFormPopup.tsx" xlink:title="ItemFormPopup.tsx">
+<path fill="#bbfeff" stroke="black" d="M395.5,-566C395.5,-566 302.5,-566 302.5,-566 299.5,-566 296.5,-563 296.5,-560 296.5,-560 296.5,-554 296.5,-554 296.5,-551 299.5,-548 302.5,-548 302.5,-548 395.5,-548 395.5,-548 398.5,-548 401.5,-551 401.5,-554 401.5,-554 401.5,-560 401.5,-560 401.5,-563 398.5,-566 395.5,-566"/>
+<text text-anchor="start" x="304.5" y="-554.8" 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="edge25" class="edge">
+<g id="edge34" 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="M239.08,-351.21C241.12,-375.75 250.19,-443.19 289,-478 290.03,-478.92 291.11,-479.79 292.23,-480.61"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="291.19,-482.44 297.39,-483.87 293.44,-478.89 291.19,-482.44"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M244.75,-501.31C253.22,-513.16 269.48,-533.36 288.5,-544 289.42,-544.51 290.36,-545.01 291.31,-545.48"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="290.6,-547.46 296.93,-547.99 292.31,-543.63 290.6,-547.46"/>
 </g>
 <!-- src/Components/Map/Subcomponents/ItemViewPopup.tsx -->
-<g id="node28" class="node">
+<g id="node33" class="node">
 <title>src/Components/Map/Subcomponents/ItemViewPopup.tsx</title>
-<g id="a_node28"><a xlink:href="src/Components/Map/Subcomponents/ItemViewPopup.tsx" xlink:title="ItemViewPopup.tsx">
-<path fill="#bbfeff" stroke="black" d="M395.5,-351C395.5,-351 303.5,-351 303.5,-351 300.5,-351 297.5,-348 297.5,-345 297.5,-345 297.5,-339 297.5,-339 297.5,-336 300.5,-333 303.5,-333 303.5,-333 395.5,-333 395.5,-333 398.5,-333 401.5,-336 401.5,-339 401.5,-339 401.5,-345 401.5,-345 401.5,-348 398.5,-351 395.5,-351"/>
-<text text-anchor="start" x="305.5" y="-339.8" font-family="Helvetica,sans-Serif" font-size="9.00">ItemViewPopup.tsx</text>
+<g id="a_node33"><a xlink:href="src/Components/Map/Subcomponents/ItemViewPopup.tsx" xlink:title="ItemViewPopup.tsx">
+<path fill="#bbfeff" stroke="black" d="M395,-596C395,-596 303,-596 303,-596 300,-596 297,-593 297,-590 297,-590 297,-584 297,-584 297,-581 300,-578 303,-578 303,-578 395,-578 395,-578 398,-578 401,-581 401,-584 401,-584 401,-590 401,-590 401,-593 398,-596 395,-596"/>
+<text text-anchor="start" x="305" y="-584.8" 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="edge26" class="edge">
+<g id="edge35" 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="M266.26,-342C273.91,-342 282.51,-342 291.18,-342"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="291.18,-344.1 297.18,-342 291.18,-339.9 291.18,-344.1"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M241.55,-501.03C247.67,-517.74 263.08,-553.48 288.5,-572 290.09,-573.16 291.77,-574.23 293.5,-575.22"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="292.56,-577.1 298.86,-577.94 294.47,-573.35 292.56,-577.1"/>
 </g>
 <!-- src/Components/Map/hooks/useLayers.tsx -->
-<g id="node33" class="node">
+<g id="node38" class="node">
 <title>src/Components/Map/hooks/useLayers.tsx</title>
-<g id="a_node33"><a xlink:href="src/Components/Map/hooks/useLayers.tsx" xlink:title="useLayers.tsx">
-<path fill="#bbfeff" stroke="black" d="M818,-664C818,-664 752,-664 752,-664 749,-664 746,-661 746,-658 746,-658 746,-652 746,-652 746,-649 749,-646 752,-646 752,-646 818,-646 818,-646 821,-646 824,-649 824,-652 824,-652 824,-658 824,-658 824,-661 821,-664 818,-664"/>
-<text text-anchor="start" x="754" y="-652.8" font-family="Helvetica,sans-Serif" font-size="9.00">useLayers.tsx</text>
+<g id="a_node38"><a xlink:href="src/Components/Map/hooks/useLayers.tsx" xlink:title="useLayers.tsx">
+<path fill="#bbfeff" stroke="black" d="M814,-499C814,-499 748,-499 748,-499 745,-499 742,-496 742,-493 742,-493 742,-487 742,-487 742,-484 745,-481 748,-481 748,-481 814,-481 814,-481 817,-481 820,-484 820,-487 820,-487 820,-493 820,-493 820,-496 817,-499 814,-499"/>
+<text text-anchor="start" x="750" y="-487.8" font-family="Helvetica,sans-Serif" font-size="9.00">useLayers.tsx</text>
 </a>
 </g>
 </g>
+<!-- src/Components/Map/hooks/useFilter.tsx&#45;&gt;src/Components/Map/hooks/useLayers.tsx -->
+<g id="edge82" class="edge">
+<title>src/Components/Map/hooks/useFilter.tsx&#45;&gt;src/Components/Map/hooks/useLayers.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M677.59,-467.49C695.05,-471.33 716.51,-476.05 735.28,-480.17"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="735.22,-482.31 741.53,-481.54 736.12,-478.21 735.22,-482.31"/>
+</g>
 <!-- src/Components/Map/hooks/useItems.tsx&#45;&gt;src/Components/Map/hooks/useLayers.tsx -->
-<g id="edge63" class="edge">
+<g id="edge83" class="edge">
 <title>src/Components/Map/hooks/useItems.tsx&#45;&gt;src/Components/Map/hooks/useLayers.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M683.64,-569.46C693.44,-571.68 703.75,-575.01 712.5,-580 739.18,-595.21 762.07,-623.48 774.36,-640.63"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="772.95,-642.28 778.11,-645.99 776.39,-639.87 772.95,-642.28"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M679.64,-404.46C689.44,-406.68 699.75,-410.01 708.5,-415 709.41,-415.52 746.72,-454.85 767.07,-476.34"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="765.72,-477.97 771.37,-480.88 768.77,-475.08 765.72,-477.97"/>
+</g>
+<!-- src/Components/Map/Subcomponents/ItemFormPopup.tsx&#45;&gt;src/Components/Auth/index.tsx -->
+<g id="edge46" class="edge">
+<title>src/Components/Map/Subcomponents/ItemFormPopup.tsx&#45;&gt;src/Components/Auth/index.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M395.56,-566.25C397.79,-567.88 399.8,-569.78 401.5,-572 413.25,-587.29 397.28,-904.08 409.5,-919 453.09,-972.22 514.88,-901.52 560.5,-953 572.2,-966.21 562.19,-1015.52 568.5,-1032 581.78,-1066.68 610.38,-1100.09 627.58,-1118.16"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="626.42,-1119.98 632.1,-1122.83 629.44,-1117.06 626.42,-1119.98"/>
 </g>
 <!-- src/Components/Map/Subcomponents/ItemFormPopup.tsx&#45;&gt;src/Components/Input/TextInput.tsx -->
-<g id="edge38" class="edge">
+<g id="edge48" 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="M401.79,-502.3C403.12,-503.42 404.37,-504.64 405.5,-506 427.04,-531.79 394.11,-629.56 413.5,-657 457.65,-719.49 499.61,-699.73 572.5,-723 633.3,-742.42 671.85,-705.79 712.5,-755 728.72,-774.63 704.36,-964.31 720.5,-984 725.65,-990.28 732.9,-994.22 740.67,-996.64"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="740.35,-998.72 746.68,-998.2 741.4,-994.66 740.35,-998.72"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M395.55,-566.26C397.78,-567.89 399.79,-569.79 401.5,-572 420.47,-596.54 392.36,-825.15 409.5,-851 450.27,-912.5 511.19,-865.11 560.5,-920 568.01,-928.36 560.12,-936.5 568.5,-944 615.92,-986.44 662.75,-929.77 708.5,-974 719.04,-984.19 705.84,-995.93 716.5,-1006 753.94,-1041.36 815.47,-1046.37 856.96,-1045.04"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="857.28,-1047.13 863.19,-1044.79 857.11,-1042.93 857.28,-1047.13"/>
 </g>
 <!-- src/Components/Map/Subcomponents/ItemFormPopup.tsx&#45;&gt;src/Components/Input/TextAreaInput.tsx -->
-<g id="edge37" class="edge">
+<g id="edge47" 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="M401.75,-502.33C403.1,-503.44 404.36,-504.66 405.5,-506 421.53,-524.83 399.57,-596.57 413.5,-617 457.62,-681.71 500.38,-662.44 572.5,-693 633.62,-718.89 673.09,-691.59 712.5,-745 731.27,-770.43 709.44,-857.39 720.5,-887 730.78,-914.51 753.74,-940.26 769.05,-955.32"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="767.76,-956.99 773.53,-959.64 770.67,-953.96 767.76,-956.99"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M395.53,-566.28C397.76,-567.91 399.78,-569.8 401.5,-572 415.93,-590.5 399.24,-761.9 409.5,-783 447.99,-862.11 506.99,-841.16 560.5,-911 565.58,-917.63 561.85,-922.94 568.5,-928 618.74,-966.22 663.64,-907.59 708.5,-952 722.63,-965.98 701.77,-982.65 716.5,-996 726.06,-1004.66 796.33,-1008.36 847.2,-1009.91"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="847.24,-1012.02 853.3,-1010.09 847.36,-1007.82 847.24,-1012.02"/>
 </g>
 <!-- src/Components/Map/Subcomponents/ItemFormPopup.tsx&#45;&gt;src/Components/Map/hooks/useTags.tsx -->
-<g id="edge41" class="edge">
+<g id="edge51" class="edge">
 <title>src/Components/Map/Subcomponents/ItemFormPopup.tsx&#45;&gt;src/Components/Map/hooks/useTags.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M401.04,-502.2C402.63,-503.34 404.13,-504.6 405.5,-506 417.28,-518.01 401.47,-531.24 413.5,-543 462.38,-590.76 504.13,-539.99 564.5,-572 568.94,-574.36 568.07,-577.62 572.5,-580 582.78,-585.54 594.89,-589.04 606.26,-591.24"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="606.21,-593.37 612.49,-592.34 606.94,-589.23 606.21,-593.37"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M397.62,-547.86C399.03,-546.71 400.33,-545.42 401.5,-544 412.17,-531.02 397.9,-405.15 409.5,-393 435.12,-366.17 543.02,-365.97 602.22,-368.02"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="602.41,-370.13 608.49,-368.25 602.57,-365.93 602.41,-370.13"/>
 </g>
 <!-- src/Components/Map/Subcomponents/ItemFormPopup.tsx&#45;&gt;src/Components/Map/hooks/useFilter.tsx -->
-<g id="edge39" class="edge">
+<g id="edge49" class="edge">
 <title>src/Components/Map/Subcomponents/ItemFormPopup.tsx&#45;&gt;src/Components/Map/hooks/useFilter.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M397.78,-502.1C400.46,-503.25 403.06,-504.54 405.5,-506 410.1,-508.74 408.62,-512.81 413.5,-515 446.59,-529.86 547.79,-518.89 605,-511.06"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="605.41,-513.12 611.07,-510.22 604.84,-508.96 605.41,-513.12"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M397.5,-547.75C398.94,-546.63 400.28,-545.38 401.5,-544 420.76,-522.17 388.5,-499.16 409.5,-479 436.01,-453.55 541.95,-454.67 601.08,-457.45"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="601.25,-459.57 607.35,-457.76 601.46,-455.37 601.25,-459.57"/>
 </g>
 <!-- src/Components/Map/Subcomponents/ItemFormPopup.tsx&#45;&gt;src/Components/Map/hooks/useItems.tsx -->
-<g id="edge40" class="edge">
+<g id="edge50" 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="M399.59,-502.08C401.67,-503.24 403.65,-504.54 405.5,-506 411.73,-510.93 407.15,-517.22 413.5,-522 442.79,-544.04 544.52,-556.28 603.09,-561.65"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="603.15,-563.77 609.31,-562.21 603.53,-559.58 603.15,-563.77"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M397.56,-547.8C398.98,-546.67 400.3,-545.4 401.5,-544 414.66,-528.55 396.24,-468.37 409.5,-453 456.19,-398.9 545.7,-393.71 598.85,-396.03"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="599.05,-398.15 605.14,-396.35 599.26,-393.95 599.05,-398.15"/>
 </g>
 <!-- src/types.ts -->
-<g id="node36" class="node">
+<g id="node42" class="node">
 <title>src/types.ts</title>
-<g id="a_node36"><a xlink:href="src/types.ts" xlink:title="types.ts">
-<path fill="#ddfeff" stroke="black" d="M506,-1176C506,-1176 464,-1176 464,-1176 461,-1176 458,-1173 458,-1170 458,-1170 458,-1164 458,-1164 458,-1161 461,-1158 464,-1158 464,-1158 506,-1158 506,-1158 509,-1158 512,-1161 512,-1164 512,-1164 512,-1170 512,-1170 512,-1173 509,-1176 506,-1176"/>
-<text text-anchor="start" x="466.5" y="-1164.8" font-family="Helvetica,sans-Serif" font-size="9.00">types.ts</text>
+<g id="a_node42"><a xlink:href="src/types.ts" xlink:title="types.ts">
+<path fill="#ddfeff" stroke="black" d="M502,-1506C502,-1506 460,-1506 460,-1506 457,-1506 454,-1503 454,-1500 454,-1500 454,-1494 454,-1494 454,-1491 457,-1488 460,-1488 460,-1488 502,-1488 502,-1488 505,-1488 508,-1491 508,-1494 508,-1494 508,-1500 508,-1500 508,-1503 505,-1506 502,-1506"/>
+<text text-anchor="start" x="462.5" y="-1494.8" 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="edge34" class="edge">
+<g id="edge43" 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="M401.86,-502.25C403.17,-503.38 404.39,-504.62 405.5,-506 415.26,-518.15 408.68,-1052.18 413.5,-1067 424.84,-1101.9 452.98,-1135.24 470.08,-1153.23"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="468.91,-1155.03 474.59,-1157.88 471.93,-1152.11 468.91,-1155.03"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M395.6,-566.23C397.81,-567.86 399.81,-569.77 401.5,-572 414.84,-589.6 403.96,-1345.62 409.5,-1367 421.36,-1412.79 452.66,-1460 469.28,-1482.87"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="467.73,-1484.31 472.98,-1487.89 471.11,-1481.81 467.73,-1484.31"/>
 </g>
 <!-- src/Components/Map/Subcomponents/ItemFormPopup.tsx&#45;&gt;src/Utils/HashTagRegex.tsx -->
-<g id="edge35" class="edge">
+<g id="edge44" class="edge">
 <title>src/Components/Map/Subcomponents/ItemFormPopup.tsx&#45;&gt;src/Utils/HashTagRegex.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M399.08,-483.99C401.47,-482.3 403.65,-480.32 405.5,-478 418.07,-462.28 402.66,-313.96 413.5,-297 484.02,-186.62 645.07,-144.98 729.72,-130.32"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="730.12,-132.39 735.68,-129.31 729.41,-128.25 730.12,-132.39"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M351.26,-547.94C355.56,-519.22 371.55,-428.33 409.5,-364 461.24,-276.28 476.35,-242.35 568.5,-199 617.99,-175.72 681.24,-174.07 725.63,-176.78"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="725.63,-178.89 731.76,-177.19 725.92,-174.7 725.63,-178.89"/>
 </g>
 <!-- src/Utils/RandomColor.ts -->
-<g id="node38" class="node">
+<g id="node44" class="node">
 <title>src/Utils/RandomColor.ts</title>
-<g id="a_node38"><a xlink:href="src/Utils/RandomColor.ts" xlink:title="RandomColor.ts">
-<path fill="#ddfeff" stroke="black" d="M822.5,-72C822.5,-72 747.5,-72 747.5,-72 744.5,-72 741.5,-69 741.5,-66 741.5,-66 741.5,-60 741.5,-60 741.5,-57 744.5,-54 747.5,-54 747.5,-54 822.5,-54 822.5,-54 825.5,-54 828.5,-57 828.5,-60 828.5,-60 828.5,-66 828.5,-66 828.5,-69 825.5,-72 822.5,-72"/>
-<text text-anchor="start" x="749.5" y="-60.8" font-family="Helvetica,sans-Serif" font-size="9.00">RandomColor.ts</text>
+<g id="a_node44"><a xlink:href="src/Utils/RandomColor.ts" xlink:title="RandomColor.ts">
+<path fill="#ddfeff" stroke="black" d="M818.5,-102C818.5,-102 743.5,-102 743.5,-102 740.5,-102 737.5,-99 737.5,-96 737.5,-96 737.5,-90 737.5,-90 737.5,-87 740.5,-84 743.5,-84 743.5,-84 818.5,-84 818.5,-84 821.5,-84 824.5,-87 824.5,-90 824.5,-90 824.5,-96 824.5,-96 824.5,-99 821.5,-102 818.5,-102"/>
+<text text-anchor="start" x="745.5" y="-90.8" font-family="Helvetica,sans-Serif" font-size="9.00">RandomColor.ts</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Subcomponents/ItemFormPopup.tsx&#45;&gt;src/Utils/RandomColor.ts -->
-<g id="edge36" class="edge">
+<g id="edge45" class="edge">
 <title>src/Components/Map/Subcomponents/ItemFormPopup.tsx&#45;&gt;src/Utils/RandomColor.ts</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M399.6,-483.69C401.79,-482.06 403.79,-480.18 405.5,-478 426.09,-451.77 393.55,-204.72 413.5,-178 489.09,-76.75 652.88,-62.14 734.99,-61.56"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="735.24,-63.66 741.24,-61.54 735.23,-59.46 735.24,-63.66"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M350.27,-547.75C351.9,-497.23 362.13,-254.89 409.5,-201 492.06,-107.08 651.17,-92.7 731.32,-91.8"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="731.44,-93.9 737.43,-91.76 731.41,-89.7 731.44,-93.9"/>
 </g>
 <!-- src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx -->
-<g id="node39" class="node">
+<g id="node45" class="node">
 <title>src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx</title>
-<g id="a_node39"><a xlink:href="src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx" xlink:title="HeaderView.tsx">
-<path fill="#bbfeff" stroke="black" d="M522,-356C522,-356 448,-356 448,-356 445,-356 442,-353 442,-350 442,-350 442,-344 442,-344 442,-341 445,-338 448,-338 448,-338 522,-338 522,-338 525,-338 528,-341 528,-344 528,-344 528,-350 528,-350 528,-353 525,-356 522,-356"/>
-<text text-anchor="start" x="450" y="-344.8" font-family="Helvetica,sans-Serif" font-size="9.00">HeaderView.tsx</text>
+<g id="a_node45"><a xlink:href="src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx" xlink:title="HeaderView.tsx">
+<path fill="#bbfeff" stroke="black" d="M518,-604C518,-604 444,-604 444,-604 441,-604 438,-601 438,-598 438,-598 438,-592 438,-592 438,-589 441,-586 444,-586 444,-586 518,-586 518,-586 521,-586 524,-589 524,-592 524,-592 524,-598 524,-598 524,-601 521,-604 518,-604"/>
+<text text-anchor="start" x="446" y="-592.8" 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/ItemPopupComponents/HeaderView.tsx -->
-<g id="edge51" class="edge">
+<g id="edge64" 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="M401.73,-343.92C412.9,-344.34 424.68,-344.78 435.73,-345.19"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="435.71,-347.29 441.78,-345.42 435.87,-343.1 435.71,-347.29"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M401.01,-590.14C411.14,-590.76 421.75,-591.42 431.78,-592.03"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="431.83,-594.14 437.95,-592.41 432.09,-589.95 431.83,-594.14"/>
 </g>
 <!-- src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx -->
-<g id="node44" class="node">
+<g id="node51" class="node">
 <title>src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx</title>
-<g id="a_node44"><a xlink:href="src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx" xlink:title="TextView.tsx">
-<path fill="#bbfeff" stroke="black" d="M514.5,-326C514.5,-326 455.5,-326 455.5,-326 452.5,-326 449.5,-323 449.5,-320 449.5,-320 449.5,-314 449.5,-314 449.5,-311 452.5,-308 455.5,-308 455.5,-308 514.5,-308 514.5,-308 517.5,-308 520.5,-311 520.5,-314 520.5,-314 520.5,-320 520.5,-320 520.5,-323 517.5,-326 514.5,-326"/>
-<text text-anchor="start" x="457.5" y="-314.8" font-family="Helvetica,sans-Serif" font-size="9.00">TextView.tsx</text>
+<g id="a_node51"><a xlink:href="src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx" xlink:title="TextView.tsx">
+<path fill="#bbfeff" stroke="black" d="M510.5,-574C510.5,-574 451.5,-574 451.5,-574 448.5,-574 445.5,-571 445.5,-568 445.5,-568 445.5,-562 445.5,-562 445.5,-559 448.5,-556 451.5,-556 451.5,-556 510.5,-556 510.5,-556 513.5,-556 516.5,-559 516.5,-562 516.5,-562 516.5,-568 516.5,-568 516.5,-571 513.5,-574 510.5,-574"/>
+<text text-anchor="start" x="453.5" y="-562.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/ItemPopupComponents/TextView.tsx -->
-<g id="edge52" class="edge">
+<g id="edge65" 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="M398.7,-332.97C413.34,-330.23 429.27,-327.25 443.36,-324.61"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="443.76,-326.67 449.27,-323.5 442.99,-322.54 443.76,-326.67"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M401.01,-578.37C413.61,-576.24 426.94,-573.98 439,-571.94"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="439.61,-573.97 445.17,-570.89 438.91,-569.82 439.61,-573.97"/>
+</g>
+<!-- src/Utils/TimeAgo.ts -->
+<g id="node53" class="node">
+<title>src/Utils/TimeAgo.ts</title>
+<g id="a_node53"><a xlink:href="src/Utils/TimeAgo.ts" xlink:title="TimeAgo.ts">
+<path fill="#ddfeff" stroke="black" d="M808.5,-222C808.5,-222 753.5,-222 753.5,-222 750.5,-222 747.5,-219 747.5,-216 747.5,-216 747.5,-210 747.5,-210 747.5,-207 750.5,-204 753.5,-204 753.5,-204 808.5,-204 808.5,-204 811.5,-204 814.5,-207 814.5,-210 814.5,-210 814.5,-216 814.5,-216 814.5,-219 811.5,-222 808.5,-222"/>
+<text text-anchor="start" x="755.5" y="-210.8" font-family="Helvetica,sans-Serif" font-size="9.00">TimeAgo.ts</text>
+</a>
+</g>
+</g>
+<!-- src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Utils/TimeAgo.ts -->
+<g id="edge63" class="edge">
+<title>src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Utils/TimeAgo.ts</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M395.6,-596.22C397.82,-597.86 399.81,-599.77 401.5,-602 416.79,-622.2 391.51,-1496.16 409.5,-1514 421.42,-1525.81 548.6,-1525.82 560.5,-1514 572.27,-1502.31 559.77,-334.1 568.5,-320 606.5,-258.65 691.69,-231.14 741.58,-219.9"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="742.07,-221.94 747.49,-218.61 741.18,-217.84 742.07,-221.94"/>
 </g>
 <!-- src/Components/Map/Permissions.tsx -->
-<g id="node29" class="node">
+<g id="node34" class="node">
 <title>src/Components/Map/Permissions.tsx</title>
-<g id="a_node29"><a xlink:href="src/Components/Map/Permissions.tsx" xlink:title="Permissions.tsx">
-<path fill="#bbfeff" stroke="black" d="M274.5,-586C274.5,-586 200.5,-586 200.5,-586 197.5,-586 194.5,-583 194.5,-580 194.5,-580 194.5,-574 194.5,-574 194.5,-571 197.5,-568 200.5,-568 200.5,-568 274.5,-568 274.5,-568 277.5,-568 280.5,-571 280.5,-574 280.5,-574 280.5,-580 280.5,-580 280.5,-583 277.5,-586 274.5,-586"/>
-<text text-anchor="start" x="202.5" y="-574.8" font-family="Helvetica,sans-Serif" font-size="9.00">Permissions.tsx</text>
+<g id="a_node34"><a xlink:href="src/Components/Map/Permissions.tsx" xlink:title="Permissions.tsx">
+<path fill="#bbfeff" stroke="black" d="M274.5,-930C274.5,-930 200.5,-930 200.5,-930 197.5,-930 194.5,-927 194.5,-924 194.5,-924 194.5,-918 194.5,-918 194.5,-915 197.5,-912 200.5,-912 200.5,-912 274.5,-912 274.5,-912 277.5,-912 280.5,-915 280.5,-918 280.5,-918 280.5,-924 280.5,-924 280.5,-927 277.5,-930 274.5,-930"/>
+<text text-anchor="start" x="202.5" y="-918.8" font-family="Helvetica,sans-Serif" font-size="9.00">Permissions.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Permissions.tsx&#45;&gt;src/Components/Auth/index.tsx -->
-<g id="edge27" class="edge">
+<g id="edge36" class="edge">
 <title>src/Components/Map/Permissions.tsx&#45;&gt;src/Components/Auth/index.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M274.59,-586.21C276.84,-587.84 278.85,-589.75 280.5,-592 295.93,-613.08 271.97,-807.18 289,-827 328.35,-872.81 405.21,-873.24 449.79,-868.95"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="450.1,-871.03 455.85,-868.32 449.67,-866.85 450.1,-871.03"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M252.28,-930.19C261.97,-936.14 275.48,-943.41 288.5,-947 346.87,-963.1 516.49,-921.42 560.5,-963 571.72,-973.6 562.87,-1017.63 568.5,-1032 582.03,-1066.58 610.54,-1100.03 627.66,-1118.13"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="626.49,-1119.94 632.16,-1122.81 629.52,-1117.03 626.49,-1119.94"/>
 </g>
 <!-- src/Components/Map/hooks/usePermissions.tsx -->
-<g id="node30" class="node">
+<g id="node35" class="node">
 <title>src/Components/Map/hooks/usePermissions.tsx</title>
-<g id="a_node30"><a xlink:href="src/Components/Map/hooks/usePermissions.tsx" xlink:title="usePermissions.tsx">
-<path fill="#bbfeff" stroke="black" d="M691,-664C691,-664 602,-664 602,-664 599,-664 596,-661 596,-658 596,-658 596,-652 596,-652 596,-649 599,-646 602,-646 602,-646 691,-646 691,-646 694,-646 697,-649 697,-652 697,-652 697,-658 697,-658 697,-661 694,-664 691,-664"/>
-<text text-anchor="start" x="604" y="-652.8" font-family="Helvetica,sans-Serif" font-size="9.00">usePermissions.tsx</text>
+<g id="a_node35"><a xlink:href="src/Components/Map/hooks/usePermissions.tsx" xlink:title="usePermissions.tsx">
+<path fill="#bbfeff" stroke="black" d="M687,-439C687,-439 598,-439 598,-439 595,-439 592,-436 592,-433 592,-433 592,-427 592,-427 592,-424 595,-421 598,-421 598,-421 687,-421 687,-421 690,-421 693,-424 693,-427 693,-427 693,-433 693,-433 693,-436 690,-439 687,-439"/>
+<text text-anchor="start" x="600" y="-427.8" font-family="Helvetica,sans-Serif" font-size="9.00">usePermissions.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Permissions.tsx&#45;&gt;src/Components/Map/hooks/usePermissions.tsx -->
-<g id="edge28" class="edge">
+<g id="edge37" class="edge">
 <title>src/Components/Map/Permissions.tsx&#45;&gt;src/Components/Map/hooks/usePermissions.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M280.72,-582.34C343.39,-590.81 464.4,-609.25 564.5,-637 568.16,-638.01 568.85,-638.95 572.5,-640 578.19,-641.64 584.17,-643.17 590.17,-644.58"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="589.84,-646.66 596.16,-645.96 590.78,-642.57 589.84,-646.66"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M240.36,-911.64C246.95,-878.03 269.42,-760.23 280.5,-662 283.62,-634.34 274.82,-561.24 288.5,-537 346.09,-434.99 501.61,-424.13 585.71,-426.24"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="585.82,-428.35 591.88,-426.42 585.95,-424.15 585.82,-428.35"/>
 </g>
 <!-- src/Components/Map/hooks/usePermissions.tsx&#45;&gt;src/Components/Auth/index.tsx -->
-<g id="edge64" class="edge">
+<g id="edge84" class="edge">
 <title>src/Components/Map/hooks/usePermissions.tsx&#45;&gt;src/Components/Auth/index.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M636.14,-664.18C619.99,-680.67 587.21,-717.13 572.5,-755 560.84,-785.01 583.22,-800.8 564.5,-827 553.97,-841.74 536.01,-850.79 519.93,-856.25"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="519.19,-854.29 514.11,-858.11 520.46,-858.29 519.19,-854.29"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M591.67,-429.7C579.12,-432.6 568.2,-438.79 564.5,-451 559.87,-466.29 559.87,-1010.71 564.5,-1026 576.1,-1064.3 608.34,-1099.81 627.55,-1118.42"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="626.33,-1120.17 632.13,-1122.78 629.23,-1117.12 626.33,-1120.17"/>
 </g>
 <!-- src/Components/Map/Subcomponents/AddButton.tsx -->
-<g id="node31" class="node">
+<g id="node36" class="node">
 <title>src/Components/Map/Subcomponents/AddButton.tsx</title>
-<g id="a_node31"><a xlink:href="src/Components/Map/Subcomponents/AddButton.tsx" xlink:title="AddButton.tsx">
-<path fill="#bbfeff" stroke="black" d="M384.5,-472C384.5,-472 314.5,-472 314.5,-472 311.5,-472 308.5,-469 308.5,-466 308.5,-466 308.5,-460 308.5,-460 308.5,-457 311.5,-454 314.5,-454 314.5,-454 384.5,-454 384.5,-454 387.5,-454 390.5,-457 390.5,-460 390.5,-460 390.5,-466 390.5,-466 390.5,-469 387.5,-472 384.5,-472"/>
-<text text-anchor="start" x="316.5" y="-460.8" font-family="Helvetica,sans-Serif" font-size="9.00">AddButton.tsx</text>
+<g id="a_node36"><a xlink:href="src/Components/Map/Subcomponents/AddButton.tsx" xlink:title="AddButton.tsx">
+<path fill="#bbfeff" stroke="black" d="M384,-656C384,-656 314,-656 314,-656 311,-656 308,-653 308,-650 308,-650 308,-644 308,-644 308,-641 311,-638 314,-638 314,-638 384,-638 384,-638 387,-638 390,-641 390,-644 390,-644 390,-650 390,-650 390,-653 387,-656 384,-656"/>
+<text text-anchor="start" x="316" y="-644.8" 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/usePermissions.tsx -->
-<g id="edge31" class="edge">
+<g id="edge40" class="edge">
 <title>src/Components/Map/Subcomponents/AddButton.tsx&#45;&gt;src/Components/Map/hooks/usePermissions.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M390.57,-468.05C396.21,-470.32 401.45,-473.52 405.5,-478 420,-494.05 399.92,-509.17 413.5,-526 458.84,-582.2 519.67,-529.39 564.5,-586 579.56,-605.02 555.83,-622.37 572.5,-640 577.27,-645.04 583.23,-648.62 589.69,-651.14"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="589.39,-653.26 595.75,-653.17 590.72,-649.27 589.39,-653.26"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M390.01,-640.96C394.43,-638.78 398.44,-635.87 401.5,-632 422.64,-605.31 387.41,-504.9 409.5,-479 431.91,-452.73 524.55,-439.85 585.77,-434.09"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="586.18,-436.16 591.97,-433.52 585.8,-431.98 586.18,-436.16"/>
 </g>
 <!-- src/Utils/DynamicHeroIcon.tsx -->
-<g id="node32" class="node">
+<g id="node37" class="node">
 <title>src/Utils/DynamicHeroIcon.tsx</title>
-<g id="a_node32"><a xlink:href="src/Utils/DynamicHeroIcon.tsx" xlink:title="DynamicHeroIcon.tsx">
-<path fill="#bbfeff" stroke="black" d="M835.5,-42C835.5,-42 734.5,-42 734.5,-42 731.5,-42 728.5,-39 728.5,-36 728.5,-36 728.5,-30 728.5,-30 728.5,-27 731.5,-24 734.5,-24 734.5,-24 835.5,-24 835.5,-24 838.5,-24 841.5,-27 841.5,-30 841.5,-30 841.5,-36 841.5,-36 841.5,-39 838.5,-42 835.5,-42"/>
-<text text-anchor="start" x="736.5" y="-30.8" font-family="Helvetica,sans-Serif" font-size="9.00">DynamicHeroIcon.tsx</text>
+<g id="a_node37"><a xlink:href="src/Utils/DynamicHeroIcon.tsx" xlink:title="DynamicHeroIcon.tsx">
+<path fill="#bbfeff" stroke="black" d="M831.5,-132C831.5,-132 730.5,-132 730.5,-132 727.5,-132 724.5,-129 724.5,-126 724.5,-126 724.5,-120 724.5,-120 724.5,-117 727.5,-114 730.5,-114 730.5,-114 831.5,-114 831.5,-114 834.5,-114 837.5,-117 837.5,-120 837.5,-120 837.5,-126 837.5,-126 837.5,-129 834.5,-132 831.5,-132"/>
+<text text-anchor="start" x="732.5" y="-120.8" 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="edge29" class="edge">
+<g id="edge38" 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="M390.57,-458.63C396.35,-456.29 401.64,-452.9 405.5,-448 424.07,-424.42 396.56,-202.77 413.5,-178 483.19,-76.11 636.14,-45.82 722.14,-36.81"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="722.45,-38.89 728.21,-36.2 722.03,-34.71 722.45,-38.89"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M390.3,-640.87C394.62,-638.7 398.52,-635.81 401.5,-632 415.07,-614.66 403.16,-455.09 409.5,-434 448.83,-303.19 457.74,-250.93 568.5,-171 612.18,-139.48 673.1,-128.2 718.35,-124.38"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="718.53,-126.47 724.34,-123.91 718.2,-122.28 718.53,-126.47"/>
 </g>
 <!-- src/Components/Map/Subcomponents/AddButton.tsx&#45;&gt;src/Components/Map/hooks/useLayers.tsx -->
-<g id="edge30" class="edge">
+<g id="edge39" 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="M390.57,-467.71C396.28,-470.01 401.54,-473.31 405.5,-478 417.31,-491.99 404.22,-544.22 413.5,-560 457.05,-634.08 490.47,-644.39 572.5,-670 631.73,-688.49 704.66,-676.13 747.57,-665.52"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="748.12,-667.55 753.42,-664.04 747.09,-663.48 748.12,-667.55"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M390.15,-640.75C394.49,-638.6 398.44,-635.75 401.5,-632 415.18,-615.25 394.34,-550.43 409.5,-535 456.3,-487.36 642.51,-515.2 708.5,-505 717.45,-503.62 726.96,-501.84 736.03,-499.99"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="736.47,-502.05 741.92,-498.78 735.62,-497.94 736.47,-502.05"/>
+</g>
+<!-- src/Components/Map/Subcomponents/Control.tsx -->
+<g id="node39" class="node">
+<title>src/Components/Map/Subcomponents/Control.tsx</title>
+<g id="a_node39"><a xlink:href="src/Components/Map/Subcomponents/Control.tsx" xlink:title="Control.tsx">
+<path fill="#bbfeff" stroke="black" d="M375.5,-626C375.5,-626 322.5,-626 322.5,-626 319.5,-626 316.5,-623 316.5,-620 316.5,-620 316.5,-614 316.5,-614 316.5,-611 319.5,-608 322.5,-608 322.5,-608 375.5,-608 375.5,-608 378.5,-608 381.5,-611 381.5,-614 381.5,-614 381.5,-620 381.5,-620 381.5,-623 378.5,-626 375.5,-626"/>
+<text text-anchor="start" x="324.5" y="-614.8" font-family="Helvetica,sans-Serif" font-size="9.00">Control.tsx</text>
+</a>
+</g>
 </g>
 <!-- src/Components/Map/Subcomponents/FilterControl.tsx -->
-<g id="node34" class="node">
+<g id="node40" class="node">
 <title>src/Components/Map/Subcomponents/FilterControl.tsx</title>
-<g id="a_node34"><a xlink:href="src/Components/Map/Subcomponents/FilterControl.tsx" xlink:title="FilterControl.tsx">
-<path fill="#bbfeff" stroke="black" d="M387,-442C387,-442 312,-442 312,-442 309,-442 306,-439 306,-436 306,-436 306,-430 306,-430 306,-427 309,-424 312,-424 312,-424 387,-424 387,-424 390,-424 393,-427 393,-430 393,-430 393,-436 393,-436 393,-439 390,-442 387,-442"/>
-<text text-anchor="start" x="314" y="-430.8" font-family="Helvetica,sans-Serif" font-size="9.00">FilterControl.tsx</text>
+<g id="a_node40"><a xlink:href="src/Components/Map/Subcomponents/FilterControl.tsx" xlink:title="FilterControl.tsx">
+<path fill="#bbfeff" stroke="black" d="M386.5,-686C386.5,-686 311.5,-686 311.5,-686 308.5,-686 305.5,-683 305.5,-680 305.5,-680 305.5,-674 305.5,-674 305.5,-671 308.5,-668 311.5,-668 311.5,-668 386.5,-668 386.5,-668 389.5,-668 392.5,-671 392.5,-674 392.5,-674 392.5,-680 392.5,-680 392.5,-683 389.5,-686 386.5,-686"/>
+<text text-anchor="start" x="313.5" y="-674.8" font-family="Helvetica,sans-Serif" font-size="9.00">FilterControl.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Subcomponents/FilterControl.tsx&#45;&gt;src/Components/Map/hooks/useFilter.tsx -->
-<g id="edge32" class="edge">
+<g id="edge41" class="edge">
 <title>src/Components/Map/Subcomponents/FilterControl.tsx&#45;&gt;src/Components/Map/hooks/useFilter.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M393.13,-439.04C397.81,-441.23 402.1,-444.14 405.5,-448 422.41,-467.2 394.19,-488.22 413.5,-505 441.07,-528.97 546.04,-518.97 604.89,-511.11"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="605.47,-513.15 611.14,-510.26 604.91,-508.99 605.47,-513.15"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M392.72,-669.52C396.07,-667.54 399.08,-665.07 401.5,-662 413.2,-647.15 396.74,-505.96 409.5,-492 422.19,-478.11 537.87,-467.57 600.93,-462.8"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="601.41,-464.87 607.24,-462.33 601.1,-460.69 601.41,-464.87"/>
 </g>
 <!-- src/Components/Map/hooks/useWindowDimension.tsx -->
-<g id="node35" class="node">
+<g id="node41" class="node">
 <title>src/Components/Map/hooks/useWindowDimension.tsx</title>
-<g id="a_node35"><a xlink:href="src/Components/Map/hooks/useWindowDimension.tsx" xlink:title="useWindowDimension.tsx">
-<path fill="#bbfeff" stroke="black" d="M706.5,-544C706.5,-544 586.5,-544 586.5,-544 583.5,-544 580.5,-541 580.5,-538 580.5,-538 580.5,-532 580.5,-532 580.5,-529 583.5,-526 586.5,-526 586.5,-526 706.5,-526 706.5,-526 709.5,-526 712.5,-529 712.5,-532 712.5,-532 712.5,-538 712.5,-538 712.5,-541 709.5,-544 706.5,-544"/>
-<text text-anchor="start" x="588.5" y="-532.8" font-family="Helvetica,sans-Serif" font-size="9.00">useWindowDimension.tsx</text>
+<g id="a_node41"><a xlink:href="src/Components/Map/hooks/useWindowDimension.tsx" xlink:title="useWindowDimension.tsx">
+<path fill="#bbfeff" stroke="black" d="M702.5,-499C702.5,-499 582.5,-499 582.5,-499 579.5,-499 576.5,-496 576.5,-493 576.5,-493 576.5,-487 576.5,-487 576.5,-484 579.5,-481 582.5,-481 582.5,-481 702.5,-481 702.5,-481 705.5,-481 708.5,-484 708.5,-487 708.5,-487 708.5,-493 708.5,-493 708.5,-496 705.5,-499 702.5,-499"/>
+<text text-anchor="start" x="584.5" y="-487.8" font-family="Helvetica,sans-Serif" font-size="9.00">useWindowDimension.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Subcomponents/FilterControl.tsx&#45;&gt;src/Components/Map/hooks/useWindowDimension.tsx -->
-<g id="edge33" class="edge">
+<g id="edge42" class="edge">
 <title>src/Components/Map/Subcomponents/FilterControl.tsx&#45;&gt;src/Components/Map/hooks/useWindowDimension.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M393.22,-438.96C397.88,-441.17 402.14,-444.1 405.5,-448 425.35,-471.06 391.6,-494.87 413.5,-516 416.42,-518.82 507.31,-525.6 574.44,-530.25"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="574.32,-532.35 580.45,-530.66 574.61,-528.16 574.32,-532.35"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M392.67,-669.48C396.03,-667.51 399.06,-665.05 401.5,-662 419.17,-639.93 390.83,-556.24 409.5,-535 430.35,-511.28 510.04,-499.81 570.25,-494.44"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="570.58,-496.52 576.38,-493.91 570.22,-492.34 570.58,-496.52"/>
+</g>
+<!-- src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx&#45;&gt;src/Components/Auth/index.tsx -->
+<g id="edge52" class="edge">
+<title>src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx&#45;&gt;src/Components/Auth/index.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M524.37,-593.16C537.9,-594.88 551.65,-599.5 560.5,-610 575.61,-627.93 561.02,-1009.78 568.5,-1032 580.35,-1067.19 609.45,-1100.43 627.12,-1118.32"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="626.04,-1120.21 631.78,-1122.95 629,-1117.23 626.04,-1120.21"/>
 </g>
 <!-- src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx&#45;&gt;src/Components/Map/hooks/useItems.tsx -->
-<g id="edge42" class="edge">
+<g id="edge53" 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="M528.23,-345.27C541.75,-347 555.52,-351.6 564.5,-362 578.16,-377.82 558.95,-534.08 572.5,-550 580.14,-558.98 591.59,-563.46 603.17,-565.52"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="602.98,-567.61 609.22,-566.38 603.58,-563.46 602.98,-567.61"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M524.2,-596.7C537.71,-594.96 551.49,-590.37 560.5,-580 572.54,-566.14 556.56,-428.94 568.5,-415 576.17,-406.05 587.63,-401.57 599.2,-399.51"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="599.61,-401.57 605.25,-398.64 599.01,-397.42 599.61,-401.57"/>
 </g>
 <!-- src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx&#45;&gt;src/Components/Map/hooks/usePermissions.tsx -->
-<g id="edge43" class="edge">
+<g id="edge54" class="edge">
 <title>src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx&#45;&gt;src/Components/Map/hooks/usePermissions.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M528.31,-345.2C541.84,-346.93 555.59,-351.54 564.5,-362 584.53,-385.53 552.63,-616.33 572.5,-640 577.18,-645.57 583.33,-649.42 590.07,-652.03"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="589.5,-654.06 595.86,-653.95 590.82,-650.07 589.5,-654.06"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M524.13,-596.64C537.64,-594.9 551.44,-590.32 560.5,-580 580.33,-557.42 548.83,-467.72 568.5,-445 573.2,-439.57 579.29,-435.8 585.94,-433.21"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="586.63,-435.19 591.65,-431.3 585.3,-431.21 586.63,-435.19"/>
+</g>
+<!-- src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx -->
+<g id="node46" class="node">
+<title>src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx</title>
+<g id="a_node46"><a xlink:href="src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx" xlink:title="PopupButton.tsx">
+<path fill="#bbfeff" stroke="black" d="M521,-724C521,-724 441,-724 441,-724 438,-724 435,-721 435,-718 435,-718 435,-712 435,-712 435,-709 438,-706 441,-706 441,-706 521,-706 521,-706 524,-706 527,-709 527,-712 527,-712 527,-718 527,-718 527,-721 524,-724 521,-724"/>
+<text text-anchor="start" x="443" y="-712.8" font-family="Helvetica,sans-Serif" font-size="9.00">PopupButton.tsx</text>
+</a>
+</g>
+</g>
+<!-- src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx&#45;&gt;src/Utils/GetValue.ts -->
+<g id="edge55" class="edge">
+<title>src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx&#45;&gt;src/Utils/GetValue.ts</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M527.23,-716.43C539.81,-714.43 552.26,-709.75 560.5,-700 574.48,-683.44 562.22,-330.74 568.5,-310 572.93,-295.37 704.03,-86.85 716.5,-78 723.7,-72.88 732.41,-69.49 741.04,-67.25"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="741.61,-69.28 746.98,-65.88 740.66,-65.18 741.61,-69.28"/>
 </g>
 <!-- src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx -->
-<g id="node40" class="node">
+<g id="node47" class="node">
 <title>src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx</title>
-<g id="a_node40"><a xlink:href="src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx" xlink:title="PopupStartEndInput.tsx">
-<path fill="#bbfeff" stroke="black" d="M542.5,-416C542.5,-416 427.5,-416 427.5,-416 424.5,-416 421.5,-413 421.5,-410 421.5,-410 421.5,-404 421.5,-404 421.5,-401 424.5,-398 427.5,-398 427.5,-398 542.5,-398 542.5,-398 545.5,-398 548.5,-401 548.5,-404 548.5,-404 548.5,-410 548.5,-410 548.5,-413 545.5,-416 542.5,-416"/>
-<text text-anchor="start" x="429.5" y="-404.8" font-family="Helvetica,sans-Serif" font-size="9.00">PopupStartEndInput.tsx</text>
+<g id="a_node47"><a xlink:href="src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx" xlink:title="PopupStartEndInput.tsx">
+<path fill="#bbfeff" stroke="black" d="M538.5,-754C538.5,-754 423.5,-754 423.5,-754 420.5,-754 417.5,-751 417.5,-748 417.5,-748 417.5,-742 417.5,-742 417.5,-739 420.5,-736 423.5,-736 423.5,-736 538.5,-736 538.5,-736 541.5,-736 544.5,-739 544.5,-742 544.5,-742 544.5,-748 544.5,-748 544.5,-751 541.5,-754 538.5,-754"/>
+<text text-anchor="start" x="425.5" y="-742.8" 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="edge44" class="edge">
+<g id="edge56" 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="M548.77,-410.52C554.78,-413.19 560.22,-416.9 564.5,-422 583.26,-444.34 554.92,-923.72 572.5,-947 581.57,-959.02 596.99,-964.7 611.33,-967.3"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="611.14,-969.4 617.39,-968.24 611.78,-965.25 611.14,-969.4"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M486.82,-754.23C499.17,-777.9 532.92,-842.72 560.5,-897 564.1,-904.09 562.1,-908.28 568.5,-913 619.27,-950.4 649.54,-913.65 708.5,-936 728.84,-943.71 749.61,-957.59 763.49,-967.9"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="762.58,-969.85 768.63,-971.8 765.12,-966.5 762.58,-969.85"/>
 </g>
 <!-- src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx -->
-<g id="node41" class="node">
+<g id="node48" class="node">
 <title>src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx</title>
-<g id="a_node41"><a xlink:href="src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx" xlink:title="PopupTextAreaInput.tsx">
-<path fill="#bbfeff" stroke="black" d="M541.5,-446C541.5,-446 428.5,-446 428.5,-446 425.5,-446 422.5,-443 422.5,-440 422.5,-440 422.5,-434 422.5,-434 422.5,-431 425.5,-428 428.5,-428 428.5,-428 541.5,-428 541.5,-428 544.5,-428 547.5,-431 547.5,-434 547.5,-434 547.5,-440 547.5,-440 547.5,-443 544.5,-446 541.5,-446"/>
-<text text-anchor="start" x="430.5" y="-434.8" font-family="Helvetica,sans-Serif" font-size="9.00">PopupTextAreaInput.tsx</text>
+<g id="a_node48"><a xlink:href="src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx" xlink:title="PopupTextAreaInput.tsx">
+<path fill="#bbfeff" stroke="black" d="M537.5,-634C537.5,-634 424.5,-634 424.5,-634 421.5,-634 418.5,-631 418.5,-628 418.5,-628 418.5,-622 418.5,-622 418.5,-619 421.5,-616 424.5,-616 424.5,-616 537.5,-616 537.5,-616 540.5,-616 543.5,-619 543.5,-622 543.5,-622 543.5,-628 543.5,-628 543.5,-631 540.5,-634 537.5,-634"/>
+<text text-anchor="start" x="426.5" y="-622.8" 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="edge45" class="edge">
+<g id="edge57" class="edge">
 <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="M547.63,-440.03C554.09,-442.73 559.95,-446.58 564.5,-452 582.2,-473.05 555.92,-925.06 572.5,-947 581.58,-959.01 597,-964.69 611.34,-967.3"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="611.14,-969.39 617.39,-968.24 611.79,-965.24 611.14,-969.39"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M543.53,-631.65C549.54,-633.78 555.33,-636.51 560.5,-640 687.23,-725.56 756.91,-911.36 775.13,-965.75"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="773.22,-966.68 777.1,-971.72 777.21,-965.36 773.22,-966.68"/>
 </g>
 <!-- src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx -->
-<g id="node42" class="node">
+<g id="node49" class="node">
 <title>src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx</title>
-<g id="a_node42"><a xlink:href="src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx" xlink:title="PopupTextInput.tsx">
-<path fill="#ccffcc" stroke="black" d="M531,-386C531,-386 439,-386 439,-386 436,-386 433,-383 433,-380 433,-380 433,-374 433,-374 433,-371 436,-368 439,-368 439,-368 531,-368 531,-368 534,-368 537,-371 537,-374 537,-374 537,-380 537,-380 537,-383 534,-386 531,-386"/>
-<text text-anchor="start" x="441" y="-374.8" font-family="Helvetica,sans-Serif" font-size="9.00">PopupTextInput.tsx</text>
+<g id="a_node49"><a xlink:href="src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx" xlink:title="PopupTextInput.tsx">
+<path fill="#bbfeff" stroke="black" d="M527,-664C527,-664 435,-664 435,-664 432,-664 429,-661 429,-658 429,-658 429,-652 429,-652 429,-649 432,-646 435,-646 435,-646 527,-646 527,-646 530,-646 533,-649 533,-652 533,-652 533,-658 533,-658 533,-661 530,-664 527,-664"/>
+<text text-anchor="start" x="437" y="-652.8" font-family="Helvetica,sans-Serif" font-size="9.00">PopupTextInput.tsx</text>
 </a>
 </g>
 </g>
+<!-- src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx&#45;&gt;src/Components/Input/index.tsx -->
+<g id="edge58" class="edge">
+<title>src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx&#45;&gt;src/Components/Input/index.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M533.27,-654.85C543.68,-657.3 553.55,-661.89 560.5,-670 577,-689.25 551.29,-879.38 568.5,-898 589.75,-921 680.08,-900.85 708.5,-914 734.3,-925.94 756.88,-950.84 769.46,-966.69"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="767.99,-968.23 773.33,-971.69 771.31,-965.66 767.99,-968.23"/>
+</g>
 <!-- src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx -->
-<g id="node43" class="node">
+<g id="node50" class="node">
 <title>src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx</title>
-<g id="a_node43"><a xlink:href="src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx" xlink:title="StartEndView.tsx">
-<path fill="#bbfeff" stroke="black" d="M526,-476C526,-476 444,-476 444,-476 441,-476 438,-473 438,-470 438,-470 438,-464 438,-464 438,-461 441,-458 444,-458 444,-458 526,-458 526,-458 529,-458 532,-461 532,-464 532,-464 532,-470 532,-470 532,-473 529,-476 526,-476"/>
-<text text-anchor="start" x="446" y="-464.8" font-family="Helvetica,sans-Serif" font-size="9.00">StartEndView.tsx</text>
+<g id="a_node50"><a xlink:href="src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx" xlink:title="StartEndView.tsx">
+<path fill="#bbfeff" stroke="black" d="M522,-694C522,-694 440,-694 440,-694 437,-694 434,-691 434,-688 434,-688 434,-682 434,-682 434,-679 437,-676 440,-676 440,-676 522,-676 522,-676 525,-676 528,-679 528,-682 528,-682 528,-688 528,-688 528,-691 525,-694 522,-694"/>
+<text text-anchor="start" x="442" y="-682.8" 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="edge50" class="edge">
+<g id="edge62" 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="M520.57,-314.53C536.35,-315.39 553.86,-319.55 564.5,-332 582.41,-352.96 554.73,-558.92 572.5,-580 580.74,-589.78 593.5,-594.24 606.06,-596.04"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="605.99,-598.14 612.18,-596.72 606.45,-593.97 605.99,-598.14"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M483.5,-555.74C488.86,-525.76 510.01,-430.65 568.5,-385 578.05,-377.54 590.39,-373.53 602.19,-371.45"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="602.68,-373.5 608.3,-370.53 602.05,-369.35 602.68,-373.5"/>
 </g>
 <!-- src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx&#45;&gt;src/Components/Map/hooks/useFilter.tsx -->
-<g id="edge49" class="edge">
+<g id="edge61" class="edge">
 <title>src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx&#45;&gt;src/Components/Map/hooks/useFilter.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M520.53,-316.8C535.38,-318.33 552.12,-322.38 564.5,-332 616.78,-372.65 636.78,-455.14 643.06,-489.47"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="641.04,-490.11 644.13,-495.67 645.17,-489.4 641.04,-490.11"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M516.58,-557.23C532.37,-551.9 549.88,-543.15 560.5,-529 575.07,-509.6 551.83,-492.63 568.5,-475 576.9,-466.12 589.05,-461.75 601.04,-459.77"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="601.6,-461.81 607.27,-458.94 601.05,-457.65 601.6,-461.81"/>
 </g>
 <!-- src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx&#45;&gt;src/Utils/HashTagRegex.tsx -->
-<g id="edge46" class="edge">
+<g id="edge59" class="edge">
 <title>src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx&#45;&gt;src/Utils/HashTagRegex.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M520.89,-313.38C581.23,-306.77 699.88,-292.14 712.5,-278 733.25,-254.75 700.47,-161.87 720.5,-138 723.24,-134.73 726.54,-132.11 730.19,-129.99"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="731.29,-131.79 735.75,-127.26 729.44,-128.02 731.29,-131.79"/>
-</g>
-<!-- src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx&#45;&gt;src/Utils/RandomColor.ts -->
-<g id="edge47" class="edge">
-<title>src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx&#45;&gt;src/Utils/RandomColor.ts</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M494.33,-307.79C509.45,-291.19 542.63,-255.34 572.5,-227 632.17,-170.4 668.25,-175.32 712.5,-106 719.46,-95.09 711.14,-86.94 720.5,-78 724.8,-73.89 730.01,-70.84 735.57,-68.58"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="736.27,-70.56 741.23,-66.58 734.87,-66.6 736.27,-70.56"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M483.14,-555.76C487.88,-520.62 508.6,-393.03 568.5,-310 616.77,-243.1 641.86,-233.13 716.5,-198 719.57,-196.55 722.8,-195.24 726.1,-194.05"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="727.08,-195.93 732.1,-192.03 725.75,-191.95 727.08,-195.93"/>
 </g>
 <!-- src/Utils/ReplaceURLs.ts -->
-<g id="node45" class="node">
+<g id="node52" class="node">
 <title>src/Utils/ReplaceURLs.ts</title>
-<g id="a_node45"><a xlink:href="src/Utils/ReplaceURLs.ts" xlink:title="ReplaceURLs.ts">
-<path fill="#ddfeff" stroke="black" d="M822,-102C822,-102 748,-102 748,-102 745,-102 742,-99 742,-96 742,-96 742,-90 742,-90 742,-87 745,-84 748,-84 748,-84 822,-84 822,-84 825,-84 828,-87 828,-90 828,-90 828,-96 828,-96 828,-99 825,-102 822,-102"/>
-<text text-anchor="start" x="750" y="-90.8" font-family="Helvetica,sans-Serif" font-size="9.00">ReplaceURLs.ts</text>
+<g id="a_node52"><a xlink:href="src/Utils/ReplaceURLs.ts" xlink:title="ReplaceURLs.ts">
+<path fill="#ddfeff" stroke="black" d="M818,-162C818,-162 744,-162 744,-162 741,-162 738,-159 738,-156 738,-156 738,-150 738,-150 738,-147 741,-144 744,-144 744,-144 818,-144 818,-144 821,-144 824,-147 824,-150 824,-150 824,-156 824,-156 824,-159 821,-162 818,-162"/>
+<text text-anchor="start" x="746" y="-150.8" font-family="Helvetica,sans-Serif" font-size="9.00">ReplaceURLs.ts</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx&#45;&gt;src/Utils/ReplaceURLs.ts -->
-<g id="edge48" class="edge">
+<g id="edge60" 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="M505.8,-307.95C523.25,-300.06 549.42,-288.43 572.5,-279 634.09,-253.83 672.86,-279.43 712.5,-226 728.16,-204.89 703.5,-128.05 720.5,-108 724.62,-103.14 730,-99.69 735.88,-97.27"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="736.92,-99.13 741.9,-95.17 735.54,-95.16 736.92,-99.13"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M483.54,-555.96C492.79,-502.14 541.47,-225.29 568.5,-199 614.05,-154.7 646.55,-184.15 708.5,-170 712.07,-169.18 712.94,-168.87 716.5,-168 722.53,-166.53 728.88,-165.01 735.14,-163.52"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="736.01,-165.47 741.36,-162.04 735.04,-161.39 736.01,-165.47"/>
+</g>
+<!-- src/Components/Map/Subcomponents/LayerControl.tsx -->
+<g id="node54" class="node">
+<title>src/Components/Map/Subcomponents/LayerControl.tsx</title>
+<g id="a_node54"><a xlink:href="src/Components/Map/Subcomponents/LayerControl.tsx" xlink:title="LayerControl.tsx">
+<path fill="#bbfeff" stroke="black" d="M388,-716C388,-716 310,-716 310,-716 307,-716 304,-713 304,-710 304,-710 304,-704 304,-704 304,-701 307,-698 310,-698 310,-698 388,-698 388,-698 391,-698 394,-701 394,-704 394,-704 394,-710 394,-710 394,-713 391,-716 388,-716"/>
+<text text-anchor="start" x="312" y="-704.8" font-family="Helvetica,sans-Serif" font-size="9.00">LayerControl.tsx</text>
+</a>
+</g>
+</g>
+<!-- src/Components/Map/Subcomponents/LayerControl.tsx&#45;&gt;src/Components/Map/hooks/useFilter.tsx -->
+<g id="edge66" class="edge">
+<title>src/Components/Map/Subcomponents/LayerControl.tsx&#45;&gt;src/Components/Map/hooks/useFilter.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M394.12,-698.63C396.91,-696.82 399.42,-694.63 401.5,-692 423.17,-664.6 388.5,-562.92 409.5,-535 452.17,-478.28 500.31,-520.61 560.5,-483 564.76,-480.34 564.07,-477.38 568.5,-475 578.5,-469.62 590.22,-466.16 601.3,-463.94"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="601.86,-465.98 607.38,-462.84 601.1,-461.85 601.86,-465.98"/>
+</g>
+<!-- src/Components/Map/Subcomponents/LayerControl.tsx&#45;&gt;src/Components/Map/hooks/useLayers.tsx -->
+<g id="edge67" class="edge">
+<title>src/Components/Map/Subcomponents/LayerControl.tsx&#45;&gt;src/Components/Map/hooks/useLayers.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M394.11,-698.62C396.9,-696.81 399.42,-694.63 401.5,-692 421.84,-666.37 387.1,-568.84 409.5,-545 455.31,-496.25 642.87,-522.94 708.5,-510 720.78,-507.58 734.02,-504.12 745.74,-500.76"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="746.54,-502.71 751.72,-499.01 745.37,-498.68 746.54,-502.71"/>
+</g>
+<!-- src/Components/Map/Subcomponents/QuestControl.tsx -->
+<g id="node55" class="node">
+<title>src/Components/Map/Subcomponents/QuestControl.tsx</title>
+<g id="a_node55"><a xlink:href="src/Components/Map/Subcomponents/QuestControl.tsx" xlink:title="QuestControl.tsx">
+<path fill="#bbfeff" stroke="black" d="M389,-763C389,-763 309,-763 309,-763 306,-763 303,-760 303,-757 303,-757 303,-751 303,-751 303,-748 306,-745 309,-745 309,-745 389,-745 389,-745 392,-745 395,-748 395,-751 395,-751 395,-757 395,-757 395,-760 392,-763 389,-763"/>
+<text text-anchor="start" x="311" y="-751.8" font-family="Helvetica,sans-Serif" font-size="9.00">QuestControl.tsx</text>
+</a>
+</g>
+</g>
+<!-- src/Components/Map/Subcomponents/QuestControl.tsx&#45;&gt;src/Components/Gaming/hooks/useQuests.tsx -->
+<g id="edge68" class="edge">
+<title>src/Components/Map/Subcomponents/QuestControl.tsx&#45;&gt;src/Components/Gaming/hooks/useQuests.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M395.06,-761.15C397.47,-762.76 399.66,-764.69 401.5,-767 424.25,-795.48 389.02,-1064.84 409.5,-1095 415.68,-1104.1 425.22,-1110.45 435.31,-1114.88"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="434.6,-1116.86 440.95,-1117.15 436.17,-1112.96 434.6,-1116.86"/>
 </g>
 <!-- src/Components/Map/Tags.tsx -->
-<g id="node46" class="node">
+<g id="node56" class="node">
 <title>src/Components/Map/Tags.tsx</title>
-<g id="a_node46"><a xlink:href="src/Components/Map/Tags.tsx" xlink:title="Tags.tsx">
-<path fill="#bbfeff" stroke="black" d="M258.5,-616C258.5,-616 216.5,-616 216.5,-616 213.5,-616 210.5,-613 210.5,-610 210.5,-610 210.5,-604 210.5,-604 210.5,-601 213.5,-598 216.5,-598 216.5,-598 258.5,-598 258.5,-598 261.5,-598 264.5,-601 264.5,-604 264.5,-604 264.5,-610 264.5,-610 264.5,-613 261.5,-616 258.5,-616"/>
-<text text-anchor="start" x="219" y="-604.8" font-family="Helvetica,sans-Serif" font-size="9.00">Tags.tsx</text>
+<g id="a_node56"><a xlink:href="src/Components/Map/Tags.tsx" xlink:title="Tags.tsx">
+<path fill="#bbfeff" stroke="black" d="M258.5,-471C258.5,-471 216.5,-471 216.5,-471 213.5,-471 210.5,-468 210.5,-465 210.5,-465 210.5,-459 210.5,-459 210.5,-456 213.5,-453 216.5,-453 216.5,-453 258.5,-453 258.5,-453 261.5,-453 264.5,-456 264.5,-459 264.5,-459 264.5,-465 264.5,-465 264.5,-468 261.5,-471 258.5,-471"/>
+<text text-anchor="start" x="219" y="-459.8" 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="edge53" class="edge">
+<g id="edge69" 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="M264.71,-606.58C320.08,-605.64 453.05,-603.12 564.5,-599 578.04,-598.5 592.85,-597.81 606.06,-597.14"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="606.52,-599.22 612.4,-596.82 606.3,-595.03 606.52,-599.22"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M264.64,-457.85C270.76,-455.62 276.61,-452.21 280.5,-447 290.47,-433.62 276.39,-308.48 288.5,-297 376.23,-213.83 469.37,-217.57 560.5,-297 580.12,-314.1 550.71,-336.01 568.5,-355 577.16,-364.25 589.89,-368.62 602.3,-370.49"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="602.13,-372.58 608.34,-371.21 602.63,-368.41 602.13,-372.58"/>
 </g>
 <!-- src/Components/Map/UtopiaMap.css -->
-<g id="node47" class="node">
+<g id="node57" class="node">
 <title>src/Components/Map/UtopiaMap.css</title>
-<g id="a_node47"><a xlink:href="src/Components/Map/UtopiaMap.css" xlink:title="UtopiaMap.css">
-<path fill="#ffffcc" stroke="black" d="M384.5,-666C384.5,-666 314.5,-666 314.5,-666 311.5,-666 308.5,-663 308.5,-660 308.5,-660 308.5,-654 308.5,-654 308.5,-651 311.5,-648 314.5,-648 314.5,-648 384.5,-648 384.5,-648 387.5,-648 390.5,-651 390.5,-654 390.5,-654 390.5,-660 390.5,-660 390.5,-663 387.5,-666 384.5,-666"/>
-<text text-anchor="start" x="316.5" y="-654.8" font-family="Helvetica,sans-Serif" font-size="9.00">UtopiaMap.css</text>
+<g id="a_node57"><a xlink:href="src/Components/Map/UtopiaMap.css" xlink:title="UtopiaMap.css">
+<path fill="#ffffcc" stroke="black" d="M384,-832C384,-832 314,-832 314,-832 311,-832 308,-829 308,-826 308,-826 308,-820 308,-820 308,-817 311,-814 314,-814 314,-814 384,-814 384,-814 387,-814 390,-817 390,-820 390,-820 390,-826 390,-826 390,-829 387,-832 384,-832"/>
+<text text-anchor="start" x="316" y="-820.8" font-family="Helvetica,sans-Serif" font-size="9.00">UtopiaMap.css</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/UtopiaMap.tsx -->
-<g id="node48" class="node">
+<g id="node58" class="node">
 <title>src/Components/Map/UtopiaMap.tsx</title>
-<g id="a_node48"><a xlink:href="src/Components/Map/UtopiaMap.tsx" xlink:title="UtopiaMap.tsx">
+<g id="a_node58"><a xlink:href="src/Components/Map/UtopiaMap.tsx" xlink:title="UtopiaMap.tsx">
 <path fill="#bbfeff" stroke="black" d="M272,-656C272,-656 203,-656 203,-656 200,-656 197,-653 197,-650 197,-650 197,-644 197,-644 197,-641 200,-638 203,-638 203,-638 272,-638 272,-638 275,-638 278,-641 278,-644 278,-644 278,-650 278,-650 278,-653 275,-656 272,-656"/>
 <text text-anchor="start" x="205" y="-644.8" 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/useTags.tsx -->
-<g id="edge59" class="edge">
+<g id="edge75" 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="M278.27,-641.92C356.18,-631.96 528.12,-610 605.9,-600.06"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="606.55,-602.09 612.23,-599.25 606.02,-597.93 606.55,-602.09"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M242.14,-637.68C250.63,-615.47 271.68,-557.49 280.5,-507 283.31,-490.89 276.67,-371.3 288.5,-360 332.42,-318.06 519.73,-347.01 602.22,-362.26"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="602.17,-364.38 608.45,-363.42 602.94,-360.26 602.17,-364.38"/>
 </g>
 <!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/hooks/useFilter.tsx -->
-<g id="edge54" class="edge">
+<g id="edge70" class="edge">
 <title>src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/hooks/useFilter.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M252.42,-656.08C262.21,-661.9 275.85,-668.92 289,-672 339.42,-683.8 357.09,-690.37 405.5,-672 493.8,-638.49 501.02,-600.94 564.5,-531 568.56,-526.52 567.42,-523.27 572.5,-520 582.14,-513.79 593.85,-510.08 605.04,-507.89"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="605.64,-509.92 611.19,-506.82 604.92,-505.78 605.64,-509.92"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M240.86,-637.84C246.38,-617.74 261.76,-569.05 288.5,-537 330.44,-486.73 347.02,-472.56 409.5,-453 474.09,-432.78 553.79,-442.1 600.97,-450.91"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="600.84,-453.02 607.13,-452.09 601.63,-448.9 600.84,-453.02"/>
 </g>
 <!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/hooks/useItems.tsx -->
-<g id="edge55" class="edge">
+<g id="edge71" 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="M247.56,-656.18C256.97,-665 272.59,-677.75 289,-683 318.19,-692.34 542.81,-690.65 564.5,-669 578.55,-654.97 559.27,-594.81 572.5,-580 580.35,-571.21 591.86,-566.77 603.43,-564.71"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="603.83,-566.77 609.47,-563.83 603.23,-562.62 603.83,-566.77"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M241.96,-638C250.25,-616.01 271.22,-557.67 280.5,-507 282.77,-494.62 279.84,-403.13 288.5,-394 330.16,-350.08 503.07,-359.86 560.5,-379 564.72,-380.41 564.45,-383.18 568.5,-385 578.07,-389.31 588.9,-392.39 599.23,-394.59"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="598.95,-396.68 605.24,-395.79 599.77,-392.56 598.95,-396.68"/>
 </g>
 <!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/hooks/useLeafletRefs.tsx -->
-<g id="edge57" class="edge">
+<g id="edge73" class="edge">
 <title>src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/hooks/useLeafletRefs.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M244.33,-656.18C252.58,-668.2 268.92,-688.74 289,-697 317.31,-708.64 541.4,-717.08 564.5,-697 583.81,-680.22 554.99,-658.65 572.5,-640 577.62,-634.55 584.15,-630.79 591.19,-628.24"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="592.1,-630.16 597.21,-626.38 590.86,-626.15 592.1,-630.16"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M242.17,-637.69C250.71,-615.48 271.88,-557.53 280.5,-507 283.72,-488.14 274.66,-348.21 288.5,-335 378.87,-248.73 549.15,-303.02 614.77,-328.72"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="614.07,-330.7 620.42,-330.97 615.62,-326.8 614.07,-330.7"/>
 </g>
 <!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/hooks/usePermissions.tsx -->
-<g id="edge58" class="edge">
+<g id="edge74" class="edge">
 <title>src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/hooks/usePermissions.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M278.17,-642.7C281.83,-642.42 285.48,-642.17 289,-642 395.28,-636.75 519.48,-644.4 589.68,-650"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="589.73,-652.12 595.88,-650.51 590.07,-647.93 589.73,-652.12"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M241.71,-637.95C249.45,-615.85 269.3,-557.28 280.5,-507 285.78,-483.32 274.1,-472.53 288.5,-453 325.18,-403.26 509.32,-360.35 560.5,-395 568.43,-400.37 561.16,-408.86 568.5,-415 573.59,-419.26 579.57,-422.41 585.88,-424.73"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="585.4,-426.78 591.76,-426.64 586.7,-422.79 585.4,-426.78"/>
 </g>
 <!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/Subcomponents/AddButton.tsx -->
-<g id="edge60" class="edge">
+<g id="edge76" 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="M262.69,-637.82C269.59,-634 276.36,-628.82 280.5,-622 297.16,-594.61 268.56,-502.69 289,-478 292.64,-473.6 297.37,-470.39 302.56,-468.05"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="303.49,-469.95 308.36,-465.85 302,-466.02 303.49,-469.95"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M278.03,-647C285.59,-647 293.58,-647 301.34,-647"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="301.79,-649.1 307.79,-647 301.79,-644.9 301.79,-649.1"/>
 </g>
 <!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/hooks/useLayers.tsx -->
-<g id="edge56" class="edge">
+<g id="edge72" 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="M243.14,-656.34C250.61,-670.2 266.75,-695.65 289,-706 296.04,-709.27 546.99,-708.7 564.5,-707 631.22,-700.53 647.59,-694.74 712.5,-678 725.74,-674.59 740.13,-670.11 752.5,-666.02"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="753.38,-667.94 758.4,-664.04 752.04,-663.95 753.38,-667.94"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M239.47,-656.38C243.32,-691.59 258.79,-815.07 288.5,-838 328.26,-868.69 351.97,-846.32 401.5,-838 475.24,-825.61 500.1,-827.08 560.5,-783 670.29,-702.87 749.83,-552.15 773.04,-504.69"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="774.98,-505.5 775.71,-499.19 771.2,-503.67 774.98,-505.5"/>
+</g>
+<!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/Subcomponents/Control.tsx -->
+<g id="edge77" class="edge">
+<title>src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/Subcomponents/Control.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M267.78,-637.98C274.57,-635.95 281.77,-633.86 288.5,-632 295.56,-630.05 303.12,-628.07 310.4,-626.21"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="311.13,-628.19 316.43,-624.68 310.1,-624.12 311.13,-628.19"/>
 </g>
 <!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/Subcomponents/FilterControl.tsx -->
-<g id="edge61" class="edge">
+<g id="edge78" class="edge">
 <title>src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/Subcomponents/FilterControl.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M262.73,-637.85C269.64,-634.02 276.39,-628.84 280.5,-622 290.47,-605.41 276.73,-462.97 289,-448 292.09,-444.23 295.97,-441.33 300.26,-439.11"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="301.24,-440.98 305.89,-436.64 299.55,-437.13 301.24,-440.98"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M267.78,-656.02C274.57,-658.05 281.77,-660.14 288.5,-662 293.85,-663.48 299.5,-664.98 305.09,-666.42"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="304.78,-668.51 311.11,-667.97 305.83,-664.45 304.78,-668.51"/>
+</g>
+<!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/Subcomponents/LayerControl.tsx -->
+<g id="edge79" class="edge">
+<title>src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/Subcomponents/LayerControl.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M246.03,-656.02C255.06,-666.27 271.19,-682.77 288.5,-692 291.5,-693.6 294.67,-695.03 297.93,-696.31"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="297.51,-698.4 303.87,-698.47 298.94,-694.45 297.51,-698.4"/>
+</g>
+<!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/Subcomponents/QuestControl.tsx -->
+<g id="edge80" class="edge">
+<title>src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/Subcomponents/QuestControl.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M242.84,-656.36C250.33,-671.7 266.97,-702.41 288.5,-722 297.5,-730.19 308.99,-737 319.46,-742.2"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="318.83,-744.23 325.15,-744.92 320.64,-740.44 318.83,-744.23"/>
 </g>
 <!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/UtopiaMap.css -->
-<g id="edge62" class="edge">
+<g id="edge81" 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.21,-650.61C286.06,-651.32 294.36,-652.08 302.39,-652.81"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="302.31,-654.91 308.48,-653.36 302.69,-650.73 302.31,-654.91"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M238.38,-656.33C238.58,-684.04 243.11,-766.61 288.5,-809 292.35,-812.59 296.94,-815.32 301.83,-817.38"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="301.35,-819.44 307.7,-819.5 302.78,-815.49 301.35,-819.44"/>
 </g>
 <!-- src/Components/Map/index.tsx -->
-<g id="node49" class="node">
+<g id="node59" class="node">
 <title>src/Components/Map/index.tsx</title>
-<g id="a_node49"><a xlink:href="src/Components/Map/index.tsx" xlink:title="index.tsx">
-<path fill="#bbfeff" stroke="black" d="M175,-329C175,-329 129,-329 129,-329 126,-329 123,-326 123,-323 123,-323 123,-317 123,-317 123,-314 126,-311 129,-311 129,-311 175,-311 175,-311 178,-311 181,-314 181,-317 181,-317 181,-323 181,-323 181,-326 178,-329 175,-329"/>
-<text text-anchor="start" x="131" y="-317.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
+<g id="a_node59"><a xlink:href="src/Components/Map/index.tsx" xlink:title="index.tsx">
+<path fill="#bbfeff" stroke="black" d="M175,-852C175,-852 129,-852 129,-852 126,-852 123,-849 123,-846 123,-846 123,-840 123,-840 123,-837 126,-834 129,-834 129,-834 175,-834 175,-834 178,-834 181,-837 181,-840 181,-840 181,-846 181,-846 181,-849 178,-852 175,-852"/>
+<text text-anchor="start" x="131" y="-840.8" 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="edge66" class="edge">
+<g id="edge86" 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.56,-310.92C179.03,-309.76 180.36,-308.46 181.5,-307 201.22,-281.7 173.72,-260.44 194.5,-236 195.1,-235.3 195.73,-234.63 196.39,-233.99"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="197.74,-235.6 201.15,-230.23 195.14,-232.31 197.74,-235.6"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M153.31,-833.75C155.39,-774.63 167.94,-451.06 194.5,-417 195.07,-416.28 195.67,-415.59 196.31,-414.93"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="197.68,-416.52 200.94,-411.06 194.99,-413.29 197.68,-416.52"/>
 </g>
 <!-- src/Components/Map/index.tsx&#45;&gt;src/Components/Map/ItemView.tsx -->
-<g id="edge67" class="edge">
+<g id="edge87" 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="M177.05,-310.91C178.68,-309.75 180.19,-308.45 181.5,-307 193.49,-293.77 182.36,-282.09 194.5,-269 196.49,-266.86 198.77,-264.96 201.22,-263.28"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="202.4,-265.02 206.46,-260.13 200.24,-261.42 202.4,-265.02"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M153.39,-833.68C155.83,-776.85 169.78,-478.46 194.5,-447 195.07,-446.28 195.67,-445.59 196.31,-444.93"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="197.68,-446.52 200.96,-441.07 195,-443.29 197.68,-446.52"/>
 </g>
 <!-- src/Components/Map/index.tsx&#45;&gt;src/Components/Map/Layer.tsx -->
-<g id="edge68" class="edge">
+<g id="edge88" 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.27,-327.45C188.22,-329.28 195.73,-331.26 202.9,-333.15"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="202.49,-335.21 208.83,-334.71 203.56,-331.15 202.49,-335.21"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M154.5,-833.67C159.35,-804 175.38,-709.19 194.5,-632 205.92,-585.9 223.09,-532.39 231.5,-506.93"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="233.54,-507.44 233.44,-501.09 229.55,-506.12 233.54,-507.44"/>
 </g>
 <!-- src/Components/Map/index.tsx&#45;&gt;src/Components/Map/Permissions.tsx -->
-<g id="edge69" class="edge">
+<g id="edge89" class="edge">
 <title>src/Components/Map/index.tsx&#45;&gt;src/Components/Map/Permissions.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M155.97,-329.15C168.4,-367.4 216.28,-514.76 231.69,-562.2"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="229.71,-562.91 233.56,-567.96 233.71,-561.61 229.71,-562.91"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M177.15,-852C178.75,-853.18 180.23,-854.51 181.5,-856 195.57,-872.49 180.24,-886.68 194.5,-903 196.26,-905.02 198.29,-906.81 200.48,-908.42"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="199.65,-910.38 205.85,-911.81 201.9,-906.83 199.65,-910.38"/>
+</g>
+<!-- src/Components/Map/index.tsx&#45;&gt;src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx -->
+<g id="edge90" class="edge">
+<title>src/Components/Map/index.tsx&#45;&gt;src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M176.07,-852.16C178,-853.32 179.84,-854.6 181.5,-856 189.33,-862.59 185.9,-869.46 194.5,-875 227.13,-895.99 249.08,-867.24 280.5,-890 286.62,-894.43 282.02,-901.11 288.5,-905 310.03,-917.92 383.34,-922.35 401.5,-905 415.57,-891.55 396.91,-744.84 409.5,-730 414.6,-723.99 421.45,-720.03 428.89,-717.48"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="429.5,-719.48 434.67,-715.78 428.32,-715.45 429.5,-719.48"/>
 </g>
 <!-- src/Components/Map/index.tsx&#45;&gt;src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx -->
-<g id="edge70" class="edge">
+<g id="edge91" 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.44,-310.87C176.86,-309.64 179.26,-308.35 181.5,-307 187.75,-303.24 187.89,-300.08 194.5,-297 229.97,-280.45 253,-305.86 280.5,-278 293.57,-264.76 274.57,-248.75 289,-237 309.08,-220.66 386.73,-219.17 405.5,-237 418,-248.88 402.31,-378.88 413.5,-392 414.35,-393 415.25,-393.94 416.2,-394.83"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="415.25,-396.76 421.26,-398.84 417.86,-393.47 415.25,-396.76"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M176.98,-852.15C178.62,-853.3 180.15,-854.58 181.5,-856 192.35,-867.44 182.4,-878.9 194.5,-889 224.42,-913.96 248.5,-883.77 280.5,-906 286.07,-909.87 282.58,-915.69 288.5,-919 332.34,-943.5 359.31,-946.25 401.5,-919 457.58,-882.78 474.01,-795.81 478.47,-760.39"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="480.55,-760.61 479.17,-754.41 476.38,-760.12 480.55,-760.61"/>
 </g>
 <!-- src/Components/Map/index.tsx&#45;&gt;src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx -->
-<g id="edge71" class="edge">
+<g id="edge92" 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.11,-314.93C240.03,-305.02 373.67,-286.49 405.5,-316 422.82,-332.06 397.95,-404.21 413.5,-422 414.7,-423.37 415.98,-424.63 417.35,-425.79"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="416.18,-427.54 422.27,-429.38 418.65,-424.15 416.18,-427.54"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.15,-843.42C207.01,-843.96 246.39,-845.2 280.5,-848 284.07,-848.29 284.92,-848.78 288.5,-849 313.56,-850.56 383.41,-866.41 401.5,-849 418.24,-832.88 394.53,-657.78 409.5,-640 410.71,-638.56 412.02,-637.24 413.41,-636.03"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="414.87,-637.57 418.45,-632.32 412.38,-634.19 414.87,-637.57"/>
+</g>
+<!-- src/Components/Map/index.tsx&#45;&gt;src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx -->
+<g id="edge93" class="edge">
+<title>src/Components/Map/index.tsx&#45;&gt;src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.28,-847.28C219.42,-853.04 283.21,-862.61 288.5,-863 338.59,-866.68 365.26,-897.77 401.5,-863 416.99,-848.14 395.65,-686.4 409.5,-670 413.24,-665.58 417.92,-662.26 423.1,-659.8"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="424.11,-661.66 428.88,-657.45 422.53,-657.76 424.11,-661.66"/>
 </g>
 <!-- src/Components/Map/index.tsx&#45;&gt;src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx -->
-<g id="edge72" class="edge">
+<g id="edge94" 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.22,-318.46C243.73,-315.34 389.63,-309.8 405.5,-325 425.92,-344.56 395.02,-430.59 413.5,-452 418.35,-457.62 424.75,-461.45 431.71,-464"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="431.31,-466.08 437.67,-465.86 432.56,-462.07 431.31,-466.08"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M172.74,-852.09C181.21,-855.87 190.14,-859.69 194.5,-861 231.67,-872.13 249.08,-853.24 280.5,-876 286.62,-880.43 282.02,-887.11 288.5,-891 310.03,-903.92 383.38,-908.38 401.5,-891 416.83,-876.3 395.79,-716.23 409.5,-700 414.36,-694.25 420.83,-690.37 427.88,-687.81"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="428.8,-689.72 433.92,-685.95 427.57,-685.71 428.8,-689.72"/>
 </g>
 <!-- src/Components/Map/index.tsx&#45;&gt;src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx -->
-<g id="edge73" class="edge">
+<g id="edge95" 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="M176.52,-310.84C178.3,-309.69 179.99,-308.41 181.5,-307 190.37,-298.72 184.73,-290.19 194.5,-283 225.87,-259.9 252.95,-293.55 280.5,-266 294.28,-252.22 273.95,-235.37 289,-223 329.01,-190.13 358.6,-201.06 405.5,-223 440.68,-239.46 465.63,-280.29 477.03,-302.33"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="475.19,-303.34 479.76,-307.76 478.94,-301.46 475.19,-303.34"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.11,-840.73C185.59,-840.44 190.17,-840.18 194.5,-840 197.37,-839.88 399.45,-840.01 401.5,-838 422,-817.94 391.11,-602.01 409.5,-580 416.81,-571.25 427.85,-566.83 439.04,-564.76"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="439.62,-566.8 445.24,-563.85 439,-562.65 439.62,-566.8"/>
 </g>
 <!-- src/Components/Map/index.tsx&#45;&gt;src/Components/Map/Tags.tsx -->
-<g id="edge74" class="edge">
+<g id="edge96" 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="M153.17,-329.18C154.16,-371.85 160.31,-550.54 194.5,-592 197.21,-595.29 200.71,-597.86 204.51,-599.87"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="203.93,-601.9 210.27,-602.42 205.63,-598.07 203.93,-601.9"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M152.78,-833.89C151.71,-783.05 148.91,-534.5 194.5,-477 197.15,-473.66 200.6,-471.06 204.4,-469.04"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="205.51,-470.84 210.13,-466.47 203.8,-467 205.51,-470.84"/>
 </g>
 <!-- src/Components/Map/index.tsx&#45;&gt;src/Components/Map/UtopiaMap.tsx -->
-<g id="edge75" class="edge">
+<g id="edge97" 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="M153.21,-329.12C154.38,-374.08 161.39,-572.04 194.5,-622 197.87,-627.09 202.67,-631.3 207.83,-634.71"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="206.84,-636.57 213.06,-637.87 209.01,-632.97 206.84,-636.57"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M156.92,-833.81C170.2,-802.63 213.63,-700.69 230.09,-662.04"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="232.08,-662.74 232.5,-656.4 228.21,-661.1 232.08,-662.74"/>
 </g>
-<!-- src/Components/Profile/Settings.tsx -->
-<g id="node50" class="node">
-<title>src/Components/Profile/Settings.tsx</title>
-<g id="a_node50"><a xlink:href="src/Components/Profile/Settings.tsx" xlink:title="Settings.tsx">
-<path fill="#bbfeff" stroke="black" d="M379,-1098C379,-1098 320,-1098 320,-1098 317,-1098 314,-1095 314,-1092 314,-1092 314,-1086 314,-1086 314,-1083 317,-1080 320,-1080 320,-1080 379,-1080 379,-1080 382,-1080 385,-1083 385,-1086 385,-1086 385,-1092 385,-1092 385,-1095 382,-1098 379,-1098"/>
-<text text-anchor="start" x="322" y="-1086.8" font-family="Helvetica,sans-Serif" font-size="9.00">Settings.tsx</text>
+<!-- src/Components/Profile/ColorPicker.css -->
+<g id="node60" class="node">
+<title>src/Components/Profile/ColorPicker.css</title>
+<g id="a_node60"><a xlink:href="src/Components/Profile/ColorPicker.css" xlink:title="ColorPicker.css">
+<path fill="#ffffcc" stroke="black" d="M816.5,-1308C816.5,-1308 745.5,-1308 745.5,-1308 742.5,-1308 739.5,-1305 739.5,-1302 739.5,-1302 739.5,-1296 739.5,-1296 739.5,-1293 742.5,-1290 745.5,-1290 745.5,-1290 816.5,-1290 816.5,-1290 819.5,-1290 822.5,-1293 822.5,-1296 822.5,-1296 822.5,-1302 822.5,-1302 822.5,-1305 819.5,-1308 816.5,-1308"/>
+<text text-anchor="start" x="747.5" y="-1296.8" font-family="Helvetica,sans-Serif" font-size="9.00">ColorPicker.css</text>
 </a>
 </g>
 </g>
-<!-- src/Components/Profile/Settings.tsx&#45;&gt;src/Components/Auth/index.tsx -->
-<g id="edge76" class="edge">
-<title>src/Components/Profile/Settings.tsx&#45;&gt;src/Components/Auth/index.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M385.02,-1081.89C392.93,-1078.64 400.48,-1073.9 405.5,-1067 420.96,-1045.75 403.75,-973.41 413.5,-949 425.33,-919.38 451.56,-892.36 468.47,-877.07"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="469.88,-878.63 472.98,-873.08 467.1,-875.49 469.88,-878.63"/>
+<!-- src/Components/Profile/ColorPicker.tsx -->
+<g id="node61" class="node">
+<title>src/Components/Profile/ColorPicker.tsx</title>
+<g id="a_node61"><a xlink:href="src/Components/Profile/ColorPicker.tsx" xlink:title="ColorPicker.tsx">
+<path fill="#bbfeff" stroke="black" d="M677.5,-1338C677.5,-1338 607.5,-1338 607.5,-1338 604.5,-1338 601.5,-1335 601.5,-1332 601.5,-1332 601.5,-1326 601.5,-1326 601.5,-1323 604.5,-1320 607.5,-1320 607.5,-1320 677.5,-1320 677.5,-1320 680.5,-1320 683.5,-1323 683.5,-1326 683.5,-1326 683.5,-1332 683.5,-1332 683.5,-1335 680.5,-1338 677.5,-1338"/>
+<text text-anchor="start" x="609.5" y="-1326.8" font-family="Helvetica,sans-Serif" font-size="9.00">ColorPicker.tsx</text>
+</a>
 </g>
-<!-- src/Components/Profile/Settings.tsx&#45;&gt;src/Components/Input/TextInput.tsx -->
-<g id="edge78" 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="M385.36,-1090.32C428.04,-1091.23 502.32,-1090.5 564.5,-1078 637.73,-1063.28 719.37,-1028.77 759.3,-1010.62"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="760.29,-1012.47 764.88,-1008.06 758.55,-1008.65 760.29,-1012.47"/>
 </g>
-<!-- src/Components/Profile/Settings.tsx&#45;&gt;src/Components/Input/TextAreaInput.tsx -->
-<g id="edge77" 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="M385.11,-1092.3C428.18,-1095.26 503.49,-1096.66 564.5,-1078 641.91,-1054.32 645.54,-1014.56 720.5,-984 724.24,-982.48 728.16,-981.09 732.15,-979.82"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="732.88,-981.8 738.03,-978.06 731.68,-977.77 732.88,-981.8"/>
+<!-- src/Components/Profile/ColorPicker.tsx&#45;&gt;src/Components/Profile/ColorPicker.css -->
+<g id="edge98" class="edge">
+<title>src/Components/Profile/ColorPicker.tsx&#45;&gt;src/Components/Profile/ColorPicker.css</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M683.72,-1320.16C699.13,-1316.77 716.85,-1312.88 732.85,-1309.36"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="733.72,-1311.32 739.13,-1307.98 732.82,-1307.22 733.72,-1311.32"/>
+</g>
+<!-- src/Components/Profile/useClickOutside.tsx -->
+<g id="node62" class="node">
+<title>src/Components/Profile/useClickOutside.tsx</title>
+<g id="a_node62"><a xlink:href="src/Components/Profile/useClickOutside.tsx" xlink:title="useClickOutside.tsx">
+<path fill="#bbfeff" stroke="black" d="M827,-1338C827,-1338 735,-1338 735,-1338 732,-1338 729,-1335 729,-1332 729,-1332 729,-1326 729,-1326 729,-1323 732,-1320 735,-1320 735,-1320 827,-1320 827,-1320 830,-1320 833,-1323 833,-1326 833,-1326 833,-1332 833,-1332 833,-1335 830,-1338 827,-1338"/>
+<text text-anchor="start" x="737" y="-1326.8" font-family="Helvetica,sans-Serif" font-size="9.00">useClickOutside.tsx</text>
+</a>
+</g>
+</g>
+<!-- src/Components/Profile/ColorPicker.tsx&#45;&gt;src/Components/Profile/useClickOutside.tsx -->
+<g id="edge99" class="edge">
+<title>src/Components/Profile/ColorPicker.tsx&#45;&gt;src/Components/Profile/useClickOutside.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M683.72,-1329C695.99,-1329 709.73,-1329 722.9,-1329"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="722.91,-1331.1 728.91,-1329 722.91,-1326.9 722.91,-1331.1"/>
+</g>
+<!-- src/Components/Profile/ProfileSettings.tsx -->
+<g id="node63" class="node">
+<title>src/Components/Profile/ProfileSettings.tsx</title>
+<g id="a_node63"><a xlink:href="src/Components/Profile/ProfileSettings.tsx" xlink:title="ProfileSettings.tsx">
+<path fill="#bbfeff" stroke="black" d="M524,-1338C524,-1338 438,-1338 438,-1338 435,-1338 432,-1335 432,-1332 432,-1332 432,-1326 432,-1326 432,-1323 435,-1320 438,-1320 438,-1320 524,-1320 524,-1320 527,-1320 530,-1323 530,-1326 530,-1326 530,-1332 530,-1332 530,-1335 527,-1338 524,-1338"/>
+<text text-anchor="start" x="440" y="-1326.8" font-family="Helvetica,sans-Serif" font-size="9.00">ProfileSettings.tsx</text>
+</a>
+</g>
+</g>
+<!-- src/Components/Profile/ProfileSettings.tsx&#45;&gt;src/Components/AppShell/hooks/useAssets.tsx -->
+<g id="edge100" class="edge">
+<title>src/Components/Profile/ProfileSettings.tsx&#45;&gt;src/Components/AppShell/hooks/useAssets.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M530,-1329.84C541.58,-1327.61 552.82,-1322.95 560.5,-1314 576.22,-1295.69 560.76,-1119.85 568.5,-1097 580.72,-1060.95 609.95,-1026.41 627.5,-1007.92"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="629.45,-1008.92 632.11,-1003.14 626.43,-1006 629.45,-1008.92"/>
+</g>
+<!-- src/Components/Profile/ProfileSettings.tsx&#45;&gt;src/Components/Auth/index.tsx -->
+<g id="edge101" class="edge">
+<title>src/Components/Profile/ProfileSettings.tsx&#45;&gt;src/Components/Auth/index.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M530.19,-1329.11C541.49,-1326.82 552.54,-1322.32 560.5,-1314 577.58,-1296.15 560.42,-1282.34 568.5,-1259 583.74,-1214.94 614.58,-1168.87 630.87,-1146.25"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="632.66,-1147.36 634.49,-1141.28 629.26,-1144.89 632.66,-1147.36"/>
+</g>
+<!-- src/Components/Profile/ProfileSettings.tsx&#45;&gt;src/Components/Templates/DialogModal.tsx -->
+<g id="edge104" class="edge">
+<title>src/Components/Profile/ProfileSettings.tsx&#45;&gt;src/Components/Templates/DialogModal.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M530.03,-1328.66C541.07,-1330.7 552.03,-1334.68 560.5,-1342 569.33,-1349.63 560.18,-1358.82 568.5,-1367 575.24,-1373.62 583.89,-1378.26 592.87,-1381.51"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="592.44,-1383.58 598.8,-1383.45 593.75,-1379.59 592.44,-1383.58"/>
+</g>
+<!-- src/Components/Profile/ProfileSettings.tsx&#45;&gt;src/Components/Input/TextInput.tsx -->
+<g id="edge103" class="edge">
+<title>src/Components/Profile/ProfileSettings.tsx&#45;&gt;src/Components/Input/TextInput.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M530.04,-1328.46C541.21,-1326.16 552.23,-1321.82 560.5,-1314 571.15,-1303.93 557.44,-1291.63 568.5,-1282 592.1,-1261.46 677.69,-1272.45 708.5,-1267 770.28,-1256.08 800.35,-1276.56 845.5,-1233 896,-1184.27 901.03,-1092.58 900.92,-1056.32"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="903.02,-1056.19 900.85,-1050.21 898.82,-1056.24 903.02,-1056.19"/>
+</g>
+<!-- src/Components/Profile/ProfileSettings.tsx&#45;&gt;src/Components/Input/TextAreaInput.tsx -->
+<g id="edge102" class="edge">
+<title>src/Components/Profile/ProfileSettings.tsx&#45;&gt;src/Components/Input/TextAreaInput.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M530.03,-1328.96C541.33,-1326.67 552.42,-1322.21 560.5,-1314 575.05,-1299.21 554.42,-1283.24 568.5,-1268 614.58,-1218.12 649.73,-1242.39 716.5,-1230 744.88,-1224.73 825.86,-1236.14 845.5,-1215 859.81,-1199.6 840.74,-1042.71 853.5,-1026 853.94,-1025.42 854.41,-1024.86 854.89,-1024.33"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="856.63,-1025.59 859.75,-1020.05 853.86,-1022.44 856.63,-1025.59"/>
+</g>
+<!-- src/Components/Profile/ProfileSettings.tsx&#45;&gt;src/Components/Profile/ColorPicker.tsx -->
+<g id="edge106" class="edge">
+<title>src/Components/Profile/ProfileSettings.tsx&#45;&gt;src/Components/Profile/ColorPicker.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M530.29,-1329C550.9,-1329 574.84,-1329 595.22,-1329"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="595.43,-1331.1 601.43,-1329 595.43,-1326.9 595.43,-1331.1"/>
 </g>
 <!-- src/Components/Templates/TitleCard.tsx -->
-<g id="node51" class="node">
+<g id="node64" class="node">
 <title>src/Components/Templates/TitleCard.tsx</title>
-<g id="a_node51"><a xlink:href="src/Components/Templates/TitleCard.tsx" xlink:title="TitleCard.tsx">
-<path fill="#bbfeff" stroke="black" d="M677,-798C677,-798 616,-798 616,-798 613,-798 610,-795 610,-792 610,-792 610,-786 610,-786 610,-783 613,-780 616,-780 616,-780 677,-780 677,-780 680,-780 683,-783 683,-786 683,-786 683,-792 683,-792 683,-795 680,-798 677,-798"/>
-<text text-anchor="start" x="618" y="-786.8" font-family="Helvetica,sans-Serif" font-size="9.00">TitleCard.tsx</text>
+<g id="a_node64"><a xlink:href="src/Components/Templates/TitleCard.tsx" xlink:title="TitleCard.tsx">
+<path fill="#bbfeff" stroke="black" d="M932,-1398C932,-1398 871,-1398 871,-1398 868,-1398 865,-1395 865,-1392 865,-1392 865,-1386 865,-1386 865,-1383 868,-1380 871,-1380 871,-1380 932,-1380 932,-1380 935,-1380 938,-1383 938,-1386 938,-1386 938,-1392 938,-1392 938,-1395 935,-1398 932,-1398"/>
+<text text-anchor="start" x="873" y="-1386.8" 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="edge79" 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="M385.21,-1085.58C445.61,-1079.6 563.74,-1067.81 564.5,-1067 582.55,-1047.66 558.63,-851.54 572.5,-829 580.58,-815.86 594.62,-806.72 608.24,-800.54"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="609.34,-802.35 614.03,-798.06 607.69,-798.49 609.34,-802.35"/>
+<!-- src/Components/Profile/ProfileSettings.tsx&#45;&gt;src/Components/Templates/TitleCard.tsx -->
+<g id="edge105" class="edge">
+<title>src/Components/Profile/ProfileSettings.tsx&#45;&gt;src/Components/Templates/TitleCard.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M529.32,-1319.97C539.6,-1318 550.42,-1315.93 560.5,-1314 623.04,-1302.01 791.01,-1251.03 845.5,-1284 878.01,-1303.67 892.23,-1349.59 897.64,-1373.66"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="895.65,-1374.39 898.94,-1379.83 899.76,-1373.52 895.65,-1374.39"/>
 </g>
 <!-- src/Components/Typography/Subtitle.tsx -->
-<g id="node54" class="node">
+<g id="node68" class="node">
 <title>src/Components/Typography/Subtitle.tsx</title>
-<g id="a_node54"><a xlink:href="src/Components/Typography/Subtitle.tsx" xlink:title="Subtitle.tsx">
-<path fill="#bbfeff" stroke="black" d="M813,-828C813,-828 757,-828 757,-828 754,-828 751,-825 751,-822 751,-822 751,-816 751,-816 751,-813 754,-810 757,-810 757,-810 813,-810 813,-810 816,-810 819,-813 819,-816 819,-816 819,-822 819,-822 819,-825 816,-828 813,-828"/>
-<text text-anchor="start" x="759" y="-816.8" font-family="Helvetica,sans-Serif" font-size="9.00">Subtitle.tsx</text>
+<g id="a_node68"><a xlink:href="src/Components/Typography/Subtitle.tsx" xlink:title="Subtitle.tsx">
+<path fill="#bbfeff" stroke="black" d="M1038.5,-1186C1038.5,-1186 982.5,-1186 982.5,-1186 979.5,-1186 976.5,-1183 976.5,-1180 976.5,-1180 976.5,-1174 976.5,-1174 976.5,-1171 979.5,-1168 982.5,-1168 982.5,-1168 1038.5,-1168 1038.5,-1168 1041.5,-1168 1044.5,-1171 1044.5,-1174 1044.5,-1174 1044.5,-1180 1044.5,-1180 1044.5,-1183 1041.5,-1186 1038.5,-1186"/>
+<text text-anchor="start" x="984.5" y="-1174.8" 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="edge82" class="edge">
+<g id="edge113" 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="M683.01,-796.8C701.91,-800.96 725.2,-806.08 744.64,-810.35"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="744.24,-812.41 750.55,-811.65 745.14,-808.31 744.24,-812.41"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M907.1,-1379.89C923.8,-1346.8 981.34,-1232.79 1002.02,-1191.81"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="1003.97,-1192.62 1004.8,-1186.31 1000.22,-1190.72 1003.97,-1192.62"/>
 </g>
-<!-- src/Components/Profile/index.tsx -->
-<g id="node52" class="node">
-<title>src/Components/Profile/index.tsx</title>
-<g id="a_node52"><a xlink:href="src/Components/Profile/index.tsx" xlink:title="index.tsx">
-<path fill="#bbfeff" stroke="black" d="M260.5,-1098C260.5,-1098 214.5,-1098 214.5,-1098 211.5,-1098 208.5,-1095 208.5,-1092 208.5,-1092 208.5,-1086 208.5,-1086 208.5,-1083 211.5,-1080 214.5,-1080 214.5,-1080 260.5,-1080 260.5,-1080 263.5,-1080 266.5,-1083 266.5,-1086 266.5,-1086 266.5,-1092 266.5,-1092 266.5,-1095 263.5,-1098 260.5,-1098"/>
-<text text-anchor="start" x="216.5" y="-1086.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
+<!-- src/Components/Profile/UserSettings.tsx -->
+<g id="node65" class="node">
+<title>src/Components/Profile/UserSettings.tsx</title>
+<g id="a_node65"><a xlink:href="src/Components/Profile/UserSettings.tsx" xlink:title="UserSettings.tsx">
+<path fill="#bbfeff" stroke="black" d="M520.5,-1308C520.5,-1308 441.5,-1308 441.5,-1308 438.5,-1308 435.5,-1305 435.5,-1302 435.5,-1302 435.5,-1296 435.5,-1296 435.5,-1293 438.5,-1290 441.5,-1290 441.5,-1290 520.5,-1290 520.5,-1290 523.5,-1290 526.5,-1293 526.5,-1296 526.5,-1296 526.5,-1302 526.5,-1302 526.5,-1305 523.5,-1308 520.5,-1308"/>
+<text text-anchor="start" x="443.5" y="-1296.8" font-family="Helvetica,sans-Serif" font-size="9.00">UserSettings.tsx</text>
 </a>
 </g>
 </g>
-<!-- src/Components/Profile/index.tsx&#45;&gt;src/Components/Profile/Settings.tsx -->
-<g id="edge80" 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="M266.54,-1089C279.02,-1089 293.95,-1089 307.63,-1089"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="307.82,-1091.1 313.82,-1089 307.82,-1086.9 307.82,-1091.1"/>
+<!-- src/Components/Profile/UserSettings.tsx&#45;&gt;src/Components/Auth/index.tsx -->
+<g id="edge107" class="edge">
+<title>src/Components/Profile/UserSettings.tsx&#45;&gt;src/Components/Auth/index.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M491.03,-1289.54C517.79,-1261.53 596.74,-1178.87 628.27,-1145.85"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="629.94,-1147.14 632.57,-1141.35 626.9,-1144.24 629.94,-1147.14"/>
+</g>
+<!-- src/Components/Profile/UserSettings.tsx&#45;&gt;src/Components/Input/TextInput.tsx -->
+<g id="edge108" class="edge">
+<title>src/Components/Profile/UserSettings.tsx&#45;&gt;src/Components/Input/TextInput.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M496.71,-1289.88C513.45,-1279.94 541.94,-1264.34 568.5,-1256 627.87,-1237.36 798.14,-1255.36 845.5,-1215 893.65,-1173.96 900.15,-1091.08 900.68,-1056.6"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="902.78,-1056.39 900.71,-1050.37 898.58,-1056.36 902.78,-1056.39"/>
+</g>
+<!-- src/Components/Profile/UserSettings.tsx&#45;&gt;src/Components/Templates/TitleCard.tsx -->
+<g id="edge109" class="edge">
+<title>src/Components/Profile/UserSettings.tsx&#45;&gt;src/Components/Templates/TitleCard.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M515.44,-1289.9C531.39,-1285.91 550.81,-1281.57 568.5,-1279 629.45,-1270.16 793.61,-1236.82 845.5,-1270 881.74,-1293.17 894.45,-1346.98 898.62,-1373.57"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="896.57,-1374.07 899.5,-1379.71 900.72,-1373.47 896.57,-1374.07"/>
+</g>
+<!-- src/Components/Profile/index.tsx -->
+<g id="node66" class="node">
+<title>src/Components/Profile/index.tsx</title>
+<g id="a_node66"><a xlink:href="src/Components/Profile/index.tsx" xlink:title="index.tsx">
+<path fill="#bbfeff" stroke="black" d="M372,-1338C372,-1338 326,-1338 326,-1338 323,-1338 320,-1335 320,-1332 320,-1332 320,-1326 320,-1326 320,-1323 323,-1320 326,-1320 326,-1320 372,-1320 372,-1320 375,-1320 378,-1323 378,-1326 378,-1326 378,-1332 378,-1332 378,-1335 375,-1338 372,-1338"/>
+<text text-anchor="start" x="328" y="-1326.8" 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/ProfileSettings.tsx -->
+<g id="edge110" class="edge">
+<title>src/Components/Profile/index.tsx&#45;&gt;src/Components/Profile/ProfileSettings.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M378.21,-1329C392.05,-1329 409.22,-1329 425.48,-1329"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="425.9,-1331.1 431.9,-1329 425.9,-1326.9 425.9,-1331.1"/>
+</g>
+<!-- src/Components/Profile/index.tsx&#45;&gt;src/Components/Profile/UserSettings.tsx -->
+<g id="edge111" class="edge">
+<title>src/Components/Profile/index.tsx&#45;&gt;src/Components/Profile/UserSettings.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M378.1,-1321.69C388,-1319.17 399.23,-1316.39 409.5,-1314 416.26,-1312.43 423.4,-1310.83 430.44,-1309.3"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="430.9,-1311.35 436.32,-1308.03 430.01,-1307.25 430.9,-1311.35"/>
 </g>
 <!-- src/Components/Templates/CardPage.tsx -->
-<g id="node53" class="node">
+<g id="node67" class="node">
 <title>src/Components/Templates/CardPage.tsx</title>
-<g id="a_node53"><a xlink:href="src/Components/Templates/CardPage.tsx" xlink:title="CardPage.tsx">
-<path fill="#bbfeff" stroke="black" d="M517,-784C517,-784 453,-784 453,-784 450,-784 447,-781 447,-778 447,-778 447,-772 447,-772 447,-769 450,-766 453,-766 453,-766 517,-766 517,-766 520,-766 523,-769 523,-772 523,-772 523,-778 523,-778 523,-781 520,-784 517,-784"/>
-<text text-anchor="start" x="455" y="-772.8" font-family="Helvetica,sans-Serif" font-size="9.00">CardPage.tsx</text>
+<g id="a_node67"><a xlink:href="src/Components/Templates/CardPage.tsx" xlink:title="CardPage.tsx">
+<path fill="#bbfeff" stroke="black" d="M813,-1400C813,-1400 749,-1400 749,-1400 746,-1400 743,-1397 743,-1394 743,-1394 743,-1388 743,-1388 743,-1385 746,-1382 749,-1382 749,-1382 813,-1382 813,-1382 816,-1382 819,-1385 819,-1388 819,-1388 819,-1394 819,-1394 819,-1397 816,-1400 813,-1400"/>
+<text text-anchor="start" x="751" y="-1388.8" 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="edge81" class="edge">
+<g id="edge112" 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="M523.4,-778.28C547.5,-780.4 578.88,-783.15 603.8,-785.34"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="603.82,-787.45 609.98,-785.88 604.19,-783.27 603.82,-787.45"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M819.17,-1390.37C831.65,-1390.16 845.66,-1389.93 858.49,-1389.71"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="858.71,-1391.81 864.68,-1389.6 858.64,-1387.61 858.71,-1391.81"/>
 </g>
 <!-- src/Components/Templates/index.tsx -->
-<g id="node55" class="node">
+<g id="node69" class="node">
 <title>src/Components/Templates/index.tsx</title>
-<g id="a_node55"><a xlink:href="src/Components/Templates/index.tsx" xlink:title="index.tsx">
-<path fill="#bbfeff" stroke="black" d="M372.5,-784C372.5,-784 326.5,-784 326.5,-784 323.5,-784 320.5,-781 320.5,-778 320.5,-778 320.5,-772 320.5,-772 320.5,-769 323.5,-766 326.5,-766 326.5,-766 372.5,-766 372.5,-766 375.5,-766 378.5,-769 378.5,-772 378.5,-772 378.5,-778 378.5,-778 378.5,-781 375.5,-784 372.5,-784"/>
-<text text-anchor="start" x="328.5" y="-772.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
+<g id="a_node69"><a xlink:href="src/Components/Templates/index.tsx" xlink:title="index.tsx">
+<path fill="#bbfeff" stroke="black" d="M665.5,-1428C665.5,-1428 619.5,-1428 619.5,-1428 616.5,-1428 613.5,-1425 613.5,-1422 613.5,-1422 613.5,-1416 613.5,-1416 613.5,-1413 616.5,-1410 619.5,-1410 619.5,-1410 665.5,-1410 665.5,-1410 668.5,-1410 671.5,-1413 671.5,-1416 671.5,-1416 671.5,-1422 671.5,-1422 671.5,-1425 668.5,-1428 665.5,-1428"/>
+<text text-anchor="start" x="621.5" y="-1416.8" 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="edge84" class="edge">
+<g id="edge115" 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="M378.79,-783.22C389.55,-785.96 402,-788.65 413.5,-790 479.73,-797.78 557.33,-795.08 603.9,-792.2"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="604.12,-794.29 609.98,-791.81 603.85,-790.1 604.12,-794.29"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M671.53,-1419.27C710.77,-1419.17 784.15,-1417.29 845.5,-1406 853.49,-1404.53 861.95,-1402.28 869.78,-1399.89"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="870.53,-1401.86 875.62,-1398.05 869.27,-1397.85 870.53,-1401.86"/>
 </g>
 <!-- src/Components/Templates/index.tsx&#45;&gt;src/Components/Templates/CardPage.tsx -->
-<g id="edge83" class="edge">
+<g id="edge114" 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="M378.81,-775C396.71,-775 420.19,-775 440.43,-775"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="440.6,-777.1 446.6,-775 440.6,-772.9 440.6,-777.1"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M671.78,-1413.2C690.63,-1409.33 715.75,-1404.18 737.04,-1399.81"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="737.48,-1401.87 742.94,-1398.6 736.64,-1397.75 737.48,-1401.87"/>
 </g>
 <!-- src/SampleData/data.js -->
-<g id="node56" class="node">
+<g id="node70" class="node">
 <title>src/SampleData/data.js</title>
-<g id="a_node56"><a xlink:href="src/SampleData/data.js" xlink:title="data.js">
-<path fill="#ccffcc" stroke="black" d="M72,-1102C72,-1102 30,-1102 30,-1102 27,-1102 24,-1099 24,-1096 24,-1096 24,-1090 24,-1090 24,-1087 27,-1084 30,-1084 30,-1084 72,-1084 72,-1084 75,-1084 78,-1087 78,-1090 78,-1090 78,-1096 78,-1096 78,-1099 75,-1102 72,-1102"/>
-<text text-anchor="start" x="35.5" y="-1090.8" font-family="Helvetica,sans-Serif" font-size="9.00">data.js</text>
+<g id="a_node70"><a xlink:href="src/SampleData/data.js" xlink:title="data.js">
+<path fill="#ccffcc" stroke="black" d="M72,-1535C72,-1535 30,-1535 30,-1535 27,-1535 24,-1532 24,-1529 24,-1529 24,-1523 24,-1523 24,-1520 27,-1517 30,-1517 30,-1517 72,-1517 72,-1517 75,-1517 78,-1520 78,-1523 78,-1523 78,-1529 78,-1529 78,-1532 75,-1535 72,-1535"/>
+<text text-anchor="start" x="35.5" y="-1523.8" font-family="Helvetica,sans-Serif" font-size="9.00">data.js</text>
 </a>
 </g>
 </g>
 <!-- src/index.css -->
-<g id="node57" class="node">
+<g id="node71" class="node">
 <title>src/index.css</title>
-<g id="a_node57"><a xlink:href="src/index.css" xlink:title="index.css">
-<path fill="#ffffcc" stroke="black" d="M175.5,-1204C175.5,-1204 128.5,-1204 128.5,-1204 125.5,-1204 122.5,-1201 122.5,-1198 122.5,-1198 122.5,-1192 122.5,-1192 122.5,-1189 125.5,-1186 128.5,-1186 128.5,-1186 175.5,-1186 175.5,-1186 178.5,-1186 181.5,-1189 181.5,-1192 181.5,-1192 181.5,-1198 181.5,-1198 181.5,-1201 178.5,-1204 175.5,-1204"/>
-<text text-anchor="start" x="130.5" y="-1192.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.css</text>
+<g id="a_node71"><a xlink:href="src/index.css" xlink:title="index.css">
+<path fill="#ffffcc" stroke="black" d="M175.5,-1534C175.5,-1534 128.5,-1534 128.5,-1534 125.5,-1534 122.5,-1531 122.5,-1528 122.5,-1528 122.5,-1522 122.5,-1522 122.5,-1519 125.5,-1516 128.5,-1516 128.5,-1516 175.5,-1516 175.5,-1516 178.5,-1516 181.5,-1519 181.5,-1522 181.5,-1522 181.5,-1528 181.5,-1528 181.5,-1531 178.5,-1534 175.5,-1534"/>
+<text text-anchor="start" x="130.5" y="-1522.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.css</text>
 </a>
 </g>
 </g>
 <!-- src/index.tsx -->
-<g id="node58" class="node">
+<g id="node72" class="node">
 <title>src/index.tsx</title>
-<g id="a_node58"><a xlink:href="src/index.tsx" xlink:title="index.tsx">
-<path fill="#bbfeff" stroke="black" d="M74,-955C74,-955 28,-955 28,-955 25,-955 22,-952 22,-949 22,-949 22,-943 22,-943 22,-940 25,-937 28,-937 28,-937 74,-937 74,-937 77,-937 80,-940 80,-943 80,-943 80,-949 80,-949 80,-952 77,-955 74,-955"/>
-<text text-anchor="start" x="30" y="-943.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
+<g id="a_node72"><a xlink:href="src/index.tsx" xlink:title="index.tsx">
+<path fill="#bbfeff" stroke="black" d="M74,-1499C74,-1499 28,-1499 28,-1499 25,-1499 22,-1496 22,-1493 22,-1493 22,-1487 22,-1487 22,-1484 25,-1481 28,-1481 28,-1481 74,-1481 74,-1481 77,-1481 80,-1484 80,-1487 80,-1487 80,-1493 80,-1493 80,-1496 77,-1499 74,-1499"/>
+<text text-anchor="start" x="30" y="-1487.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/index.tsx&#45;&gt;src/Components/Auth/index.tsx -->
-<g id="edge86" class="edge">
+<g id="edge117" 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="M51.93,-936.87C51.39,-854.52 49.33,-241.63 107,-188 209.55,-92.62 344.2,-163.07 405.5,-289 418.58,-315.88 397.85,-801.53 413.5,-827 421.61,-840.19 436.12,-848.92 449.87,-854.57"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="449.35,-856.62 455.7,-856.8 450.85,-852.69 449.35,-856.62"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M80.06,-1488.93C106.3,-1488.13 146.57,-1487.42 181.5,-1489 225.64,-1491 236.7,-1492.22 280.5,-1498 334.61,-1505.14 348.83,-1504.69 401.5,-1519 405.16,-1520 405.76,-1521.32 409.5,-1522 442.52,-1527.99 536.39,-1545.33 560.5,-1522 570.21,-1512.61 565.2,-1292.1 568.5,-1279 581.64,-1226.85 615.08,-1171.7 631.75,-1146.32"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="633.66,-1147.24 635.23,-1141.08 630.16,-1144.92 633.66,-1147.24"/>
 </g>
 <!-- src/index.tsx&#45;&gt;src/Components/AppShell/index.tsx -->
-<g id="edge85" class="edge">
+<g id="edge116" 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="M75.46,-955.01C89.29,-960.31 106.92,-967.08 121.66,-972.74"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="121.01,-974.74 127.36,-974.93 122.51,-970.82 121.01,-974.74"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M80.38,-1498.66C84.24,-1500.65 87.92,-1503.08 91,-1506 103.1,-1517.51 92.9,-1531.05 107,-1540 120.98,-1548.87 169.62,-1551.53 181.5,-1540 199.16,-1522.85 186.27,-1120.21 194.5,-1097 200.21,-1080.9 212.54,-1065.71 222.37,-1055.39"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="223.97,-1056.76 226.68,-1051.01 220.97,-1053.82 223.97,-1056.76"/>
 </g>
 <!-- src/index.tsx&#45;&gt;src/Components/Gaming/index.tsx -->
-<g id="edge87" class="edge">
+<g id="edge118" 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="M76.22,-936.95C89.64,-931.93 106.46,-925.65 120.74,-920.31"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="121.8,-922.15 126.69,-918.09 120.33,-918.22 121.8,-922.15"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M80.25,-1498.19C84.22,-1500.25 87.97,-1502.82 91,-1506 105.65,-1521.36 89.66,-1538.76 107,-1551 134.05,-1570.09 156.54,-1572.76 181.5,-1551 240.5,-1499.56 238.42,-1233.45 236.92,-1166.37"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="239.02,-1166.12 236.77,-1160.18 234.82,-1166.23 239.02,-1166.12"/>
 </g>
 <!-- src/index.tsx&#45;&gt;src/Components/Input/index.tsx -->
-<g id="edge88" class="edge">
+<g id="edge119" 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="M53.43,-955.1C57.57,-978.8 71.62,-1043.26 107,-1082 204.49,-1188.76 270.13,-1172.32 413.5,-1191 480.05,-1199.67 509.51,-1229.47 564.5,-1191 634.38,-1142.11 644.18,-1026.24 645.4,-984.4"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="647.5,-984.39 645.53,-978.34 643.3,-984.3 647.5,-984.39"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M80.08,-1494.11C115.17,-1499.29 171.83,-1507.78 181.5,-1510 187.39,-1511.35 188.68,-1512.36 194.5,-1514 415.76,-1576.25 595.09,-1656.92 708.5,-1457 718.37,-1439.6 711.33,-1116.32 716.5,-1097 727.17,-1057.13 754.17,-1016.06 769.3,-995.13"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="771.02,-996.33 772.87,-990.25 767.63,-993.85 771.02,-996.33"/>
 </g>
 <!-- src/index.tsx&#45;&gt;src/Components/Map/index.tsx -->
-<g id="edge89" class="edge">
+<g id="edge120" 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="M53.48,-936.66C64.55,-866.63 134.59,-423.77 148.57,-335.35"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="150.65,-335.64 149.52,-329.39 146.5,-334.99 150.65,-335.64"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M52.18,-1480.88C53.71,-1406.91 65.58,-906.69 107,-856 109.71,-852.68 113.22,-850.19 117.08,-848.31"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="118.12,-850.16 122.92,-845.99 116.57,-846.25 118.12,-850.16"/>
 </g>
 <!-- src/index.tsx&#45;&gt;src/Components/Profile/index.tsx -->
-<g id="edge90" class="edge">
+<g id="edge121" 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="M53.22,-955.06C56.8,-977.91 69.52,-1038.14 107,-1067 134.04,-1087.83 173.73,-1091.82 202.04,-1091.54"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="202.3,-1093.64 208.25,-1091.41 202.21,-1089.44 202.3,-1093.64"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M63.51,-1480.73C96.45,-1454.68 194.76,-1380.22 288.5,-1342 296.38,-1338.79 305.19,-1336.31 313.56,-1334.42"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="314.42,-1336.39 319.85,-1333.09 313.55,-1332.28 314.42,-1336.39"/>
 </g>
 <!-- src/index.tsx&#45;&gt;src/Components/Templates/index.tsx -->
-<g id="edge91" class="edge">
+<g id="edge122" 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="M51.94,-936.77C51.52,-854.82 50.34,-253.63 107,-201 121.12,-187.88 266.76,-187.47 280.5,-201 302.27,-222.44 271.71,-725.8 289,-751 294.95,-759.68 304.61,-765.22 314.44,-768.75"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="313.86,-770.77 320.21,-770.61 315.14,-766.78 313.86,-770.77"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M80.11,-1491.18C106.39,-1492.46 146.7,-1494.9 181.5,-1499 265.56,-1508.9 498.42,-1594.53 560.5,-1537 577.66,-1521.09 552.8,-1449.35 568.5,-1432 578.09,-1421.4 593.08,-1417.55 607,-1416.59"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="607.38,-1418.67 613.29,-1416.33 607.21,-1414.48 607.38,-1418.67"/>
 </g>
 <!-- src/index.tsx&#45;&gt;src/index.css -->
-<g id="edge92" class="edge">
+<g id="edge123" 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="M55.3,-955.12C62.69,-975.81 80.69,-1028.04 91,-1073 101.45,-1118.58 78.05,-1140.27 107,-1177 109.61,-1180.31 112.93,-1183.02 116.57,-1185.23"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="115.8,-1187.19 122.09,-1188.12 117.75,-1183.48 115.8,-1187.19"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M77.49,-1499.01C90.33,-1503.55 106,-1509.09 119.57,-1513.89"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="118.89,-1515.88 125.25,-1515.9 120.29,-1511.92 118.89,-1515.88"/>
 </g>
 </g>
 </svg>