diff --git a/package-lock.json b/package-lock.json
index 9ebecfd..d22afc2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,13 +15,15 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "@xterm/xterm": "^5.5.0",
         "codegen": "^0.1.0",
         "eslint-plugin-react": "^7.37.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-router-dom": "^6.27.0",
         "react-scripts": "^5.0.1",
-        "web-vitals": "^2.1.4"
+        "web-vitals": "^2.1.4",
+        "xterm": "^5.3.0"
       },
       "devDependencies": {
         "ajv": "^8.17.1",
@@ -2829,6 +2831,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "license": "MIT",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
     "node_modules/@istanbuljs/load-nyc-config/node_modules/camelcase": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
@@ -2838,6 +2849,32 @@
         "node": ">=6"
       }
     },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/@istanbuljs/schema": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
@@ -4629,9 +4666,9 @@
       "license": "MIT"
     },
     "node_modules/@types/ws": {
-      "version": "8.5.12",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.12.tgz",
-      "integrity": "sha512-3tPRkv1EtkDpzlgyKyI8pGsGZAGPEaXeu0DOj5DI25Ja91bdAYddYHbADRYVrZMRbfW+1l5YwXVDKohDJNQxkQ==",
+      "version": "8.5.13",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.13.tgz",
+      "integrity": "sha512-osM/gWBTPKgHV8XkTunnegTRIsvF6owmf5w+JtAfOw472dptdm0dlGv4xCt6GwQRcC2XVOvvRE/0bAoQcL2QkA==",
       "license": "MIT",
       "dependencies": {
         "@types/node": "*"
@@ -5033,6 +5070,12 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "node_modules/@xterm/xterm": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz",
+      "integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==",
+      "license": "MIT"
+    },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -5294,14 +5337,20 @@
       "license": "MIT"
     },
     "node_modules/argparse": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
-      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "version": "0.1.16",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-0.1.16.tgz",
+      "integrity": "sha512-LjmC2dNpdn2L4UzyoaIr11ELYoLn37ZFy9zObrQFHsSuOepeUEMKnM8w5KL4Tnrp2gy88rRuQt6Ky8Bjml+Baw==",
       "license": "MIT",
       "dependencies": {
-        "sprintf-js": "~1.0.2"
+        "underscore": "~1.7.0",
+        "underscore.string": "~2.4.0"
       }
     },
+    "node_modules/argparse/node_modules/underscore": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.7.0.tgz",
+      "integrity": "sha512-cp0oQQyZhUM1kpJDLdGO1jPZHgS/MpzoWYfe9+CM2h/QGDZlqwT2T3YGukuBdaNJ/CAPoeyAZRRHz8JFo176vA=="
+    },
     "node_modules/aria-query": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
@@ -5953,18 +6002,6 @@
         "ms": "2.0.0"
       }
     },
-    "node_modules/body-parser/node_modules/iconv-lite": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "license": "MIT",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/body-parser/node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -6155,9 +6192,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001676",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001676.tgz",
-      "integrity": "sha512-Qz6zwGCiPghQXGJvgQAem79esjitvJ+CxSbSQkW9H/UX5hg8XM88d4lp2W+MEQ81j+Hip58Il+jGVdazk1z9cw==",
+      "version": "1.0.30001677",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001677.tgz",
+      "integrity": "sha512-fmfjsOlJUpMWu+mAAtZZZHz7UEwsUxIIvu1TJfO1HqFQvB/B+ii0xr9B5HpbZY/mC4XZ8SvjHJqtAY6pDPQEog==",
       "funding": [
         {
           "type": "opencollective",
@@ -6429,51 +6466,6 @@
         "codegen": "lib/codegen-cli.js"
       }
     },
