diff --git a/package-lock.json b/package-lock.json
index fa1fef5..4d691b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,8 @@
         "@fortawesome/react-fontawesome": "^0.1.14",
         "@frogcat/ttl2jsonld": "^0.0.6",
         "@kbss-cvut/s-forms": "^0.7.2-beta-6cfd5af.0",
+        "@mui/icons-material": "^6.1.5",
+        "@mui/material": "^6.1.5",
         "@tippyjs/react": "^4.2.5",
         "@triply/yasgui": "^4.2.14",
         "@vitejs/plugin-react": "^4.3.1",
@@ -365,9 +367,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.0.tgz",
-      "integrity": "sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==",
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
+      "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -624,14 +626,14 @@
       }
     },
     "node_modules/@emotion/serialize": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.0.tgz",
-      "integrity": "sha512-jACuBa9SlYajnpIVXB+XOXnfJHyckDfe6fOpORIM6yhBDlqGuExvDdZYHDQGoDf3bZXGv7tNr+LpLjJqiEQ6EA==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.2.tgz",
+      "integrity": "sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==",
       "dependencies": {
         "@emotion/hash": "^0.9.2",
         "@emotion/memoize": "^0.9.0",
-        "@emotion/unitless": "^0.9.0",
-        "@emotion/utils": "^1.4.0",
+        "@emotion/unitless": "^0.10.0",
+        "@emotion/utils": "^1.4.1",
         "csstype": "^3.0.2"
       }
     },
@@ -711,9 +713,9 @@
       "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
     },
     "node_modules/@emotion/unitless": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.9.0.tgz",
-      "integrity": "sha512-TP6GgNZtmtFaFcsOgExdnfxLLpRDla4Q66tnenA9CktvVSdNKDvMVuUah4QvWPIpNjrWsGg3qeGo9a43QooGZQ=="
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
+      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg=="
     },
     "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
       "version": "1.1.0",
@@ -724,9 +726,9 @@
       }
     },
     "node_modules/@emotion/utils": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.0.tgz",
-      "integrity": "sha512-spEnrA1b6hDR/C68lC2M7m6ALPUHZC0lIY7jAS/B/9DuuO1ZP04eov8SMv/6fwRd8pzmsn2AuJEznRREWlQrlQ=="
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.1.tgz",
+      "integrity": "sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA=="
     },
     "node_modules/@emotion/weak-memoize": {
       "version": "0.4.0",
@@ -1301,17 +1303,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@jridgewell/source-map": {
-      "version": "0.3.6",
-      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
-      "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.25"
-      }
-    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
@@ -1457,6 +1448,262 @@
         "tslib": "^2.3.1"
       }
     },
