diff --git a/classquiz/db/models.py b/classquiz/db/models.py
index 8d25793..4a30e48 100644
--- a/classquiz/db/models.py
+++ b/classquiz/db/models.py
@@ -123,21 +123,11 @@ class SlideElementTypes(str, Enum):
     CIRCLE = "CIRCLE"
 
 
-class SlideElement(BaseModel):
-    type: SlideElementTypes
-    x: float
-    y: float
-    height: float
-    width: float
-    data: str
-    id: int
-
-
 class QuizQuestion(BaseModel):
     question: str
     time: str  # in Secs
     type: None | QuizQuestionType = QuizQuestionType.ABCD
-    answers: list[ABCDQuizAnswer] | RangeQuizAnswer | list[VotingQuizAnswer] | list[SlideElement]
+    answers: list[ABCDQuizAnswer] | RangeQuizAnswer | list[VotingQuizAnswer] | str
     image: str | None = None
 
     @validator("answers")
@@ -148,7 +138,7 @@ class QuizQuestion(BaseModel):
             raise ValueError("Answer must be from type RangeQuizAnswer if type is RANGE")
         if values["type"] == QuizQuestionType.VOTING and type(v[0]) != VotingQuizAnswer:
             raise ValueError("Answer must be from type VotingQuizAnswer if type is VOTING")
-        if values["type"] == QuizQuestionType.SLIDE and type(v[0]) != SlideElement:
+        if values["type"] == QuizQuestionType.SLIDE and type(v[0]) != str:
             raise ValueError("Answer must be from type SlideElement if type is SLIDE")
         return v
 
diff --git a/frontend/package.json b/frontend/package.json
index 576843a..ca9da00 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -34,6 +34,7 @@
 		"@tailwindcss/typography": "^0.5.8",
 		"@types/canvas-confetti": "^1.6.0",
 		"@types/cookie": "^0.5.1",
+		"@types/fabric": "^4.5.14",
 		"@types/js-cookie": "^3.0.2",
 		"@types/luxon": "^2.4.0",
 		"@types/qrcode": "^1.5.0",
@@ -58,6 +59,7 @@
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte3": "^4.0.0",
+		"fabric": "^5.3.0",
 		"felte": "^1.2.6",
 		"fuse.js": "^6.6.2",
 		"highlight.js": "^11.7.0",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index d7e3535..285b2fb 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -21,6 +21,7 @@ specifiers:
     '@tailwindcss/typography': ^0.5.8
     '@types/canvas-confetti': ^1.6.0
     '@types/cookie': ^0.5.1
+    '@types/fabric': ^4.5.14
     '@types/js-cookie': ^3.0.2
     '@types/luxon': ^2.4.0
     '@types/qrcode': ^1.5.0
@@ -45,6 +46,7 @@ specifiers:
     eslint: ^8.28.0
     eslint-config-prettier: ^8.5.0
     eslint-plugin-svelte3: ^4.0.0
+    fabric: ^5.3.0
     felte: ^1.2.6
     fuse.js: ^6.6.2
     highlight.js: ^11.7.0
@@ -102,6 +104,7 @@ devDependencies:
     '@tailwindcss/typography': 0.5.8_tailwindcss@3.2.4
     '@types/canvas-confetti': 1.6.0
     '@types/cookie': 0.5.1
+    '@types/fabric': 4.5.14
     '@types/js-cookie': 3.0.2
     '@types/luxon': 2.4.0
     '@types/qrcode': 1.5.0
@@ -126,6 +129,7 @@ devDependencies:
     eslint: 8.30.0
     eslint-config-prettier: 8.5.0_eslint@8.30.0
     eslint-plugin-svelte3: 4.0.0_khrjkzzv5v2x7orkj5o7sxbz3a
+    fabric: 5.3.0
     felte: 1.2.6_svelte@3.55.0
     fuse.js: 6.6.2
     highlight.js: 11.7.0
@@ -965,6 +969,28 @@ packages:
             }
         dev: true
 
