From 65bf60e7be2396fd8bdda12c0b6553a02d65cc6b Mon Sep 17 00:00:00 2001
From: Ryczko <konradryczko1@gmail.com>
Date: Tue, 16 Jan 2024 16:36:03 +0100
Subject: [PATCH] Refactor/Features and create page

---
 package-lock.json                             | 213 +++++++++++++----
 package.json                                  |  13 +-
 src/features/account/Account.tsx              |  97 ++++++++
 src/features/application/manager.ts           |  16 +-
 src/features/authorization/LoginCard.tsx      | 100 ++++++++
 src/features/authorization/SignUpCard.tsx     |  80 +++++++
 .../QuestionBlocks/QuestionBlockFactory.tsx   |  99 --------
 .../SurveyOptionsModal/SurveyOptionsModal.tsx |   7 +-
 .../features/SurveyCreator/SurveyCreator.tsx  |  24 ++
 .../ActionButtons/ActionButtons.tsx           |  65 ++++++
 .../AddQuestionButton/AddQuestionButton.tsx   |   4 +-
 .../components/EmojiPicker/EmojiObject.ts     |   0
 .../components/EmojiPicker/EmojiPicker.tsx    |   2 +-
 .../NewQuestionModal/NewQuestionModal.tsx     |   4 +-
 .../components/NewQuestionModalButton.tsx     |   0
 .../ChoiceQuestionBlock.tsx                   |  25 +-
 .../EmojiQuestionBlock/EmojiQuestionBlock.tsx |  27 +--
 .../InputQuestionBlock/InputQuestionBlock.tsx |   0
 .../QuestionBlocks/QuestionBlockFactory.tsx   |  43 ++++
 .../QuestionBlockWrapper.tsx                  |  71 +++---
 .../RateQuestionBlock/RateQuestionBlock.tsx   |   0
 .../QuestionsSection/QuestionsSection.tsx     |  63 ++++++
 .../TitleAndConfigSection.tsx                 |  61 +++++
 .../surveys/features/SurveyCreator/context.ts |  10 +
 .../managers/createSurveyManager.test.ts      |   2 +-
 .../managers/createSurveyManager.ts           |  14 +-
 .../features/SurveyDisplay/SurveyDisplay.tsx  |  58 +++++
 .../AllQuestionsView/AllQuestionsView.tsx     |   4 +-
 .../AnswersComponentFactory.tsx               |  11 +-
 .../ButtonsAnswersComponent.tsx               |   2 +-
 .../ChoiceComponent/ChoiceComponent.tsx       |   0
 .../EmojiButton/EmojiButton.tsx               |   0
 .../EmojiListItem/EmojiListItem.tsx           |   0
 .../AnswersComponent/ListAnswersComponent.tsx |   2 +-
 .../RateComponent/RateComponent.tsx           |   2 +-
 .../StarComponent/StarComponent.tsx           |   0
 .../AnswersComponent/TextAnswersComponent.tsx |   0
 .../OneQuestionView/OneQuestionView.tsx       |   4 +-
 .../SurveyDisplay/components/ThankYou.tsx     |  24 ++
 .../managers/surveyAnswerManager.ts           |   2 +-
 .../features/SurveyList/SurveyList.tsx        |  99 ++++++++
 .../components/SurveyRow/SurveyRow.tsx        |   0
 .../features/SurveyResults/SurveyResults.tsx  | 160 +++++++++++++
 .../components/AnswerHeader/AnswerHeader.tsx  |   2 +-
 .../AnswerTableRow/AnswerTableRow.tsx         |   0
 .../components/DataCard/DataCard.tsx          |   0
 .../ResultsComponents/BarChart/BarChart.tsx   |   4 +-
 .../BarChart/CustomTooltip.tsx                |   0
 .../BarChart/CustomXAxisTick.tsx              |   0
 .../ResultsComponents/PieChart/PieChart.tsx   |   0
 .../ResultsComponents/ResultComponent.tsx     |   4 +-
 .../TextResults/TextResults.tsx               |   2 +-
 .../managers/surveyResultsManager.ts          |   2 +-
 src/pages/404.tsx                             |   6 +-
 src/pages/account/index.tsx                   |  88 +------
 src/pages/login/index.tsx                     |  93 +-------
 src/pages/signup/index.tsx                    |  73 +-----
 src/pages/survey/[surveyId]/index.tsx         |  45 +---
 src/pages/survey/[surveyId]/thank-you.tsx     |  17 +-
 src/pages/survey/answer/[surveyId]/index.tsx  | 148 +-----------
 src/pages/survey/create/[[...surveyId]].tsx   | 214 +-----------------
 src/pages/surveys/index.tsx                   |  88 +------
 src/shared/components/Note/Note.tsx           |  18 ++
 src/shared/constants/surveysConfig.ts         |   4 +-
 64 files changed, 1199 insertions(+), 1017 deletions(-)
 create mode 100644 src/features/account/Account.tsx
 create mode 100644 src/features/authorization/LoginCard.tsx
 create mode 100644 src/features/authorization/SignUpCard.tsx
 delete mode 100644 src/features/surveys/components/QuestionBlocks/QuestionBlockFactory.tsx
 create mode 100644 src/features/surveys/features/SurveyCreator/SurveyCreator.tsx
 create mode 100644 src/features/surveys/features/SurveyCreator/components/ActionButtons/ActionButtons.tsx
 rename src/features/surveys/{ => features/SurveyCreator}/components/AddQuestionButton/AddQuestionButton.tsx (79%)
 rename src/features/surveys/{ => features/SurveyCreator}/components/EmojiPicker/EmojiObject.ts (100%)
 rename src/features/surveys/{ => features/SurveyCreator}/components/EmojiPicker/EmojiPicker.tsx (96%)
 rename src/features/surveys/{ => features/SurveyCreator}/components/NewQuestionModal/NewQuestionModal.tsx (91%)
 rename src/features/surveys/{ => features/SurveyCreator}/components/NewQuestionModal/components/NewQuestionModalButton.tsx (100%)
 rename src/features/surveys/{ => features/SurveyCreator}/components/QuestionBlocks/ChoiceQuestionBlock/ChoiceQuestionBlock.tsx (82%)
 rename src/features/surveys/{ => features/SurveyCreator}/components/QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock.tsx (58%)
 rename src/features/surveys/{ => features/SurveyCreator}/components/QuestionBlocks/InputQuestionBlock/InputQuestionBlock.tsx (100%)
 create mode 100644 src/features/surveys/features/SurveyCreator/components/QuestionBlocks/QuestionBlockFactory.tsx
 rename src/features/surveys/{ => features/SurveyCreator}/components/QuestionBlocks/QuestionBlockWrapper/QuestionBlockWrapper.tsx (74%)
 rename src/features/surveys/{ => features/SurveyCreator}/components/QuestionBlocks/RateQuestionBlock/RateQuestionBlock.tsx (100%)
 create mode 100644 src/features/surveys/features/SurveyCreator/components/QuestionsSection/QuestionsSection.tsx
 create mode 100644 src/features/surveys/features/SurveyCreator/components/TitleAndConfigSection/TitleAndConfigSection.tsx
 create mode 100644 src/features/surveys/features/SurveyCreator/context.ts
 rename src/features/surveys/{ => features/SurveyCreator}/managers/createSurveyManager.test.ts (96%)
 rename src/features/surveys/{ => features/SurveyCreator}/managers/createSurveyManager.ts (95%)
 create mode 100644 src/features/surveys/features/SurveyDisplay/SurveyDisplay.tsx
 rename src/features/surveys/{ => features/SurveyDisplay}/components/AllQuestionsView/AllQuestionsView.tsx (89%)
 rename src/features/surveys/{ => features/SurveyDisplay}/components/AnswersComponent/AnswersComponentFactory.tsx (81%)
 rename src/features/surveys/{ => features/SurveyDisplay}/components/AnswersComponent/ButtonsAnswersComponent.tsx (89%)
 rename src/features/surveys/{ => features/SurveyDisplay}/components/AnswersComponent/ChoiceComponent/ChoiceComponent.tsx (100%)
 rename src/features/surveys/{ => features/SurveyDisplay}/components/AnswersComponent/EmojiButton/EmojiButton.tsx (100%)
 rename src/features/surveys/{ => features/SurveyDisplay}/components/AnswersComponent/EmojiListItem/EmojiListItem.tsx (100%)
 rename src/features/surveys/{ => features/SurveyDisplay}/components/AnswersComponent/ListAnswersComponent.tsx (89%)
 rename src/features/surveys/{ => features/SurveyDisplay}/components/AnswersComponent/RateComponent/RateComponent.tsx (91%)
 rename src/features/surveys/{ => features/SurveyDisplay}/components/AnswersComponent/RateComponent/StarComponent/StarComponent.tsx (100%)
 rename src/features/surveys/{ => features/SurveyDisplay}/components/AnswersComponent/TextAnswersComponent.tsx (100%)
 rename src/features/surveys/{ => features/SurveyDisplay}/components/OneQuestionView/OneQuestionView.tsx (90%)
 create mode 100644 src/features/surveys/features/SurveyDisplay/components/ThankYou.tsx
 rename src/features/surveys/{ => features/SurveyDisplay}/managers/surveyAnswerManager.ts (98%)
 create mode 100644 src/features/surveys/features/SurveyList/SurveyList.tsx
 rename src/features/surveys/{ => features/SurveyList}/components/SurveyRow/SurveyRow.tsx (100%)
 create mode 100644 src/features/surveys/features/SurveyResults/SurveyResults.tsx
 rename src/features/surveys/{ => features/SurveyResults}/components/AnswerHeader/AnswerHeader.tsx (87%)
 rename src/features/surveys/{ => features/SurveyResults}/components/AnswerTableRow/AnswerTableRow.tsx (100%)
 rename src/features/surveys/{ => features/SurveyResults}/components/DataCard/DataCard.tsx (100%)
 rename src/features/surveys/{ => features/SurveyResults}/components/ResultsComponents/BarChart/BarChart.tsx (90%)
 rename src/features/surveys/{ => features/SurveyResults}/components/ResultsComponents/BarChart/CustomTooltip.tsx (100%)
 rename src/features/surveys/{ => features/SurveyResults}/components/ResultsComponents/BarChart/CustomXAxisTick.tsx (100%)
 rename src/features/surveys/{ => features/SurveyResults}/components/ResultsComponents/PieChart/PieChart.tsx (100%)
 rename src/features/surveys/{ => features/SurveyResults}/components/ResultsComponents/ResultComponent.tsx (91%)
 rename src/features/surveys/{ => features/SurveyResults}/components/ResultsComponents/TextResults/TextResults.tsx (93%)
 rename src/features/surveys/{ => features/SurveyResults}/managers/surveyResultsManager.ts (98%)
 create mode 100644 src/shared/components/Note/Note.tsx

diff --git a/package-lock.json b/package-lock.json
index 8cf0db70..f0b785b1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,14 +15,6 @@
         "@heroicons/react": "^1.0.6",
         "@next-auth/prisma-adapter": "^1.0.6",
         "@prisma/client": "^4.14.0",
-        "@testing-library/jest-dom": "^5.16.5",
-        "@testing-library/react": "^14.0.0",
-        "@testing-library/user-event": "^14.4.3",
-        "@types/emoji-mart": "^3.0.9",
-        "@types/jest": "^29.5.0",
-        "@types/node": "^18.15.3",
-        "@types/react": "^18.0.28",
-        "@types/react-dom": "^18.0.11",
         "axios": "^1.6.0",
         "bcrypt": "^5.1.0",
         "clsx": "^1.1.1",
@@ -51,8 +43,13 @@
         "@testing-library/react": "^14.0.0",
         "@testing-library/user-event": "^14.4.3",
         "@types/bcrypt": "^5.0.0",
+        "@types/emoji-mart": "^3.0.9",
+        "@types/jest": "^29.5.0",
+        "@types/node": "^18.15.3",
         "@types/nprogress": "^0.2.0",
+        "@types/react": "^18.0.28",
         "@types/react-beautiful-dnd": "^13.1.4",
+        "@types/react-dom": "^18.0.11",
         "@types/uuid": "^9.0.1",
         "@typescript-eslint/eslint-plugin": "^5.56.0",
         "@typescript-eslint/parser": "^5.56.0",
@@ -118,6 +115,7 @@
       "version": "7.22.13",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz",
       "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==",
+      "dev": true,
       "dependencies": {
         "@babel/highlight": "^7.22.13",
         "chalk": "^2.4.2"
@@ -130,6 +128,7 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
       "dependencies": {
         "color-convert": "^1.9.0"
       },
@@ -141,6 +140,7 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -154,6 +154,7 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
       "dependencies": {
         "color-name": "1.1.3"
       }
@@ -161,12 +162,14 @@
     "node_modules/@babel/code-frame/node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true
     },
     "node_modules/@babel/code-frame/node_modules/escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -175,6 +178,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -183,6 +187,7 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -607,6 +612,7 @@
       "version": "7.22.20",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
       "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
+      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -653,6 +659,7 @@
       "version": "7.22.20",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz",
       "integrity": "sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==",
+      "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.22.20",
         "chalk": "^2.4.2",
@@ -666,6 +673,7 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
       "dependencies": {
         "color-convert": "^1.9.0"
       },
@@ -677,6 +685,7 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -690,6 +699,7 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
       "dependencies": {
         "color-name": "1.1.3"
       }
@@ -697,12 +707,14 @@
     "node_modules/@babel/highlight/node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true
     },
     "node_modules/@babel/highlight/node_modules/escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -711,6 +723,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -719,6 +732,7 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -2676,6 +2690,7 @@
       "version": "29.5.0",
       "resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-29.5.0.tgz",
       "integrity": "sha512-fmKzsidoXQT2KwnrwE0SQq3uj8Z763vzR8LnLBwC2qYWEFpjX8daRsk6rHUM1QvNlEW/UJXNXm59ztmJJWs2Mg==",
+      "dev": true,
       "dependencies": {
         "jest-get-type": "^29.4.3"
       },
@@ -2762,6 +2777,7 @@
       "version": "29.4.3",
       "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.4.3.tgz",
       "integrity": "sha512-VLYKXQmtmuEz6IxJsrZwzG9NvtkQsWNnWMsKxqWNu3+CnfzJQhp0WDDKWLVV9hLKr0l3SLLFRqcYHjhtyuDVxg==",
+      "dev": true,
       "dependencies": {
         "@sinclair/typebox": "^0.25.16"
       },
@@ -2849,6 +2865,7 @@
       "version": "29.5.0",
       "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.5.0.tgz",
       "integrity": "sha512-qbu7kN6czmVRc3xWFQcAN03RAUamgppVUdXrvl1Wr3jlNF93o9mJbGcDWrwGB6ht44u7efB1qCFgVQmca24Uog==",
