From 4fe4aa6b748ce6779a1d60642d0daa9c8510d108 Mon Sep 17 00:00:00 2001
From: Anton <mail@antontranelis.de>
Date: Sun, 20 Aug 2023 13:11:57 +0200
Subject: [PATCH] Modularization of Item Popups

---
 dependency-graph.svg                          | 797 ++++++++++--------
 src/Components/AppShell/DialogModal.tsx       |   4 +-
 src/Components/Input/TextAreaInput.tsx        |  13 +-
 src/Components/Map/Layer.tsx                  |   2 +-
 .../Map/Subcomponents/ItemFormPopup.tsx       |   6 +-
 .../Map/Subcomponents/ItemViewPopup.tsx       | 101 +--
 src/Components/Map/UtopiaMap.tsx              |   4 +-
 src/Components/Map/index.tsx                  |   2 +-
 src/Components/Profile/Settings.tsx           |  12 +-
 src/index.tsx                                 |   2 +-
 10 files changed, 491 insertions(+), 452 deletions(-)

diff --git a/dependency-graph.svg b/dependency-graph.svg
index 19f70394..302d0af2 100644
--- a/dependency-graph.svg
+++ b/dependency-graph.svg
@@ -4,87 +4,87 @@
 <!-- Generated by graphviz version 2.43.0 (0)
  -->
 <!-- Title: dependency&#45;cruiser output Pages: 1 -->
-<svg width="572pt" height="988pt"
- viewBox="0.00 0.00 572.00 988.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 984)">
+<svg width="690pt" height="996pt"
+ viewBox="0.00 0.00 690.00 996.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 992)">
 <title>dependency&#45;cruiser output</title>
-<polygon fill="white" stroke="transparent" points="-4,4 -4,-984 568,-984 568,4 -4,4"/>
+<polygon fill="white" stroke="transparent" points="-4,4 -4,-992 686,-992 686,4 -4,4"/>
 <g id="clust1" class="cluster">
 <title>cluster_src</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M16,-8C16,-8 544,-8 544,-8 550,-8 556,-14 556,-20 556,-20 556,-960 556,-960 556,-966 550,-972 544,-972 544,-972 16,-972 16,-972 10,-972 4,-966 4,-960 4,-960 4,-20 4,-20 4,-14 10,-8 16,-8"/>
-<text text-anchor="middle" x="280" y="-960.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 662,-8 662,-8 668,-8 674,-14 674,-20 674,-20 674,-968 674,-968 674,-974 668,-980 662,-980 662,-980 16,-980 16,-980 10,-980 4,-974 4,-968 4,-968 4,-20 4,-20 4,-14 10,-8 16,-8"/>
+<text text-anchor="middle" x="339" y="-968.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">src</text>
 </g>
 <g id="clust2" class="cluster">
 <title>cluster_src/Components</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M119,-16C119,-16 534.5,-16 534.5,-16 540.5,-16 546.5,-22 546.5,-28 546.5,-28 546.5,-758 546.5,-758 546.5,-764 540.5,-770 534.5,-770 534.5,-770 119,-770 119,-770 113,-770 107,-764 107,-758 107,-758 107,-28 107,-28 107,-22 113,-16 119,-16"/>
-<text text-anchor="middle" x="326.75" y="-758.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,-16C119,-16 652.5,-16 652.5,-16 658.5,-16 664.5,-22 664.5,-28 664.5,-28 664.5,-792 664.5,-792 664.5,-798 658.5,-804 652.5,-804 652.5,-804 119,-804 119,-804 113,-804 107,-798 107,-792 107,-792 107,-28 107,-28 107,-22 113,-16 119,-16"/>
+<text text-anchor="middle" x="385.75" y="-792.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Components</text>
 </g>
 <g id="clust3" class="cluster">
 <title>cluster_src/Components/AppShell</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M127,-632C127,-632 399,-632 399,-632 405,-632 411,-638 411,-644 411,-644 411,-732 411,-732 411,-738 405,-744 399,-744 399,-744 127,-744 127,-744 121,-744 115,-738 115,-732 115,-732 115,-644 115,-644 115,-638 121,-632 127,-632"/>
-<text text-anchor="middle" x="263" y="-732.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">AppShell</text>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M127,-666C127,-666 513.5,-666 513.5,-666 519.5,-666 525.5,-672 525.5,-678 525.5,-678 525.5,-766 525.5,-766 525.5,-772 519.5,-778 513.5,-778 513.5,-778 127,-778 127,-778 121,-778 115,-772 115,-766 115,-766 115,-678 115,-678 115,-672 121,-666 127,-666"/>
+<text text-anchor="middle" x="320.25" y="-766.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">AppShell</text>
 </g>
 <g id="clust4" class="cluster">
 <title>cluster_src/Components/Auth</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M127,-572C127,-572 266.5,-572 266.5,-572 272.5,-572 278.5,-578 278.5,-584 278.5,-584 278.5,-612 278.5,-612 278.5,-618 272.5,-624 266.5,-624 266.5,-624 127,-624 127,-624 121,-624 115,-618 115,-612 115,-612 115,-584 115,-584 115,-578 121,-572 127,-572"/>
-<text text-anchor="middle" x="196.75" y="-612.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Auth</text>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M127,-546C127,-546 277.5,-546 277.5,-546 283.5,-546 289.5,-552 289.5,-558 289.5,-558 289.5,-646 289.5,-646 289.5,-652 283.5,-658 277.5,-658 277.5,-658 127,-658 127,-658 121,-658 115,-652 115,-646 115,-646 115,-558 115,-558 115,-552 121,-546 127,-546"/>
+<text text-anchor="middle" x="202.25" y="-646.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Auth</text>
 </g>
 <g id="clust5" class="cluster">
 <title>cluster_src/Components/Gaming</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M127,-482C127,-482 263,-482 263,-482 269,-482 275,-488 275,-494 275,-494 275,-552 275,-552 275,-558 269,-564 263,-564 263,-564 127,-564 127,-564 121,-564 115,-558 115,-552 115,-552 115,-494 115,-494 115,-488 121,-482 127,-482"/>
-<text text-anchor="middle" x="195" y="-552.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Gaming</text>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M127,-456C127,-456 266,-456 266,-456 272,-456 278,-462 278,-468 278,-468 278,-526 278,-526 278,-532 272,-538 266,-538 266,-538 127,-538 127,-538 121,-538 115,-532 115,-526 115,-526 115,-468 115,-468 115,-462 121,-456 127,-456"/>
+<text text-anchor="middle" x="196.5" y="-526.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Gaming</text>
 </g>
 <g id="clust6" class="cluster">
 <title>cluster_src/Components/Input</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M303,-98C303,-98 391,-98 391,-98 397,-98 403,-104 403,-110 403,-110 403,-168 403,-168 403,-174 397,-180 391,-180 391,-180 303,-180 303,-180 297,-180 291,-174 291,-168 291,-168 291,-110 291,-110 291,-104 297,-98 303,-98"/>
-<text text-anchor="middle" x="347" y="-168.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Input</text>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M314,-464C314,-464 402,-464 402,-464 408,-464 414,-470 414,-476 414,-476 414,-534 414,-534 414,-540 408,-546 402,-546 402,-546 314,-546 314,-546 308,-546 302,-540 302,-534 302,-534 302,-476 302,-476 302,-470 308,-464 314,-464"/>
+<text text-anchor="middle" x="358" y="-534.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Input</text>
 </g>
 <g id="clust7" class="cluster">
 <title>cluster_src/Components/Map</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M127,-188C127,-188 526.5,-188 526.5,-188 532.5,-188 538.5,-194 538.5,-200 538.5,-200 538.5,-462 538.5,-462 538.5,-468 532.5,-474 526.5,-474 526.5,-474 127,-474 127,-474 121,-474 115,-468 115,-462 115,-462 115,-200 115,-200 115,-194 121,-188 127,-188"/>
-<text text-anchor="middle" x="326.75" y="-462.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Map</text>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M127,-158C127,-158 644.5,-158 644.5,-158 650.5,-158 656.5,-164 656.5,-170 656.5,-170 656.5,-436 656.5,-436 656.5,-442 650.5,-448 644.5,-448 644.5,-448 127,-448 127,-448 121,-448 115,-442 115,-436 115,-436 115,-170 115,-170 115,-164 121,-158 127,-158"/>
+<text text-anchor="middle" x="385.75" y="-436.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Map</text>
 </g>
 <g id="clust8" class="cluster">
 <title>cluster_src/Components/Map/Subcomponents</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M298.5,-336C298.5,-336 395.5,-336 395.5,-336 401.5,-336 407.5,-342 407.5,-348 407.5,-348 407.5,-436 407.5,-436 407.5,-442 401.5,-448 395.5,-448 395.5,-448 298.5,-448 298.5,-448 292.5,-448 286.5,-442 286.5,-436 286.5,-436 286.5,-348 286.5,-348 286.5,-342 292.5,-336 298.5,-336"/>
-<text text-anchor="middle" x="347" y="-436.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Subcomponents</text>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M309.5,-284C309.5,-284 517,-284 517,-284 523,-284 529,-290 529,-296 529,-296 529,-384 529,-384 529,-390 523,-396 517,-396 517,-396 309.5,-396 309.5,-396 303.5,-396 297.5,-390 297.5,-384 297.5,-384 297.5,-296 297.5,-296 297.5,-290 303.5,-284 309.5,-284"/>
+<text text-anchor="middle" x="413.25" y="-384.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Subcomponents</text>
 </g>
 <g id="clust9" class="cluster">
 <title>cluster_src/Components/Map/hooks</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M448.5,-266C448.5,-266 518.5,-266 518.5,-266 524.5,-266 530.5,-272 530.5,-278 530.5,-278 530.5,-366 530.5,-366 530.5,-372 524.5,-378 518.5,-378 518.5,-378 448.5,-378 448.5,-378 442.5,-378 436.5,-372 436.5,-366 436.5,-366 436.5,-278 436.5,-278 436.5,-272 442.5,-266 448.5,-266"/>
-<text text-anchor="middle" x="483.5" y="-366.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">hooks</text>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M566.5,-176C566.5,-176 636.5,-176 636.5,-176 642.5,-176 648.5,-182 648.5,-188 648.5,-188 648.5,-276 648.5,-276 648.5,-282 642.5,-288 636.5,-288 636.5,-288 566.5,-288 566.5,-288 560.5,-288 554.5,-282 554.5,-276 554.5,-276 554.5,-188 554.5,-188 554.5,-182 560.5,-176 566.5,-176"/>
+<text text-anchor="middle" x="601.5" y="-276.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">hooks</text>
 </g>
 <g id="clust10" class="cluster">
 <title>cluster_src/Components/Profile</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M127,-113C127,-113 266.5,-113 266.5,-113 272.5,-113 278.5,-119 278.5,-125 278.5,-125 278.5,-153 278.5,-153 278.5,-159 272.5,-165 266.5,-165 266.5,-165 127,-165 127,-165 121,-165 115,-159 115,-153 115,-153 115,-125 115,-125 115,-119 121,-113 127,-113"/>
-<text text-anchor="middle" x="196.75" y="-153.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Profile</text>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M127,-98C127,-98 269.5,-98 269.5,-98 275.5,-98 281.5,-104 281.5,-110 281.5,-110 281.5,-138 281.5,-138 281.5,-144 275.5,-150 269.5,-150 269.5,-150 127,-150 127,-150 121,-150 115,-144 115,-138 115,-138 115,-110 115,-110 115,-104 121,-98 127,-98"/>
+<text text-anchor="middle" x="198.25" y="-138.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Profile</text>
 </g>
 <g id="clust11" class="cluster">
 <title>cluster_src/Components/Templates</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M127,-24C127,-24 379.5,-24 379.5,-24 385.5,-24 391.5,-30 391.5,-36 391.5,-36 391.5,-78 391.5,-78 391.5,-84 385.5,-90 379.5,-90 379.5,-90 127,-90 127,-90 121,-90 115,-84 115,-78 115,-78 115,-36 115,-36 115,-30 121,-24 127,-24"/>
-<text text-anchor="middle" x="253.25" y="-78.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Templates</text>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M127,-24C127,-24 390.5,-24 390.5,-24 396.5,-24 402.5,-30 402.5,-36 402.5,-36 402.5,-78 402.5,-78 402.5,-84 396.5,-90 390.5,-90 390.5,-90 127,-90 127,-90 121,-90 115,-84 115,-78 115,-78 115,-36 115,-36 115,-30 121,-24 127,-24"/>
+<text text-anchor="middle" x="258.75" y="-78.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Templates</text>
 </g>
 <g id="clust12" class="cluster">
 <title>cluster_src/Components/Typography</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M453.5,-38C453.5,-38 513.5,-38 513.5,-38 519.5,-38 525.5,-44 525.5,-50 525.5,-50 525.5,-78 525.5,-78 525.5,-84 519.5,-90 513.5,-90 513.5,-90 453.5,-90 453.5,-90 447.5,-90 441.5,-84 441.5,-78 441.5,-78 441.5,-50 441.5,-50 441.5,-44 447.5,-38 453.5,-38"/>
-<text text-anchor="middle" x="483.5" y="-78.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Typography</text>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M441,-516C441,-516 507,-516 507,-516 513,-516 519,-522 519,-528 519,-528 519,-586 519,-586 519,-592 513,-598 507,-598 507,-598 441,-598 441,-598 435,-598 429,-592 429,-586 429,-586 429,-528 429,-528 429,-522 435,-516 441,-516"/>
+<text text-anchor="middle" x="474" y="-586.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Typography</text>
 </g>
 <g id="clust13" class="cluster">
 <title>cluster_src/SampleData</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M24,-720C24,-720 79,-720 79,-720 85,-720 91,-726 91,-732 91,-732 91,-760 91,-760 91,-766 85,-772 79,-772 79,-772 24,-772 24,-772 18,-772 12,-766 12,-760 12,-760 12,-732 12,-732 12,-726 18,-720 24,-720"/>
-<text text-anchor="middle" x="51.5" y="-760.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">SampleData</text>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M24,-711C24,-711 79,-711 79,-711 85,-711 91,-717 91,-723 91,-723 91,-751 91,-751 91,-757 85,-763 79,-763 79,-763 24,-763 24,-763 18,-763 12,-757 12,-751 12,-751 12,-723 12,-723 12,-717 18,-711 24,-711"/>
+<text text-anchor="middle" x="51.5" y="-751.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">SampleData</text>
 </g>
 <g id="clust14" class="cluster">
 <title>cluster_src/Utils</title>
-<path fill="#ffffff" stroke="black" stroke-width="2" d="M431,-778C431,-778 536,-778 536,-778 542,-778 548,-784 548,-790 548,-790 548,-908 548,-908 548,-914 542,-920 536,-920 536,-920 431,-920 431,-920 425,-920 419,-914 419,-908 419,-908 419,-790 419,-790 419,-784 425,-778 431,-778"/>
-<text text-anchor="middle" x="483.5" y="-908.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Utils</text>
+<path fill="#ffffff" stroke="black" stroke-width="2" d="M549,-812C549,-812 654,-812 654,-812 660,-812 666,-818 666,-824 666,-824 666,-942 666,-942 666,-948 660,-954 654,-954 654,-954 549,-954 549,-954 543,-954 537,-948 537,-942 537,-942 537,-824 537,-824 537,-818 543,-812 549,-812"/>
+<text text-anchor="middle" x="601.5" y="-942.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Utils</text>
 </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="M265.5,-658C265.5,-658 204.5,-658 204.5,-658 201.5,-658 198.5,-655 198.5,-652 198.5,-652 198.5,-646 198.5,-646 198.5,-643 201.5,-640 204.5,-640 204.5,-640 265.5,-640 265.5,-640 268.5,-640 271.5,-643 271.5,-646 271.5,-646 271.5,-652 271.5,-652 271.5,-655 268.5,-658 265.5,-658"/>
-<text text-anchor="start" x="206.5" y="-646.8" font-family="Helvetica,sans-Serif" font-size="9.00">AppShell.tsx</text>
+<path fill="#bbfeff" stroke="black" d="M268.5,-692C268.5,-692 207.5,-692 207.5,-692 204.5,-692 201.5,-689 201.5,-686 201.5,-686 201.5,-680 201.5,-680 201.5,-677 204.5,-674 207.5,-674 207.5,-674 268.5,-674 268.5,-674 271.5,-674 274.5,-677 274.5,-680 274.5,-680 274.5,-686 274.5,-686 274.5,-689 271.5,-692 268.5,-692"/>
+<text text-anchor="start" x="209.5" y="-680.8" font-family="Helvetica,sans-Serif" font-size="9.00">AppShell.tsx</text>
 </a>
 </g>
 </g>
