diff --git a/coeditor_frontend/package-lock.json b/coeditor_frontend/package-lock.json
index ca058a2..0a8524f 100644
--- a/coeditor_frontend/package-lock.json
+++ b/coeditor_frontend/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@ckeditor/ckeditor5-vue": "^7.2.0",
         "@popperjs/core": "^2.11.8",
+        "axios": "^1.7.7",
         "bootstrap": "^5.3.3",
         "ckeditor5": "^43.3.1",
         "core-js": "^3.8.3",
@@ -31,7 +32,9 @@
         "@vue/cli-plugin-vuex": "~5.0.0",
         "@vue/cli-service": "~5.0.0",
         "eslint": "^7.32.0",
-        "eslint-plugin-vue": "^8.0.3"
+        "eslint-plugin-vue": "^8.0.3",
+        "unplugin-auto-import": "^0.16.1",
+        "unplugin-vue-components": "^0.25.0"
       }
     },
     "node_modules/@achrinza/node-ipc": {
@@ -61,6 +64,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@antfu/utils": {
+      "version": "0.7.10",
+      "resolved": "https://registry.npmmirror.com/@antfu/utils/-/utils-0.7.10.tgz",
+      "integrity": "sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.26.0",
       "resolved": "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.26.0.tgz",
@@ -2676,6 +2688,40 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@rollup/pluginutils": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-5.1.3.tgz",
+      "integrity": "sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/pluginutils/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/@sideway/address": {
       "version": "4.1.5",
       "resolved": "https://registry.npmmirror.com/@sideway/address/-/address-4.1.5.tgz",
@@ -3847,9 +3893,9 @@
       }
     },
     "node_modules/acorn": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.13.0.tgz",
-      "integrity": "sha512-8zSiw54Oxrdym50NlZ9sUusyO1Z1ZchgRLWRaK6c86XJFClyCgFKetdowBg5bKxyp/u+CDBJG4Mpp0m3HLZl9w==",
+      "version": "8.14.0",
+      "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.14.0.tgz",
+      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
       "dev": true,
       "bin": {
         "acorn": "bin/acorn"
@@ -4101,6 +4147,11 @@
       "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
       "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -4147,6 +4198,16 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/babel-loader": {
       "version": "8.4.1",
       "resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.4.1.tgz",
@@ -4856,6 +4917,17 @@
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
       "dev": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz",
@@ -4928,6 +5000,12 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "node_modules/confbox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmmirror.com/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
+      "dev": true
+    },
     "node_modules/connect-history-api-fallback": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz",
@@ -5627,6 +5705,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
@@ -6823,7 +6909,6 @@
       "version": "1.15.9",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz",
       "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -6839,6 +6924,19 @@
         }
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/forwarded/-/forwarded-0.2.0.tgz",
@@ -8028,6 +8126,22 @@
         "json5": "lib/cli.js"
       }
     },
