diff --git a/client/icons/spool.svg b/client/icons/spool.svg
new file mode 100644
index 0000000..19047cd
--- /dev/null
+++ b/client/icons/spool.svg
@@ -0,0 +1,95 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   width="235"
+   height="500"
+   viewBox="0 0 235 500"
+   xml:space="preserve"
+   id="svg5"
+   sodipodi:docname="spool.svg"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+   id="namedview5"
+   pagecolor="#ffffff"
+   bordercolor="#000000"
+   borderopacity="0.25"
+   inkscape:showpageshadow="2"
+   inkscape:pageopacity="0.0"
+   inkscape:pagecheckerboard="true"
+   inkscape:deskcolor="#d1d1d1"
+   inkscape:zoom="2.346"
+   inkscape:cx="117.43393"
+   inkscape:cy="250"
+   inkscape:window-width="1350"
+   inkscape:window-height="1237"
+   inkscape:window-x="1189"
+   inkscape:window-y="48"
+   inkscape:window-maximized="0"
+   inkscape:current-layer="svg5" />&#10;<desc
+   id="desc1">Created with Fabric.js 5.3.0</desc>&#10;<defs
+   id="defs1">&#10;</defs>&#10;<g
+   transform="matrix(0.5875748337 0 0 3.9476902309 197.1354865303 250.0467513161)"
+   id="z-gD78pOtWjQii31Q-6Ze">&#10;<path
+   style="stroke: rgb(110,11,48); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(52,52,52); fill-rule: nonzero; opacity: 1;"
+   vector-effect="non-scaling-stroke"
+   transform=" translate(0, 0)"
+   d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z"
+   stroke-linecap="round"
+   id="path1" />&#10;</g>&#10;<g
+   transform="matrix(0.3815761198 0 0 3.4623174046 197.1354865303 250.0467382769)"
+   id="qCAOML5j7kpAVIP3Df73i">&#10;<path
+   style="stroke: rgb(110,11,48); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,0,0); fill-rule: nonzero; opacity: 1;"
+   vector-effect="non-scaling-stroke"
+   transform=" translate(0, 0)"
+   d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z"
+   stroke-linecap="round"
+   id="path2" />&#10;</g>&#10;<g
+   transform="matrix(2.0736420266 0 0 3.3577085856 117.2947215155 250.0467440227)"
+   id="DwEIaQUSPW4DgKfkdPWoC">&#10;<path
+   style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,0,0); fill-rule: nonzero; opacity: 1;"
+   vector-effect="non-scaling-stroke"
+   transform=" translate(-0.000005, 0)"
+   d="M -38.50267 -65.24064 L 38.502680000000005 -65.24064 L 38.502680000000005 65.24064 L -38.50267 65.24064 z"
+   stroke-linecap="round"
+   id="path3" />&#10;</g>&#10;<g
+   transform="matrix(0.5875748337 0 0 3.9476902309 37.4539565008 250.0467440227)"
+   id="OvgM38-6CZm9R47a1TDIX">&#10;<filter
+   id="SVGID_1"
+   y="-0.056899467"
+   height="1.1137989"
+   x="-0.056899467"
+   width="1.271853">&#10;	<feGaussianBlur
+   in="SourceAlpha"
+   stdDeviation="3"
+   id="feGaussianBlur3" />&#10;	<feOffset
+   dx="20"
+   dy="0"
+   result="oBlur"
+   id="feOffset3" />&#10;	<feFlood
+   flood-color="rgb(0,0,0)"
+   flood-opacity="0.67"
+   id="feFlood3" />&#10;	<feComposite
+   in2="oBlur"
+   operator="in"
+   id="feComposite3" />&#10;	<feMerge
+   id="feMerge4">&#10;		<feMergeNode
+   id="feMergeNode3" />&#10;		<feMergeNode
+   in="SourceGraphic"
+   id="feMergeNode4" />&#10;	</feMerge>&#10;</filter>&#10;<path
+   style="stroke: rgb(110,11,48); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(52,52,52); fill-rule: nonzero; opacity: 1;filter: url(#SVGID_1);"
+   vector-effect="non-scaling-stroke"
+   transform=" translate(0, 0)"
+   d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z"
+   stroke-linecap="round"
+   id="path4" />&#10;</g>&#10;<g
+   transform="matrix(0.2435597948 0 0 1.6363849628 37.4539565008 250.0467440227)"
+   id="woBV3Wt7ijQ6puNeMgAQD">&#10;<path
+   style="stroke: rgb(110,11,48); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(17,17,17); fill-rule: nonzero; opacity: 1;"
+   vector-effect="non-scaling-stroke"
+   transform=" translate(0, 0)"
+   d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z"
+   stroke-linecap="round"
+   id="path5" />&#10;</g>&#10;</svg>
diff --git a/client/icons/spoolman.svg b/client/icons/spoolman.svg
new file mode 100644
index 0000000..d396c8f
--- /dev/null
+++ b/client/icons/spoolman.svg
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   width="220"
+   height="220"
+   viewBox="0 0 220 220"
+   xml:space="preserve"
+   id="svg8"
+   sodipodi:docname="spoolman.svg"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+   id="namedview8"
+   pagecolor="#ffffff"
+   bordercolor="#000000"
+   borderopacity="0.25"
+   inkscape:showpageshadow="2"
+   inkscape:pageopacity="0.0"
+   inkscape:pagecheckerboard="true"
+   inkscape:deskcolor="#d1d1d1"
+   inkscape:zoom="5.3318182"
+   inkscape:cx="110"
+   inkscape:cy="136.35124"
+   inkscape:window-width="1898"
+   inkscape:window-height="1360"
+   inkscape:window-x="868"
+   inkscape:window-y="0"
+   inkscape:window-maximized="0"
+   inkscape:current-layer="svg8" />&#10;<desc
+   id="desc1">Created with Fabric.js 5.3.0</desc>&#10;<defs
+   id="defs1">&#10;</defs>&#10;<g
+   transform="matrix(0.9419630011 0 0 0.9419630011 110 110)"
+   id="97_aBJ1JQMj7gfw9xgqJk">&#10;<path
+   style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(220,119,52); fill-rule: nonzero; opacity: 1;"
+   vector-effect="non-scaling-stroke"
+   transform=" translate(0, 0)"
+   d="M -116.77741 -67.23295 C -116.77741 -94.5956 -94.5956 -116.77741 -67.23295 -116.77741 L 67.23295 -116.77741 L 67.23295 -116.77741 C 94.5956 -116.77741 116.77741 -94.5956 116.77741 -67.23295 L 116.77741 67.23295 L 116.77741 67.23295 C 116.77741 94.5956 94.5956 116.77741 67.23295 116.77741 L -67.23295 116.77741 L -67.23295 116.77741 C -94.5956 116.77741 -116.77741 94.5956 -116.77741 67.23295 z"
+   stroke-linecap="round"
+   id="path1" />&#10;</g>&#10;<g
+   transform="matrix(4.0068 0 0 4.0068 110 110)"
+   id="bajrpvpoPMPegFQ9fLbAW">&#10;<path
+   style="stroke: rgb(89,142,199); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(52,52,52); fill-rule: nonzero; opacity: 1;"
+   vector-effect="non-scaling-stroke"
+   transform=" translate(0, 0)"
+   d="M 0 -22.46181 C 12.39892 -22.46181 22.46181 -12.39892 22.46181 0 C 22.46181 12.39892 12.39892 22.46181 0 22.46181 C -12.39892 22.46181 -22.46181 12.39892 -22.46181 0 C -22.46181 -12.39892 -12.39892 -22.46181 0 -22.46181 z"
+   stroke-linecap="round"
+   id="path2" />&#10;</g>&#10;<g
+   transform="matrix(-0.6562947252 0.6562947252 -0.6562947252 -0.6562947252 170 110)"
+   id="uzP7ffSaxXnc8ieJ8GKAi">&#10;<path
+   style="stroke: rgb(255,255,255); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(17,17,17); fill-rule: nonzero; opacity: 1;"
+   vector-effect="non-scaling-stroke"
+   transform=" translate(-7.913e-7, 0.0000091739)"
+   d="M -33.16071 25.30347 C -35.26675 24.713710000000003 -37.021860000000004 23.25476 -37.98653 21.29195 C -38.95121 19.32914 -39.0341 17.04834 -38.21447 15.020669999999999 L -38.21447 15.020669999999999 L -38.21447 15.020669999999999 C -28.42178 -9.205020000000001 -9.211359999999999 -28.41564 15.014230000000005 -38.20859 L 15.047580000000005 -38.22207 L 15.047580000000005 -38.22207 C 17.067020000000007 -39.03841 19.338600000000007 -38.95586 21.293460000000003 -37.995110000000004 C 23.248330000000003 -37.03435 24.701380000000004 -35.286350000000006 25.288750000000004 -33.188840000000006 L 37.998650000000005 12.198379999999993 L 37.998650000000005 12.198379999999993 C 40.03828000000001 19.481909999999992 37.990640000000006 27.299259999999993 32.64228000000001 32.64761999999999 C 27.293920000000007 37.99597999999999 19.476570000000006 40.04361999999999 12.193040000000007 38.00398999999999 z"
+   stroke-linecap="round"
+   id="path3" />&#10;</g>&#10;<g
+   transform="matrix(-0.6562947251 0.6562947251 -0.6562947251 -0.6562947251 158.4921266728 110.0839790702)"
+   id="sLvjm8ckG9Tn4B020NjmX">&#10;<path
+   style="stroke: rgb(255,255,255); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(190,190,190); fill-rule: nonzero; opacity: 1;"
+   vector-effect="non-scaling-stroke"
+   transform=" translate(-0.0000037498, -3.945e-7)"
+   d="M -29.98183 19.80196 L -29.17187 17.09468 L -29.17187 17.09468 C -22.390079999999998 -5.573499999999999 -4.466099999999997 -23.18579 18.31756 -29.568920000000002 L 19.88717 -30.008660000000003 L 29.21402 3.473359999999996 L 29.21402 3.473359999999996 C 31.243070000000003 10.757369999999996 29.183770000000003 18.569419999999994 23.82768 23.906659999999995 C 18.47159 29.243899999999996 10.652330000000001 31.275649999999995 3.375510000000002 29.220929999999996 z"
+   stroke-linecap="round"
+   id="path4" />&#10;</g>&#10;<g
+   transform="matrix(-0.2402205418 -0.8965152669 0.8965152669 -0.2402205418 81.095890411 162.7397260274)"
+   id="itojFe0oOsJTunxHV6_ba">&#10;<path
+   style="stroke: rgb(255,255,255); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(17,17,17); fill-rule: nonzero; opacity: 1;"
+   vector-effect="non-scaling-stroke"
+   transform=" translate(-7.913e-7, 0.0000091739)"
+   d="M -33.16071 25.30347 C -35.26675 24.713710000000003 -37.021860000000004 23.25476 -37.98653 21.29195 C -38.95121 19.32914 -39.0341 17.04834 -38.21447 15.020669999999999 L -38.21447 15.020669999999999 L -38.21447 15.020669999999999 C -28.42178 -9.205020000000001 -9.211359999999999 -28.41564 15.014230000000005 -38.20859 L 15.047580000000005 -38.22207 L 15.047580000000005 -38.22207 C 17.067020000000007 -39.03841 19.338600000000007 -38.95586 21.293460000000003 -37.995110000000004 C 23.248330000000003 -37.03435 24.701380000000004 -35.286350000000006 25.288750000000004 -33.188840000000006 L 37.998650000000005 12.198379999999993 L 37.998650000000005 12.198379999999993 C 40.03828000000001 19.481909999999992 37.990640000000006 27.299259999999993 32.64228000000001 32.64761999999999 C 27.293920000000007 37.99597999999999 19.476570000000006 40.04361999999999 12.193040000000007 38.00398999999999 z"
+   stroke-linecap="round"
+   id="path5" />&#10;</g>&#10;<g
+   transform="matrix(-0.2402205418 -0.8965152669 0.8965152669 -0.2402205418 86.7770990664 152.7316258474)"
+   id="-SRJJg6dkRVX31Lo1Y4pF">&#10;<path
+   style="stroke: rgb(255,255,255); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(190,190,190); fill-rule: nonzero; opacity: 1;"
+   vector-effect="non-scaling-stroke"
+   transform=" translate(-0.0000037498, -3.945e-7)"
+   d="M -29.98183 19.80196 L -29.17187 17.09468 L -29.17187 17.09468 C -22.390079999999998 -5.573499999999999 -4.466099999999997 -23.18579 18.31756 -29.568920000000002 L 19.88717 -30.008660000000003 L 29.21402 3.473359999999996 L 29.21402 3.473359999999996 C 31.243070000000003 10.757369999999996 29.183770000000003 18.569419999999994 23.82768 23.906659999999995 C 18.47159 29.243899999999996 10.652330000000001 31.275649999999995 3.375510000000002 29.220929999999996 z"
+   stroke-linecap="round"
+   id="path6" />&#10;</g>&#10;<g
+   transform="matrix(0.8965152669 0.2402205418 -0.2402205418 0.8965152669 80.6849315069 58.4840992287)"
+   id="Okowo2lxooMVge1Zf9juM">&#10;<path
+   style="stroke: rgb(255,255,255); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(17,17,17); fill-rule: nonzero; opacity: 1;"
+   vector-effect="non-scaling-stroke"
+   transform=" translate(-7.913e-7, 0.0000091739)"
+   d="M -33.16071 25.30347 C -35.26675 24.713710000000003 -37.021860000000004 23.25476 -37.98653 21.29195 C -38.95121 19.32914 -39.0341 17.04834 -38.21447 15.020669999999999 L -38.21447 15.020669999999999 L -38.21447 15.020669999999999 C -28.42178 -9.205020000000001 -9.211359999999999 -28.41564 15.014230000000005 -38.20859 L 15.047580000000005 -38.22207 L 15.047580000000005 -38.22207 C 17.067020000000007 -39.03841 19.338600000000007 -38.95586 21.293460000000003 -37.995110000000004 C 23.248330000000003 -37.03435 24.701380000000004 -35.286350000000006 25.288750000000004 -33.188840000000006 L 37.998650000000005 12.198379999999993 L 37.998650000000005 12.198379999999993 C 40.03828000000001 19.481909999999992 37.990640000000006 27.299259999999993 32.64228000000001 32.64761999999999 C 27.293920000000007 37.99597999999999 19.476570000000006 40.04361999999999 12.193040000000007 38.00398999999999 z"
+   stroke-linecap="round"
+   id="path7" />&#10;</g>&#10;<g
+   transform="matrix(0.8965152669 0.2402205418 -0.2402205418 0.8965152669 86.5115961787 68.4082203385)"
+   id="9DKPKJNmrFA1_5WNxgrse">&#10;<path
+   style="stroke: rgb(255,255,255); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(190,190,190); fill-rule: nonzero; opacity: 1;"
+   vector-effect="non-scaling-stroke"
+   transform=" translate(-0.0000037498, -3.945e-7)"
+   d="M -29.98183 19.80196 L -29.17187 17.09468 L -29.17187 17.09468 C -22.390079999999998 -5.573499999999999 -4.466099999999997 -23.18579 18.31756 -29.568920000000002 L 19.88717 -30.008660000000003 L 29.21402 3.473359999999996 L 29.21402 3.473359999999996 C 31.243070000000003 10.757369999999996 29.183770000000003 18.569419999999994 23.82768 23.906659999999995 C 18.47159 29.243899999999996 10.652330000000001 31.275649999999995 3.375510000000002 29.220929999999996 z"
+   stroke-linecap="round"
+   id="path8" />&#10;</g>&#10;</svg>