@@ -92,616 +92,739 @@
 <g id="node2" class="node">
 <title>src/Components/AppShell/NavBar.tsx</title>
 <g id="a_node2"><a xlink:href="src/Components/AppShell/NavBar.tsx" xlink:title="NavBar.tsx">
-<path fill="#bbfeff" stroke="black" d="M373.5,-658C373.5,-658 320.5,-658 320.5,-658 317.5,-658 314.5,-655 314.5,-652 314.5,-652 314.5,-646 314.5,-646 314.5,-643 317.5,-640 320.5,-640 320.5,-640 373.5,-640 373.5,-640 376.5,-640 379.5,-643 379.5,-646 379.5,-646 379.5,-652 379.5,-652 379.5,-655 376.5,-658 373.5,-658"/>
-<text text-anchor="start" x="322.5" y="-646.8" font-family="Helvetica,sans-Serif" font-size="9.00">NavBar.tsx</text>
+<path fill="#bbfeff" stroke="black" d="M384.5,-692C384.5,-692 331.5,-692 331.5,-692 328.5,-692 325.5,-689 325.5,-686 325.5,-686 325.5,-680 325.5,-680 325.5,-677 328.5,-674 331.5,-674 331.5,-674 384.5,-674 384.5,-674 387.5,-674 390.5,-677 390.5,-680 390.5,-680 390.5,-686 390.5,-686 390.5,-689 387.5,-692 384.5,-692"/>
+<text text-anchor="start" x="333.5" y="-680.8" font-family="Helvetica,sans-Serif" font-size="9.00">NavBar.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/AppShell/AppShell.tsx&#45;&gt;src/Components/AppShell/NavBar.tsx -->
 <g id="edge1" class="edge">
 <title>src/Components/AppShell/AppShell.tsx&#45;&gt;src/Components/AppShell/NavBar.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M271.71,-649C283.36,-649 296.33,-649 308.13,-649"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="308.18,-651.1 314.18,-649 308.18,-646.9 308.18,-651.1"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M274.72,-683C288.72,-683 304.81,-683 319.02,-683"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="319.4,-685.1 325.4,-683 319.4,-680.9 319.4,-685.1"/>
+</g>
+<!-- src/Components/AppShell/DialogModal.tsx -->
+<g id="node4" class="node">
+<title>src/Components/AppShell/DialogModal.tsx</title>
+<g id="a_node4"><a xlink:href="src/Components/AppShell/DialogModal.tsx" xlink:title="DialogModal.tsx">
+<path fill="#bbfeff" stroke="black" d="M511.5,-692C511.5,-692 436.5,-692 436.5,-692 433.5,-692 430.5,-689 430.5,-686 430.5,-686 430.5,-680 430.5,-680 430.5,-677 433.5,-674 436.5,-674 436.5,-674 511.5,-674 511.5,-674 514.5,-674 517.5,-677 517.5,-680 517.5,-680 517.5,-686 517.5,-686 517.5,-689 514.5,-692 511.5,-692"/>
+<text text-anchor="start" x="438.5" y="-680.8" font-family="Helvetica,sans-Serif" font-size="9.00">DialogModal.tsx</text>
+</a>
+</g>
+</g>
+<!-- src/Components/AppShell/NavBar.tsx&#45;&gt;src/Components/AppShell/DialogModal.tsx -->
+<g id="edge2" class="edge">
+<title>src/Components/AppShell/NavBar.tsx&#45;&gt;src/Components/AppShell/DialogModal.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M390.76,-683C401.09,-683 412.82,-683 424.12,-683"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="424.34,-685.1 430.34,-683 424.34,-680.9 424.34,-685.1"/>
 </g>
 <!-- src/Components/AppShell/Content.tsx -->
 <g id="node3" class="node">
 <title>src/Components/AppShell/Content.tsx</title>
 <g id="a_node3"><a xlink:href="src/Components/AppShell/Content.tsx" xlink:title="Content.tsx">
-<path fill="#bbfeff" stroke="black" d="M263.5,-688C263.5,-688 206.5,-688 206.5,-688 203.5,-688 200.5,-685 200.5,-682 200.5,-682 200.5,-676 200.5,-676 200.5,-673 203.5,-670 206.5,-670 206.5,-670 263.5,-670 263.5,-670 266.5,-670 269.5,-673 269.5,-676 269.5,-676 269.5,-682 269.5,-682 269.5,-685 266.5,-688 263.5,-688"/>
-<text text-anchor="start" x="208.5" y="-676.8" font-family="Helvetica,sans-Serif" font-size="9.00">Content.tsx</text>
+<path fill="#bbfeff" stroke="black" d="M266.5,-722C266.5,-722 209.5,-722 209.5,-722 206.5,-722 203.5,-719 203.5,-716 203.5,-716 203.5,-710 203.5,-710 203.5,-707 206.5,-704 209.5,-704 209.5,-704 266.5,-704 266.5,-704 269.5,-704 272.5,-707 272.5,-710 272.5,-710 272.5,-716 272.5,-716 272.5,-719 269.5,-722 266.5,-722"/>
+<text text-anchor="start" x="211.5" y="-710.8" font-family="Helvetica,sans-Serif" font-size="9.00">Content.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/AppShell/SideBar.tsx -->
-<g id="node4" class="node">
+<g id="node5" class="node">
 <title>src/Components/AppShell/SideBar.tsx</title>
-<g id="a_node4"><a xlink:href="src/Components/AppShell/SideBar.tsx" xlink:title="SideBar.tsx">
-<path fill="#bbfeff" stroke="black" d="M262.5,-718C262.5,-718 207.5,-718 207.5,-718 204.5,-718 201.5,-715 201.5,-712 201.5,-712 201.5,-706 201.5,-706 201.5,-703 204.5,-700 207.5,-700 207.5,-700 262.5,-700 262.5,-700 265.5,-700 268.5,-703 268.5,-706 268.5,-706 268.5,-712 268.5,-712 268.5,-715 265.5,-718 262.5,-718"/>
-<text text-anchor="start" x="209.5" y="-706.8" font-family="Helvetica,sans-Serif" font-size="9.00">SideBar.tsx</text>
+<g id="a_node5"><a xlink:href="src/Components/AppShell/SideBar.tsx" xlink:title="SideBar.tsx">
+<path fill="#bbfeff" stroke="black" d="M265.5,-752C265.5,-752 210.5,-752 210.5,-752 207.5,-752 204.5,-749 204.5,-746 204.5,-746 204.5,-740 204.5,-740 204.5,-737 207.5,-734 210.5,-734 210.5,-734 265.5,-734 265.5,-734 268.5,-734 271.5,-737 271.5,-740 271.5,-740 271.5,-746 271.5,-746 271.5,-749 268.5,-752 265.5,-752"/>
+<text text-anchor="start" x="212.5" y="-740.8" font-family="Helvetica,sans-Serif" font-size="9.00">SideBar.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/AppShell/SidebarSubmenu.tsx -->
-<g id="node5" class="node">
+<g id="node6" class="node">
 <title>src/Components/AppShell/SidebarSubmenu.tsx</title>
-<g id="a_node5"><a xlink:href="src/Components/AppShell/SidebarSubmenu.tsx" xlink:title="SidebarSubmenu.tsx">
-<path fill="#bbfeff" stroke="black" d="M397,-718C397,-718 297,-718 297,-718 294,-718 291,-715 291,-712 291,-712 291,-706 291,-706 291,-703 294,-700 297,-700 297,-700 397,-700 397,-700 400,-700 403,-703 403,-706 403,-706 403,-712 403,-712 403,-715 400,-718 397,-718"/>
-<text text-anchor="start" x="299" y="-706.8" font-family="Helvetica,sans-Serif" font-size="9.00">SidebarSubmenu.tsx</text>
+<g id="a_node6"><a xlink:href="src/Components/AppShell/SidebarSubmenu.tsx" xlink:title="SidebarSubmenu.tsx">
+<path fill="#bbfeff" stroke="black" d="M408,-752C408,-752 308,-752 308,-752 305,-752 302,-749 302,-746 302,-746 302,-740 302,-740 302,-737 305,-734 308,-734 308,-734 408,-734 408,-734 411,-734 414,-737 414,-740 414,-740 414,-746 414,-746 414,-749 411,-752 408,-752"/>
+<text text-anchor="start" x="310" y="-740.8" font-family="Helvetica,sans-Serif" font-size="9.00">SidebarSubmenu.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/AppShell/SideBar.tsx&#45;&gt;src/Components/AppShell/SidebarSubmenu.tsx -->
-<g id="edge2" class="edge">
+<g id="edge3" class="edge">
 <title>src/Components/AppShell/SideBar.tsx&#45;&gt;src/Components/AppShell/SidebarSubmenu.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M268.71,-709C273.82,-709 279.25,-709 284.76,-709"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="284.76,-711.1 290.76,-709 284.76,-706.9 284.76,-711.1"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M271.56,-743C279.06,-743 287.28,-743 295.56,-743"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="295.9,-745.1 301.9,-743 295.9,-740.9 295.9,-745.1"/>
 </g>
 <!-- src/Components/AppShell/index.tsx -->
-<g id="node6" class="node">
+<g id="node7" class="node">
 <title>src/Components/AppShell/index.tsx</title>
-<g id="a_node6"><a xlink:href="src/Components/AppShell/index.tsx" xlink:title="index.tsx">
-<path fill="#bbfeff" stroke="black" d="M175,-673C175,-673 129,-673 129,-673 126,-673 123,-670 123,-667 123,-667 123,-661 123,-661 123,-658 126,-655 129,-655 129,-655 175,-655 175,-655 178,-655 181,-658 181,-661 181,-661 181,-667 181,-667 181,-670 178,-673 175,-673"/>
-<text text-anchor="start" x="131" y="-661.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
+<g id="a_node7"><a xlink:href="src/Components/AppShell/index.tsx" xlink:title="index.tsx">
+<path fill="#bbfeff" stroke="black" d="M175,-707C175,-707 129,-707 129,-707 126,-707 123,-704 123,-701 123,-701 123,-695 123,-695 123,-692 126,-689 129,-689 129,-689 175,-689 175,-689 178,-689 181,-692 181,-695 181,-695 181,-701 181,-701 181,-704 178,-707 175,-707"/>
+<text text-anchor="start" x="131" y="-695.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/AppShell/index.tsx&#45;&gt;src/Components/AppShell/AppShell.tsx -->
-<g id="edge3" class="edge">
+<g id="edge4" class="edge">
 <title>src/Components/AppShell/index.tsx&#45;&gt;src/Components/AppShell/AppShell.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.33,-658.75C184.84,-658.1 188.48,-657.43 192.13,-656.75"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="192.76,-658.77 198.28,-655.61 192,-654.64 192.76,-658.77"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.44,-692.92C185.92,-692.12 190.64,-691.28 195.35,-690.44"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="195.76,-692.5 201.29,-689.38 195.02,-688.36 195.76,-692.5"/>
 </g>
 <!-- src/Components/AppShell/index.tsx&#45;&gt;src/Components/AppShell/Content.tsx -->
-<g id="edge4" class="edge">
+<g id="edge5" class="edge">
 <title>src/Components/AppShell/index.tsx&#45;&gt;src/Components/AppShell/Content.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.33,-669.25C185.53,-670.02 189.93,-670.84 194.31,-671.65"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="193.98,-673.72 200.26,-672.75 194.74,-669.59 193.98,-673.72"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.44,-703.08C186.5,-703.98 191.86,-704.94 197.17,-705.89"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="197.09,-708.01 203.36,-706.99 197.83,-703.87 197.09,-708.01"/>
 </g>
 <!-- src/Components/AppShell/index.tsx&#45;&gt;src/Components/AppShell/SideBar.tsx -->
-<g id="edge5" class="edge">
+<g id="edge6" class="edge">
 <title>src/Components/AppShell/index.tsx&#45;&gt;src/Components/AppShell/SideBar.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M175.71,-673.08C177.75,-674.27 179.71,-675.58 181.5,-677 188.94,-682.93 186.87,-688.32 194.5,-694 195.93,-695.07 197.45,-696.07 199.03,-697.01"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="198.27,-698.98 204.55,-699.95 200.24,-695.27 198.27,-698.98"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M175.71,-707.08C177.75,-708.27 179.71,-709.58 181.5,-711 188.94,-716.93 186.81,-722.41 194.5,-728 196.08,-729.15 197.76,-730.22 199.5,-731.21"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="198.58,-733.1 204.88,-733.96 200.49,-729.36 198.58,-733.1"/>
 </g>
-<!-- src/Components/Auth/index.tsx -->
-<g id="node7" class="node">
-<title>src/Components/Auth/index.tsx</title>
-<g id="a_node7"><a xlink:href="src/Components/Auth/index.tsx" xlink:title="index.tsx">
-<path fill="#bbfeff" stroke="black" d="M175,-598C175,-598 129,-598 129,-598 126,-598 123,-595 123,-592 123,-592 123,-586 123,-586 123,-583 126,-580 129,-580 129,-580 175,-580 175,-580 178,-580 181,-583 181,-586 181,-586 181,-592 181,-592 181,-595 178,-598 175,-598"/>
-<text text-anchor="start" x="131" y="-586.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
+<!-- src/Components/Auth/LoginPage.tsx -->
+<g id="node8" class="node">
+<title>src/Components/Auth/LoginPage.tsx</title>
+<g id="a_node8"><a xlink:href="src/Components/Auth/LoginPage.tsx" xlink:title="LoginPage.tsx">
+<path fill="#bbfeff" stroke="black" d="M271.5,-572C271.5,-572 204.5,-572 204.5,-572 201.5,-572 198.5,-569 198.5,-566 198.5,-566 198.5,-560 198.5,-560 198.5,-557 201.5,-554 204.5,-554 204.5,-554 271.5,-554 271.5,-554 274.5,-554 277.5,-557 277.5,-560 277.5,-560 277.5,-566 277.5,-566 277.5,-569 274.5,-572 271.5,-572"/>
+<text text-anchor="start" x="206.5" y="-560.8" font-family="Helvetica,sans-Serif" font-size="9.00">LoginPage.tsx</text>
 </a>
 </g>
 </g>