+    "node_modules/local-pkg": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-0.5.0.tgz",
+      "integrity": "sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==",
+      "dev": true,
+      "dependencies": {
+        "mlly": "^1.4.2",
+        "pkg-types": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/locate-path": {
       "version": "5.0.0",
       "resolved": "https://registry.npmmirror.com/locate-path/-/locate-path-5.0.0.tgz",
@@ -8411,7 +8525,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -8420,7 +8533,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -8567,6 +8679,18 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/mlly": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmmirror.com/mlly/-/mlly-1.7.3.tgz",
+      "integrity": "sha512-xUsx5n/mN0uQf4V548PKQ+YShA4/IW0KI1dZhrNrPCLG+xizETbHTkOa1f8/xut9JRPp8kQuMnz0oqwkTiLo/A==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.14.0",
+        "pathe": "^1.1.2",
+        "pkg-types": "^1.2.1",
+        "ufo": "^1.5.4"
+      }
+    },
     "node_modules/module-alias": {
       "version": "2.2.3",
       "resolved": "https://registry.npmmirror.com/module-alias/-/module-alias-2.2.3.tgz",
@@ -9153,6 +9277,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/pathe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/pathe/-/pathe-1.1.2.tgz",
+      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
+      "dev": true
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz",
@@ -9182,6 +9312,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/pkg-types": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-1.2.1.tgz",
+      "integrity": "sha512-sQoqa8alT3nHjGuTjuKgOnvjo4cljkufdtLMnO2LBP/wRwuDlo1tkaEdMxCRhyGRPacv/ztlZgDPm2b7FAmEvw==",
+      "dev": true,
+      "dependencies": {
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.2",
+        "pathe": "^1.1.2"
+      }
+    },
     "node_modules/portfinder": {
       "version": "1.0.32",
       "resolved": "https://registry.npmmirror.com/portfinder/-/portfinder-1.0.32.tgz",
@@ -9899,6 +10040,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",
@@ -10335,6 +10481,12 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/scule": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/scule/-/scule-1.3.0.tgz",
+      "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==",
+      "dev": true
+    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/select-hose/-/select-hose-2.0.0.tgz",
@@ -10861,6 +11013,24 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/strip-literal": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/strip-literal/-/strip-literal-2.1.0.tgz",
+      "integrity": "sha512-Op+UycaUt/8FbN/Z2TWPBLge3jWrP3xj10f3fnYxf052bKuS3EKs1ZQcVGjnEMdsNVAM+plXRdmjrZ/KgG3Skw==",
+      "dev": true,
+      "dependencies": {
+        "js-tokens": "^9.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/strip-literal/node_modules/js-tokens": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-9.0.0.tgz",
+      "integrity": "sha512-WriZw1luRMlmV3LGJaR6QOJjWwgLUTf89OwT2lUOyjX2dJGBwgmIkbcz+7WFZjrZM635JOIR517++e/67CP9dQ==",
+      "dev": true
+    },
     "node_modules/stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmmirror.com/stylehacks/-/stylehacks-5.1.1.tgz",
@@ -11237,6 +11407,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/ufo": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmmirror.com/ufo/-/ufo-1.5.4.tgz",
+      "integrity": "sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==",
+      "dev": true
+    },
     "node_modules/undici-types": {
       "version": "6.19.8",
       "resolved": "https://registry.npmmirror.com/undici-types/-/undici-types-6.19.8.tgz",
@@ -11283,6 +11459,48 @@
         "node": ">=4"
       }
     },
+    "node_modules/unimport": {
+      "version": "3.13.2",
+      "resolved": "https://registry.npmmirror.com/unimport/-/unimport-3.13.2.tgz",
+      "integrity": "sha512-VKAepeIb6BWLtBl4tmyHY1/7rJgz3ynmZrWf8cU1a+v5Uv/k1gyyAEeGBnYcrwy8bxG5sflxEx4a9VQUqOVHUA==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^5.1.3",
+        "acorn": "^8.14.0",
+        "escape-string-regexp": "^5.0.0",
+        "estree-walker": "^3.0.3",
+        "fast-glob": "^3.3.2",
+        "local-pkg": "^0.5.0",
+        "magic-string": "^0.30.12",
+        "mlly": "^1.7.3",
+        "pathe": "^1.1.2",
+        "pkg-types": "^1.2.1",
+        "scule": "^1.3.0",
+        "strip-literal": "^2.1.0",
+        "unplugin": "^1.15.0"
+      }
+    },
+    "node_modules/unimport/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/unimport/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
     "node_modules/universalify": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/universalify/-/universalify-2.0.1.tgz",
