diff --git a/SurveyFrontend/package-lock.json b/SurveyFrontend/package-lock.json
index 24c315c..d175002 100644
--- a/SurveyFrontend/package-lock.json
+++ b/SurveyFrontend/package-lock.json
@@ -25,7 +25,8 @@
         "globals": "^15.15.0",
         "typescript": "~5.7.2",
         "typescript-eslint": "^8.24.1",
-        "vite": "^6.2.0"
+        "vite": "^6.2.0",
+        "vite-plugin-svgr": "^4.3.0"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -994,6 +995,42 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@rollup/pluginutils": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.4.tgz",
+      "integrity": "sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/pluginutils/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.35.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.35.0.tgz",
@@ -1241,6 +1278,231 @@
         "win32"
       ]
     },
+    "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz",
+      "integrity": "sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz",
+      "integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz",
+      "integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz",
+      "integrity": "sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-dynamic-title": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz",
+      "integrity": "sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-em-dimensions": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz",
+      "integrity": "sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-react-native-svg": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.1.0.tgz",
+      "integrity": "sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-svg-component": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz",
+      "integrity": "sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-preset": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-8.1.0.tgz",
+      "integrity": "sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@svgr/babel-plugin-add-jsx-attribute": "8.0.0",
+        "@svgr/babel-plugin-remove-jsx-attribute": "8.0.0",
+        "@svgr/babel-plugin-remove-jsx-empty-expression": "8.0.0",
+        "@svgr/babel-plugin-replace-jsx-attribute-value": "8.0.0",
+        "@svgr/babel-plugin-svg-dynamic-title": "8.0.0",
+        "@svgr/babel-plugin-svg-em-dimensions": "8.0.0",
+        "@svgr/babel-plugin-transform-react-native-svg": "8.1.0",
+        "@svgr/babel-plugin-transform-svg-component": "8.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/core": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz",
+      "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.21.3",
+        "@svgr/babel-preset": "8.1.0",
+        "camelcase": "^6.2.0",
+        "cosmiconfig": "^8.1.3",
+        "snake-case": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/hast-util-to-babel-ast": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz",
+      "integrity": "sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.21.3",
+        "entities": "^4.4.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/plugin-jsx": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-8.1.0.tgz",
+      "integrity": "sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.21.3",
+        "@svgr/babel-preset": "8.1.0",
+        "@svgr/hast-util-to-babel-ast": "8.0.0",
+        "svg-parser": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@svgr/core": "*"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1666,6 +1928,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001704",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001704.tgz",
@@ -1741,6 +2016,33 @@
         "node": ">=18"
       }
     },
+    "node_modules/cosmiconfig": {
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
+      "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0",
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -1784,12 +2086,46 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "node_modules/dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.118",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.118.tgz",
       "integrity": "sha512-yNDUus0iultYyVoEFLnQeei7LOQkL8wg8GQpkPCRrOlJXlcCwa6eGKZkxQ9ciHsqZyYbj8Jd94X1CTPzGm+uIA==",
       "dev": true
     },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.25.1",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.1.tgz",
@@ -2010,6 +2346,13 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -2229,6 +2572,13 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -2301,6 +2651,13 @@
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
       "dev": true
     },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -2347,6 +2704,13 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -2368,6 +2732,16 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -2441,6 +2815,17 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
+    "node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.19",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
@@ -2506,6 +2891,25 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -2524,6 +2928,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -2796,6 +3210,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/snake-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
+      "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -2829,6 +3254,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/svg-parser": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
+      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -2853,6 +3285,13 @@
         "typescript": ">=4.8.4"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD"
+    },
     "node_modules/turbo-stream": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
@@ -3029,6 +3468,21 @@
         }
       }
     },
+    "node_modules/vite-plugin-svgr": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-svgr/-/vite-plugin-svgr-4.3.0.tgz",
+      "integrity": "sha512-Jy9qLB2/PyWklpYy0xk0UU3TlU0t2UMpJXZvf+hWII1lAmRHrOUKi11Uw8N3rxoNk7atZNYO3pR3vI1f7oi+6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rollup/pluginutils": "^5.1.3",
+        "@svgr/core": "^8.1.0",
+        "@svgr/plugin-jsx": "^8.1.0"
+      },
+      "peerDependencies": {
+        "vite": ">=2.6.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/SurveyFrontend/package.json b/SurveyFrontend/package.json
index 632ec27..7f5fb7a 100644
--- a/SurveyFrontend/package.json
+++ b/SurveyFrontend/package.json
@@ -27,6 +27,7 @@
     "globals": "^15.15.0",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.24.1",
-    "vite": "^6.2.0"
+    "vite": "^6.2.0",
+    "vite-plugin-svgr": "^4.3.0"
   }
 }