+<!-- src/Components/Input/InputText.tsx -->
+<g id="node9" class="node">
+<title>src/Components/Input/InputText.tsx</title>
+<g id="a_node9"><a xlink:href="src/Components/Input/InputText.tsx" xlink:title="InputText.tsx">
+<path fill="#bbfeff" stroke="black" d="M390,-520C390,-520 326,-520 326,-520 323,-520 320,-517 320,-514 320,-514 320,-508 320,-508 320,-505 323,-502 326,-502 326,-502 390,-502 390,-502 393,-502 396,-505 396,-508 396,-508 396,-514 396,-514 396,-517 393,-520 390,-520"/>
+<text text-anchor="start" x="328" y="-508.8" font-family="Helvetica,sans-Serif" font-size="9.00">InputText.tsx</text>
+</a>
+</g>
+</g>
+<!-- src/Components/Auth/LoginPage.tsx&#45;&gt;src/Components/Input/InputText.tsx -->
+<g id="edge7" class="edge">
+<title>src/Components/Auth/LoginPage.tsx&#45;&gt;src/Components/Input/InputText.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M260.15,-553.83C269.19,-549.89 279.87,-545.24 289.5,-541 303.24,-534.95 318.53,-528.16 331.08,-522.57"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="332.01,-524.46 336.64,-520.1 330.3,-520.62 332.01,-524.46"/>
+</g>
+<!-- src/Components/Typography/ErrorText.tsx -->
+<g id="node10" class="node">
+<title>src/Components/Typography/ErrorText.tsx</title>
+<g id="a_node10"><a xlink:href="src/Components/Typography/ErrorText.tsx" xlink:title="ErrorText.tsx">
+<path fill="#bbfeff" stroke="black" d="M505,-572C505,-572 443,-572 443,-572 440,-572 437,-569 437,-566 437,-566 437,-560 437,-560 437,-557 440,-554 443,-554 443,-554 505,-554 505,-554 508,-554 511,-557 511,-560 511,-560 511,-566 511,-566 511,-569 508,-572 505,-572"/>
+<text text-anchor="start" x="445" y="-560.8" font-family="Helvetica,sans-Serif" font-size="9.00">ErrorText.tsx</text>
+</a>
+</g>
+</g>
+<!-- src/Components/Auth/LoginPage.tsx&#45;&gt;src/Components/Typography/ErrorText.tsx -->
+<g id="edge8" class="edge">
+<title>src/Components/Auth/LoginPage.tsx&#45;&gt;src/Components/Typography/ErrorText.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M277.64,-563C319.83,-563 387.18,-563 430.74,-563"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="430.99,-565.1 436.99,-563 430.99,-560.9 430.99,-565.1"/>
+</g>
+<!-- src/Components/Auth/SignupPage.tsx -->
+<g id="node11" class="node">
+<title>src/Components/Auth/SignupPage.tsx</title>
+<g id="a_node11"><a xlink:href="src/Components/Auth/SignupPage.tsx" xlink:title="SignupPage.tsx">
+<path fill="#bbfeff" stroke="black" d="M275.5,-602C275.5,-602 200.5,-602 200.5,-602 197.5,-602 194.5,-599 194.5,-596 194.5,-596 194.5,-590 194.5,-590 194.5,-587 197.5,-584 200.5,-584 200.5,-584 275.5,-584 275.5,-584 278.5,-584 281.5,-587 281.5,-590 281.5,-590 281.5,-596 281.5,-596 281.5,-599 278.5,-602 275.5,-602"/>
+<text text-anchor="start" x="202.5" y="-590.8" font-family="Helvetica,sans-Serif" font-size="9.00">SignupPage.tsx</text>
+</a>
+</g>
+</g>
+<!-- src/Components/Auth/SignupPage.tsx&#45;&gt;src/Components/Input/InputText.tsx -->
+<g id="edge9" class="edge">
+<title>src/Components/Auth/SignupPage.tsx&#45;&gt;src/Components/Input/InputText.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M277.1,-583.92C281.42,-582.25 285.65,-580.29 289.5,-578 312.98,-564.08 334.28,-540.2 346.43,-525.03"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="348.13,-526.26 350.19,-520.24 344.83,-523.66 348.13,-526.26"/>
+</g>
+<!-- src/Components/Auth/SignupPage.tsx&#45;&gt;src/Components/Typography/ErrorText.tsx -->
+<g id="edge10" class="edge">
+<title>src/Components/Auth/SignupPage.tsx&#45;&gt;src/Components/Typography/ErrorText.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M281.65,-587.53C323.99,-582.1 388.52,-573.83 430.73,-568.42"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="431.1,-570.49 436.79,-567.64 430.57,-566.32 431.1,-570.49"/>
+</g>
+<!-- src/Components/Auth/index.tsx -->
+<g id="node12" class="node">
+<title>src/Components/Auth/index.tsx</title>
+<g id="a_node12"><a xlink:href="src/Components/Auth/index.tsx" xlink:title="index.tsx">
+<path fill="#bbfeff" stroke="black" d="M175,-587C175,-587 129,-587 129,-587 126,-587 123,-584 123,-581 123,-581 123,-575 123,-575 123,-572 126,-569 129,-569 129,-569 175,-569 175,-569 178,-569 181,-572 181,-575 181,-575 181,-581 181,-581 181,-584 178,-587 175,-587"/>
+<text text-anchor="start" x="131" y="-575.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
+</a>
+</g>
+</g>
+<!-- src/Components/Auth/index.tsx&#45;&gt;src/Components/Auth/LoginPage.tsx -->
+<g id="edge11" class="edge">
+<title>src/Components/Auth/index.tsx&#45;&gt;src/Components/Auth/LoginPage.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.44,-572.92C184.91,-572.3 188.53,-571.66 192.17,-571"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="192.77,-573.03 198.31,-569.91 192.04,-568.9 192.77,-573.03"/>
+</g>
+<!-- src/Components/Auth/index.tsx&#45;&gt;src/Components/Auth/SignupPage.tsx -->
+<g id="edge12" class="edge">
+<title>src/Components/Auth/index.tsx&#45;&gt;src/Components/Auth/SignupPage.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.44,-583.08C183.66,-583.48 185.95,-583.88 188.26,-584.3"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="188.14,-586.41 194.42,-585.4 188.88,-582.27 188.14,-586.41"/>
+</g>
 <!-- src/Components/Auth/useAuth.tsx -->
-<g id="node8" class="node">
+<g id="node13" class="node">
 <title>src/Components/Auth/useAuth.tsx</title>
-<g id="a_node8"><a xlink:href="src/Components/Auth/useAuth.tsx" xlink:title="useAuth.tsx">
-<path fill="#bbfeff" stroke="black" d="M264.5,-598C264.5,-598 205.5,-598 205.5,-598 202.5,-598 199.5,-595 199.5,-592 199.5,-592 199.5,-586 199.5,-586 199.5,-583 202.5,-580 205.5,-580 205.5,-580 264.5,-580 264.5,-580 267.5,-580 270.5,-583 270.5,-586 270.5,-586 270.5,-592 270.5,-592 270.5,-595 267.5,-598 264.5,-598"/>
-<text text-anchor="start" x="207.5" y="-586.8" font-family="Helvetica,sans-Serif" font-size="9.00">useAuth.tsx</text>
+<g id="a_node13"><a xlink:href="src/Components/Auth/useAuth.tsx" xlink:title="useAuth.tsx">
+<path fill="#bbfeff" stroke="black" d="M267.5,-632C267.5,-632 208.5,-632 208.5,-632 205.5,-632 202.5,-629 202.5,-626 202.5,-626 202.5,-620 202.5,-620 202.5,-617 205.5,-614 208.5,-614 208.5,-614 267.5,-614 267.5,-614 270.5,-614 273.5,-617 273.5,-620 273.5,-620 273.5,-626 273.5,-626 273.5,-629 270.5,-632 267.5,-632"/>
+<text text-anchor="start" x="210.5" y="-620.8" font-family="Helvetica,sans-Serif" font-size="9.00">useAuth.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Auth/index.tsx&#45;&gt;src/Components/Auth/useAuth.tsx -->
-<g id="edge6" class="edge">
+<g id="edge13" class="edge">
 <title>src/Components/Auth/index.tsx&#45;&gt;src/Components/Auth/useAuth.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.33,-589C185.16,-589 189.15,-589 193.15,-589"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="193.41,-591.1 199.41,-589 193.41,-586.9 193.41,-591.1"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M163.71,-587.06C171.77,-593.55 183.32,-602.14 194.5,-608 196.84,-609.23 199.3,-610.39 201.81,-611.48"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="201.37,-613.58 207.72,-613.92 202.97,-609.69 201.37,-613.58"/>
 </g>
 <!-- src/Components/Gaming/Modal.tsx -->
-<g id="node9" class="node">
+<g id="node14" class="node">
 <title>src/Components/Gaming/Modal.tsx</title>
-<g id="a_node9"><a xlink:href="src/Components/Gaming/Modal.tsx" xlink:title="Modal.tsx">
-<path fill="#bbfeff" stroke="black" d="M258.5,-508C258.5,-508 211.5,-508 211.5,-508 208.5,-508 205.5,-505 205.5,-502 205.5,-502 205.5,-496 205.5,-496 205.5,-493 208.5,-490 211.5,-490 211.5,-490 258.5,-490 258.5,-490 261.5,-490 264.5,-493 264.5,-496 264.5,-496 264.5,-502 264.5,-502 264.5,-505 261.5,-508 258.5,-508"/>
-<text text-anchor="start" x="213.5" y="-496.8" font-family="Helvetica,sans-Serif" font-size="9.00">Modal.tsx</text>
+<g id="a_node14"><a xlink:href="src/Components/Gaming/Modal.tsx" xlink:title="Modal.tsx">
+<path fill="#bbfeff" stroke="black" d="M261.5,-482C261.5,-482 214.5,-482 214.5,-482 211.5,-482 208.5,-479 208.5,-476 208.5,-476 208.5,-470 208.5,-470 208.5,-467 211.5,-464 214.5,-464 214.5,-464 261.5,-464 261.5,-464 264.5,-464 267.5,-467 267.5,-470 267.5,-470 267.5,-476 267.5,-476 267.5,-479 264.5,-482 261.5,-482"/>
+<text text-anchor="start" x="216.5" y="-470.8" font-family="Helvetica,sans-Serif" font-size="9.00">Modal.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Gaming/Quests.tsx -->
-<g id="node10" class="node">
+<g id="node15" class="node">
 <title>src/Components/Gaming/Quests.tsx</title>
-<g id="a_node10"><a xlink:href="src/Components/Gaming/Quests.tsx" xlink:title="Quests.tsx">
-<path fill="#bbfeff" stroke="black" d="M261,-538C261,-538 209,-538 209,-538 206,-538 203,-535 203,-532 203,-532 203,-526 203,-526 203,-523 206,-520 209,-520 209,-520 261,-520 261,-520 264,-520 267,-523 267,-526 267,-526 267,-532 267,-532 267,-535 264,-538 261,-538"/>
-<text text-anchor="start" x="211" y="-526.8" font-family="Helvetica,sans-Serif" font-size="9.00">Quests.tsx</text>
+<g id="a_node15"><a xlink:href="src/Components/Gaming/Quests.tsx" xlink:title="Quests.tsx">
+<path fill="#bbfeff" stroke="black" d="M264,-512C264,-512 212,-512 212,-512 209,-512 206,-509 206,-506 206,-506 206,-500 206,-500 206,-497 209,-494 212,-494 212,-494 264,-494 264,-494 267,-494 270,-497 270,-500 270,-500 270,-506 270,-506 270,-509 267,-512 264,-512"/>
+<text text-anchor="start" x="214" y="-500.8" font-family="Helvetica,sans-Serif" font-size="9.00">Quests.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Gaming/index.tsx -->
-<g id="node11" class="node">
+<g id="node16" class="node">
 <title>src/Components/Gaming/index.tsx</title>
-<g id="a_node11"><a xlink:href="src/Components/Gaming/index.tsx" xlink:title="index.tsx">
-<path fill="#bbfeff" stroke="black" d="M175,-523C175,-523 129,-523 129,-523 126,-523 123,-520 123,-517 123,-517 123,-511 123,-511 123,-508 126,-505 129,-505 129,-505 175,-505 175,-505 178,-505 181,-508 181,-511 181,-511 181,-517 181,-517 181,-520 178,-523 175,-523"/>
-<text text-anchor="start" x="131" y="-511.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
+<g id="a_node16"><a xlink:href="src/Components/Gaming/index.tsx" xlink:title="index.tsx">
+<path fill="#bbfeff" stroke="black" d="M175,-497C175,-497 129,-497 129,-497 126,-497 123,-494 123,-491 123,-491 123,-485 123,-485 123,-482 126,-479 129,-479 129,-479 175,-479 175,-479 178,-479 181,-482 181,-485 181,-485 181,-491 181,-491 181,-494 178,-497 175,-497"/>
+<text text-anchor="start" x="131" y="-485.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Gaming/index.tsx&#45;&gt;src/Components/Gaming/Modal.tsx -->
-<g id="edge7" class="edge">
+<g id="edge14" class="edge">
 <title>src/Components/Gaming/index.tsx&#45;&gt;src/Components/Gaming/Modal.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.33,-508.75C187.15,-507.68 193.33,-506.53 199.34,-505.42"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="199.76,-507.48 205.27,-504.32 198.99,-503.35 199.76,-507.48"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.44,-482.92C188.07,-481.74 195.21,-480.46 202.08,-479.23"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="202.77,-481.25 208.3,-478.12 202.03,-477.11 202.77,-481.25"/>
 </g>
 <!-- src/Components/Gaming/index.tsx&#45;&gt;src/Components/Gaming/Quests.tsx -->
-<g id="edge8" class="edge">
+<g id="edge15" class="edge">
 <title>src/Components/Gaming/index.tsx&#45;&gt;src/Components/Gaming/Quests.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.33,-519.25C186.31,-520.17 191.57,-521.14 196.75,-522.1"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="196.5,-524.19 202.78,-523.22 197.27,-520.06 196.5,-524.19"/>
-</g>
-<!-- src/Components/Input/InputText.tsx -->
-<g id="node12" class="node">
-<title>src/Components/Input/InputText.tsx</title>
-<g id="a_node12"><a xlink:href="src/Components/Input/InputText.tsx" xlink:title="InputText.tsx">
-<path fill="#bbfeff" stroke="black" d="M379,-154C379,-154 315,-154 315,-154 312,-154 309,-151 309,-148 309,-148 309,-142 309,-142 309,-139 312,-136 315,-136 315,-136 379,-136 379,-136 382,-136 385,-139 385,-142 385,-142 385,-148 385,-148 385,-151 382,-154 379,-154"/>
-<text text-anchor="start" x="317" y="-142.8" font-family="Helvetica,sans-Serif" font-size="9.00">InputText.tsx</text>
-</a>
-</g>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.44,-493.08C187.36,-494.14 193.69,-495.27 199.88,-496.37"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="199.72,-498.48 206,-497.46 200.46,-494.34 199.72,-498.48"/>
 </g>
 <!-- src/Components/Input/TextAreaInput.tsx -->
-<g id="node13" class="node">
+<g id="node17" class="node">
 <title>src/Components/Input/TextAreaInput.tsx</title>
-<g id="a_node13"><a xlink:href="src/Components/Input/TextAreaInput.tsx" xlink:title="TextAreaInput.tsx">
-<path fill="#bbfeff" stroke="black" d="M389,-124C389,-124 305,-124 305,-124 302,-124 299,-121 299,-118 299,-118 299,-112 299,-112 299,-109 302,-106 305,-106 305,-106 389,-106 389,-106 392,-106 395,-109 395,-112 395,-112 395,-118 395,-118 395,-121 392,-124 389,-124"/>
-<text text-anchor="start" x="307" y="-112.8" font-family="Helvetica,sans-Serif" font-size="9.00">TextAreaInput.tsx</text>
+<g id="a_node17"><a xlink:href="src/Components/Input/TextAreaInput.tsx" xlink:title="TextAreaInput.tsx">
+<path fill="#bbfeff" stroke="black" d="M400,-490C400,-490 316,-490 316,-490 313,-490 310,-487 310,-484 310,-484 310,-478 310,-478 310,-475 313,-472 316,-472 316,-472 400,-472 400,-472 403,-472 406,-475 406,-478 406,-478 406,-484 406,-484 406,-487 403,-490 400,-490"/>
+<text text-anchor="start" x="318" y="-478.8" font-family="Helvetica,sans-Serif" font-size="9.00">TextAreaInput.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Layer.tsx -->
-<g id="node14" class="node">
+<g id="node18" class="node">
 <title>src/Components/Map/Layer.tsx</title>
-<g id="a_node14"><a xlink:href="src/Components/Map/Layer.tsx" xlink:title="Layer.tsx">
-<path fill="#bbfeff" stroke="black" d="M257.5,-336C257.5,-336 212.5,-336 212.5,-336 209.5,-336 206.5,-333 206.5,-330 206.5,-330 206.5,-324 206.5,-324 206.5,-321 209.5,-318 212.5,-318 212.5,-318 257.5,-318 257.5,-318 260.5,-318 263.5,-321 263.5,-324 263.5,-324 263.5,-330 263.5,-330 263.5,-333 260.5,-336 257.5,-336"/>
-<text text-anchor="start" x="214.5" y="-324.8" font-family="Helvetica,sans-Serif" font-size="9.00">Layer.tsx</text>
+<g id="a_node18"><a xlink:href="src/Components/Map/Layer.tsx" xlink:title="Layer.tsx">
+<path fill="#bbfeff" stroke="black" d="M260.5,-316C260.5,-316 215.5,-316 215.5,-316 212.5,-316 209.5,-313 209.5,-310 209.5,-310 209.5,-304 209.5,-304 209.5,-301 212.5,-298 215.5,-298 215.5,-298 260.5,-298 260.5,-298 263.5,-298 266.5,-301 266.5,-304 266.5,-304 266.5,-310 266.5,-310 266.5,-313 263.5,-316 260.5,-316"/>
+<text text-anchor="start" x="217.5" y="-304.8" font-family="Helvetica,sans-Serif" font-size="9.00">Layer.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Utils/MarkerIconFactory.ts -->
-<g id="node15" class="node">
+<g id="node19" class="node">
 <title>src/Utils/MarkerIconFactory.ts</title>