@@ -11301,6 +11519,167 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/unplugin": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-1.16.0.tgz",
+      "integrity": "sha512-5liCNPuJW8dqh3+DM6uNM2EI3MLLpCKp/KY+9pB5M2S2SR2qvvDHhKgBOaTWEbZTAws3CXfB0rKTIolWKL05VQ==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.14.0",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/unplugin-auto-import": {
+      "version": "0.16.1",
+      "resolved": "https://registry.npmmirror.com/unplugin-auto-import/-/unplugin-auto-import-0.16.1.tgz",
+      "integrity": "sha512-H3Ky56cGEEHTssxUIFuGXTowGVlT/Bp3MBx1yyCzUHzAtdrO+2r9zpid32f2AkTpQxo2lch6yaTK61Im+rEyPQ==",
+      "dev": true,
+      "dependencies": {
+        "@antfu/utils": "^0.7.2",
+        "@rollup/pluginutils": "^5.0.2",
+        "local-pkg": "^0.4.3",
+        "magic-string": "^0.30.0",
+        "minimatch": "^9.0.1",
+        "unimport": "^3.0.7",
+        "unplugin": "^1.3.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@nuxt/kit": "^3.2.2",
+        "@vueuse/core": "*"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        },
+        "@vueuse/core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin-auto-import/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/unplugin-auto-import/node_modules/local-pkg": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-0.4.3.tgz",
+      "integrity": "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/unplugin-auto-import/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/unplugin-vue-components": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmmirror.com/unplugin-vue-components/-/unplugin-vue-components-0.25.0.tgz",
+      "integrity": "sha512-HxrQ4GMSS1RwVww2av3a42cABo/v5AmTRN9iARv6e/xwkrfTyHhLh84kFwXxKkXK61vxDHxaryn694mQmkiVBg==",
+      "dev": true,
+      "dependencies": {
+        "@antfu/utils": "^0.7.3",
+        "@rollup/pluginutils": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.2.12",
+        "local-pkg": "^0.4.3",
+        "magic-string": "^0.30.0",
+        "minimatch": "^9.0.1",
+        "resolve": "^1.22.2",
+        "unplugin": "^1.3.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@babel/parser": "^7.15.8",
+        "@nuxt/kit": "^3.2.2",
+        "vue": "2 || 3"
+      },
+      "peerDependenciesMeta": {
+        "@babel/parser": {
+          "optional": true
+        },
+        "@nuxt/kit": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin-vue-components/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/unplugin-vue-components/node_modules/local-pkg": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-0.4.3.tgz",
+      "integrity": "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/unplugin-vue-components/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/unplugin/node_modules/webpack-virtual-modules": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+      "dev": true
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz",
diff --git a/coeditor_frontend/package.json b/coeditor_frontend/package.json
index b9c1f7c..0254354 100644
--- a/coeditor_frontend/package.json
+++ b/coeditor_frontend/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "@ckeditor/ckeditor5-vue": "^7.2.0",
     "@popperjs/core": "^2.11.8",
+    "axios": "^1.7.7",
     "bootstrap": "^5.3.3",
     "ckeditor5": "^43.3.1",
     "core-js": "^3.8.3",
@@ -31,7 +32,9 @@
     "@vue/cli-plugin-vuex": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3"
+    "eslint-plugin-vue": "^8.0.3",
+    "unplugin-auto-import": "^0.16.1",
+    "unplugin-vue-components": "^0.25.0"
   },
   "eslintConfig": {
     "root": true,
diff --git a/coeditor_frontend/src/components/FileFiled.vue b/coeditor_frontend/src/components/FileFiled.vue
index 4ab2b44..2e59d22 100644
--- a/coeditor_frontend/src/components/FileFiled.vue
+++ b/coeditor_frontend/src/components/FileFiled.vue
@@ -5,9 +5,7 @@
     <div class="file-item-icon" >
         <img src="@/assets/file_icon.png" alt="">
     </div>
-    <FileTitle>
-        {{ item.name }}
-    </FileTitle>
+    <FileTitle @leftclick="leftclick" @changetitlestate="changetitlestate" @changetitle="changetitle" :item="item" />
   </div>
 </template>
 
@@ -45,10 +43,24 @@ export default {
     const doubleclick = () => {
       context.emit('open_file');
     }
+
+    const changetitlestate = () => {
+      context.emit('changetitle',props.item);
+    }
+
+    const changetitle = (newname) => {
+      context.emit('changetitle',{
+        item:props.item,
+        newname,
+      });
+    }
+
     return {
         leftclick,
         rightclick,
         doubleclick,
+        changetitle,
+        changetitlestate,
     }
   }
 }
@@ -69,16 +81,6 @@ export default {
     height: 6vw;
 }
 