-    "node_modules/codegen/node_modules/argparse": {
-      "version": "0.1.16",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-0.1.16.tgz",
-      "integrity": "sha512-LjmC2dNpdn2L4UzyoaIr11ELYoLn37ZFy9zObrQFHsSuOepeUEMKnM8w5KL4Tnrp2gy88rRuQt6Ky8Bjml+Baw==",
-      "license": "MIT",
-      "dependencies": {
-        "underscore": "~1.7.0",
-        "underscore.string": "~2.4.0"
-      }
-    },
-    "node_modules/codegen/node_modules/argparse/node_modules/underscore": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.7.0.tgz",
-      "integrity": "sha512-cp0oQQyZhUM1kpJDLdGO1jPZHgS/MpzoWYfe9+CM2h/QGDZlqwT2T3YGukuBdaNJ/CAPoeyAZRRHz8JFo176vA=="
-    },
-    "node_modules/codegen/node_modules/esprima": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/esprima/-/esprima-1.0.4.tgz",
-      "integrity": "sha512-rp5dMKN8zEs9dfi9g0X1ClLmV//WRyk/R15mppFNICIFRG5P92VP7Z04p8pk++gABo9W2tY+kHyu6P1mEHgmTA==",
-      "bin": {
-        "esparse": "bin/esparse.js",
-        "esvalidate": "bin/esvalidate.js"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/codegen/node_modules/js-yaml": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.1.0.tgz",
-      "integrity": "sha512-AgPExLjC+sVh3GLVZdoTprN9oKoF911GFq0CMs8XVXPyfOfelpH9+NKGAn0NKqt9g38/5nPHqBOD8ObqhoSQ6Q==",
-      "license": "MIT",
-      "dependencies": {
-        "argparse": "~ 0.1.11",
-        "esprima": "~ 1.0.2"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
-    "node_modules/codegen/node_modules/underscore": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.6.0.tgz",
-      "integrity": "sha512-z4o1fvKUojIWh9XuaVLUDdf86RQiq13AC1dmHbTpoyuu+bquHms76v16CjycCbec87J7z0k//SiQVk0sMdFmpQ=="
-    },
     "node_modules/collect-v8-coverage": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz",
@@ -7943,6 +7935,19 @@
         "source-map": "~0.6.1"
       }
     },
+    "node_modules/escodegen/node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/escodegen/node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -8551,16 +8556,15 @@
       }
     },
     "node_modules/esprima": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-      "license": "BSD-2-Clause",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-1.0.4.tgz",
+      "integrity": "sha512-rp5dMKN8zEs9dfi9g0X1ClLmV//WRyk/R15mppFNICIFRG5P92VP7Z04p8pk++gABo9W2tY+kHyu6P1mEHgmTA==",
       "bin": {
         "esparse": "bin/esparse.js",
         "esvalidate": "bin/esvalidate.js"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=0.4.0"
       }
     },
     "node_modules/esquery": {
@@ -9972,12 +9976,12 @@
       }
     },
     "node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
       "license": "MIT",
       "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
+        "safer-buffer": ">= 2.1.2 < 3"
       },
       "engines": {
         "node": ">=0.10.0"
@@ -10132,12 +10136,12 @@
       }
     },
     "node_modules/ipaddr.js": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz",
-      "integrity": "sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA==",
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
       "license": "MIT",
       "engines": {
-        "node": ">= 10"
+        "node": ">= 0.10"
       }
     },
     "node_modules/is-arguments": {
@@ -11710,13 +11714,13 @@
       "license": "MIT"
     },
     "node_modules/js-yaml": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
-      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.1.0.tgz",
+      "integrity": "sha512-AgPExLjC+sVh3GLVZdoTprN9oKoF911GFq0CMs8XVXPyfOfelpH9+NKGAn0NKqt9g38/5nPHqBOD8ObqhoSQ6Q==",
       "license": "MIT",
       "dependencies": {
-        "argparse": "^1.0.7",
-        "esprima": "^4.0.0"
+        "argparse": "~ 0.1.11",
+        "esprima": "~ 1.0.2"
       },
       "bin": {
         "js-yaml": "bin/js-yaml.js"
@@ -11857,6 +11861,12 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/jsonpath/node_modules/underscore": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.12.1.tgz",
+      "integrity": "sha512-hEQt0+ZLDVUMhebKxL4x1BTtDY7bavVofhZ9KZ4aI26X9SRaE+Y3m83XUL1UP2jn8ynjndwCCpEHdUG+9pP1Tw==",
+      "license": "MIT"
+    },
     "node_modules/jsonpointer": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.1.tgz",
@@ -14443,15 +14453,6 @@
         "node": ">= 0.10"
       }
     },