-<g id="a_node15"><a xlink:href="src/Utils/MarkerIconFactory.ts" xlink:title="MarkerIconFactory.ts">
-<path fill="#ddfeff" stroke="black" d="M532.5,-894C532.5,-894 434.5,-894 434.5,-894 431.5,-894 428.5,-891 428.5,-888 428.5,-888 428.5,-882 428.5,-882 428.5,-879 431.5,-876 434.5,-876 434.5,-876 532.5,-876 532.5,-876 535.5,-876 538.5,-879 538.5,-882 538.5,-882 538.5,-888 538.5,-888 538.5,-891 535.5,-894 532.5,-894"/>
-<text text-anchor="start" x="436.5" y="-882.8" font-family="Helvetica,sans-Serif" font-size="9.00">MarkerIconFactory.ts</text>
+<g id="a_node19"><a xlink:href="src/Utils/MarkerIconFactory.ts" xlink:title="MarkerIconFactory.ts">
+<path fill="#ddfeff" stroke="black" d="M650.5,-928C650.5,-928 552.5,-928 552.5,-928 549.5,-928 546.5,-925 546.5,-922 546.5,-922 546.5,-916 546.5,-916 546.5,-913 549.5,-910 552.5,-910 552.5,-910 650.5,-910 650.5,-910 653.5,-910 656.5,-913 656.5,-916 656.5,-916 656.5,-922 656.5,-922 656.5,-925 653.5,-928 650.5,-928"/>
+<text text-anchor="start" x="554.5" y="-916.8" font-family="Helvetica,sans-Serif" font-size="9.00">MarkerIconFactory.ts</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Layer.tsx&#45;&gt;src/Utils/MarkerIconFactory.ts -->
-<g id="edge9" class="edge">
+<g id="edge16" 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="M239.38,-336.08C247.87,-359.4 270.04,-423.47 278.5,-479 282.99,-508.45 274.18,-719.87 286.5,-747 319.72,-820.16 348.11,-832.18 419,-870 421.55,-871.36 424.23,-872.6 426.97,-873.73"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="426.34,-875.73 432.7,-875.89 427.83,-871.81 426.34,-875.73"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M243.37,-316.29C253.8,-339 279.97,-399.39 289.5,-453 291.56,-464.57 289.71,-867.2 297.5,-876 360.47,-947.17 483.35,-939.88 551.69,-929.03"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="552.14,-931.08 557.72,-928.04 551.46,-926.94 552.14,-931.08"/>
 </g>
 <!-- src/Components/Map/hooks/useItems.tsx -->
-<g id="node16" class="node">
+<g id="node20" class="node">
 <title>src/Components/Map/hooks/useItems.tsx</title>
-<g id="a_node16"><a xlink:href="src/Components/Map/hooks/useItems.tsx" xlink:title="useItems.tsx">
-<path fill="#bbfeff" stroke="black" d="M514.5,-352C514.5,-352 452.5,-352 452.5,-352 449.5,-352 446.5,-349 446.5,-346 446.5,-346 446.5,-340 446.5,-340 446.5,-337 449.5,-334 452.5,-334 452.5,-334 514.5,-334 514.5,-334 517.5,-334 520.5,-337 520.5,-340 520.5,-340 520.5,-346 520.5,-346 520.5,-349 517.5,-352 514.5,-352"/>
-<text text-anchor="start" x="454.5" y="-340.8" font-family="Helvetica,sans-Serif" font-size="9.00">useItems.tsx</text>
+<g id="a_node20"><a xlink:href="src/Components/Map/hooks/useItems.tsx" xlink:title="useItems.tsx">
+<path fill="#bbfeff" stroke="black" d="M632.5,-262C632.5,-262 570.5,-262 570.5,-262 567.5,-262 564.5,-259 564.5,-256 564.5,-256 564.5,-250 564.5,-250 564.5,-247 567.5,-244 570.5,-244 570.5,-244 632.5,-244 632.5,-244 635.5,-244 638.5,-247 638.5,-250 638.5,-250 638.5,-256 638.5,-256 638.5,-259 635.5,-262 632.5,-262"/>
+<text text-anchor="start" x="572.5" y="-250.8" font-family="Helvetica,sans-Serif" font-size="9.00">useItems.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/hooks/useItems.tsx -->
-<g id="edge10" class="edge">
+<g id="edge17" 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="M263.64,-327.06C298.17,-327.33 359.06,-328.49 411,-333 420.42,-333.82 430.51,-335.02 440.04,-336.32"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="439.98,-338.43 446.21,-337.17 440.56,-334.27 439.98,-338.43"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M266.69,-302.25C274.54,-300.02 282.78,-296.75 289.5,-292 294.44,-288.51 292.26,-284.01 297.5,-281 379.89,-233.71 496.04,-239.04 557.87,-246.4"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="557.83,-248.51 564.04,-247.16 558.34,-244.34 557.83,-248.51"/>
 </g>
 <!-- src/Components/Map/hooks/useLayers.tsx -->
-<g id="node17" class="node">
+<g id="node21" class="node">
 <title>src/Components/Map/hooks/useLayers.tsx</title>
-<g id="a_node17"><a xlink:href="src/Components/Map/hooks/useLayers.tsx" xlink:title="useLayers.tsx">
-<path fill="#bbfeff" stroke="black" d="M516.5,-322C516.5,-322 450.5,-322 450.5,-322 447.5,-322 444.5,-319 444.5,-316 444.5,-316 444.5,-310 444.5,-310 444.5,-307 447.5,-304 450.5,-304 450.5,-304 516.5,-304 516.5,-304 519.5,-304 522.5,-307 522.5,-310 522.5,-310 522.5,-316 522.5,-316 522.5,-319 519.5,-322 516.5,-322"/>
-<text text-anchor="start" x="452.5" y="-310.8" font-family="Helvetica,sans-Serif" font-size="9.00">useLayers.tsx</text>
+<g id="a_node21"><a xlink:href="src/Components/Map/hooks/useLayers.tsx" xlink:title="useLayers.tsx">
+<path fill="#bbfeff" stroke="black" d="M634.5,-232C634.5,-232 568.5,-232 568.5,-232 565.5,-232 562.5,-229 562.5,-226 562.5,-226 562.5,-220 562.5,-220 562.5,-217 565.5,-214 568.5,-214 568.5,-214 634.5,-214 634.5,-214 637.5,-214 640.5,-217 640.5,-220 640.5,-220 640.5,-226 640.5,-226 640.5,-229 637.5,-232 634.5,-232"/>
+<text text-anchor="start" x="570.5" y="-220.8" font-family="Helvetica,sans-Serif" font-size="9.00">useLayers.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/hooks/useLayers.tsx -->
-<g id="edge11" class="edge">
+<g id="edge18" class="edge">
 <title>src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/hooks/useLayers.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M263.51,-324.68C270.97,-324.09 279.04,-323.49 286.5,-323 338.46,-319.62 398.23,-316.71 437.97,-314.92"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="438.27,-317 444.17,-314.64 438.09,-312.81 438.27,-317"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M266.72,-304.47C275.15,-302.35 283.7,-298.59 289.5,-292 304.08,-275.44 281.17,-257.84 297.5,-243 334.32,-209.56 481.48,-214.55 556.32,-219.49"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="556.32,-221.59 562.45,-219.9 556.61,-217.4 556.32,-221.59"/>
 </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="M511.5,-292C511.5,-292 455.5,-292 455.5,-292 452.5,-292 449.5,-289 449.5,-286 449.5,-286 449.5,-280 449.5,-280 449.5,-277 452.5,-274 455.5,-274 455.5,-274 511.5,-274 511.5,-274 514.5,-274 517.5,-277 517.5,-280 517.5,-280 517.5,-286 517.5,-286 517.5,-289 514.5,-292 511.5,-292"/>
-<text text-anchor="start" x="457.5" y="-280.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="M629.5,-202C629.5,-202 573.5,-202 573.5,-202 570.5,-202 567.5,-199 567.5,-196 567.5,-196 567.5,-190 567.5,-190 567.5,-187 570.5,-184 573.5,-184 573.5,-184 629.5,-184 629.5,-184 632.5,-184 635.5,-187 635.5,-190 635.5,-190 635.5,-196 635.5,-196 635.5,-199 632.5,-202 629.5,-202"/>
+<text text-anchor="start" x="575.5" y="-190.8" font-family="Helvetica,sans-Serif" font-size="9.00">useTags.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/hooks/useTags.tsx -->
-<g id="edge12" class="edge">
+<g id="edge19" 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="M263.64,-318.7C271.02,-316.66 279.03,-314.6 286.5,-313 315.63,-306.76 394.98,-295.24 443.31,-288.44"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="443.69,-290.5 449.34,-287.59 443.1,-286.34 443.69,-290.5"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M266.69,-304.73C275.22,-302.64 283.84,-298.83 289.5,-292 300.62,-278.59 284.98,-226.12 297.5,-214 306.84,-204.97 481.43,-197.39 561.26,-194.39"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="561.39,-196.49 567.3,-194.16 561.23,-192.29 561.39,-196.49"/>
 </g>
 <!-- src/Components/Map/Subcomponents/ItemFormPopup.tsx -->
-<g id="node19" class="node">
+<g id="node23" class="node">
 <title>src/Components/Map/Subcomponents/ItemFormPopup.tsx</title>
-<g id="a_node19"><a xlink:href="src/Components/Map/Subcomponents/ItemFormPopup.tsx" xlink:title="ItemFormPopup.tsx">
-<path fill="#bbfeff" stroke="black" d="M393.5,-422C393.5,-422 300.5,-422 300.5,-422 297.5,-422 294.5,-419 294.5,-416 294.5,-416 294.5,-410 294.5,-410 294.5,-407 297.5,-404 300.5,-404 300.5,-404 393.5,-404 393.5,-404 396.5,-404 399.5,-407 399.5,-410 399.5,-410 399.5,-416 399.5,-416 399.5,-419 396.5,-422 393.5,-422"/>
-<text text-anchor="start" x="302.5" y="-410.8" font-family="Helvetica,sans-Serif" font-size="9.00">ItemFormPopup.tsx</text>
+<g id="a_node23"><a xlink:href="src/Components/Map/Subcomponents/ItemFormPopup.tsx" xlink:title="ItemFormPopup.tsx">
+<path fill="#bbfeff" stroke="black" d="M404.5,-340C404.5,-340 311.5,-340 311.5,-340 308.5,-340 305.5,-337 305.5,-334 305.5,-334 305.5,-328 305.5,-328 305.5,-325 308.5,-322 311.5,-322 311.5,-322 404.5,-322 404.5,-322 407.5,-322 410.5,-325 410.5,-328 410.5,-328 410.5,-334 410.5,-334 410.5,-337 407.5,-340 404.5,-340"/>
+<text text-anchor="start" x="313.5" y="-328.8" font-family="Helvetica,sans-Serif" font-size="9.00">ItemFormPopup.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/Subcomponents/ItemFormPopup.tsx -->
-<g id="edge13" class="edge">
+<g id="edge20" 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="M240.05,-336.46C247.14,-351.83 263.28,-382.12 286.5,-398 288.21,-399.17 290.01,-400.25 291.87,-401.25"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="291.3,-403.3 297.61,-403.99 293.11,-399.51 291.3,-403.3"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M266.67,-312.63C278.48,-315.03 292.66,-317.91 306.24,-320.68"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="306.13,-322.8 312.43,-321.93 306.97,-318.68 306.13,-322.8"/>
 </g>
 <!-- src/Components/Map/Subcomponents/ItemViewPopup.tsx -->
-<g id="node20" class="node">
+<g id="node24" class="node">
 <title>src/Components/Map/Subcomponents/ItemViewPopup.tsx</title>
-<g id="a_node20"><a xlink:href="src/Components/Map/Subcomponents/ItemViewPopup.tsx" xlink:title="ItemViewPopup.tsx">
-<path fill="#bbfeff" stroke="black" d="M393,-392C393,-392 301,-392 301,-392 298,-392 295,-389 295,-386 295,-386 295,-380 295,-380 295,-377 298,-374 301,-374 301,-374 393,-374 393,-374 396,-374 399,-377 399,-380 399,-380 399,-386 399,-386 399,-389 396,-392 393,-392"/>
-<text text-anchor="start" x="303" y="-380.8" font-family="Helvetica,sans-Serif" font-size="9.00">ItemViewPopup.tsx</text>
+<g id="a_node24"><a xlink:href="src/Components/Map/Subcomponents/ItemViewPopup.tsx" xlink:title="ItemViewPopup.tsx">
+<path fill="#bbfeff" stroke="black" d="M404,-370C404,-370 312,-370 312,-370 309,-370 306,-367 306,-364 306,-364 306,-358 306,-358 306,-355 309,-352 312,-352 312,-352 404,-352 404,-352 407,-352 410,-355 410,-358 410,-358 410,-364 410,-364 410,-367 407,-370 404,-370"/>
+<text text-anchor="start" x="314" y="-358.8" font-family="Helvetica,sans-Serif" font-size="9.00">ItemViewPopup.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/Subcomponents/ItemViewPopup.tsx -->
-<g id="edge14" class="edge">
+<g id="edge21" 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="M244.81,-336.21C254.27,-345.56 270.14,-359.81 286.5,-368 289.21,-369.36 292.06,-370.6 294.98,-371.74"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="294.69,-373.87 301.05,-373.92 296.11,-369.91 294.69,-373.87"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M250.4,-316.33C261.72,-325.16 279.87,-338.18 297.5,-346 300.89,-347.5 304.45,-348.87 308.08,-350.12"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="307.48,-352.13 313.83,-351.98 308.77,-348.14 307.48,-352.13"/>
 </g>
 <!-- src/Components/Map/Subcomponents/ItemFormPopup.tsx&#45;&gt;src/Components/Map/hooks/useItems.tsx -->
-<g id="edge18" class="edge">
+<g id="edge26" 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="M395.54,-403.98C400.87,-402.3 406.13,-400.32 411,-398 433.16,-387.44 454.99,-369.19 468.58,-356.63"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="470.27,-357.92 473.21,-352.28 467.4,-354.86 470.27,-357.92"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M405.08,-321.98C408.28,-320.31 411.31,-318.33 414,-316 424.98,-306.48 415.47,-294.84 427,-286 463.37,-258.13 484.06,-279.94 529,-271 539.6,-268.89 550.99,-266.22 561.48,-263.58"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="562.26,-265.55 567.55,-262.03 561.22,-261.48 562.26,-265.55"/>
 </g>
 <!-- src/types.ts -->
-<g id="node23" class="node">
+<g id="node28" class="node">
 <title>src/types.ts</title>
-<g id="a_node23"><a xlink:href="src/types.ts" xlink:title="types.ts">
-<path fill="#ddfeff" stroke="black" d="M504.5,-946C504.5,-946 462.5,-946 462.5,-946 459.5,-946 456.5,-943 456.5,-940 456.5,-940 456.5,-934 456.5,-934 456.5,-931 459.5,-928 462.5,-928 462.5,-928 504.5,-928 504.5,-928 507.5,-928 510.5,-931 510.5,-934 510.5,-934 510.5,-940 510.5,-940 510.5,-943 507.5,-946 504.5,-946"/>
-<text text-anchor="start" x="465" y="-934.8" font-family="Helvetica,sans-Serif" font-size="9.00">types.ts</text>
+<g id="a_node28"><a xlink:href="src/types.ts" xlink:title="types.ts">
+<path fill="#ddfeff" stroke="black" d="M495,-830C495,-830 453,-830 453,-830 450,-830 447,-827 447,-824 447,-824 447,-818 447,-818 447,-815 450,-812 453,-812 453,-812 495,-812 495,-812 498,-812 501,-815 501,-818 501,-818 501,-824 501,-824 501,-827 498,-830 495,-830"/>
+<text text-anchor="start" x="455.5" y="-818.8" font-family="Helvetica,sans-Serif" font-size="9.00">types.ts</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Subcomponents/ItemFormPopup.tsx&#45;&gt;src/types.ts -->
-<g id="edge17" class="edge">
+<g id="edge25" 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="M351.64,-422.28C363.06,-451.85 398.11,-546.8 411,-629 413.53,-645.14 408.59,-910.4 419,-923 426.59,-932.19 438.73,-936.18 450.36,-937.7"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="450.2,-939.79 456.37,-938.28 450.6,-935.61 450.2,-939.79"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M408.09,-340.32C410.29,-341.94 412.29,-343.82 414,-346 445,-385.4 400.4,-754.51 427,-797 430.51,-802.61 435.8,-806.98 441.55,-810.35"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="440.64,-812.25 446.93,-813.18 442.6,-808.53 440.64,-812.25"/>
 </g>