-
-.file-item-title{
-    width: 6vw;
-    height: 4vw;
-    text-align: center;
-    overflow: hidden;
-    font-size: 1.2vw;
-    word-break: break-all;
-}
-
 .file-item-selected {
   border: 0.1vh solid #99d1ff;
   background: #cce8ff;
diff --git a/coeditor_frontend/src/components/FileTitle.vue b/coeditor_frontend/src/components/FileTitle.vue
index 4f0ee8f..df82dbd 100644
--- a/coeditor_frontend/src/components/FileTitle.vue
+++ b/coeditor_frontend/src/components/FileTitle.vue
@@ -1,31 +1,51 @@
 <template>
-    <div class="file-item-title">
-        <slot></slot>
+    <div class="file-item-title" @click.stop="titleclick">
+        <input v-if="item.editable"  @click.stop="" @dblclick.stop="" type="text" v-model="filename"/>
+        <div v-else >
+            {{ filename }}
+        </div>
     </div>
 </template>
 
 
 <script>
+import { computed, ref } from 'vue';
+
 export default {
   name: 'FileTitle',
+  props:{
+      item:{
+          type:Object,
+          required:true,
+      }
+  },
+  setup(props,context){
+      let filename = ref(props.item.name);
+      let d = computed(() => {
+          if (!props.item.editable) {
+              context.emit("changetitle",filename.value);
+          }
+          return false;
+      });
+      const titleclick = () => {
+          if (props.item.is_selected) {
+              context.emit("changetitlestate");
+          }
+          else {
+              context.emit("leftclick");
+          }
+      }
+
+      return {
+          titleclick,
+          filename,
+          d,
+      }
+  }
 }
 </script>
 
 <style scoped>
-.file-item {
-    width: 8vw;
-    height: 8vw;
-    overflow: hidden;
-    display: inline-block;
-    margin: 0 0.1vw 1vw 0.1vw;
-    border: 0.1vh solid white;
-}
-
-.file-item-icon > img {
-    width: 6vw;
-    height: 6vw;
-}
-
 
 .file-item-title{
     width: 6vw;
@@ -40,4 +60,11 @@ export default {
   border: 0.1vh solid #99d1ff;
   background: #cce8ff;
 }
+
+input {
+    width: 6vw;
+    height: 1.8vw;
+    overflow: hidden;
+    font-size: 1.2vw;
+}
 </style>
diff --git a/coeditor_frontend/src/components/FolderFiled.vue b/coeditor_frontend/src/components/FolderFiled.vue
index 506c12f..e09db02 100644
--- a/coeditor_frontend/src/components/FolderFiled.vue
+++ b/coeditor_frontend/src/components/FolderFiled.vue
@@ -5,9 +5,7 @@
     <div class="file-item-icon" >
         <img src="@/assets/folder_icon.png" alt="">
     </div>
-    <FileTitle>
-        {{ item.name }}
-    </FileTitle>
+    <FileTitle @leftclick="leftclick" @changetitle="changetitle" :item="item" />
   </div>
 </template>
 
@@ -49,10 +47,15 @@ export default {
       context.emit('ls');
     }
 
+    const changetitle = () => {
+      context.emit('changetitle',props.item);
+    }
+
     return {
         leftclick,
         rightclick,
         doubleclick,
+        changetitle,
     }
   }
 }
