diff --git a/resources/public/images/svg/align-center.svg b/resources/public/images/svg/align-center.svg
new file mode 100644
index 000000000..6c560a725
--- /dev/null
+++ b/resources/public/images/svg/align-center.svg
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="500"
+   height="500"
+   viewBox="0 0 500.00001 500.00001"
+   id="svg2"
+   version="1.1"
+   sodipodi:docname="align-center.svg"
+   inkscape:version="0.91 r13725">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     showgrid="false"
+     units="px"
+     inkscape:zoom="0.472"
+     inkscape:cx="-315.67797"
+     inkscape:cy="250"
+     inkscape:window-width="1920"
+     inkscape:window-height="1056"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>
+
+
+          image/svg+xml
+
+
+        </dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <use
+     id="use32130"
+     xlink:href="#symbol16714"
+     transform="matrix(0.48875855,0,0,0.48875855,266.5973,18.208584)"
+     x="0"
+     y="0"
+     width="100%"
+     height="100%" />
+  <path
+     style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:25;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+     d="M 9.0957031 0 C 4.0564559 0 0 4.0564559 0 9.0957031 L 0 60.904297 C 0 65.943544 4.0564559 70 9.0957031 70 L 490.9043 70 C 495.94354 70 500 65.943544 500 60.904297 L 500 9.0957031 C 500 4.0564559 495.94354 0 490.9043 0 L 9.0957031 0 z M 79.011719 146 C 73.972472 146 69.916016 150.05646 69.916016 155.0957 L 69.916016 206.9043 C 69.916016 211.94354 73.972472 216 79.011719 216 L 420.98828 216 C 426.02753 216 430.08398 211.94354 430.08398 206.9043 L 430.08398 155.0957 C 430.08398 150.05646 426.02753 146 420.98828 146 L 79.011719 146 z M 46.171875 290 C 41.132628 290 37.076172 294.05646 37.076172 299.0957 L 37.076172 350.9043 C 37.076172 355.94354 41.132628 360 46.171875 360 L 453.82812 360 C 458.86737 360 462.92383 355.94354 462.92383 350.9043 L 462.92383 299.0957 C 462.92383 294.05646 458.86737 290 453.82812 290 L 46.171875 290 z M 141.51172 430 C 136.47247 430 132.41602 434.05646 132.41602 439.0957 L 132.41602 490.9043 C 132.41602 495.94354 136.47247 500 141.51172 500 L 358.48828 500 C 363.52753 500 367.58398 495.94354 367.58398 490.9043 L 367.58398 439.0957 C 367.58398 434.05646 363.52753 430 358.48828 430 L 141.51172 430 z "
+     id="rect23283" />
+</svg>
diff --git a/resources/public/images/svg/align-justify.svg b/resources/public/images/svg/align-justify.svg
new file mode 100644
index 000000000..5463ad47d
--- /dev/null
+++ b/resources/public/images/svg/align-justify.svg
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="500"
+   height="500"
+   viewBox="0 0 500.00001 500.00001"
+   id="svg2"
+   version="1.1"
+   sodipodi:docname="align-justify.svg"
+   inkscape:version="0.91 r13725">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     showgrid="false"
+     units="px"
+     inkscape:zoom="0.472"
+     inkscape:cx="-315.67797"
+     inkscape:cy="250"
+     inkscape:window-width="1920"
+     inkscape:window-height="1056"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>
+
+
+          image/svg+xml
+
+
+        </dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <use
+     id="use32130"
+     xlink:href="#symbol16714"
+     transform="matrix(0.48875855,0,0,0.48875855,266.5973,18.208584)"
+     x="0"
+     y="0"
+     width="100%"
+     height="100%" />
+  <path
+     style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:25;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+     d="M 9.0957031 0 C 4.0564559 0 0 4.0564559 0 9.0957031 L 0 60.904297 C 0 65.943544 4.0564559 70 9.0957031 70 L 490.9043 70 C 495.94354 70 500 65.943544 500 60.904297 L 500 9.0957031 C 500 4.0564559 495.94354 0 490.9043 0 L 9.0957031 0 z M 9.0957031 146 C 4.0564559 146 0 150.05646 0 155.0957 L 0 206.9043 C 0 211.94354 4.0564559 216 9.0957031 216 L 490.9043 216 C 495.94354 216 500 211.94354 500 206.9043 L 500 155.0957 C 500 150.05646 495.94354 146 490.9043 146 L 9.0957031 146 z M 9.0957031 288 C 4.0564559 288 0 292.05646 0 297.0957 L 0 348.9043 C 0 353.94354 4.0564559 358 9.0957031 358 L 490.9043 358 C 495.94354 358 500 353.94354 500 348.9043 L 500 297.0957 C 500 292.05646 495.94354 288 490.9043 288 L 9.0957031 288 z M 9.0957031 430 C 4.0564559 430 0 434.05646 0 439.0957 L 0 490.9043 C 0 495.94354 4.0564559 500 9.0957031 500 L 490.9043 500 C 495.94354 500 500 495.94354 500 490.9043 L 500 439.0957 C 500 434.05646 495.94354 430 490.9043 430 L 9.0957031 430 z "
+     id="rect23283" />
+</svg>
diff --git a/resources/public/images/svg/align-left.svg b/resources/public/images/svg/align-left.svg
new file mode 100644
index 000000000..cb761ae1f
--- /dev/null
+++ b/resources/public/images/svg/align-left.svg
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="500"
+   height="500"
+   viewBox="0 0 500.00001 500.00001"
+   id="svg2"
+   version="1.1"
+   sodipodi:docname="align-left.svg"
+   inkscape:version="0.91 r13725">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     showgrid="false"
+     units="px"
+     inkscape:zoom="0.472"
+     inkscape:cx="-315.67797"
+     inkscape:cy="250"
+     inkscape:window-width="1920"
+     inkscape:window-height="1056"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>
+
+
+          image/svg+xml
+
+
+        </dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <use
+     id="use32130"
+     xlink:href="#symbol16714"
+     transform="matrix(0.48875855,0,0,0.48875855,266.5973,18.208584)"
+     x="0"
+     y="0"
+     width="100%"
+     height="100%" />
+  <path
+     style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:25;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+     d="M 9.0957031 0 C 4.0564559 0 0 4.0564559 0 9.0957031 L 0 60.904297 C 0 65.943544 4.0564559 70 9.0957031 70 L 490.9043 70 C 495.94354 70 500 65.943544 500 60.904297 L 500 9.0957031 C 500 4.0564559 495.94354 0 490.9043 0 L 9.0957031 0 z M 9.0957031 146 C 4.0564559 146 0 150.05646 0 155.0957 L 0 206.9043 C 0 211.94354 4.0564559 216 9.0957031 216 L 351.07422 216 C 356.11347 216 360.16992 211.94354 360.16992 206.9043 L 360.16992 155.0957 C 360.16992 150.05646 356.11347 146 351.07422 146 L 9.0957031 146 z M 9.0957031 290 C 4.0564559 290 0 294.05646 0 299.0957 L 0 350.9043 C 0 355.94354 4.0564559 360 9.0957031 360 L 416.75195 360 C 421.7912 360 425.84766 355.94354 425.84766 350.9043 L 425.84766 299.0957 C 425.84766 294.05646 421.7912 290 416.75195 290 L 9.0957031 290 z M 9.0957031 430 C 4.0564559 430 0 434.05646 0 439.0957 L 0 490.9043 C 0 495.94354 4.0564559 500 9.0957031 500 L 226.07422 500 C 231.11347 500 235.16992 495.94354 235.16992 490.9043 L 235.16992 439.0957 C 235.16992 434.05646 231.11347 430 226.07422 430 L 9.0957031 430 z "
+     id="rect23283" />
+</svg>
diff --git a/resources/public/images/svg/align-right.svg b/resources/public/images/svg/align-right.svg
new file mode 100644
index 000000000..2f8b89b0e
--- /dev/null
+++ b/resources/public/images/svg/align-right.svg
@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="500"
+   height="500"
+   viewBox="0 0 500.00001 500.00001"
+   id="svg2"
+   version="1.1"
+   sodipodi:docname="align-right.svg"
+   inkscape:version="0.91 r13725">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     showgrid="false"
+     units="px"
+     inkscape:zoom="0.472"
+     inkscape:cx="-315.67797"
+     inkscape:cy="250"
+     inkscape:window-width="1920"
+     inkscape:window-height="1056"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>
+
+
+          image/svg+xml
+
+
+        </dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <use
+     id="use32130"
+     xlink:href="#symbol16714"
+     transform="matrix(0.48875855,0,0,0.48875855,266.5973,18.208584)"
+     x="0"
+     y="0"
+     width="100%"
+     height="100%" />
+  <path
+     style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:25;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+     d="M 490.9043,0 C 495.94354,0 500,4.0564559 500,9.0957031 l 0,51.8085939 C 500,65.943544 495.94354,70 490.9043,70 L 9.0957,70 C 4.05646,70 0,65.943544 0,60.904297 L 0,9.0957031 C 0,4.0564559 4.05646,0 9.0957,0 l 481.8086,0 z m 0,146 c 5.03924,0 9.0957,4.05646 9.0957,9.0957 l 0,51.8086 c 0,5.03924 -4.05646,9.0957 -9.0957,9.0957 l -341.97852,0 c -5.03925,0 -9.0957,-4.05646 -9.0957,-9.0957 l 0,-51.8086 c 0,-5.03924 4.05645,-9.0957 9.0957,-9.0957 l 341.97852,0 z m 0,144 c 5.03924,0 9.0957,4.05646 9.0957,9.0957 l 0,51.8086 c 0,5.03924 -4.05646,9.0957 -9.0957,9.0957 l -407.65625,0 c -5.03925,0 -9.09571,-4.05646 -9.09571,-9.0957 l 0,-51.8086 c 0,-5.03924 4.05646,-9.0957 9.09571,-9.0957 l 407.65625,0 z m 0,140 c 5.03924,0 9.0957,4.05646 9.0957,9.0957 l 0,51.8086 c 0,5.03924 -4.05646,9.0957 -9.0957,9.0957 l -216.97852,0 c -5.03925,0 -9.0957,-4.05646 -9.0957,-9.0957 l 0,-51.8086 c 0,-5.03924 4.05645,-9.0957 9.0957,-9.0957 l 216.97852,0 z"
+     id="rect23283"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/resources/public/images/svg/arrow.svg b/resources/public/images/svg/arrow.svg
index 5933d675b..3f4c3f96c 100644
--- a/resources/public/images/svg/arrow.svg
+++ b/resources/public/images/svg/arrow.svg
@@ -1,17 +1 @@
-<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" width="500" height="500" viewBox="0 0 500 500.00001" id="svg2" version="1.1" sodipodi:docname="arrow.svg">
-  <defs id="defs4"/>
-  <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" showgrid="false" units="px"/>
-  <metadata id="metadata7">
-    <rdf:RDF>
-      <cc:Work rdf:about="">
-        <dc:format>
-          image/svg+xml
-        </dc:format>
-        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g id="layer1" transform="translate(0,-552.36216)">
-    <path d="m138.95104 552.39877c-15.97981-0.91956-29.97031 15.64781-25.60739 31.33414 4.13074 8.64975 24.56735 29.78594 24.56735 29.78594 0 0 124.53922 124.60864 185.12839 188.55293 2.98762 7.37445-5.2414 11.74615-9.09921 16.46818-65.67593 65.77624-134.53948 128.31983-199.74642 194.55784-10.04086 14.0513-0.63252 36.5051 16.6162 38.8691 11.18564 2.1327 21.43639-4.6772 28.26602-12.9034 69.31825-65.46486 137.62693-132.00453 206.41188-198.03973 7.65756-8.14176 16.96875-15.29428 22.61013-25.01415 5.09335-12.02529-1.09218-25.6828-11.04128-33.08286-74.27352-75.37761-148.37953-150.94757-224.06956-224.8979-3.90281-3.30297-8.78051-5.91159-14.03611-5.63009z" id="path4149" sodipodi:nodetypes="ccccccccccccc"/>
-  </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500.00001"><path d="M138.95.037c-15.98-.92-29.97 15.647-25.606 31.334 4.13 8.65 24.567 29.787 24.567 29.787S262.45 185.765 323.04 249.71c2.987 7.374-5.242 11.746-9.1 16.468-65.676 65.776-134.54 128.32-199.746 194.558-10.04 14.05-.633 36.505 16.616 38.87 11.186 2.13 21.436-4.678 28.266-12.905 69.318-65.464 137.627-132.003 206.412-198.038 7.657-8.142 16.97-15.295 22.61-25.015 5.093-12.025-1.092-25.682-11.04-33.082-74.275-75.378-148.38-150.948-224.07-224.898-3.904-3.303-8.78-5.912-14.037-5.63z"/></svg>
\ No newline at end of file
diff --git a/resources/public/images/svg/palette.svg b/resources/public/images/svg/palette.svg
index 77c741048..c416ec938 100644
--- a/resources/public/images/svg/palette.svg
+++ b/resources/public/images/svg/palette.svg
@@ -1,55 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="500"
-   height="500"
-   viewBox="0 0 500.00001 500.00001"
-   id="svg2"
-   version="1.1"
-   sodipodi:docname="palette.svg"
-   inkscape:version="0.91pre3 r13670">
-  <defs
-     id="defs4" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     showgrid="false"
-     units="px"
-     inkscape:zoom="1.3350176"
-     inkscape:cx="144.09749"
-     inkscape:cy="195.36971"
-     inkscape:window-width="1920"
-     inkscape:window-height="1056"
-     inkscape:window-x="0"
-     inkscape:window-y="24"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" />
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>
-
-          image/svg+xml
-
-        </dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <path
-     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:45;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-     d="M 250,-1.1e-6 C 112.23887,-1.1e-6 2e-6,112.23884 2e-6,250 2e-6,387.76115 112.23887,500 250,500 c 34.32966,0 62.73482,-28.40512 62.73482,-62.73481 0,-16.00279 -6.18069,-31.1408 -16.45453,-42.25334 l 0.35113,0.38843 c -1.94829,-2.197 -2.99772,-4.58844 -2.99772,-8.07145 0,-7.11852 5.05452,-12.17302 12.17301,-12.17302 l 44.06821,0 C 432.4674,375.15581 500,307.62319 500,225.03073 500,99.301851 386.23507,-1.0999999e-6 250,-1.0999999e-6 Z m 0,50.5617981 c 111.95469,0 199.43821,79.473693 199.43821,174.468933 0,55.23523 -44.32804,99.56328 -99.56329,99.56328 l -44.06821,0 c -34.32967,0 -62.73481,28.40515 -62.73481,62.73482 0,15.74297 5.94329,30.58048 15.73034,41.61692 l 0.17337,0.19751 0.17775,0.19092 c 1.96087,2.12094 3.01966,4.45813 3.01966,7.93101 0,7.11852 -5.05449,12.17301 -12.17302,12.17301 C 139.57139,449.4382 50.5618,360.42861 50.5618,250 50.5618,139.57138 139.57139,50.561797 250,50.561797 Z m -62.60094,23.009571 a 38.294323,38.294323 0 0 0 -38.29442,38.294412 38.294323,38.294323 0 0 0 38.29442,38.29442 38.294323,38.294323 0 0 0 38.29441,-38.29442 38.294323,38.294323 0 0 0 -38.29441,-38.294412 z m 125.4038,1.683191 a 38.294323,38.294323 0 0 0 -38.29443,38.294431 38.294323,38.294323 0 0 0 38.29443,38.29441 38.294323,38.294323 0 0 0 38.29441,-38.29441 38.294323,38.294323 0 0 0 -38.29441,-38.294431 z m 74.06512,98.470431 a 38.294323,38.294323 0 0 0 -38.29442,38.29441 38.294323,38.294323 0 0 0 38.29442,38.29442 38.294323,38.294323 0 0 0 38.29443,-38.29442 38.294323,38.294323 0 0 0 -38.29443,-38.29441 z m -273.53187,0.84269 a 38.294323,38.294323 0 0 0 -38.294412,38.29442 38.294323,38.294323 0 0 0 38.294412,38.29441 38.294323,38.294323 0 0 0 38.29443,-38.29441 38.294323,38.294323 0 0 0 -38.29443,-38.29442 z"
-     id="path20089"
-     inkscape:connector-curvature="0" />
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500.00001 500.00001"><path d="M250 0C112.24 0 0 112.24 0 250s112.24 250 250 250c34.33 0 62.735-28.405 62.735-62.735 0-16.003-6.18-31.14-16.454-42.253l.35.388c-1.946-2.197-2.997-4.588-2.997-8.07 0-7.12 5.055-12.174 12.173-12.174h44.07c82.59 0 150.123-67.533 150.123-150.125C500 99.303 386.233 0 250 0zm0 50.562c111.955 0 199.44 79.474 199.44 174.47 0 55.234-44.33 99.562-99.565 99.562h-44.068c-34.33 0-62.735 28.405-62.735 62.735 0 15.742 5.944 30.58 15.73 41.616l.16.18.157.182c1.962 2.12 3.018 4.458 3.018 7.93 0 7.12-5.054 12.174-12.173 12.174-110.428 0-199.438-89.01-199.438-199.438 0-110.43 89.01-199.44 199.438-199.44zm-62.6 23.01a38.294 38.294 0 0 0-38.295 38.294A38.294 38.294 0 0 0 187.4 150.16a38.294 38.294 0 0 0 38.294-38.294A38.294 38.294 0 0 0 187.4 73.57zm125.404 1.682a38.294 38.294 0 0 0-38.295 38.294 38.294 38.294 0 0 0 38.294 38.295 38.294 38.294 0 0 0 38.294-38.295 38.294 38.294 0 0 0-38.294-38.294zm74.065 98.47a38.294 38.294 0 0 0-38.296 38.295 38.294 38.294 0 0 0 38.295 38.293 38.294 38.294 0 0 0 38.293-38.294 38.294 38.294 0 0 0-38.294-38.296zm-273.533.845a38.294 38.294 0 0 0-38.295 38.293 38.294 38.294 0 0 0 38.295 38.294 38.294 38.294 0 0 0 38.294-38.294 38.294 38.294 0 0 0-38.293-38.294z" style="line-height:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;text-transform:none;block-progression:tb;isolation:auto;mix-blend-mode:normal" color="#000" font-family="sans-serif" white-space="normal" overflow="visible" solid-color="#000000"/></svg>
\ No newline at end of file
diff --git a/resources/public/images/svg/pencil.svg b/resources/public/images/svg/pencil.svg
index 35729c812..cce64e240 100644
--- a/resources/public/images/svg/pencil.svg
+++ b/resources/public/images/svg/pencil.svg
@@ -1,17 +1 @@
-<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" width="500" height="500" viewBox="0 0 499.99999 500.00001" id="svg2" version="1.1" sodipodi:docname="pencil.svg">
-  <defs id="defs4"/>
-  <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" showgrid="false" borderlayer="true" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0" units="px"/>
-  <metadata id="metadata7">
-    <rdf:RDF>
-      <cc:Work rdf:about="">
-        <dc:format>
-          image/svg+xml
-        </dc:format>
-        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g id="layer1" transform="translate(771.30239,-356.33953)">
-    <path d="M380.46484 0L24.412109 356.04297 23.611328 360.75977 0 500 143.95703 475.58789 500 119.53516 380.46484 0zM380.46484 42.425781L410.10547 72.066406 89.792969 392.37109 60.152344 362.73047 380.46484 42.425781zM427.7832 89.744141L457.57422 119.53516 137.26953 439.84766 107.4707 410.04883 427.7832 89.744141zM49.513672 387.44727L112.55078 450.48438 60.949219 459.23438 40.660156 439.6543 49.513672 387.44727z" transform="translate(-771.30239,356.33953)" id="path20135" style="baseline-shift:baseline;block-progression:tb;color-interpolation-filters:linearRGB;color-interpolation:sRGB;color-rendering:auto;direction:ltr;fill:#000;font-family:sans-serif;font-size:medium;image-rendering:auto;isolation:auto;letter-spacing:normal;line-height:normal;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;solid-opacity:1;text-align:start;text-anchor:start;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-decoration:none;text-indent:0;text-rendering:auto;text-transform:none;white-space:normal;word-spacing:normal;writing-mode:lr-tb"/>
-  </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 499.99999 500.00001"><path d="M380.465 0L24.412 356.043l-.8 4.717L0 500l143.957-24.412L500 119.535 380.465 0zm0 42.426l29.64 29.64L89.793 392.37l-29.64-29.64L380.464 42.426zm47.318 47.318l29.79 29.79L137.27 439.85l-29.8-29.8L427.784 89.745zM49.513 387.447l63.038 63.037-51.6 8.75-20.29-19.58 8.854-52.207z" style="block-progression:tb;isolation:auto;line-height:normal;mix-blend-mode:normal;text-align:start;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-transform:none" font-family="sans-serif" solid-color="#000000" white-space="normal"/></svg>
\ No newline at end of file
diff --git a/resources/public/images/svg/plus.svg b/resources/public/images/svg/plus.svg
index 61f3bbfcd..af397b01d 100644
--- a/resources/public/images/svg/plus.svg
+++ b/resources/public/images/svg/plus.svg
@@ -1,17 +1 @@
-<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" width="500" height="500" viewBox="0 0 500 500" id="svg2" version="1.1" sodipodi:docname="plus.svg">
-  <defs id="defs4"/>
-  <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" showgrid="false" units="px"/>
-  <metadata id="metadata7">
-    <rdf:RDF>
-      <cc:Work rdf:about="">
-        <dc:format>
-          image/svg+xml
-        </dc:format>
-        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g id="layer1" transform="translate(0,-552.36216)">
-    <path id="path4149" d="m254.83206 1051.8787c-2.65759 0.6446-7.00641 0.6446-9.66407 0-5.77272-1.4-13.14681-8.2641-14.84551-13.8188-0.64086-2.0956-1.13697-50.68291-1.10251-107.97192 0.0345-57.28903-0.56181-104.78648-1.32503-105.5499-0.76322-0.76342-48.24831-1.35984-105.52242-1.32537-57.274094 0.0345-105.848829-0.46179-107.943842-1.10281-2.095015-0.641-5.7968829-3.15684-8.2263775-5.59077-8.2697477-8.28472-8.2697131-19.89906 0-28.18382 2.4299131-2.4335 6.1313615-4.94977 8.2263775-5.59077 2.095016-0.64101 50.66975-1.13727 107.943842-1.1028 57.27411 0.0345 104.7592-0.56195 105.52242-1.32538 0.76322-0.76342 1.35948-48.26087 1.32503-105.54989-0.0345-57.28901 0.46168-105.87639 1.10252-107.97196 0.64083-2.09555 3.15602-5.79839 5.58931-8.22852 8.28279-8.27168 19.89389-8.27186 28.17649 0 2.43287 2.43055 4.94848 6.13297 5.58931 8.22852 0.64085 2.09557 1.13698 50.68295 1.10252 107.97196-0.0345 57.28901 0.56181 104.78647 1.32503 105.54989 0.76322 0.76343 48.24831 1.35984 105.52241 1.32539 57.2741-0.0345 105.84882 0.46176 107.94383 1.10278 2.09504 0.64101 5.79694 3.1569 8.22638 5.59077 8.26952 8.28494 8.26976 19.8991 0 28.18383-2.43138 2.43202-6.13137 4.94974-8.22634 5.5908-2.09503 0.64098-50.66977 1.13725-107.94386 1.10278-57.27411-0.0345-104.7592 0.56195-105.52242 1.32537-0.76322 0.76342-1.35948 48.26087-1.32504 105.54989 0.0345 57.28902-0.46166 105.87643-1.10248 107.97203-1.69867 5.5546-9.07281 12.4187-14.84557 13.8187z"/>
-  </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500"><path d="M254.832 499.517c-2.658.644-7.006.644-9.664 0-5.773-1.4-13.147-8.265-14.846-13.82-.64-2.095-1.136-50.682-1.102-107.97.034-57.29-.562-104.788-1.325-105.55-.763-.765-48.248-1.36-105.522-1.326-57.275.035-105.85-.46-107.944-1.102-2.096-.64-5.798-3.157-8.228-5.59-8.27-8.286-8.27-19.9 0-28.185 2.43-2.433 6.132-4.95 8.227-5.59 2.094-.642 50.668-1.138 107.943-1.103 57.274.034 104.76-.562 105.522-1.326.763-.763 1.36-48.26 1.325-105.55-.035-57.29.462-105.876 1.102-107.972.64-2.095 3.157-5.798 5.59-8.228 8.283-8.272 19.894-8.272 28.176 0 2.433 2.43 4.95 6.133 5.59 8.228.64 2.096 1.137 50.683 1.102 107.972-.034 57.29.562 104.787 1.325 105.55.763.764 48.248 1.36 105.523 1.326 57.274-.035 105.848.46 107.943 1.102 2.096.64 5.798 3.157 8.228 5.59 8.27 8.286 8.27 19.9 0 28.185-2.432 2.432-6.132 4.95-8.227 5.59-2.094.642-50.668 1.138-107.942 1.104-57.275-.034-104.76.562-105.523 1.326-.763.763-1.36 48.26-1.325 105.55.035 57.29-.462 105.876-1.102 107.972-1.7 5.554-9.073 12.42-14.846 13.82z"/></svg>
\ No newline at end of file
diff --git a/resources/public/images/svg/puzzle-plus.svg b/resources/public/images/svg/puzzle-plus.svg
deleted file mode 100644
index e177ee5b3..000000000
--- a/resources/public/images/svg/puzzle-plus.svg
+++ /dev/null
@@ -1,56 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="500"
-   height="500"
-   viewBox="0 0 500.00001 500.00001"
-   id="svg2"
-   version="1.1"
-   sodipodi:docname="puzzle-plus.svg"
-   inkscape:version="0.91 r13725">
-  <defs
-     id="defs4" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     showgrid="false"
-     units="px"
-     inkscape:zoom="0.472"
-     inkscape:cx="111.8112"
-     inkscape:cy="-8.6389782"
-     inkscape:window-width="1920"
-     inkscape:window-height="1056"
-     inkscape:window-x="0"
-     inkscape:window-y="24"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" />
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>
-
-
-          image/svg+xml
-
-
-        </dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="M 316.16211 0 C 315.11216 -0.0060704812 314.05776 0.018105234 313 0.072265625 C 281.35422 0.14803563 251.88674 27.343934 250.75195 59.460938 C 249.3499 80.499212 260.04789 99.045485 268.81641 117.28906 C 270.35021 120.96958 271.46339 124.80986 272.26562 128.71289 C 231.4101 130.62187 190.21663 127.68757 149.61719 131.67383 C 135.829 135.62827 128.66397 151.14707 130.3457 164.62695 C 128.91306 200.70992 129.92 236.9652 128.76367 273.10742 C 105.68596 268.65046 87.217698 249.04712 62.734375 250.68164 C 29.439996 251.15484 -0.8524493 281.11172 0.15625 314.84766 C 0.0318565 343.88387 21.720097 371.74569 50.667969 377.13086 C 68.85685 381.31379 87.811281 376.26077 103.46094 366.73242 C 111.42719 362.67 119.59551 358.72009 128.4375 356.99414 C 130.73833 397.75494 127.47991 438.88651 131.91797 479.36523 C 133.44892 485.78561 136.35121 492.50616 143.12305 494.75586 C 158.95691 502.85551 177.24848 498.27397 194.24219 499.71289 C 206.06558 499.7034 217.88854 499.71483 229.71289 499.73633 L 229.71289 462.08594 C 209.69057 462.02077 189.67032 461.94881 169.6582 461.88086 C 165.37254 460.0907 168.77348 454.52497 167.55664 451.16797 C 166.39637 414.71423 168.3709 378.12435 166.14453 341.75781 C 162.66944 326.2466 146.0359 316.50405 130.80078 318.89258 C 108.19475 319.75867 88.799757 333.62714 67.837891 340.81836 C 51.430478 343.77945 34.550179 327.87176 38.011719 311.16992 C 40.376217 294.75824 60.824194 282.33248 75.712891 291.60156 C 96.964501 302.02786 120.27281 315.18181 144.83398 309.87305 C 157.5416 306.77725 167.43961 294.44286 166.16602 281.13281 C 167.69228 243.41221 166.46307 205.51793 168.02344 167.74414 C 209.24939 166.07753 250.84193 169.10432 291.76367 164.75 C 303.6793 161.37122 310.59681 149.03423 310.29102 137.13086 C 311.78338 114.53144 299.36728 93.704918 289.89844 73.847656 C 284.51369 59.872612 292.77438 41.695928 308.06445 38.847656 C 310.45727 38.196487 312.92724 37.798061 315.41016 37.789062 C 333.87045 38.168087 347.87145 61.979365 336.78516 77.597656 C 325.85753 99.016303 313.29855 123.28646 320.06641 147.71094 C 324.76289 160.95883 339.63791 168.28043 353.16992 166.40234 C 389.15139 167.55611 425.16341 166.73641 461.14453 167.91602 C 461.77538 190.54628 462.00421 213.18577 461.97266 235.82422 L 499.63086 235.82422 C 499.89288 208.66027 500.19695 181.49662 499 154.38867 C 496.60284 141.4405 485.06703 129.93937 471.44531 130.87695 C 438.99744 128.38196 406.38875 130.25165 373.86133 129.20898 C 367.97757 129.27648 362.05817 129.20748 356.25586 128.11523 C 361.23588 104.98096 380.50175 85.815659 378.35156 61.261719 C 377.13307 28.915868 348.7104 0.18818492 316.16211 0 z M 358.71484 215.04297 C 358.16878 215.01912 357.61839 215.02056 357.06641 215.04688 C 343.7825 215.26146 334.25122 229.94079 337.11914 242.40039 C 336.61528 273.42752 337.15824 304.46289 336.50195 335.48828 C 300.56983 336.86658 264.2402 333.75712 228.44922 337.6543 C 213.74634 343.53398 211.84079 367.88318 226.82031 374.61328 C 238.55373 380.27696 251.84346 376.06142 264.25195 377.61328 C 288.35665 377.74907 312.46505 377.50401 336.56641 378.02539 C 337.93371 413.94911 334.86287 450.28126 338.70703 486.07422 C 344.59866 500.91979 369.19148 502.61975 375.82422 487.5 C 381.33328 476.18564 377.00424 463.32176 378.67969 451.375 C 378.83431 426.90448 378.56917 402.43017 379.0957 377.96289 C 415.02913 376.58144 451.36004 379.69307 487.15234 375.79688 C 501.85238 369.91499 503.76141 345.56872 488.78125 338.83789 C 477.04783 333.17421 463.7581 337.38975 451.34961 335.83789 C 427.24884 335.69787 403.14435 335.94392 379.04688 335.42578 C 377.93732 299.89521 380.16101 264.21955 377.38086 228.77539 C 374.31173 221.27346 366.90583 215.40072 358.71484 215.04297 z "
-     id="path20322" />
-</svg>
diff --git a/resources/public/images/svg/radius.svg b/resources/public/images/svg/radius.svg
new file mode 100644
index 000000000..1c4de5972
--- /dev/null
+++ b/resources/public/images/svg/radius.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500.00001 500.00001"><path d="M498.24 500v-97.612H397.303V500H498.24zM500 341.275v-77.97C500 118.32 382.022 0 237.452 0h-76.47v102.255h76.47c89.847 0 160.587 70.944 160.587 161.05v77.97H500zM100.935 100.512V2.902H0v97.61h100.935z" style="line-height:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;text-transform:none;block-progression:tb;isolation:auto;mix-blend-mode:normal" color="#000" font-family="sans-serif" white-space="normal" overflow="visible" solid-color="#000000"/></svg>
\ No newline at end of file
diff --git a/resources/public/index.html b/resources/public/index.html
index 1f9b6f2d1..58f9dac42 100644
--- a/resources/public/index.html
+++ b/resources/public/index.html
@@ -6,6 +6,6 @@
   <body>
     <section id="app" tabindex="1">
     </section>