-<!-- src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Components/Map/hooks/useItems.tsx -->
-<g id="edge21" class="edge">
-<title>src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Components/Map/hooks/useItems.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M388.83,-373.93C396.24,-372.09 403.88,-370.09 411,-368 424.9,-363.93 440.07,-358.73 452.85,-354.13"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="453.62,-356.09 458.54,-352.07 452.18,-352.14 453.62,-356.09"/>
-</g>
-<!-- src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Components/Map/hooks/useTags.tsx -->
-<g id="edge22" class="edge">
-<title>src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Components/Map/hooks/useTags.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M399,-376.94C403.52,-374.7 407.64,-371.79 411,-368 431.78,-344.57 398.2,-321.41 419,-298 425.23,-290.98 434.08,-286.94 443.2,-284.67"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="443.76,-286.7 449.21,-283.43 442.91,-282.59 443.76,-286.7"/>
-</g>
-<!-- src/Utils/HeighlightTags.ts -->
-<g id="node24" class="node">
-<title>src/Utils/HeighlightTags.ts</title>
-<g id="a_node24"><a xlink:href="src/Utils/HeighlightTags.ts" xlink:title="HeighlightTags.ts">
-<path fill="#ddfeff" stroke="black" d="M524.5,-834C524.5,-834 442.5,-834 442.5,-834 439.5,-834 436.5,-831 436.5,-828 436.5,-828 436.5,-822 436.5,-822 436.5,-819 439.5,-816 442.5,-816 442.5,-816 524.5,-816 524.5,-816 527.5,-816 530.5,-819 530.5,-822 530.5,-822 530.5,-828 530.5,-828 530.5,-831 527.5,-834 524.5,-834"/>
-<text text-anchor="start" x="444.5" y="-822.8" font-family="Helvetica,sans-Serif" font-size="9.00">HeighlightTags.ts</text>
+<!-- src/Components/Map/Subcomponents/HeaderView.tsx -->
+<g id="node27" class="node">
+<title>src/Components/Map/Subcomponents/HeaderView.tsx</title>
+<g id="a_node27"><a xlink:href="src/Components/Map/Subcomponents/HeaderView.tsx" xlink:title="HeaderView.tsx">
+<path fill="#bbfeff" stroke="black" d="M511,-310C511,-310 437,-310 437,-310 434,-310 431,-307 431,-304 431,-304 431,-298 431,-298 431,-295 434,-292 437,-292 437,-292 511,-292 511,-292 514,-292 517,-295 517,-298 517,-298 517,-304 517,-304 517,-307 514,-310 511,-310"/>
+<text text-anchor="start" x="439" y="-298.8" font-family="Helvetica,sans-Serif" font-size="9.00">HeaderView.tsx</text>
 </a>
 </g>
 </g>
-<!-- src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Utils/HeighlightTags.ts -->
-<g id="edge19" class="edge">
-<title>src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Utils/HeighlightTags.ts</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M399.08,-388.59C403.64,-390.91 407.76,-393.97 411,-398 425.36,-415.83 404.62,-792.19 419,-810 422.15,-813.9 426.11,-816.91 430.51,-819.2"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="429.95,-821.25 436.29,-821.75 431.64,-817.41 429.95,-821.25"/>
+<!-- src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Components/Map/Subcomponents/HeaderView.tsx -->
+<g id="edge27" class="edge">
+<title>src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Components/Map/Subcomponents/HeaderView.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M405.08,-351.98C408.28,-350.31 411.31,-348.33 414,-346 424.98,-336.48 416.25,-325.78 427,-316 428.01,-315.08 429.08,-314.22 430.19,-313.41"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="431.36,-315.15 435.32,-310.18 429.13,-311.6 431.36,-315.15"/>
 </g>
-<!-- src/Utils/ReplaceURLs.ts -->
-<g id="node25" class="node">
-<title>src/Utils/ReplaceURLs.ts</title>
-<g id="a_node25"><a xlink:href="src/Utils/ReplaceURLs.ts" xlink:title="ReplaceURLs.ts">
-<path fill="#ddfeff" stroke="black" d="M520.5,-864C520.5,-864 446.5,-864 446.5,-864 443.5,-864 440.5,-861 440.5,-858 440.5,-858 440.5,-852 440.5,-852 440.5,-849 443.5,-846 446.5,-846 446.5,-846 520.5,-846 520.5,-846 523.5,-846 526.5,-849 526.5,-852 526.5,-852 526.5,-858 526.5,-858 526.5,-861 523.5,-864 520.5,-864"/>
-<text text-anchor="start" x="448.5" y="-852.8" font-family="Helvetica,sans-Serif" font-size="9.00">ReplaceURLs.ts</text>
+<!-- src/Components/Map/Subcomponents/StartEndView.tsx -->
+<g id="node29" class="node">
+<title>src/Components/Map/Subcomponents/StartEndView.tsx</title>
+<g id="a_node29"><a xlink:href="src/Components/Map/Subcomponents/StartEndView.tsx" xlink:title="StartEndView.tsx">
+<path fill="#bbfeff" stroke="black" d="M515,-340C515,-340 433,-340 433,-340 430,-340 427,-337 427,-334 427,-334 427,-328 427,-328 427,-325 430,-322 433,-322 433,-322 515,-322 515,-322 518,-322 521,-325 521,-328 521,-328 521,-334 521,-334 521,-337 518,-340 515,-340"/>
+<text text-anchor="start" x="435" y="-328.8" font-family="Helvetica,sans-Serif" font-size="9.00">StartEndView.tsx</text>
 </a>
 </g>
 </g>
-<!-- src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Utils/ReplaceURLs.ts -->
-<g id="edge20" class="edge">
-<title>src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Utils/ReplaceURLs.ts</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M399.08,-388.59C403.65,-390.9 407.76,-393.97 411,-398 426.4,-417.13 403.59,-820.88 419,-840 423.14,-845.13 428.67,-848.71 434.76,-851.16"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="434.12,-853.17 440.48,-853.12 435.48,-849.19 434.12,-853.17"/>
+<!-- src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Components/Map/Subcomponents/StartEndView.tsx -->
+<g id="edge28" class="edge">
+<title>src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Components/Map/Subcomponents/StartEndView.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M393.2,-352C405.6,-348.74 419.72,-345.02 432.61,-341.63"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="433.16,-343.66 438.43,-340.1 432.09,-339.59 433.16,-343.66"/>
+</g>
+<!-- src/Components/Map/Subcomponents/TextView.tsx -->
+<g id="node30" class="node">
+<title>src/Components/Map/Subcomponents/TextView.tsx</title>
+<g id="a_node30"><a xlink:href="src/Components/Map/Subcomponents/TextView.tsx" xlink:title="TextView.tsx">
+<path fill="#bbfeff" stroke="black" d="M503.5,-370C503.5,-370 444.5,-370 444.5,-370 441.5,-370 438.5,-367 438.5,-364 438.5,-364 438.5,-358 438.5,-358 438.5,-355 441.5,-352 444.5,-352 444.5,-352 503.5,-352 503.5,-352 506.5,-352 509.5,-355 509.5,-358 509.5,-358 509.5,-364 509.5,-364 509.5,-367 506.5,-370 503.5,-370"/>
+<text text-anchor="start" x="446.5" y="-358.8" font-family="Helvetica,sans-Serif" font-size="9.00">TextView.tsx</text>
+</a>
+</g>
+</g>
+<!-- src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Components/Map/Subcomponents/TextView.tsx -->
+<g id="edge29" class="edge">
+<title>src/Components/Map/Subcomponents/ItemViewPopup.tsx&#45;&gt;src/Components/Map/Subcomponents/TextView.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M410.33,-361C417.57,-361 424.93,-361 431.95,-361"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="432.27,-363.1 438.27,-361 432.27,-358.9 432.27,-363.1"/>
 </g>
 <!-- src/Components/Map/Subcomponents/AddButton.tsx -->
-<g id="node21" class="node">
+<g id="node25" class="node">
 <title>src/Components/Map/Subcomponents/AddButton.tsx</title>
-<g id="a_node21"><a xlink:href="src/Components/Map/Subcomponents/AddButton.tsx" xlink:title="AddButton.tsx">
-<path fill="#bbfeff" stroke="black" d="M382,-362C382,-362 312,-362 312,-362 309,-362 306,-359 306,-356 306,-356 306,-350 306,-350 306,-347 309,-344 312,-344 312,-344 382,-344 382,-344 385,-344 388,-347 388,-350 388,-350 388,-356 388,-356 388,-359 385,-362 382,-362"/>
-<text text-anchor="start" x="314" y="-350.8" font-family="Helvetica,sans-Serif" font-size="9.00">AddButton.tsx</text>
+<g id="a_node25"><a xlink:href="src/Components/Map/Subcomponents/AddButton.tsx" xlink:title="AddButton.tsx">
+<path fill="#bbfeff" stroke="black" d="M393,-310C393,-310 323,-310 323,-310 320,-310 317,-307 317,-304 317,-304 317,-298 317,-298 317,-295 320,-292 323,-292 323,-292 393,-292 393,-292 396,-292 399,-295 399,-298 399,-298 399,-304 399,-304 399,-307 396,-310 393,-310"/>
+<text text-anchor="start" x="325" y="-298.8" font-family="Helvetica,sans-Serif" font-size="9.00">AddButton.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Subcomponents/AddButton.tsx&#45;&gt;src/Components/Map/hooks/useLayers.tsx -->
-<g id="edge16" class="edge">
+<g id="edge23" 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="M388.19,-349.55C396.21,-347.57 404.24,-344.56 411,-340 416.31,-336.42 413.74,-331.66 419,-328 424.81,-323.96 431.57,-321 438.47,-318.83"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="439.08,-320.84 444.28,-317.19 437.93,-316.8 439.08,-320.84"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M399.05,-294.31C404.25,-292.65 409.37,-290.58 414,-288 421.14,-284.02 419.7,-278.67 427,-275 467.94,-254.42 493.49,-288.95 529,-260 537.06,-253.43 529.23,-244.91 537,-238 542.49,-233.12 549.27,-229.75 556.34,-227.43"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="557.13,-229.39 562.32,-225.73 555.98,-225.35 557.13,-229.39"/>
 </g>
 <!-- src/Utils/DynamicHeroIcon.tsx -->
-<g id="node22" class="node">
+<g id="node26" class="node">
 <title>src/Utils/DynamicHeroIcon.tsx</title>
-<g id="a_node22"><a xlink:href="src/Utils/DynamicHeroIcon.tsx" xlink:title="DynamicHeroIcon.tsx">
-<path fill="#bbfeff" stroke="black" d="M534,-804C534,-804 433,-804 433,-804 430,-804 427,-801 427,-798 427,-798 427,-792 427,-792 427,-789 430,-786 433,-786 433,-786 534,-786 534,-786 537,-786 540,-789 540,-792 540,-792 540,-798 540,-798 540,-801 537,-804 534,-804"/>
-<text text-anchor="start" x="435" y="-792.8" font-family="Helvetica,sans-Serif" font-size="9.00">DynamicHeroIcon.tsx</text>
+<g id="a_node26"><a xlink:href="src/Utils/DynamicHeroIcon.tsx" xlink:title="DynamicHeroIcon.tsx">
+<path fill="#bbfeff" stroke="black" d="M652,-898C652,-898 551,-898 551,-898 548,-898 545,-895 545,-892 545,-892 545,-886 545,-886 545,-883 548,-880 551,-880 551,-880 652,-880 652,-880 655,-880 658,-883 658,-886 658,-886 658,-892 658,-892 658,-895 655,-898 652,-898"/>
+<text text-anchor="start" x="553" y="-886.8" font-family="Helvetica,sans-Serif" font-size="9.00">DynamicHeroIcon.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Subcomponents/AddButton.tsx&#45;&gt;src/Utils/DynamicHeroIcon.tsx -->
-<g id="edge15" class="edge">
+<g id="edge22" class="edge">
 <title>src/Components/Map/Subcomponents/AddButton.tsx&#45;&gt;src/Utils/DynamicHeroIcon.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M388.01,-355.29C396.62,-357.6 404.94,-361.51 411,-368 439.9,-398.93 473.29,-705.97 480.9,-779.32"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="478.85,-779.92 481.56,-785.67 483.03,-779.49 478.85,-779.92"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M399.08,-305.36C404.86,-307.7 410.15,-311.1 414,-316 445.94,-356.63 393.04,-742.03 427,-781 457.19,-815.65 497.5,-764.54 529,-798 552.28,-822.73 514.56,-848.51 537,-874 537.87,-874.99 538.79,-875.92 539.76,-876.79"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="538.89,-878.77 544.95,-880.71 541.43,-875.42 538.89,-878.77"/>
+</g>
+<!-- src/Components/Map/Subcomponents/HeaderView.tsx&#45;&gt;src/Components/Map/hooks/useItems.tsx -->
+<g id="edge24" class="edge">
+<title>src/Components/Map/Subcomponents/HeaderView.tsx&#45;&gt;src/Components/Map/hooks/useItems.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M503.45,-291.96C511.73,-289.21 520.77,-286.09 529,-283 544.22,-277.28 560.98,-270.28 574.46,-264.48"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="575.34,-266.39 580.01,-262.08 573.67,-262.54 575.34,-266.39"/>
+</g>
+<!-- src/Components/Map/Subcomponents/TextView.tsx&#45;&gt;src/Components/Map/hooks/useTags.tsx -->
+<g id="edge32" class="edge">
+<title>src/Components/Map/Subcomponents/TextView.tsx&#45;&gt;src/Components/Map/hooks/useTags.tsx</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M509.54,-358.07C517.01,-355.79 524.11,-352.06 529,-346 548.29,-322.09 517.25,-231.53 537,-208 543.09,-200.74 551.99,-196.62 561.2,-194.37"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="561.81,-196.39 567.27,-193.15 560.98,-192.27 561.81,-196.39"/>
+</g>
+<!-- src/Utils/HeighlightTags.ts -->
+<g id="node31" class="node">
+<title>src/Utils/HeighlightTags.ts</title>
+<g id="a_node31"><a xlink:href="src/Utils/HeighlightTags.ts" xlink:title="HeighlightTags.ts">
+<path fill="#ddfeff" stroke="black" d="M642.5,-838C642.5,-838 560.5,-838 560.5,-838 557.5,-838 554.5,-835 554.5,-832 554.5,-832 554.5,-826 554.5,-826 554.5,-823 557.5,-820 560.5,-820 560.5,-820 642.5,-820 642.5,-820 645.5,-820 648.5,-823 648.5,-826 648.5,-826 648.5,-832 648.5,-832 648.5,-835 645.5,-838 642.5,-838"/>
+<text text-anchor="start" x="562.5" y="-826.8" font-family="Helvetica,sans-Serif" font-size="9.00">HeighlightTags.ts</text>
+</a>
+</g>
+</g>
+<!-- src/Components/Map/Subcomponents/TextView.tsx&#45;&gt;src/Utils/HeighlightTags.ts -->
+<g id="edge30" class="edge">
+<title>src/Components/Map/Subcomponents/TextView.tsx&#45;&gt;src/Utils/HeighlightTags.ts</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M478.67,-370.13C488.01,-393.56 513.03,-457.86 529,-513 562.04,-627.06 589.21,-767.9 597.72,-813.78"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="595.69,-814.33 598.84,-819.85 599.82,-813.57 595.69,-814.33"/>
+</g>
+<!-- src/Utils/ReplaceURLs.ts -->
+<g id="node32" class="node">
+<title>src/Utils/ReplaceURLs.ts</title>
+<g id="a_node32"><a xlink:href="src/Utils/ReplaceURLs.ts" xlink:title="ReplaceURLs.ts">
+<path fill="#ddfeff" stroke="black" d="M638.5,-868C638.5,-868 564.5,-868 564.5,-868 561.5,-868 558.5,-865 558.5,-862 558.5,-862 558.5,-856 558.5,-856 558.5,-853 561.5,-850 564.5,-850 564.5,-850 638.5,-850 638.5,-850 641.5,-850 644.5,-853 644.5,-856 644.5,-856 644.5,-862 644.5,-862 644.5,-865 641.5,-868 638.5,-868"/>
+<text text-anchor="start" x="566.5" y="-856.8" font-family="Helvetica,sans-Serif" font-size="9.00">ReplaceURLs.ts</text>
+</a>
+</g>
+</g>
+<!-- src/Components/Map/Subcomponents/TextView.tsx&#45;&gt;src/Utils/ReplaceURLs.ts -->
+<g id="edge31" class="edge">
+<title>src/Components/Map/Subcomponents/TextView.tsx&#45;&gt;src/Utils/ReplaceURLs.ts</title>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M479.49,-370.31C490.49,-393.66 518.62,-456.82 529,-513 532.34,-531.09 525.41,-829.71 537,-844 541.01,-848.95 546.33,-852.45 552.18,-854.89"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="551.83,-856.99 558.18,-857 553.22,-853.03 551.83,-856.99"/>
 </g>
 <!-- src/Components/Map/Tags.tsx -->
-<g id="node26" class="node">
+<g id="node33" class="node">
 <title>src/Components/Map/Tags.tsx</title>