diff --git a/SurveyFrontend/public/account.svg b/SurveyFrontend/src/assets/account.svg
similarity index 100%
rename from SurveyFrontend/public/account.svg
rename to SurveyFrontend/src/assets/account.svg
diff --git a/SurveyFrontend/public/add_answer.svg b/SurveyFrontend/src/assets/add_answer.svg
similarity index 100%
rename from SurveyFrontend/public/add_answer.svg
rename to SurveyFrontend/src/assets/add_answer.svg
diff --git a/SurveyFrontend/public/add_circle.svg b/SurveyFrontend/src/assets/add_circle.svg
similarity index 100%
rename from SurveyFrontend/public/add_circle.svg
rename to SurveyFrontend/src/assets/add_circle.svg
diff --git a/SurveyFrontend/public/add_question.svg b/SurveyFrontend/src/assets/add_question.svg
similarity index 100%
rename from SurveyFrontend/public/add_question.svg
rename to SurveyFrontend/src/assets/add_question.svg
diff --git a/SurveyFrontend/public/arrow_drop_down.svg b/SurveyFrontend/src/assets/arrow_drop_down.svg
similarity index 100%
rename from SurveyFrontend/public/arrow_drop_down.svg
rename to SurveyFrontend/src/assets/arrow_drop_down.svg
diff --git a/SurveyFrontend/public/arrow_drop_up.svg b/SurveyFrontend/src/assets/arrow_drop_up.svg
similarity index 100%
rename from SurveyFrontend/public/arrow_drop_up.svg
rename to SurveyFrontend/src/assets/arrow_drop_up.svg
diff --git a/SurveyFrontend/public/check_box.svg b/SurveyFrontend/src/assets/check_box.svg
similarity index 100%
rename from SurveyFrontend/public/check_box.svg
rename to SurveyFrontend/src/assets/check_box.svg
diff --git a/SurveyFrontend/public/delete.svg b/SurveyFrontend/src/assets/delete.svg
similarity index 100%
rename from SurveyFrontend/public/delete.svg
rename to SurveyFrontend/src/assets/delete.svg
diff --git a/SurveyFrontend/public/deleteQuestion.svg b/SurveyFrontend/src/assets/deleteQuestion.svg
similarity index 100%
rename from SurveyFrontend/public/deleteQuestion.svg
rename to SurveyFrontend/src/assets/deleteQuestion.svg
diff --git a/SurveyFrontend/public/emptyCheckbox.svg b/SurveyFrontend/src/assets/emptyCheckbox.svg
similarity index 100%
rename from SurveyFrontend/public/emptyCheckbox.svg
rename to SurveyFrontend/src/assets/emptyCheckbox.svg
diff --git a/SurveyFrontend/public/logo.svg b/SurveyFrontend/src/assets/logo.svg
similarity index 100%
rename from SurveyFrontend/public/logo.svg
rename to SurveyFrontend/src/assets/logo.svg
diff --git a/SurveyFrontend/public/radio_button_checked.svg b/SurveyFrontend/src/assets/radio_button_checked.svg
similarity index 100%
rename from SurveyFrontend/public/radio_button_checked.svg
rename to SurveyFrontend/src/assets/radio_button_checked.svg
diff --git a/SurveyFrontend/public/radio_button_unchecked.svg b/SurveyFrontend/src/assets/radio_button_unchecked.svg
similarity index 100%
rename from SurveyFrontend/public/radio_button_unchecked.svg
rename to SurveyFrontend/src/assets/radio_button_unchecked.svg
diff --git a/SurveyFrontend/src/components/Account/Account.tsx b/SurveyFrontend/src/components/Account/Account.tsx
index b859db4..9844f57 100644
--- a/SurveyFrontend/src/components/Account/Account.tsx
+++ b/SurveyFrontend/src/components/Account/Account.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import styles from './Account.module.css'
+import AccountImg from '../../assets/account.svg?react';
 
 interface AccountProps {
     href: string;
@@ -10,7 +11,7 @@ const Account: React.FC<AccountProps> = ({href, user}) => {
     return (
         <div className={styles.account}>
             <a className={styles.accountText} href={href}>
-                <img src='../../../public/account.svg' className={styles.accountImg} alt='account'/>
+                <AccountImg className={styles.accountImg}/>
                 {user}
             </a>
         </div>
diff --git a/SurveyFrontend/src/components/AddAnswerButton/AddAnswerButton.tsx b/SurveyFrontend/src/components/AddAnswerButton/AddAnswerButton.tsx
index 901ea80..c5a73f2 100644
--- a/SurveyFrontend/src/components/AddAnswerButton/AddAnswerButton.tsx
+++ b/SurveyFrontend/src/components/AddAnswerButton/AddAnswerButton.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import styles from './AddAnswerButton.module.css'
+import AddAnswerImg from '../../assets/add_answer.svg?react';
 
 
 interface AddAnswerButtonProps {
@@ -10,7 +11,7 @@ const AddAnswerButton: React.FC<AddAnswerButtonProps> = ({onClick}) => {
     return (
         <button className={styles.answerButton} onClick={onClick}>
             Добавить вариант ответа {' '}
-            <img src='../../../public/add_answer.svg' className={styles.addAnswerImg} alt="add answer"/>
+            <AddAnswerImg className={styles.addAnswerImg} />
         </button>
     );
 };
diff --git a/SurveyFrontend/src/components/AddQuestionButton/AddQuestionButton.tsx b/SurveyFrontend/src/components/AddQuestionButton/AddQuestionButton.tsx
index 667ec93..75f1a90 100644
--- a/SurveyFrontend/src/components/AddQuestionButton/AddQuestionButton.tsx
+++ b/SurveyFrontend/src/components/AddQuestionButton/AddQuestionButton.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import styles from './AddQuestionButton.module.css'
+import AddQuestionImg from '../../assets/add_question.svg?react';
 
 interface AddQuestionButtonProps {
     onClick: () => void;
@@ -8,7 +9,7 @@ interface AddQuestionButtonProps {
 const AddQuestionButton: React.FC<AddQuestionButtonProps> = ({onClick}) => {
     return (
         <button className={styles.questionButton} onClick={onClick}>
-            <img src='../../../public/add_question.svg' className={styles.questionButtonImg} alt='add question' />
+            <AddQuestionImg className={styles.questionButtonImg}/>
             <span className={styles.textButton}>Добавить вопрос</span>
         </button>
     );
diff --git a/SurveyFrontend/src/components/AnswerOption/AnswerOption.tsx b/SurveyFrontend/src/components/AnswerOption/AnswerOption.tsx
index c08c213..add22fe 100644
--- a/SurveyFrontend/src/components/AnswerOption/AnswerOption.tsx
+++ b/SurveyFrontend/src/components/AnswerOption/AnswerOption.tsx
@@ -1,10 +1,8 @@
 import React, {useState, useRef, useEffect} from "react";
 import styles from'./AnswerOption.module.css';
-
-const single_selected_response = '../../../public/radio_button_checked.svg';
-const multiple_selected_response = '../../../public/check_box.svg';
-const single_response = '../../../public/radio_button_unchecked.svg';
-const multiple_response ='../../../public/emptyCheckbox.svg';
+import Delete from '../../assets/delete.svg?react';
+import Single from '../../assets/radio_button_unchecked.svg?react';
+import Multiple from '../../assets/emptyCheckbox.svg?react';
 
 interface AnswerOptionProps{
     index: number;
@@ -12,11 +10,11 @@ interface AnswerOptionProps{
     onChange: (value: string) => void;
     onDelete:(index: number) => void;
     selectedType: 'single' | 'multiply';
-    isSelected: boolean;
+    // isSelected: boolean;
     toggleSelect: () => void;
 }
 
-const AnswerOption: React.FC<AnswerOptionProps> = ({index, value, onChange, onDelete, selectedType, isSelected, toggleSelect}) => {
+const AnswerOption: React.FC<AnswerOptionProps> = ({index, value, onChange, onDelete, selectedType, toggleSelect}) => {
     const [currentValue, setCurrentValue] = useState(value);
     const [isEditing, setIsEditing] = useState(false);
 
@@ -70,25 +68,13 @@ const AnswerOption: React.FC<AnswerOptionProps> = ({index, value, onChange, onDe
         }
     }, [isEditing]);
 
-    const getImage = () => {
-        if (selectedType === 'multiply') {
-            return isSelected ? multiple_selected_response : multiple_response;
-        } else {
-            return isSelected ? single_selected_response : single_response;
-        }
-    };
-
     return (
         <div className={styles.answer}>
             <button
                 className={`${styles.buttonMarker} ${isEditing ? styles.editing : ''}`}
                 onClick={toggleSelect}
             >
-                <img
-                    className={styles.answerIcon}
-                    src={getImage()}
-                    alt=""
-                />
+                {selectedType === 'single' ? < Single className={styles.answerIcon} /> : <Multiple className={styles.answerIcon} />}
             </button>
             {isEditing ? (
                 <textarea
@@ -106,7 +92,7 @@ const AnswerOption: React.FC<AnswerOptionProps> = ({index, value, onChange, onDe
                 </button>
             )}
             <button className={styles.deleteButton} onClick={() => onDelete(index)}>
-                <img src='../../../public/delete.svg' alt="Удалить" />
+                <Delete />
             </button>
         </div>
     );
diff --git a/SurveyFrontend/src/components/Logo/Logo.tsx b/SurveyFrontend/src/components/Logo/Logo.tsx
index 5af3dea..529b00b 100644
--- a/SurveyFrontend/src/components/Logo/Logo.tsx
+++ b/SurveyFrontend/src/components/Logo/Logo.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import styles from './Logo.module.css'
+import LogoImg from '../../assets/logo.svg?react'
 
 interface LogoProps {
     href: string;
@@ -9,7 +10,7 @@ interface LogoProps {
 const Logo: React.FC<LogoProps> = ({href, onClick}) => {
     return (
         <a className={styles.logo} href={href} onClick={onClick}>
-            <img src='../../../public/logo.svg' alt="" />
+            <LogoImg/>
         </a>
     );
 };
diff --git a/SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx b/SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx
index 499081b..5c1fd6f 100644
--- a/SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx
+++ b/SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx
@@ -3,6 +3,7 @@ import AnswerOption from '../AnswerOption/AnswerOption';
 import AddAnswerButton from "../AddAnswerButton/AddAnswerButton.tsx";
 import TypeDropdown from "../TypeDropdown/TypeDropdown.tsx";
 import styles from './QuestionItem.module.css'
+import Delete from '../../assets/deleteQuestion.svg?react';
 
 
 interface QuestionItemProps {
@@ -145,7 +146,7 @@ const QuestionItem: React.FC<QuestionItemProps> = ({indexQuestion, initialTextQu
                     />
                     <button className={styles.deleteQuestionButton} onClick={handleDeleteQuestion}>
                         Удалить{/**/}
-                        <img className={styles.basketImg} src='../../../public/deleteQuestion.svg' alt='deleteQuestion' />
+                        <Delete className={styles.basketImg}/>
                     </button>
                 </div>
             </div>
diff --git a/SurveyFrontend/src/components/SurveyInfo/SurveyInfo.tsx b/SurveyFrontend/src/components/SurveyInfo/SurveyInfo.tsx
index fb22d1c..a189cde 100644
--- a/SurveyFrontend/src/components/SurveyInfo/SurveyInfo.tsx
+++ b/SurveyFrontend/src/components/SurveyInfo/SurveyInfo.tsx
@@ -1,5 +1,6 @@
 import React, {useState, useRef, useEffect} from "react";
 import styles from './SurveyInfo.module.css'
+import AddDescripImg from '../../assets/add_circle.svg?react';
 
 const SurveyInfo: React.FC = () => {
     const [descriptionSurvey, setDescriptionSurvey] = useState('');
@@ -109,7 +110,7 @@ const SurveyInfo: React.FC = () => {
                     onClick={handleAddDescriptionClick}
                 >
                     <span className={styles.textButton}>Добавить описание</span>
-                    <img src='../../../public/add_circle.svg' className={styles.descButtonImg} alt='add circle'/>
+                    <AddDescripImg className={styles.descButtonImg}/>
                 </button>
             );
         }
diff --git a/SurveyFrontend/src/components/TypeDropdown/TypeDropdown.tsx b/SurveyFrontend/src/components/TypeDropdown/TypeDropdown.tsx
index 80e85ac..8657e9d 100644
--- a/SurveyFrontend/src/components/TypeDropdown/TypeDropdown.tsx
+++ b/SurveyFrontend/src/components/TypeDropdown/TypeDropdown.tsx
@@ -1,13 +1,10 @@
-import React, { useState, useRef, useEffect } from "react";
-
+import React, {useState, useRef, useEffect} from "react";
+import DropDown from '../../assets/arrow_drop_down.svg?react';
+import DropUp from '../../assets/arrow_drop_up.svg?react';
+import Single from '../../assets/radio_button_checked.svg?react';
+import Multiple from '../../assets/check_box.svg?react';
 import styles from './TypeDropdown.module.css'
 
-const single_selected = '../../../public/radio_button_checked.svg';
-const multiple_selected = '../../../public/check_box.svg';
-
-const arrow_drop_down = '../../../public/arrow_drop_down.svg';
-const arrow_drop_up = '../../../public/arrow_drop_up.svg';
-
 interface TypeDropdownProps {
     selectedType: 'single' | 'multiply';
     onTypeChange: (type: 'single' | 'multiply') => void;
@@ -39,28 +36,12 @@ const TypeDropdown: React.FC<TypeDropdownProps> = ({selectedType, onTypeChange})
         };
     }, [dropdownRef]);
 
-    const getImage = (typeValue: string): string => {
-        if (typeValue === 'multiply') {
-            return multiple_selected;
-        } else {
-            return single_selected;
-        }
-    };
-
     return (
         <div className={styles.dropdownContainer} ref={dropdownRef}>
             <button className={styles.dropdownButton} onClick={handleToggle}>
-                <img
-                    src={getImage(selectedType)}
-                    alt={selectedType === "single" ? "Одиночный выбор" : "Множественный выбор"}
-                    className={styles.selectedTypeIcon}
-                />
+                {selectedType === 'single' ? <Single className={styles.selectedTypeIcon} /> : <Multiple className={styles.selectedTypeIcon} />}
                 {selectedType === "single" ? "Одиночный выбор" : "Множественный выбор"}
-                <img
-                    src={isOpen ? arrow_drop_up : arrow_drop_down}
-                    alt={isOpen ? "Закрыть" : "Открыть"}
-                    className={styles.dropdownArrow}
-                />
+                {isOpen ? <DropUp className={styles.dropdownArrow} /> : <DropDown className={styles.dropdownArrow}/>}
             </button>
 
             {isOpen && (
@@ -68,21 +49,14 @@ const TypeDropdown: React.FC<TypeDropdownProps> = ({selectedType, onTypeChange})
                     <li>
                         <button onClick={() => handleSelect("single")}
                                 className={styles.dropdownItem}>
-                            <img
-                                className={styles.dropdownItemIcon}
-                                src={getImage("single")}
-                                alt=""/>{' '}
+                            <Single className={styles.dropdownItemIcon}/>{' '}
                             Одиночный выбор
                         </button>
                     </li>
                     <li>
                         <button className={styles.dropdownItem}
                                 onClick={() => handleSelect("multiply")}>
-                            <img
-                                src={getImage("multiply")}
-                                alt="Множественный выбор"
-                                className={styles.dropdownItemIcon}
-                            />{' '}
+                            <Multiple className={styles.dropdownItemIcon}/>{' '}
                             Множественный выбор
                         </button>
                     </li>
diff --git a/SurveyFrontend/src/vite-env.d.ts b/SurveyFrontend/src/vite-env.d.ts
index 11f02fe..fa3e1b9 100644
--- a/SurveyFrontend/src/vite-env.d.ts
+++ b/SurveyFrontend/src/vite-env.d.ts
@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />
\ No newline at end of file
diff --git a/SurveyFrontend/vite.config.ts b/SurveyFrontend/vite.config.ts
index 8b0f57b..235286a 100644
--- a/SurveyFrontend/vite.config.ts
+++ b/SurveyFrontend/vite.config.ts
@@ -1,7 +1,8 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import svgr from 'vite-plugin-svgr';
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), svgr()],
 })