diff --git a/package-lock.json b/package-lock.json
index 2b943ee..6017c96 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "date-fns": "^3.6.0",
         "jwt-decode": "^4.0.0",
         "react": "^18.2.0",
+        "react-brackets": "^0.4.7",
         "react-dom": "^18.2.0",
         "react-image-picker-editor": "^1.3.3",
         "react-paginate": "^8.2.0",
@@ -2598,6 +2599,11 @@
         }
       }
     },
+    "node_modules/@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
     "node_modules/@emotion/unitless": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
@@ -4180,104 +4186,6 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
-    "node_modules/@testing-library/dom": {
-      "version": "9.3.3",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.3.tgz",
-      "integrity": "sha512-fB0R+fa3AUqbLHWyxXa2kGVtf1Fe1ZZFr0Zp6AIbIAzXb2mKbEXl+PCQNUOaq5lbTab5tfctfXRNsWXxa2f7Aw==",
-      "peer": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/runtime": "^7.12.5",
-        "@types/aria-query": "^5.0.1",
-        "aria-query": "5.1.3",
-        "chalk": "^4.1.0",
-        "dom-accessibility-api": "^0.5.9",
-        "lz-string": "^1.5.0",
-        "pretty-format": "^27.0.2"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "peer": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/aria-query": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
-      "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==",
-      "peer": true,
-      "dependencies": {
-        "deep-equal": "^2.0.5"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "peer": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "peer": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/@testing-library/dom/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==",
-      "peer": true
-    },
-    "node_modules/@testing-library/dom/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "peer": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/@testing-library/jest-dom": {
       "version": "5.17.0",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
@@ -6773,6 +6681,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -7330,6 +7246,14 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/css-declaration-sorter": {
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
@@ -7520,6 +7444,16 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "node_modules/css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "node_modules/css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -13919,6 +13853,11 @@
         "node": ">=18"
       }
     },
+    "node_modules/keycode": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.1.tgz",
+      "integrity": "sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg=="
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -16913,6 +16852,103 @@
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
       "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
+    "node_modules/react-brackets": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/react-brackets/-/react-brackets-0.4.7.tgz",
+      "integrity": "sha512-5NynHxC32gEe9vuLQJvD2JEtHXg2gI0R6MWVD+uSYhQCAlEdwlKbFWNdrP5MIt1buyxrs2F/tr1EIW6+eBCocw==",
+      "dependencies": {
+        "react-swipeable-views": "^0.13.9",
+        "styled-components": "^5.1.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0",
+        "react-swipeable-views": "^0.13.9",
+        "styled-components": "^5.1.1"
+      }
+    },
+    "node_modules/react-brackets/node_modules/@babel/runtime": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0.tgz",
+      "integrity": "sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==",
+      "dependencies": {
+        "regenerator-runtime": "^0.12.0"
+      }
+    },
+    "node_modules/react-brackets/node_modules/@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
+    "node_modules/react-brackets/node_modules/react-swipeable-views": {
+      "version": "0.13.9",
+      "resolved": "https://registry.npmjs.org/react-swipeable-views/-/react-swipeable-views-0.13.9.tgz",
+      "integrity": "sha512-WXC2FKYvZ9QdJ31v9LjEJEl1bA7E4AcaloTkbW0uU0dYf5uvv4aOpiyxubvOkVl1a5L2UAHmKSif4TmJ9usrSg==",
+      "dependencies": {
+        "@babel/runtime": "7.0.0",
+        "prop-types": "^15.5.4",
+        "react-swipeable-views-core": "^0.13.7",
+        "react-swipeable-views-utils": "^0.13.9",
+        "warning": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "peerDependencies": {
+        "react": "^15.3.0 || ^16.0.0"
+      }
+    },
+    "node_modules/react-brackets/node_modules/regenerator-runtime": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+      "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+    },
+    "node_modules/react-brackets/node_modules/styled-components": {
+      "version": "5.3.11",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz",
+      "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^1.1.0",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1.12.0",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0",
+        "react-is": ">= 16.8.0"
+      }
+    },
+    "node_modules/react-brackets/node_modules/styled-components/node_modules/babel-plugin-styled-components": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz",
+      "integrity": "sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-module-imports": "^7.22.5",
+        "@babel/plugin-syntax-jsx": "^7.22.5",
+        "lodash": "^4.17.21",
+        "picomatch": "^2.3.1"
+      },
+      "peerDependencies": {
+        "styled-components": ">= 2"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -17242,6 +17278,89 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-swipeable-views-core": {
+      "version": "0.13.7",
+      "resolved": "https://registry.npmjs.org/react-swipeable-views-core/-/react-swipeable-views-core-0.13.7.tgz",
+      "integrity": "sha512-ekn9oDYfBt0oqJSGGwLEhKvn+QaqMGTy//9dURTLf+vp7W5j6GvmKryYdnwJCDITaPFI2hujXV4CH9krhvaE5w==",
+      "dependencies": {
+        "@babel/runtime": "7.0.0",
+        "warning": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/react-swipeable-views-core/node_modules/@babel/runtime": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0.tgz",
+      "integrity": "sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==",
+      "dependencies": {
+        "regenerator-runtime": "^0.12.0"
+      }
+    },
+    "node_modules/react-swipeable-views-core/node_modules/regenerator-runtime": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+      "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+    },
+    "node_modules/react-swipeable-views-utils": {
+      "version": "0.13.9",
+      "resolved": "https://registry.npmjs.org/react-swipeable-views-utils/-/react-swipeable-views-utils-0.13.9.tgz",
+      "integrity": "sha512-QLGxRKrbJCbWz94vkWLzb1Daaa2Y/TZKmsNKQ6WSNrS+chrlfZ3z9tqZ7YUJlW6pRWp3QZdLSY3UE3cN0TXXmw==",
+      "dependencies": {
+        "@babel/runtime": "7.0.0",
+        "keycode": "^2.1.7",
+        "prop-types": "^15.6.0",
+        "react-event-listener": "^0.6.0",
+        "react-swipeable-views-core": "^0.13.7",
+        "shallow-equal": "^1.2.1"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/react-swipeable-views-utils/node_modules/@babel/runtime": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0.tgz",
+      "integrity": "sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==",
+      "dependencies": {
+        "regenerator-runtime": "^0.12.0"
+      }
+    },
+    "node_modules/react-swipeable-views-utils/node_modules/react-event-listener": {
+      "version": "0.6.6",
+      "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.6.6.tgz",
+      "integrity": "sha512-+hCNqfy7o9wvO6UgjqFmBzARJS7qrNoda0VqzvOuioEpoEXKutiKuv92dSz6kP7rYLmyHPyYNLesi5t/aH1gfw==",
+      "dependencies": {
+        "@babel/runtime": "^7.2.0",
+        "prop-types": "^15.6.0",
+        "warning": "^4.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0"
+      }
+    },
+    "node_modules/react-swipeable-views-utils/node_modules/react-event-listener/node_modules/@babel/runtime": {
+      "version": "7.24.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.5.tgz",
+      "integrity": "sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/react-swipeable-views-utils/node_modules/react-event-listener/node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+    },
+    "node_modules/react-swipeable-views-utils/node_modules/regenerator-runtime": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+      "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -18212,6 +18331,16 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "node_modules/shallow-equal": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
+      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
+    },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -19822,19 +19951,6 @@
         "is-typedarray": "^1.0.0"
       }
     },