-<g id="a_node26"><a xlink:href="src/Components/Map/Tags.tsx" xlink:title="Tags.tsx">
-<path fill="#bbfeff" stroke="black" d="M368,-214C368,-214 326,-214 326,-214 323,-214 320,-211 320,-208 320,-208 320,-202 320,-202 320,-199 323,-196 326,-196 326,-196 368,-196 368,-196 371,-196 374,-199 374,-202 374,-202 374,-208 374,-208 374,-211 371,-214 368,-214"/>
-<text text-anchor="start" x="328.5" y="-202.8" font-family="Helvetica,sans-Serif" font-size="9.00">Tags.tsx</text>
+<g id="a_node33"><a xlink:href="src/Components/Map/Tags.tsx" xlink:title="Tags.tsx">
+<path fill="#bbfeff" stroke="black" d="M259,-208C259,-208 217,-208 217,-208 214,-208 211,-205 211,-202 211,-202 211,-196 211,-196 211,-193 214,-190 217,-190 217,-190 259,-190 259,-190 262,-190 265,-193 265,-196 265,-196 265,-202 265,-202 265,-205 262,-208 259,-208"/>
+<text text-anchor="start" x="219.5" y="-196.8" font-family="Helvetica,sans-Serif" font-size="9.00">Tags.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/Tags.tsx&#45;&gt;src/Components/Map/hooks/useTags.tsx -->
-<g id="edge23" class="edge">
+<g id="edge33" 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="M374.08,-209.86C385.8,-212.68 399.55,-216.92 411,-223 434.14,-235.29 456.58,-256 469.97,-269.58"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="468.46,-271.05 474.15,-273.89 471.48,-268.12 468.46,-271.05"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M257.74,-189.98C268.98,-185.07 283.73,-179.5 297.5,-177 398.73,-158.59 426.73,-165.7 529,-177 539.57,-178.17 550.86,-180.28 561.27,-182.59"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="560.97,-184.68 567.29,-183.97 561.91,-180.59 560.97,-184.68"/>
 </g>
 <!-- src/Components/Map/UtopiaMap.css -->
-<g id="node27" class="node">
+<g id="node34" class="node">
 <title>src/Components/Map/UtopiaMap.css</title>
-<g id="a_node27"><a xlink:href="src/Components/Map/UtopiaMap.css" xlink:title="UtopiaMap.css">
-<path fill="#ffffcc" stroke="black" d="M382,-286C382,-286 312,-286 312,-286 309,-286 306,-283 306,-280 306,-280 306,-274 306,-274 306,-271 309,-268 312,-268 312,-268 382,-268 382,-268 385,-268 388,-271 388,-274 388,-274 388,-280 388,-280 388,-283 385,-286 382,-286"/>
-<text text-anchor="start" x="314" y="-274.8" font-family="Helvetica,sans-Serif" font-size="9.00">UtopiaMap.css</text>
+<g id="a_node34"><a xlink:href="src/Components/Map/UtopiaMap.css" xlink:title="UtopiaMap.css">
+<path fill="#ffffcc" stroke="black" d="M393,-422C393,-422 323,-422 323,-422 320,-422 317,-419 317,-416 317,-416 317,-410 317,-410 317,-407 320,-404 323,-404 323,-404 393,-404 393,-404 396,-404 399,-407 399,-410 399,-410 399,-416 399,-416 399,-419 396,-422 393,-422"/>
+<text text-anchor="start" x="325" y="-410.8" font-family="Helvetica,sans-Serif" font-size="9.00">UtopiaMap.css</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/UtopiaMap.tsx -->
-<g id="node28" class="node">
+<g id="node35" class="node">
 <title>src/Components/Map/UtopiaMap.tsx</title>
-<g id="a_node28"><a xlink:href="src/Components/Map/UtopiaMap.tsx" xlink:title="UtopiaMap.tsx">
-<path fill="#bbfeff" stroke="black" d="M269.5,-286C269.5,-286 200.5,-286 200.5,-286 197.5,-286 194.5,-283 194.5,-280 194.5,-280 194.5,-274 194.5,-274 194.5,-271 197.5,-268 200.5,-268 200.5,-268 269.5,-268 269.5,-268 272.5,-268 275.5,-271 275.5,-274 275.5,-274 275.5,-280 275.5,-280 275.5,-283 272.5,-286 269.5,-286"/>
-<text text-anchor="start" x="202.5" y="-274.8" font-family="Helvetica,sans-Serif" font-size="9.00">UtopiaMap.tsx</text>
+<g id="a_node35"><a xlink:href="src/Components/Map/UtopiaMap.tsx" xlink:title="UtopiaMap.tsx">
+<path fill="#bbfeff" stroke="black" d="M272.5,-286C272.5,-286 203.5,-286 203.5,-286 200.5,-286 197.5,-283 197.5,-280 197.5,-280 197.5,-274 197.5,-274 197.5,-271 200.5,-268 203.5,-268 203.5,-268 272.5,-268 272.5,-268 275.5,-268 278.5,-271 278.5,-274 278.5,-274 278.5,-280 278.5,-280 278.5,-283 275.5,-286 272.5,-286"/>
+<text text-anchor="start" x="205.5" y="-274.8" font-family="Helvetica,sans-Serif" font-size="9.00">UtopiaMap.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/hooks/useItems.tsx -->
-<g id="edge25" class="edge">
+<g id="edge35" 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="M261.11,-267.99C269.12,-265.54 278.08,-263.22 286.5,-262 313.88,-258.02 390.29,-243.65 411,-262 433.11,-281.6 399.3,-305.98 419,-328 424.54,-334.19 432.11,-338.06 440.1,-340.44"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="439.93,-342.57 446.26,-341.98 440.95,-338.49 439.93,-342.57"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M252.22,-267.9C263.63,-260.63 280.86,-251.02 297.5,-247 388.3,-225.08 498.88,-236.45 558.14,-245.47"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="558.16,-247.6 564.41,-246.45 558.8,-243.45 558.16,-247.6"/>
 </g>
 <!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/hooks/useLayers.tsx -->
-<g id="edge26" class="edge">
+<g id="edge36" 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="M249.45,-267.83C259.24,-261.72 273.08,-254.25 286.5,-251 313.39,-244.48 389.86,-233.15 411,-251 427.19,-264.67 404.5,-282.55 419,-298 424.15,-303.48 430.9,-307.13 438.07,-309.53"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="437.83,-311.64 444.17,-311.26 438.97,-307.6 437.83,-311.64"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M247.46,-267.67C257.99,-256.75 277.1,-239.13 297.5,-231 383.98,-196.52 495.65,-205.88 556.38,-214.95"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="556.21,-217.05 562.46,-215.88 556.85,-212.9 556.21,-217.05"/>
 </g>
 <!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/hooks/useTags.tsx -->
-<g id="edge27" class="edge">
+<g id="edge37" 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="M243.83,-267.91C252.94,-258.11 268.97,-243.1 286.5,-237 338.76,-218.81 357.91,-221.4 411,-237 432.69,-243.38 454.03,-258.59 467.66,-269.79"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="466.38,-271.45 472.32,-273.7 469.08,-268.24 466.38,-271.45"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M246.41,-267.75C262.15,-248.11 297.5,-204 297.5,-204 342.52,-181.35 489.69,-186.43 561.03,-190.43"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="561.17,-192.54 567.28,-190.79 561.41,-188.35 561.17,-192.54"/>
 </g>
 <!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/Subcomponents/AddButton.tsx -->
-<g id="edge28" class="edge">
+<g id="edge38" 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="M251.39,-286.25C260.5,-292.47 271.58,-301.45 278.5,-312 285.59,-322.83 277.06,-331.14 286.5,-340 290.38,-343.64 295.03,-346.35 300,-348.36"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="299.6,-350.44 305.96,-350.41 300.97,-346.47 299.6,-350.44"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M278.62,-285.06C288.92,-287.15 300.1,-289.43 310.71,-291.59"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="310.58,-293.7 316.88,-292.84 311.42,-289.59 310.58,-293.7"/>
 </g>
 <!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/types.ts -->
-<g id="edge24" class="edge">
+<g id="edge34" class="edge">
 <title>src/Components/Map/UtopiaMap.tsx&#45;&gt;src/types.ts</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M253.26,-286.24C262.55,-292.23 273.18,-300.98 278.5,-312 289.02,-333.76 278.63,-724.15 286.5,-747 318.4,-839.57 336.63,-870.06 419,-923 428.29,-928.97 439.75,-932.42 450.36,-934.41"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="450.23,-936.51 456.49,-935.42 450.91,-932.37 450.23,-936.51"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M278.62,-283.18C282.83,-285.34 286.62,-288.21 289.5,-292 305.93,-313.64 280.38,-759.9 297.5,-781 331.67,-823.13 400.2,-826.52 440.77,-824.33"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="440.93,-826.42 446.79,-823.95 440.67,-822.23 440.93,-826.42"/>
 </g>
 <!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/UtopiaMap.css -->
-<g id="edge29" class="edge">
+<g id="edge39" 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="M275.71,-277C283.56,-277 291.86,-277 299.89,-277"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="299.98,-279.1 305.98,-277 299.98,-274.9 299.98,-279.1"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M278.9,-283.59C282.96,-285.7 286.63,-288.44 289.5,-292 304.46,-310.57 282.01,-380.87 297.5,-399 301.2,-403.32 305.95,-406.45 311.17,-408.69"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="310.61,-410.73 316.97,-410.79 312.04,-406.78 310.61,-410.73"/>
 </g>
 <!-- src/Components/Map/index.tsx -->
-<g id="node29" class="node">
+<g id="node36" class="node">
 <title>src/Components/Map/index.tsx</title>
-<g id="a_node29"><a xlink:href="src/Components/Map/index.tsx" xlink:title="index.tsx">
-<path fill="#bbfeff" stroke="black" d="M175,-311C175,-311 129,-311 129,-311 126,-311 123,-308 123,-305 123,-305 123,-299 123,-299 123,-296 126,-293 129,-293 129,-293 175,-293 175,-293 178,-293 181,-296 181,-299 181,-299 181,-305 181,-305 181,-308 178,-311 175,-311"/>
-<text text-anchor="start" x="131" y="-299.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
+<g id="a_node36"><a xlink:href="src/Components/Map/index.tsx" xlink:title="index.tsx">
+<path fill="#bbfeff" stroke="black" d="M175,-301C175,-301 129,-301 129,-301 126,-301 123,-298 123,-295 123,-295 123,-289 123,-289 123,-286 126,-283 129,-283 129,-283 175,-283 175,-283 178,-283 181,-286 181,-289 181,-289 181,-295 181,-295 181,-298 178,-301 175,-301"/>
+<text text-anchor="start" x="131" y="-289.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Map/index.tsx&#45;&gt;src/Components/Map/Layer.tsx -->
-<g id="edge30" class="edge">
+<g id="edge40" 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.33,-310.74C187.55,-312.66 194.19,-314.71 200.58,-316.69"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="200.02,-318.71 206.37,-318.47 201.25,-314.7 200.02,-318.71"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.44,-297.08C188.5,-298.34 196.14,-299.7 203.43,-301"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="203.17,-303.09 209.44,-302.08 203.91,-298.96 203.17,-303.09"/>
 </g>
 <!-- src/Components/Map/index.tsx&#45;&gt;src/Components/Map/Tags.tsx -->
-<g id="edge31" class="edge">
+<g id="edge41" 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="M160.82,-292.79C168.65,-284 181.39,-270.84 194.5,-262 231.75,-236.89 281.55,-220.92 313.7,-212.46"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="314.6,-214.39 319.89,-210.87 313.55,-210.33 314.6,-214.39"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M161.36,-282.74C176.2,-266.31 207.22,-231.97 224.57,-212.76"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="226.21,-214.08 228.67,-208.22 223.09,-211.26 226.21,-214.08"/>
 </g>
 <!-- src/Components/Map/index.tsx&#45;&gt;src/Components/Map/UtopiaMap.tsx -->
-<g id="edge32" class="edge">
+<g id="edge42" class="edge">
 <title>src/Components/Map/index.tsx&#45;&gt;src/Components/Map/UtopiaMap.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.33,-293.26C187.01,-291.5 193.04,-289.64 198.92,-287.83"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="199.61,-289.81 204.72,-286.04 198.37,-285.8 199.61,-289.81"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.44,-286.92C184.65,-286.35 187.98,-285.75 191.35,-285.15"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="191.88,-287.19 197.41,-284.07 191.14,-283.06 191.88,-287.19"/>
 </g>
 <!-- src/Components/Profile/Settings.tsx -->
-<g id="node30" class="node">
+<g id="node37" class="node">
 <title>src/Components/Profile/Settings.tsx</title>
-<g id="a_node30"><a xlink:href="src/Components/Profile/Settings.tsx" xlink:title="Settings.tsx">
-<path fill="#bbfeff" stroke="black" d="M264.5,-139C264.5,-139 205.5,-139 205.5,-139 202.5,-139 199.5,-136 199.5,-133 199.5,-133 199.5,-127 199.5,-127 199.5,-124 202.5,-121 205.5,-121 205.5,-121 264.5,-121 264.5,-121 267.5,-121 270.5,-124 270.5,-127 270.5,-127 270.5,-133 270.5,-133 270.5,-136 267.5,-139 264.5,-139"/>
-<text text-anchor="start" x="207.5" y="-127.8" font-family="Helvetica,sans-Serif" font-size="9.00">Settings.tsx</text>
+<g id="a_node37"><a xlink:href="src/Components/Profile/Settings.tsx" xlink:title="Settings.tsx">
+<path fill="#bbfeff" stroke="black" d="M267.5,-124C267.5,-124 208.5,-124 208.5,-124 205.5,-124 202.5,-121 202.5,-118 202.5,-118 202.5,-112 202.5,-112 202.5,-109 205.5,-106 208.5,-106 208.5,-106 267.5,-106 267.5,-106 270.5,-106 273.5,-109 273.5,-112 273.5,-112 273.5,-118 273.5,-118 273.5,-121 270.5,-124 267.5,-124"/>
+<text text-anchor="start" x="210.5" y="-112.8" font-family="Helvetica,sans-Serif" font-size="9.00">Settings.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Profile/Settings.tsx&#45;&gt;src/Components/Input/InputText.tsx -->
-<g id="edge33" class="edge">
+<g id="edge43" class="edge">
 <title>src/Components/Profile/Settings.tsx&#45;&gt;src/Components/Input/InputText.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M270.5,-134.7C280.72,-136.1 292.04,-137.64 302.74,-139.1"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="302.72,-141.22 308.95,-139.95 303.29,-137.06 302.72,-141.22"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M257.16,-124C268.69,-130.79 282.67,-141.28 289.5,-155 297.95,-171.96 285.68,-481.19 297.5,-496 301.72,-501.29 307.52,-504.88 313.84,-507.28"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="313.41,-509.35 319.77,-509.18 314.69,-505.35 313.41,-509.35"/>
 </g>
 <!-- src/Components/Profile/Settings.tsx&#45;&gt;src/Components/Input/TextAreaInput.tsx -->
-<g id="edge34" class="edge">
+<g id="edge44" 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="M270.5,-125.3C277.49,-124.34 285,-123.32 292.47,-122.3"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="293.06,-124.34 298.72,-121.45 292.49,-120.18 293.06,-124.34"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M257.15,-124.01C268.66,-130.8 282.64,-141.3 289.5,-155 304.22,-184.42 279.87,-423.22 297.5,-451 302.49,-458.86 310.21,-464.74 318.47,-469.11"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="317.92,-471.18 324.24,-471.9 319.75,-467.4 317.92,-471.18"/>
 </g>
 <!-- src/Components/Templates/TitleCard.tsx -->
-<g id="node31" class="node">
+<g id="node38" class="node">
 <title>src/Components/Templates/TitleCard.tsx</title>
-<g id="a_node31"><a xlink:href="src/Components/Templates/TitleCard.tsx" xlink:title="TitleCard.tsx">
-<path fill="#bbfeff" stroke="black" d="M377.5,-64C377.5,-64 316.5,-64 316.5,-64 313.5,-64 310.5,-61 310.5,-58 310.5,-58 310.5,-52 310.5,-52 310.5,-49 313.5,-46 316.5,-46 316.5,-46 377.5,-46 377.5,-46 380.5,-46 383.5,-49 383.5,-52 383.5,-52 383.5,-58 383.5,-58 383.5,-61 380.5,-64 377.5,-64"/>
-<text text-anchor="start" x="318.5" y="-52.8" font-family="Helvetica,sans-Serif" font-size="9.00">TitleCard.tsx</text>
+<g id="a_node38"><a xlink:href="src/Components/Templates/TitleCard.tsx" xlink:title="TitleCard.tsx">
+<path fill="#bbfeff" stroke="black" d="M388.5,-64C388.5,-64 327.5,-64 327.5,-64 324.5,-64 321.5,-61 321.5,-58 321.5,-58 321.5,-52 321.5,-52 321.5,-49 324.5,-46 327.5,-46 327.5,-46 388.5,-46 388.5,-46 391.5,-46 394.5,-49 394.5,-52 394.5,-52 394.5,-58 394.5,-58 394.5,-61 391.5,-64 388.5,-64"/>
+<text text-anchor="start" x="329.5" y="-52.8" font-family="Helvetica,sans-Serif" font-size="9.00">TitleCard.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Profile/Settings.tsx&#45;&gt;src/Components/Templates/TitleCard.tsx -->
-<g id="edge35" class="edge">
+<g id="edge45" 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="M249.26,-120.74C259.42,-113.65 273.81,-103.66 286.5,-95 300.05,-85.75 315.42,-75.42 327.15,-67.58"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="328.44,-69.24 332.26,-64.16 326.1,-65.75 328.44,-69.24"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M261.35,-105.84C270.21,-102.06 280.42,-97.52 289.5,-93 305.62,-84.98 323.34,-74.95 336.58,-67.22"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="337.85,-68.9 341.96,-64.05 335.72,-65.28 337.85,-68.9"/>
 </g>
 <!-- src/Components/Typography/Subtitle.tsx -->