+      "dev": true,
       "dependencies": {
         "@jest/schemas": "^29.4.3",
         "@types/istanbul-lib-coverage": "^2.0.0",
@@ -3315,7 +3332,8 @@
     "node_modules/@sinclair/typebox": {
       "version": "0.25.24",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.25.24.tgz",
-      "integrity": "sha512-XJfwUVUKDHF5ugKwIcxEgc9k8b7HbznCp6eUfWgu710hMPNIO4aw4/zB5RogDQz8nd6gyCDpU9O/m6qYEWY6yQ=="
+      "integrity": "sha512-XJfwUVUKDHF5ugKwIcxEgc9k8b7HbznCp6eUfWgu710hMPNIO4aw4/zB5RogDQz8nd6gyCDpU9O/m6qYEWY6yQ==",
+      "dev": true
     },
     "node_modules/@sinonjs/commons": {
       "version": "3.0.0",
@@ -3556,6 +3574,7 @@
       "version": "3.0.9",
       "resolved": "https://registry.npmjs.org/@types/emoji-mart/-/emoji-mart-3.0.9.tgz",
       "integrity": "sha512-qdBo/2Y8MXaJ/2spKjDZocuq79GpnOhkwMHnK2GnVFa8WYFgfA+ei6sil3aeWQPCreOKIx9ogPpR5+7MaOqYAA==",
+      "dev": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -3581,12 +3600,14 @@
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
-      "integrity": "sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g=="
+      "integrity": "sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==",
+      "dev": true
     },
     "node_modules/@types/istanbul-lib-report": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
       "integrity": "sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==",
+      "dev": true,
       "dependencies": {
         "@types/istanbul-lib-coverage": "*"
       }
@@ -3595,6 +3616,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
       "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
+      "dev": true,
       "dependencies": {
         "@types/istanbul-lib-report": "*"
       }
@@ -3603,6 +3625,7 @@
       "version": "29.5.1",
       "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.5.1.tgz",
       "integrity": "sha512-tEuVcHrpaixS36w7hpsfLBLpjtMRJUE09/MHXn923LOVojDwyC14cWcfc0rDs0VEfUyYmt/+iX1kxxp+gZMcaQ==",
+      "dev": true,
       "dependencies": {
         "expect": "^29.0.0",
         "pretty-format": "^29.0.0"
@@ -3612,6 +3635,7 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -3623,6 +3647,7 @@
       "version": "29.5.0",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.5.0.tgz",
       "integrity": "sha512-V2mGkI31qdttvTFX7Mt4efOqHXqJWMu4/r66Xh3Z3BwZaPfPJgp6/gbwoujRpPUtfEF6AUUWx3Jim3GCw5g/Qw==",
+      "dev": true,
       "dependencies": {
         "@jest/schemas": "^29.4.3",
         "ansi-styles": "^5.0.0",
@@ -3635,7 +3660,8 @@
     "node_modules/@types/jest/node_modules/react-is": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+      "dev": true
     },
     "node_modules/@types/jsdom": {
       "version": "20.0.1",
@@ -3663,7 +3689,8 @@
     "node_modules/@types/node": {
       "version": "18.17.18",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.17.18.tgz",
-      "integrity": "sha512-/4QOuy3ZpV7Ya1GTRz5CYSz3DgkKpyUptXuQ5PPce7uuyJAOR7r9FhkmxJfvcNUXyklbC63a+YvB3jxy7s9ngw=="
+      "integrity": "sha512-/4QOuy3ZpV7Ya1GTRz5CYSz3DgkKpyUptXuQ5PPce7uuyJAOR7r9FhkmxJfvcNUXyklbC63a+YvB3jxy7s9ngw==",
+      "dev": true
     },
     "node_modules/@types/nprogress": {
       "version": "0.2.0",
@@ -3711,6 +3738,7 @@
       "version": "18.2.4",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.4.tgz",
       "integrity": "sha512-G2mHoTMTL4yoydITgOGwWdWMVd8sNgyEP85xVmMKAPUBwQWm9wBPQUmvbeF4V3WBY1P7mmL4BkjQ0SqUpf1snw==",
+      "dev": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -3752,7 +3780,8 @@
     "node_modules/@types/stack-utils": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
-      "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
+      "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
+      "dev": true
     },
     "node_modules/@types/testing-library__jest-dom": {
       "version": "5.14.5",
@@ -3779,6 +3808,7 @@
       "version": "17.0.24",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.24.tgz",
       "integrity": "sha512-6i0aC7jV6QzQB8ne1joVZ0eSFIstHsCrobmOtghM11yGlH0j43FKL2UhWdELkyps0zuf7qVTUVCCR+tgSlyLLw==",
+      "dev": true,
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -3786,7 +3816,8 @@
     "node_modules/@types/yargs-parser": {
       "version": "21.0.0",
       "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz",
-      "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA=="
+      "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==",
+      "dev": true
     },
     "node_modules/@types/yauzl": {
       "version": "2.10.0",
@@ -4144,6 +4175,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -4955,6 +4987,7 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -5033,6 +5066,7 @@
       "version": "3.8.0",
       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.8.0.tgz",
       "integrity": "sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -5153,6 +5187,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -5163,7 +5198,8 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
     },
     "node_modules/color-support": {
       "version": "1.1.3",
@@ -5921,6 +5957,7 @@
       "version": "29.4.3",
       "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.4.3.tgz",
       "integrity": "sha512-ofrBgwpPhCD85kMKtE9RYFFq6OC1A89oW2vvgWZNCwxrUpRUILopY7lsYyMDSjc8g6U6aiO0Qubg6r4Wgt5ZnA==",
+      "dev": true,
       "engines": {
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
@@ -7054,6 +7091,7 @@
       "version": "29.5.0",
       "resolved": "https://registry.npmjs.org/expect/-/expect-29.5.0.tgz",
       "integrity": "sha512-yM7xqUrCO2JdpFo4XpM82t+PJBFybdqoQuJLDGeDX2ij8NZzqRHyu3Hp188/JX7SWqud+7t4MUdvcgGBICMHZg==",
+      "dev": true,
       "dependencies": {
         "@jest/expect-utils": "^29.5.0",
         "jest-get-type": "^29.4.3",
@@ -7755,6 +7793,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -8872,6 +8911,7 @@
       "version": "29.5.0",
       "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.5.0.tgz",
       "integrity": "sha512-LtxijLLZBduXnHSniy0WMdaHjmQnt3g5sa16W4p0HqukYTTsyTW3GD1q41TyGl5YFXj/5B2U6dlh5FM1LIMgxw==",
+      "dev": true,
       "dependencies": {
         "chalk": "^4.0.0",
         "diff-sequences": "^29.4.3",
@@ -8886,6 +8926,7 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -8897,6 +8938,7 @@
       "version": "29.5.0",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.5.0.tgz",
       "integrity": "sha512-V2mGkI31qdttvTFX7Mt4efOqHXqJWMu4/r66Xh3Z3BwZaPfPJgp6/gbwoujRpPUtfEF6AUUWx3Jim3GCw5g/Qw==",
+      "dev": true,
       "dependencies": {
         "@jest/schemas": "^29.4.3",
         "ansi-styles": "^5.0.0",
@@ -8909,7 +8951,8 @@
     "node_modules/jest-diff/node_modules/react-is": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+      "dev": true
     },
     "node_modules/jest-docblock": {
       "version": "29.4.3",
@@ -9019,6 +9062,7 @@
       "version": "29.4.3",
       "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.4.3.tgz",
       "integrity": "sha512-J5Xez4nRRMjk8emnTpWrlkyb9pfRQQanDrvWHhsR1+VUfbwxi30eVcZFlcdGInRibU4G5LwHXpI7IRHU0CY+gg==",
+      "dev": true,
       "engines": {
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
@@ -9097,6 +9141,7 @@
       "version": "29.5.0",
       "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-29.5.0.tgz",
       "integrity": "sha512-lecRtgm/rjIK0CQ7LPQwzCs2VwW6WAahA55YBuI+xqmhm7LAaxokSB8C97yJeYyT+HvQkH741StzpU41wohhWw==",
+      "dev": true,
       "dependencies": {
         "chalk": "^4.0.0",
         "jest-diff": "^29.5.0",
@@ -9111,6 +9156,7 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -9122,6 +9168,7 @@
       "version": "29.5.0",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.5.0.tgz",
       "integrity": "sha512-V2mGkI31qdttvTFX7Mt4efOqHXqJWMu4/r66Xh3Z3BwZaPfPJgp6/gbwoujRpPUtfEF6AUUWx3Jim3GCw5g/Qw==",
+      "dev": true,
       "dependencies": {
         "@jest/schemas": "^29.4.3",
         "ansi-styles": "^5.0.0",
@@ -9134,12 +9181,14 @@
     "node_modules/jest-matcher-utils/node_modules/react-is": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+      "dev": true
     },
     "node_modules/jest-message-util": {
       "version": "29.5.0",
       "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-29.5.0.tgz",
       "integrity": "sha512-Kijeg9Dag6CKtIDA7O21zNTACqD5MD/8HfIV8pdD94vFyFuer52SigdC3IQMhab3vACxXMiFk+yMHNdbqtyTGA==",
+      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.12.13",
         "@jest/types": "^29.5.0",
@@ -9159,6 +9208,7 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -9170,6 +9220,7 @@
       "version": "29.5.0",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.5.0.tgz",
       "integrity": "sha512-V2mGkI31qdttvTFX7Mt4efOqHXqJWMu4/r66Xh3Z3BwZaPfPJgp6/gbwoujRpPUtfEF6AUUWx3Jim3GCw5g/Qw==",
+      "dev": true,
       "dependencies": {
         "@jest/schemas": "^29.4.3",
         "ansi-styles": "^5.0.0",
@@ -9182,7 +9233,8 @@
     "node_modules/jest-message-util/node_modules/react-is": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+      "dev": true
     },
     "node_modules/jest-mock": {
       "version": "29.5.0",
@@ -9392,6 +9444,7 @@
       "version": "29.5.0",
       "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.5.0.tgz",
       "integrity": "sha512-RYMgG/MTadOr5t8KdhejfvUU82MxsCu5MF6KuDUHl+NuwzUt+Sm6jJWxTJVrDR1j5M/gJVCPKQEpWXY+yIQ6lQ==",
+      "dev": true,
       "dependencies": {
         "@jest/types": "^29.5.0",
         "@types/node": "*",
@@ -10011,6 +10064,7 @@
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
       "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "dev": true,
       "dependencies": {
         "braces": "^3.0.2",
         "picomatch": "^2.3.1"
@@ -12087,6 +12141,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
       "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -12179,6 +12234,7 @@
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz",
       "integrity": "sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==",
+      "dev": true,
       "dependencies": {
         "escape-string-regexp": "^2.0.0"
       },
@@ -12190,6 +12246,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
       "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -12544,6 +12601,7 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -13587,6 +13645,7 @@
       "version": "7.22.13",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz",
       "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==",
+      "dev": true,
       "requires": {
         "@babel/highlight": "^7.22.13",
         "chalk": "^2.4.2"
@@ -13596,6 +13655,7 @@
           "version": "3.2.1",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
           "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
           "requires": {
             "color-convert": "^1.9.0"
           }
@@ -13604,6 +13664,7 @@
           "version": "2.4.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
           "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
           "requires": {
             "ansi-styles": "^3.2.1",
             "escape-string-regexp": "^1.0.5",
@@ -13614,6 +13675,7 @@
           "version": "1.9.3",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
           "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "dev": true,
           "requires": {
             "color-name": "1.1.3"
           }
@@ -13621,22 +13683,26 @@
         "color-name": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+          "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+          "dev": true
         },
         "escape-string-regexp": {
           "version": "1.0.5",
           "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+          "dev": true
         },
         "has-flag": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="
+          "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+          "dev": true
         },
         "supports-color": {
           "version": "5.5.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
           "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
           "requires": {
             "has-flag": "^3.0.0"
           }
@@ -13958,7 +14024,8 @@
     "@babel/helper-validator-identifier": {
       "version": "7.22.20",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
-      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A=="
+      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
+      "dev": true
     },
     "@babel/helper-validator-option": {
       "version": "7.21.0",
@@ -13993,6 +14060,7 @@
       "version": "7.22.20",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz",
       "integrity": "sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==",
+      "dev": true,
       "requires": {
         "@babel/helper-validator-identifier": "^7.22.20",
         "chalk": "^2.4.2",
@@ -14003,6 +14071,7 @@
           "version": "3.2.1",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
           "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
           "requires": {
             "color-convert": "^1.9.0"
           }
@@ -14011,6 +14080,7 @@
           "version": "2.4.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
           "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
           "requires": {
             "ansi-styles": "^3.2.1",
             "escape-string-regexp": "^1.0.5",
@@ -14021,6 +14091,7 @@
           "version": "1.9.3",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
           "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "dev": true,
           "requires": {
             "color-name": "1.1.3"
           }
@@ -14028,22 +14099,26 @@
         "color-name": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+          "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+          "dev": true
         },
         "escape-string-regexp": {
           "version": "1.0.5",
           "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+          "dev": true
         },
         "has-flag": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="
+          "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+          "dev": true
         },
         "supports-color": {
           "version": "5.5.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
           "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
           "requires": {
             "has-flag": "^3.0.0"
           }
@@ -15424,6 +15499,7 @@
       "version": "29.5.0",
       "resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-29.5.0.tgz",
       "integrity": "sha512-fmKzsidoXQT2KwnrwE0SQq3uj8Z763vzR8LnLBwC2qYWEFpjX8daRsk6rHUM1QvNlEW/UJXNXm59ztmJJWs2Mg==",
+      "dev": true,
       "requires": {
         "jest-get-type": "^29.4.3"
       }
@@ -15490,6 +15566,7 @@
       "version": "29.4.3",
       "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.4.3.tgz",
       "integrity": "sha512-VLYKXQmtmuEz6IxJsrZwzG9NvtkQsWNnWMsKxqWNu3+CnfzJQhp0WDDKWLVV9hLKr0l3SLLFRqcYHjhtyuDVxg==",
+      "dev": true,
       "requires": {
         "@sinclair/typebox": "^0.25.16"
       }
@@ -15564,6 +15641,7 @@
       "version": "29.5.0",
       "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.5.0.tgz",
       "integrity": "sha512-qbu7kN6czmVRc3xWFQcAN03RAUamgppVUdXrvl1Wr3jlNF93o9mJbGcDWrwGB6ht44u7efB1qCFgVQmca24Uog==",
+      "dev": true,
       "requires": {
         "@jest/schemas": "^29.4.3",
         "@types/istanbul-lib-coverage": "^2.0.0",
@@ -15914,7 +15992,8 @@
     "@sinclair/typebox": {
       "version": "0.25.24",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.25.24.tgz",
-      "integrity": "sha512-XJfwUVUKDHF5ugKwIcxEgc9k8b7HbznCp6eUfWgu710hMPNIO4aw4/zB5RogDQz8nd6gyCDpU9O/m6qYEWY6yQ=="
+      "integrity": "sha512-XJfwUVUKDHF5ugKwIcxEgc9k8b7HbznCp6eUfWgu710hMPNIO4aw4/zB5RogDQz8nd6gyCDpU9O/m6qYEWY6yQ==",
+      "dev": true
     },
     "@sinonjs/commons": {
       "version": "3.0.0",
@@ -16132,6 +16211,7 @@
       "version": "3.0.9",
       "resolved": "https://registry.npmjs.org/@types/emoji-mart/-/emoji-mart-3.0.9.tgz",
       "integrity": "sha512-qdBo/2Y8MXaJ/2spKjDZocuq79GpnOhkwMHnK2GnVFa8WYFgfA+ei6sil3aeWQPCreOKIx9ogPpR5+7MaOqYAA==",
+      "dev": true,
       "requires": {
         "@types/react": "*"
       }
@@ -16157,12 +16237,14 @@
     "@types/istanbul-lib-coverage": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
-      "integrity": "sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g=="
+      "integrity": "sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==",
+      "dev": true
     },
     "@types/istanbul-lib-report": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
       "integrity": "sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==",
+      "dev": true,
       "requires": {
         "@types/istanbul-lib-coverage": "*"
       }
@@ -16171,6 +16253,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
       "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
+      "dev": true,
       "requires": {
         "@types/istanbul-lib-report": "*"
       }
@@ -16179,6 +16262,7 @@
       "version": "29.5.1",
       "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.5.1.tgz",
       "integrity": "sha512-tEuVcHrpaixS36w7hpsfLBLpjtMRJUE09/MHXn923LOVojDwyC14cWcfc0rDs0VEfUyYmt/+iX1kxxp+gZMcaQ==",
+      "dev": true,
       "requires": {
         "expect": "^29.0.0",
         "pretty-format": "^29.0.0"
@@ -16187,12 +16271,14 @@
         "ansi-styles": {
           "version": "5.2.0",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-          "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="
+          "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+          "dev": true
         },
         "pretty-format": {
           "version": "29.5.0",
           "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.5.0.tgz",
           "integrity": "sha512-V2mGkI31qdttvTFX7Mt4efOqHXqJWMu4/r66Xh3Z3BwZaPfPJgp6/gbwoujRpPUtfEF6AUUWx3Jim3GCw5g/Qw==",
+          "dev": true,
           "requires": {
             "@jest/schemas": "^29.4.3",
             "ansi-styles": "^5.0.0",
@@ -16202,7 +16288,8 @@
         "react-is": {
           "version": "18.2.0",
           "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+          "dev": true
         }
       }
     },
@@ -16232,7 +16319,8 @@
     "@types/node": {
       "version": "18.17.18",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.17.18.tgz",
-      "integrity": "sha512-/4QOuy3ZpV7Ya1GTRz5CYSz3DgkKpyUptXuQ5PPce7uuyJAOR7r9FhkmxJfvcNUXyklbC63a+YvB3jxy7s9ngw=="
+      "integrity": "sha512-/4QOuy3ZpV7Ya1GTRz5CYSz3DgkKpyUptXuQ5PPce7uuyJAOR7r9FhkmxJfvcNUXyklbC63a+YvB3jxy7s9ngw==",
+      "dev": true
     },
     "@types/nprogress": {
       "version": "0.2.0",
@@ -16280,6 +16368,7 @@
       "version": "18.2.4",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.4.tgz",
       "integrity": "sha512-G2mHoTMTL4yoydITgOGwWdWMVd8sNgyEP85xVmMKAPUBwQWm9wBPQUmvbeF4V3WBY1P7mmL4BkjQ0SqUpf1snw==",
+      "dev": true,
       "requires": {
         "@types/react": "*"
       }
@@ -16321,7 +16410,8 @@
     "@types/stack-utils": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
-      "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
+      "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
+      "dev": true
     },
     "@types/testing-library__jest-dom": {
       "version": "5.14.5",
@@ -16348,6 +16438,7 @@
       "version": "17.0.24",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.24.tgz",
       "integrity": "sha512-6i0aC7jV6QzQB8ne1joVZ0eSFIstHsCrobmOtghM11yGlH0j43FKL2UhWdELkyps0zuf7qVTUVCCR+tgSlyLLw==",
+      "dev": true,
       "requires": {
         "@types/yargs-parser": "*"
       }
@@ -16355,7 +16446,8 @@
     "@types/yargs-parser": {
       "version": "21.0.0",
       "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz",
-      "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA=="
+      "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==",
+      "dev": true
     },
     "@types/yauzl": {
       "version": "2.10.0",
@@ -16577,6 +16669,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
       "requires": {
         "color-convert": "^2.0.1"
       }
@@ -17156,6 +17249,7 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
       "requires": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -17206,7 +17300,8 @@
     "ci-info": {
       "version": "3.8.0",
       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.8.0.tgz",
-      "integrity": "sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw=="
+      "integrity": "sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==",
+      "dev": true
     },
     "cjs-module-lexer": {
       "version": "1.2.2",
@@ -17291,6 +17386,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
       "requires": {
         "color-name": "~1.1.4"
       }
@@ -17298,7 +17394,8 @@
     "color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
     },
     "color-support": {
       "version": "1.1.3",
@@ -17858,7 +17955,8 @@
     "diff-sequences": {
       "version": "29.4.3",
       "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.4.3.tgz",
-      "integrity": "sha512-ofrBgwpPhCD85kMKtE9RYFFq6OC1A89oW2vvgWZNCwxrUpRUILopY7lsYyMDSjc8g6U6aiO0Qubg6r4Wgt5ZnA=="
+      "integrity": "sha512-ofrBgwpPhCD85kMKtE9RYFFq6OC1A89oW2vvgWZNCwxrUpRUILopY7lsYyMDSjc8g6U6aiO0Qubg6r4Wgt5ZnA==",
+      "dev": true
     },
     "dir-glob": {
       "version": "3.0.1",
@@ -18706,6 +18804,7 @@
       "version": "29.5.0",
       "resolved": "https://registry.npmjs.org/expect/-/expect-29.5.0.tgz",
       "integrity": "sha512-yM7xqUrCO2JdpFo4XpM82t+PJBFybdqoQuJLDGeDX2ij8NZzqRHyu3Hp188/JX7SWqud+7t4MUdvcgGBICMHZg==",
+      "dev": true,
       "requires": {
         "@jest/expect-utils": "^29.5.0",
         "jest-get-type": "^29.4.3",
@@ -19235,7 +19334,8 @@
     "has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true
     },
     "has-property-descriptors": {
       "version": "1.0.0",
@@ -20000,6 +20100,7 @@
       "version": "29.5.0",
       "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.5.0.tgz",
       "integrity": "sha512-LtxijLLZBduXnHSniy0WMdaHjmQnt3g5sa16W4p0HqukYTTsyTW3GD1q41TyGl5YFXj/5B2U6dlh5FM1LIMgxw==",
+      "dev": true,
       "requires": {
         "chalk": "^4.0.0",
         "diff-sequences": "^29.4.3",
@@ -20010,12 +20111,14 @@
         "ansi-styles": {
           "version": "5.2.0",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-          "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="
+          "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+          "dev": true
         },
         "pretty-format": {
           "version": "29.5.0",
           "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.5.0.tgz",
           "integrity": "sha512-V2mGkI31qdttvTFX7Mt4efOqHXqJWMu4/r66Xh3Z3BwZaPfPJgp6/gbwoujRpPUtfEF6AUUWx3Jim3GCw5g/Qw==",
+          "dev": true,
           "requires": {
             "@jest/schemas": "^29.4.3",
             "ansi-styles": "^5.0.0",
@@ -20025,7 +20128,8 @@
         "react-is": {
           "version": "18.2.0",
           "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+          "dev": true
         }
       }
     },
@@ -20109,7 +20213,8 @@
     "jest-get-type": {
       "version": "29.4.3",
       "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.4.3.tgz",
-      "integrity": "sha512-J5Xez4nRRMjk8emnTpWrlkyb9pfRQQanDrvWHhsR1+VUfbwxi30eVcZFlcdGInRibU4G5LwHXpI7IRHU0CY+gg=="
+      "integrity": "sha512-J5Xez4nRRMjk8emnTpWrlkyb9pfRQQanDrvWHhsR1+VUfbwxi30eVcZFlcdGInRibU4G5LwHXpI7IRHU0CY+gg==",
+      "dev": true
     },
     "jest-haste-map": {
       "version": "29.5.0",
@@ -20170,6 +20275,7 @@
       "version": "29.5.0",
       "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-29.5.0.tgz",
       "integrity": "sha512-lecRtgm/rjIK0CQ7LPQwzCs2VwW6WAahA55YBuI+xqmhm7LAaxokSB8C97yJeYyT+HvQkH741StzpU41wohhWw==",
+      "dev": true,
       "requires": {
         "chalk": "^4.0.0",
         "jest-diff": "^29.5.0",
@@ -20180,12 +20286,14 @@
         "ansi-styles": {
           "version": "5.2.0",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-          "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="
+          "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+          "dev": true
         },
         "pretty-format": {
           "version": "29.5.0",
           "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.5.0.tgz",
           "integrity": "sha512-V2mGkI31qdttvTFX7Mt4efOqHXqJWMu4/r66Xh3Z3BwZaPfPJgp6/gbwoujRpPUtfEF6AUUWx3Jim3GCw5g/Qw==",
+          "dev": true,
           "requires": {
             "@jest/schemas": "^29.4.3",
             "ansi-styles": "^5.0.0",
@@ -20195,7 +20303,8 @@
         "react-is": {
           "version": "18.2.0",
           "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+          "dev": true
         }
       }
     },
@@ -20203,6 +20312,7 @@
       "version": "29.5.0",
       "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-29.5.0.tgz",
       "integrity": "sha512-Kijeg9Dag6CKtIDA7O21zNTACqD5MD/8HfIV8pdD94vFyFuer52SigdC3IQMhab3vACxXMiFk+yMHNdbqtyTGA==",
+      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.12.13",
         "@jest/types": "^29.5.0",
@@ -20218,12 +20328,14 @@
         "ansi-styles": {
           "version": "5.2.0",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-          "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="
+          "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+          "dev": true
         },
         "pretty-format": {
           "version": "29.5.0",
           "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.5.0.tgz",
           "integrity": "sha512-V2mGkI31qdttvTFX7Mt4efOqHXqJWMu4/r66Xh3Z3BwZaPfPJgp6/gbwoujRpPUtfEF6AUUWx3Jim3GCw5g/Qw==",
+          "dev": true,
           "requires": {
             "@jest/schemas": "^29.4.3",
             "ansi-styles": "^5.0.0",
@@ -20233,7 +20345,8 @@
         "react-is": {
           "version": "18.2.0",
           "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+          "dev": true
         }
       }
     },
@@ -20407,6 +20520,7 @@
       "version": "29.5.0",
       "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.5.0.tgz",
       "integrity": "sha512-RYMgG/MTadOr5t8KdhejfvUU82MxsCu5MF6KuDUHl+NuwzUt+Sm6jJWxTJVrDR1j5M/gJVCPKQEpWXY+yIQ6lQ==",
+      "dev": true,
       "requires": {
         "@jest/types": "^29.5.0",
         "@types/node": "*",
@@ -20886,6 +21000,7 @@
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
       "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "dev": true,
       "requires": {
         "braces": "^3.0.2",
         "picomatch": "^2.3.1"
@@ -22362,7 +22477,8 @@
     "slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true
     },
     "slice-ansi": {
       "version": "3.0.0",
@@ -22432,6 +22548,7 @@
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz",
       "integrity": "sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==",
+      "dev": true,
       "requires": {
         "escape-string-regexp": "^2.0.0"
       },
@@ -22439,7 +22556,8 @@
         "escape-string-regexp": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
-          "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w=="
+          "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+          "dev": true
         }
       }
     },
@@ -22703,6 +22821,7 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
       "requires": {
         "has-flag": "^4.0.0"
       }
diff --git a/package.json b/package.json
index 7f6cd580..aff10dbf 100644
--- a/package.json
+++ b/package.json
@@ -24,14 +24,6 @@
     "@heroicons/react": "^1.0.6",
     "@next-auth/prisma-adapter": "^1.0.6",
     "@prisma/client": "^4.14.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/emoji-mart": "^3.0.9",
-    "@types/jest": "^29.5.0",
-    "@types/node": "^18.15.3",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
     "axios": "^1.6.0",
     "bcrypt": "^5.1.0",
     "clsx": "^1.1.1",
@@ -60,8 +52,13 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/bcrypt": "^5.0.0",
+    "@types/emoji-mart": "^3.0.9",
+    "@types/jest": "^29.5.0",
+    "@types/node": "^18.15.3",
     "@types/nprogress": "^0.2.0",
+    "@types/react": "^18.0.28",
     "@types/react-beautiful-dnd": "^13.1.4",
+    "@types/react-dom": "^18.0.11",
     "@types/uuid": "^9.0.1",
     "@typescript-eslint/eslint-plugin": "^5.56.0",
     "@typescript-eslint/parser": "^5.56.0",
diff --git a/src/features/account/Account.tsx b/src/features/account/Account.tsx
new file mode 100644
index 00000000..8258237b
--- /dev/null
+++ b/src/features/account/Account.tsx
@@ -0,0 +1,97 @@
+import { TrashIcon } from '@heroicons/react/outline';
+
+import useTranslation from 'next-translate/useTranslation';
+import { useAccountManager } from 'features/account/accountManager';
+import Button, { ButtonVariant } from 'shared/components/Button/Button';
+import StyledDialog from 'shared/components/StyledDialog/StyledDialog';
+import Avatar from 'shared/components/Avatar/Avatar';
+import { formatDateDistance } from 'shared/utilities/convertTime';
+import Header from 'shared/components/Header/Header';
+
+export default function Account() {
+  const { t } = useTranslation('account');
+
+  const {
+    user,
+    isOpen,
+    openDeleteModal,
+    closeDeleteModal,
+    handleOnAccountDelete,
+    isRemoving,
+  } = useAccountManager();
+
+  return (
+    <>
+      <Header>Your account</Header>
+
+      {user ? (
+        <div className="mt-4 flex w-full items-center justify-center gap-12 text-left">
+          <Avatar size={160} src={user.image} classNames="border" />
+
+          <div className="mb-4">
+            <h2 className="mb-2 text-2xl">{user?.name}</h2>
+            <p>{user?.email}</p>
+            <p>Account created: {formatDateDistance(user.createdAt)}</p>
+          </div>
+        </div>
+      ) : (
+        <></>
+      )}
+
+      {process.env.NEXT_PUBLIC_REMOVE_ACCOUNT && (
+        <>
+          <div className="flex flex-col items-center justify-center space-y-2">
+            <div className="flex w-full md:ml-2 md:w-auto">
+              <Button
+                variant={ButtonVariant.DANGER}
+                title={t('deleteAccountButtonTitle')}
+                className="ml-2 mt-2 w-full justify-center px-3 sm:mt-0 md:w-auto"
+                onClick={openDeleteModal}
+                icon={<TrashIcon className="h-5 w-5" />}
+              >
+                {t('deleteAccountButton')}
+              </Button>
+            </div>
+          </div>
+          <StyledDialog
+            isOpen={isOpen}
+            onClose={closeDeleteModal}
+            title={t('dialogTitle')}
+            content={
+              <>
+                <div className="mt-2">
+                  <p className="text-sm text-red-500">
+                    {t('dialogContentFirst')}&nbsp;
+                    <span className="font-bold">
+                      {t('dialogContentSecond')}
+                    </span>{' '}
+                    {t('dialogContentThird')}
+                  </p>
+                </div>
+                <div className="mt-6 flex justify-between space-x-3">
+                  <Button
+                    variant={ButtonVariant.SECONDARY}
+                    onClick={closeDeleteModal}
+                    className="uppercase"
+                    disabled={isRemoving}
+                  >
+                    {t('buttonCancle')}
+                  </Button>
+                  <Button
+                    variant={ButtonVariant.DANGER}
+                    onClick={handleOnAccountDelete}
+                    icon={<TrashIcon className="h-5 w-5" />}
+                    className="uppercase"
+                    isLoading={isRemoving}
+                  >
+                    {t('buttonConfirm')}
+                  </Button>
+                </div>
+              </>
+            }
+          />
+        </>
+      )}
+    </>
+  );
+}
diff --git a/src/features/application/manager.ts b/src/features/application/manager.ts
index 9b840dd8..77028617 100644
--- a/src/features/application/manager.ts
+++ b/src/features/application/manager.ts
@@ -6,18 +6,17 @@ import data from '@emoji-mart/data/sets/14/apple.json';
 import { init as emojisInit } from 'emoji-mart';
 import { EMOJI_STYLE, customEmojisData } from 'shared/constants/emojisConfig';
 
-export interface ApplicationManager {
-  user: User | undefined;
-  loading: boolean;
-  error: boolean;
-}
-
-export const useApplicationManager = (): ApplicationManager => {
+export const useApplicationManager = () => {
   const [loading, setIsLoading] = useState(true);
   const [error, setError] = useState(false);
   const [user, setUser] = useState<User>();
+  const [isBrowser, setIsBrowser] = useState(false);
 
   useEffect(() => {
+    if (typeof window !== 'undefined') {
+      setIsBrowser(true);
+    }
+
     init();
   }, []);
 
@@ -37,5 +36,8 @@ export const useApplicationManager = (): ApplicationManager => {
     user,
     loading,
     error,
+    isBrowser,
   };
 };
+
+export type ApplicationManager = ReturnType<typeof useApplicationManager>;
diff --git a/src/features/authorization/LoginCard.tsx b/src/features/authorization/LoginCard.tsx
new file mode 100644
index 00000000..8001a5d7
--- /dev/null
+++ b/src/features/authorization/LoginCard.tsx
@@ -0,0 +1,100 @@
+import { Form, Formik } from 'formik';
+import Link from 'next/link';
+import Header from 'shared/components/Header/Header';
+import LoginButton from 'shared/components/LoginButton/LoginButton';
+import Input from 'shared/components/Input/Input';
+import { useLoginManager } from 'features/authorization/managers/loginManager';
+import Github from '../../../public/images/github.svg';
+import Google from '../../../public/images/google.svg';
+import useTranslation from 'next-translate/useTranslation';
+import AuthFormWrapper from 'features/authorization/components/AuthFormWrapper';
+
+export default function LoginCard() {
+  const { t } = useTranslation('login');
+
+  const {
+    initialValues,
+    LoginSchema,
+    onSubmit,
+    onGoogleLogin,
+    onGithubLogin,
+    isSubmitting,
+    isGoogleLoading,
+    isGithubLoading,
+  } = useLoginManager();
+
+  return (
+    <AuthFormWrapper>
+      <Header>{t('login:heading')}</Header>
+      <Formik
+        initialValues={initialValues}
+        onSubmit={onSubmit}
+        validationSchema={LoginSchema}
+      >
+        {({ values, errors, handleChange, handleSubmit, touched }) => (
+          <Form className="flex w-full flex-col">
+            <LoginButton
+              isLoading={isGoogleLoading}
+              image={Google}
+              onClick={onGoogleLogin}
+            >
+              {t('login:googleButton')}
+            </LoginButton>
+            <LoginButton
+              image={Github}
+              isLoading={isGithubLoading}
+              onClick={onGithubLogin}
+              className="mb-3"
+            >
+              {t('login:githubButton')}
+            </LoginButton>
+            <p>{t('login:or')}</p>
+
+            <Input
+              type="email"
+              value={values.email}
+              required
+              error={touched.email ? errors.email : undefined}
+              placeholder={t('login:email')}
+              className="!mb-1 mt-3"
+              onChange={handleChange('email')}
+            />
+            <Input
+              type="password"
+              value={values.password}
+              error={touched.password ? errors.password : undefined}
+              required
+              placeholder={t('login:password')}
+              className="!my-1"
+              onChange={handleChange('password')}
+            />
+
+            {!!errors.message && (
+              <p className="mb-4 max-w-sm self-center text-center text-sm text-red-300">
+                {errors.message}
+              </p>
+            )}
+            <div className="flex flex-col items-center justify-center">
+              <LoginButton
+                className="mb-2 mt-1 border-indigo-200 !bg-indigo-200 !text-indigo-900 hover:!bg-indigo-300"
+                type="submit"
+                onClick={handleSubmit}
+                isLoading={isSubmitting}
+              >
+                {t('login:signInButton')}
+              </LoginButton>
+            </div>
+            <Link scroll={false} href={'/signup'} passHref>
+              <p
+                data-test-id="signup-link"
+                className="mt-2 text-center text-sm text-zinc-600 underline hover:cursor-pointer"
+              >
+                {t('login:dontHaveAccount')}
+              </p>
+            </Link>
+          </Form>
+        )}
+      </Formik>
+    </AuthFormWrapper>
+  );
+}
diff --git a/src/features/authorization/SignUpCard.tsx b/src/features/authorization/SignUpCard.tsx
new file mode 100644
index 00000000..b8ea4ca4
--- /dev/null
+++ b/src/features/authorization/SignUpCard.tsx
@@ -0,0 +1,80 @@
+import { Form, Formik } from 'formik';
+import Link from 'next/link';
+import Header from 'shared/components/Header/Header';
+import LoginButton from 'shared/components/LoginButton/LoginButton';
+import Input from 'shared/components/Input/Input';
+import { useRegisterManager } from 'features/authorization/managers/registerManager';
+import useTranslation from 'next-translate/useTranslation';
+import AuthFormWrapper from 'features/authorization/components/AuthFormWrapper';
+
+export default function SignUpCard() {
+  const { t } = useTranslation('signup');
+
+  const { initialValues, onSubmit, SignupSchema, isRegistering } =
+    useRegisterManager();
+
+  return (
+    <AuthFormWrapper>
+      <Header>{t('heading')}</Header>
+      <Formik
+        initialValues={initialValues}
+        onSubmit={onSubmit}
+        validationSchema={SignupSchema}
+      >
+        {({ values, errors, handleChange, handleSubmit, touched }) => (
+          <Form className="flex w-full flex-col">
+            <Input
+              type="text"
+              name="name"
+              value={values.name}
+              required
+              error={touched.name ? errors.name : undefined}
+              placeholder={t('name')}
+              onChange={handleChange('name')}
+              className="!my-1"
+            />
+            <Input
+              type="email"
+              className="!my-1"
+              value={values.email}
+              required
+              error={touched.email ? errors.email : undefined}
+              placeholder={t('email')}
+              onChange={handleChange('email')}
+            />
+            <Input
+              type="password"
+              className="!my-1"
+              value={values.password}
+              error={touched.password ? errors.password : undefined}
+              required
+              placeholder={t('password')}
+              onChange={handleChange('password')}
+            />
+            {!!errors.message && (
+              <p className="mb-4 max-w-sm self-center text-center text-sm text-red-300">
+                {errors.message}
+              </p>
+            )}
+
+            <div className="flex flex-col items-center justify-center">
+              <LoginButton
+                className="mb-2 mt-1 border-indigo-200 !bg-indigo-200 !text-indigo-900 hover:!bg-indigo-300"
+                type="submit"
+                onClick={handleSubmit}
+                isLoading={isRegistering}
+              >
+                {t('signUpButton')}
+              </LoginButton>
+            </div>
+            <Link scroll={false} href={'/login'} passHref>
+              <p className="mt-2 text-center text-sm text-zinc-600 underline hover:cursor-pointer">
+                {t('alreadyHaveAccount')}
+              </p>
+            </Link>
+          </Form>
+        )}
+      </Formik>
+    </AuthFormWrapper>
+  );
+}
diff --git a/src/features/surveys/components/QuestionBlocks/QuestionBlockFactory.tsx b/src/features/surveys/components/QuestionBlocks/QuestionBlockFactory.tsx
deleted file mode 100644
index 033f30dc..00000000
--- a/src/features/surveys/components/QuestionBlocks/QuestionBlockFactory.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { QuestionType } from '@prisma/client';
-import EmojiQuestionBlock from 'features/surveys/components/QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock';
-import QuestionBlockWrapper from 'features/surveys/components/QuestionBlocks/QuestionBlockWrapper/QuestionBlockWrapper';
-import InputQuestionBlock from 'features/surveys/components/QuestionBlocks/InputQuestionBlock/InputQuestionBlock';
-import ChoiceQuestionBlock from 'features/surveys/components/QuestionBlocks/ChoiceQuestionBlock/ChoiceQuestionBlock';
-import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
-import RateQuestionBlock from 'features/surveys/components/QuestionBlocks/RateQuestionBlock/RateQuestionBlock';
-
-interface QuestionBlockFactoryProps {
-  type: QuestionType;
-  options: string[];
-  handleOptionChange: (
-    index: number,
-    newEmote: string,
-    questionIndex: number,
-    blockDuplicates?: boolean
-  ) => void;
-  handleOptionRemove: (index: number, questionIndex: number) => void;
-  handleAddingNewOption: (
-    newEmote: string,
-    questionIndex: number,
-    blockDuplicates?: boolean
-  ) => void;
-  onQuestionRemove: (index: number) => void;
-  questionIndex: number;
-  updateQuestion: (newQuestion: string, questionIndex: number) => void;
-  questionTitle: string;
-  isSubmitted: boolean;
-  isRemovingPossible: boolean;
-  isDraggingPossible: boolean;
-  updateQuestionRequired: (questionIndex: number) => void;
-  isRequired: boolean;
-  dragHandleProps: DraggableProvidedDragHandleProps | null | undefined;
-  expanded: boolean;
-  expandQuestion: (questionIndex: number) => void;
-  isEditMode: boolean;
-}
-
-export default function QuestionBlockFactory({
-  handleOptionChange,
-  handleOptionRemove,
-  handleAddingNewOption,
-  questionIndex,
-  questionTitle,
-  onQuestionRemove,
-  type,
-  updateQuestion,
-  options,
-  isSubmitted,
-  isRemovingPossible,
-  isRequired,
-  updateQuestionRequired,
-  isDraggingPossible,
-  dragHandleProps,
-  expanded,
-  expandQuestion,
-  isEditMode,
-}: QuestionBlockFactoryProps) {
-  return (
-    <QuestionBlockWrapper
-      dragHandleProps={dragHandleProps}
-      index={questionIndex}
-      onQuestionRemove={onQuestionRemove}
-      updateQuestion={updateQuestion}
-      questionTitle={questionTitle}
-      isSubmitted={isSubmitted}
-      isRemovingPossible={isRemovingPossible}
-      isDraggingPossible={isDraggingPossible}
-      isRequired={isRequired}
-      updateQuestionRequired={updateQuestionRequired}
-      expanded={expanded}
-      expandQuestion={expandQuestion}
-      type={type}
-      isEditMode={isEditMode}
-    >
-      {type === QuestionType.RATE && <RateQuestionBlock />}
-      {type === QuestionType.INPUT && <InputQuestionBlock />}
-      {type === QuestionType.CHOICE && (
-        <ChoiceQuestionBlock
-          handleAddingNewOption={handleAddingNewOption}
-          handleOptionChange={handleOptionChange}
-          handleOptionRemove={handleOptionRemove}
-          options={options}
-          questionIndex={questionIndex}
-          isSubmitted={isSubmitted}
-        />
-      )}
-      {type === QuestionType.EMOJI && (
-        <EmojiQuestionBlock
-          handleAddingNewEmote={handleAddingNewOption}
-          handleEmotePick={handleOptionChange}
-          pack={options}
-          handleEmoteRemove={handleOptionRemove}
-          questionIndex={questionIndex}
-        />
-      )}
-    </QuestionBlockWrapper>
-  );
-}
diff --git a/src/features/surveys/components/SurveyOptionsModal/SurveyOptionsModal.tsx b/src/features/surveys/components/SurveyOptionsModal/SurveyOptionsModal.tsx
index 4dd512a6..a711d955 100644
--- a/src/features/surveys/components/SurveyOptionsModal/SurveyOptionsModal.tsx
+++ b/src/features/surveys/components/SurveyOptionsModal/SurveyOptionsModal.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import StyledDialog from 'shared/components/StyledDialog/StyledDialog';
 import useTranslation from 'next-translate/useTranslation';
 import Toggle from 'shared/components/Toggle/Toggle';
-import { SurveyOptions } from 'features/surveys/managers/createSurveyManager';
+import { SurveyOptions } from 'features/surveys/features/SurveyCreator/managers/createSurveyManager';
 
 type SurveyOptionsModalProps = {
   isOpened: boolean;
@@ -43,10 +43,7 @@ export default function SurveyOptionsModalModal({
             classNames="gap-2 mt-4"
             testId="display-title-toggle"
             onToggle={() => {
-              updateOptions(
-                'displayTitle',
-                !surveyOptions.displayTitle
-              );
+              updateOptions('displayTitle', !surveyOptions.displayTitle);
             }}
             label={t('surveyOptionsModal.DisplayTitle')}
           />
diff --git a/src/features/surveys/features/SurveyCreator/SurveyCreator.tsx b/src/features/surveys/features/SurveyCreator/SurveyCreator.tsx
new file mode 100644
index 00000000..9c8484d8
--- /dev/null
+++ b/src/features/surveys/features/SurveyCreator/SurveyCreator.tsx
@@ -0,0 +1,24 @@
+import useTranslation from 'next-translate/useTranslation';
+
+import React from 'react';
+import Header from 'shared/components/Header/Header';
+import { useSurveyCreatorContext } from 'features/surveys/features/SurveyCreator/context';
+import TitleAndConfigSection from 'features/surveys/features/SurveyCreator/components/TitleAndConfigSection/TitleAndConfigSection';
+import QuestionsSection from 'features/surveys/features/SurveyCreator/components/QuestionsSection/QuestionsSection';
+import ActionButtons from 'features/surveys/features/SurveyCreator/components/ActionButtons/ActionButtons';
+
+export default function SurveyCreator() {
+  const { t } = useTranslation('surveyCreate');
+
+  const { isEditMode } = useSurveyCreatorContext();
+
+  return (
+    <>
+      <Header>{isEditMode ? t('editHeading') : t('heading')}</Header>
+
+      <TitleAndConfigSection />
+      <QuestionsSection />
+      <ActionButtons />
+    </>
+  );
+}
diff --git a/src/features/surveys/features/SurveyCreator/components/ActionButtons/ActionButtons.tsx b/src/features/surveys/features/SurveyCreator/components/ActionButtons/ActionButtons.tsx
new file mode 100644
index 00000000..99cba188
--- /dev/null
+++ b/src/features/surveys/features/SurveyCreator/components/ActionButtons/ActionButtons.tsx
@@ -0,0 +1,65 @@
+import { useApplicationContext } from 'features/application/context';
+import React from 'react';
+import Button, { ButtonVariant } from 'shared/components/Button/Button';
+import { MAX_QUESTIONS } from 'shared/constants/surveysConfig';
+import { useSurveyCreatorContext } from 'features/surveys/features/SurveyCreator/context';
+import { AddQuestionButton } from 'features/surveys/features/SurveyCreator/components/AddQuestionButton/AddQuestionButton';
+import useTranslation from 'next-translate/useTranslation';
+
+export default function ActionButtons() {
+  const { t } = useTranslation('surveyCreate');
+
+  const { user } = useApplicationContext();
+
+  const {
+    createSurvey,
+    isCreating,
+    questions,
+    addQuestion,
+    signInToCreateSurvey,
+    isEditMode,
+    confirmEditSurvey,
+    discardChanges,
+  } = useSurveyCreatorContext();
+
+  return (
+    <div className="mt-4">
+      {questions.length < MAX_QUESTIONS && !isEditMode && (
+        <AddQuestionButton onClick={addQuestion} />
+      )}
+
+      {user ? (
+        <div className="flex flex-col gap-2 sm:flex-row">
+          {isEditMode && (
+            <Button
+              onClick={discardChanges}
+              className="z-0 w-full"
+              variant={ButtonVariant.OUTLINE}
+              disabled={isCreating}
+            >
+              {t('discardChanges')}
+            </Button>
+          )}
+          <Button
+            name="create-survey"
+            onClick={isEditMode ? confirmEditSurvey : createSurvey}
+            className="z-0 w-full"
+            variant={ButtonVariant.PRIMARY}
+            isLoading={isCreating}
+            disabled={questions.length === 0}
+          >
+            {isEditMode ? t('buttonSave') : t('buttonCreate')}
+          </Button>
+        </div>
+      ) : (
+        <Button
+          onClick={signInToCreateSurvey}
+          variant={ButtonVariant.PRIMARY}
+          className="z-0 mt-2 w-full"
+        >
+          {t('signInToCreateSurvey')}
+        </Button>
+      )}
+    </div>
+  );
+}
diff --git a/src/features/surveys/components/AddQuestionButton/AddQuestionButton.tsx b/src/features/surveys/features/SurveyCreator/components/AddQuestionButton/AddQuestionButton.tsx
similarity index 79%
rename from src/features/surveys/components/AddQuestionButton/AddQuestionButton.tsx
rename to src/features/surveys/features/SurveyCreator/components/AddQuestionButton/AddQuestionButton.tsx
index 2e0c6ad2..da011f34 100644
--- a/src/features/surveys/components/AddQuestionButton/AddQuestionButton.tsx
+++ b/src/features/surveys/features/SurveyCreator/components/AddQuestionButton/AddQuestionButton.tsx
@@ -3,9 +3,9 @@ import Button, {
   ButtonSize,
   ButtonVariant,
 } from 'shared/components/Button/Button';
-import NewQuestionModal from 'features/surveys/components/NewQuestionModal/NewQuestionModal';
+import NewQuestionModal from 'features/surveys/features/SurveyCreator/components/NewQuestionModal/NewQuestionModal';
 import useModal from 'features/surveys/hooks/useModal';
-import { Question } from 'features/surveys/managers/createSurveyManager';
+import { Question } from 'features/surveys/features/SurveyCreator/managers/createSurveyManager';
 
 interface AddQuestionButtonProps {
   onClick: (newQuestion: Question) => void;
diff --git a/src/features/surveys/components/EmojiPicker/EmojiObject.ts b/src/features/surveys/features/SurveyCreator/components/EmojiPicker/EmojiObject.ts
similarity index 100%
rename from src/features/surveys/components/EmojiPicker/EmojiObject.ts
rename to src/features/surveys/features/SurveyCreator/components/EmojiPicker/EmojiObject.ts
diff --git a/src/features/surveys/components/EmojiPicker/EmojiPicker.tsx b/src/features/surveys/features/SurveyCreator/components/EmojiPicker/EmojiPicker.tsx
similarity index 96%
rename from src/features/surveys/components/EmojiPicker/EmojiPicker.tsx
rename to src/features/surveys/features/SurveyCreator/components/EmojiPicker/EmojiPicker.tsx
index 48d6944f..00c222e7 100644
--- a/src/features/surveys/components/EmojiPicker/EmojiPicker.tsx
+++ b/src/features/surveys/features/SurveyCreator/components/EmojiPicker/EmojiPicker.tsx
@@ -5,7 +5,7 @@ import Button, { ButtonVariant } from 'shared/components/Button/Button';
 import StyledDialog from 'shared/components/StyledDialog/StyledDialog';
 import Picker from '@emoji-mart/react';
 import Emoji from 'features/surveys/components/Emoji/Emoji';
-import { EmojiObject } from 'features/surveys/components/EmojiPicker/EmojiObject';
+import { EmojiObject } from 'features/surveys/features/SurveyCreator/components/EmojiPicker/EmojiObject';
 
 interface EmojiPickerProps {
   index?: number;
diff --git a/src/features/surveys/components/NewQuestionModal/NewQuestionModal.tsx b/src/features/surveys/features/SurveyCreator/components/NewQuestionModal/NewQuestionModal.tsx
similarity index 91%
rename from src/features/surveys/components/NewQuestionModal/NewQuestionModal.tsx
rename to src/features/surveys/features/SurveyCreator/components/NewQuestionModal/NewQuestionModal.tsx
index 2d8298db..71ea2f8d 100644
--- a/src/features/surveys/components/NewQuestionModal/NewQuestionModal.tsx
+++ b/src/features/surveys/features/SurveyCreator/components/NewQuestionModal/NewQuestionModal.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import StyledDialog from 'shared/components/StyledDialog/StyledDialog';
-import { Question } from 'features/surveys/managers/createSurveyManager';
+import { Question } from 'features/surveys/features/SurveyCreator/managers/createSurveyManager';
 import { QuestionType } from '@prisma/client';
 import { v4 } from 'uuid';
-import NewQuestionModalButton from 'features/surveys/components/NewQuestionModal/components/NewQuestionModalButton';
+import NewQuestionModalButton from 'features/surveys/features/SurveyCreator/components/NewQuestionModal/components/NewQuestionModalButton';
 import EmojiIcon from 'shared/components/QuestionTypeIcons/EmojiIcon';
 import InputIcon from 'shared/components/QuestionTypeIcons/InputIcon';
 import ChoiceIcon from 'shared/components/QuestionTypeIcons/ChoiceIcon';
diff --git a/src/features/surveys/components/NewQuestionModal/components/NewQuestionModalButton.tsx b/src/features/surveys/features/SurveyCreator/components/NewQuestionModal/components/NewQuestionModalButton.tsx
similarity index 100%
rename from src/features/surveys/components/NewQuestionModal/components/NewQuestionModalButton.tsx
rename to src/features/surveys/features/SurveyCreator/components/NewQuestionModal/components/NewQuestionModalButton.tsx
diff --git a/src/features/surveys/components/QuestionBlocks/ChoiceQuestionBlock/ChoiceQuestionBlock.tsx b/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/ChoiceQuestionBlock/ChoiceQuestionBlock.tsx
similarity index 82%
rename from src/features/surveys/components/QuestionBlocks/ChoiceQuestionBlock/ChoiceQuestionBlock.tsx
rename to src/features/surveys/features/SurveyCreator/components/QuestionBlocks/ChoiceQuestionBlock/ChoiceQuestionBlock.tsx
index 7ecc2518..15b9874a 100644
--- a/src/features/surveys/components/QuestionBlocks/ChoiceQuestionBlock/ChoiceQuestionBlock.tsx
+++ b/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/ChoiceQuestionBlock/ChoiceQuestionBlock.tsx
@@ -3,35 +3,26 @@ import Button, { ButtonVariant } from 'shared/components/Button/Button';
 import Input from 'shared/components/Input/Input';
 import { MAX_OPTIONS, MIN_OPTIONS } from 'shared/constants/surveysConfig';
 import useTranslation from 'next-translate/useTranslation';
+import { useSurveyCreatorContext } from 'features/surveys/features/SurveyCreator/context';
 
 interface ChoiceQuestionBlockProps {
   options: string[];
-  handleOptionChange: (
-    index: number,
-    newOption: string,
-    questionIndex: number,
-    blockDuplicates?: boolean
-  ) => void;
-  handleOptionRemove: (index: number, questionIndex: number) => void;
-  handleAddingNewOption: (
-    newOption: string,
-    questionIndex: number,
-    blockDuplicates?: boolean
-  ) => void;
   questionIndex: number;
-  isSubmitted: boolean;
 }
 
 export default function ChoiceQuestionBlock({
   options,
-  handleAddingNewOption,
-  handleOptionChange,
-  handleOptionRemove,
   questionIndex,
-  isSubmitted,
 }: ChoiceQuestionBlockProps) {
   const { t } = useTranslation('surveyCreate');
 
+  const {
+    isSubmitted,
+    handleAddingNewOption,
+    handleOptionChange,
+    handleOptionRemove,
+  } = useSurveyCreatorContext();
+
   const getAnswerError = (option: string) => {
     if (isSubmitted && option.length === 0) {
       return t('required');
diff --git a/src/features/surveys/components/QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock.tsx b/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock.tsx
similarity index 58%
rename from src/features/surveys/components/QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock.tsx
rename to src/features/surveys/features/SurveyCreator/components/QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock.tsx
index cd6780c3..23465386 100644
--- a/src/features/surveys/components/QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock.tsx
+++ b/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock.tsx
@@ -1,30 +1,19 @@
-import EmojiPicker from 'features/surveys/components/EmojiPicker/EmojiPicker';
+import EmojiPicker from 'features/surveys/features/SurveyCreator/components/EmojiPicker/EmojiPicker';
 import { MAX_EMOJIS, MIN_EMOJIS } from 'shared/constants/emojisConfig';
+import { useSurveyCreatorContext } from 'features/surveys/features/SurveyCreator/context';
 
 interface EmojiQuestionBlockProps {
   pack: string[];
-  handleEmotePick: (
-    index: number,
-    newEmote: string,
-    questionIndex: number,
-    blockDuplicates?: boolean
-  ) => void;
-  handleEmoteRemove: (index: number, questionIndex: number) => void;
-  handleAddingNewEmote: (
-    newEmote: string,
-    questionIndex: number,
-    blockDuplicates?: boolean
-  ) => void;
   questionIndex: number;
 }
 
 export default function EmojiQuestionBlock({
   pack,
-  handleAddingNewEmote,
-  handleEmotePick,
-  handleEmoteRemove,
   questionIndex,
 }: EmojiQuestionBlockProps) {
+  const { handleAddingNewOption, handleOptionChange, handleOptionRemove } =
+    useSurveyCreatorContext();
+
   return (
     <div
       className="mb-3 mt-1"
@@ -41,9 +30,9 @@ export default function EmojiQuestionBlock({
           index={idx}
           pickedEmoji={emote}
           questionIndex={questionIndex}
-          onEmotePick={handleEmotePick}
+          onEmotePick={handleOptionChange}
           onEmoteRemove={
-            pack.length > MIN_EMOJIS ? handleEmoteRemove : undefined
+            pack.length > MIN_EMOJIS ? handleOptionRemove : undefined
           }
         />
       ))}
@@ -51,7 +40,7 @@ export default function EmojiQuestionBlock({
         <EmojiPicker
           questionIndex={questionIndex}
           addEmoji={true}
-          onEmoteAdd={handleAddingNewEmote}
+          onEmoteAdd={handleAddingNewOption}
         />
       )}
     </div>
diff --git a/src/features/surveys/components/QuestionBlocks/InputQuestionBlock/InputQuestionBlock.tsx b/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/InputQuestionBlock/InputQuestionBlock.tsx
similarity index 100%
rename from src/features/surveys/components/QuestionBlocks/InputQuestionBlock/InputQuestionBlock.tsx
rename to src/features/surveys/features/SurveyCreator/components/QuestionBlocks/InputQuestionBlock/InputQuestionBlock.tsx
diff --git a/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/QuestionBlockFactory.tsx b/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/QuestionBlockFactory.tsx
new file mode 100644
index 00000000..89cd8a60
--- /dev/null
+++ b/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/QuestionBlockFactory.tsx
@@ -0,0 +1,43 @@
+import { QuestionType } from '@prisma/client';
+import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
+import ChoiceQuestionBlock from 'features/surveys/features/SurveyCreator/components/QuestionBlocks/ChoiceQuestionBlock/ChoiceQuestionBlock';
+import EmojiQuestionBlock from 'features/surveys/features/SurveyCreator/components/QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock';
+import InputQuestionBlock from 'features/surveys/features/SurveyCreator/components/QuestionBlocks/InputQuestionBlock/InputQuestionBlock';
+import QuestionBlockWrapper from 'features/surveys/features/SurveyCreator/components/QuestionBlocks/QuestionBlockWrapper/QuestionBlockWrapper';
+import RateQuestionBlock from 'features/surveys/features/SurveyCreator/components/QuestionBlocks/RateQuestionBlock/RateQuestionBlock';
+import { Question } from 'features/surveys/features/SurveyCreator/managers/createSurveyManager';
+
+interface QuestionBlockFactoryProps {
+  questionData: Question;
+  questionIndex: number;
+  dragHandleProps: DraggableProvidedDragHandleProps | null | undefined;
+}
+
+export default function QuestionBlockFactory({
+  questionIndex,
+  dragHandleProps,
+  questionData,
+}: QuestionBlockFactoryProps) {
+  return (
+    <QuestionBlockWrapper
+      dragHandleProps={dragHandleProps}
+      index={questionIndex}
+      questionData={questionData}
+    >
+      {questionData.type === QuestionType.RATE && <RateQuestionBlock />}
+      {questionData.type === QuestionType.INPUT && <InputQuestionBlock />}
+      {questionData.type === QuestionType.CHOICE && (
+        <ChoiceQuestionBlock
+          options={questionData.options ?? []}
+          questionIndex={questionIndex}
+        />
+      )}
+      {questionData.type === QuestionType.EMOJI && (
+        <EmojiQuestionBlock
+          pack={questionData.options ?? []}
+          questionIndex={questionIndex}
+        />
+      )}
+    </QuestionBlockWrapper>
+  );
+}
diff --git a/src/features/surveys/components/QuestionBlocks/QuestionBlockWrapper/QuestionBlockWrapper.tsx b/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/QuestionBlockWrapper/QuestionBlockWrapper.tsx
similarity index 74%
rename from src/features/surveys/components/QuestionBlocks/QuestionBlockWrapper/QuestionBlockWrapper.tsx
rename to src/features/surveys/features/SurveyCreator/components/QuestionBlocks/QuestionBlockWrapper/QuestionBlockWrapper.tsx
index ec5b5fa1..9c9e115d 100644
--- a/src/features/surveys/components/QuestionBlocks/QuestionBlockWrapper/QuestionBlockWrapper.tsx
+++ b/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/QuestionBlockWrapper/QuestionBlockWrapper.tsx
@@ -6,63 +6,50 @@ import {
 import { ChangeEvent, PropsWithChildren } from 'react';
 import Input from 'shared/components/Input/Input';
 import useTranslation from 'next-translate/useTranslation';
-import { MAX_QUESTION_LENGTH } from 'shared/constants/surveysConfig';
+import {
+  MAX_QUESTION_LENGTH,
+  MIN_QUESTIONS,
+} from 'shared/constants/surveysConfig';
 import Toggle from 'shared/components/Toggle/Toggle';
 import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
 import clsx from 'clsx';
-import { QuestionType } from '@prisma/client';
 import QuestionTypeIcons from 'shared/components/QuestionTypeIcons/QuestionTypeIcons';
+import { useSurveyCreatorContext } from 'features/surveys/features/SurveyCreator/context';
+import { Question } from 'features/surveys/features/SurveyCreator/managers/createSurveyManager';
 
 interface QuestionBlockWrapperProps {
   index: number;
-  onQuestionRemove?: (index: number) => void;
-  updateQuestion: (newQuestion: string, questionIndex: number) => void;
-  questionTitle: string;
-  isSubmitted: boolean;
-  isRemovingPossible: boolean;
-  isDraggingPossible: boolean;
-  updateQuestionRequired: (questionIndex: number) => void;
-  isRequired: boolean;
+  questionData: Question;
   dragHandleProps: DraggableProvidedDragHandleProps | null | undefined;
-  expanded: boolean;
-  expandQuestion: (questionIndex: number) => void;
-  type: QuestionType;
-  isEditMode: boolean;
 }
 
 export default function QuestionBlockWrapper({
   children,
   index,
-  onQuestionRemove,
-  updateQuestion,
-  questionTitle,
-  isSubmitted,
-  isRemovingPossible,
-  isRequired,
-  updateQuestionRequired,
   dragHandleProps,
-  isDraggingPossible,
-  expanded,
-  expandQuestion,
-  type,
-  isEditMode,
+  questionData,
 }: PropsWithChildren<QuestionBlockWrapperProps>) {
   const { t } = useTranslation('surveyCreate');
 
-  const removeQuestion = () => {
-    onQuestionRemove?.(index);
-  };
+  const {
+    removeQuestion,
+    updateQuestion,
+    isSubmitted,
+    updateQuestionRequired,
+    expandQuestion,
+    questions,
+    isEditMode,
+  } = useSurveyCreatorContext();
 
-  const handleQuestionChange = (e: ChangeEvent<HTMLInputElement>) => {
-    updateQuestion(e.target.value, index);
-  };
+  const isRemovingPossible = questions.length > MIN_QUESTIONS;
+  const isDraggingPossible = questions.length > 1;
 
   const handleRequiredToggle = () => {
     updateQuestionRequired(index);
   };
 
   const questionError = () => {
-    if (isSubmitted && questionTitle.length === 0) {
+    if (isSubmitted && questionData.title.length === 0) {
       return t('required');
     }
 
@@ -84,20 +71,22 @@ export default function QuestionBlockWrapper({
             <ChevronDownIcon
               className={clsx(
                 'w-[15px] transition-transform',
-                !expanded && '-rotate-90'
+                !questionData.expanded && '-rotate-90'
               )}
             />
           </button>
 
           <div className="hidden sm:block">
-            <QuestionTypeIcons type={type} />
+            <QuestionTypeIcons type={questionData.type} />
           </div>
 
           <div className="w-full grow">
             <Input
               placeholder={t('questionPlaceholder')}
-              onInput={handleQuestionChange}
-              value={questionTitle}
+              onInput={(e: ChangeEvent<HTMLInputElement>) =>
+                updateQuestion(e.target.value, index)
+              }
+              value={questionData.title}
               error={questionError()}
               className="mt-0 h-[42px]"
               maxLength={MAX_QUESTION_LENGTH}
@@ -108,7 +97,7 @@ export default function QuestionBlockWrapper({
 
         <div className="mb-2 flex w-full items-center justify-end gap-2 sm:mb-0 sm:w-auto">
           <div className="mr-1 sm:hidden">
-            <QuestionTypeIcons type={type} />
+            <QuestionTypeIcons type={questionData.type} />
           </div>
 
           {(isDraggingPossible || isRemovingPossible) && (
@@ -123,7 +112,7 @@ export default function QuestionBlockWrapper({
               )}
               {isRemovingPossible && (
                 <button
-                  onClick={removeQuestion}
+                  onClick={() => removeQuestion(index)}
                   disabled={isEditMode}
                   data-test-id={`remove-question-${index}`}
                   className="h-[42px] cursor-pointer rounded-md border border-red-200 bg-red-200 p-[13px] shadow-sm hover:scale-95 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:scale-100"
@@ -136,7 +125,7 @@ export default function QuestionBlockWrapper({
         </div>
       </div>
 
-      {expanded && (
+      {questionData.expanded && (
         <div className="mb-4 px-3">
           {isEditMode ? (
             <div className="relative opacity-50">
@@ -153,7 +142,7 @@ export default function QuestionBlockWrapper({
               classNames="mt-3.5"
               label={t('requiredToggle')}
               onToggle={handleRequiredToggle}
-              isEnabled={isRequired}
+              isEnabled={questionData.isRequired}
             />
           </div>
         </div>
diff --git a/src/features/surveys/components/QuestionBlocks/RateQuestionBlock/RateQuestionBlock.tsx b/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/RateQuestionBlock/RateQuestionBlock.tsx
similarity index 100%
rename from src/features/surveys/components/QuestionBlocks/RateQuestionBlock/RateQuestionBlock.tsx
rename to src/features/surveys/features/SurveyCreator/components/QuestionBlocks/RateQuestionBlock/RateQuestionBlock.tsx
diff --git a/src/features/surveys/features/SurveyCreator/components/QuestionsSection/QuestionsSection.tsx b/src/features/surveys/features/SurveyCreator/components/QuestionsSection/QuestionsSection.tsx
new file mode 100644
index 00000000..9610a3ba
--- /dev/null
+++ b/src/features/surveys/features/SurveyCreator/components/QuestionsSection/QuestionsSection.tsx
@@ -0,0 +1,63 @@
+import clsx from 'clsx';
+import React from 'react';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import QuestionBlockFactory from 'features/surveys/features/SurveyCreator/components/QuestionBlocks/QuestionBlockFactory';
+import { useSurveyCreatorContext } from 'features/surveys/features/SurveyCreator/context';
+import { useApplicationContext } from 'features/application/context';
+import useTranslation from 'next-translate/useTranslation';
+import Note from 'shared/components/Note/Note';
+
+export default function QuestionsSection() {
+  const { t } = useTranslation('surveyCreate');
+
+  const { isBrowser } = useApplicationContext();
+  const { onDragQuestionEnd, questions, isEditMode } =
+    useSurveyCreatorContext();
+
+  return (
+    <div className="mt-4">
+      {isEditMode && (
+        <Note title={t('editNoteTitle')} description={t('editNote')} />
+      )}
+
+      <DragDropContext onDragEnd={onDragQuestionEnd}>
+        {isBrowser ? (
+          <Droppable droppableId="droppable">
+            {(provided, snapshot) => (
+              <div
+                {...provided.droppableProps}
+                ref={provided.innerRef}
+                className={clsx(snapshot.isDraggingOver && '')}
+              >
+                {questions.map((question, index) => (
+                  <Draggable
+                    key={question.id}
+                    draggableId={question.id}
+                    index={index}
+                  >
+                    {(provided, snapshot) => (
+                      <div
+                        className={clsx('mb-3', snapshot.isDragging && '')}
+                        ref={provided.innerRef}
+                        {...provided.draggableProps}
+                        style={provided.draggableProps.style}
+                      >
+                        <QuestionBlockFactory
+                          key={question.id}
+                          questionData={question}
+                          dragHandleProps={provided.dragHandleProps}
+                          questionIndex={index}
+                        />
+                      </div>
+                    )}
+                  </Draggable>
+                ))}
+                {provided.placeholder}
+              </div>
+            )}
+          </Droppable>
+        ) : null}
+      </DragDropContext>
+    </div>
+  );
+}
diff --git a/src/features/surveys/features/SurveyCreator/components/TitleAndConfigSection/TitleAndConfigSection.tsx b/src/features/surveys/features/SurveyCreator/components/TitleAndConfigSection/TitleAndConfigSection.tsx
new file mode 100644
index 00000000..1060db23
--- /dev/null
+++ b/src/features/surveys/features/SurveyCreator/components/TitleAndConfigSection/TitleAndConfigSection.tsx
@@ -0,0 +1,61 @@
+import { CogIcon } from '@heroicons/react/outline';
+import SurveyOptionsModalModal from 'features/surveys/components/SurveyOptionsModal/SurveyOptionsModal';
+import useModal from 'features/surveys/hooks/useModal';
+import useTranslation from 'next-translate/useTranslation';
+
+import React from 'react';
+import Button, { ButtonVariant } from 'shared/components/Button/Button';
+import Input from 'shared/components/Input/Input';
+import { MAX_TITLE_LENGTH } from 'shared/constants/surveysConfig';
+import { useSurveyCreatorContext } from 'features/surveys/features/SurveyCreator/context';
+
+export default function TitleAndConfigSection() {
+  const { t } = useTranslation('surveyCreate');
+
+  const {
+    title,
+    error,
+    handleChangeTitle,
+    surveyOptions,
+    updateSurveyOptions,
+  } = useSurveyCreatorContext();
+
+  const {
+    isModalOpen: isOptionsModalOpen,
+    closeModal: closeOptionsSurveyModal,
+    openModal: openOptionsSurveyModal,
+  } = useModal();
+  return (
+    <>
+      <div className="flex flex-col gap-x-2 sm:flex-row">
+        <div className="w-full">
+          <Input
+            name="survey-title"
+            placeholder={t('surveyTitlePlaceholder')}
+            value={title}
+            error={error}
+            maxLength={MAX_TITLE_LENGTH}
+            onChange={handleChangeTitle}
+          />
+        </div>
+
+        <Button
+          className="h-[42px] whitespace-nowrap border border-transparent sm:mt-2"
+          variant={ButtonVariant.PRIMARY}
+          onClick={openOptionsSurveyModal}
+          icon={<CogIcon className="h-5 w-5" />}
+          data-test-id="options-button"
+        >
+          <span className="ms-1">{t('options')}</span>
+        </Button>
+      </div>
+
+      <SurveyOptionsModalModal
+        isOpened={isOptionsModalOpen}
+        closeModal={closeOptionsSurveyModal}
+        surveyOptions={surveyOptions}
+        updateOptions={updateSurveyOptions}
+      />
+    </>
+  );
+}
diff --git a/src/features/surveys/features/SurveyCreator/context.ts b/src/features/surveys/features/SurveyCreator/context.ts
new file mode 100644
index 00000000..362bfc63
--- /dev/null
+++ b/src/features/surveys/features/SurveyCreator/context.ts
@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+import { useDefinedContext } from 'shared/context/useDefinedContext';
+import { CreateSurveyManager } from 'features/surveys/features/SurveyCreator/managers/createSurveyManager';
+
+export const SurveyCreatorContext = createContext<
+  CreateSurveyManager | undefined
+>(undefined);
+
+export const useSurveyCreatorContext = (): CreateSurveyManager =>
+  useDefinedContext(SurveyCreatorContext);
diff --git a/src/features/surveys/managers/createSurveyManager.test.ts b/src/features/surveys/features/SurveyCreator/managers/createSurveyManager.test.ts
similarity index 96%
rename from src/features/surveys/managers/createSurveyManager.test.ts
rename to src/features/surveys/features/SurveyCreator/managers/createSurveyManager.test.ts
index 30e75966..9c3989e5 100644
--- a/src/features/surveys/managers/createSurveyManager.test.ts
+++ b/src/features/surveys/features/SurveyCreator/managers/createSurveyManager.test.ts
@@ -1,4 +1,4 @@
-import { useCreateSurveyManager } from 'features/surveys/managers/createSurveyManager';
+import { useCreateSurveyManager } from 'features/surveys/features/SurveyCreator/managers/createSurveyManager';
 import { v4 } from 'uuid';
 import { act, renderHook, waitFor } from '@testing-library/react';
 import { defaultQuestions } from 'shared/constants/surveysConfig';
diff --git a/src/features/surveys/managers/createSurveyManager.ts b/src/features/surveys/features/SurveyCreator/managers/createSurveyManager.ts
similarity index 95%
rename from src/features/surveys/managers/createSurveyManager.ts
rename to src/features/surveys/features/SurveyCreator/managers/createSurveyManager.ts
index 4784f0a1..a6d46974 100644
--- a/src/features/surveys/managers/createSurveyManager.ts
+++ b/src/features/surveys/features/SurveyCreator/managers/createSurveyManager.ts
@@ -4,11 +4,12 @@ import toast from 'react-hot-toast';
 import useCopyToClipboard from 'shared/hooks/useCopyToClipboard';
 import useTranslation from 'next-translate/useTranslation';
 import { QuestionType } from '@prisma/client';
-import { postFetch, putFetch } from '../../../../lib/axiosConfig';
+import { postFetch, putFetch } from '../../../../../../lib/axiosConfig';
 import { defaultQuestions } from 'shared/constants/surveysConfig';
 import { DRAFT_SURVEY_SESSION_STORAGE } from 'shared/constants/app';
 import { SurveyWithQuestions } from 'types/SurveyWithQuestions';
 import { Question as QuestionDto } from '@prisma/client';
+import { DropResult } from 'react-beautiful-dnd';
 
 export interface Question {
   id: string;
@@ -317,6 +318,14 @@ export const useCreateSurveyManager = (initialData?: SurveyWithQuestions) => {
     });
   };
 
+  const onDragQuestionEnd = (result: DropResult) => {
+    if (!result.destination) {
+      return;
+    }
+
+    reorderQuestion(result.source.index, result.destination.index);
+  };
+
   return {
     title,
     error,
@@ -340,5 +349,8 @@ export const useCreateSurveyManager = (initialData?: SurveyWithQuestions) => {
     isEditMode,
     confirmEditSurvey,
     discardChanges,
+    onDragQuestionEnd,
   };
 };
+
+export type CreateSurveyManager = ReturnType<typeof useCreateSurveyManager>;
diff --git a/src/features/surveys/features/SurveyDisplay/SurveyDisplay.tsx b/src/features/surveys/features/SurveyDisplay/SurveyDisplay.tsx
new file mode 100644
index 00000000..8b6de03c
--- /dev/null
+++ b/src/features/surveys/features/SurveyDisplay/SurveyDisplay.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { SurveyWithQuestions } from 'types/SurveyWithQuestions';
+import { useSurveyAnswerManager } from 'features/surveys/features/SurveyDisplay/managers/surveyAnswerManager';
+import useTranslation from 'next-translate/useTranslation';
+import AllQuestionsView from 'features/surveys/features/SurveyDisplay/components/AllQuestionsView/AllQuestionsView';
+import OneQuestionView from 'features/surveys/features/SurveyDisplay/components/OneQuestionView/OneQuestionView';
+
+interface SurveyDisplayProps {
+  initialData: SurveyWithQuestions;
+}
+
+export default function SurveyDisplay({ initialData }: SurveyDisplayProps) {
+  const { t } = useTranslation('survey');
+
+  const {
+    handleAnswerChange,
+    handleSave,
+    isAnswering,
+    formData,
+    isSubmitted,
+    activeQuestionIndex,
+    handleNextQuestion,
+    handlePreviousQuestion,
+  } = useSurveyAnswerManager(initialData);
+
+  return (
+    <>
+      <div className="w-full">
+        {formData?.isActive ? (
+          formData.oneQuestionPerStep ? (
+            <OneQuestionView
+              activeQuestionIndex={activeQuestionIndex}
+              formData={formData}
+              handleNextQuestion={handleNextQuestion}
+              handlePreviousQuestion={handlePreviousQuestion}
+              isSubmitted={isSubmitted}
+              handleAnswerChange={handleAnswerChange}
+              isAnswering={isAnswering}
+            />
+          ) : (
+            <AllQuestionsView
+              formData={formData}
+              handleSave={handleSave}
+              handleAnswerChange={handleAnswerChange}
+              isAnswering={isAnswering}
+              isSubmitted={isSubmitted}
+            />
+          )
+        ) : (
+          <>
+            <div className="text-5xl">🙁</div>
+            <div className="my-5 text-xl">{t('surveyNoLongerActive')}</div>
+          </>
+        )}
+      </div>
+    </>
+  );
+}
diff --git a/src/features/surveys/components/AllQuestionsView/AllQuestionsView.tsx b/src/features/surveys/features/SurveyDisplay/components/AllQuestionsView/AllQuestionsView.tsx
similarity index 89%
rename from src/features/surveys/components/AllQuestionsView/AllQuestionsView.tsx
rename to src/features/surveys/features/SurveyDisplay/components/AllQuestionsView/AllQuestionsView.tsx
index b1f8380e..67ff1784 100644
--- a/src/features/surveys/components/AllQuestionsView/AllQuestionsView.tsx
+++ b/src/features/surveys/features/SurveyDisplay/components/AllQuestionsView/AllQuestionsView.tsx
@@ -1,12 +1,12 @@
-import { SurveyWithQuestionsAndUsersAnswers } from 'features/surveys/managers/surveyAnswerManager';
+import { SurveyWithQuestionsAndUsersAnswers } from 'features/surveys/features/SurveyDisplay/managers/surveyAnswerManager';
 import React from 'react';
 import Header from 'shared/components/Header/Header';
-import { AnswersComponentFactory } from 'features/surveys/components/AnswersComponent/AnswersComponentFactory';
 import Button, {
   ButtonSize,
   ButtonVariant,
 } from 'shared/components/Button/Button';
 import useTranslation from 'next-translate/useTranslation';
+import { AnswersComponentFactory } from 'features/surveys/features/SurveyDisplay/components/AnswersComponent/AnswersComponentFactory';
 
 interface AllQuestionsViewProps {
   formData: SurveyWithQuestionsAndUsersAnswers;
diff --git a/src/features/surveys/components/AnswersComponent/AnswersComponentFactory.tsx b/src/features/surveys/features/SurveyDisplay/components/AnswersComponent/AnswersComponentFactory.tsx
similarity index 81%
rename from src/features/surveys/components/AnswersComponent/AnswersComponentFactory.tsx
rename to src/features/surveys/features/SurveyDisplay/components/AnswersComponent/AnswersComponentFactory.tsx
index 13918212..3b5318c3 100644
--- a/src/features/surveys/components/AnswersComponent/AnswersComponentFactory.tsx
+++ b/src/features/surveys/features/SurveyDisplay/components/AnswersComponent/AnswersComponentFactory.tsx
@@ -1,13 +1,14 @@
 import { QuestionType } from '@prisma/client';
-import ListAnswersComponent from 'features/surveys/components/AnswersComponent/ListAnswersComponent';
-import TextAnswersComponent from 'features/surveys/components/AnswersComponent/TextAnswersComponent';
-import ChoiceComponent from 'features/surveys/components/AnswersComponent/ChoiceComponent/ChoiceComponent';
+
+import useTranslation from 'next-translate/useTranslation';
 import Button, {
   ButtonSize,
   ButtonVariant,
 } from 'shared/components/Button/Button';
-import useTranslation from 'next-translate/useTranslation';
-import RateAnswersComponent from 'features/surveys/components/AnswersComponent/RateComponent/RateComponent';
+import ChoiceComponent from 'features/surveys/features/SurveyDisplay/components/AnswersComponent/ChoiceComponent/ChoiceComponent';
+import ListAnswersComponent from 'features/surveys/features/SurveyDisplay/components/AnswersComponent/ListAnswersComponent';
+import RateAnswersComponent from 'features/surveys/features/SurveyDisplay/components/AnswersComponent/RateComponent/RateComponent';
+import TextAnswersComponent from 'features/surveys/features/SurveyDisplay/components/AnswersComponent/TextAnswersComponent';
 
 interface AnswersComponentFactoryProps {
   type: QuestionType;
diff --git a/src/features/surveys/components/AnswersComponent/ButtonsAnswersComponent.tsx b/src/features/surveys/features/SurveyDisplay/components/AnswersComponent/ButtonsAnswersComponent.tsx
similarity index 89%
rename from src/features/surveys/components/AnswersComponent/ButtonsAnswersComponent.tsx
rename to src/features/surveys/features/SurveyDisplay/components/AnswersComponent/ButtonsAnswersComponent.tsx
index 8db5417c..291f26ef 100644
--- a/src/features/surveys/components/AnswersComponent/ButtonsAnswersComponent.tsx
+++ b/src/features/surveys/features/SurveyDisplay/components/AnswersComponent/ButtonsAnswersComponent.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import EmojiButton from 'features/surveys/components/AnswersComponent/EmojiButton/EmojiButton';
 import useTranslation from 'next-translate/useTranslation';
+import EmojiButton from 'features/surveys/features/SurveyDisplay/components/AnswersComponent/EmojiButton/EmojiButton';
 
 interface ButtonAnswersComponentProps {
   icons: string[];
diff --git a/src/features/surveys/components/AnswersComponent/ChoiceComponent/ChoiceComponent.tsx b/src/features/surveys/features/SurveyDisplay/components/AnswersComponent/ChoiceComponent/ChoiceComponent.tsx
similarity index 100%
rename from src/features/surveys/components/AnswersComponent/ChoiceComponent/ChoiceComponent.tsx
rename to src/features/surveys/features/SurveyDisplay/components/AnswersComponent/ChoiceComponent/ChoiceComponent.tsx
diff --git a/src/features/surveys/components/AnswersComponent/EmojiButton/EmojiButton.tsx b/src/features/surveys/features/SurveyDisplay/components/AnswersComponent/EmojiButton/EmojiButton.tsx
similarity index 100%
rename from src/features/surveys/components/AnswersComponent/EmojiButton/EmojiButton.tsx
rename to src/features/surveys/features/SurveyDisplay/components/AnswersComponent/EmojiButton/EmojiButton.tsx
diff --git a/src/features/surveys/components/AnswersComponent/EmojiListItem/EmojiListItem.tsx b/src/features/surveys/features/SurveyDisplay/components/AnswersComponent/EmojiListItem/EmojiListItem.tsx
similarity index 100%
rename from src/features/surveys/components/AnswersComponent/EmojiListItem/EmojiListItem.tsx
rename to src/features/surveys/features/SurveyDisplay/components/AnswersComponent/EmojiListItem/EmojiListItem.tsx
diff --git a/src/features/surveys/components/AnswersComponent/ListAnswersComponent.tsx b/src/features/surveys/features/SurveyDisplay/components/AnswersComponent/ListAnswersComponent.tsx
similarity index 89%
rename from src/features/surveys/components/AnswersComponent/ListAnswersComponent.tsx
rename to src/features/surveys/features/SurveyDisplay/components/AnswersComponent/ListAnswersComponent.tsx
index a619489a..99f07a75 100644
--- a/src/features/surveys/components/AnswersComponent/ListAnswersComponent.tsx
+++ b/src/features/surveys/features/SurveyDisplay/components/AnswersComponent/ListAnswersComponent.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import EmojiListItem from 'features/surveys/components/AnswersComponent/EmojiListItem/EmojiListItem';
 import useTranslation from 'next-translate/useTranslation';
+import EmojiListItem from 'features/surveys/features/SurveyDisplay/components/AnswersComponent/EmojiListItem/EmojiListItem';
 
 interface ListAnswersComponentProps {
   options: string[];
diff --git a/src/features/surveys/components/AnswersComponent/RateComponent/RateComponent.tsx b/src/features/surveys/features/SurveyDisplay/components/AnswersComponent/RateComponent/RateComponent.tsx
similarity index 91%
rename from src/features/surveys/components/AnswersComponent/RateComponent/RateComponent.tsx
rename to src/features/surveys/features/SurveyDisplay/components/AnswersComponent/RateComponent/RateComponent.tsx
index 474fe28e..494c4dff 100644
--- a/src/features/surveys/components/AnswersComponent/RateComponent/RateComponent.tsx
+++ b/src/features/surveys/features/SurveyDisplay/components/AnswersComponent/RateComponent/RateComponent.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import useTranslation from 'next-translate/useTranslation';
-import StarComponent from 'features/surveys/components/AnswersComponent/RateComponent/StarComponent/StarComponent';
 import clsx from 'clsx';
+import StarComponent from 'features/surveys/features/SurveyDisplay/components/AnswersComponent/RateComponent/StarComponent/StarComponent';
 
 interface RateAnswersComponentProps {
   handleAnswerChange: (answer: string, questionId: string) => void;
diff --git a/src/features/surveys/components/AnswersComponent/RateComponent/StarComponent/StarComponent.tsx b/src/features/surveys/features/SurveyDisplay/components/AnswersComponent/RateComponent/StarComponent/StarComponent.tsx
similarity index 100%
rename from src/features/surveys/components/AnswersComponent/RateComponent/StarComponent/StarComponent.tsx
rename to src/features/surveys/features/SurveyDisplay/components/AnswersComponent/RateComponent/StarComponent/StarComponent.tsx
diff --git a/src/features/surveys/components/AnswersComponent/TextAnswersComponent.tsx b/src/features/surveys/features/SurveyDisplay/components/AnswersComponent/TextAnswersComponent.tsx
similarity index 100%
rename from src/features/surveys/components/AnswersComponent/TextAnswersComponent.tsx
rename to src/features/surveys/features/SurveyDisplay/components/AnswersComponent/TextAnswersComponent.tsx
diff --git a/src/features/surveys/components/OneQuestionView/OneQuestionView.tsx b/src/features/surveys/features/SurveyDisplay/components/OneQuestionView/OneQuestionView.tsx
similarity index 90%
rename from src/features/surveys/components/OneQuestionView/OneQuestionView.tsx
rename to src/features/surveys/features/SurveyDisplay/components/OneQuestionView/OneQuestionView.tsx
index 75191079..4003de72 100644
--- a/src/features/surveys/components/OneQuestionView/OneQuestionView.tsx
+++ b/src/features/surveys/features/SurveyDisplay/components/OneQuestionView/OneQuestionView.tsx
@@ -1,8 +1,8 @@
-import { SurveyWithQuestionsAndUsersAnswers } from 'features/surveys/managers/surveyAnswerManager';
+import { SurveyWithQuestionsAndUsersAnswers } from 'features/surveys/features/SurveyDisplay/managers/surveyAnswerManager';
 import React from 'react';
-import { AnswersComponentFactory } from 'features/surveys/components/AnswersComponent/AnswersComponentFactory';
 import Header from 'shared/components/Header/Header';
 import Progressbar from 'shared/components/ProgressBar/ProgressBar';
+import { AnswersComponentFactory } from 'features/surveys/features/SurveyDisplay/components/AnswersComponent/AnswersComponentFactory';
 
 interface OneQuestionViewProps {
   formData: SurveyWithQuestionsAndUsersAnswers;
diff --git a/src/features/surveys/features/SurveyDisplay/components/ThankYou.tsx b/src/features/surveys/features/SurveyDisplay/components/ThankYou.tsx
new file mode 100644
index 00000000..697d2da8
--- /dev/null
+++ b/src/features/surveys/features/SurveyDisplay/components/ThankYou.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import Image from 'next/image';
+import useTranslation from 'next-translate/useTranslation';
+
+export default function ThankYou() {
+  const { t } = useTranslation('thankyou');
+
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <Image
+        src="/images/thankyou.svg"
+        alt="thankyou"
+        height="151"
+        width="140"
+      />
+
+      <h1 className="leading-tighter mt-4 text-3xl font-extrabold tracking-tighter">
+        {t('firstPartHeading')}&nbsp;
+        <span className="text-indigo-200">{t('secondPartHeading')}</span>
+      </h1>
+      <p className="text-md mt-2 max-w-lg text-zinc-600">{t('content')}</p>
+    </div>
+  );
+}
diff --git a/src/features/surveys/managers/surveyAnswerManager.ts b/src/features/surveys/features/SurveyDisplay/managers/surveyAnswerManager.ts
similarity index 98%
rename from src/features/surveys/managers/surveyAnswerManager.ts
rename to src/features/surveys/features/SurveyDisplay/managers/surveyAnswerManager.ts
index 7ec27655..0be7f880 100644
--- a/src/features/surveys/managers/surveyAnswerManager.ts
+++ b/src/features/surveys/features/SurveyDisplay/managers/surveyAnswerManager.ts
@@ -4,7 +4,7 @@ import { LocalStorageKeys } from 'features/surveys/constants/types';
 import useLocalStorage from 'features/surveys/hooks/useLocalStorage';
 import useTranslation from 'next-translate/useTranslation';
 import { useRouter } from 'next/router';
-import { getFetch, postFetch } from '../../../../lib/axiosConfig';
+import { getFetch, postFetch } from '../../../../../../lib/axiosConfig';
 import { SurveyWithQuestions } from 'types/SurveyWithQuestions';
 import { Question, Survey } from '@prisma/client';
 
diff --git a/src/features/surveys/features/SurveyList/SurveyList.tsx b/src/features/surveys/features/SurveyList/SurveyList.tsx
new file mode 100644
index 00000000..a1e6bc82
--- /dev/null
+++ b/src/features/surveys/features/SurveyList/SurveyList.tsx
@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from 'react';
+import { Survey } from '@prisma/client';
+import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/outline';
+import SurveyRow from 'features/surveys/features/SurveyList/components/SurveyRow/SurveyRow';
+import usePagination from 'features/surveys/hooks/usePagination';
+import Button, { ButtonVariant } from 'shared/components/Button/Button';
+import ButtonLink from 'shared/components/ButtonLink/ButtonLink';
+import Header from 'shared/components/Header/Header';
+import { formatDateDistance } from 'shared/utilities/convertTime';
+import { getFetch } from '../../../../../lib/axiosConfig';
+import useTranslation from 'next-translate/useTranslation';
+import Image from 'next/image';
+import NoSurveys from '/public/images/no-surveys.svg';
+
+interface SurveyListProps {
+  initialData: Survey[];
+}
+
+export default function SurveyList({ initialData }: SurveyListProps) {
+  const { t } = useTranslation('surveys');
+
+  const [surveysData, setSurveysData] = useState<Survey[]>(initialData);
+
+  const { items, canGoNext, canGoPrev, goNext, goPrev, pageIndex } =
+    usePagination<Survey>(surveysData ?? [], { size: 7 });
+
+  useEffect(() => {
+    if (items.length === 0) {
+      goPrev();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [items]);
+
+  const refreshSurveys = async () => {
+    const surveys = await getFetch<{ surveys: Survey[] }>('/api/survey');
+    setSurveysData(surveys.surveys);
+  };
+
+  return (
+    <>
+      <Header>{t('heading')}</Header>
+
+      <div className="flex flex-col items-center justify-center">
+        {initialData &&
+          (items?.length > 0 ? (
+            items.map((item) => {
+              return (
+                <SurveyRow
+                  key={item.id}
+                  id={item.id}
+                  question={item.title}
+                  refreshSurveys={refreshSurveys}
+                  createDate={formatDateDistance(item.createdAt)}
+                ></SurveyRow>
+              );
+            })
+          ) : (
+            <>
+              <Image
+                className="mt-2 w-[160px] -translate-x-1"
+                src={NoSurveys}
+                alt="no surveys"
+                height={165}
+              />
+              <p className="my-6">{t('noSurveys')}</p>
+              <ButtonLink
+                href={'/survey/create'}
+                variant={ButtonVariant.PRIMARY}
+                className="w-full sm:w-[200px]"
+              >
+                {t('buttonCreateSurvey')}
+              </ButtonLink>
+            </>
+          ))}
+      </div>
+      {(canGoNext || canGoPrev) && (
+        <div className="mt-2 flex flex-row items-center justify-center">
+          <Button
+            variant={ButtonVariant.OUTLINE_PRIMARY}
+            className="px-4"
+            icon={<ArrowLeftIcon className="h-5 w-5" />}
+            disabled={!canGoPrev}
+            onClick={goPrev}
+          />
+          <div className="min-w-[100px]">
+            <p className="text-center">{pageIndex + 1}</p>
+          </div>
+          <Button
+            variant={ButtonVariant.OUTLINE_PRIMARY}
+            className="px-4"
+            icon={<ArrowRightIcon className="h-5 w-5" />}
+            disabled={!canGoNext}
+            onClick={goNext}
+          />
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/features/surveys/components/SurveyRow/SurveyRow.tsx b/src/features/surveys/features/SurveyList/components/SurveyRow/SurveyRow.tsx
similarity index 100%
rename from src/features/surveys/components/SurveyRow/SurveyRow.tsx
rename to src/features/surveys/features/SurveyList/components/SurveyRow/SurveyRow.tsx
diff --git a/src/features/surveys/features/SurveyResults/SurveyResults.tsx b/src/features/surveys/features/SurveyResults/SurveyResults.tsx
new file mode 100644
index 00000000..9dcd2e4f
--- /dev/null
+++ b/src/features/surveys/features/SurveyResults/SurveyResults.tsx
@@ -0,0 +1,160 @@
+import Toggle from 'shared/components/Toggle/Toggle';
+import {
+  PencilIcon,
+  RefreshIcon,
+  ShareIcon,
+  TrashIcon,
+} from '@heroicons/react/outline';
+import NoAnswers from '/public/images/no-answers.svg';
+import Image from 'next/image';
+
+import AnswerHeader from 'features/surveys/features/SurveyResults/components/AnswerHeader/AnswerHeader';
+import { useSurveyResultsManager } from 'features/surveys/features/SurveyResults/managers/surveyResultsManager';
+import Button, { ButtonVariant } from 'shared/components/Button/Button';
+import useTranslation from 'next-translate/useTranslation';
+
+import { SurveyWithAnswers } from 'types/SurveyWithAnswers';
+import ResultComponent from 'features/surveys/features/SurveyResults/components/ResultsComponents/ResultComponent';
+import useModal from 'features/surveys/hooks/useModal';
+import DeleteSurveyModal from 'features/surveys/components/DeleteSurveyModal/DeleteSurveyModal';
+import ShareSurveyModal from 'features/surveys/components/ShareSurveryModal/ShareSurveyModal';
+import { useRouter } from 'next/router';
+
+interface SurveyResultsProps {
+  initialData: SurveyWithAnswers;
+}
+
+export default function SurveyResults({ initialData }: SurveyResultsProps) {
+  const { t } = useTranslation('surveyAnswer');
+
+  const {
+    surveyId,
+    getSurveyData,
+    surveyData,
+    mappedAnswersData,
+    isDataLoading,
+    onRemoveSuccess,
+    updateSurveyStatus,
+    isStatusLoading,
+  } = useSurveyResultsManager(initialData);
+
+  const {
+    isModalOpen: isDeleteSurveyModalOpen,
+    closeModal: closeDeleteSurveyModal,
+    openModal: openDeleteSurveyModal,
+  } = useModal();
+
+  const {
+    isModalOpen: isShareSurveyModalOpen,
+    closeModal: closeShareSurveyModal,
+    openModal: openShareSurveyModal,
+  } = useModal();
+
+  const router = useRouter();
+
+  const handleEditSurvey = () => {
+    router.push(`/survey/create/${surveyId}`);
+  };
+
+  return (
+    <>
+      <div className="mb-6 flex flex-col items-center justify-between gap-x-8 sm:mb-4 sm:flex-row">
+        <h1 className="flex min-h-[38px] items-center border-indigo-200 pb-2 text-xl font-semibold sm:border-l-4 sm:pb-0 sm:pl-4 sm:text-left">
+          {surveyData?.title}
+        </h1>
+        <div className="flex w-full flex-wrap justify-center gap-2 sm:w-auto sm:flex-nowrap">
+          <div className="flex w-full items-center justify-start">
+            <Toggle
+              classNames="mx-auto my-2 sm:my-0 sm:ml-0 sm:mr-2"
+              isEnabled={!!surveyData?.isActive}
+              onToggle={updateSurveyStatus}
+              label={t('isActive')}
+              isLoading={isStatusLoading}
+            />
+          </div>
+
+          <Button
+            title={'Edit survey'}
+            onClick={handleEditSurvey}
+            className="grow sm:grow-0"
+            variant={ButtonVariant.PRIMARY}
+            icon={<PencilIcon className="h-5 w-5" />}
+          />
+          <Button
+            title={t('shareSurvey')}
+            onClick={openShareSurveyModal}
+            className="grow sm:grow-0"
+            variant={ButtonVariant.PRIMARY}
+            icon={<ShareIcon className="h-5 w-5" />}
+          />
+
+          <Button
+            title={t('buttonRefreshTitle')}
+            onClick={getSurveyData}
+            isLoading={isDataLoading}
+            className="grow sm:grow-0"
+            variant={ButtonVariant.OUTLINE}
+            icon={<RefreshIcon className="h-5 w-5" />}
+          />
+
+          <Button
+            variant={ButtonVariant.DANGER}
+            title={t('deleteSurveyButtonTitle')}
+            onClick={openDeleteSurveyModal}
+            className="grow sm:grow-0"
+            icon={<TrashIcon className="h-5 w-5" />}
+          />
+        </div>
+      </div>
+
+      <hr />
+      <AnswerHeader
+        totalVotes={surveyData?.answers.length || 0}
+        createDate={surveyData?.createdAt ?? ''}
+      />
+
+      {surveyData?.answers?.length === 0 && (
+        <>
+          <Image
+            className="mx-auto mt-12 w-[140px]"
+            src={NoAnswers}
+            height={160}
+            alt="no answers"
+          />
+          <div className="my-6">{t('noAnswers')}</div>
+          <Button
+            title={t('shareSurvey')}
+            onClick={openShareSurveyModal}
+            className="mx-auto w-full sm:w-[200px]"
+            variant={ButtonVariant.PRIMARY}
+            icon={<ShareIcon className="h-5 w-5" />}
+          >
+            <span className="ml-2">{t('shareSurvey')}</span>
+          </Button>
+        </>
+      )}
+
+      {Object.keys(mappedAnswersData).map((key) => (
+        <ResultComponent
+          key={key}
+          question={mappedAnswersData[key].question}
+          type={mappedAnswersData[key].questionType}
+          answers={mappedAnswersData[key].answers}
+        />
+      ))}
+
+      <DeleteSurveyModal
+        surveyId={surveyId}
+        closeModal={closeDeleteSurveyModal}
+        isOpened={isDeleteSurveyModalOpen}
+        onSuccess={onRemoveSuccess}
+      />
+
+      <ShareSurveyModal
+        surveyId={surveyId}
+        closeModal={closeShareSurveyModal}
+        isOpened={isShareSurveyModalOpen}
+      />
+    </>
+  );
+}
diff --git a/src/features/surveys/components/AnswerHeader/AnswerHeader.tsx b/src/features/surveys/features/SurveyResults/components/AnswerHeader/AnswerHeader.tsx
similarity index 87%
rename from src/features/surveys/components/AnswerHeader/AnswerHeader.tsx
rename to src/features/surveys/features/SurveyResults/components/AnswerHeader/AnswerHeader.tsx
index 7b4dc377..c2b309df 100644
--- a/src/features/surveys/components/AnswerHeader/AnswerHeader.tsx
+++ b/src/features/surveys/features/SurveyResults/components/AnswerHeader/AnswerHeader.tsx
@@ -1,4 +1,4 @@
-import DataCard from 'features/surveys/components/DataCard/DataCard';
+import DataCard from 'features/surveys/features/SurveyResults/components/DataCard/DataCard';
 import useTranslation from 'next-translate/useTranslation';
 import { formatDate } from 'shared/utilities/convertTime';
 
diff --git a/src/features/surveys/components/AnswerTableRow/AnswerTableRow.tsx b/src/features/surveys/features/SurveyResults/components/AnswerTableRow/AnswerTableRow.tsx
similarity index 100%
rename from src/features/surveys/components/AnswerTableRow/AnswerTableRow.tsx
rename to src/features/surveys/features/SurveyResults/components/AnswerTableRow/AnswerTableRow.tsx
diff --git a/src/features/surveys/components/DataCard/DataCard.tsx b/src/features/surveys/features/SurveyResults/components/DataCard/DataCard.tsx
similarity index 100%
rename from src/features/surveys/components/DataCard/DataCard.tsx
rename to src/features/surveys/features/SurveyResults/components/DataCard/DataCard.tsx
diff --git a/src/features/surveys/components/ResultsComponents/BarChart/BarChart.tsx b/src/features/surveys/features/SurveyResults/components/ResultsComponents/BarChart/BarChart.tsx
similarity index 90%
rename from src/features/surveys/components/ResultsComponents/BarChart/BarChart.tsx
rename to src/features/surveys/features/SurveyResults/components/ResultsComponents/BarChart/BarChart.tsx
index c7366e4f..b0b96685 100644
--- a/src/features/surveys/components/ResultsComponents/BarChart/BarChart.tsx
+++ b/src/features/surveys/features/SurveyResults/components/ResultsComponents/BarChart/BarChart.tsx
@@ -9,8 +9,8 @@ import {
   Legend,
 } from 'recharts';
 
-import { CustomTooltip } from 'features/surveys/components/ResultsComponents/BarChart/CustomTooltip';
-import { CustomXAxisTick } from 'features/surveys/components/ResultsComponents/BarChart/CustomXAxisTick';
+import { CustomTooltip } from 'features/surveys/features/SurveyResults/components/ResultsComponents/BarChart/CustomTooltip';
+import { CustomXAxisTick } from 'features/surveys/features/SurveyResults/components/ResultsComponents/BarChart/CustomXAxisTick';
 import useTranslation from 'next-translate/useTranslation';
 
 interface BarChartProps {
diff --git a/src/features/surveys/components/ResultsComponents/BarChart/CustomTooltip.tsx b/src/features/surveys/features/SurveyResults/components/ResultsComponents/BarChart/CustomTooltip.tsx
similarity index 100%
rename from src/features/surveys/components/ResultsComponents/BarChart/CustomTooltip.tsx
rename to src/features/surveys/features/SurveyResults/components/ResultsComponents/BarChart/CustomTooltip.tsx
diff --git a/src/features/surveys/components/ResultsComponents/BarChart/CustomXAxisTick.tsx b/src/features/surveys/features/SurveyResults/components/ResultsComponents/BarChart/CustomXAxisTick.tsx
similarity index 100%
rename from src/features/surveys/components/ResultsComponents/BarChart/CustomXAxisTick.tsx
rename to src/features/surveys/features/SurveyResults/components/ResultsComponents/BarChart/CustomXAxisTick.tsx
diff --git a/src/features/surveys/components/ResultsComponents/PieChart/PieChart.tsx b/src/features/surveys/features/SurveyResults/components/ResultsComponents/PieChart/PieChart.tsx
similarity index 100%
rename from src/features/surveys/components/ResultsComponents/PieChart/PieChart.tsx
rename to src/features/surveys/features/SurveyResults/components/ResultsComponents/PieChart/PieChart.tsx
diff --git a/src/features/surveys/components/ResultsComponents/ResultComponent.tsx b/src/features/surveys/features/SurveyResults/components/ResultsComponents/ResultComponent.tsx
similarity index 91%
rename from src/features/surveys/components/ResultsComponents/ResultComponent.tsx
rename to src/features/surveys/features/SurveyResults/components/ResultsComponents/ResultComponent.tsx
index 32c31373..3190d14a 100644
--- a/src/features/surveys/components/ResultsComponents/ResultComponent.tsx
+++ b/src/features/surveys/features/SurveyResults/components/ResultsComponents/ResultComponent.tsx
@@ -2,8 +2,8 @@ import { QuestionType } from '@prisma/client';
 import React, { useCallback, useEffect, useState } from 'react';
 import BarChart, {
   BarChartData,
-} from 'features/surveys/components/ResultsComponents/BarChart/BarChart';
-import TextResults from 'features/surveys/components/ResultsComponents/TextResults/TextResults';
+} from 'features/surveys/features/SurveyResults/components/ResultsComponents/BarChart/BarChart';
+import TextResults from 'features/surveys/features/SurveyResults/components/ResultsComponents/TextResults/TextResults';
 import { MappedAnswerData } from 'types/MappedAnswerData';
 
 type ResultComponentProps = {
diff --git a/src/features/surveys/components/ResultsComponents/TextResults/TextResults.tsx b/src/features/surveys/features/SurveyResults/components/ResultsComponents/TextResults/TextResults.tsx
similarity index 93%
rename from src/features/surveys/components/ResultsComponents/TextResults/TextResults.tsx
rename to src/features/surveys/features/SurveyResults/components/ResultsComponents/TextResults/TextResults.tsx
index cc3cc9eb..d735214b 100644
--- a/src/features/surveys/components/ResultsComponents/TextResults/TextResults.tsx
+++ b/src/features/surveys/features/SurveyResults/components/ResultsComponents/TextResults/TextResults.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import AnswerTableRow from 'features/surveys/components/AnswerTableRow/AnswerTableRow';
+import AnswerTableRow from 'features/surveys/features/SurveyResults/components/AnswerTableRow/AnswerTableRow';
 import usePagination from 'features/surveys/hooks/usePagination';
 import Button, { ButtonVariant } from 'shared/components/Button/Button';
 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/outline';
diff --git a/src/features/surveys/managers/surveyResultsManager.ts b/src/features/surveys/features/SurveyResults/managers/surveyResultsManager.ts
similarity index 98%
rename from src/features/surveys/managers/surveyResultsManager.ts
rename to src/features/surveys/features/SurveyResults/managers/surveyResultsManager.ts
index c62a7554..1ca596e8 100644
--- a/src/features/surveys/managers/surveyResultsManager.ts
+++ b/src/features/surveys/features/SurveyResults/managers/surveyResultsManager.ts
@@ -6,7 +6,7 @@ import toast from 'react-hot-toast';
 import useCopyToClipboard from 'shared/hooks/useCopyToClipboard';
 
 import useTranslation from 'next-translate/useTranslation';
-import { getFetch, patchFetch } from '../../../../lib/axiosConfig';
+import { getFetch, patchFetch } from '../../../../../../lib/axiosConfig';
 import { SurveyWithAnswers } from 'types/SurveyWithAnswers';
 import { QuestionType } from '@prisma/client';
 import { MappedAnswers } from 'types/MappedAnswers';
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 3a99ca0a..a74ed117 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -11,13 +11,13 @@ export default function FourOhFour() {
         <title>{t('title')}</title>
         <meta name="description" content={t('content')} />
       </Head>
-      <section className="absolute left-1/2 top-1/3 w-full -translate-x-1/2 -translate-y-1/2">
-        <div className="px-4 py-8 lg:px-6 lg:py-16">
+      <section>
+        <div className="mt-12 px-4 py-8 lg:px-6 lg:py-16">
           <h1 className="text-primary-300 mb-2 text-7xl font-extrabold tracking-tight text-indigo-300 lg:text-8xl">
             404
           </h1>
 
-          <p className="mb-7 text-lg font-light text-gray-500 dark:text-gray-400">
+          <p className="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">
             {t('header')}
           </p>
           <ButtonLink href="/" variant={ButtonVariant.PRIMARY}>
diff --git a/src/pages/account/index.tsx b/src/pages/account/index.tsx
index d735c452..42ccdb8f 100644
--- a/src/pages/account/index.tsx
+++ b/src/pages/account/index.tsx
@@ -1,29 +1,14 @@
 import Head from 'next/head';
-import { TrashIcon } from '@heroicons/react/outline';
 import withAnimation from 'shared/HOC/withAnimation';
-import Header from 'shared/components/Header/Header';
 import withProtectedRoute from 'shared/HOC/withProtectedRoute';
 
 import withFeatureToggles from 'shared/HOC/withFeatureToggles';
 import useTranslation from 'next-translate/useTranslation';
-import { useAccountManager } from 'features/account/accountManager';
-import Button, { ButtonVariant } from 'shared/components/Button/Button';
-import StyledDialog from 'shared/components/StyledDialog/StyledDialog';
-import Avatar from 'shared/components/Avatar/Avatar';
-import { formatDateDistance } from 'shared/utilities/convertTime';
+import Account from 'features/account/Account';
 
 function AccountPage() {
   const { t } = useTranslation('account');
 
-  const {
-    user,
-    isOpen,
-    openDeleteModal,
-    closeDeleteModal,
-    handleOnAccountDelete,
-    isRemoving,
-  } = useAccountManager();
-
   return (
     <>
       <Head>
@@ -31,76 +16,7 @@ function AccountPage() {
         <meta name="description" content={t('content')} />
       </Head>
 
-      <Header>Your account</Header>
-
-      {user ? (
-        <div className="mt-4 flex w-full items-center justify-center gap-12 text-left">
-          <Avatar size={160} src={user.image} classNames="border" />
-
-          <div className="mb-4">
-            <h2 className="mb-2 text-2xl">{user?.name}</h2>
-            <p>{user?.email}</p>
-            <p>Account created: {formatDateDistance(user.createdAt)}</p>
-          </div>
-        </div>
-      ) : (
-        <></>
-      )}
-
-      {process.env.NEXT_PUBLIC_REMOVE_ACCOUNT && (
-        <>
-          <div className="flex flex-col items-center justify-center space-y-2">
-            <div className="flex w-full md:ml-2 md:w-auto">
-              <Button
-                variant={ButtonVariant.DANGER}
-                title={t('deleteAccountButtonTitle')}
-                className="ml-2 mt-2 w-full justify-center px-3 sm:mt-0 md:w-auto"
-                onClick={openDeleteModal}
-                icon={<TrashIcon className="h-5 w-5" />}
-              >
-                {t('deleteAccountButton')}
-              </Button>
-            </div>
-          </div>
-          <StyledDialog
-            isOpen={isOpen}
-            onClose={closeDeleteModal}
-            title={t('dialogTitle')}
-            content={
-              <>
-                <div className="mt-2">
-                  <p className="text-sm text-red-500">
-                    {t('dialogContentFirst')}&nbsp;
-                    <span className="font-bold">
-                      {t('dialogContentSecond')}
-                    </span>{' '}
-                    {t('dialogContentThird')}
-                  </p>
-                </div>
-                <div className="mt-6 flex justify-between space-x-3">
-                  <Button
-                    variant={ButtonVariant.SECONDARY}
-                    onClick={closeDeleteModal}
-                    className="uppercase"
-                    disabled={isRemoving}
-                  >
-                    {t('buttonCancle')}
-                  </Button>
-                  <Button
-                    variant={ButtonVariant.DANGER}
-                    onClick={handleOnAccountDelete}
-                    icon={<TrashIcon className="h-5 w-5" />}
-                    className="uppercase"
-                    isLoading={isRemoving}
-                  >
-                    {t('buttonConfirm')}
-                  </Button>
-                </div>
-              </>
-            }
-          />
-        </>
-      )}
+      <Account />
     </>
   );
 }
diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx
index 8fdd2dea..c8bb9772 100644
--- a/src/pages/login/index.tsx
+++ b/src/pages/login/index.tsx
@@ -1,17 +1,9 @@
-import { Form, Formik } from 'formik';
 import Head from 'next/head';
-import Link from 'next/link';
 import withAnimation from 'shared/HOC/withAnimation';
-import Header from 'shared/components/Header/Header';
-import LoginButton from 'shared/components/LoginButton/LoginButton';
-import Input from 'shared/components/Input/Input';
-import { useLoginManager } from 'features/authorization/managers/loginManager';
-import Github from '../../../public/images/github.svg';
-import Google from '../../../public/images/google.svg';
 import useTranslation from 'next-translate/useTranslation';
-import AuthFormWrapper from 'features/authorization/components/AuthFormWrapper';
 import { getSession } from 'next-auth/react';
 import { NextPageContext } from 'next';
+import LoginCard from 'features/authorization/LoginCard';
 
 export async function getServerSideProps(context: NextPageContext) {
   const session = await getSession(context);
@@ -31,16 +23,6 @@ export async function getServerSideProps(context: NextPageContext) {
 }
 
 function LoginPage() {
-  const {
-    initialValues,
-    LoginSchema,
-    onSubmit,
-    onGoogleLogin,
-    onGithubLogin,
-    isSubmitting,
-    isGoogleLoading,
-    isGithubLoading,
-  } = useLoginManager();
   const { t } = useTranslation('login');
 
   return (
@@ -50,78 +32,7 @@ function LoginPage() {
         <meta name="description" content={t('login:content')} />
       </Head>
 
-      <AuthFormWrapper>
-        <Header>{t('login:heading')}</Header>
-        <Formik
-          initialValues={initialValues}
-          onSubmit={onSubmit}
-          validationSchema={LoginSchema}
-        >
-          {({ values, errors, handleChange, handleSubmit, touched }) => (
-            <Form className="flex w-full flex-col">
-              <LoginButton
-                isLoading={isGoogleLoading}
-                image={Google}
-                onClick={onGoogleLogin}
-              >
-                {t('login:googleButton')}
-              </LoginButton>
-              <LoginButton
-                image={Github}
-                isLoading={isGithubLoading}
-                onClick={onGithubLogin}
-                className="mb-3"
-              >
-                {t('login:githubButton')}
-              </LoginButton>
-              <p>{t('login:or')}</p>
-
-              <Input
-                type="email"
-                value={values.email}
-                required
-                error={touched.email ? errors.email : undefined}
-                placeholder={t('login:email')}
-                className="!mb-1 mt-3"
-                onChange={handleChange('email')}
-              />
-              <Input
-                type="password"
-                value={values.password}
-                error={touched.password ? errors.password : undefined}
-                required
-                placeholder={t('login:password')}
-                className="!my-1"
-                onChange={handleChange('password')}
-              />
-
-              {!!errors.message && (
-                <p className="mb-4 max-w-sm self-center text-center text-sm text-red-300">
-                  {errors.message}
-                </p>
-              )}
-              <div className="flex flex-col items-center justify-center">
-                <LoginButton
-                  className="mb-2 mt-1 border-indigo-200 !bg-indigo-200 !text-indigo-900 hover:!bg-indigo-300"
-                  type="submit"
-                  onClick={handleSubmit}
-                  isLoading={isSubmitting}
-                >
-                  {t('login:signInButton')}
-                </LoginButton>
-              </div>
-              <Link scroll={false} href={'/signup'} passHref>
-                <p
-                  data-test-id="signup-link"
-                  className="mt-2 text-center text-sm text-zinc-600 underline hover:cursor-pointer"
-                >
-                  {t('login:dontHaveAccount')}
-                </p>
-              </Link>
-            </Form>
-          )}
-        </Formik>
-      </AuthFormWrapper>
+      <LoginCard />
     </>
   );
 }
diff --git a/src/pages/signup/index.tsx b/src/pages/signup/index.tsx
index 50282bf5..888974d0 100644
--- a/src/pages/signup/index.tsx
+++ b/src/pages/signup/index.tsx
@@ -1,15 +1,9 @@
-import { Form, Formik } from 'formik';
 import Head from 'next/head';
-import Link from 'next/link';
 import withAnimation from 'shared/HOC/withAnimation';
-import Header from 'shared/components/Header/Header';
-import LoginButton from 'shared/components/LoginButton/LoginButton';
-import Input from 'shared/components/Input/Input';
-import { useRegisterManager } from 'features/authorization/managers/registerManager';
 import useTranslation from 'next-translate/useTranslation';
-import AuthFormWrapper from 'features/authorization/components/AuthFormWrapper';
 import { getSession } from 'next-auth/react';
 import { NextPageContext } from 'next';
+import SignUpCard from 'features/authorization/SignUpCard';
 
 export async function getServerSideProps(context: NextPageContext) {
   const session = await getSession(context);
@@ -29,8 +23,6 @@ export async function getServerSideProps(context: NextPageContext) {
 }
 
 function SignupPage() {
-  const { initialValues, onSubmit, SignupSchema, isRegistering } =
-    useRegisterManager();
   const { t } = useTranslation('signup');
 
   return (
@@ -40,68 +32,7 @@ function SignupPage() {
         <meta name="description" content={t('content')} />
       </Head>
 
-      <AuthFormWrapper>
-        <Header>{t('heading')}</Header>
-        <Formik
-          initialValues={initialValues}
-          onSubmit={onSubmit}
-          validationSchema={SignupSchema}
-        >
-          {({ values, errors, handleChange, handleSubmit, touched }) => (
-            <Form className="flex w-full flex-col">
-              <Input
-                type="text"
-                name="name"
-                value={values.name}
-                required
-                error={touched.name ? errors.name : undefined}
-                placeholder={t('name')}
-                onChange={handleChange('name')}
-                className="!my-1"
-              />
-              <Input
-                type="email"
-                className="!my-1"
-                value={values.email}
-                required
-                error={touched.email ? errors.email : undefined}
-                placeholder={t('email')}
-                onChange={handleChange('email')}
-              />
-              <Input
-                type="password"
-                className="!my-1"
-                value={values.password}
-                error={touched.password ? errors.password : undefined}
-                required
-                placeholder={t('password')}
-                onChange={handleChange('password')}
-              />
-              {!!errors.message && (
-                <p className="mb-4 max-w-sm self-center text-center text-sm text-red-300">
-                  {errors.message}
-                </p>
-              )}
-
-              <div className="flex flex-col items-center justify-center">
-                <LoginButton
-                  className="mb-2 mt-1 border-indigo-200 !bg-indigo-200 !text-indigo-900 hover:!bg-indigo-300"
-                  type="submit"
-                  onClick={handleSubmit}
-                  isLoading={isRegistering}
-                >
-                  {t('signUpButton')}
-                </LoginButton>
-              </div>
-              <Link scroll={false} href={'/login'} passHref>
-                <p className="mt-2 text-center text-sm text-zinc-600 underline hover:cursor-pointer">
-                  {t('alreadyHaveAccount')}
-                </p>
-              </Link>
-            </Form>
-          )}
-        </Formik>
-      </AuthFormWrapper>
+      <SignUpCard />
     </>
   );
 }
diff --git a/src/pages/survey/[surveyId]/index.tsx b/src/pages/survey/[surveyId]/index.tsx
index 7cda2208..f4d1c2f1 100644
--- a/src/pages/survey/[surveyId]/index.tsx
+++ b/src/pages/survey/[surveyId]/index.tsx
@@ -1,10 +1,9 @@
 import Head from 'next/head';
-import { useSurveyAnswerManager } from 'features/surveys/managers/surveyAnswerManager';
 import useTranslation from 'next-translate/useTranslation';
 import { InferGetServerSidePropsType, NextPageContext } from 'next';
 import { getSurveyData } from 'pages/api/answer/[id]';
-import AllQuestionsView from 'features/surveys/components/AllQuestionsView/AllQuestionsView';
-import OneQuestionView from 'features/surveys/components/OneQuestionView/OneQuestionView';
+
+import SurveyDisplay from 'features/surveys/features/SurveyDisplay/SurveyDisplay';
 
 export async function getServerSideProps(context: NextPageContext) {
   const surveyData = await getSurveyData(context.query.surveyId as string);
@@ -19,16 +18,6 @@ export async function getServerSideProps(context: NextPageContext) {
 function AnswerPage({
   initialData,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
-  const {
-    handleAnswerChange,
-    handleSave,
-    isAnswering,
-    formData,
-    isSubmitted,
-    activeQuestionIndex,
-    handleNextQuestion,
-    handlePreviousQuestion,
-  } = useSurveyAnswerManager(initialData);
   const { t } = useTranslation('survey');
 
   return (
@@ -37,34 +26,8 @@ function AnswerPage({
         <title>{t('title')}</title>
         <meta name="description" content={t('content')} />
       </Head>
-      <div className="w-full">
-        {formData?.isActive ? (
-          formData.oneQuestionPerStep ? (
-            <OneQuestionView
-              activeQuestionIndex={activeQuestionIndex}
-              formData={formData}
-              handleNextQuestion={handleNextQuestion}
-              handlePreviousQuestion={handlePreviousQuestion}
-              isSubmitted={isSubmitted}
-              handleAnswerChange={handleAnswerChange}
-              isAnswering={isAnswering}
-            />
-          ) : (
-            <AllQuestionsView
-              formData={formData}
-              handleSave={handleSave}
-              handleAnswerChange={handleAnswerChange}
-              isAnswering={isAnswering}
-              isSubmitted={isSubmitted}
-            />
-          )
-        ) : (
-          <>
-            <div className="text-5xl">🙁</div>
-            <div className="my-5 text-xl">{t('surveyNoLongerActive')}</div>
-          </>
-        )}
-      </div>
+
+      <SurveyDisplay initialData={initialData} />
     </>
   );
 }
diff --git a/src/pages/survey/[surveyId]/thank-you.tsx b/src/pages/survey/[surveyId]/thank-you.tsx
index 63cc4324..96d056d5 100644
--- a/src/pages/survey/[surveyId]/thank-you.tsx
+++ b/src/pages/survey/[surveyId]/thank-you.tsx
@@ -1,6 +1,6 @@
 import Head from 'next/head';
 import useTranslation from 'next-translate/useTranslation';
-import Image from 'next/image';
+import ThankYou from 'features/surveys/features/SurveyDisplay/components/ThankYou';
 
 const ThankyouPage = () => {
   const { t } = useTranslation('thankyou');
@@ -12,20 +12,7 @@ const ThankyouPage = () => {
         <meta name="description" content={t('content')} />
       </Head>
 
-      <div className="flex flex-col items-center justify-center">
-        <Image
-          src="/images/thankyou.svg"
-          alt="thankyou"
-          height="151"
-          width="140"
-        />
-
-        <h1 className="leading-tighter mt-4 text-3xl font-extrabold tracking-tighter">
-          {t('firstPartHeading')}&nbsp;
-          <span className="text-indigo-200">{t('secondPartHeading')}</span>
-        </h1>
-        <p className="text-md mt-2 max-w-lg text-zinc-600">{t('content')}</p>
-      </div>
+      <ThankYou />
     </>
   );
 };
diff --git a/src/pages/survey/answer/[surveyId]/index.tsx b/src/pages/survey/answer/[surveyId]/index.tsx
index d31b8fdc..c53fbe78 100644
--- a/src/pages/survey/answer/[surveyId]/index.tsx
+++ b/src/pages/survey/answer/[surveyId]/index.tsx
@@ -1,30 +1,13 @@
-import Toggle from 'shared/components/Toggle/Toggle';
-import {
-  PencilIcon,
-  RefreshIcon,
-  ShareIcon,
-  TrashIcon,
-} from '@heroicons/react/outline';
-import NoAnswers from '/public/images/no-answers.svg';
-import Image from 'next/image';
-
 import Head from 'next/head';
 import withAnimation from 'shared/HOC/withAnimation';
 import withProtectedRoute from 'shared/HOC/withProtectedRoute';
-import AnswerHeader from 'features/surveys/components/AnswerHeader/AnswerHeader';
-import { useSurveyResultsManager } from 'features/surveys/managers/surveyResultsManager';
-import Button, { ButtonVariant } from 'shared/components/Button/Button';
 import useTranslation from 'next-translate/useTranslation';
 import { InferGetServerSidePropsType, NextPageContext } from 'next';
 import { getSession } from 'next-auth/react';
 
 import { getSurveyWithAnswers } from 'pages/api/survey/[id]';
 import { SurveyWithAnswers } from 'types/SurveyWithAnswers';
-import ResultComponent from 'features/surveys/components/ResultsComponents/ResultComponent';
-import useModal from 'features/surveys/hooks/useModal';
-import DeleteSurveyModal from 'features/surveys/components/DeleteSurveyModal/DeleteSurveyModal';
-import ShareSurveyModal from 'features/surveys/components/ShareSurveryModal/ShareSurveyModal';
-import { useRouter } from 'next/router';
+import SurveyResults from 'features/surveys/features/SurveyResults/SurveyResults';
 
 export async function getServerSideProps(context: NextPageContext) {
   const session = await getSession(context);
@@ -61,37 +44,8 @@ export async function getServerSideProps(context: NextPageContext) {
 function SurveyResultsPage({
   initialData,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
-  const {
-    surveyId,
-    getSurveyData,
-    surveyData,
-    mappedAnswersData,
-    isDataLoading,
-    onRemoveSuccess,
-    updateSurveyStatus,
-    isStatusLoading,
-  } = useSurveyResultsManager(initialData);
-
-  const {
-    isModalOpen: isDeleteSurveyModalOpen,
-    closeModal: closeDeleteSurveyModal,
-    openModal: openDeleteSurveyModal,
-  } = useModal();
-
-  const {
-    isModalOpen: isShareSurveyModalOpen,
-    closeModal: closeShareSurveyModal,
-    openModal: openShareSurveyModal,
-  } = useModal();
-
   const { t } = useTranslation('surveyAnswer');
 
-  const router = useRouter();
-
-  const handleEditSurvey = () => {
-    router.push(`/survey/create/${surveyId}`);
-  };
-
   return (
     <>
       <Head>
@@ -99,105 +53,7 @@ function SurveyResultsPage({
         <meta name="description" content={t('content')} />
       </Head>
 
-      <>
-        <div className="mb-6 flex flex-col items-center justify-between gap-x-8 sm:mb-4 sm:flex-row">
-          <h1 className="flex min-h-[38px] items-center border-indigo-200 pb-2 text-xl font-semibold sm:border-l-4 sm:pb-0 sm:pl-4 sm:text-left">
-            {surveyData?.title}
-          </h1>
-          <div className="flex w-full flex-wrap justify-center gap-2 sm:w-auto sm:flex-nowrap">
-            <div className="flex w-full items-center justify-start">
-              <Toggle
-                classNames="mx-auto my-2 sm:my-0 sm:ml-0 sm:mr-2"
-                isEnabled={!!surveyData?.isActive}
-                onToggle={updateSurveyStatus}
-                label={t('isActive')}
-                isLoading={isStatusLoading}
-              />
-            </div>
-
-            <Button
-              title={'Edit survey'}
-              onClick={handleEditSurvey}
-              className="grow sm:grow-0"
-              variant={ButtonVariant.PRIMARY}
-              icon={<PencilIcon className="h-5 w-5" />}
-            />
-            <Button
-              title={t('shareSurvey')}
-              onClick={openShareSurveyModal}
-              className="grow sm:grow-0"
-              variant={ButtonVariant.PRIMARY}
-              icon={<ShareIcon className="h-5 w-5" />}
-            />
-
-            <Button
-              title={t('buttonRefreshTitle')}
-              onClick={getSurveyData}
-              isLoading={isDataLoading}
-              className="grow sm:grow-0"
-              variant={ButtonVariant.OUTLINE}
-              icon={<RefreshIcon className="h-5 w-5" />}
-            />
-
-            <Button
-              variant={ButtonVariant.DANGER}
-              title={t('deleteSurveyButtonTitle')}
-              onClick={openDeleteSurveyModal}
-              className="grow sm:grow-0"
-              icon={<TrashIcon className="h-5 w-5" />}
-            />
-          </div>
-        </div>
-
-        <hr />
-        <AnswerHeader
-          totalVotes={surveyData?.answers.length || 0}
-          createDate={surveyData?.createdAt ?? ''}
-        />
-
-        {surveyData?.answers?.length === 0 && (
-          <>
-            <Image
-              className="mx-auto mt-12 w-[140px]"
-              src={NoAnswers}
-              height={160}
-              alt="no answers"
-            />
-            <div className="my-6">{t('noAnswers')}</div>
-            <Button
-              title={t('shareSurvey')}
-              onClick={openShareSurveyModal}
-              className="mx-auto w-full sm:w-[200px]"
-              variant={ButtonVariant.PRIMARY}
-              icon={<ShareIcon className="h-5 w-5" />}
-            >
-              <span className="ml-2">{t('shareSurvey')}</span>
-            </Button>
-          </>
-        )}
-
-        {Object.keys(mappedAnswersData).map((key) => (
-          <ResultComponent
-            key={key}
-            question={mappedAnswersData[key].question}
-            type={mappedAnswersData[key].questionType}
-            answers={mappedAnswersData[key].answers}
-          />
-        ))}
-
-        <DeleteSurveyModal
-          surveyId={surveyId}
-          closeModal={closeDeleteSurveyModal}
-          isOpened={isDeleteSurveyModalOpen}
-          onSuccess={onRemoveSuccess}
-        />
-
-        <ShareSurveyModal
-          surveyId={surveyId}
-          closeModal={closeShareSurveyModal}
-          isOpened={isShareSurveyModalOpen}
-        />
-      </>
+      <SurveyResults initialData={initialData} />
     </>
   );
 }
diff --git a/src/pages/survey/create/[[...surveyId]].tsx b/src/pages/survey/create/[[...surveyId]].tsx
index e937444e..884513a4 100644
--- a/src/pages/survey/create/[[...surveyId]].tsx
+++ b/src/pages/survey/create/[[...surveyId]].tsx
@@ -1,33 +1,13 @@
 import Head from 'next/head';
 import withAnimation from 'shared/HOC/withAnimation';
-import Button, { ButtonVariant } from 'shared/components/Button/Button';
-import Header from 'shared/components/Header/Header';
-import Input from 'shared/components/Input/Input';
-import { useCreateSurveyManager } from 'features/surveys/managers/createSurveyManager';
 import useTranslation from 'next-translate/useTranslation';
-import QuestionBlockFactory from 'features/surveys/components/QuestionBlocks/QuestionBlockFactory';
 
-import { AddQuestionButton } from 'features/surveys/components/AddQuestionButton/AddQuestionButton';
-import {
-  MAX_QUESTIONS,
-  MAX_TITLE_LENGTH,
-  MIN_QUESTIONS,
-} from 'shared/constants/surveysConfig';
-import {
-  DragDropContext,
-  Droppable,
-  Draggable,
-  DropResult,
-} from 'react-beautiful-dnd';
-import clsx from 'clsx';
-import { CogIcon } from '@heroicons/react/outline';
-import useModal from 'features/surveys/hooks/useModal';
-import SurveyOptionsModalModal from 'features/surveys/components/SurveyOptionsModal/SurveyOptionsModal';
-import { useApplicationContext } from 'features/application/context';
 import { InferGetServerSidePropsType, NextPageContext } from 'next';
 import { getSurveyData } from 'pages/api/answer/[id]';
 import { getSession } from 'next-auth/react';
-import { useEffect, useState } from 'react';
+import SurveyCreator from 'features/surveys/features/SurveyCreator/SurveyCreator';
+import { SurveyCreatorContext } from 'features/surveys/features/SurveyCreator/context';
+import { useCreateSurveyManager } from 'features/surveys/features/SurveyCreator/managers/createSurveyManager';
 
 export async function getServerSideProps(context: NextPageContext) {
   const surveyId = context.query.surveyId?.[0];
@@ -64,55 +44,9 @@ export async function getServerSideProps(context: NextPageContext) {
 function SurveyCreatePage({
   initialData,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
-  const { user } = useApplicationContext();
-
-  const [isBrowser, setIsBrowser] = useState(false);
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      setIsBrowser(true);
-    }
-  }, []);
-
-  const {
-    title,
-    error,
-    handleChangeTitle,
-    handleOptionChange,
-    handleOptionRemove,
-    handleAddingNewOption,
-    createSurvey,
-    isCreating,
-    questions,
-    addQuestion,
-    removeQuestion,
-    updateQuestion,
-    isSubmitted,
-    updateQuestionRequired,
-    reorderQuestion,
-    expandQuestion,
-    surveyOptions,
-    updateSurveyOptions,
-    signInToCreateSurvey,
-    isEditMode,
-    confirmEditSurvey,
-    discardChanges,
-  } = useCreateSurveyManager(initialData);
   const { t } = useTranslation('surveyCreate');
 
-  const onDragEnd = (result: DropResult) => {
-    if (!result.destination) {
-      return;
-    }
-
-    reorderQuestion(result.source.index, result.destination.index);
-  };
-
-  const {
-    isModalOpen: isOptionsModalOpen,
-    closeModal: closeOptionsSurveyModal,
-    openModal: openOptionsSurveyModal,
-  } = useModal();
+  const manager = useCreateSurveyManager(initialData);
 
   return (
     <>
@@ -121,143 +55,9 @@ function SurveyCreatePage({
         <meta name="description" content={t('content')} />
       </Head>
 
-      <Header>{isEditMode ? t('editHeading') : t('heading')}</Header>
-
-      <div className="flex flex-col gap-x-2 sm:flex-row">
-        <div className="w-full">
-          <Input
-            name="survey-title"
-            placeholder={t('surveyTitlePlaceholder')}
-            value={title}
-            error={error}
-            maxLength={MAX_TITLE_LENGTH}
-            onChange={handleChangeTitle}
-          />
-        </div>
-
-        <Button
-          className="h-[42px] whitespace-nowrap border border-transparent sm:mt-2"
-          variant={ButtonVariant.PRIMARY}
-          onClick={openOptionsSurveyModal}
-          icon={<CogIcon className="h-5 w-5" />}
-          data-test-id="options-button"
-        >
-          <span className="ms-1">{t('options')}</span>
-        </Button>
-      </div>
-
-      <div className="mt-4">
-        {isEditMode && (
-          <div
-            className="mb-3 rounded-sm border-l-4 border-indigo-500 bg-indigo-100 px-4 py-2 text-left text-xs text-indigo-700"
-            role="alert"
-          >
-            <p className="font-bold">{t('editNoteTitle')}</p>
-
-            <p>{t('editNote')}</p>
-          </div>
-        )}
-        <DragDropContext onDragEnd={onDragEnd}>
-          {isBrowser ? (
-            <Droppable droppableId="droppable">
-              {(provided, snapshot) => (
-                <div
-                  {...provided.droppableProps}
-                  ref={provided.innerRef}
-                  className={clsx(snapshot.isDraggingOver && '')}
-                >
-                  {questions.map((question, index) => (
-                    <Draggable
-                      key={question.id}
-                      draggableId={question.id}
-                      index={index}
-                    >
-                      {(provided, snapshot) => (
-                        <div
-                          className={clsx('mb-3', snapshot.isDragging && '')}
-                          ref={provided.innerRef}
-                          {...provided.draggableProps}
-                          style={provided.draggableProps.style}
-                        >
-                          <QuestionBlockFactory
-                            key={question.id}
-                            type={question.type}
-                            dragHandleProps={provided.dragHandleProps}
-                            handleAddingNewOption={handleAddingNewOption}
-                            options={question.options ?? []}
-                            handleOptionChange={handleOptionChange}
-                            handleOptionRemove={handleOptionRemove}
-                            questionIndex={index}
-                            onQuestionRemove={removeQuestion}
-                            updateQuestion={updateQuestion}
-                            questionTitle={question.title}
-                            isSubmitted={isSubmitted}
-                            isRemovingPossible={
-                              questions.length > MIN_QUESTIONS
-                            }
-                            isDraggingPossible={questions.length > 1}
-                            isRequired={question.isRequired}
-                            updateQuestionRequired={updateQuestionRequired}
-                            expanded={question.expanded}
-                            expandQuestion={expandQuestion}
-                            isEditMode={isEditMode}
-                          />
-                        </div>
-                      )}
-                    </Draggable>
-                  ))}
-                  {provided.placeholder}
-                </div>
-              )}
-            </Droppable>
-          ) : null}
-        </DragDropContext>
-      </div>
-
-      <div className="mt-4">
-        {questions.length < MAX_QUESTIONS && !isEditMode && (
-          <AddQuestionButton onClick={addQuestion} />
-        )}
-
-        {user ? (
-          <div className="flex flex-col gap-2 sm:flex-row">
-            {isEditMode && (
-              <Button
-                onClick={discardChanges}
-                className="z-0 w-full"
-                variant={ButtonVariant.OUTLINE}
-                disabled={isCreating}
-              >
-                {t('discardChanges')}
-              </Button>
-            )}
-            <Button
-              name="create-survey"
-              onClick={isEditMode ? confirmEditSurvey : createSurvey}
-              className="z-0 w-full"
-              variant={ButtonVariant.PRIMARY}
-              isLoading={isCreating}
-            >
-              {isEditMode ? t('buttonSave') : t('buttonCreate')}
-            </Button>
-          </div>
-        ) : (
-          <Button
-            onClick={signInToCreateSurvey}
-            variant={ButtonVariant.PRIMARY}
-            className="z-0 mt-2 w-full"
-          >
-            {t('signInToCreateSurvey')}
-          </Button>
-        )}
-      </div>
-
-      <SurveyOptionsModalModal
-        isOpened={isOptionsModalOpen}
-        closeModal={closeOptionsSurveyModal}
-        surveyOptions={surveyOptions}
-        updateOptions={updateSurveyOptions}
-      />
+      <SurveyCreatorContext.Provider value={manager}>
+        <SurveyCreator />
+      </SurveyCreatorContext.Provider>
     </>
   );
 }
diff --git a/src/pages/surveys/index.tsx b/src/pages/surveys/index.tsx
index 4690ddec..abcbc68a 100644
--- a/src/pages/surveys/index.tsx
+++ b/src/pages/surveys/index.tsx
@@ -1,22 +1,11 @@
-import Image from 'next/image';
 import Head from 'next/head';
-import { formatDateDistance } from 'shared/utilities/convertTime';
 import withAnimation from 'shared/HOC/withAnimation';
 import withProtectedRoute from 'shared/HOC/withProtectedRoute';
-import Header from 'shared/components/Header/Header';
-import SurveyRow from 'features/surveys/components/SurveyRow/SurveyRow';
-import NoSurveys from '../../../public/images/no-surveys.svg';
-import Button, { ButtonVariant } from 'shared/components/Button/Button';
-import ButtonLink from 'shared/components/ButtonLink/ButtonLink';
-import usePagination from 'features/surveys/hooks/usePagination';
-import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/outline';
-import useTranslation from 'next-translate/useTranslation';
 import { InferGetServerSidePropsType, NextPageContext } from 'next';
 import { getSession } from 'next-auth/react';
 import { getAllUserSurveys } from 'pages/api/survey';
-import { Survey } from '@prisma/client';
-import { useEffect, useState } from 'react';
-import { getFetch } from '../../../lib/axiosConfig';
+import SurveyList from 'features/surveys/features/SurveyList/SurveyList';
+import useTranslation from 'next-translate/useTranslation';
 
 export async function getServerSideProps(context: NextPageContext) {
   const session = await getSession(context);
@@ -42,24 +31,8 @@ export async function getServerSideProps(context: NextPageContext) {
 function SurveyListPage({
   surveys,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
-  const [surveysData, setSurveysData] = useState<Survey[]>(surveys);
-
-  const { items, canGoNext, canGoPrev, goNext, goPrev, pageIndex } =
-    usePagination<Survey>(surveysData ?? [], { size: 7 });
   const { t } = useTranslation('surveys');
 
-  useEffect(() => {
-    if (items.length === 0) {
-      goPrev();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [items]);
-
-  const refreshSurveys = async () => {
-    const surveys = await getFetch<{ surveys: Survey[] }>('/api/survey');
-    setSurveysData(surveys.surveys);
-  };
-
   return (
     <>
       <Head>
@@ -67,62 +40,7 @@ function SurveyListPage({
         <meta name="description" content={t('content')} />
       </Head>
 
-      <Header>{t('heading')}</Header>
-
-      <div className="flex flex-col items-center justify-center">
-        {surveys &&
-          (items?.length > 0 ? (
-            items.map((item) => {
-              return (
-                <SurveyRow
-                  key={item.id}
-                  id={item.id}
-                  question={item.title}
-                  refreshSurveys={refreshSurveys}
-                  createDate={formatDateDistance(item.createdAt)}
-                ></SurveyRow>
-              );
-            })
-          ) : (
-            <>
-              <Image
-                className="mt-2 w-[160px] -translate-x-1"
-                src={NoSurveys}
-                alt="no surveys"
-                height={165}
-              />
-              <p className="my-6">{t('noSurveys')}</p>
-              <ButtonLink
-                href={'/survey/create'}
-                variant={ButtonVariant.PRIMARY}
-                className="w-full sm:w-[200px]"
-              >
-                {t('buttonCreateSurvey')}
-              </ButtonLink>
-            </>
-          ))}
-      </div>
-      {(canGoNext || canGoPrev) && (
-        <div className="mt-2 flex flex-row items-center justify-center">
-          <Button
-            variant={ButtonVariant.OUTLINE_PRIMARY}
-            className="px-4"
-            icon={<ArrowLeftIcon className="h-5 w-5" />}
-            disabled={!canGoPrev}
-            onClick={goPrev}
-          />
-          <div className="min-w-[100px]">
-            <p className="text-center">{pageIndex + 1}</p>
-          </div>
-          <Button
-            variant={ButtonVariant.OUTLINE_PRIMARY}
-            className="px-4"
-            icon={<ArrowRightIcon className="h-5 w-5" />}
-            disabled={!canGoNext}
-            onClick={goNext}
-          />
-        </div>
-      )}
+      <SurveyList initialData={surveys} />
     </>
   );
 }
diff --git a/src/shared/components/Note/Note.tsx b/src/shared/components/Note/Note.tsx
new file mode 100644
index 00000000..95975598
--- /dev/null
+++ b/src/shared/components/Note/Note.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+interface NoteProps {
+  title: string;
+  description: string;
+}
+
+export default function Note({ title, description }: NoteProps) {
+  return (
+    <div
+      className="mb-3 rounded-sm border-l-4 border-indigo-500 bg-indigo-100 px-4 py-2 text-left text-xs text-indigo-700"
+      role="alert"
+    >
+      <p className="font-bold">{title}</p>
+      <p>{description}</p>
+    </div>
+  );
+}
diff --git a/src/shared/constants/surveysConfig.ts b/src/shared/constants/surveysConfig.ts
index 313baa19..46cc0dc0 100644
--- a/src/shared/constants/surveysConfig.ts
+++ b/src/shared/constants/surveysConfig.ts
@@ -1,11 +1,11 @@
 import { QuestionType } from '@prisma/client';
-import { Question } from 'features/surveys/managers/createSurveyManager';
+import { Question } from 'features/surveys/features/SurveyCreator/managers/createSurveyManager';
 import { v4 } from 'uuid';
 
 export const MAX_TITLE_LENGTH = 255;
 
 export const MAX_QUESTIONS = 10;
-export const MIN_QUESTIONS = 1;
+export const MIN_QUESTIONS = 0;
 
 export const MAX_OPTIONS = 6;
 export const MIN_OPTIONS = 2;