-    "node_modules/typescript": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
-      "peer": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=4.2.0"
-      }
-    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -20144,6 +20260,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/package.json b/package.json
index 224eea4..258d9af 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "date-fns": "^3.6.0",
     "jwt-decode": "^4.0.0",
     "react": "^18.2.0",
+    "react-brackets": "^0.4.7",
     "react-dom": "^18.2.0",
     "react-image-picker-editor": "^1.3.3",
     "react-paginate": "^8.2.0",
diff --git a/src/elements/Ladder/Ladder.js b/src/elements/Ladder/Ladder.js
new file mode 100644
index 0000000..08400fd
--- /dev/null
+++ b/src/elements/Ladder/Ladder.js
@@ -0,0 +1,206 @@
+import { useEffect, useState, useRef } from "react"
+import { Bracket, Seed, SeedItem, SeedTeam} from 'react-brackets';
+import defeatIcon from '../../resources/defeat.png';
+import victoryIcon from '../../resources/glory.png';
+import robotIcon from '../../resources/robot1.svg';
+
+import zoomInIcon from '../../resources/zoom-in.svg';
+import zoomOutIcon from '../../resources/zoom-out.svg';
+
+
+import './Ladder.scss';
+
+
+const CustomSeed = ({seed, breakpoint, roundIndex, seedIndex}) => {    
+    const getColor = (seed, index) => {
+        if (seed.Winner === seed.teams[index]?.BotId) {
+            return 'green';
+        } else if (seed.Winner === seed.teams[1 - index]?.BotId) {
+            return 'red';
+        } else {
+            return 'gray';
+        }
+    }
+    const getImage = (seed, index) => {
+        let icon;
+        if (seed.Winner === seed.teams[index]?.BotId) {
+            icon = victoryIcon;
+        } else if (seed.Winner !== seed.teams[index]?.BotId && seed.Winner !== -1) {
+            icon = defeatIcon;
+        } else if (seed.Winner === -1 && seed.teams[index].BotId){
+            icon = robotIcon;
+        } else {
+            return <></>;
+        }
+        return <img src={icon} alt='icon' className='bot-icon'/>;
+    }
+
+    return (
+      <Seed mobileBreakpoint={breakpoint} style={{ fontSize: 12 }}>
+        <SeedItem>
+          <div>
+            {seed.teams.map((team, index) => (
+            <SeedTeam style={{ color: getColor(seed, index) }}>
+                <div className='ladder-record'>
+                    <div className='user-name'>
+                        {team.UserName|| '...'}
+                    </div>
+                    <div className='bot'>
+                        {getImage(seed, index)}
+                        <div className='bot-name'>
+                            {team.BotFile || '...'}
+                        </div>
+                    </div>
+                </div>
+            </SeedTeam>))}
+          </div>
+        </SeedItem>
+      </Seed>
+    );
+}
+
+const buildRounds = function (json) {
+    let result = json;
+    let temp = [];
+    result.sort((a, b) => (a.Position-b.Position));
+    const minPosition = result[0].Position;
+    const maxPosition = result[result.length - 1].Position;
+    const heapSize = Math.pow(2, Math.ceil(Math.log2(maxPosition))) - 1;
+    
+    for (let i = 0; i < minPosition; i++) {
+        temp.push({
+            id: i,
+            date: new Date().toDateString(),
+            teams: [{}, {}],
+        });
+    };
+    temp = temp.concat(result);
+    let tail = heapSize - temp.length;
+    for (let i = 0; i < tail; i++) {
+        temp.push({
+            id: i + maxPosition + 1,
+            date: new Date().toDateString(),
+            teams: [{}, {}],
+        });
+    }
+    result = temp;
+
+    result = result.map(element => {
+        if (element.PlayersBots) element.teams = element.PlayersBots;
+        if (!element.Status) element.Status = "NotReadyToPlay";
+        if (!element.Winner) element.Winner = -1;
+        if (!element.PlayedOutDate) element.PlayedOutDate = "0001-01-01T00:00:00";
+        if (!element.Position) element.Position = element.matchId;
+        return element;
+    });
+    
+    temp = [];
+    let cursor = -1;
+    for (let i = result.length - 1; i >= 0 ; i--) {
+        if (Number.isInteger(Math.log2(i + 2))) {
+            temp.push([]);
+            cursor++;
+        }
+        temp[cursor].push(result[i]);
+    }
+    result = temp;
+
+    result = result.map((round, index) => {
+        return {
+            title: 'Round ' + (index + 1),
+            seeds: round,
+        };
+    });
+    
+    return result;
+}
+
+const roundClassName = function (title, roundIndex) {
+    return <div className='round-title'>{title}</div>;    
+}
+
+
+export default function Ladder({status}){
+    const [rounds, setRounds] = useState([]);
+    const [zoom, setZoom] = useState(1);
+    const [origin, setOrigin] = useState({x: 0, y: 0});
+    const divRef = useRef(null);
+
+    let mouseDown = false;
+    let startX, startY, scrollLeft, scrollTop;
+
+    const move = (e) => {
+        e.preventDefault();
+        if(!mouseDown) { return; }
+        const x = e.pageX - divRef.offsetLeft;
+        const y = e.pageY - divRef.offsetTop;
+        const scrollX = x - startX;
+        const scrollY = y - startY;
+        divRef.scrollLeft = scrollLeft - scrollX;
+        divRef.scrollTop = scrollTop - scrollY;
+    };
+
+    const stopDrag = (e) => {
+        mouseDown = false;
+    }
+
+    const startDrag = (e) => {
+        mouseDown = true;
+        startX = e.pageX - divRef.offsetLeft;
+        startY = e.pageY - divRef.offsetTop;
+        scrollLeft = divRef.scrollLeft;
+        scrollTop = divRef.scrollTop;
+    }
+
+    useEffect(() => {
+        divRef.current.addEventListener('mousemove', move, false);
+        divRef.current.addEventListener('mousedown', startDrag, false);
+        divRef.current.addEventListener('mouseup', stopDrag, false);
+        divRef.current.addEventListener('mouseleave', stopDrag, false);
+    },[divRef]);
+
+    useEffect(() => {
+        setRounds(buildRounds(status));
+    }, [status]);
+
+    const changeZoom = (delta) => {
+        const div = divRef.current;
+        const rect = div.getBoundingClientRect();
+        div.style.top = `${Math.max(rect.top,0)}px`;
+        div.style.left = `${Math.max(rect.left,0)}px`;
+        setOrigin({x: rect.width/2, y: rect.height/2 });
+        console.log(rect);
+        console.log(origin);
+        setZoom(Math.min(Math.max(zoom + delta * 0.1, 0.1), 2));
+    }
+
+    return (<>
+        <div className='ladder'>
+            <div className='ladder-zoom' >
+                <div className='ladder-zoom-container' 
+                style={{ 
+                    transform: `scale(${zoom})`, 
+                    transformOrigin: `${origin.x}px ${origin.y}px`
+                }}
+                ref={divRef}>
+                    <div className='origin' style={{left: origin.x, top: origin.y}}></div>
+                    <Bracket rounds={rounds} 
+                        rtl={false} 
+                        mobileBreakpoint={100} 
+                        renderSeedComponent={CustomSeed}
+                        roundTitleComponent={roundClassName}
+                        roundClassName="round"
+                        />
+                </div>
+            </div>
+            <div className='zoom-btns'>
+                <div className="zoom-btn" onClick={() => changeZoom(1)}>
+                    <img src={zoomInIcon} alt='zoom-in' className='zoom-in-icon'/>
+                </div>
+                <div className="zoom-btn" onClick={() => changeZoom(-1)}>
+                    <img src={zoomOutIcon} alt='zoom-out' className='zoom-out-icon'/>
+                </div>
+            </div>
+        </div>
+    </>)
+} 
\ No newline at end of file
diff --git a/src/elements/Ladder/Ladder.scss b/src/elements/Ladder/Ladder.scss
new file mode 100644
index 0000000..235b341
--- /dev/null
+++ b/src/elements/Ladder/Ladder.scss
@@ -0,0 +1,94 @@
+.ladder{
+    padding: 10px;
+    background-color: #1a1a1a;
+    height: 500px;
+    width: 500px;
+    display: grid;
+    grid-template-rows: 1fr min-content;
+    .ladder-zoom {
+        overflow: scroll;
+        transition: all 0s 0.5s;
+        .ladder-zoom-container {
+            height: min-content;
+            width: min-content;
+            cursor: grab;
+
+            div {
+                user-select: none;
+            }
+
+            .ladder-record {
+                .user-name {
+                    font-size: 25px;
+                    font-weight: bold;
+                    cursor: pointer;
+                }
+
+                .bot {
+                    display: flex;
+                    flex-direction: row;
+                    overflow-x: hidden;
+                    img {
+                        width: 35px;
+                        aspect-ratio: 1;
+                        border-radius: 5px;
+                    }
+                    .bot-name {
+                        margin: 0 5px;
+                    }   
+
+                    div {
+                        font-size: 15px;
+                    }
+                }
+            }
+        }
+    }
+
+    .zoom-btns {
+        display: flex;
+        justify-content: right;
+        gap: 10px;
+        margin-top: 20px;
+
+        .zoom-btn {
+            cursor: pointer;
+            background-color: #515151;
+            border-radius: 50%;
+            transition: all 0.3s;
+            height: 30px;
+            padding: 2px;
+            aspect-ratio: 1;
+
+            &:hover {
+                background-color: #646464;
+            }
+
+            img {
+                object-fit: fill;
+                width: 100%;
+                height: 100%;
+                vertical-align: top;
+                transition: all 0.5s;
+
+                &:hover {
+                    filter: invert(1);
+                }
+            }
+        }
+    }
+}
+
+.round-title {
+    position: sticky;
+}
+
+.origin {
+    position: absolute;
+    z-index: 1000000;
+    height: 5px;
+    width: 5px;
+    background-color: #FF0000;
+    border-radius: 50%;
+}
+
diff --git a/src/elements/Ladder/Temp.js b/src/elements/Ladder/Temp.js
new file mode 100644
index 0000000..789cd83
--- /dev/null
+++ b/src/elements/Ladder/Temp.js
@@ -0,0 +1,32 @@
+import { useState } from "react"
+import Ladder from "./Ladder";
+
+export default function Temp(){
+    const games1 = [{  "data": [    {      "botId": [        8,        5      ],      "status": "Playing",      "winner": -1,      "position": 4,      "playedOutDate": "0001-01-01T00:00:00"    },    {      "botId": [        7,        1      ],      "status": "Playing",      "winner": -1,      "position": 3,      "playedOutDate": "0001-01-01T00:00:00"    },    {      "botId": [        9,        2      ],      "status": "Playing",      "winner": -1,      "position": 5,      "playedOutDate": "0001-01-01T00:00:00"    },    {      "botId": [        6      ],      "status": "NotReadyToPlay",      "winner": -1,      "position": 2,      "playedOutDate": "0001-01-01T00:00:00"    }  ]},
+    {  "data": [    {      "botId": [        8,        5      ],      "status": "Played",      "winner": 5,      "position": 4,      "playedOutDate": "2024-05-23T14:30:16.757158"    },    {      "botId": [        7,        1      ],      "status": "Playing",      "winner": -1,      "position": 3,      "playedOutDate": "0001-01-01T00:00:00"    },    {      "botId": [        9,        2      ],      "status": "Played",      "winner": 2,      "position": 5,      "playedOutDate": "2024-05-23T14:30:16.538882"    },    {      "botId": [        6      ],      "status": "NotReadyToPlay",      "winner": -1,      "position": 2,      "playedOutDate": "0001-01-01T00:00:00"    }  ]},
+    {  "data": [    {      "botId": [        8,        5      ],      "status": "Played",      "winner": 5,      "position": 4,      "playedOutDate": "2024-05-23T14:30:16.757158"    },    {      "botId": [        7,        1      ],      "status": "Played",      "winner": 7,      "position": 3,      "playedOutDate": "2024-05-23T14:30:17.4027264"    },    {      "botId": [        9,        2      ],      "status": "Played",      "winner": 2,      "position": 5,      "playedOutDate": "2024-05-23T14:30:16.538882"    },    {      "botId": [        6      ],      "status": "NotReadyToPlay",      "winner": -1,      "position": 2,      "playedOutDate": "0001-01-01T00:00:00"    }  ]},
+    {  "data": [    {      "botId": [        8,        5      ],      "status": "Resolve",      "winner": 5,      "position": 4,      "playedOutDate": "2024-05-23T14:30:16.757158"    },    {      "botId": [        7,        1      ],      "status": "Resolve",      "winner": 7,      "position": 3,      "playedOutDate": "2024-05-23T14:30:17.4027264"    },    {      "botId": [        9,        2      ],      "status": "Resolve",      "winner": 2,      "position": 5,      "playedOutDate": "2024-05-23T14:30:16.538882"    },    {      "botId": [        6,        2      ],      "status": "Playing",      "winner": -1,      "position": 2,      "playedOutDate": "0001-01-01T00:00:00"    },    {      "botId": [        5,        7      ],      "status": "Playing",      "winner": -1,      "position": 1,      "playedOutDate": "0001-01-01T00:00:00"    }  ]},
+    {  "data": [    {      "botId": [        8,        5      ],      "status": "Resolve",      "winner": 5,      "position": 4,      "playedOutDate": "2024-05-23T14:30:16.757158"    },    {      "botId": [        7,        1      ],      "status": "Resolve",      "winner": 7,      "position": 3,      "playedOutDate": "2024-05-23T14:30:17.4027264"    },    {      "botId": [        9,        2      ],      "status": "Resolve",      "winner": 2,      "position": 5,      "playedOutDate": "2024-05-23T14:30:16.538882"    },    {      "botId": [        6,        2      ],      "status": "Resolve",      "winner": 2,      "position": 2,      "playedOutDate": "2024-05-23T14:30:46.5770369"    },    {      "botId": [        5,        7      ],      "status": "Resolve",      "winner": 7,      "position": 1,      "playedOutDate": "2024-05-23T14:30:44.3453841"    },    {      "botId": [        2,        7      ],      "status": "Playing",      "winner": -1,      "position": 0,      "playedOutDate": "0001-01-01T00:00:00"    }  ]},
+    {  "data": [    {      "botId": [        8,        5      ],      "status": "Resolve",      "winner": 5,      "position": 4,      "playedOutDate": "2024-05-23T14:30:16.757158"    },    {      "botId": [        7,        1      ],      "status": "Resolve",      "winner": 7,      "position": 3,      "playedOutDate": "2024-05-23T14:30:17.4027264"    },    {      "botId": [        9,        2      ],      "status": "Resolve",      "winner": 2,      "position": 5,      "playedOutDate": "2024-05-23T14:30:16.538882"    },    {      "botId": [        6,        2      ],      "status": "Resolve",      "winner": 2,      "position": 2,      "playedOutDate": "2024-05-23T14:30:46.5770369"    },    {      "botId": [        5,        7      ],      "status": "Resolve",      "winner": 7,      "position": 1,      "playedOutDate": "2024-05-23T14:30:44.3453841"    },    {      "botId": [        2,        7      ],      "status": "Played",      "winner": 7,      "position": 0,      "playedOutDate": "2024-05-23T14:31:05.9817403"    }  ]}];
+
+    const games = [[{"matchId":1,"PlayersBots":[{"BotId":8,"BotFile":"amongus_bot_2","UserName":"emma_jenkins"},{"BotId":5,"BotFile":"fifa22_bot_1","UserName":"sam_wilson"}],"Status":"Playing","Winner":-1,"Position":4,"PlayedOutDate":"0001-01-01T00:00:00","MatchResult":"NotPlayed"},{"matchId":2,"PlayersBots":[{"BotId":7,"BotFile":"amongus_bot_1","UserName":"david_miller"},{"BotId":1,"BotFile":"quake3_bot_1","UserName":"john_doe"}],"Status":"Playing","Winner":-1,"Position":3,"PlayedOutDate":"0001-01-01T00:00:00","MatchResult":"NotPlayed"},{"matchId":3,"PlayersBots":[{"BotId":9,"BotFile":"minecra","UserName":"ryan_clark"},{"BotId":2,"BotFile":"quake3_bot_2","UserName":"jane_smith"}],"Status":"Playing","Winner":-1,"Position":5,"PlayedOutDate":"0001-01-01T00:00:00","MatchResult":"NotPlayed"},{"matchId":4,"PlayersBots":[{"BotId":6,"BotFile":"fifa22_bot_2","UserName":"olivia_brown"}],"Status":"NotReadyToPlay","Winner":-1,"Position":2,"PlayedOutDate":"0001-01-01T00:00:00","MatchResult":"NotPlayed"}],
+    [{"matchId":1,"PlayersBots":[{"BotId":8,"BotFile":"amongus_bot_2","UserName":"emma_jenkins"},{"BotId":5,"BotFile":"fifa22_bot_1","UserName":"sam_wilson"}],"Status":"Resolve","Winner":5,"Position":4,"PlayedOutDate":"2024-05-29T14:54:46.2801257","MatchResult":"BotFiled"},{"matchId":2,"PlayersBots":[{"BotId":7,"BotFile":"amongus_bot_1","UserName":"david_miller"},{"BotId":1,"BotFile":"quake3_bot_1","UserName":"john_doe"}],"Status":"Resolve","Winner":7,"Position":3,"PlayedOutDate":"2024-05-29T14:54:45.7084368","MatchResult":"Won"},{"matchId":3,"PlayersBots":[{"BotId":9,"BotFile":"minecra","UserName":"ryan_clark"},{"BotId":2,"BotFile":"quake3_bot_2","UserName":"jane_smith"}],"Status":"Resolve","Winner":2,"Position":5,"PlayedOutDate":"2024-05-29T14:54:44.0480468","MatchResult":"Won"},{"matchId":4,"PlayersBots":[{"BotId":2,"BotFile":"quake3_bot_2","UserName":"jane_smith"},{"BotId":6,"BotFile":"fifa22_bot_2","UserName":"olivia_brown"}],"Status":"Playing","Winner":-1,"Position":2,"PlayedOutDate":"0001-01-01T00:00:00","MatchResult":"NotPlayed"},{"matchId":5,"PlayersBots":[{"BotId":5,"BotFile":"fifa22_bot_1","UserName":"sam_wilson"},{"BotId":7,"BotFile":"amongus_bot_1","UserName":"david_miller"}],"Status":"Playing","Winner":-1,"Position":1,"PlayedOutDate":"0001-01-01T00:00:00","MatchResult":"NotPlayed"}],
+    [{"matchId":1,"PlayersBots":[{"BotId":8,"BotFile":"amongus_bot_2","UserName":"emma_jenkins"},{"BotId":5,"BotFile":"fifa22_bot_1","UserName":"sam_wilson"}],"Status":"Resolve","Winner":5,"Position":4,"PlayedOutDate":"2024-05-29T14:54:46.2801257","MatchResult":"BotFiled"},{"matchId":2,"PlayersBots":[{"BotId":7,"BotFile":"amongus_bot_1","UserName":"david_miller"},{"BotId":1,"BotFile":"quake3_bot_1","UserName":"john_doe"}],"Status":"Resolve","Winner":7,"Position":3,"PlayedOutDate":"2024-05-29T14:54:45.7084368","MatchResult":"Won"},{"matchId":3,"PlayersBots":[{"BotId":9,"BotFile":"minecra","UserName":"ryan_clark"},{"BotId":2,"BotFile":"quake3_bot_2","UserName":"jane_smith"}],"Status":"Resolve","Winner":2,"Position":5,"PlayedOutDate":"2024-05-29T14:54:44.0480468","MatchResult":"Won"},{"matchId":4,"PlayersBots":[{"BotId":6,"BotFile":"fifa22_bot_2","UserName":"olivia_brown"},{"BotId":2,"BotFile":"quake3_bot_2","UserName":"jane_smith"}],"Status":"Resolve","Winner":2,"Position":2,"PlayedOutDate":"2024-05-29T14:54:53.3744008","MatchResult":"Won"},{"matchId":5,"PlayersBots":[{"BotId":5,"BotFile":"fifa22_bot_1","UserName":"sam_wilson"},{"BotId":7,"BotFile":"amongus_bot_1","UserName":"david_miller"}],"Status":"Resolve","Winner":7,"Position":1,"PlayedOutDate":"2024-05-29T14:54:54.6489749","MatchResult":"BotFiled"},{"matchId":6,"PlayersBots":[{"BotId":2,"BotFile":"quake3_bot_2","UserName":"jane_smith"},{"BotId":7,"BotFile":"amongus_bot_1","UserName":"david_miller"}],"Status":"Playing","Winner":-1,"Position":0,"PlayedOutDate":"0001-01-01T00:00:00","MatchResult":"NotPlayed"}],
+    [{"matchId":1,"PlayersBots":[{"BotId":8,"BotFile":"amongus_bot_2","UserName":"emma_jenkins"},{"BotId":5,"BotFile":"fifa22_bot_1","UserName":"sam_wilson"}],"Status":"Resolve","Winner":5,"Position":4,"PlayedOutDate":"2024-05-29T14:54:46.2801257","MatchResult":"BotFiled"},{"matchId":2,"PlayersBots":[{"BotId":7,"BotFile":"amongus_bot_1","UserName":"david_miller"},{"BotId":1,"BotFile":"quake3_bot_1","UserName":"john_doe"}],"Status":"Resolve","Winner":7,"Position":3,"PlayedOutDate":"2024-05-29T14:54:45.7084368","MatchResult":"Won"},{"matchId":3,"PlayersBots":[{"BotId":9,"BotFile":"minecra","UserName":"ryan_clark"},{"BotId":2,"BotFile":"quake3_bot_2","UserName":"jane_smith"}],"Status":"Resolve","Winner":2,"Position":5,"PlayedOutDate":"2024-05-29T14:54:44.0480468","MatchResult":"Won"},{"matchId":4,"PlayersBots":[{"BotId":6,"BotFile":"fifa22_bot_2","UserName":"olivia_brown"},{"BotId":2,"BotFile":"quake3_bot_2","UserName":"jane_smith"}],"Status":"Resolve","Winner":2,"Position":2,"PlayedOutDate":"2024-05-29T14:54:53.3744008","MatchResult":"Won"},{"matchId":5,"PlayersBots":[{"BotId":5,"BotFile":"fifa22_bot_1","UserName":"sam_wilson"},{"BotId":7,"BotFile":"amongus_bot_1","UserName":"david_miller"}],"Status":"Resolve","Winner":7,"Position":1,"PlayedOutDate":"2024-05-29T14:54:54.6489749","MatchResult":"BotFiled"},{"matchId":6,"PlayersBots":[{"BotId":2,"BotFile":"quake3_bot_2","UserName":"jane_smith"},{"BotId":7,"BotFile":"amongus_bot_1","UserName":"david_miller"}],"Status":"Resolve","Winner":7,"Position":0,"PlayedOutDate":"2024-05-29T14:55:04.4659877","MatchResult":"Won"}]]
+
+    const [index, setIndex] = useState(0);
+    const [status, setStatus] = useState(games[index]);
+
+    return (<>
+        <Ladder status={status}/>
+        <button onClick={() => {
+            setIndex((index - 1 + games.length) % games.length);
+            setStatus(games[index]);
+        }}>Prev</button>
+        <h1>{index}/{games.length}</h1>
+        <button onClick={() => {
+            setIndex((index + 1) % games.length);
+            setStatus(games[index]);
+        }}>Next</button>
+    </>)
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 16b9b21..18f6767 100644
--- a/src/index.js
+++ b/src/index.js
@@ -31,6 +31,8 @@ import { getListOfTournaments } from './Tournaments/getListOfTournaments';
 import UserSettings from './User/Settings/UserSettings';
 import AnimatedBackground from "./AnimatedBackground";
 
+import Temp from "./elements/Ladder/Temp";
+
 const games = [{name:'Szachy', id:1}, {name:'Warcaby', id:2}, {name:'Scrabble', id:3}, {name:'Chińczyk', id:4}, {name:'Go', id:5}]
 
 const tournaments = getListOfTournaments();
@@ -119,6 +121,10 @@ const router = createBrowserRouter([
         path: "/admin/PlayerTournaments",
         element: <PlayerTournaments/>,
     },
+    {
+        path: "/temp",
+        element: <Temp/>,
+    }
     
 ]);
 