-<g id="node34" class="node">
+<g id="node41" class="node">
 <title>src/Components/Typography/Subtitle.tsx</title>
-<g id="a_node34"><a xlink:href="src/Components/Typography/Subtitle.tsx" xlink:title="Subtitle.tsx">
-<path fill="#bbfeff" stroke="black" d="M511.5,-64C511.5,-64 455.5,-64 455.5,-64 452.5,-64 449.5,-61 449.5,-58 449.5,-58 449.5,-52 449.5,-52 449.5,-49 452.5,-46 455.5,-46 455.5,-46 511.5,-46 511.5,-46 514.5,-46 517.5,-49 517.5,-52 517.5,-52 517.5,-58 517.5,-58 517.5,-61 514.5,-64 511.5,-64"/>
-<text text-anchor="start" x="457.5" y="-52.8" font-family="Helvetica,sans-Serif" font-size="9.00">Subtitle.tsx</text>
+<g id="a_node41"><a xlink:href="src/Components/Typography/Subtitle.tsx" xlink:title="Subtitle.tsx">
+<path fill="#bbfeff" stroke="black" d="M502,-542C502,-542 446,-542 446,-542 443,-542 440,-539 440,-536 440,-536 440,-530 440,-530 440,-527 443,-524 446,-524 446,-524 502,-524 502,-524 505,-524 508,-527 508,-530 508,-530 508,-536 508,-536 508,-539 505,-542 502,-542"/>
+<text text-anchor="start" x="448" y="-530.8" font-family="Helvetica,sans-Serif" font-size="9.00">Subtitle.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Templates/TitleCard.tsx&#45;&gt;src/Components/Typography/Subtitle.tsx -->
-<g id="edge38" class="edge">
+<g id="edge48" 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="M383.69,-55C402.01,-55 424.37,-55 443.18,-55"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="443.42,-57.1 449.42,-55 443.42,-52.9 443.42,-57.1"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M361.75,-64.38C370.65,-95.15 399.02,-195.89 414,-281 423.15,-332.96 415.48,-347.51 427,-399 436.96,-443.48 456.6,-493.77 466.69,-518.16"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="464.79,-519.06 469.04,-523.78 468.66,-517.44 464.79,-519.06"/>
 </g>
 <!-- src/Components/Profile/index.tsx -->
-<g id="node32" class="node">
+<g id="node39" class="node">
 <title>src/Components/Profile/index.tsx</title>
-<g id="a_node32"><a xlink:href="src/Components/Profile/index.tsx" xlink:title="index.tsx">
-<path fill="#bbfeff" stroke="black" d="M175,-139C175,-139 129,-139 129,-139 126,-139 123,-136 123,-133 123,-133 123,-127 123,-127 123,-124 126,-121 129,-121 129,-121 175,-121 175,-121 178,-121 181,-124 181,-127 181,-127 181,-133 181,-133 181,-136 178,-139 175,-139"/>
-<text text-anchor="start" x="131" y="-127.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
+<g id="a_node39"><a xlink:href="src/Components/Profile/index.tsx" xlink:title="index.tsx">
+<path fill="#bbfeff" stroke="black" d="M175,-124C175,-124 129,-124 129,-124 126,-124 123,-121 123,-118 123,-118 123,-112 123,-112 123,-109 126,-106 129,-106 129,-106 175,-106 175,-106 178,-106 181,-109 181,-112 181,-112 181,-118 181,-118 181,-121 178,-124 175,-124"/>
+<text text-anchor="start" x="131" y="-112.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Profile/index.tsx&#45;&gt;src/Components/Profile/Settings.tsx -->
-<g id="edge36" class="edge">
+<g id="edge46" class="edge">
 <title>src/Components/Profile/index.tsx&#45;&gt;src/Components/Profile/Settings.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.33,-130C185.16,-130 189.15,-130 193.15,-130"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="193.41,-132.1 199.41,-130 193.41,-127.9 193.41,-132.1"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.44,-115C186.19,-115 191.2,-115 196.19,-115"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="196.48,-117.1 202.48,-115 196.48,-112.9 196.48,-117.1"/>
 </g>
 <!-- src/Components/Templates/CardPage.tsx -->
-<g id="node33" class="node">
+<g id="node40" class="node">
 <title>src/Components/Templates/CardPage.tsx</title>
-<g id="a_node33"><a xlink:href="src/Components/Templates/CardPage.tsx" xlink:title="CardPage.tsx">
-<path fill="#bbfeff" stroke="black" d="M267,-50C267,-50 203,-50 203,-50 200,-50 197,-47 197,-44 197,-44 197,-38 197,-38 197,-35 200,-32 203,-32 203,-32 267,-32 267,-32 270,-32 273,-35 273,-38 273,-38 273,-44 273,-44 273,-47 270,-50 267,-50"/>
-<text text-anchor="start" x="205" y="-38.8" font-family="Helvetica,sans-Serif" font-size="9.00">CardPage.tsx</text>
+<g id="a_node40"><a xlink:href="src/Components/Templates/CardPage.tsx" xlink:title="CardPage.tsx">
+<path fill="#bbfeff" stroke="black" d="M270,-50C270,-50 206,-50 206,-50 203,-50 200,-47 200,-44 200,-44 200,-38 200,-38 200,-35 203,-32 206,-32 206,-32 270,-32 270,-32 273,-32 276,-35 276,-38 276,-38 276,-44 276,-44 276,-47 273,-50 270,-50"/>
+<text text-anchor="start" x="208" y="-38.8" font-family="Helvetica,sans-Serif" font-size="9.00">CardPage.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Templates/CardPage.tsx&#45;&gt;src/Components/Templates/TitleCard.tsx -->
-<g id="edge37" class="edge">
+<g id="edge47" 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="M273.24,-45.74C283.15,-47 293.92,-48.37 304.07,-49.66"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="304.07,-51.78 310.29,-50.45 304.6,-47.61 304.07,-51.78"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M276.01,-45.39C288.44,-46.87 302.39,-48.52 315.17,-50.04"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="315.12,-52.15 321.33,-50.77 315.62,-47.98 315.12,-52.15"/>
 </g>
 <!-- src/Components/Templates/index.tsx -->
-<g id="node35" class="node">
+<g id="node42" class="node">
 <title>src/Components/Templates/index.tsx</title>
-<g id="a_node35"><a xlink:href="src/Components/Templates/index.tsx" xlink:title="index.tsx">
+<g id="a_node42"><a xlink:href="src/Components/Templates/index.tsx" xlink:title="index.tsx">
 <path fill="#bbfeff" stroke="black" d="M175,-64C175,-64 129,-64 129,-64 126,-64 123,-61 123,-58 123,-58 123,-52 123,-52 123,-49 126,-46 129,-46 129,-46 175,-46 175,-46 178,-46 181,-49 181,-52 181,-52 181,-58 181,-58 181,-61 178,-64 175,-64"/>
 <text text-anchor="start" x="131" y="-52.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/Components/Templates/index.tsx&#45;&gt;src/Components/Templates/TitleCard.tsx -->
-<g id="edge40" class="edge">
+<g id="edge50" class="edge">
 <title>src/Components/Templates/index.tsx&#45;&gt;src/Components/Templates/TitleCard.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.13,-55.77C185.6,-55.87 190.18,-55.95 194.5,-56 231.83,-56.45 241.17,-56.28 278.5,-56 286.72,-55.94 295.5,-55.84 303.92,-55.72"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="304.3,-57.81 310.27,-55.63 304.24,-53.61 304.3,-57.81"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.13,-55.77C185.6,-55.87 190.18,-55.95 194.5,-56 236.72,-56.51 247.28,-56.31 289.5,-56 297.72,-55.94 306.5,-55.84 314.92,-55.72"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="315.3,-57.81 321.27,-55.63 315.24,-53.61 315.3,-57.81"/>
 </g>
 <!-- src/Components/Templates/index.tsx&#45;&gt;src/Components/Templates/CardPage.tsx -->
-<g id="edge39" class="edge">
+<g id="edge49" class="edge">
 <title>src/Components/Templates/index.tsx&#45;&gt;src/Components/Templates/CardPage.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.33,-50.1C184.31,-49.59 187.39,-49.06 190.49,-48.52"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="191.3,-50.51 196.86,-47.42 190.59,-46.37 191.3,-50.51"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.44,-50.26C185.4,-49.6 189.55,-48.91 193.71,-48.21"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="194.23,-50.26 199.8,-47.2 193.54,-46.11 194.23,-50.26"/>
 </g>
 <!-- src/SampleData/data.js -->
-<g id="node36" class="node">
+<g id="node43" class="node">
 <title>src/SampleData/data.js</title>
-<g id="a_node36"><a xlink:href="src/SampleData/data.js" xlink:title="data.js">
-<path fill="#ccffcc" stroke="black" d="M72,-746C72,-746 30,-746 30,-746 27,-746 24,-743 24,-740 24,-740 24,-734 24,-734 24,-731 27,-728 30,-728 30,-728 72,-728 72,-728 75,-728 78,-731 78,-734 78,-734 78,-740 78,-740 78,-743 75,-746 72,-746"/>
-<text text-anchor="start" x="35.5" y="-734.8" font-family="Helvetica,sans-Serif" font-size="9.00">data.js</text>
+<g id="a_node43"><a xlink:href="src/SampleData/data.js" xlink:title="data.js">
+<path fill="#ccffcc" stroke="black" d="M72,-737C72,-737 30,-737 30,-737 27,-737 24,-734 24,-731 24,-731 24,-725 24,-725 24,-722 27,-719 30,-719 30,-719 72,-719 72,-719 75,-719 78,-722 78,-725 78,-725 78,-731 78,-731 78,-734 75,-737 72,-737"/>
+<text text-anchor="start" x="35.5" y="-725.8" font-family="Helvetica,sans-Serif" font-size="9.00">data.js</text>
 </a>
 </g>
 </g>
 <!-- src/index.css -->
-<g id="node37" class="node">
+<g id="node44" class="node">
 <title>src/index.css</title>
-<g id="a_node37"><a xlink:href="src/index.css" xlink:title="index.css">
-<path fill="#ffffcc" stroke="black" d="M175.5,-796C175.5,-796 128.5,-796 128.5,-796 125.5,-796 122.5,-793 122.5,-790 122.5,-790 122.5,-784 122.5,-784 122.5,-781 125.5,-778 128.5,-778 128.5,-778 175.5,-778 175.5,-778 178.5,-778 181.5,-781 181.5,-784 181.5,-784 181.5,-790 181.5,-790 181.5,-793 178.5,-796 175.5,-796"/>
-<text text-anchor="start" x="130.5" y="-784.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.css</text>
+<g id="a_node44"><a xlink:href="src/index.css" xlink:title="index.css">
+<path fill="#ffffcc" stroke="black" d="M175.5,-830C175.5,-830 128.5,-830 128.5,-830 125.5,-830 122.5,-827 122.5,-824 122.5,-824 122.5,-818 122.5,-818 122.5,-815 125.5,-812 128.5,-812 128.5,-812 175.5,-812 175.5,-812 178.5,-812 181.5,-815 181.5,-818 181.5,-818 181.5,-824 181.5,-824 181.5,-827 178.5,-830 175.5,-830"/>
+<text text-anchor="start" x="130.5" y="-818.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.css</text>
 </a>
 </g>
 </g>
 <!-- src/index.tsx -->
-<g id="node38" class="node">
+<g id="node45" class="node">
 <title>src/index.tsx</title>
-<g id="a_node38"><a xlink:href="src/index.tsx" xlink:title="index.tsx">
-<path fill="#bbfeff" stroke="black" d="M74,-523C74,-523 28,-523 28,-523 25,-523 22,-520 22,-517 22,-517 22,-511 22,-511 22,-508 25,-505 28,-505 28,-505 74,-505 74,-505 77,-505 80,-508 80,-511 80,-511 80,-517 80,-517 80,-520 77,-523 74,-523"/>
-<text text-anchor="start" x="30" y="-511.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
+<g id="a_node45"><a xlink:href="src/index.tsx" xlink:title="index.tsx">
+<path fill="#bbfeff" stroke="black" d="M74,-497C74,-497 28,-497 28,-497 25,-497 22,-494 22,-491 22,-491 22,-485 22,-485 22,-482 25,-479 28,-479 28,-479 74,-479 74,-479 77,-479 80,-482 80,-485 80,-485 80,-491 80,-491 80,-494 77,-497 74,-497"/>
+<text text-anchor="start" x="30" y="-485.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
 </a>
 </g>
 </g>
 <!-- src/index.tsx&#45;&gt;src/Components/AppShell/index.tsx -->
-<g id="edge41" class="edge">
+<g id="edge51" 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="M54.99,-523.22C61.88,-543.47 80.3,-592.76 107,-627 114.12,-636.13 123.81,-644.57 132.29,-651.09"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="131.31,-652.98 137.38,-654.88 133.82,-649.61 131.31,-652.98"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M53.07,-497.03C56.64,-524.04 70.02,-605.73 107,-661 113.34,-670.48 122.79,-678.87 131.31,-685.25"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="130.36,-687.16 136.46,-688.96 132.81,-683.75 130.36,-687.16"/>
 </g>
 <!-- src/index.tsx&#45;&gt;src/Components/Auth/index.tsx -->
-<g id="edge42" class="edge">
+<g id="edge52" 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="M59.86,-523.12C69.95,-534.44 88.37,-553.84 107,-567 112.23,-570.7 118.17,-574.12 123.96,-577.1"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="123.36,-579.15 129.67,-579.94 125.23,-575.39 123.36,-579.15"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M61.16,-497.2C71.93,-507.93 90.44,-526.09 107,-541 115.97,-549.07 126.28,-557.78 134.67,-564.71"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="133.64,-566.59 139.61,-568.78 136.31,-563.34 133.64,-566.59"/>
 </g>
 <!-- src/index.tsx&#45;&gt;src/Components/Gaming/index.tsx -->
-<g id="edge43" class="edge">
+<g id="edge53" class="edge">
 <title>src/index.tsx&#45;&gt;src/Components/Gaming/index.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M80.1,-514C91.5,-514 104.76,-514 116.71,-514"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="116.83,-516.1 122.83,-514 116.83,-511.9 116.83,-516.1"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M80.1,-488C91.5,-488 104.76,-488 116.71,-488"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="116.83,-490.1 122.83,-488 116.83,-485.9 116.83,-490.1"/>
 </g>
 <!-- src/index.tsx&#45;&gt;src/Components/Map/index.tsx -->
-<g id="edge44" class="edge">
+<g id="edge54" class="edge">
 <title>src/index.tsx&#45;&gt;src/Components/Map/index.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M56.25,-504.89C71.7,-471.8 124.95,-357.79 144.08,-316.81"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="146.01,-317.64 146.65,-311.31 142.21,-315.86 146.01,-317.64"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M56.64,-478.81C72.39,-447.63 123.88,-345.69 143.4,-307.04"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="145.42,-307.7 146.25,-301.4 141.67,-305.81 145.42,-307.7"/>
 </g>
 <!-- src/index.tsx&#45;&gt;src/Components/Profile/index.tsx -->
-<g id="edge45" class="edge">
+<g id="edge55" 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="M51.88,-504.89C51.68,-465.04 54.32,-302.91 107,-185 114.09,-169.12 126.89,-153.91 136.85,-143.53"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="138.49,-144.86 141.21,-139.11 135.5,-141.91 138.49,-144.86"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M52.71,-478.71C56.47,-431.02 75.14,-213.55 107,-155 112.91,-144.14 122.93,-134.68 131.91,-127.69"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="133.21,-129.34 136.76,-124.07 130.7,-125.98 133.21,-129.34"/>
 </g>
 <!-- src/index.tsx&#45;&gt;src/Components/Templates/index.tsx -->
-<g id="edge46" class="edge">
+<g id="edge56" class="edge">
 <title>src/index.tsx&#45;&gt;src/Components/Templates/index.tsx</title>
-<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M52.59,-504.66C56.09,-451.3 74.92,-184.82 107,-110 113.85,-94.02 126.67,-78.82 136.71,-68.46"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="138.35,-69.8 141.1,-64.06 135.38,-66.83 138.35,-69.8"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M52.44,-478.83C55.09,-426.46 69.99,-165.05 107,-95 112.78,-84.06 122.78,-74.6 131.8,-67.63"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="133.1,-69.28 136.67,-64.02 130.6,-65.91 133.1,-69.28"/>
 </g>
 <!-- src/index.tsx&#45;&gt;src/index.css -->