+    "node_modules/@mui/core-downloads-tracker": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.5.tgz",
+      "integrity": "sha512-3J96098GrC95XsLw/TpGNMxhUOnoG9NZ/17Pfk1CrJj+4rcuolsF2RdF3XAFTu/3a/A+5ouxlSIykzYz6Ee87g==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
+    "node_modules/@mui/icons-material": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.5.tgz",
+      "integrity": "sha512-SbxFtO5I4cXfvhjAMgGib/t2lQUzcEzcDFYiRHRufZUeMMeXuoKaGsptfwAHTepYkv0VqcCwvxtvtWbpZLAbjQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.25.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^6.1.5",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.5.tgz",
+      "integrity": "sha512-rhaxC7LnlOG8zIVYv7BycNbWkC5dlm9A/tcDUp0CuwA7Zf9B9JP6M3rr50cNKxI7Z0GIUesAT86ceVm44quwnQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.25.7",
+        "@mui/core-downloads-tracker": "^6.1.5",
+        "@mui/system": "^6.1.5",
+        "@mui/types": "^7.2.18",
+        "@mui/utils": "^6.1.5",
+        "@popperjs/core": "^2.11.8",
+        "@types/react-transition-group": "^4.4.11",
+        "clsx": "^2.1.1",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.3.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material-pigment-css": "^6.1.5",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@mui/material-pigment-css": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@mui/material/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
+    },
+    "node_modules/@mui/private-theming": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.5.tgz",
+      "integrity": "sha512-FJqweqEXk0KdtTho9C2h6JEKXsOT7MAVH2Uj3N5oIqs6YKxnwBn2/zL2QuYYEtj5OJ87rEUnCfFic6ldClvzJw==",
+      "dependencies": {
+        "@babel/runtime": "^7.25.7",
+        "@mui/utils": "^6.1.5",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styled-engine": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.5.tgz",
+      "integrity": "sha512-tiyWzMkHeWlOoE6AqomWvYvdml8Nv5k5T+LDwOiwHEawx8P9Lyja6ZwWPU6xljwPXYYPT2KBp1XvMly7dsK46A==",
+      "dependencies": {
+        "@babel/runtime": "^7.25.7",
+        "@emotion/cache": "^11.13.1",
+        "@emotion/serialize": "^1.3.2",
+        "@emotion/sheet": "^1.4.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.5.tgz",
+      "integrity": "sha512-vPM9ocQ8qquRDByTG3XF/wfYTL7IWL/20EiiKqByLDps8wOmbrDG9rVznSE3ZbcjFCFfMRMhtxvN92bwe/63SA==",
+      "dependencies": {
+        "@babel/runtime": "^7.25.7",
+        "@mui/private-theming": "^6.1.5",
+        "@mui/styled-engine": "^6.1.5",
+        "@mui/types": "^7.2.18",
+        "@mui/utils": "^6.1.5",
+        "clsx": "^2.1.1",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system/node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@mui/types": {
+      "version": "7.2.18",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.18.tgz",
+      "integrity": "sha512-uvK9dWeyCJl/3ocVnTOS6nlji/Knj8/tVqVX03UVTpdmTJYu/s4jtDd9Kvv0nRGE0CUSNW1UYAci7PYypjealg==",
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.5.tgz",
+      "integrity": "sha512-vp2WfNDY+IbKUIGg+eqX1Ry4t/BilMjzp6p9xO1rfqpYjH1mj8coQxxDfKxcQLzBQkmBJjymjoGOak5VUYwXug==",
+      "dependencies": {
+        "@babel/runtime": "^7.25.7",
+        "@mui/types": "^7.2.18",
+        "@types/prop-types": "^15.7.13",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils/node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@mui/utils/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
+    },
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -1912,25 +2159,15 @@
         "@types/lodash": "*"
       }
     },
-    "node_modules/@types/node": {
-      "version": "22.5.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.1.tgz",
-      "integrity": "sha512-KkHsxej0j9IW1KKOOAA/XBA0z08UFSrRQHErzEfA3Vgq57eXIMYboIlHJuYIfd+lwCQjtKqUu3UnmKbtUc9yRw==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "undici-types": "~6.19.2"
-      }
-    },
     "node_modules/@types/parse-json": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
       "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
     },
     "node_modules/@types/prop-types": {
-      "version": "15.7.12",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
-      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
+      "version": "15.7.13",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
+      "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA=="
     },
     "node_modules/@types/react": {
       "version": "18.3.3",
@@ -1988,19 +2225,6 @@
         "node": ">=6.5"
       }
     },
-    "node_modules/acorn": {
-      "version": "8.12.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
-      "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/ansi-escapes": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-7.0.0.tgz",
@@ -2327,13 +2551,6 @@
         "ieee754": "^1.2.1"
       }
     },
-    "node_modules/buffer-from": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
-      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/call-bind": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
@@ -4465,17 +4682,6 @@
         "tslib": "^2.1.0"
       }
     },
-    "node_modules/popper.js": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
-      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
-      "peer": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
     "node_modules/postcss": {
       "version": "7.0.39",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
@@ -5355,27 +5561,6 @@
         "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",
-      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "buffer-from": "^1.0.0",
-        "source-map": "^0.6.0"
-      }
-    },
-    "node_modules/source-map-support/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/split-on-first": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
@@ -5588,32 +5773,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/terser": {
-      "version": "5.31.6",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.31.6.tgz",
-      "integrity": "sha512-PQ4DAriWzKj+qgehQ7LK5bQqCFNMmlhjR2PFFLuqGCpuCAauxemVBWwWOxo3UIwWQx8+Pr61Df++r76wDmkQBg==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@jridgewell/source-map": "^0.3.3",
-        "acorn": "^8.8.2",
-        "commander": "^2.20.0",
-        "source-map-support": "~0.5.20"
-      },
-      "bin": {
-        "terser": "bin/terser"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/terser/node_modules/commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/tippy.js": {
       "version": "6.3.7",
       "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
@@ -5672,13 +5831,6 @@
         "node": ">=14.0"
       }
     },