-    "node_modules/proxy-addr/node_modules/ipaddr.js": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
-      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -14561,18 +14562,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/raw-body/node_modules/iconv-lite": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "license": "MIT",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/react": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@@ -15801,6 +15790,18 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/source-map-loader/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-support": {
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
@@ -15928,6 +15929,19 @@
         "source-map": "~0.6.1"
       }
     },
+    "node_modules/static-eval/node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/static-eval/node_modules/estraverse": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
@@ -16481,6 +16495,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/svgo/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "license": "MIT",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
     "node_modules/svgo/node_modules/chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -16569,6 +16592,19 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/svgo/node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/svgo/node_modules/has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -16578,6 +16614,19 @@
         "node": ">=4"
       }
     },
+    "node_modules/svgo/node_modules/js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/svgo/node_modules/nth-check": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
@@ -17145,10 +17194,9 @@
       }
     },
     "node_modules/underscore": {
-      "version": "1.12.1",
-      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.12.1.tgz",
-      "integrity": "sha512-hEQt0+ZLDVUMhebKxL4x1BTtDY7bavVofhZ9KZ4aI26X9SRaE+Y3m83XUL1UP2jn8ynjndwCCpEHdUG+9pP1Tw==",
-      "license": "MIT"
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.6.0.tgz",
+      "integrity": "sha512-z4o1fvKUojIWh9XuaVLUDdf86RQiq13AC1dmHbTpoyuu+bquHms76v16CjycCbec87J7z0k//SiQVk0sMdFmpQ=="
     },
     "node_modules/underscore.string": {
       "version": "2.4.0",
@@ -17572,6 +17620,15 @@
         }
       }
     },
+    "node_modules/webpack-dev-server/node_modules/ipaddr.js": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz",
+      "integrity": "sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/webpack-dev-server/node_modules/ws": {
       "version": "8.18.0",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
@@ -17743,18 +17800,6 @@
         "iconv-lite": "0.4.24"
       }
     },
-    "node_modules/whatwg-encoding/node_modules/iconv-lite": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "license": "MIT",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/whatwg-fetch": {
       "version": "3.6.20",
       "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz",
@@ -18254,6 +18299,13 @@
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
       "license": "MIT"
     },
+    "node_modules/xterm": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/xterm/-/xterm-5.3.0.tgz",
+      "integrity": "sha512-8QqjlekLUFTrU6x7xck1MsPzPA571K5zNqWm0M0oroYEWVOptZ0+ubQSkQ3uxIEhcIHRujJy6emDWX4A7qyFzg==",
+      "deprecated": "This package is now deprecated. Move to @xterm/xterm instead.",
+      "license": "MIT"
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
diff --git a/package.json b/package.json
index 6e2cef3..0cab2ca 100644
--- a/package.json
+++ b/package.json
@@ -10,13 +10,15 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@xterm/xterm": "^5.5.0",
     "codegen": "^0.1.0",
     "eslint-plugin-react": "^7.37.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.27.0",
     "react-scripts": "^5.0.1",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "xterm": "^5.3.0"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/App.js b/src/App.js
index a5441fc..ab2757b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,6 +5,7 @@ import Settings from './Settings/SettingsMain'
 import Dashboard from './Dashboard/DashboardMain'
 import './App.css'
 import useToken from './core/useToken';