diff --git a/src/index.scss b/src/index.scss
index 63bd81a..12bf950 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -67,7 +67,6 @@ button {
 }
 
 div {
-  text-shadow: 1px 1px 0.1cm #fff;
   font-size: 45px;
 }
 
@@ -78,3 +77,30 @@ div {
   z-index: -1;
 }
 
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+  visibility: hidden;
+
+  transition: all 0.5s;
+  &:hover {
+      visibility: visible;
+  }
+}
+
+::-webkit-scrollbar-track {
+  background: #114002;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #001804;
+  border-radius: 4px;
+  transition: all 0.5s;
+  &:hover {
+      background: #016d29;
+  }
+}
+
+::-webkit-scrollbar-corner {
+  background-color: transparent ; 
+}
\ No newline at end of file
diff --git a/src/resources/defeat.png b/src/resources/defeat.png
new file mode 100644
index 0000000..2328cbb
Binary files /dev/null and b/src/resources/defeat.png differ
diff --git a/src/resources/glory.png b/src/resources/glory.png
new file mode 100644
index 0000000..84b0727
Binary files /dev/null and b/src/resources/glory.png differ
diff --git a/src/resources/robot1.svg b/src/resources/robot1.svg
new file mode 100644
index 0000000..66463e4
--- /dev/null
+++ b/src/resources/robot1.svg
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="utf-8"?>
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--emojione" preserveAspectRatio="xMidYMid meet">
+
<path d="M57.6 13.7c-.7-1-1.6-1.7-2.7-2.2c-3.4-1.7-11.6-1.3-12.3-5.7c-.9-5.7-5.9.1-6.8.1c-1.1 0-1.6-3.9-3.7-3.9c-2.2 0-2.7 3.9-3.7 3.9c-.9 0-5.9-5.8-6.8-.1c-.7 4.3-9 4-12.3 5.7c-1 .5-2 1.2-2.7 2.2c-.5.8.6 1.6 1.2.9c1.6-2 4.8-2.4 7.1-2.8c1.9-.4 4-.6 5.9-1.4c2.6-1 2.5-4.9 3.3-4.9c.6 0 2.7 3 4.5 3c1.6 0 2.6-3.7 3.5-3.7c.9 0 1.9 3.7 3.5 3.7c1.9 0 4-3 4.6-3c.8 0 .7 3.9 3.3 4.9c1.8.8 3.9 1 5.9 1.4c2.3.5 5.6.8 7.1 2.8c.5.7 1.6-.2 1.1-.9" fill="#00b9f1">
+
</path>
+
<path d="M53 57c0 2.8-2.2 5-5 5H16c-2.8 0-5-2.2-5-5V36h42v21z" fill="#89967a">
+
</path>
+
<path d="M32 12c-15.5 0-21 8.5-21 24v21h42V36c0-15.5-5.5-24-21-24" fill="#b6c4a7">
+
</path>
+
<g fill="#89967a">
+
<path d="M11 55c-1.1 0-2-1.2-2-2.6v-6.8c0-1.4.9-2.6 2-2.6v12">
+
</path>
+
<path d="M53 43c1.1 0 2 1.2 2 2.6v6.8c0 1.4-.9 2.6-2 2.6V43">
+
</path>
+
</g>
+
<g fill="#3e4347">
+
<path d="M7 20H5v30h4v-2H7z">
+
</path>
+
<path d="M57 20v28h-2v2h4V20z">
+
</path>
+
</g>
+
<circle cx="58" cy="20" r="4" fill="#00b9f1">
+
</circle>
+
<circle cx="6" cy="20" r="4" fill="#ff5263">
+
</circle>
+
<path d="M21.5 39.5c-4.4 0-8-3.6-8-8s3.6-8 8-8s8 3.6 8 8s-3.6 8-8 8" fill="#efffd9">
+
</path>
+
<circle cx="21.5" cy="31.5" r="6" fill="#545b61">
+
</circle>
+
<circle cx="21.5" cy="31.5" r="2.3" fill="#ff5263">
+
</circle>
+
<path d="M42.5 39.5c-4.4 0-8-3.6-8-8s3.6-8 8-8s8 3.6 8 8s-3.6 8-8 8" fill="#efffd9">
+
</path>
+
<path d="M42.5 37.5c-3.3 0-6-2.7-6-6s2.7-6 6-6s6 2.7 6 6s-2.7 6-6 6" fill="#545b61">
+
</path>
+
<circle cx="42.5" cy="31.5" r="2.3" fill="#ff5263">
+
</circle>
+
<path d="M19.8 54.1c-7.4 0-7.4-13 0-13h24.5c7.4 0 7.4 13 0 13H19.8" fill="#efffd9">
+
</path>
+
<path d="M20.5 52.6c-6 0-6-10 0-10h23c6 0 6 10 0 10h-23" fill="#89967a">
+
</path>
+
<g opacity=".7" fill="#3e4347">
+
<path d="M21.2 50.7c0 1.2-2 1.2-2 0v-6.1c0-1.2 2-1.2 2 0v6.1">
+
</path>
+
<path d="M25.9 50.7c0 1.2-2 1.2-2 0v-6.1c0-1.2 2-1.2 2 0v6.1">
+
</path>
+
<path d="M30.6 50.7c0 1.2-2 1.2-2 0v-6.1c0-1.2 2-1.2 2 0v6.1">
+
</path>
+
<path d="M35.4 50.7c0 1.2-2 1.2-2 0v-6.1c0-1.2 2-1.2 2 0v6.1">
+
</path>
+
<path d="M40.1 50.7c0 1.2-2 1.2-2 0v-6.1c0-1.2 2-1.2 2 0v6.1">
+
</path>
+
<path d="M44.8 50.7c0 1.2-2 1.2-2 0v-6.1c0-1.2 2-1.2 2 0v6.1">
+
</path>
+
</g>
+
<circle cx="32" cy="37" r="2" fill="#f5f5f5">
+
</circle>
+
<path fill="#545b61" d="M30.316 35.862l.566-.565l2.828 2.828l-.565.566z">
+
</path>
+
</svg>
\ No newline at end of file
diff --git a/src/resources/trophy1.svg b/src/resources/trophy1.svg
new file mode 100644
index 0000000..390218e
--- /dev/null
+++ b/src/resources/trophy1.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 1024 1024" class="icon"  version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M993.763 493.538v35c0 13.331-6.04 26.664-18.135 37.137-140.149 121.422-280.35 242.795-420.49 364.219-11.813 10.237-25.813 15.501-42.454 15.501v-35c16.644 0 30.641-5.264 42.454-15.501C695.28 773.47 835.474 652.092 975.628 530.677c12.095-10.475 18.135-23.803 18.135-37.139z" fill="#EDC259" /><path d="M30.239 528.367v-3.5-1.75-3.5-3.5-1.75-3.5-3.5-1.75-3.5-3.5-1.75-3.5c0 14.707 6.701 29.313 19.037 40.019 138.448 120.064 277.049 239.996 415.562 360.02 13.002 11.26 28.74 16.466 47.853 16.994v35c-19.108-0.528-34.851-5.734-47.853-16.994C326.325 808.382 187.725 688.45 49.276 568.386c-12.337-10.705-19.037-25.312-19.037-40.019z" fill="#EDC259" /><path d="M510.786 76.601c16.263 0 32.546 5.362 44.946 16.097 139.949 121.188 279.9 242.376 419.818 363.586 24.241 20.995 24.295 53.413 0.079 74.396C835.48 652.101 695.28 773.478 555.141 894.898c-11.814 10.238-25.813 15.502-42.451 15.502-19.109-0.528-34.853-5.734-47.854-16.994C326.324 773.382 187.724 653.45 49.275 533.386c-19.581-16.987-24.96-43.81-11.895-65.251 3.919-6.438 8.669-11.829 14.465-16.849C189.954 331.734 328.024 212.152 466.107 92.567c12.296-10.639 28.478-15.966 44.679-15.966z" fill="#F4E269" /><path d="M349.928 373.951v16.8h-58.917v-16.8h58.917z" fill="#E19C49" /><path d="M349.928 373.951v16.8h-58.917v-16.8h58.917" fill="#E19C49" /><path d="M733.875 374.023v16.8H674.18v-16.8h59.695z" fill="#E19C49" /><path d="M733.875 374.023v16.8H674.18v-16.8h59.695" fill="#E19C49" /><path d="M733.875 374.021c-0.322 3.808-0.438 7.611-0.438 11.413-0.002 8.428 0.55 16.832 0.557 25.191 0.01 8.849-0.586 17.645-3.083 26.354-6.531 22.817-31.895 41.125-56.729 41.91V374.02l59.693 0.001z" fill="#F6DC82" /><path d="M349.93 373.951v105.442c-4.255-0.88-8.578-1.475-12.662-2.651-28.134-8.138-45.339-27.708-46.621-54.115-0.278-5.806-0.368-11.621-0.368-17.439-0.001-9.696 0.243-19.401 0.258-29.098 0-0.628 0.261-1.248 0.473-2.138l58.92-0.001z" fill="#F6DC82" /><path d="M393.912 323.914c10.505 0.055 20.546 0.089 30.592 0.111 9.874 0.021 19.756 0.027 29.63 0.027 10.247 0 19.511-0.006 28.771-0.013 9.862-0.007 19.722-0.012 29.583-0.012 9.56 0 19.117 0.005 28.677 0.011 9.276 0.004 18.557 0.008 27.833 0.009 11.005 0 20.662-0.005 30.323-0.022 10.241-0.017 20.487-0.046 30.729-0.094 5.427 0.04 6.966 1.318 6.957 5.927-0.114 26.729-0.139 53.455-0.137 80.18 0 20.788 0.016 41.573 0.016 62.355-0.011 58.306-52.579 105.749-119.802 108.15-2.614 0.077-3.915 0.094-5.208 0.094-64.126-0.321-117.172-41.87-123.583-97.305-0.575-4.967-0.896-9.986-0.906-14.98-0.07-46.058 0.04-92.122-0.161-138.18 0.067-4.815 1.486-6.215 6.686-6.258z" fill="#FAECBA" /><path d="M768.727 397.482V414.277c0 4.84-0.041 9.68-0.177 14.518-0.311 11.26-0.171 22.792-2.934 33.678-9.354 36.881-49.733 64.336-93.33 64.493-3.851 0.021-5.613 0.732-6.966 4.294-19.203 50.623-58.585 82.364-118.813 94.245-5.404 1.064-10.989 1.423-16.695 2.13v-16.8c5.706-0.709 11.29-1.066 16.695-2.131 60.229-11.881 99.608-43.621 118.813-94.244 1.353-3.561 3.115-4.276 6.966-4.294 43.597-0.157 83.976-27.61 93.33-64.493 2.763-10.885 2.623-22.417 2.934-33.678 0.136-4.837 0.177-9.674 0.177-14.513z" fill="#E19C49" /><path d="M768.727 397.478v16.8c0 4.84-0.041 9.68-0.177 14.518-0.15 5.525-0.194 11.117-0.526 16.665v-16.8c0.332-5.547 0.376-11.14 0.526-16.665 0.136-4.838 0.177-9.678 0.177-14.518M768.021 428.66v16.8c-0.345 5.757-1 11.47-2.405 17.014-2.759 10.878-8.216 20.935-15.658 29.713v-16.8c7.44-8.778 12.899-18.836 15.658-29.713 1.405-5.545 2.062-11.257 2.405-17.014" fill="#E19C49" /><path d="M749.959 475.389v16.801c-5.871 6.923-12.979 13.051-20.967 18.161v-16.8c7.989-5.111 15.095-11.239 20.967-18.162M728.992 493.549v16.8a104.738 104.738 0 0 1-20.289 10.038v-16.8c7.196-2.644 14.015-6.025 20.289-10.038M708.703 503.588v16.8a107.456 107.456 0 0 1-22.518 5.606v-16.8a107.549 107.549 0 0 0 22.518-5.606" fill="#E19C49" /><path d="M686.188 509.194v16.8c-4.573 0.624-9.22 0.955-13.9 0.972-0.82 0.006-1.546 0.038-2.191 0.129v-16.8c0.646-0.089 1.371-0.123 2.191-0.127a105.89 105.89 0 0 0 13.9-0.974M670.095 510.294v16.8a6.876 6.876 0 0 0-1.497 0.354v-16.8c0.448-0.166 0.943-0.28 1.497-0.354M668.595 510.647v16.8c-0.323 0.12-0.627 0.268-0.907 0.446v-16.8c0.28-0.178 0.583-0.327 0.907-0.446M667.688 511.094v16.8a4.482 4.482 0 0 0-1.007 0.888v-16.8c0.304-0.36 0.637-0.651 1.007-0.888M666.681 511.981v16.8c-0.52 0.611-0.958 1.421-1.359 2.479-6.238 16.445-14.605 30.896-25.125 43.322v-16.8c10.521-12.427 18.887-26.878 25.125-43.322 0.402-1.058 0.839-1.866 1.359-2.479M640.195 557.783v16.801c-8.771 10.36-19.036 19.313-30.813 26.835v-16.8c11.778-7.524 22.045-16.473 30.813-26.836" fill="#E19C49" /><path d="M609.385 584.619v16.8c-9.455 6.041-19.883 11.163-31.295 15.354v-16.801c11.41-4.19 21.84-9.312 31.295-15.353M578.09 599.973v16.801c-9.803 3.6-20.33 6.515-31.581 8.732a79.986 79.986 0 0 1-4.587 0.752v-16.8a79.7 79.7 0 0 0 4.587-0.752c11.254-2.219 21.778-5.134 31.581-8.733M541.922 609.458v16.8c-3.958 0.54-8 0.868-12.106 1.378v-16.8c4.106-0.51 8.148-0.838 12.106-1.378" fill="#E19C49" /><path d="M255.245 415.835v-1.68-0.841-1.679-1.679-0.841-1.679-1.679-0.841-1.679-1.68-0.84-1.679c0 11.985 0.24 23.955 1.221 35.881 3.389 41.266 46.732 75.064 94.441 75.168 5.481 0.02 6.964 1.721 8.546 5.814 18.335 47.261 55.017 78.067 110.77 91.275 7.833 1.859 16.008 2.628 24.172 3.931v16.8c-8.164-1.302-16.338-2.07-24.172-3.93-55.752-13.211-92.433-44.016-110.77-91.276-1.582-4.095-3.065-5.797-8.546-5.814-47.709-0.104-91.052-33.902-94.441-75.167-0.982-11.928-1.221-23.9-1.221-35.885z" fill="#E19C49" /><path d="M494.395 611.108v16.8c-8.166-1.302-16.339-2.07-24.173-3.931-55.753-13.21-92.433-44.015-110.77-91.275-1.582-4.095-3.065-5.797-8.546-5.814-47.708-0.103-91.053-33.902-94.441-75.167-0.98-11.928-1.222-23.897-1.222-35.883v-16.801c0 11.985 0.242 23.958 1.222 35.884 3.388 41.265 46.733 75.065 94.441 75.168 5.481 0.02 6.964 1.721 8.546 5.814 18.335 47.261 55.017 78.067 110.77 91.275 7.834 1.86 16.008 2.629 24.173 3.93" fill="#E19C49" /><path d="M768.752 363.031c-0.363 16.315 0.255 32.648-0.202 48.965-0.311 11.26-0.171 22.792-2.934 33.678-9.354 36.881-49.733 64.337-93.33 64.493-3.851 0.018-5.613 0.732-6.966 4.294-19.203 50.622-58.585 82.363-118.813 94.244-5.404 1.063-10.989 1.423-16.695 2.13v75.905h5.971c13.861 0 27.729-0.021 41.593-0.021 10.399 0 20.797 0.011 31.194 0.043 16.208 0.054 27.659 10.346 27.619 24.365 0 4.033-1.674 5.883-6.521 5.875-39.19-0.029-78.383-0.039-117.578-0.039-39.193 0-78.387 0.012-117.576 0.029-4.527 0-6.211-1.746-6.291-5.585-0.282-14.248 11.189-24.608 27.74-24.652 11.114-0.021 22.23-0.028 33.393-0.028 14.885 0 29.855 0.014 45.038 0.014v-75.633c-8.165-1.303-16.338-2.07-24.172-3.931-55.752-13.21-92.433-44.016-110.77-91.275-1.582-4.095-3.065-5.795-8.546-5.814-47.709-0.103-91.052-33.903-94.441-75.168-2.025-24.608-0.897-49.409-1.006-74.131-0.04-8.792 9.536-17.574 20.923-17.574 10.161 0.297 19.656 0.379 29.15 0.379 13.463 0 26.928-0.167 40.395-0.167h6.703c0-7.412-0.019-14.465 0-21.52 0.051-16.333 13.527-28.083 32.407-28.091 42.366-0.012 84.729-0.02 127.092-0.02 42.365 0 84.729 0.008 127.095 0.02 18.81 0.009 32.396 11.803 32.548 28.118 0.071 6.932 0.012 13.871 0.012 21.493h6.188c13.372 0 26.757 0.211 40.131 0.211 9.205 0 18.406-0.102 27.597-0.438 13.933-0.021 23.297 8.967 23.052 19.831zM636.886 472.395c0-20.783-0.017-41.567-0.017-62.355-0.001-26.727 0.022-53.453 0.139-80.181 0.009-4.609-1.531-5.888-6.551-5.926-10.648 0.048-20.896 0.077-31.138 0.094-9.657 0.017-19.319 0.022-28.979 0.022-10.62 0-19.901-0.005-29.176-0.009-9.56-0.004-19.119-0.01-28.677-0.01-9.863 0-19.723 0.007-29.583 0.012-9.264 0.007-18.527 0.012-27.787 0.012-10.859 0-20.742-0.005-30.614-0.027-10.044-0.02-20.088-0.055-30.133-0.11-5.661 0.044-7.078 1.444-7.145 5.819 0.2 46.495 0.088 92.561 0.16 138.618 0.01 4.993 0.332 10.013 0.906 14.98 6.412 55.437 59.457 96.98 122.812 97.304 2.07 0.001 3.361-0.016 4.668-0.051 68.537-2.443 121.105-49.889 121.115-108.192m-286.958 7.001V373.953h-58.917c-0.213 0.89-0.474 1.51-0.474 2.138-0.014 9.695-0.258 19.402-0.258 29.099 0 5.817 0.089 11.634 0.369 17.438 1.279 26.409 18.487 45.979 46.622 54.115 4.081 1.178 8.403 1.771 12.658 2.653m380.983-42.417c2.498-8.711 3.093-17.505 3.085-26.354-0.009-8.357-0.559-16.763-0.557-25.191 0-3.802 0.112-7.606 0.438-11.411h-59.695V478.89c24.836-0.786 50.198-19.093 56.729-41.911" fill="#F3C052" /><path d="M388.216 727.693v-16.801c0 0.173 0.001 0.343 0.005 0.517 0.081 3.839 1.763 5.585 6.291 5.585 39.19-0.019 78.385-0.029 117.576-0.029 39.195 0 78.389 0.013 117.579 0.037 4.848 0.01 6.521-1.84 6.521-5.873v16.8c0 4.033-1.674 5.883-6.521 5.873-39.19-0.026-78.382-0.036-117.578-0.036-39.192 0-78.388 0.012-117.577 0.028-4.527 0-6.21-1.746-6.291-5.585-0.002-0.174-0.005-0.343-0.005-0.516z" fill="#E19C49" /><path d="M636.189 711.13v16.8c0 0.264-0.009 0.517-0.021 0.762v-16.801c0.014-0.245 0.021-0.498 0.021-0.761M636.168 711.891v16.801c-0.088 1.442-0.437 2.566-1.134 3.389v-16.8c0.699-0.823 1.048-1.947 1.134-3.39" fill="#E19C49" /><path d="M635.036 715.279v16.8c-0.248 0.29-0.537 0.543-0.874 0.758v-16.8c0.337-0.215 0.626-0.468 0.874-0.758" fill="#E19C49" /><path d="M634.162 716.037v16.8a4.875 4.875 0 0 1-0.955 0.468v-16.8a4.82 4.82 0 0 0 0.955-0.468M633.207 716.505v16.8a7.763 7.763 0 0 1-1.62 0.387V716.89a7.8 7.8 0 0 0 1.62-0.385M631.587 716.89v16.802a14.09 14.09 0 0 1-1.919 0.112c-39.19-0.026-78.383-0.037-117.578-0.037-39.193 0-78.387 0.012-117.576 0.028-4.527 0-6.211-1.745-6.291-5.585a29.57 29.57 0 0 1-0.005-0.515v-16.802c0 0.174 0.001 0.343 0.005 0.517 0.079 3.839 1.763 5.585 6.291 5.585 39.19-0.019 78.386-0.028 117.576-0.028 39.195 0 78.388 0.011 117.578 0.037a14.07 14.07 0 0 0 1.919-0.114" fill="#E19C49" /></svg>
\ No newline at end of file
diff --git a/src/resources/zoom-in.svg b/src/resources/zoom-in.svg
new file mode 100644
index 0000000..7df76d2
--- /dev/null
+++ b/src/resources/zoom-in.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.9992 21L14.9492 14.95" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 10H14" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 6V14" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/resources/zoom-out.svg b/src/resources/zoom-out.svg
new file mode 100644
index 0000000..45c73df
--- /dev/null
+++ b/src/resources/zoom-out.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.9992 21L14.9492 14.95" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 10H14" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file