-    <script src="/js/main.js"></script>
+    <script src="/js/compiled/uxbox.js" type="text/javascript"></script>
   </body>
 </html>
diff --git a/resources/public/styles/framework.scss b/resources/public/styles/framework.scss
index be86c5de6..670d98833 100644
--- a/resources/public/styles/framework.scss
+++ b/resources/public/styles/framework.scss
@@ -649,6 +649,98 @@ input[type=checkbox]:checked + label{
 
 }
 
+// Input slidebar
+
+input[type=range] {
+  background-color: transparent;
+  -webkit-appearance: none;
+  margin: 10px 0;
+  width: 100%;
+}
+input[type=range]:focus {
+  outline: none;
+}
+input[type=range]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 8px;
+  cursor: pointer;
+  animate: 0.2s;
+  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+  background: darken($color-gray-darker, 12%);
+  border-radius: 25px;
+  border: 0px solid #000101;
+}
+input[type=range]::-webkit-slider-thumb {
+  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+  border: 0px solid #000000;
+  height: 24px;
+  width: 8px;
+  border-radius: 7px;
+  background: $color-gray-lighter;
+  cursor: pointer;
+  -webkit-appearance: none;
+  margin-top: -8px;
+}
+input[type=range]:focus::-webkit-slider-runnable-track {
+  background: darken($color-gray-darker, 12%);
+}
+input[type=range]::-moz-range-track {
+  width: 100%;
+  height: 8px;
+  cursor: pointer;
+  animate: 0.2s;
+  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+  background: darken($color-gray-darker, 12%);
+  border-radius: 25px;
+  border: 0px solid #000101;
+}
+input[type=range]::-moz-range-thumb {
+  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+  border: 0px solid #000000;
+  height: 24px;
+  width: 8px;
+  border-radius: 7px;
+  background: $color-gray-lighter;
+  cursor: pointer;
+}
+input[type=range]::-ms-track {
+  width: 100%;
+  height: 8px;
+  cursor: pointer;
+  animate: 0.2s;
+  background: transparent;
+  border-color: transparent;
+  border-width: 39px 0;
+  color: transparent;
+}
+input[type=range]::-ms-fill-lower {
+  background: darken($color-gray-darker, 12%);
+  border: 0px solid #000101;
+  border-radius: 50px;
+  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+}
+input[type=range]::-ms-fill-upper {
+  background: darken($color-gray-darker, 12%);
+  border: 0px solid #000101;
+  border-radius: 50px;
+  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+}
+input[type=range]::-ms-thumb {
+  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+  border: 0px solid #000000;
+  height: 24px;
+  width: 8px;
+  border-radius: 7px;
+  background: $color-gray-lighter;
+  cursor: pointer;
+}
+input[type=range]:focus::-ms-fill-lower {
+  background: darken($color-gray-darker, 12%);
+}
+input[type=range]:focus::-ms-fill-upper {
+  background: darken($color-gray-darker, 12%);
+}
+
 // Scroll bar (chrome)
 
 ::-webkit-scrollbar {
diff --git a/resources/public/styles/main.scss b/resources/public/styles/main.scss
index 2c8341b04..72ea0a9f8 100644
--- a/resources/public/styles/main.scss
+++ b/resources/public/styles/main.scss
@@ -41,3 +41,4 @@
 @import 'partials/dashboard-grid';
 @import 'partials/activity-bar';
 @import 'partials/lightbox';
+@import 'partials/color-palette';
diff --git a/resources/public/styles/partials/color-palette.scss b/resources/public/styles/partials/color-palette.scss
new file mode 100644
index 000000000..f0461797f
--- /dev/null
+++ b/resources/public/styles/partials/color-palette.scss
@@ -0,0 +1,208 @@
+.color-palette {
+  align-items: center;
+  background-color: $color-white;
+  border-top: 1px solid $color-gray-lighter;
+  bottom: 0;
+  box-sizing: border-box;
+  display: flex;
+  left: 0;
+  padding: 1rem;
+  position: absolute;
+  width: 100%;
+  z-index: 10;
+  .right-arrow,
+  .left-arrow {
+    cursor: pointer;
+    svg {
+      fill: $color-gray-light;
+      height: 30px;
+      margin: 0 .5rem;
+      width: 30px;
+    }
+    &:hover {
+      svg {
+        fill: $color-gray-darker;
+      }
+    }
+  }
+  .left-arrow {
+    transform: rotate(180deg);
+  }
+}
+.color-palette-actions {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  margin-right: .5rem;
+  width: 200px;
+  .color-palette-buttons {
+    align-items: center;
+    display: flex;
+    justify-content: space-around;
+  }
+}
+
+.btn-palette {
+  align-items: center;
+  border: 2px solid $color-gray-lighter;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  padding: .6rem;
+  svg {
+    fill: $color-gray-lighter;
+    height: 20px;
+    width: 20px;
+  }
+  &:hover {
+    border-color: $color-gray-dark;
+    svg {
+      fill: $color-gray-dark;
+    }
+  }
+  &.current {
+    background-color: $color-primary;
+    border-color: $color-white;
+    svg {
+      fill: $color-white;
+    }
+  }
+}
+
+.color-palette-content {
+  align-items: center;
+  display: flex;
+  width: 100%;
+}
+
+.color-cell {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  margin: 0 .6rem;
+  position: relative;
+  .color {
+    background-color: $color-gray-lighter;
+    border: 3px solid $color-white;
+    border-radius: 50%;
+    flex-shrink: 0;
+    margin-bottom: .4rem;
+    padding: 1.5rem;
+  }
+  .color-text {
+    color: $color-gray-light;
+    font-size: $fs12;
+  }
+  &.current {
+    .color {
+      border-color: $color-gray-darker;
+    }
+    .color-text {
+      color: $color-gray-darker;
+      font-weight: bold;
+    }
+    &::before {
+      background-color: $color-gray-darker;
+      border-radius: 3px;
+      color: $color-white;
+      content: "selected";
+      font-size: $fs10;
+      left: 12px;
+      padding: 1px 4px;
+      position: absolute;
+      top: 38px;
+    }
+  }
+  &:hover {
+    .color {
+      border-color: $color-gray-darker;
+    }
+    .color-text {
+      color: $color-gray-darker;
+    }
+  }
+  &.add-color {
+    margin-left: 1.5rem;
+    .color {
+      align-items: center;
+      background-color: $color-white;
+      border: 3px dashed $color-gray-lighter;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      margin-bottom: 1rem;
+      padding: .6rem;
+      svg {
+        fill: $color-gray-lighter;
+        height: 30px;
+        width: 30px;
+      }
+    }
+    .color-text {
+      font-weight: bold;
+    }
+    &:hover {
+      .color {
+        border-color: $color-gray;
+        svg {
+          fill: $color-gray;
+        }
+      }
+      .color-text {
+        color: $color-gray-dark;
+      }
+    }
+  }
+}
+
+.close-palette {
+  align-self: flex-start;
+  cursor: pointer;
+  flex-shrink: 0;
+  svg {
+    fill: $color-gray-light;
+    height: 25px;
+    transform: rotate(45deg);
+    width: 25px;
+  }
+  &:hover {
+    svg {
+      fill: $color-danger;
+    }
+  }
+}
+
+.color-tooltip {
+  background-color: $color-white;
+  border: 1px solid $color-gray-lighter;
+  border-radius: 3px;
+  left: -102px;
+  padding: 1rem;
+  position: absolute;
+  top: -85%;
+  z-index: 11;
+  .row-flex {
+    position: relative;
+    .input-text {
+      font-size: $fs12;
+      margin: 0 .5rem;
+      max-width: 100px;
+    }
+    &::after {
+      background-color: $color-white;
+      bottom: -32px;
+      border-bottom: 1px solid $color-gray-lighter;
+      border-right: 1px solid $color-gray-lighter;
+      content: "";
+      height: 20px;
+      left: 105px;
+      position: absolute;
+      transform: rotate(45deg);
+      width: 20px;
+    }
+  }
+}
diff --git a/resources/public/styles/partials/element-options.scss b/resources/public/styles/partials/element-options.scss
index bd98289a7..24a7ce051 100644
--- a/resources/public/styles/partials/element-options.scss
+++ b/resources/public/styles/partials/element-options.scss
@@ -127,6 +127,80 @@
       svg {
         fill: $color-white;
       }
+
+    }
+
+  }
+
+}
+
+.color-th {
+  background-color: $color-gray-light;
+  border-radius: 50%;
+  cursor: pointer;
+  flex-shrink: 0;
+  height: 25px;
+  margin: 5px 4px 0 4px;
+  width: 25px;
+  &.palette-th {
+    align-items: center;
+    background-color: $color-gray-darker;
+    border: 2px solid $color-gray-light;
+    display: flex;
+    justify-content: center;
+    svg {
+      fill: $color-gray-light;
+      height: 18px;
+      width: 18px;
+    }
+    &:hover {
+      border-color: $color-primary;
+      svg {
+        fill: $color-primary;
+      }
+    }
+  }
+}
+
+.border-element {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  margin: 5px 2% 0 2%;
+  svg {
+    fill: $color-gray-light;
+    height: 12px;
+    width: 12px;
+  }
+  &.top-left {
+    svg {
+      transform: rotate(270deg);
+    }
+  }
+  &.bottom-left {
+    svg {
+      transform: rotate(180deg);
+    }
+  }
+  &.bottom-right {
+    svg {
+      transform: rotate(90deg);
+    }
+  }
+}
+
+.align-icons {
+  cursor: pointer;
+  svg {
+    fill: $color-gray-light;
+    height: 20px;
+    margin: 5px 7px 0 7px;
+    width: 20px;
+  }
+  &:hover,
+  &.current {
+    svg {
+      fill: $color-primary;
     }
   }
 }
diff --git a/resources/public/templates/.#main.html b/resources/public/templates/.#main.html
deleted file mode 120000
index d75db8a7d..000000000
--- a/resources/public/templates/.#main.html
+++ /dev/null
@@ -1 +0,0 @@
-dialelo@rocinante.975:1436437812
\ No newline at end of file