+    /@mapbox/node-pre-gyp/1.0.10:
+        resolution:
+            {
+                integrity: sha512-4ySo4CjzStuprMwk35H5pPbkymjv1SF3jGLj6rAHp/xT/RF7TL7bd9CTm1xDY49K2qF7jmR/g7k+SkLETP6opA==
+            }
+        hasBin: true
+        dependencies:
+            detect-libc: 2.0.1
+            https-proxy-agent: 5.0.1
+            make-dir: 3.1.0
+            node-fetch: 2.6.7
+            nopt: 5.0.0
+            npmlog: 5.0.1
+            rimraf: 3.0.2
+            semver: 7.3.8
+            tar: 6.1.13
+        transitivePeerDependencies:
+            - encoding
+            - supports-color
+        dev: true
+        optional: true
+
     /@mapbox/point-geometry/0.1.0:
         resolution:
             {
@@ -1312,6 +1338,15 @@ packages:
             tailwindcss: 3.2.4_postcss@8.4.20
         dev: true
 
+    /@tootallnate/once/2.0.0:
+        resolution:
+            {
+                integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==
+            }
+        engines: { node: '>= 10' }
+        dev: true
+        optional: true
+
     /@transloadit/prettier-bytes/0.0.7:
         resolution:
             {
@@ -1355,6 +1390,13 @@ packages:
             }
         dev: true
 
+    /@types/fabric/4.5.14:
+        resolution:
+            {
+                integrity: sha512-Hdi/HlG9+7a6eOCGQ0ViwBRxbgSK2Na8SE2oNMdhbn+dRkrH0jrjZVNnSspQzyxqA4OL6A3DotfavTwj7qEz/A==
+            }
+        dev: true
+
     /@types/js-cookie/3.0.2:
         resolution:
             {
@@ -1813,6 +1855,33 @@ packages:
             nanoid: 4.0.0
         dev: true
 
+    /abab/2.0.6:
+        resolution:
+            {
+                integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==
+            }
+        dev: true
+        optional: true
+
+    /abbrev/1.1.1:
+        resolution:
+            {
+                integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
+            }
+        dev: true
+        optional: true
+
+    /acorn-globals/6.0.0:
+        resolution:
+            {
+                integrity: sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==
+            }
+        dependencies:
+            acorn: 7.4.1
+            acorn-walk: 7.2.0
+        dev: true
+        optional: true
+
     /acorn-jsx/5.3.2_acorn@8.8.1:
         resolution:
             {
@@ -1861,6 +1930,19 @@ packages:
         hasBin: true
         dev: true
 
+    /agent-base/6.0.2:
+        resolution:
+            {
+                integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
+            }
+        engines: { node: '>= 6.0.0' }
+        dependencies:
+            debug: 4.3.4
+        transitivePeerDependencies:
+            - supports-color
+        dev: true
+        optional: true
+
     /ajv/6.12.6:
         resolution:
             {
@@ -1902,6 +1984,26 @@ packages:
             picomatch: 2.3.1
         dev: true
 
+    /aproba/2.0.0:
+        resolution:
+            {
+                integrity: sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==
+            }
+        dev: true
+        optional: true
+
+    /are-we-there-yet/2.0.0:
+        resolution:
+            {
+                integrity: sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==
+            }
+        engines: { node: '>=10' }
+        dependencies:
+            delegates: 1.0.0
+            readable-stream: 3.6.0
+        dev: true
+        optional: true
+
     /arg/5.0.2:
         resolution:
             {
@@ -1924,6 +2026,14 @@ packages:
         engines: { node: '>=8' }
         dev: true
 
+    /asynckit/0.4.0:
+        resolution:
+            {
+                integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+            }
+        dev: true
+        optional: true
+
     /autoprefixer/10.4.13_postcss@8.4.20:
         resolution:
             {
@@ -2001,6 +2111,14 @@ packages:
             fill-range: 7.0.1
         dev: true
 
+    /browser-process-hrtime/1.0.0:
+        resolution:
+            {
+                integrity: sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
+            }
+        dev: true
+        optional: true
+
     /browserslist/4.21.4:
         resolution:
             {
@@ -2090,6 +2208,23 @@ packages:
             }
         dev: true
 
+    /canvas/2.11.0:
+        resolution:
+            {
+                integrity: sha512-bdTjFexjKJEwtIo0oRx8eD4G2yWoUOXP9lj279jmQ2zMnTQhT8C3512OKz3s+ZOaQlLbE7TuVvRDYDB3Llyy5g==
+            }
+        engines: { node: '>=6' }
+        requiresBuild: true
+        dependencies:
+            '@mapbox/node-pre-gyp': 1.0.10
+            nan: 2.17.0
+            simple-get: 3.1.1
+        transitivePeerDependencies:
+            - encoding
+            - supports-color
+        dev: true
+        optional: true
+
     /chalk/4.1.2:
         resolution:
             {
@@ -2119,6 +2254,15 @@ packages:
             fsevents: 2.3.2
         dev: true
 
+    /chownr/2.0.0:
+        resolution:
+            {
+                integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
+            }
+        engines: { node: '>=10' }
+        dev: true
+        optional: true
+
     /ckeditor5/35.4.0:
         resolution:
             {
@@ -2175,6 +2319,15 @@ packages:
             }
         dev: true
 
+    /color-support/1.1.3:
+        resolution:
+            {
+                integrity: sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
+            }
+        hasBin: true
+        dev: true
+        optional: true
+
     /colord/2.9.3:
         resolution:
             {
@@ -2182,6 +2335,17 @@ packages:
             }
         dev: true
 
+    /combined-stream/1.0.8:
+        resolution:
+            {
+                integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+            }
+        engines: { node: '>= 0.8' }
+        dependencies:
+            delayed-stream: 1.0.0
+        dev: true
+        optional: true
+
     /commander/7.2.0:
         resolution:
             {
@@ -2214,6 +2378,14 @@ packages:
             }
         dev: true
 
+    /console-control-strings/1.1.0:
+        resolution:
+            {
+                integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==
+            }
+        dev: true
+        optional: true
+
     /cookie/0.5.0:
         resolution:
             {
@@ -2386,6 +2558,46 @@ packages:
             css-tree: 1.1.3
         dev: true
 
+    /cssom/0.3.8:
+        resolution:
+            {
+                integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
+            }
+        dev: true
+        optional: true
+
+    /cssom/0.5.0:
+        resolution:
+            {
+                integrity: sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==
+            }
+        dev: true
+        optional: true
+
+    /cssstyle/2.3.0:
+        resolution:
+            {
+                integrity: sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==
+            }
+        engines: { node: '>=8' }
+        dependencies:
+            cssom: 0.3.8
+        dev: true
+        optional: true
+
+    /data-urls/3.0.2:
+        resolution:
+            {
+                integrity: sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==
+            }
+        engines: { node: '>=12' }
+        dependencies:
+            abab: 2.0.6
+            whatwg-mimetype: 3.0.0
+            whatwg-url: 11.0.0
+        dev: true
+        optional: true
+
     /debug/4.3.4:
         resolution:
             {
@@ -2409,6 +2621,25 @@ packages:
         engines: { node: '>=0.10.0' }
         dev: true
 
+    /decimal.js/10.4.3:
+        resolution:
+            {
+                integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==
+            }
+        dev: true
+        optional: true
+
+    /decompress-response/4.2.1:
+        resolution:
+            {
+                integrity: sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==
+            }
+        engines: { node: '>=8' }
+        dependencies:
+            mimic-response: 2.1.0
+        dev: true
+        optional: true
+
     /deep-is/0.1.4:
         resolution:
             {
@@ -2431,6 +2662,23 @@ packages:
             }
         dev: true
 
+    /delayed-stream/1.0.0:
+        resolution:
+            {
+                integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+            }
+        engines: { node: '>=0.4.0' }
+        dev: true
+        optional: true
+
+    /delegates/1.0.0:
+        resolution:
+            {
+                integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==
+            }
+        dev: true
+        optional: true
+
     /detect-indent/6.1.0:
         resolution:
             {
@@ -2439,6 +2687,15 @@ packages:
         engines: { node: '>=8' }
         dev: true
 
+    /detect-libc/2.0.1:
+        resolution:
+            {
+                integrity: sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w==
+            }
+        engines: { node: '>=8' }
+        dev: true
+        optional: true
+
     /detective/5.2.1:
         resolution:
             {
@@ -2527,6 +2784,17 @@ packages:
             }
         dev: true
 
+    /domexception/4.0.0:
+        resolution:
+            {
+                integrity: sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==
+            }
+        engines: { node: '>=12' }
+        dependencies:
+            webidl-conversions: 7.0.0
+        dev: true
+        optional: true
+
     /domhandler/4.3.1:
         resolution:
             {
@@ -2671,6 +2939,23 @@ packages:
         engines: { node: '>=10' }
         dev: true
 
+    /escodegen/2.0.0:
+        resolution:
+            {
+                integrity: sha512-mmHKys/C8BFUGI+MAWNcSYoORYLMdPzjrknd2Vc+bUsjN5bXcr8EhrNB+UTqfL1y3I9c4fw2ihgtMPQLBRiQxw==
+            }
+        engines: { node: '>=6.0' }
+        hasBin: true
+        dependencies:
+            esprima: 4.0.1
+            estraverse: 5.3.0
+            esutils: 2.0.3
+            optionator: 0.8.3
+        optionalDependencies:
+            source-map: 0.6.1
+        dev: true
+        optional: true
+
     /eslint-config-prettier/8.5.0_eslint@8.30.0:
         resolution:
             {
@@ -2817,6 +3102,16 @@ packages:
             eslint-visitor-keys: 3.3.0
         dev: true
 
+    /esprima/4.0.1:
+        resolution:
+            {
+                integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
+            }
+        engines: { node: '>=4' }
+        hasBin: true
+        dev: true
+        optional: true
+
     /esquery/1.4.0:
         resolution:
             {
@@ -2875,6 +3170,22 @@ packages:
             }
         dev: true
 
+    /fabric/5.3.0:
+        resolution:
+            {
+                integrity: sha512-AVayKuzWoXM5cTn7iD3yNWBlfEa8r1tHaOe2g8NsZrmWKAHjryTxT/j6f9ncRfOWOF0I1Ci1AId3y78cC+GExQ==
+            }
+        engines: { node: '>=14.0.0' }
+        optionalDependencies:
+            canvas: 2.11.0
+            jsdom: 19.0.0_canvas@2.11.0
+        transitivePeerDependencies:
+            - bufferutil
+            - encoding
+            - supports-color
+            - utf-8-validate
+        dev: true
+
     /fast-deep-equal/3.1.3:
         resolution:
             {
@@ -2992,6 +3303,19 @@ packages:
             }
         dev: true
 
+    /form-data/4.0.0:
+        resolution:
+            {
+                integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+            }
+        engines: { node: '>= 6' }
+        dependencies:
+            asynckit: 0.4.0
+            combined-stream: 1.0.8
+            mime-types: 2.1.35
+        dev: true
+        optional: true
+
     /fraction.js/4.2.0:
         resolution:
             {
@@ -2999,6 +3323,17 @@ packages:
             }
         dev: true
 
+    /fs-minipass/2.1.0:
+        resolution:
+            {
+                integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==
+            }
+        engines: { node: '>= 8' }
+        dependencies:
+            minipass: 3.3.6
+        dev: true
+        optional: true
+
     /fs.realpath/1.0.0:
         resolution:
             {
@@ -3032,6 +3367,25 @@ packages:
         engines: { node: '>=10' }
         dev: true
 
+    /gauge/3.0.2:
+        resolution:
+            {
+                integrity: sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==
+            }
+        engines: { node: '>=10' }
+        dependencies:
+            aproba: 2.0.0
+            color-support: 1.1.3
+            console-control-strings: 1.1.0
+            has-unicode: 2.0.1
+            object-assign: 4.1.1
+            signal-exit: 3.0.7
+            string-width: 4.2.3
+            strip-ansi: 6.0.1
+            wide-align: 1.1.5
+        dev: true
+        optional: true
+
     /geojson-vt/3.2.1:
         resolution:
             {
@@ -3178,6 +3532,14 @@ packages:
         engines: { node: '>=8' }
         dev: true
 
+    /has-unicode/2.0.1:
+        resolution:
+            {
+                integrity: sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==
+            }
+        dev: true
+        optional: true
+
     /has/1.0.3:
         resolution:
             {
@@ -3196,6 +3558,46 @@ packages:
         engines: { node: '>=12.0.0' }
         dev: true
 
+    /html-encoding-sniffer/3.0.0:
+        resolution:
+            {
+                integrity: sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==
+            }
+        engines: { node: '>=12' }
+        dependencies:
+            whatwg-encoding: 2.0.0
+        dev: true
+        optional: true
+
+    /http-proxy-agent/5.0.0:
+        resolution:
+            {
+                integrity: sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==
+            }
+        engines: { node: '>= 6' }
+        dependencies:
+            '@tootallnate/once': 2.0.0
+            agent-base: 6.0.2
+            debug: 4.3.4
+        transitivePeerDependencies:
+            - supports-color
+        dev: true
+        optional: true
+
+    /https-proxy-agent/5.0.1:
+        resolution:
+            {
+                integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==
+            }
+        engines: { node: '>= 6' }
+        dependencies:
+            agent-base: 6.0.2
+            debug: 4.3.4
+        transitivePeerDependencies:
+            - supports-color
+        dev: true
+        optional: true
+
     /i18next-browser-languagedetector/7.0.1:
         resolution:
             {
@@ -3214,6 +3616,17 @@ packages:
             '@babel/runtime': 7.20.6
         dev: false
 
+    /iconv-lite/0.6.3:
+        resolution:
+            {
+                integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
+            }
+        engines: { node: '>=0.10.0' }
+        dependencies:
+            safer-buffer: 2.1.2
+        dev: true
+        optional: true
+
     /ieee754/1.2.1:
         resolution:
             {
@@ -3365,6 +3778,14 @@ packages:
         engines: { node: '>=8' }
         dev: true
 
+    /is-potential-custom-element-name/1.0.1:
+        resolution:
+            {
+                integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==
+            }
+        dev: true
+        optional: true
+
     /is-reference/1.2.1:
         resolution:
             {
@@ -3413,6 +3834,54 @@ packages:
             argparse: 2.0.1
         dev: true
 
+    /jsdom/19.0.0_canvas@2.11.0:
+        resolution:
+            {
+                integrity: sha512-RYAyjCbxy/vri/CfnjUWJQQtZ3LKlLnDqj+9XLNnJPgEGeirZs3hllKR20re8LUZ6o1b1X4Jat+Qd26zmP41+A==
+            }
+        engines: { node: '>=12' }
+        requiresBuild: true
+        peerDependencies:
+            canvas: ^2.5.0
+        peerDependenciesMeta:
+            canvas:
+                optional: true
+        dependencies:
+            abab: 2.0.6
+            acorn: 8.8.1
+            acorn-globals: 6.0.0
+            canvas: 2.11.0
+            cssom: 0.5.0
+            cssstyle: 2.3.0
+            data-urls: 3.0.2
+            decimal.js: 10.4.3
+            domexception: 4.0.0
+            escodegen: 2.0.0
+            form-data: 4.0.0
+            html-encoding-sniffer: 3.0.0
+            http-proxy-agent: 5.0.0
+            https-proxy-agent: 5.0.1
+            is-potential-custom-element-name: 1.0.1
+            nwsapi: 2.2.2
+            parse5: 6.0.1
+            saxes: 5.0.1
+            symbol-tree: 3.2.4
+            tough-cookie: 4.1.2
+            w3c-hr-time: 1.0.2
+            w3c-xmlserializer: 3.0.0
+            webidl-conversions: 7.0.0
+            whatwg-encoding: 2.0.0
+            whatwg-mimetype: 3.0.0
+            whatwg-url: 10.0.0
+            ws: 8.2.3
+            xml-name-validator: 4.0.0
+        transitivePeerDependencies:
+            - bufferutil
+            - supports-color
+            - utf-8-validate
+        dev: true
+        optional: true
+
     /json-schema-traverse/0.4.1:
         resolution:
             {
@@ -3442,6 +3911,18 @@ packages:
         engines: { node: '>=6' }
         dev: true
 
+    /levn/0.3.0:
+        resolution:
+            {
+                integrity: sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==
+            }
+        engines: { node: '>= 0.8.0' }
+        dependencies:
+            prelude-ls: 1.1.2
+            type-check: 0.3.2
+        dev: true
+        optional: true
+
     /levn/0.4.1:
         resolution:
             {
@@ -3581,6 +4062,17 @@ packages:
             '@jridgewell/sourcemap-codec': 1.4.14
         dev: true
 
+    /make-dir/3.1.0:
+        resolution:
+            {
+                integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
+            }
+        engines: { node: '>=8' }
+        dependencies:
+            semver: 6.3.0
+        dev: true
+        optional: true
+
     /mapbox-gl/2.11.1:
         resolution:
             {
@@ -3643,6 +4135,15 @@ packages:
             picomatch: 2.3.1
         dev: true
 
+    /mime-db/1.52.0:
+        resolution:
+            {
+                integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+            }
+        engines: { node: '>= 0.6' }
+        dev: true
+        optional: true
+
     /mime-match/1.0.2:
         resolution:
             {
@@ -3652,6 +4153,17 @@ packages:
             wildcard: 1.1.2
         dev: true
 
+    /mime-types/2.1.35:
+        resolution:
+            {
+                integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+            }
+        engines: { node: '>= 0.6' }
+        dependencies:
+            mime-db: 1.52.0
+        dev: true
+        optional: true
+
     /mime/3.0.0:
         resolution:
             {
@@ -3661,6 +4173,15 @@ packages:
         hasBin: true
         dev: true
 
+    /mimic-response/2.1.0:
+        resolution:
+            {
+                integrity: sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==
+            }
+        engines: { node: '>=8' }
+        dev: true
+        optional: true
+
     /min-indent/1.0.1:
         resolution:
             {
@@ -3695,6 +4216,28 @@ packages:
             }
         dev: true
 
+    /minipass/3.3.6:
+        resolution:
+            {
+                integrity: sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==
+            }
+        engines: { node: '>=8' }
+        dependencies:
+            yallist: 4.0.0
+        dev: true
+        optional: true
+
+    /minipass/4.0.0:
+        resolution:
+            {
+                integrity: sha512-g2Uuh2jEKoht+zvO6vJqXmYpflPqzRBT+Th2h01DKh5z7wbY/AZ2gCQ78cP70YoHPyFdY30YBV5WxgLOEwOykw==
+            }
+        engines: { node: '>=8' }
+        dependencies:
+            yallist: 4.0.0
+        dev: true
+        optional: true
+
     /minisearch/5.1.0:
         resolution:
             {
@@ -3702,6 +4245,18 @@ packages:
             }
         dev: true
 
+    /minizlib/2.1.2:
+        resolution:
+            {
+                integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==
+            }
+        engines: { node: '>= 8' }
+        dependencies:
+            minipass: 3.3.6
+            yallist: 4.0.0
+        dev: true
+        optional: true
+
     /mkdirp/0.5.6:
         resolution:
             {
@@ -3712,6 +4267,16 @@ packages:
             minimist: 1.2.7
         dev: true
 
+    /mkdirp/1.0.4:
+        resolution:
+            {
+                integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
+            }
+        engines: { node: '>=10' }
+        hasBin: true
+        dev: true
+        optional: true
+
     /mri/1.2.0:
         resolution:
             {
@@ -3749,6 +4314,14 @@ packages:
             }
         dev: true
 
+    /nan/2.17.0:
+        resolution:
+            {
+                integrity: sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==
+            }
+        dev: true
+        optional: true
+
     /nanoclone/0.2.1:
         resolution:
             {
@@ -3788,6 +4361,22 @@ packages:
             }
         dev: true
 
+    /node-fetch/2.6.7:
+        resolution:
+            {
+                integrity: sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==
+            }
+        engines: { node: 4.x || >=6.0.0 }
+        peerDependencies:
+            encoding: ^0.1.0
+        peerDependenciesMeta:
+            encoding:
+                optional: true
+        dependencies:
+            whatwg-url: 5.0.0
+        dev: true
+        optional: true
+
     /node-releases/2.0.8:
         resolution:
             {
@@ -3795,6 +4384,18 @@ packages:
             }
         dev: true
 
+    /nopt/5.0.0:
+        resolution:
+            {
+                integrity: sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==
+            }
+        engines: { node: '>=6' }
+        hasBin: true
+        dependencies:
+            abbrev: 1.1.1
+        dev: true
+        optional: true
+
     /normalize-path/3.0.0:
         resolution:
             {
@@ -3819,6 +4420,19 @@ packages:
         engines: { node: '>=10' }
         dev: true
 
+    /npmlog/5.0.1:
+        resolution:
+            {
+                integrity: sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==
+            }
+        dependencies:
+            are-we-there-yet: 2.0.0
+            console-control-strings: 1.1.0
+            gauge: 3.0.2
+            set-blocking: 2.0.0
+        dev: true
+        optional: true
+
     /nth-check/2.1.1:
         resolution:
             {
@@ -3828,6 +4442,23 @@ packages:
             boolbase: 1.0.0
         dev: true
 
+    /nwsapi/2.2.2:
+        resolution:
+            {
+                integrity: sha512-90yv+6538zuvUMnN+zCr8LuV6bPFdq50304114vJYJ8RDyK8D5O9Phpbd6SZWgI7PwzmmfN1upeOJlvybDSgCw==
+            }
+        dev: true
+        optional: true
+
+    /object-assign/4.1.1:
+        resolution:
+            {
+                integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
+            }
+        engines: { node: '>=0.10.0' }
+        dev: true
+        optional: true
+
     /object-hash/3.0.0:
         resolution:
             {
@@ -3845,6 +4476,22 @@ packages:
             wrappy: 1.0.2
         dev: true
 
+    /optionator/0.8.3:
+        resolution:
+            {
+                integrity: sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==
+            }
+        engines: { node: '>= 0.8.0' }
+        dependencies:
+            deep-is: 0.1.4
+            fast-levenshtein: 2.0.6
+            levn: 0.3.0
+            prelude-ls: 1.1.2
+            type-check: 0.3.2
+            word-wrap: 1.2.3
+        dev: true
+        optional: true
+
     /optionator/0.9.1:
         resolution:
             {
@@ -3918,6 +4565,14 @@ packages:
             callsites: 3.1.0
         dev: true
 
+    /parse5/6.0.1:
+        resolution:
+            {
+                integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
+            }
+        dev: true
+        optional: true
+
     /path-exists/4.0.0:
         resolution:
             {
@@ -4506,6 +5161,15 @@ packages:
             }
         dev: true
 
+    /prelude-ls/1.1.2:
+        resolution:
+            {
+                integrity: sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==
+            }
+        engines: { node: '>= 0.8.0' }
+        dev: true
+        optional: true
+
     /prelude-ls/1.2.1:
         resolution:
             {
@@ -4558,6 +5222,14 @@ packages:
             }
         dev: true
 
+    /psl/1.9.0:
+        resolution:
+            {
+                integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==
+            }
+        dev: true
+        optional: true
+
     /punycode/2.1.1:
         resolution:
             {
@@ -4580,6 +5252,14 @@ packages:
             yargs: 15.4.1
         dev: true
 
+    /querystringify/2.2.0:
+        resolution:
+            {
+                integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
+            }
+        dev: true
+        optional: true
+
     /queue-microtask/1.2.3:
         resolution:
             {
@@ -4611,6 +5291,19 @@ packages:
             pify: 2.3.0
         dev: true
 
+    /readable-stream/3.6.0:
+        resolution:
+            {
+                integrity: sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
+            }
+        engines: { node: '>= 6' }
+        dependencies:
+            inherits: 2.0.4
+            string_decoder: 1.3.0
+            util-deprecate: 1.0.2
+        dev: true
+        optional: true
+
     /readdirp/3.6.0:
         resolution:
             {
@@ -4650,6 +5343,14 @@ packages:
             }
         dev: true
 
+    /requires-port/1.0.0:
+        resolution:
+            {
+                integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
+            }
+        dev: true
+        optional: true
+
     /resolve-from/4.0.0:
         resolution:
             {
@@ -4744,6 +5445,22 @@ packages:
             mri: 1.2.0
         dev: true
 
+    /safe-buffer/5.2.1:
+        resolution:
+            {
+                integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+            }
+        dev: true
+        optional: true
+
+    /safer-buffer/2.1.2:
+        resolution:
+            {
+                integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+            }
+        dev: true
+        optional: true
+
     /sander/0.5.1:
         resolution:
             {
@@ -4769,6 +5486,26 @@ packages:
             source-map-js: 1.0.2
         dev: true
 
+    /saxes/5.0.1:
+        resolution:
+            {
+                integrity: sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==
+            }
+        engines: { node: '>=10' }
+        dependencies:
+            xmlchars: 2.2.0
+        dev: true
+        optional: true
+
+    /semver/6.3.0:
+        resolution:
+            {
+                integrity: sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+            }
+        hasBin: true
+        dev: true
+        optional: true
+
     /semver/7.3.8:
         resolution:
             {
@@ -4812,6 +5549,34 @@ packages:
         engines: { node: '>=8' }
         dev: true
 
+    /signal-exit/3.0.7:
+        resolution:
+            {
+                integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
+            }
+        dev: true
+        optional: true
+
+    /simple-concat/1.0.1:
+        resolution:
+            {
+                integrity: sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==
+            }
+        dev: true
+        optional: true
+
+    /simple-get/3.1.1:
+        resolution:
+            {
+                integrity: sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==
+            }
+        dependencies:
+            decompress-response: 4.2.1
+            once: 1.4.0
+            simple-concat: 1.0.1
+        dev: true
+        optional: true
+
     /sirv/2.0.2:
         resolution:
             {
@@ -4934,6 +5699,16 @@ packages:
             strip-ansi: 6.0.1
         dev: true
 
+    /string_decoder/1.3.0:
+        resolution:
+            {
+                integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
+            }
+        dependencies:
+            safe-buffer: 5.2.1
+        dev: true
+        optional: true
+
     /strip-ansi/6.0.1:
         resolution:
             {
@@ -5210,6 +5985,14 @@ packages:
             ssr-window: 4.0.2
         dev: true
 
+    /symbol-tree/3.2.4:
+        resolution:
+            {
+                integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
+            }
+        dev: true
+        optional: true
+
     /tailwindcss/3.2.4_postcss@8.4.20:
         resolution:
             {
@@ -5247,6 +6030,22 @@ packages:
             - ts-node
         dev: true
 
+    /tar/6.1.13:
+        resolution:
+            {
+                integrity: sha512-jdIBIN6LTIe2jqzay/2vtYLlBHa3JF42ot3h1dW8Q0PaAG4v8rm0cvpVePtau5C6OKXGGcgO9q2AMNSWxiLqKw==
+            }
+        engines: { node: '>=10' }
+        dependencies:
+            chownr: 2.0.0
+            fs-minipass: 2.1.0
+            minipass: 4.0.0
+            minizlib: 2.1.2
+            mkdirp: 1.0.4
+            yallist: 4.0.0
+        dev: true
+        optional: true
+
     /text-table/0.2.0:
         resolution:
             {
@@ -5305,6 +6104,39 @@ packages:
         engines: { node: '>=6' }
         dev: true
 
+    /tough-cookie/4.1.2:
+        resolution:
+            {
+                integrity: sha512-G9fqXWoYFZgTc2z8Q5zaHy/vJMjm+WV0AkAeHxVCQiEB1b+dGvWzFW6QV07cY5jQ5gRkeid2qIkzkxUnmoQZUQ==
+            }
+        engines: { node: '>=6' }
+        dependencies:
+            psl: 1.9.0
+            punycode: 2.1.1
+            universalify: 0.2.0
+            url-parse: 1.5.10
+        dev: true
+        optional: true
+
+    /tr46/0.0.3:
+        resolution:
+            {
+                integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
+            }
+        dev: true
+        optional: true
+
+    /tr46/3.0.0:
+        resolution:
+            {
+                integrity: sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==
+            }
+        engines: { node: '>=12' }
+        dependencies:
+            punycode: 2.1.1
+        dev: true
+        optional: true
+
     /tslib/1.14.1:
         resolution:
             {
@@ -5332,6 +6164,17 @@ packages:
             typescript: 4.7.4
         dev: true
 
+    /type-check/0.3.2:
+        resolution:
+            {
+                integrity: sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==
+            }
+        engines: { node: '>= 0.8.0' }
+        dependencies:
+            prelude-ls: 1.1.2
+        dev: true
+        optional: true
+
     /type-check/0.4.0:
         resolution:
             {
@@ -5376,6 +6219,15 @@ packages:
             busboy: 1.6.0
         dev: true
 
+    /universalify/0.2.0:
+        resolution:
+            {
+                integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==
+            }
+        engines: { node: '>= 4.0.0' }
+        dev: true
+        optional: true
+
     /update-browserslist-db/1.0.10_browserslist@4.21.4:
         resolution:
             {
@@ -5399,6 +6251,17 @@ packages:
             punycode: 2.1.1
         dev: true
 
+    /url-parse/1.5.10:
+        resolution:
+            {
+                integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
+            }
+        dependencies:
+            querystringify: 2.2.0
+            requires-port: 1.0.0
+        dev: true
+        optional: true
+
     /util-deprecate/1.0.2:
         resolution:
             {
@@ -5481,6 +6344,100 @@ packages:
             pbf: 3.2.1
         dev: true
 
+    /w3c-hr-time/1.0.2:
+        resolution:
+            {
+                integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==
+            }
+        deprecated: Use your platform's native performance.now() and performance.timeOrigin.
+        dependencies:
+            browser-process-hrtime: 1.0.0
+        dev: true
+        optional: true
+
+    /w3c-xmlserializer/3.0.0:
+        resolution:
+            {
+                integrity: sha512-3WFqGEgSXIyGhOmAFtlicJNMjEps8b1MG31NCA0/vOF9+nKMUW1ckhi9cnNHmf88Rzw5V+dwIwsm2C7X8k9aQg==
+            }
+        engines: { node: '>=12' }
+        dependencies:
+            xml-name-validator: 4.0.0
+        dev: true
+        optional: true
+
+    /webidl-conversions/3.0.1:
+        resolution:
+            {
+                integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==
+            }
+        dev: true
+        optional: true
+
+    /webidl-conversions/7.0.0:
+        resolution:
+            {
+                integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==
+            }
+        engines: { node: '>=12' }
+        dev: true
+        optional: true
+
+    /whatwg-encoding/2.0.0:
+        resolution:
+            {
+                integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==
+            }
+        engines: { node: '>=12' }
+        dependencies:
+            iconv-lite: 0.6.3
+        dev: true
+        optional: true
+
+    /whatwg-mimetype/3.0.0:
+        resolution:
+            {
+                integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==
+            }
+        engines: { node: '>=12' }
+        dev: true
+        optional: true
+
+    /whatwg-url/10.0.0:
+        resolution:
+            {
+                integrity: sha512-CLxxCmdUby142H5FZzn4D8ikO1cmypvXVQktsgosNy4a4BHrDHeciBBGZhb0bNoR5/MltoCatso+vFjjGx8t0w==
+            }
+        engines: { node: '>=12' }
+        dependencies:
+            tr46: 3.0.0
+            webidl-conversions: 7.0.0
+        dev: true
+        optional: true
+
+    /whatwg-url/11.0.0:
+        resolution:
+            {
+                integrity: sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==
+            }
+        engines: { node: '>=12' }
+        dependencies:
+            tr46: 3.0.0
+            webidl-conversions: 7.0.0
+        dev: true
+        optional: true
+
+    /whatwg-url/5.0.0:
+        resolution:
+            {
+                integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==
+            }
+        dependencies:
+            tr46: 0.0.3
+            webidl-conversions: 3.0.1
+        dev: true
+        optional: true
+
     /which-module/2.0.0:
         resolution:
             {
@@ -5499,6 +6456,16 @@ packages:
             isexe: 2.0.0
         dev: true
 
+    /wide-align/1.1.5:
+        resolution:
+            {
+                integrity: sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==
+            }
+        dependencies:
+            string-width: 4.2.3
+        dev: true
+        optional: true
+
     /wildcard/1.1.2:
         resolution:
             {
@@ -5549,6 +6516,23 @@ packages:
                 optional: true
         dev: true
 
+    /xml-name-validator/4.0.0:
+        resolution:
+            {
+                integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==
+            }
+        engines: { node: '>=12' }
+        dev: true
+        optional: true
+
+    /xmlchars/2.2.0:
+        resolution:
+            {
+                integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
+            }
+        dev: true
+        optional: true
+
     /xmlhttprequest-ssl/2.0.0:
         resolution:
             {
diff --git a/frontend/src/lib/editor/sidebar.svelte b/frontend/src/lib/editor/sidebar.svelte
index 19f2f42..bdde6a4 100644
--- a/frontend/src/lib/editor/sidebar.svelte
+++ b/frontend/src/lib/editor/sidebar.svelte
@@ -33,7 +33,7 @@
 		time: '120',
 		question: 'Slide',
 		image: undefined,
-		answers: []
+		answers: ''
 	};
 
 	const setSelectedQuestion = (index: number): void => {
diff --git a/frontend/src/lib/editor/slide.svelte b/frontend/src/lib/editor/slide.svelte
index a0e5ba6..acd8268 100644
--- a/frontend/src/lib/editor/slide.svelte
+++ b/frontend/src/lib/editor/slide.svelte
@@ -4,25 +4,27 @@
   - file, You can obtain one at https://mozilla.org/MPL/2.0/.
   -->
 <script lang="ts">
-	import TextElement from './slides/types/text.svelte';
-	import HeadlineElement from './slides/types/headline.svelte';
-	import RectangleElement from './slides/types/rectangle.svelte';
-	import CircleElement from './slides/types/circle.svelte';
-	import { draggable } from '@neodrag/svelte';
 	import type { Question } from '$lib/quiz_types';
 	import { ElementTypes, QuizQuestionType } from '$lib/quiz_types';
 	import ElementSelection from './slides/element_selection.svelte';
 	import SettingsMenu from './slides/settings_menu.svelte';
 	import { onMount } from 'svelte';
+	import Pikaso from 'pikaso';
+	import EditMenu from './slides/edit_menu.svelte';
+	import type { Konva, ShapeModel } from 'pikaso';
 
 	export let data: Question = {
 		type: QuizQuestionType.SLIDE,
 		time: '120',
 		question: '',
 		image: undefined,
-		answers: []
+		answers: ''
 	};
 	let selected_element = undefined;
+	let canvas_el: HTMLDivElement | undefined;
+	let canvas: Pikaso;
+	let elements = [];
+	let selected_el: null | ShapeModel<Konva.Shape | Konva.Group, Konva.ShapeConfig> = null;
 
 	let elements_binds: Array<HTMLElement> | undefined = [];
 	let main_el: undefined | HTMLElement;
@@ -50,29 +52,45 @@
 		}
 	});
 	const add_text_field = () => {
-		data.answers = [
-			...data.answers,
-			{
-				type: selected_element,
-				data: '',
-				x: 0,
-				y: 0,
-				id: data.answers.length,
-				height: 0,
-				width: 0
-			}
-		];
-		selected_element = undefined;
-	};
-
-	const delete_element = (id: number) => {
-		if (!confirm('Do you really want to delete this element?')) {
-			return;
+		if (selected_element === ElementTypes.Text) {
+			canvas.shapes.label.insert({
+				container: {
+					x: 40,
+					y: 40
+				},
+				text: {
+					text: 'Text',
+					fontSize: 20
+				}
+			});
+		} else if (selected_element === ElementTypes.Headline) {
+			canvas.shapes.label.insert({
+				container: {
+					x: 40,
+					y: 40
+				},
+				text: {
+					text: 'Headline',
+					fontSize: 35
+				}
+			});
+		} else if (selected_element === ElementTypes.Circle) {
+			canvas.shapes.circle.insert({
+				x: 40,
+				y: 40,
+				radius: 50,
+				fill: '#ff000d'
+			});
+		} else if (selected_element === ElementTypes.Rectangle) {
+			canvas.shapes.rect.insert({
+				x: 40,
+				y: 40,
+				width: 50,
+				height: 50,
+				fill: '#ff000d'
+			});
 		}
-		data.answers.splice(id, 1);
-		data.answers = data.answers;
-		elements_binds.splice(id, 1);
-		elements_binds = elements_binds;
+		console.log(canvas.export.toJson());
 	};
 
 	$: {
@@ -103,101 +121,120 @@
 	};
 
 	onMount(() => {
-		setTimeout(() => {
-			for (let i = 0; i < data.answers.length; i++) {
-				elements_binds[i].style.height = `${
-					data.answers[i].height * main_el.offsetHeight
-				}px`;
-				elements_binds[i].style.width = `${data.answers[i].width * main_el.offsetWidth}px`;
+		/*		setTimeout(() => {
+					for (let i = 0; i < data.answers.length; i++) {
+						elements_binds[i].style.height = `${
+							data.answers[i].height * main_el.offsetHeight
+						}px`;
+						elements_binds[i].style.width = `${data.answers[i].width * main_el.offsetWidth}px`;
+					}
+				}, 200);*/
+		canvas = new Pikaso({
+			container: canvas_el,
+			snapToGrid: {}
+			/*			selection: {
+							interactive: false
+						}*/
+		});
+		console.log(data.answers);
+		if (data.answers) {
+			if (typeof data.answers === 'string') {
+				canvas.import.json(JSON.parse(data.answers));
 			}
-		}, 200);
+		}
+		canvas.on('*', () => {
+			data.answers = JSON.stringify(canvas.export.toJson());
+		});
+		canvas.on('selection:change', (data) => {
+			/*			data.shapes[0].update({fill: "#ffffff"})
+						console.log(data.shapes[0])*/
+			// console.log(canvas.board.shapes)
+			if (data.shapes.length > 0) {
+				selected_el = data.shapes[0];
+			} else {
+				selected_el = null;
+			}
+		});
 	});
+
+	const get_shape_from_id = (id: number) => {
+		for (let i = 0; i < canvas.board.shapes.length; i++) {
+			if (canvas.board.shapes[i].node._id === id) {
+				return canvas.board.shapes[i].node;
+			}
+		}
+	};
 </script>
 
-<div class="flex h-full relative w-full pb-12" bind:this={main_el}>
-	<div class="absolute top-0 right-0 flex flex-col pr-2 rounded-t-lg">
-		<button
-			class="ml-auto"
-			on:click={() => {
-				selected_element = selected_element === null ? undefined : null;
-			}}
-			type="button"
-			class:add-button={selected_element === null}
-		>
-			Add element
-		</button>
-		{#if selected_element === null}
-			<ElementSelection bind:selected_element />
-		{/if}
-	</div>
-
-	<div class="absolute top-0 left-0 flex flex-col pl-2 rounded-t-lg">
-		<button
-			class="mr-auto"
-			on:click={() => {
-				settings_menu_open = !settings_menu_open;
-			}}
-			type="button"
-		>
-			Settings
-		</button>
-		{#if settings_menu_open}
-			<SettingsMenu bind:time={data.time} bind:title={data.question} />
-		{/if}
-	</div>
-	{#if main_el}
-		{#each data.answers as el, i}
-			<div
-				use:draggable={{
-					bounds: 'parent',
-					handle: '.drag',
-					defaultPosition: {
-						x: data.answers[i].x * main_el.offsetWidth,
-						y: data.answers[i].y * main_el.offsetHeight
-					}
+<div class="flex h-full relative w-full" bind:this={main_el}>
+	<div class="absolute top-0 left-0 grid grid-cols-6 w-full">
+		<div class="flex flex-col pl-2 rounded-t-lg z-40 pt-2">
+			<button
+				class="mr-auto"
+				on:click={() => {
+					settings_menu_open = !settings_menu_open;
 				}}
-				class="resize h-fit overflow-auto relative min-h-fit"
-				on:neodrag:end={set_correct_position}
-				el_id={i}
-				on:resize={set_correct_size}
-				bind:this={elements_binds[el.id]}
+				type="button"
 			>
-				<span
-					class="absolute drag dark:text-black hover:cursor-grab opacity-30 hover:opacity-100 transition top-0 left-0"
-				>
-					<!-- heroicons/arrows-expand -->
-					<svg
-						class="w-4 h-4"
-						fill="none"
+				<svg
+					class="w-6 h-6"
+					stroke-width="2"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+					color="currentColor"
+					><path
+						d="M12 15a3 3 0 100-6 3 3 0 000 6z"
 						stroke="currentColor"
-						viewBox="0 0 24 24"
-						xmlns="http://www.w3.org/2000/svg"
-						><path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
-						/></svg
-					></span
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/><path
+						d="M19.622 10.395l-1.097-2.65L20 6l-2-2-1.735 1.483-2.707-1.113L12.935 2h-1.954l-.632 2.401-2.645 1.115L6 4 4 6l1.453 1.789-1.08 2.657L2 11v2l2.401.655L5.516 16.3 4 18l2 2 1.791-1.46 2.606 1.072L11 22h2l.604-2.387 2.651-1.098C16.697 18.831 18 20 18 20l2-2-1.484-1.75 1.098-2.652 2.386-.62V11l-2.378-.605z"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/></svg
 				>
-				<!--	<button class='absolute drag dark:text-black opacity-30 hover:opacity-100 transition top-0 right-0' on:click={() => {delete_element(i)}}>
-						&lt;!&ndash; heroicons/trash &ndash;&gt;
-						<svg class='w-4 h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'
-							 xmlns='http://www.w3.org/2000/svg'>
-							<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2'
-								  d='M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16'></path>
-						</svg>
-					</button>-->
-				{#if el.type === ElementTypes.Text}
-					<TextElement bind:data={el.data} />
-				{:else if el.type === ElementTypes.Headline}
-					<HeadlineElement bind:data={el.data} />
-				{:else if el.type === ElementTypes.Rectangle}
-					<RectangleElement bind:data={el.data} />
-				{:else if el.type === ElementTypes.Circle}
-					<CircleElement bind:data={el.data} />
-				{/if}
-			</div>
-		{/each}
-	{/if}
+			</button>
+			{#if settings_menu_open}
+				<SettingsMenu bind:time={data.time} bind:title={data.question} />
+			{/if}
+		</div>
+		<div class="col-start-2 col-end-6 transition bg-transparent pt-2">
+			<EditMenu bind:selected_el />
+		</div>
+
+		<div class="flex flex-col pr-2 rounded-t-lg z-40 pt-2">
+			<button
+				class="ml-auto"
+				on:click={() => {
+					selected_element = selected_element === null ? undefined : null;
+				}}
+				type="button"
+				class:add-button={selected_element === null}
+			>
+				<svg
+					class="w-6 h-6"
+					stroke-width="2"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+					color="currentColor"
+					><path
+						d="M9 12h3m3 0h-3m0 0V9m0 3v3M21 3.6v16.8a.6.6 0 01-.6.6H3.6a.6.6 0 01-.6-.6V3.6a.6.6 0 01.6-.6h16.8a.6.6 0 01.6.6z"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/></svg
+				>
+			</button>
+			{#if selected_element === null}
+				<ElementSelection bind:selected_element />
+			{/if}
+		</div>
+	</div>
+	<div bind:this={canvas_el} class="w-full h-full block" />
 </div>
diff --git a/frontend/src/lib/editor/slides/edit_menu.svelte b/frontend/src/lib/editor/slides/edit_menu.svelte
new file mode 100644
index 0000000..d79df0a
--- /dev/null
+++ b/frontend/src/lib/editor/slides/edit_menu.svelte
@@ -0,0 +1,205 @@
+<!--
+  - This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at https://mozilla.org/MPL/2.0/.
+  -->
+<script lang="ts">
+	import type { Konva, ShapeModel } from 'pikaso';
+	import { fade } from 'svelte/transition';
+
+	export let selected_el: null | ShapeModel<Konva.Shape | Konva.Group, Konva.ShapeConfig>;
+
+	let opened_dropdown = null;
+
+	let available_modifiers: Array<string> = [];
+
+	const set_available_modifiers = () => {
+		available_modifiers = [];
+		console.log(selected_el, 'sel_el');
+		if (!selected_el) {
+			return;
+		}
+		switch (selected_el.type) {
+			case 'label':
+				available_modifiers.push('font_size', 'text_color');
+				break;
+			case 'circle' || 'rectangle':
+				available_modifiers.push('fill_color');
+		}
+	};
+
+	$: {
+		selected_el;
+		set_available_modifiers();
+	}
+
+	const toggle_switch = (el: string) => {
+		if (opened_dropdown) {
+			opened_dropdown = null;
+		} else {
+			opened_dropdown = el;
+		}
+	};
+
+	const change_color = (e: Event) => {
+		if (available_modifiers.includes('text_color')) {
+			console.log('text color');
+			selected_el.updateText({
+				fill: e.target.value
+			});
+		} else if (available_modifiers.includes('fill_color')) {
+			console.log('fill color');
+			selected_el.update({ fill: e.target.value });
+		}
+		opened_dropdown = null;
+	};
+
+	const change_fontsize = (e: Event) => {
+		console.log(selected_el.node.children[1].attrs.fontSize);
+		selected_el.updateText({
+			fontSize: e.target.value
+		});
+	};
+
+	$: if (!selected_el) {
+		opened_dropdown = null;
+	}
+</script>
+
+<div class="flex flex-row justify-evenly z-40">
+	<div>
+		<button
+			type="button"
+			class="disabled:opacity-50 transition"
+			disabled={!(
+				available_modifiers.includes('fill_color') ||
+				available_modifiers.includes('text_color')
+			)}
+			on:click={() => {
+				toggle_switch('color');
+			}}
+		>
+			<!-- iconoir/color-picker -->
+			<svg
+				class="w-6 h-6"
+				stroke-width="2"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				color="currentColor"
+			>
+				<path
+					d="M7 13.161l5.464-5.464a1 1 0 011.415 0l2.12 2.12a1 1 0 010 1.415l-1.928 1.929m-7.071 0l-2.172 2.172a.999.999 0 00-.218.327l-1.028 2.496c-.508 1.233.725 2.466 1.958 1.959l2.497-1.028c.122-.05.233-.125.326-.218l5.708-5.708m-7.071 0h7.071M13.878 3.454l2.121 2.121m4.243 4.243l-2.121-2.121m-2.122-2.122l1.414-1.414a1 1 0 011.415 0l.707.707a1 1 0 010 1.414L18.12 7.697m-2.122-2.122l2.122 2.122"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		</button>
+		{#if opened_dropdown === 'color'}
+			<div
+				class="bg-white m-auto rounded-lg shadow-lg p-4 dark:bg-gray-600 h-fit gap-2 w-fit auto-cols-min flex absolute z-40"
+				transition:fade={{ duration: 100 }}
+			>
+				<input type="color" on:change={change_color} />
+			</div>
+		{/if}
+	</div>
+	<div>
+		<button
+			type="button"
+			class="disabled:opacity-50 transition"
+			on:click={() => {
+				toggle_switch('font_size');
+			}}
+			disabled={!available_modifiers.includes('font_size')}
+		>
+			<!-- iconoir/font-size -->
+			<svg
+				class="w-6 h-6"
+				stroke-width="2"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				color="currentColor"
+			>
+				<path
+					d="M18 21V11m0 10l-2-2.5m2 2.5l2-2.5M18 11l-2 2m2-2l2 2M9 5v12m0 0H7m2 0h2M15 7V5H3v2"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		</button>
+		{#if opened_dropdown === 'font_size'}
+			<div
+				class="bg-white m-auto rounded-lg shadow-lg p-4 dark:bg-gray-600 h-fit gap-2 w-fit auto-cols-min flex absolute z-40"
+				transition:fade={{ duration: 100 }}
+			>
+				<input
+					type="range"
+					on:change={change_fontsize}
+					value={selected_el?.node?.children?.[1]?.attrs?.fontSize}
+					min="10"
+					max="250"
+				/>
+			</div>
+		{/if}
+	</div>
+	<div class="flex flex-row gap-2">
+		<button
+			type="button"
+			class="disabled:opacity-50 transition"
+			on:click={() => {
+				selected_el.update({ zIndex: selected_el.node.getZIndex() + 1 });
+			}}
+			disabled={!selected_el}
+		>
+			<!-- iconoir/priority-up -->
+			<svg
+				class="w-6 h-6"
+				stroke-width="2"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				color="currentColor"
+			>
+				<path
+					d="M11.576 1.424a.6.6 0 01.848 0l10.152 10.152a.6.6 0 010 .848L12.424 22.576a.6.6 0 01-.848 0L1.424 12.424a.6.6 0 010-.848L11.576 1.424zM12 7l4 4m-4-4l-4 4.167M12 7v9"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		</button>
+		<button
+			type="button"
+			class="disabled:opacity-50 transition"
+			on:click={() => {
+				selected_el.update({ zIndex: selected_el.node.getZIndex() - 1 });
+			}}
+			disabled={!selected_el}
+		>
+			<!-- iconoir/priority-down -->
+			<svg
+				class="w-6 h-6"
+				stroke-width="2"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				color="currentColor"
+			>
+				<path
+					d="M11.576 1.424a.6.6 0 01.848 0l10.152 10.152a.6.6 0 010 .848L12.424 22.576a.6.6 0 01-.848 0L1.424 12.424a.6.6 0 010-.848L11.576 1.424zM12 16l4-4m-4 4l-4-4.167M12 16V7"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		</button>
+	</div>
+</div>
diff --git a/frontend/src/lib/editor/slides/icons/x-circle.svg b/frontend/src/lib/editor/slides/icons/x-circle.svg
new file mode 100644
index 0000000..89112d8
--- /dev/null
+++ b/frontend/src/lib/editor/slides/icons/x-circle.svg
@@ -0,0 +1,8 @@
+<!--
+  - This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at https://mozilla.org/MPL/2.0/.
+  -->
+
+<!-- heroicons/x-circle -->
+<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
diff --git a/frontend/src/lib/quiz_types.ts b/frontend/src/lib/quiz_types.ts
index b336e93..c9e57d1 100644
--- a/frontend/src/lib/quiz_types.ts
+++ b/frontend/src/lib/quiz_types.ts
@@ -38,22 +38,12 @@ export interface RangeQuizAnswer {
 	max_correct: number;
 }
 
-export interface Slide {
-	type: ElementTypes;
-	x: number;
-	y: number;
-	height: number;
-	width: number;
-	data: string;
-	id: number;
-}
-
 export interface Question {
 	time: string;
 	question: string;
 	type?: QuizQuestionType;
 	image?: string;
-	answers: Answer[] | RangeQuizAnswer | VotingAnswer[];
+	answers: Answer[] | RangeQuizAnswer | VotingAnswer[] | string;
 }
 
 export interface Answer {