diff --git a/coeditor_frontend/src/store/user.js b/coeditor_frontend/src/store/user.js
index 38a0837..e0f8e60 100644
--- a/coeditor_frontend/src/store/user.js
+++ b/coeditor_frontend/src/store/user.js
@@ -1,4 +1,5 @@
-import $ from 'jquery';
+// import $ from 'jquery';
+import axios from 'axios';
 
 const ModulerUser = {
     state: {
@@ -37,38 +38,40 @@ const ModulerUser = {
     },
     actions: {
         login(context,data){
-            $.ajax({
-              url:'http://47.106.113.194:8000/token/',
-              type:'POST',
+            axios({
+              url:'http://1.94.171.222:8000/token/',
+              method:'POST',
               data:{
                 username:data.username,
                 password:data.password,
               },
-              success:resp => {
-                const {access,refresh} = resp;
-                $.ajax({
-                    url:' http://47.106.113.194:8000/getinfo/',
-                    type:'GET',
+            })
+            .then(resp => {
+                const {access,refresh} = resp.data;
+                axios({
+                    url:'http://1.94.171.222:8000/getinfo/',
+                    method:'GET',
                     headers:{
                         'Authorization': "Bearer " + access,
                     },
-                    success(resp){
+                })
+                .then(resp => {
                       context.commit('updateUser',{
-                        ...resp,
+                        username:resp.data.username,
                         access:access,
                         refresh:refresh,
                         is_login: true,
                       });
-                      context.commit('forwardPath',"~/users/" + resp.username + '/'
+                      context.commit('forwardPath',resp.data.username + '/'
                       );
                       data.success();
                     }
-                });
-              },
-              error(){
+                );
+              })
+              .catch(() => {
                   data.error();
               }
-            });
+              );
           }
     },
     modules: {
diff --git a/coeditor_frontend/src/views/HomeView.vue b/coeditor_frontend/src/views/HomeView.vue
index c5e2c37..6e85e7c 100644
--- a/coeditor_frontend/src/views/HomeView.vue
+++ b/coeditor_frontend/src/views/HomeView.vue
@@ -2,15 +2,14 @@
   <PathBar @ls="ls" />
   <ContentBase @click="leftclick" @contextmenu.prevent="rightclick($event)">
     <div v-for="item in items" :key="item.name" class="file-item">
-        <FolderFiled @select_item='select_item' @filerightclick="filerightclick" @fileleftclick="fileleftclick" @ls="ls" v-if="item.type==='folder'" :item="item" />
-        <FileFiled  @select_item='select_item' @filerightclick="filerightclick" @fileleftclick="fileleftclick"  @open_file='open_file' v-if="item.type==='file'" :item="item" />
+        <FolderFiled @changetitlestate="changetitlestate" @changetitle="changetitle" @select_item='select_item' @filerightclick="filerightclick" @fileleftclick="fileleftclick" @ls="ls" v-if="item.type==='folder'" :item="item" />
+        <FileFiled @changetitlestate="changetitlestate" @changetitle="changetitle" @select_item='select_item' @filerightclick="filerightclick" @fileleftclick="fileleftclick"  @open_file='open_file' v-if="item.type==='file'" :item="item" />
     </div>
     <RightMenu v-if="menuvisible"  @open_file="open_file" @turn_back="turn_back" :menutype="menutype" :menuposition="menuposition" />
   </ContentBase>
 </template>
 
 <script>
-import $ from 'jquery';
 import ContentBase from '../components/ContentBase';
 import FileFiled from '../components/FileFiled';
 import FolderFiled from '../components/FolderFiled';
@@ -19,6 +18,7 @@ import PathBar from '../components/PathBar.vue';
 import { ref } from 'vue';
 import { useStore } from 'vuex';
 import router from '@/router/index.js';
+import axios from 'axios';
 
 
 export default {
@@ -44,28 +44,35 @@ export default {
     
     const ls = () => {
       menuvisible.value = false;
-      $.ajax({
-            url:' http://47.106.113.194:8000/operation/command/ls/',
+      axios({
+            url:' http://1.94.171.222:8000/operation/command/ls/',
             type:'get',
-            data:{
+            params:{
               'path':store.state.user.path.join(""),
             },
-            success:resp => {
+        })
+        .then(resp => {
               let tmp = [];
-              for (let i = 0;i < resp.items.length;i++) {
-                let item = resp.items[i];
+              for (let i = 0;i < resp.data.items.length;i++) {
+                let item = resp.data.items[i];
                 item.is_selected = false;
+                item.editable = false;
                 tmp.push(item);
               }          
               items.value = tmp;
             }
-        });
+        );
     }
 
     const select_item = (item) => {
+      console.log("select");
       let tmp = items.value;
       for (let i = 0;i < tmp.length;i++){
-        if (tmp[i] === item){
+        if (tmp[i].editable){
+            //rename
+            tmp[i].editable = false;
+        }
+        if (tmp[i] === item){  
           tmp[i].is_selected = true;
         }
         else {
@@ -88,18 +95,18 @@ export default {
         ls();
       }
       else {
-        $.ajax({
-            url:' http://47.106.113.194:8000/operation/open/',
+        axios({
+            url:' http://1.94.171.222:8000/operation/open/',
             type:'get',
-            data:{
+            params:{
               'path':store.state.user.path.join("") + selected_item.name,
             },
-            success:resp => {
-              store.commit('updateFileContent',resp.content);
-              console.log(resp);
+        })
+        .then(resp => {
+              store.commit('updateFileContent',resp.data.content);
               router.push({name:'ckeditor'});
             }
-        });
+        );
       }
       
     }
@@ -141,6 +148,31 @@ export default {
       select_item(data.item);
     }
 
+    const changetitlestate = (item) => {
+      item.editable = true;
+    }
+
+    const changetitle = (data) => {
+      data.item.editable = true;
+      rename(data.item,data.newname);
+    }
+
+    const rename = (item,newname) => {
+      axios({
+            url:' http://1.94.171.222:8000/operation/open/',
+            type:'get',
+            params:{
+              'path':store.state.user.path.join("") + item.name,
+              'newname':newname,
+            },
+        })
+        .then(resp => {
+            if (resp.data.result === 'success')
+              ls();
+            }
+        );
+    }
+
     if (store.state.user.is_login){
       ls();
     }
@@ -159,6 +191,8 @@ export default {
       rightclick,
       open_file,
       turn_back,
+      changetitle,
+      changetitlestate,
       menuvisible,
       menuposition,
       menutype,
diff --git a/coeditor_frontend/src/views/LoginView.vue b/coeditor_frontend/src/views/LoginView.vue
index 6fe22c0..be23711 100644
--- a/coeditor_frontend/src/views/LoginView.vue
+++ b/coeditor_frontend/src/views/LoginView.vue
@@ -37,7 +37,6 @@ export default {
     let error_message = ref('');
 
     const login = () => {
-      // http://47.106.113.194:8000/token/
       store.dispatch('login',{
         username:username.value,
         password:password.value,