-    "node_modules/undici-types": {
-      "version": "6.19.8",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
-      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
diff --git a/package.json b/package.json
index 1f28ece..02e4c2a 100644
--- a/package.json
+++ b/package.json
@@ -16,16 +16,16 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "vite-plugin-env-compatible": "^2.0.1",
-    "@vitejs/plugin-react": "^4.3.1",
-    "vite": "^5.4.2",
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
     "@frogcat/ttl2jsonld": "^0.0.6",
     "@kbss-cvut/s-forms": "^0.7.2-beta-6cfd5af.0",
+    "@mui/icons-material": "^6.1.5",
+    "@mui/material": "^6.1.5",
     "@tippyjs/react": "^4.2.5",
     "@triply/yasgui": "^4.2.14",
+    "@vitejs/plugin-react": "^4.3.1",
     "bootstrap": "^4.5.3",
     "cytoscape": "^3.30.2",
     "cytoscape-compound-drag-and-drop": "^1.1.0",
@@ -48,7 +48,9 @@
     "react-spring": "^8.0.27",
     "react-treebeard": "^3.2.4",
     "semantic-ui-react": "^2.1.5",
-    "superagent": "^6.1.0"
+    "superagent": "^6.1.0",
+    "vite": "^5.4.2",
+    "vite-plugin-env-compatible": "^2.0.1"
   },
   "devDependencies": {
     "autoprefixer": "^9.7.6",
diff --git a/src/Router.jsx b/src/Router.jsx
index 685c76b..28d9faa 100644
--- a/src/Router.jsx
+++ b/src/Router.jsx
@@ -5,7 +5,7 @@ import Executions from "./components/Executions.jsx";
 import Scripts from "./components/Scripts.jsx";
 import Dagre from "./components/dagre/Dagre.jsx";
 import NoMatch from "./components/NoMatch.jsx";
-import Layout from "./components/Layout/Layout.jsx";
+import Layout from "./layouts/Layout.jsx";
 
 const Router = () => {
   return (
diff --git a/src/components/DynamicPage.jsx b/src/components/DynamicPage.jsx
index c8f7011..c358816 100644
--- a/src/components/DynamicPage.jsx
+++ b/src/components/DynamicPage.jsx
@@ -1,14 +1,12 @@
 import React from "react";
 import { Header } from "semantic-ui-react";
 
-import Layout from "./Layout";
-
 const DynamicPage = () => {
   return (
-    <Layout>
+    <>
       <Header as="h2">Dynamic Page</Header>
       <p>This page was loaded asynchronously!!!</p>
-    </Layout>
+    </>
   );
 };
 
diff --git a/src/components/Executions.jsx b/src/components/Executions.jsx
index 1fb5a84..4322605 100644
--- a/src/components/Executions.jsx
+++ b/src/components/Executions.jsx
@@ -1,6 +1,4 @@
 import React, { Fragment } from "react";
-
-import Layout from "./Layout";
 import {
   ABSOLUTE_PATH,
   DISPLAY_NAME,
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
new file mode 100644
index 0000000..07ba7d0
--- /dev/null
+++ b/src/components/Footer/Footer.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { AppBar, Toolbar, Container, Typography } from "@mui/material";
+import FavoriteIcon from "@mui/icons-material/Favorite";
+
+const Footer = () => {
+  return (
+    <AppBar position="fixed" sx={{ backgroundColor: "white", color: "black", top: "auto", bottom: 0 }} elevation={0}>
+      <Toolbar>
+        <Container sx={{ display: "flex", justifyContent: "flex-end" }}>
+          <Typography variant="body1" sx={{ color: "black" }}>
+            Made with <FavoriteIcon sx={{ color: "red", verticalAlign: "middle" }} />
+          </Typography>
+        </Container>
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+export default Footer;
diff --git a/src/components/Home.jsx b/src/components/Home.jsx
index 446f7e1..dfe77c6 100644
--- a/src/components/Home.jsx
+++ b/src/components/Home.jsx
@@ -1,9 +1,6 @@
 import React from "react";
 import { Grid } from "semantic-ui-react";
-
-import Layout from "./Layout";
 import ScriptsTree from "./treebeard/ScriptsTree";
-import { Link } from "react-router-dom";
 
 class Home extends React.Component {
   render() {
diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
deleted file mode 100644
index cc2ee15..0000000
--- a/src/components/Layout.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react";
-import { Container, Icon } from "semantic-ui-react";
-
-import { Nav, Navbar } from "react-bootstrap";
-import NavbarMenu from "./NavbarMenu";
-
-import { Outlet } from "react-router-dom";
-
-const Layout = ({ children }) => {
-  return (
-    <div>
-      <NavbarMenu />
-      <Container>
-        <Outlet />
-      </Container>
-      <div className="fixed-bottom">
-        <Navbar color="dark">
-          <Container>
-            <p className="pull-right">
-              Made with <Icon name="heart" color="red" />
-            </p>
-          </Container>
-        </Navbar>
-      </div>
-    </div>
-  );
-};
-
-export default Layout;
diff --git a/src/components/Navbar/NavbarMenu.jsx b/src/components/Navbar/NavbarMenu.jsx
new file mode 100644
index 0000000..3cbd139
--- /dev/null
+++ b/src/components/Navbar/NavbarMenu.jsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { AppBar, Toolbar, Typography, Button, Box } from "@mui/material";
+import { Link } from "react-router-dom";
+import { APP_TITLE } from "@config/env.js";
+
+const NavbarMenu = () => {
+  return (
+    <AppBar
+      position="static"
+      elevation={1}
+      sx={{ backgroundColor: "white", color: "black", zIndex: 100, marginBottom: 3 }}
+    >
+      <Toolbar>
+        <Typography variant="h6" component="div" sx={{ mr: 2 }}>
+          <Link to="/" style={{ textDecoration: "none", color: "black" }}>
+            {APP_TITLE}
+          </Link>
+        </Typography>
+
+        <Box sx={{ display: "flex", gap: 2 }}>
+          <Button color="inherit" component={Link} to="/scripts">
+            Scripts
+          </Button>
+          <Button color="inherit" component={Link} to="/executions">
+            Executions
+          </Button>
+        </Box>
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+export default NavbarMenu;
diff --git a/src/components/NavbarMenu.jsx b/src/components/NavbarMenu.jsx
deleted file mode 100644
index b52b674..0000000
--- a/src/components/NavbarMenu.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react";
-import { Nav, Navbar } from "react-bootstrap";
-import { APP_TITLE } from "@config/env.js";
-
-const NavbarMenu = () => {
-  return (
-    <Navbar bg="light" expand="lg" style={{ zIndex: 100 }}>
-      <Navbar.Brand href="/">{APP_TITLE}</Navbar.Brand>
-      <Navbar.Toggle aria-controls="basic-navbar-nav" />
-      <Navbar.Collapse id="basic-navbar-nav">
-        <Nav className="mr-auto">
-          {/*<Nav.Link href="/dynamic">Dynamic - test</Nav.Link>*/}
-          <Nav.Link href="/scripts">Scripts</Nav.Link>
-          <Nav.Link href="/executions">Executions</Nav.Link>
-        </Nav>
-      </Navbar.Collapse>
-    </Navbar>
-  );
-};
-
-export default NavbarMenu;
diff --git a/src/components/NoMatch.jsx b/src/components/NoMatch.jsx
index 6e232ba..d8f2b94 100644
--- a/src/components/NoMatch.jsx
+++ b/src/components/NoMatch.jsx
@@ -1,8 +1,6 @@
 import React from "react";
 import { Icon } from "semantic-ui-react";
 
-import Layout from "./Layout";
-
 const NoMatch = () => {
   return (
     <>
diff --git a/src/components/Scripts.jsx b/src/components/Scripts.jsx
index d48e336..0581217 100644
--- a/src/components/Scripts.jsx
+++ b/src/components/Scripts.jsx
@@ -1,9 +1,6 @@
 import React from "react";
 import { Grid } from "semantic-ui-react";
-
-import Layout from "./Layout";
 import ScriptsTree from "./treebeard/ScriptsTree";
-import { Link } from "react-router-dom";
 
 class Scripts extends React.Component {
   render() {
diff --git a/src/components/dagre/Dagre.jsx b/src/components/dagre/Dagre.jsx
index 92b3872..353eecb 100644
--- a/src/components/dagre/Dagre.jsx
+++ b/src/components/dagre/Dagre.jsx
@@ -14,7 +14,7 @@ import {
   Rest,
   SCRIPT_PATH,
 } from "../rest/Rest";
-import NavbarMenu from "../NavbarMenu";
+
 import SFormsModal from "../sform/SFormsModal";
 import ModuleTypesSelection from "../ModuleTypesSelection";
 import ScriptInputOutputModal from "../sform/ScriptInputOutputModal";
@@ -599,7 +599,6 @@ class Dagre extends React.Component {
         {this.state.isLoaded === false && (
           <Loading size={"large"} style={{ margin: "auto", position: "absolute", inset: "0px", zIndex: 9000 }} />
         )}
-        <NavbarMenu />
         <div>
           <div key={"cyKey"} style={cyStyle} id="cy" />
         </div>
diff --git a/src/components/modal/MoveModuleModal.jsx b/src/components/modal/MoveModuleModal.jsx
index 552d1f4..4d730ed 100644
--- a/src/components/modal/MoveModuleModal.jsx
+++ b/src/components/modal/MoveModuleModal.jsx
@@ -15,10 +15,6 @@ import {
   START_DATE_UNIX,
   TRANSFORMATION,
 } from "../rest/Rest";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEdit, faMugHot, faPlayCircle, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { Link } from "react-router-dom";
-import Layout from "../Layout";
 
 class MoveModuleModal extends React.Component {
   constructor(props) {
diff --git a/src/components/modal/ScriptActionsModuleModal.jsx b/src/components/modal/ScriptActionsModuleModal.jsx
index bcee202..b27bb8b 100644
--- a/src/components/modal/ScriptActionsModuleModal.jsx
+++ b/src/components/modal/ScriptActionsModuleModal.jsx
@@ -15,10 +15,6 @@ import {
   START_DATE_UNIX,
   TRANSFORMATION,
 } from "../rest/Rest";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEdit, faMugHot, faPlayCircle, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { Link } from "react-router-dom";
-import Layout from "../Layout";
 
 class ScriptActionsModuleModal extends React.Component {
   constructor(props) {
diff --git a/src/components/modal/ScriptOntologyModal.jsx b/src/components/modal/ScriptOntologyModal.jsx
index 0cf2c38..5318c9e 100644
--- a/src/components/modal/ScriptOntologyModal.jsx
+++ b/src/components/modal/ScriptOntologyModal.jsx
@@ -15,10 +15,6 @@ import {
   START_DATE_UNIX,
   TRANSFORMATION,
 } from "../rest/Rest";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEdit, faMugHot, faPlayCircle, faPlusCircle, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { Link } from "react-router-dom";
-import Layout from "../Layout";
 
 class ScriptOntologyModal extends React.Component {
   constructor(props) {
diff --git a/src/layouts/Layout.jsx b/src/layouts/Layout.jsx
new file mode 100644
index 0000000..8f06600
--- /dev/null
+++ b/src/layouts/Layout.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { Container } from "@mui/material";
+import NavbarMenu from "../components/Navbar/NavbarMenu.jsx";
+import { Outlet } from "react-router-dom";
+import Footer from "../components/Footer/Footer.jsx";
+
+const Layout = () => {
+  return (
+    <div>
+      <NavbarMenu />
+      <Container maxWidth="lg">
+        <Outlet />
+      </Container>
+      <Footer />
+    </div>
+  );
+};
+
+export default Layout;
diff --git a/src/components/layout.css b/src/layouts/layout.css
similarity index 100%
rename from src/components/layout.css
rename to src/layouts/layout.css