-<g id="edge47" class="edge">
+<g id="edge57" 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="M52.25,-523.16C53.53,-555.91 61.22,-669.29 107,-747 113.28,-757.66 123.32,-767.1 132.22,-774.13"/>
-<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="130.97,-775.82 137.02,-777.78 133.52,-772.48 130.97,-775.82"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M53.64,-497.19C62.41,-546.18 103.4,-774.55 107,-781 113.03,-791.8 123.05,-801.25 132.01,-808.25"/>
+<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="130.79,-809.96 136.85,-811.88 133.31,-806.6 130.79,-809.96"/>
 </g>
 </g>
 </svg>
diff --git a/src/Components/AppShell/DialogModal.tsx b/src/Components/AppShell/DialogModal.tsx
index 30ab1d3f..c9577806 100644
--- a/src/Components/AppShell/DialogModal.tsx
+++ b/src/Components/AppShell/DialogModal.tsx
@@ -31,16 +31,18 @@ const DialogModal = ({
   useEffect(() => {
     if (isOpened) {
       ref.current?.showModal();
+      ref.current?.classList.remove("tw-hidden");  
       document.body.classList.add("modal-open"); // prevent bg scroll
     } else {
       ref.current?.close();
+      ref.current?.classList.add("tw-hidden");  
       document.body.classList.remove("modal-open");
     }
   }, [isOpened]);
 
 
   return (
-    <dialog id="signup_modal" className='tw-card tw-shadow-xl tw-absolute tw-right-0 tw-top-0 tw-bottom-0 tw-left-0 tw-m-auto tw-transition-opacity tw-duration-300'
+    <dialog className='tw-card tw-shadow-xl tw-absolute tw-right-0 tw-top-0 tw-bottom-0 tw-left-0 tw-m-auto tw-transition-opacity tw-duration-300'
     
       ref={ref}
       onCancel={onClose}
diff --git a/src/Components/Input/TextAreaInput.tsx b/src/Components/Input/TextAreaInput.tsx
index b629a7b2..b733713b 100644
--- a/src/Components/Input/TextAreaInput.tsx
+++ b/src/Components/Input/TextAreaInput.tsx
@@ -3,9 +3,10 @@ import * as React from "react"
 
 
 type TextAreaProps = {
-    labelTitle: string;
+    labelTitle?: string;
     labelStyle?: string;
     containerStyle?: string;
+    inputStyle?: string;
     defaultValue: string;
     placeholder?: string;
     updateFormValue: (value: string ) => void;
@@ -13,7 +14,7 @@ type TextAreaProps = {
 
 
 
-function TextAreaInput({labelTitle, labelStyle, containerStyle, defaultValue, placeholder, updateFormValue} : TextAreaProps){
+function TextAreaInput({labelTitle, labelStyle, containerStyle, inputStyle, defaultValue, placeholder, updateFormValue} : TextAreaProps){
 
     const [value, setValue] = useState<string>(defaultValue)
 
@@ -28,11 +29,11 @@ function TextAreaInput({labelTitle, labelStyle, containerStyle, defaultValue, pl
     }
 
     return(
-        <div className={`tw-form-control tw-w-full ${containerStyle}`}>
-            <label className="tw-label">
+        <div className={`tw-form-control tw-w-full ${containerStyle? containerStyle : ""}`}>
+            {labelTitle ? <label className="tw-label">
                 <span className={"tw-label-text tw-text-base-content " + labelStyle}>{labelTitle}</span>
-            </label>
-            <textarea value={value} className="tw-textarea tw-textarea-bordered tw-w-full tw-min-h-64" placeholder={placeholder || ""} onChange={(e) => updateInputValue(e.target.value)}></textarea>
+            </label> : ""}
+            <textarea value={value} className={`tw-textarea tw-textarea-bordered tw-w-full tw-leading-5 ${inputStyle? inputStyle : ""}`} placeholder={placeholder || ""} onChange={(e) => updateInputValue(e.target.value)}></textarea>
         </div>
     )
 }
diff --git a/src/Components/Map/Layer.tsx b/src/Components/Map/Layer.tsx
index ea8b2dd1..daa3543f 100644
--- a/src/Components/Map/Layer.tsx
+++ b/src/Components/Map/Layer.tsx
@@ -86,7 +86,7 @@ export const Layer = (props: LayerProps) => {
                     }
                     return (
                         <Marker icon={MarkerIconFactory(props.markerShape, color1, color2, props.markerIcon)} key={place.id} position={[place.position.coordinates[1], place.position.coordinates[0]]}>
-                            <ItemViewPopup item={place} tags={tags} setItemFormPopup={props.setItemFormPopup} />
+                            <ItemViewPopup item={place} setItemFormPopup={props.setItemFormPopup} />
                         </Marker>
                     );
                 })
diff --git a/src/Components/Map/Subcomponents/ItemFormPopup.tsx b/src/Components/Map/Subcomponents/ItemFormPopup.tsx
index fd22d3f1..e2544d44 100644
--- a/src/Components/Map/Subcomponents/ItemFormPopup.tsx
+++ b/src/Components/Map/Subcomponents/ItemFormPopup.tsx
@@ -4,6 +4,8 @@ import { Popup as LeafletPopup, useMap } from 'react-leaflet'
 import { useEffect, useState } from 'react'
 import { useAddItem, useUpdateItem } from '../hooks/useItems'
 import { Geometry, LayerProps, Item, ItemsApi} from '../../../types'
+import TextAreaInput from '../../Input/TextAreaInput'
+import InputText from '../../Input/InputText'
 
 export interface ItemFormPopupProps {
     position: LatLng,
@@ -68,8 +70,8 @@ export default function ItemFormPopup(props: ItemFormPopupProps) {
             position={props.position}>
             <form onSubmit={handleSubmit}>
                 <div className='tw-flex tw-justify-center'><b className="tw-text-xl tw-font-bold">New {props.layer.name}</b></div>
-                <input type="text" placeholder="Name" className="tw-input tw-input-bordered tw-w-full tw-max-w-xs tw-mt-5" value={name} onChange={e => setName(e.target.value)} />
-                <textarea className="tw-textarea tw-textarea-bordered tw-w-full tw-mt-5 tw-leading-5 tw-h-40" placeholder="Text" value={text} onChange={e => setText(e.target.value)}></textarea>
+                <InputText type="text" placeholder="Name" defaultValue={name} updateFormValue={e => setName(e)} />
+                <TextAreaInput placeholder="Text" defaultValue={text} updateFormValue={e => setText(e)} inputStyle='tw-h-40 tw-mt-5'/>
                 <div className='tw-flex tw-justify-center'><button className={spinner ? 'tw-btn tw-loading tw-mt-5 tw-place-self-center' : 'tw-btn tw-mt-5 tw-place-self-center'}>Save</button></div>
             </form>
         </LeafletPopup>
diff --git a/src/Components/Map/Subcomponents/ItemViewPopup.tsx b/src/Components/Map/Subcomponents/ItemViewPopup.tsx
index ad842e4b..0b9e73cb 100644
--- a/src/Components/Map/Subcomponents/ItemViewPopup.tsx
+++ b/src/Components/Map/Subcomponents/ItemViewPopup.tsx
@@ -1,118 +1,33 @@
-import { LatLng } from 'leaflet'
 import * as React from 'react'
 import { Popup as LeafletPopup, useMap } from 'react-leaflet'
-import { Item, Tag } from '../../../types'
-import { replaceURLs } from '../../../Utils/ReplaceURLs'
-import { useRemoveItem } from '../hooks/useItems'
+import { Item} from '../../../types'
 import { ItemFormPopupProps } from './ItemFormPopup'
-import { heighlightTags } from '../../../Utils/HeighlightTags'
-import { useTags } from '../hooks/useTags'
+import {HeaderView} from './HeaderView'
+import StartEndView from './StartEndView'
+import { TextView } from './TextView'
 
 export interface ItemViewPopupProps {
   item: Item,
-  tags: Tag[],
   setItemFormPopup?: React.Dispatch<React.SetStateAction<ItemFormPopupProps | null>>
 }
 
 
 
-const ItemViewPopup = (props: ItemViewPopupProps) => {
+export const ItemViewPopup = (props: ItemViewPopupProps) => {
   const item: Item = props.item;
-  const tags: Tag[] = props.tags;
-  const removeItem = useRemoveItem();
-  
-  const map = useMap();
-
-  const all_tags = useTags();
-
-
-  const removeItemFromMap = (event: React.MouseEvent<HTMLElement>) => {
-    props.item.api?.deleteItem!(props.item.id)
-    .then( () =>  removeItem(item))
-    .then(()=> map.closePopup())
-    .catch(err => console.log(err));
-
-    event.stopPropagation();
-  }
-
-  const openEditPopup = (event: React.MouseEvent<HTMLElement>) => {
-    event.stopPropagation();
-    map.closePopup();
-    if (props.setItemFormPopup)
-      props.setItemFormPopup({ position: new LatLng(item.position.coordinates[1], item.position.coordinates[0]), layer: item.layer, item: item, setItemFormPopup: props.setItemFormPopup })
-  }
 
   return (
     <LeafletPopup maxHeight={377} minWidth={275} maxWidth={275} autoPanPadding={[20, 5]}>
       <div>
-        <div className='tw-grid tw-grid-cols-6'>
-          <div className='tw-col-span-5'>
-            <b className="tw-text-xl tw-font-bold">{item.name}</b>
-          </div>
-          <div className='tw-col-span-1'>
-            {item.api &&
-            <div className="tw-dropdown tw-dropdown-right">
-              <label tabIndex={0} className="tw-btn tw-m-1 tw-bg-white hover:tw-bg-white tw-text-gray-500 hover:tw-text-gray-700 tw-leading-3 tw-border-none tw-min-h-0 tw-h-4">
-                <svg xmlns="http://www.w3.org/2000/svg" className="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor">
-                  <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
-                </svg>
-              </label>
-              <ul tabIndex={0} className="tw-dropdown-content tw-menu tw-p-2 tw-shadow tw-bg-base-100 tw-rounded-box">
-                {item.api.updateItem && <li>
-                  <a className='tw-bg-white hover:tw-bg-gray-300 !tw-text-blue-800 hover:tw-text-gray-700' onClick={openEditPopup}>
-                    <svg xmlns="http://www.w3.org/2000/svg" className="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor">
-                      <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
-                    </svg>
-                  </a>
-                </li>}
-
-                {item.api.deleteItem && <li>
-                  <a className='tw-bg-white hover:tw-bg-gray-300 !tw-text-red-800 hover:tw-text-red-950' onClick={removeItemFromMap}>
-                    <svg xmlns="http://www.w3.org/2000/svg" className="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor">
-                      <path fillRule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clipRule="evenodd" />
-                    </svg>
-                  </a>
-                </li>}
-              </ul>
-            </div>}
-          </div>
-        </div>
+        <HeaderView item={props.item} setItemFormPopup={props.setItemFormPopup}/>
         <div className='tw-overflow-y-auto tw-max-h-72'>
         {item.start && item.end &&
-          <div className="tw-flex tw-flex-row">
-            <div className="basis-2/5">
-              <svg xmlns="http://www.w3.org/2000/svg" className="tw-h-6 tw-w-6 tw-mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-              </svg>
-              <span className='tw-align-middle'>{new Date(item.start).toISOString().substring(0, 10) || ""}</span>
-            </div>
-            <div className="tw-basis-1/5 tw-place-content-center">
-              <span>-</span>
-            </div>
-            <div className="tw-basis-2/5">
-              <svg xmlns="http://www.w3.org/2000/svg" className="tw-h-6 tw-w-6 tw-mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-              </svg>
-              <span className='tw-align-middle tw-leading-6'>{new Date(item.end).toISOString().substring(0, 10) || ""}</span>
-            </div>
-          </div>
+        <StartEndView item={props.item} />
         }
-
-        <p style={{ whiteSpace: "pre-wrap" }} dangerouslySetInnerHTML={{ __html: replaceURLs(heighlightTags(item.text, all_tags)) }} />
-        <p>
-
-          {item.tags &&
-            tags.map((tag: Tag) => (
-              <span className="" style={{ fontWeight: "bold", display: "inline-block", color: "#fff", padding: ".3rem", borderRadius: ".5rem", backgroundColor: tag.color, margin: '.2rem', fontSize: "100%" }} key={tag.id}>#{tag.id}</span>
-            ))
-          }
-        </p>
+        <TextView item={props.item}/>
         </div>
       </div>
     </LeafletPopup>
   )
 }
 
-export { ItemViewPopup };
-
-
diff --git a/src/Components/Map/UtopiaMap.tsx b/src/Components/Map/UtopiaMap.tsx
index c874c5b9..d948e724 100644
--- a/src/Components/Map/UtopiaMap.tsx
+++ b/src/Components/Map/UtopiaMap.tsx
@@ -1,7 +1,7 @@
 import { TileLayer, MapContainer, useMapEvents } from "react-leaflet";
 import "leaflet/dist/leaflet.css";
 import * as React from "react";
-import { Item, Tag, ItemsApi, LayerProps, UtopiaMapProps } from "../../types"
+import { Tag, ItemsApi, LayerProps, UtopiaMapProps } from "../../types"
 import "./UtopiaMap.css"
 import { LatLng } from "leaflet";
 import MarkerClusterGroup from 'react-leaflet-cluster'
@@ -87,4 +87,4 @@ function UtopiaMap({
     );
 }
 
-export { UtopiaMap, Item, Tag, ItemsApi };
\ No newline at end of file
+export { UtopiaMap };
\ No newline at end of file
diff --git a/src/Components/Map/index.tsx b/src/Components/Map/index.tsx
index 48a63634..cb8e53bd 100644
--- a/src/Components/Map/index.tsx
+++ b/src/Components/Map/index.tsx
@@ -1,3 +1,3 @@
-export { UtopiaMap, Item, Tag, ItemsApi } from './UtopiaMap'
+export { UtopiaMap } from './UtopiaMap'
 export { Layer } from './Layer';
 export { Tags } from "./Tags";
\ No newline at end of file
diff --git a/src/Components/Profile/Settings.tsx b/src/Components/Profile/Settings.tsx
index 47d168a6..6eb73c84 100644
--- a/src/Components/Profile/Settings.tsx
+++ b/src/Components/Profile/Settings.tsx
@@ -55,10 +55,6 @@ export function Settings({useAuth}) {
   }
 
 
-  const updateFormValue = (val: string) => {
-    console.log(val)
-  }
-
   return (
     <main className="tw-flex-1 tw-overflow-y-auto tw-overflow-x-hidden tw-pt-8 tw-px-6 tw-bg-base-200 tw-min-w-80 tw-flex tw-justify-center" >
       <div className='tw-w-full xl:tw-max-w-6xl'>
@@ -66,17 +62,17 @@ export function Settings({useAuth}) {
 
 
           <div className="tw-grid tw-grid-cols-1 tw-md:grid-cols-2 tw-gap-6">
-            <InputText labelTitle="Name" defaultValue={user?.first_name ? user.first_name : ""} updateFormValue={(v) => setName(v)} />
+            <InputText placeholder="Name" defaultValue={user?.first_name ? user.first_name : ""} updateFormValue={(v) => setName(v)} />
           </div>
           <div className="tw-grid tw-grid-cols-1 tw-md:grid-cols-1 tw-gap-6 tw-pt-6 tw-pb-6">
-            <TextAreaInput labelTitle="About" defaultValue={user?.description ? user.description : ""} updateFormValue={(v) => setText(v)} />
+            <TextAreaInput placeholder="About me, Contact, #Tags, ..." defaultValue={user?.description ? user.description : ""} updateFormValue={(v) => setText(v)} inputStyle='tw-h-64'/>
           </div>
           <div className="tw-divider" ></div>
 
 
           <div className="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6">
-          <InputText type='email' labelTitle="E-Mail" defaultValue={user?.email ? user.email : ""} updateFormValue={(v) => setEmail(v)} />
-          <InputText type='password' labelTitle="Password" defaultValue={user?.password ? user.password : ""} updateFormValue={(v) => {
+          <InputText type='email' placeholder="E-Mail" defaultValue={user?.email ? user.email : ""} updateFormValue={(v) => setEmail(v)} />
+          <InputText type='password' placeholder="new Password" defaultValue={user?.password ? user.password : ""} updateFormValue={(v) => {
             setPassword(v);
             setPasswordChanged(true);
           }} />
diff --git a/src/index.tsx b/src/index.tsx
index 4f5461e5..d100aae7 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,4 @@
-export { UtopiaMap, Layer, Tags, Item, Tag } from './Components/Map/index';
+export { UtopiaMap, Layer, Tags } from './Components/Map/index';
 export {AppShell, Content, SideBar} from "./Components/AppShell"
 export {AuthProvider, useAuth, LoginPage, SignupPage} from "./Components/Auth"
 export {Settings} from './Components/Profile'