+import Terminal from './Terminal/TerminalPage'
 
 
 function App() {
@@ -22,6 +23,7 @@ function App() {
         {/* <Route path="/dashboard/configuration" element={<Settings />} />
         <Route path="/dashboard/users" element={<Users />} />
         <Route path="/dashboard/reports" element={<Reports />} /> */}
+        <Route path="/dashboard/console" element={<Terminal/>} />
         <Route path="/settings" element={<Settings/>} />
       </Routes>
     </Router>
diff --git a/src/Dashboard/DashboardMain.js b/src/Dashboard/DashboardMain.js
index c5bee5d..d504d29 100644
--- a/src/Dashboard/DashboardMain.js
+++ b/src/Dashboard/DashboardMain.js
@@ -21,11 +21,11 @@ import ConstructionOutlinedIcon from '@mui/icons-material/ConstructionOutlined';
 import SettingsIcon from '@mui/icons-material/SettingsOutlined';
 import TerminalOutlinedIcon from '@mui/icons-material/TerminalOutlined';
 import LogoutIcon from  '@mui/icons-material/LogoutOutlined';
-import MenuIcon from '@mui/icons-material/Menu';
 import AccountCircleIcon from '@mui/icons-material/AccountCircleOutlined';
 import { ThemeProvider } from '@mui/material/styles';
 import theme from '../theme';
 import deleteToken from '../core/deleteToken';
+import {SystemMon, WebsiteAvailability} from '../widgets/WidgetsStatistics'
 
 const drawerWidth = 240;
 
@@ -56,17 +56,8 @@ export default function DashboardMain() {
     <ThemeProvider theme={theme}>
       <Box sx={{ display: 'flex' }}>
         <CssBaseline />
-        <AppBar position="fixed" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1, width: `calc(100% - ${open ? drawerWidth : 0}px)`, ml: `${open ? drawerWidth : 0}px` }}>
+        <AppBar position="fixed" sx={{ width: `calc(100% - ${drawerWidth}px)`, ml: `${drawerWidth}px` }}>
           <Toolbar>
-            <IconButton
-              color="inherit"
-              aria-label="open drawer"
-              onClick={handleDrawer}
-              edge="start"
-              sx={{ marginRight: 2 }}
-            >
-              <MenuIcon />
-            </IconButton>
             <Typography variant="h6" noWrap sx={{ flexGrow: 1 }}>
               Admin Dashboard
             </Typography>
@@ -82,6 +73,10 @@ export default function DashboardMain() {
               open={openMenu}
               onClose={handleMenuClose}
             >
+              <MenuItem onClick={() => { handleMenuClose(); window.location.href = '/dashboard'; }}>
+                  <AccountCircleIcon sx={{ marginRight: 2 }} />
+                 Dashboard
+              </MenuItem>
               <MenuItem onClick={handleMenuClose}>
                   <AccountCircleIcon sx={{ marginRight: 2 }} />
                  Profile
@@ -115,14 +110,12 @@ export default function DashboardMain() {
               boxSizing: 'border-box',
             },
           }}
-          variant="persistent"
+          variant="permanent"
           anchor="left"
-          open={open}
-          
         >
           <Divider />
           <List>
-            <ListItem button key="Dashboard">
+            <ListItem button key="Dashboard" onClick={() => window.location.href = '/dashboard'}>
                 <DashboardIcon sx={{ marginRight: 2, color: '#FFFFFF'}}/>
               <ListItemText primary="Dashboard" sx={{ color: '#FFFFFF' }} />
             </ListItem>
@@ -138,7 +131,7 @@ export default function DashboardMain() {
                 <ConstructionOutlinedIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
               <ListItemText primary="Server Configuration" sx={{ color: '#FFFFFF' }} />
             </ListItem>
-          <ListItem button key="Terminal">
+          <ListItem button key="Terminal" onClick={() => window.location.href = '/dashboard/console'}>
               <TerminalOutlinedIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
             <ListItemText primary="Terminal" sx={{ color: '#FFFFFF' }} />
           </ListItem>
@@ -151,9 +144,10 @@ export default function DashboardMain() {
           sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
         >
           <Toolbar />
-          <Typography paragraph>
-            Welcome to the Dashboard!
-          </Typography>
+          <Box sx={{ display: 'flex', gap: 3 }}>
+            <SystemMon/>
+            <WebsiteAvailability/>
+          </Box>
         </Box>
       </Box>
     </ThemeProvider>
diff --git a/src/Settings/SettingsMain.js b/src/Settings/SettingsMain.js
index b7bbd10..75bdc17 100644
--- a/src/Settings/SettingsMain.js
+++ b/src/Settings/SettingsMain.js
@@ -17,9 +17,7 @@ import {
 import PeopleIcon from '@mui/icons-material/PeopleOutline';
 import DashboardIcon from '@mui/icons-material/DashboardOutlined';
 import BarChartIcon from '@mui/icons-material/BarChartOutlined';
-import ConstructionOutlinedIcon from '@mui/icons-material/ConstructionOutlined';
 import SettingsIcon from '@mui/icons-material/SettingsOutlined';
-import TerminalOutlinedIcon from '@mui/icons-material/TerminalOutlined';
 import LogoutIcon from  '@mui/icons-material/LogoutOutlined';
 import MenuIcon from '@mui/icons-material/Menu';
 import AccountCircleIcon from '@mui/icons-material/AccountCircleOutlined';
@@ -29,7 +27,7 @@ import deleteToken from '../core/deleteToken';
 
 const drawerWidth = 240;
 
-export default function DashboardMain() {
+export default function SettingsMain() {
   const [open, setOpen] = useState(false);
   const [anchorEl, setAnchorEl] = useState(null);
   const openMenu = Boolean(anchorEl);
@@ -82,6 +80,10 @@ export default function DashboardMain() {
               open={openMenu}
               onClose={handleMenuClose}
             >
+              <MenuItem onClick={() => { handleMenuClose(); window.location.href = '/dashboard'; }}>
+                  <DashboardIcon sx={{ marginRight: 2 }} />
+                 Dashboard
+              </MenuItem>
               <MenuItem onClick={handleMenuClose}>
                   <AccountCircleIcon sx={{ marginRight: 2 }} />
                  Profile
diff --git a/src/Terminal/TerminalPage.js b/src/Terminal/TerminalPage.js
new file mode 100644
index 0000000..0d37e5c
--- /dev/null
+++ b/src/Terminal/TerminalPage.js
@@ -0,0 +1,188 @@
+import React, { useState } from 'react';
+import { 
+  Box,
+  ListItem,
+  ListItemText,
+  List,
+  Drawer,
+  IconButton,
+  Divider,
+  CssBaseline,
+  AppBar,
+  Toolbar,
+  Typography,
+  Menu,
+  MenuItem,
+} from '@mui/material';
+import PeopleIcon from '@mui/icons-material/PeopleOutline';
+import DashboardIcon from '@mui/icons-material/DashboardOutlined';
+import BarChartIcon from '@mui/icons-material/PieChartOutlined';
+import ConstructionOutlinedIcon from '@mui/icons-material/ConstructionOutlined';
+import SettingsIcon from '@mui/icons-material/SettingsOutlined';
+import TerminalOutlinedIcon from '@mui/icons-material/TerminalOutlined';
+import LogoutIcon from  '@mui/icons-material/LogoutOutlined';
+import MenuIcon from '@mui/icons-material/Menu';
+import AccountCircleIcon from '@mui/icons-material/AccountCircleOutlined';
+import { ThemeProvider } from '@mui/material/styles';
+import theme from '../theme';
+import deleteToken from '../core/deleteToken';
+import { Terminal } from 'xterm';
+import 'xterm/css/xterm.css';
+
+
+const drawerWidth = 240;
+
+export default function TerminalPage() {
+  const [open, setOpen] = useState(false);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const openMenu = Boolean(anchorEl);
+
+  const handleDrawer = () => {
+    if(open === false){
+      setOpen(true);
+    } 
+    else{
+      setOpen(false);
+    }
+  };
+
+
+  const handleMenuClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Box sx={{ display: 'flex' }}>
+        <CssBaseline />
+        <AppBar position="fixed" sx={{ width: `calc(100% - ${drawerWidth}px)`, ml: `${drawerWidth}px` }}>
+          <Toolbar>
+            <Typography variant="h6" noWrap sx={{ flexGrow: 1 }}>
+              Admin Dashboard
+            </Typography>
+            <IconButton
+              color="inherit"
+              onClick={handleMenuClick}
+              sx={{ transform: 'scale(1.2)' }}
+            >
+              <AccountCircleIcon />
+            </IconButton>
+            <Menu
+              anchorEl={anchorEl}
+              open={openMenu}
+              onClose={handleMenuClose}
+            >
+              <MenuItem onClick={handleMenuClose}>
+                  <AccountCircleIcon sx={{ marginRight: 2 }} />
+                 Profile
+              </MenuItem>
+              <MenuItem onClick={handleMenuClose}>
+                  <AccountCircleIcon sx={{ marginRight: 2 }} />
+                My account
+              </MenuItem>
+              <MenuItem onClick={() => { handleMenuClose(); window.location.href = '/settings'; }}>
+                  <SettingsIcon sx={{ marginRight: 2 }} />
+                Settings
+              </MenuItem>
+              <MenuItem onClick={() => { 
+                handleMenuClose(); 
+                deleteToken(); 
+                window.location.reload();
+              }}>
+                  <LogoutIcon sx={{ marginRight: 2 }} />
+                Logout
+              </MenuItem>
+            </Menu>
+          </Toolbar>
+        </AppBar>
+        <Drawer
+          sx={{
+            width: drawerWidth,
+            flexShrink: 0,
+            '& .MuiDrawer-paper': {
+              width: drawerWidth,
+              bgcolor: 'secondary.main',
+              boxSizing: 'border-box',
+            },
+          }}
+          variant="permanent"
+          anchor="left"
+          
+        >
+          <Divider />
+          <List>
+            <ListItem button key="Dashboard" onClick={() => window.location.href = '/dashboard'}>
+                <DashboardIcon sx={{ marginRight: 2, color: '#FFFFFF'}}/>
+              <ListItemText primary="Dashboard" sx={{ color: '#FFFFFF' }} />
+            </ListItem>
+            <ListItem button key="Users">
+                <PeopleIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
+              <ListItemText primary="Users" sx={{ color: '#FFFFFF' }} />
+            </ListItem>
+            <ListItem button key="Reports">
+                <BarChartIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
+              <ListItemText primary="Reports" sx={{ color: '#FFFFFF' }} />
+            </ListItem>
+            <ListItem button key="Server Configuration">
+                <ConstructionOutlinedIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
+              <ListItemText primary="Server Configuration" sx={{ color: '#FFFFFF' }} />
+            </ListItem>
+          <ListItem button key="Terminal" onClick={() => window.location.href = '/dashboard/console'}>
+              <TerminalOutlinedIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
+            <ListItemText primary="Terminal" sx={{ color: '#FFFFFF' }} />
+          </ListItem>
+
+
+          </List>
+        </Drawer>
+        <Box
+          component="main"
+          sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
+        >
+          <Toolbar />
+          <Box
+            id="terminal-container"
+            ref={(ref) => {
+              if (ref && !ref.hasChildNodes()) {
+                const term = new Terminal({
+                  cursorBlink: true,
+                  fontSize: 14,
+                  fontFamily: 'Cascadia Code, Consolas, monospace',
+                  theme: {
+                    background: '#012456',  // PowerShell blue background
+                    foreground: '#EEEDF0',  // PowerShell text color
+                    cursor: '#EEEDF0'
+                  }
+                });
+                term.open(ref);
+                term.write('Windows PowerShell\r\n');
+                term.write('Copyright (C) Microsoft Corporation. All rights reserved.\r\n\r\n');
+                term.write('PS C:\\Users\\Admin> ');
+                
+                term.onKey(e => {
+                  const char = e.key;
+                  if (char === '\r') { // Enter key
+                    term.write('\r\nPS C:\\Users\\Admin> ');
+                  } else {
+                    term.write(char);
+                  }
+                });
+              }
+            }}
+            sx={{
+              width: '100%',
+              height: '500px',
+              backgroundColor: '#012456', // PowerShell blue background
+              borderRadius: '4px',
+              padding: '8px'
+            }}
+          />
+        </Box>
+      </Box>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file
diff --git a/src/assets/LCSA_Logo.png b/src/assets/LCSA_Logo.png
new file mode 100644
index 0000000..f0abc31
Binary files /dev/null and b/src/assets/LCSA_Logo.png differ
diff --git a/src/theme.js b/src/theme.js
index 1ab9c93..2aa9683 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -3,13 +3,17 @@ import { createTheme } from '@mui/material/styles';
 const theme = createTheme({
     palette: {
       primary: {
-        main: '#4e00ba',
+        main: '#00523f',
       },
       secondary: {
-        main: '#390087'
+        main: '#003327'
+      },
+      warning: {
+        main: '#520013'
       }
     },
     
   });
   
-  export default theme;
\ No newline at end of file
+  
+export default theme;
\ No newline at end of file
diff --git a/src/widgets/WidgetsStatistics.js b/src/widgets/WidgetsStatistics.js
new file mode 100644
index 0000000..fd3be58
--- /dev/null
+++ b/src/widgets/WidgetsStatistics.js
@@ -0,0 +1,185 @@
+import React, { useState, useEffect } from 'react';
+import { 
+  Box,
+  Typography,
+  CircularProgress,
+} from '@mui/material';
+import { ThemeProvider } from '@mui/material/styles';
+import theme from '../theme';
+
+export const SystemMon = () => {
+  const [cpuUsage, setCpuUsage] = useState(0);
+  const [ramUsage, setRamUsage] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      // Симуляция получения данных об использовании CPU и RAM
+      setCpuUsage(Math.floor(Math.random() * 100));
+      setRamUsage(Math.floor(Math.random() * 100));
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Box sx={{ 
+        display: 'flex', 
+        flexDirection: 'column', 
+        alignItems: 'center',
+        p: 3,
+        bgcolor: 'background.paper',
+        borderRadius: 2,
+        boxShadow: 3,
+        width: '500px'
+      }}>
+        <Typography variant="h5" sx={{ mb: 3, color: 'primary.main' }}>
+          System Monitor
+        </Typography>
+        
+        <Box sx={{ display: 'flex', gap: 4, width: '100%', justifyContent: 'center' }}>
+          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+            <Typography variant="subtitle1" sx={{ mb: 1, color: 'text.secondary' }}>
+              CPU
+            </Typography>
+            <Box sx={{ position: 'relative', display: 'inline-flex' }}>
+              <CircularProgress 
+                variant="determinate" 
+                value={cpuUsage}
+                size={80}
+                thickness={4}
+                sx={{ color: theme.palette.primary.main }}
+              />
+              <Box sx={{
+                top: 0,
+                left: 0,
+                bottom: 0,
+                right: 0,
+                position: 'absolute',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}>
+                <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
+                  {cpuUsage}%
+                </Typography>
+              </Box>
+            </Box>
+          </Box>
+
+          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+            <Typography variant="subtitle1" sx={{ mb: 1, color: 'text.secondary' }}>
+              RAM
+            </Typography>
+            <Box sx={{ position: 'relative', display: 'inline-flex' }}>
+              <CircularProgress 
+                variant="determinate" 
+                value={ramUsage}
+                size={80}
+                thickness={4}
+                sx={{ color: theme.palette.secondary.main }}
+              />
+              <Box sx={{
+                top: 0,
+                left: 0,
+                bottom: 0,
+                right: 0,
+                position: 'absolute',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}>
+                <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
+                  {ramUsage}%
+                </Typography>
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    </ThemeProvider>
+  );
+};
+
+export const WebsiteAvailability = () => {
+  return (
+    <ThemeProvider theme={theme}>
+      <Box sx={{ 
+        display: 'flex', 
+        flexDirection: 'column', 
+        alignItems: 'center',
+        p: 3,
+        bgcolor: 'background.paper',
+        borderRadius: 2,
+        boxShadow: 3,
+        width: '500px'
+      }}>
+        <Typography variant="h5" sx={{ mb: 3, color: 'primary.main' }}>
+          Services Avability
+        </Typography>
+        <Box sx={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center', }}>
+          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+            <Typography variant="subtitle1" sx={{ mb: 1, color: 'text.secondary' }}>
+              Uptime
+            </Typography>
+            <Box sx={{ position: 'relative', display: 'inline-flex' }}>
+              <CircularProgress
+                variant="determinate"
+                value={99.9}
+                size={80}
+                thickness={4}
+                sx={{ color: theme.palette.primary.main }}
+              />
+              <Box sx={{
+                top: 0,
+                left: 0,
+                bottom: 0,
+                right: 0,
+                position: 'absolute',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}>
+                <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
+                  99.9%
+                </Typography>
+              </Box>
+            </Box>
+          </Box>
+
+          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+            <Typography variant="subtitle1" sx={{ mb: 1, color: 'text.secondary' }}>
+              Response Time
+            </Typography>
+            <Box sx={{ position: 'relative', display: 'inline-flex' }}>
+              <CircularProgress
+                variant="determinate" 
+                value={85}
+                size={80}
+                thickness={4}
+                sx={{ color: theme.palette.warning.main }}
+              />
+              <Box sx={{
+                top: 0,
+                left: 0,
+                bottom: 0,
+                right: 0,
+                position: 'absolute',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}>
+                <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
+                  85ms
+                </Typography>
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    </ThemeProvider>
+  );
+};
+
+
+