diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 2c0ff03f8..ca5d84680 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -2083,6 +2083,15 @@
                 "he": "^1.2.0"
             }
         },
+        "node_modules/@vue/devtools-api": {
+            "version": "6.6.4",
+            "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+            "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "peer": true
+        },
         "node_modules/@vue/language-core": {
             "version": "2.1.10",
             "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.1.10.tgz",
@@ -5450,6 +5459,24 @@
                 "url": "https://opencollective.com/eslint"
             }
         },
+        "node_modules/vue-router": {
+            "version": "4.6.3",
+            "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.3.tgz",
+            "integrity": "sha512-ARBedLm9YlbvQomnmq91Os7ck6efydTSpRP3nuOKCvgJOHNrhRoJDSKtee8kcL1Vf7nz6U+PMBL+hTvR3bTVQg==",
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "peer": true,
+            "dependencies": {
+                "@vue/devtools-api": "^6.6.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/posva"
+            },
+            "peerDependencies": {
+                "vue": "^3.5.0"
+            }
+        },
         "node_modules/vue-tsc": {
             "version": "2.1.10",
             "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.1.10.tgz",
diff --git a/frontend/src/ClassDetail.svelte b/frontend/src/ClassDetail.svelte
index 24670ccac..835daf8cb 100644
--- a/frontend/src/ClassDetail.svelte
+++ b/frontend/src/ClassDetail.svelte
@@ -137,7 +137,7 @@ let showSummary = false;
 <div class="card mb-2" style="position: initial">
   <div class="card-header p-0">
     <div class="float-end p-2" style="display: flex; align-items: center;">
-      <a href="/task/add/{clazz.subject_abbr}" use:link title="Assign new task">
+      <a href="/task/add/{clazz.subject_abbr}" title="Assign new task">
         <span class="iconify" data-icon="bx:bx-calendar-plus"></span>
       </a>
       <button
@@ -223,7 +223,7 @@ let showSummary = false;
                       </a>
                       <div class="more-content border shadow rounded bg-body p-1">
                         {assignment.name}
-                        <a use:link={`/task/edit/${assignment.task_id}`} title="Edit"
+                        <a href={`/task/edit/${assignment.task_id}`} title="Edit"
                           ><span class="iconify" data-icon="clarity:edit-solid"></span></a>
                         <div style="display: flex; align-items: center;">
                           <a href={assignment.plagcheck_link} title="Plagiarism check"
diff --git a/frontend/src/Teacher/EditTask/AutoCompleteTaskPath.vue b/frontend/src/Teacher/EditTask/AutoCompleteTaskPath.vue
new file mode 100644
index 000000000..2802524c0
--- /dev/null
+++ b/frontend/src/Teacher/EditTask/AutoCompleteTaskPath.vue
@@ -0,0 +1,170 @@
+<script setup lang="ts">
+/**
+ * Component displays an input field that autocomplete path based on subject and username.
+ * It also allows user to copy entered path in SSH/RSYNC format to clipboard.
+ */
+
+import { user as userSvelte } from '../../global.js';
+import { clickOutside } from '../../utilities/clickOutside';
+import { User } from '../../utilities/SvelteStoreTypes';
+import { useReadableSvelteStore } from '../../utilities/useSvelteStoreInVue';
+import { defineModel, onMounted, computed, ref, watch, defineEmits } from 'vue';
+import CopyToClipboard from './CopyToClipboard.vue';
+
+/**
+ * @prop {string}                     subject  - subject code used to get autocomplete hints
+ * @prop {(task_id: number) => void}  onChange - function called once user select item from list
+ */
+let { subject, onChange } = defineProps<{
+  subject: string;
+  onChange: (task_id: number) => void;
+}>();
+
+const vClickOutside = clickOutside;
+
+const clickEmit = defineEmits<{
+  (e: 'click'): void;
+}>();
+
+/**
+ * @model
+ * @type string
+ * Model is variable containing actual path
+ */
+const path = defineModel<string>();
+
+interface TaskList {
+  id: number;
+  title: string;
+  path: string;
+  subject: string;
+  date: Date;
+  link: string;
+}
+
+const user = useReadableSvelteStore<User>(userSvelte);
+
+const items = ref<TaskList[]>([]);
+const selectedId = ref<number | null>(null);
+let focused = ref<boolean>(false);
+const highlighted_row = ref<number>(-1);
+
+const filtered = computed(() =>
+  items.value.filter(
+    (i) =>
+      i['path'].toLowerCase().includes(path.value.toLowerCase()) &&
+      i['path'].toLowerCase() != path.value.toLowerCase()
+  )
+);
+
+onMounted(async () => {
+  // Load last 100 tasks of the given subject.
+  // Hopefully they will contain some useful paths to autocomplete :)
+  let res = await fetch(`/api/task-list/${subject}?sort=desc`);
+  res = await res.json();
+  items.value = res['tasks'];
+});
+
+// https://stackoverflow.com/a/6969486/1107768
+function escapeRegExp(string: string): string {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+}
+
+function keyup(e: KeyboardEvent) {
+  if (e.key == 'Enter' && highlighted_row.value >= 0) {
+    focused.value = false;
+    selectedId.value = filtered.value[highlighted_row.value].id;
+    path.value = filtered.value[highlighted_row.value].path;
+
+    let input: HTMLInputElement = e.target as HTMLInputElement;
+    input.blur();
+  } else if (e.key == 'ArrowUp' && highlighted_row.value >= 0) {
+    highlighted_row.value = Math.max(0, highlighted_row.value - 1);
+  } else if (e.key == 'ArrowDown') {
+    highlighted_row.value = Math.min(filtered.value.length - 1, highlighted_row.value + 1);
+  }
+}
+
+watch(selectedId, () => {
+  if (selectedId.value) onChange(selectedId.value);
+});
+</script>
+
+<template>
+  <div v-click-outside="() => (focused = false)" class="form-control">
+    <div class="input-group mb-1">
+      <input
+        v-model="path"
+        class="form-control"
+        required
+        placeholder="Task directory"
+        @focus="focused = true"
+        @click="() => clickEmit('click')"
+        @keyup="keyup"
+      />
+      <span class="btn btn-sm btn-outline-secondary">
+        <CopyToClipboard
+          :content="`${user.username.toLowerCase()}@kelvin.cs.vsb.cz:/srv/kelvin/kelvin/tasks/${path}`"
+          title="Copy path for scp/rsync to the clipboard"
+          >path</CopyToClipboard
+        >
+      </span>
+      <span class="btn btn-sm btn-outline-secondary">
+        <CopyToClipboard
+          :content="`ssh -t ${user.username.toLowerCase()}@kelvin.cs.vsb.cz 'cd /srv/kelvin/kelvin/tasks/${path} && exec bash'`"
+          title="Copy ssh command to the clipboard"
+          >ssh</CopyToClipboard
+        >
+      </span>
+    </div>
+
+    <ul v-if="filtered.length && focused">
+      <li
+        v-for="(item, i) in filtered"
+        :key="i"
+        :class="{ highlight: highlighted_row == i }"
+        @click="
+          () => {
+            path = item.path;
+            selectedId = item.id;
+          }
+        "
+        v-html="
+          item.path.replace(new RegExp('(' + escapeRegExp(path) + ')', 'gi'), '<strong>$1</strong>')
+        "
+      ></li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.form-control {
+  padding-bottom: 0;
+}
+
+input {
+  width: 100%;
+  padding-bottom: 0;
+  padding-top: 0;
+  outline: 0;
+  border: 0;
+}
+
+ul {
+  background: white;
+  border: 1px solid rgb(206, 212, 218);
+  max-height: 200px;
+  overflow-y: auto;
+  list-style: none;
+  padding-left: 0;
+  position: absolute;
+  width: 100%;
+  z-index: 3;
+}
+
+li:hover,
+li.highlight {
+  background: #5bc0de;
+  cursor: pointer;
+}
+</style>
diff --git a/frontend/src/Teacher/EditTask/CopyToClipboard.vue b/frontend/src/Teacher/EditTask/CopyToClipboard.vue
new file mode 100644
index 000000000..8045dca00
--- /dev/null
+++ b/frontend/src/Teacher/EditTask/CopyToClipboard.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+/**
+ * Displays a button with given text and title; once clicked it copies content to clipboard
+ * and show a small animation informing user about the action
+ */
+import { ref } from 'vue';
+
+/**
+ * @prop {string} content - content to copy to clipboard
+ * @prop {string} title   - appears when the user moves the mouse over the button
+ */
+let { content, title = 'Copy to clipboard' } = defineProps<{
+  content?: string;
+  title: string;
+}>();
+
+/**
+ * Pop up message coordinates
+ */
+interface PopUp {
+  left: number;
+  top: number;
+}
+
+const tooltip = ref<PopUp | null>(null);
+
+function copy(e: MouseEvent): void {
+  navigator.clipboard.writeText(content);
+
+  let spanElement: HTMLElement = e.target as HTMLElement;
+  let container: HTMLElement = spanElement.closest('.tooltip-container') as HTMLElement;
+  tooltip.value = {
+    left: container.offsetLeft + container.offsetWidth,
+    top: container.offsetTop - 5
+  };
+
+  setTimeout(() => (tooltip.value = null), 1500);
+}
+</script>
+
+<template>
+  <span style="position: relative">
+    <span class="tooltip-container" :title="title" @click="copy">
+      <slot></slot>
+    </span>
+    <Transition name="fade">
+      <div
+        v-if="tooltip"
+        class="tooltip bs-tooltip-right show d-flex align-items-center"
+        role="tooltip"
+        :style="{ left: tooltip.left + 'px', top: tooltip.top + 'px' }"
+      >
+        <div class="popover-arrow"></div>
+        <div class="tooltip-inner">Copied!</div>
+      </div>
+    </Transition>
+  </span>
+</template>
+
+<style scoped>
+span {
+  cursor: pointer;
+}
+
+.fade-enter-active {
+  transition: opacity 2s ease;
+}
+
+.fade-leave-active {
+  transition: opacity 0.1s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+</style>
diff --git a/frontend/src/Teacher/EditTask/EditTask.vue b/frontend/src/Teacher/EditTask/EditTask.vue
new file mode 100644
index 000000000..42b483501
--- /dev/null
+++ b/frontend/src/Teacher/EditTask/EditTask.vue
@@ -0,0 +1,585 @@
+<script setup lang="ts">
+/**
+ * Component shows full edit task page, used for editing existing pages and creating new ones
+ */
+
+import { ref, watch, onMounted, toRaw } from 'vue';
+
+import { semester as semesterSvelte, user as userSvelte } from '../../global.js';
+import { fs, openedFiles as openedFilesSvelte } from '../../fs.js';
+import VueModal from '../../components/VueModal.vue';
+import { task_types } from '../../taskTypes';
+import Manager from './FileManager.vue';
+import SyncLoader from '../../components/SyncLoader.vue';
+import TimeRange from './TimeRange.vue';
+import { useReadableSvelteStore } from '../../utilities/useSvelteStoreInVue';
+import { User, Semester, FileEntry } from '../../utilities/SvelteStoreTypes';
+import AutoCompleteTaskPath from './AutoCompleteTaskPath.vue';
+import { fetch } from '../../api';
+
+const semester = useReadableSvelteStore<Semester>(semesterSvelte);
+const user = useReadableSvelteStore<User>(userSvelte);
+const openedFiles = useReadableSvelteStore<Record<string, FileEntry>>(openedFilesSvelte);
+
+interface EditParams {
+  id: number;
+  subject?: never;
+}
+
+interface AddParams {
+  subject: string;
+  id?: never;
+}
+
+//parameters are based on page role - create new / edit
+type RouteParams = EditParams | AddParams;
+
+const props = defineProps<{ params: RouteParams }>();
+
+interface Class {
+  assigned: Date;
+  assignment_id: number;
+  code: string;
+  deadline: Date;
+  hard_deadline: boolean;
+  id: number;
+  max_points: number;
+  teacher: string;
+  timeslot: string;
+  week_offset: number;
+}
+
+interface Task {
+  id?: number;
+  subject_abbr: string;
+  path: string;
+  classes: Class[];
+  files?: Record<string, FileEntry>;
+  files_uri?: string;
+  errors?: Array<string>;
+  task_link?: string;
+  plagcheck_link?: string;
+  plagiarism_key?: string;
+  type: string;
+  can_delete?: boolean;
+}
+
+let task = ref<Task | null>(null);
+let syncPathWithTitle = ref(false);
+let taskLink = ref('');
+let deleteModal = ref(false);
+
+const syncing = ref<boolean>(false);
+let errors = ref<Array<string>>([]);
+let savedPath = ref('');
+
+let showAllClasses = ref<boolean>(false);
+
+let shownClasses = ref<Array<Class>>([]);
+
+function isClassVisible(cls: Class): boolean {
+  return cls.teacher === user.value.username || cls.assignment_id > 0 || showAllClasses.value;
+}
+
+watch(task, (newTask) => {
+  if (newTask) {
+    shownClasses.value = newTask.classes.filter(isClassVisible).sort((a, b) => {
+      function key(cls: Class): boolean {
+        return cls.teacher === user.value.username || cls.assignment_id !== undefined;
+      }
+
+      return Number(key(b)) - Number(key(a));
+    });
+  }
+});
+
+watch(task, (newTask) => {
+  if (newTask) {
+    const clazz = newTask.classes.find((clazz) => clazz.assignment_id >= 1);
+    if (clazz) {
+      taskLink.value = `/task/${clazz.assignment_id}/${user.value.username}/`;
+    } else {
+      taskLink.value = newTask.task_link;
+    }
+  }
+});
+
+/**
+ * Redirect user to given URL
+ */
+function redirectToUrl(url: string): void {
+  window.location.href = url;
+}
+
+/**
+ * Used when we want to create new task
+ */
+async function prepareCreatingTask(): Promise<void> {
+  const res = await fetch('/api/subject/' + props.params.subject);
+  const json = await res.json();
+
+  const current_path = [props.params.subject, semester.value['abbr'], user.value.username].join(
+    '/'
+  );
+
+  task.value = {
+    classes: json['classes'],
+    path: current_path,
+    subject_abbr: props.params.subject,
+    type: 'homework'
+  };
+
+  fs.createFile('readme.md', '# Task Title');
+  await fs.open('readme.md');
+}
+
+/**
+ * Load existing task
+ * @param id task id
+ * @param redirectTo we can load task from EditTask page, then we need to reload to reflect id in URL
+ */
+async function loadTask(id: number, redirectTo: boolean = true): Promise<void> {
+  const req = await fetch('/api/tasks/' + id);
+  task.value = await req.json();
+  savedPath.value = task.value['path'];
+  fs.setRoot(task.value.files, task.value.files_uri);
+  await fs.open('readme.md');
+
+  if (redirectTo) redirectToUrl('/task/edit/' + task.value.id);
+}
+
+onMounted(async () => {
+  if (props.params.id) {
+    await loadTask(props.params.id, false);
+  } else {
+    await prepareCreatingTask();
+    syncPathWithTitle.value = true;
+  }
+});
+
+function synchronizePathWithReadMeTitle(): void {
+  const readme = openedFiles.value['/readme.md'];
+
+  if (readme && task.value) {
+    let parts = [props.params.subject, semester.value['abbr'], user.value.username];
+
+    let classes = task.value['classes'].filter((c) => c.assigned);
+    if (classes.length == 1) {
+      parts.push(classes[0].timeslot);
+    }
+
+    const title = readme.content
+      .split('\n')[0]
+      .toLowerCase()
+      .replace(/^\s*#\s*|\s*$/g, '')
+      .replace(/( |\/|\\)/g, '_')
+      .split('')
+      .map((c) => {
+        const map = {
+          ě: 'e',
+          š: 's',
+          č: 'c',
+          ř: 'r',
+          ž: 'z',
+          ý: 'y',
+          á: 'a',
+          í: 'i',
+          é: 'e',
+          ú: 'u',
+          ů: 'u',
+          ǒ: 'o',
+          ó: 'p'
+        };
+        return map[c] ? map[c] : c;
+      })
+      .join('');
+
+    if (title) {
+      parts.push(title);
+    }
+
+    task.value.path = parts.join('/');
+  }
+}
+
+watch(syncPathWithTitle, (newSyncPathWithTitle) => {
+  if (newSyncPathWithTitle) {
+    synchronizePathWithReadMeTitle();
+  }
+});
+
+watch(openedFiles, () => {
+  if (syncPathWithTitle.value) {
+    synchronizePathWithReadMeTitle();
+  }
+});
+
+async function save(): Promise<void> {
+  syncing.value = true;
+
+  console.log(task.value);
+
+  const res = await fetch('/api/tasks/' + (task.value.id ? task.value.id : ''), {
+    method: 'POST',
+    body: JSON.stringify(toRaw(task.value))
+  });
+
+  const json = await res.json();
+  errors.value = json['errors'];
+  if (errors.value.length == 0) {
+    task.value['classes'] = json['classes'];
+    savedPath.value = json['path'];
+    task.value['can_delete'] = json['can_delete'];
+    fs.setEndpointUrl(json.files_uri);
+
+    await openedFilesSvelte.save();
+
+    if (!task.value.id) {
+      redirectToUrl('/task/edit/' + json.id);
+    }
+  }
+  syncing.value = false;
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', (evt) => {
+    if (evt.ctrlKey && evt.key == 's') {
+      save();
+      evt.preventDefault();
+    }
+  });
+});
+
+function setAssignedDateToVisible(assigned: Date): void {
+  task.value.classes = task.value.classes.map((cl) => {
+    if (isClassVisible(cl)) cl.assigned = assigned;
+    return cl;
+  });
+}
+
+function setDeadlineToAssigned(deadline: Date): void {
+  task.value.classes = task.value.classes.map((cl) => {
+    if (cl.assigned) cl.deadline = deadline;
+    return cl;
+  });
+}
+
+function assignPointsToAll(max_pts: number): void {
+  task.value.classes = task.value.classes.map((cl) => {
+    if (cl.assigned) {
+      cl.max_points = max_pts;
+    }
+    return cl;
+  });
+}
+
+function assignHardDeadlineToAll(hard_deadline: boolean): void {
+  task.value.classes = task.value.classes.map((cl) => {
+    if (cl.assigned) cl.hard_deadline = hard_deadline;
+    return cl;
+  });
+}
+
+function assignSameToAll(templateClass: Class): void {
+  task.value.classes = task.value.classes.map((cl) => {
+    if (isClassVisible(cl)) {
+      cl.max_points = templateClass.max_points;
+      cl.assigned = templateClass.assigned;
+      cl.deadline = templateClass.deadline;
+      cl.hard_deadline = templateClass.hard_deadline;
+    }
+    return cl;
+  });
+}
+
+function setRelativeDeadlineToAssigned(assigned: Date, deadline: Date): void {
+  const diff = Number(new Date(deadline)) - Number(new Date(assigned));
+  task.value.classes = task.value.classes.map((cl) => {
+    if (cl.assigned) {
+      cl.deadline = new Date(new Date(cl.assigned).getTime() + diff);
+    }
+    return cl;
+  });
+}
+
+async function duplicateTask(): Promise<void> {
+  let res = await fetch(`/api/tasks/${task.value.id}/duplicate`, {
+    method: 'POST'
+  });
+
+  let json = await res.json();
+  redirectToUrl('/task/edit/' + json.id);
+  await loadTask(json.id);
+}
+
+async function deleteTask(proceed: boolean): Promise<void> {
+  deleteModal.value = false;
+  if (proceed) {
+    const res = await fetch(`/api/tasks/${task.value.id}`, {
+      method: 'DELETE'
+    });
+
+    const json = await res.json();
+
+    if (json['errors']) {
+      errors.value = json['errors'];
+    } else {
+      errors.value = [];
+      redirectToUrl('/task/add/' + task.value.subject_abbr);
+      fs.setRoot([], undefined);
+      await prepareCreatingTask();
+    }
+  }
+}
+</script>
+
+<template>
+  <div v-if="task != null" class="container-fluid">
+    <div style="position: relative">
+      <div v-if="syncing" style="position: absolute; top: 50%; left: 50%; z-index: 1">
+        <SyncLoader />
+      </div>
+      <div>
+        <div v-if="errors && errors.length" class="alert alert-danger">
+          <ul v-for="error in errors" :key="error" class="m-0">
+            <li style="white-space: pre-line">{{ error }}</li>
+          </ul>
+        </div>
+
+        <div class="input-group mb-1">
+          <AutoCompleteTaskPath
+            v-model="task.path"
+            :subject="task.subject_abbr"
+            :on-change="loadTask"
+            @click="syncPathWithTitle = false"
+          />
+          <template v-if="taskLink">
+            <a
+              class="btn btn-outline-info d-flex align-items-center"
+              title="Plagiarism check"
+              :href="task.plagcheck_link"
+              target="_blank"
+            >
+              <span class="iconify" data-icon="bx:bx-check-double"></span>
+            </a>
+            <a
+              class="btn btn-outline-info d-flex align-items-center"
+              title="Show all source codes"
+              :href="'/task/show/' + task.id"
+              target="_blank"
+            >
+              <span class="iconify" data-icon="bx-bx-code-alt"></span>
+            </a>
+            <a
+              class="btn btn-outline-info d-flex align-items-center"
+              title="Show task stats"
+              :href="'/statistics/task/' + task.id"
+              target="_blank"
+            >
+              <span class="iconify" data-icon="bx-bx-bar-chart-alt-2"></span>
+            </a>
+            <button
+              class="btn btn-outline-info d-flex align-items-center"
+              title="Duplicate this task"
+              @click="duplicateTask"
+            >
+              <span class="iconify" data-icon="ant-design:copy-outlined"></span>
+            </button>
+            <button class="btn btn-outline-info d-flex align-items-center" title="Open task">
+              <a :href="taskLink" target="_blank"
+                ><span class="iconify" data-icon="bx:bx-link-external"></span
+              ></a>
+            </button>
+            <button
+              class="btn btn-outline-danger d-flex align-items-center"
+              :disabled="!task['can_delete']"
+              @click="() => (deleteModal = true)"
+            >
+              <span class="iconify" data-icon="akar-icons:trash-can"></span>
+            </button>
+            <VueModal
+              :open="deleteModal"
+              :on-closed="deleteTask"
+              proceed-button-label="Delete"
+              title="Delete task"
+            >
+              Do you really want to delete the task with path <strong>{{ savedPath }}</strong
+              >?
+              <strong>Readme.md</strong>
+              and all files will be <strong>DELETED!</strong>
+            </VueModal>
+          </template>
+        </div>
+
+        <div class="mb-2">
+          <table class="table table-hover table-striped mb-0">
+            <tbody>
+              <tr
+                v-for="(clazz, idx) in shownClasses"
+                :key="clazz.id"
+                :class="{ 'table-success': clazz.assigned }"
+              >
+                <td>
+                  {{ clazz.timeslot }}
+                  <span class="opacity-50">({{ clazz.code }})</span>
+                </td>
+                <td>{{ clazz.teacher }}</td>
+                <td>
+                  <div class="row">
+                    <TimeRange
+                      v-model:from-date="clazz.assigned"
+                      v-model:to-date="clazz.deadline"
+                      :on-to-relative-click="setRelativeDeadlineToAssigned"
+                      :on-to-duplicate-click="setDeadlineToAssigned"
+                      :on-from-duplicate-click="setAssignedDateToVisible"
+                      :semester-begin-date="semester.begin"
+                      :time-offset-in-week="clazz.week_offset"
+                    />
+                    <div
+                      v-if="clazz.deadline"
+                      class="col-2"
+                      title="Forbids students to make submissions after the deadline has passed."
+                    >
+                      <div class="input-group input-group-sm">
+                        <input
+                          :id="'hardDeadline_' + idx"
+                          v-model="clazz.hard_deadline"
+                          class="form-check-input checkbox-md"
+                          type="checkbox"
+                        />
+                        <label class="form-check-label check_box_label" :for="'hardDeadline_' + idx"
+                          >Hard Deadline</label
+                        >
+                        <button
+                          class="btn btn-sm btn-secondary"
+                          title="Copy hard deadline setting to all classes"
+                          @click.prevent="assignHardDeadlineToAll(clazz.hard_deadline)"
+                        >
+                          <span class="iconify" data-icon="mdi:content-duplicate"></span>
+                        </button>
+                      </div>
+                    </div>
+                    <div class="col-2">
+                      <div class="input-group">
+                        <input
+                          v-model="clazz.max_points"
+                          class="form-control form-control-sm"
+                          type="number"
+                          min="0"
+                          step="1"
+                          :disabled="!clazz.assigned"
+                          placeholder="Max points"
+                        />
+                        <button
+                          class="btn btn-sm btn-secondary"
+                          :disabled="!clazz.assigned"
+                          title="Set points to all assigned classes"
+                          @click.prevent="assignPointsToAll(clazz.max_points)"
+                        >
+                          <span class="iconify" data-icon="mdi:content-duplicate"></span>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </td>
+                <td>
+                  <button
+                    class="btn btn-sm p-0"
+                    title="Set same assigned date, deadline, deadline type and points to all visible classes"
+                    @click="() => assignSameToAll(clazz)"
+                  >
+                    <span class="iconify" data-icon="mdi:content-duplicate"></span>
+                  </button>
+                  <button
+                    class="btn-close"
+                    :disabled="!(clazz.assigned || clazz.deadline)"
+                    aria-label="Unassign class"
+                    @click="
+                      () => {
+                        clazz.assigned = null;
+                        clazz.deadline = null;
+                        clazz.max_points = null;
+                      }
+                    "
+                  ></button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <button
+            v-if="task && (task.classes.length > shownClasses.length || showAllClasses)"
+            class="btn p-0"
+            @click.prevent="showAllClasses = !showAllClasses"
+          >
+            <span class="iconify" data-icon="la:eye"></span> Show all classes
+          </button>
+        </div>
+
+        <div class="row">
+          <div class="col">
+            <div
+              class="input-group mb-3"
+              title="All tasks with the same plagiarism key will be checked together"
+            >
+              <span class="input-group-text">Plagiarism key:</span>
+              <input
+                v-model="task.plagiarism_key"
+                class="form-control"
+                type="text"
+                maxlength="255"
+              />
+            </div>
+          </div>
+          <div class="col">
+            <div class="input-group mb-3">
+              <span class="input-group-text">Task type:</span>
+              <select v-model="task.type" class="form-control form-control-sm">
+                <option v-if="task.type === null" :value="null">None</option>
+
+                <template v-for="type in task_types" :key="type.key">
+                  <option v-if="type.key !== null" :value="type.key">
+                    {{ type.value }}
+                  </option>
+                </template>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <div class="mb-1">
+          <Manager :taskid="task.id" />
+        </div>
+
+        <button class="btn btn-primary" @click.prevent="save">Save</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+td:not(:nth-of-type(3)) {
+  vertical-align: middle;
+  width: 1%;
+  white-space: nowrap;
+}
+
+.btn > a,
+.btn > a:visited,
+.btn > a:hover,
+.btn > a:active {
+  color: inherit;
+}
+
+.check_box_label {
+  background-color: var(--bs-body-bg);
+  color: var(--bs-body-color);
+  padding: 0.25rem 0.5rem;
+}
+
+.form-check-input.checkbox-md {
+  height: 2rem;
+  margin-top: 0;
+  background-color: #0d6efd;
+  width: 1.5rem;
+}
+</style>
diff --git a/frontend/src/Teacher/EditTask/FileManager.vue b/frontend/src/Teacher/EditTask/FileManager.vue
new file mode 100644
index 000000000..1e5292708
--- /dev/null
+++ b/frontend/src/Teacher/EditTask/FileManager.vue
@@ -0,0 +1,352 @@
+<script setup lang="ts">
+/**
+ * FileManager Component
+ *
+ * Displays a list of files in a left panel and editor.
+ * Users can:
+ * - Rename files
+ * - Create new directories
+ * - Upload files
+ * - Open configuration files
+ * - Open tests tab
+ *
+ * Opened files are displayed as tabs above the editor.
+ */
+
+import { ref, watch, triggerRef } from 'vue';
+import { fetch } from '../../api';
+import {
+  useReadableSvelteStore,
+  useWritableSvelteStore
+} from '../../utilities/useSvelteStoreInVue';
+import { clickOutside } from '../../utilities/clickOutside';
+import Editor from '../../components/Editor.vue';
+import { FileEntry } from '../../utilities/SvelteStoreTypes';
+import Tests from './Tests.vue';
+import {
+  currentOpenedFile as currentOpenedFileSvelte,
+  fs,
+  currentPath as currentPathSvelte,
+  cwd as cwdSvelte,
+  openedFiles as openedFilesSvelte
+} from '../../fs';
+
+/**
+ * @prop {Number} taskid - current task id, for reevaluate button in config.yml file
+ */
+let { taskid } = defineProps<{
+  taskid: number;
+}>();
+
+/**
+ * file list panel context menu position
+ */
+interface ContextMenu {
+  left: number;
+  top: number;
+  selected: string;
+}
+
+const vClickOutside = clickOutside;
+
+const currentPath = useReadableSvelteStore<string>(currentPathSvelte);
+const cwd = useReadableSvelteStore<FileEntry[]>(cwdSvelte);
+const currentOpenedFile = useWritableSvelteStore<string | null>(currentOpenedFileSvelte);
+const openedFiles = useWritableSvelteStore<Record<string, FileEntry>>(openedFilesSvelte);
+
+let renamingPath = ref<string | null>(null);
+let ctxMenu = ref<ContextMenu | null>(null);
+let newDirName = ref<string | boolean>(false);
+let testsActivated = ref<boolean>(false);
+
+watch(renamingPath, (newVal) => console.log(newVal));
+
+/**
+ * renames the file in the left pane if the Enter key is pressed during editing
+ */
+function finishRename(e: KeyboardEvent): void {
+  if (e.key == 'Enter') {
+    let input: HTMLInputElement = e.target as HTMLInputElement;
+    fs.rename(renamingPath.value, input.value);
+    renamingPath.value = null;
+  }
+}
+
+/**
+ * Show context menu on left click in file list
+ */
+function showCtxMenu(e: MouseEvent, path: string): void {
+  ctxMenu.value = {
+    left: e.pageX,
+    top: e.pageY,
+    selected: currentPath.value + '/' + path
+  };
+}
+
+/**
+ * Delete file/dir in specified path
+ */
+async function remove(path: string): Promise<void> {
+  await fs.remove(path);
+}
+
+function createDir(e: KeyboardEvent): void {
+  if (e.key == 'Enter') {
+    newDirName.value = false;
+    let input: HTMLInputElement = e.target as HTMLInputElement;
+    fs.mkdir(input.value);
+  }
+}
+
+async function addToUploadQueue(e: Event): Promise<void> {
+  let input: HTMLInputElement = e.target as HTMLInputElement;
+
+  if (!input.files) return;
+
+  for (const file of input.files) {
+    await fs.upload(file.name, file);
+  }
+}
+
+/**
+ * It will attempt to open the YAML configuration file;
+ * if it does not exist, it will create a new one with the default configuration.
+ */
+async function openConfigYaml(): Promise<void> {
+  const fileName = '/config.yml';
+
+  if (!(await fs.open(fileName))) {
+    fs.createFile(
+      fileName,
+      `
+# https://mrlvsb.github.io/kelvin/teachers-guide/task-configuration/pipeline
+# You can also use CTRL+Space for autocompleting
+pipeline:
+  # compile submitted source codes
+  - type: gcc
+  # flags: -Wall -Wextra -g -fsanitize=address -lm -Wno-unused-variable
+
+  # add hints from clang-tidy as comments
+  #- type: clang-tidy
+
+  # run tests
+  #- type: tests
+
+  # run custom commands
+  #- type: run
+  #  commands:
+  #    - ./main 123 | wc -l
+
+  # automatically assign points from the test results
+  #- type: auto_grader
+
+`.trim()
+    );
+
+    await fs.open(fileName);
+  }
+}
+
+async function reevaluate() {
+  await fetch(`/api/reevaluate_task/${taskid}`, { method: 'POST' });
+}
+
+/**
+ * Shows tests tab
+ */
+function openTests() {
+  testsActivated.value = true;
+  currentOpenedFile.value = null;
+}
+
+function closeTab(path: string) {
+  fs.close(path);
+  triggerRef(openedFiles);
+}
+</script>
+
+<template>
+  <div>
+    {{ currentPath }}
+  </div>
+  <div class="d-flex">
+    <div class="tree">
+      <div class="action-buttons">
+        <span @click="renamingPath = '/' + fs.createFile('newfile.txt')">
+          <span class="iconify" data-icon="bx:bxs-file-plus"></span>
+        </span>
+        <span @click="newDirName = ''">
+          <span class="iconify" data-icon="ic:sharp-create-new-folder"></span>
+        </span>
+        <span>
+          <input
+            id="manager-file-upload"
+            type="file"
+            style="display: none"
+            multiple
+            @click="
+              (e) => {
+                let input: HTMLInputElement = e.target as HTMLInputElement;
+                input.value = null;
+              }
+            "
+            @change="addToUploadQueue"
+          />
+          <label for="manager-file-upload">
+            <span class="iconify" data-icon="ic:sharp-file-upload"></span>
+          </label>
+        </span>
+        <span @click="openConfigYaml">
+          <span class="iconify" data-icon="vscode-icons:file-type-light-config"></span>
+        </span>
+        <span @click="openTests">
+          <span class="iconify" data-icon="fa6-solid:t"></span>
+        </span>
+      </div>
+      <ul>
+        <li v-if="currentPath !== '/'" @click="currentPathSvelte.up()">
+          <span class="iconify" data-icon="ic:baseline-folder"></span>
+          ..
+        </li>
+        <li v-if="newDirName !== false" class="newdir">
+          <span class="iconify" data-icon="ic:baseline-folder"></span>
+          <input type="text" autofocus @keyup.prevent="createDir" />
+        </li>
+        <li
+          v-for="inode in cwd"
+          :key="inode.name"
+          style="white-space: nowrap"
+          @contextmenu.prevent="(e) => showCtxMenu(e, inode.name)"
+        >
+          <span
+            class="iconify"
+            :data-icon="inode.type == 'dir' ? 'ic:baseline-folder' : 'ic:outline-insert-drive-file'"
+          ></span>
+          <input
+            v-if="renamingPath === currentPath + '/' + inode.name"
+            :value="inode.name"
+            autofocus
+            @keyup="finishRename"
+          />
+          <span v-else @click="fs.open(inode.name)">{{ inode.name }}</span>
+        </li>
+      </ul>
+    </div>
+    <div class="w-100" style="overflow: hidden">
+      <ul class="nav nav-tabs">
+        <li v-if="testsActivated" class="nav-item" style="cursor: pointer">
+          <span class="nav-link" :class="{ active: !currentOpenedFile }">
+            <span @click="openTests">Tests</span>
+          </span>
+        </li>
+
+        <li
+          v-for="path in Object.keys(openedFiles).filter((key) => !openedFiles[key].hide_tab)"
+          :key="path"
+          class="nav-item"
+          style="cursor: pointer"
+        >
+          <span class="nav-link" :class="{ active: path === currentOpenedFile }">
+            <span @click="currentOpenedFile = path">{{ path.split('/').slice(-1)[0] }}</span>
+            <span @click="closeTab(path)"> <span class="iconify" data-icon="fa:times"></span></span>
+          </span>
+        </li>
+      </ul>
+
+      <div class="editor-container">
+        <div
+          v-if="currentOpenedFile === '/config.yml'"
+          style="position: absolute; z-index: 3; right: 5px"
+        >
+          <button class="btn btn-link p-0" title="Reevaluate all submits" @click="reevaluate">
+            <span class="iconify" data-icon="bx:bx-refresh"></span>
+          </button>
+          <a
+            href="https://mrlvsb.github.io/kelvin/teachers-guide/task-configuration/pipeline"
+            target="_blank"
+          >
+            <span class="iconify" data-icon="entypo:help"></span>
+          </a>
+        </div>
+
+        <div :hidden="currentOpenedFile != null">
+          <Tests />
+        </div>
+
+        <Editor
+          v-if="currentOpenedFile"
+          v-model="openedFiles[currentOpenedFile].content"
+          :filename="currentOpenedFile"
+        />
+      </div>
+    </div>
+  </div>
+
+  <div
+    v-if="ctxMenu && ctxMenu.selected != '/readme.md'"
+    class="dropdown-menu show"
+    v-click-outside="() => (ctxMenu = null)"
+    :style="{ position: 'fixed', top: ctxMenu.top + 'px', left: ctxMenu.left + 'px' }"
+  >
+    <button
+      class="dropdown-item"
+      @click.prevent="
+        () => {
+          renamingPath = ctxMenu.selected;
+          ctxMenu = null;
+        }
+      "
+    >
+      <span class="iconify" data-icon="wpf:rename"></span> rename
+    </button>
+    <button
+      class="dropdown-item"
+      @click.prevent="
+        () => {
+          remove(ctxMenu.selected);
+          ctxMenu = null;
+        }
+      "
+    >
+      <span class="iconify" data-icon="wpf:delete"></span> delete
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.tree {
+  width: 200px;
+}
+
+.tree ul {
+  list-style: none;
+  padding: 0;
+}
+
+.tree ul li {
+  cursor: pointer;
+  overflow-x: hidden;
+}
+
+.newdir {
+  white-space: nowrap;
+}
+
+ul input {
+  width: max-content;
+  padding: 0px;
+}
+
+.action-buttons span {
+  cursor: pointer;
+}
+
+.nav-item span {
+  padding: 3px 6px;
+}
+
+:global(.editor-container .CodeMirror) {
+  border-top: 0;
+  min-height: 600px;
+}
+</style>
diff --git a/frontend/src/Teacher/EditTask/Tests.vue b/frontend/src/Teacher/EditTask/Tests.vue
new file mode 100644
index 000000000..1070f4469
--- /dev/null
+++ b/frontend/src/Teacher/EditTask/Tests.vue
@@ -0,0 +1,356 @@
+<script setup lang="ts">
+/**
+ * Component for test management
+ *  - shows list of loaded tests
+ *  - allow to modify them and automatically sync changes to tests.yml file
+ */
+
+import { ref, watch, reactive } from 'vue';
+import { FileEntry } from '../../utilities/SvelteStoreTypes';
+import {
+  useReadableSvelteStore,
+  useWritableSvelteStore
+} from '../../utilities/useSvelteStoreInVue';
+import Editor from '../../components/Editor.vue';
+import SyncLoader from '../../components/SyncLoader.vue';
+import yaml from 'js-yaml';
+import {
+  currentOpenedFile as currentOpenedFileSvelte,
+  fs,
+  cwd as cwdSvelte,
+  openedFiles as openedFilesSvelte
+} from '../../fs.js';
+
+const cwd = useReadableSvelteStore<FileEntry[]>(cwdSvelte);
+const openedFiles = useWritableSvelteStore<Record<string, FileEntry>>(openedFilesSvelte);
+const currentOpenedFile = useWritableSvelteStore<string>(currentOpenedFileSvelte);
+
+//indicates whether the tests have been loaded
+const loaded = ref<boolean>(false);
+
+interface Test {
+  /** autogenerated name in format 'test0' */
+  name: string;
+
+  /** user defined name of test */
+  title?: string;
+
+  /** arguments passed to the tested program */
+  args?: string;
+
+  /** input/output files */
+  files?: Record<string, string>;
+
+  /** expected exit code */
+  exit_code?: number;
+}
+
+let tests = reactive<Record<string, Test>>({});
+
+//used in form, name for input/output file to be created
+const new_test_io_file = reactive<Record<string, string>>({});
+
+/**
+ * Returns empty test with given name.
+ * Used both to load old tests and create new ones
+ *
+ * @param name name in format `test0`
+ */
+function create(name: string): Test {
+  return {
+    name: name,
+    files: reactive<Record<string, string>>({})
+  };
+}
+
+/**
+ * Creates new test, with index last_test + 1
+ */
+function add_test() {
+  const name = `test${Object.keys(tests).length}`;
+  tests[name] = create(name);
+}
+
+/**
+ * Removes test of given name and all associated input/output files
+ * @param name tame of test to delete
+ */
+async function delete_test(name: string): Promise<void> {
+  const filesToDelete = tests[name]['files'];
+
+  delete tests[name];
+
+  for (const path of Object.values(filesToDelete)) {
+    await fs.remove(path);
+  }
+
+  currentOpenedFile.value = null;
+}
+
+/**
+ * Creates a new IO file and attaches it to the test
+ * @param name test name
+ * @param shown_name name of file showed to user (e.g. file1)
+ * @param file_name name of file in FS (e.g. test0.file_in.file1)
+ */
+async function add_file(name: string, shown_name: string, file_name: string): Promise<void> {
+  const path = `${name}.${file_name}`;
+  await fs.createFile(path);
+  await fs.open(path, { hide_tab: true });
+  tests[name]['files'][shown_name] = '/' + path;
+}
+
+/**
+ * Removes one IO file
+ * @param name test to which the file belongs
+ * @param file_name name of IO file
+ */
+async function remove_file(name: string, file_name: string): Promise<void> {
+  const path = tests[name]['files'][file_name];
+  delete tests[name]['files'][file_name];
+  await fs.remove(path);
+
+  currentOpenedFile.value = null;
+}
+
+/**
+ * Creates a new IO file and attaches it to the test
+ * @param test test object
+ * @param shown_name name of file showed to user (e.g. file1)
+ * @param file_name name of file in FS (e.g. test0.file_in.file1)
+ */
+async function add_file_to_test(test: Test, shown_name: string, file_name: string): Promise<void> {
+  test['files'][shown_name] = '/' + file_name;
+  await fs.open(file_name, { hide_tab: true });
+}
+
+interface YamlTestRecord {
+  name: string;
+  title?: string;
+  args?: string[];
+  exit_code?: number;
+}
+
+/**
+ * Load all tests from 'tests.yml' file and all associated IO files
+ */
+async function load() {
+  let new_tests: Record<string, Test> = {};
+
+  if (await fs.open('tests.yml', { hide_tab: true })) {
+    const descs: YamlTestRecord[] = yaml.load(openedFiles.value['/tests.yml'].content);
+
+    if (Array.isArray(descs)) {
+      for (const test of descs) {
+        if (test.name) {
+          new_tests[test.name] = new_tests[test.name] || create(test.name);
+          if (test.args) {
+            new_tests[test.name].args = test.args.join(' ');
+          }
+          new_tests[test.name].title = test.title;
+          new_tests[test.name].exit_code = test.exit_code;
+        }
+      }
+    }
+  }
+
+  for (const inode of cwd.value) {
+    if (inode.type != 'file') {
+      continue;
+    }
+
+    const parts = inode.name.split('.');
+    const ext = parts[parts.length - 1];
+    const name = parts[0];
+    if (ext == 'out' || ext == 'in' || (ext == 'err' && parts.length == 2)) {
+      new_tests[name] = new_tests[name] || create(name);
+      await add_file_to_test(new_tests[name], 'std' + parts[1], inode.name);
+    } else if (parts.length >= 3) {
+      const dir = parts[1];
+      if (dir == 'file_in' || dir == 'file_out') {
+        new_tests[name] = new_tests[name] || create(name);
+        await add_file_to_test(new_tests[name], parts.slice(2).join('.'), inode.name);
+      }
+    }
+  }
+
+  Object.assign(tests, new_tests);
+  loaded.value = true;
+}
+
+watch(
+  tests,
+  () => {
+    if (loaded.value) save(tests);
+  },
+  { deep: true }
+);
+
+async function save(tests: Record<string, Test>) {
+  let description: Array<YamlTestRecord> = [];
+  for (const [name, test] of Object.entries(tests)) {
+    let data: YamlTestRecord = { name: name };
+    if (test.args) {
+      data.args = test.args.split(' ');
+    }
+
+    if (test.title) {
+      data.title = test.title;
+    }
+
+    if (test.exit_code) {
+      data.exit_code = test.exit_code;
+    }
+
+    if (data) {
+      description.push(data);
+    }
+  }
+
+  if (!(await fs.open('tests.yml', { hide_tab: true }))) {
+    await fs.createFile('tests.yml');
+    await fs.open('tests.yml', { hide_tab: true });
+  }
+  openedFiles.value['/tests.yml'].content = yaml.dump(description);
+}
+
+function file_sorter(a: [string, string], b: [string, string]): number {
+  const stds = ['stdin', 'stdout', 'stderr'];
+  const isStd = (name: string) => stds.indexOf(name) != -1;
+
+  let a_key: string = a[0];
+  let b_key: string = b[0];
+
+  if (isStd(a_key) && isStd(b_key)) {
+    return stds.indexOf(a_key) < stds.indexOf(b_key) ? -1 : 1;
+  }
+
+  if (isStd(a_key)) {
+    return -1;
+  }
+
+  return 1;
+}
+
+load();
+</script>
+
+<template>
+  <div v-if="loaded" class="tests ps-3">
+    <div v-for="(test, name) in tests" :key="name">
+      <h2>
+        {{ test.name }}
+
+        <span v-for="fd in ['stdin', 'stdout', 'stderr']" :key="fd">
+          <button
+            v-if="!test.files[fd]"
+            class="btn btn-sm btn-success me-1"
+            @click="add_file(test.name, fd, fd.replace('std', ''))"
+          >
+            <span class="iconify" data-icon="ant-design:plus-outlined"></span>
+            {{ fd }}
+          </button>
+        </span>
+
+        <div class="btn-group" role="group" aria-label="Basic example">
+          <input
+            type="text"
+            v-model="new_test_io_file[name]"
+            class="form-control form-control-sm"
+            placeholder="Filename"
+          />
+
+          <button
+            type="button"
+            class="btn btn-sm btn-success text-nowrap"
+            @click="
+              () => {
+                if (new_test_io_file)
+                  add_file(test.name, new_test_io_file[name], `file_in.${new_test_io_file[name]}`);
+              }
+            "
+          >
+            <span class="iconify" data-icon="ant-design:plus-outlined"></span>input
+          </button>
+          <button
+            type="button"
+            class="btn btn-sm btn-success text-nowrap"
+            @click="
+              () => {
+                if (new_test_io_file[name])
+                  add_file(
+                    test.name,
+                    new_test_io_file[name],
+                    `file_out.${new_test_io_file[name]}}`
+                  );
+              }
+            "
+          >
+            <span class="iconify" data-icon="ant-design:plus-outlined"></span>output
+          </button>
+        </div>
+        &nbsp;
+        <button class="btn btn-sm btn-danger" @click="delete_test(test.name)">
+          <span class="iconify" data-icon="humbleicons:times"></span>
+        </button>
+      </h2>
+
+      <div class="row mb-0">
+        <label class="col-sm-2 col-form-label" for="title">Title</label>
+        <input
+          v-model="test.title"
+          name="title"
+          type="text"
+          class="form-control form-control-sm col-sm-10"
+        />
+      </div>
+
+      <div class="row mb-0">
+        <label class="col-sm-2 col-form-label" for="args">Program Arguments</label>
+        <input
+          v-model="test.args"
+          name="args"
+          type="text"
+          class="form-control form-control-sm col-sm-10"
+        />
+      </div>
+
+      <div class="row mb-0">
+        <label class="col-sm-2 col-form-label" for="exit-code">Exit code</label>
+        <input
+          v-model="test.exit_code"
+          name="exit-code"
+          type="number"
+          class="form-control form-control-sm col-sm-10"
+          placeholder="Default 0"
+        />
+      </div>
+
+      <div v-for="[k, v] in Object.entries(test.files).sort(file_sorter)" :key="k">
+        <h3>
+          {{ k }}
+          <button class="btn btn-sm btn-danger" @click="remove_file(test.name, k)">
+            <span class="iconify" data-icon="humbleicons:times"></span>
+          </button>
+        </h3>
+        <Editor v-model="openedFiles[v].content" :filename="currentOpenedFile" />
+      </div>
+
+      <hr />
+    </div>
+    <button class="btn btn-success" @click="add_test()">
+      <span class="iconify" data-icon="ant-design:plus-outlined"></span>
+      Add new test
+    </button>
+  </div>
+  <div v-else class="d-flex justify-content-center">
+    <SyncLoader />
+  </div>
+</template>
+
+<style scoped>
+:global(.tests .CodeMirror) {
+  height: 200px !important;
+  min-height: 200px !important;
+}
+</style>
diff --git a/frontend/src/Teacher/EditTask/TimeRange.vue b/frontend/src/Teacher/EditTask/TimeRange.vue
new file mode 100644
index 000000000..72b713f74
--- /dev/null
+++ b/frontend/src/Teacher/EditTask/TimeRange.vue
@@ -0,0 +1,167 @@
+<script setup lang="ts">
+/**
+ * Displays two inputs used to select date range.
+ * User can make a selection using:
+ *  - calendar widget
+ *  - or by adding time from drop-down list to current value
+ */
+
+import { onMounted, watch, defineModel, ref } from 'vue';
+import flatpickr from 'flatpickr';
+
+let {
+  timeOffsetInWeek,
+  semesterBeginDate,
+  onFromDuplicateClick,
+  onToDuplicateClick,
+  onToRelativeClick
+} = defineProps<{
+  timeOffsetInWeek: number;
+  semesterBeginDate: Date;
+  onFromDuplicateClick: (date: Date) => void;
+  onToDuplicateClick: (date: Date) => void;
+  onToRelativeClick: (assigned: Date, deadline: Date) => void;
+}>();
+
+/**
+ * @model
+ *
+ * bound two variables with begin and end date
+ *
+ * @example
+ *  v-model:from-date="assigned"
+ *  v-model:to-date="deadline"
+ */
+const fromDate = defineModel<Date>('fromDate');
+const toDate = defineModel<Date>('toDate');
+
+const fromEl = ref<HTMLInputElement | null>(null);
+const toEl = ref<HTMLInputElement | null>(null);
+let instanceFrom: flatpickr.Instance, instanceTo: flatpickr.Instance;
+
+onMounted(() => {
+  if (fromEl.value && toEl.value) {
+    const opts = {
+      enableTime: true,
+      time_24hr: true,
+      altFormat: 'd. m. Y H:i',
+      altInput: true
+    };
+
+    instanceFrom = flatpickr(fromEl.value, opts);
+    instanceTo = flatpickr(toEl.value, opts);
+
+    setDatePickers();
+  }
+});
+
+function weekDate(n: number): Date {
+  let date = new Date(semesterBeginDate.getTime());
+  date.setDate(date.getDate() + 7 * n);
+  date.setSeconds(timeOffsetInWeek);
+  return date;
+}
+
+function weekStart(n: number): Date {
+  let date = new Date(semesterBeginDate.getTime());
+  date.setDate(date.getDate() + 7 * n);
+  return date;
+}
+
+function addDeadline(minutes: number): void {
+  if (!fromDate.value) {
+    fromDate.value = new Date();
+  }
+
+  let date = new Date(fromDate.value);
+  date.setMinutes(date.getMinutes() + minutes);
+  toDate.value = date;
+}
+
+function setDatePickers() {
+  if (instanceFrom) {
+    instanceTo.set('minDate', fromDate.value);
+    instanceFrom.setDate(fromDate.value);
+  }
+
+  if (instanceTo) {
+    instanceTo.setDate(toDate.value);
+    if (!fromDate.value) instanceTo._input.setAttribute('disabled', 'disabled');
+    else if (instanceTo._input.hasAttribute('disabled'))
+      instanceTo._input.removeAttribute('disabled');
+  }
+}
+
+//enable disable second input based on first one value
+watch([fromDate, toDate], setDatePickers);
+</script>
+
+<template>
+  <div class="col">
+    <div class="input-group input-group-sm">
+      <button
+        class="btn btn-primary dropdown-toggle"
+        data-bs-toggle="dropdown"
+        type="button"
+        aria-expanded="false"
+      ></button>
+      <ul class="dropdown-menu">
+        <button class="dropdown-item" @click="fromDate = new Date()">Now</button>
+        <button v-for="i in 14" :key="i" class="dropdown-item" @click="fromDate = weekDate(i)">
+          Week {{ i + 1 }}
+          <span v-if="weekStart(i) <= new Date() && new Date() <= weekStart(i + 1)">
+            <span class="iconify" data-icon="akar-icons:arrow-back"></span>
+          </span>
+        </button>
+      </ul>
+      <input ref="fromEl" v-model="fromDate" class="form-control" placeholder="Assigned" />
+      <button
+        class="btn btn-sm btn-secondary"
+        title="Set assigned date to all visible classes"
+        :disabled="!fromDate"
+        @click.prevent="onFromDuplicateClick(fromDate)"
+      >
+        <span class="iconify" data-icon="mdi:content-duplicate"></span>
+      </button>
+    </div>
+  </div>
+
+  <div class="col">
+    <div class="input-group input-group-sm">
+      <button
+        class="btn btn-primary dropdown-toggle"
+        data-bs-toggle="dropdown"
+        type="button"
+        aria-expanded="false"
+        :disabled="!fromDate"
+      ></button>
+      <ul class="dropdown-menu">
+        <button class="dropdown-item" @click="addDeadline(1 * 45)">+ 1×45 min</button>
+        <button class="dropdown-item" @click="addDeadline(30)">+ 30 min</button>
+        <button class="dropdown-item" @click="addDeadline(2 * 45)">+ 2×45 min</button>
+        <button class="dropdown-item" @click="addDeadline(3 * 45)">+ 3×45 min</button>
+        <button class="dropdown-item" @click="addDeadline(1 * 60)">+ 1×60 min</button>
+        <button class="dropdown-item" @click="addDeadline(2 * 60)">+ 2×60 min</button>
+        <button class="dropdown-item" @click="addDeadline(3 * 60)">+ 3×60 min</button>
+        <button class="dropdown-item" @click="addDeadline(60 * 24 * 7)">+ week</button>
+      </ul>
+      <input ref="toEl" v-model="toDate" class="form-control" placeholder="Deadline" />
+      <button
+        class="btn btn-sm btn-secondary"
+        title="Set deadline to all assigned classes"
+        :disabled="!toDate"
+        @click.prevent="onToDuplicateClick(toDate)"
+      >
+        <span class="iconify" data-icon="mdi:content-duplicate"></span>
+      </button>
+      <button
+        class="btn btn-sm btn-secondary"
+        title="Set relative deadline to all assigned classes"
+        :disabled="!toDate"
+        @click.prevent="onToRelativeClick(fromDate, toDate)"
+      >
+        <span class="iconify" data-icon="mdi:calendar-sync"></span>
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/Editor.vue b/frontend/src/components/Editor.vue
index 7b3a76a3d..4691b2de8 100644
--- a/frontend/src/components/Editor.vue
+++ b/frontend/src/components/Editor.vue
@@ -3,17 +3,16 @@
  * This component is used as Editor for editing file content.
  * It provides interface for adding Extensions, which
  * can for example add custom linting or hinting.
- * Currently it is nowhere available, since integration
- * would need to rewrite much more components.
  */
 
 import CodeMirror, { EditorFromTextArea, type EditorConfiguration } from 'codemirror';
-import { onMounted, ref, watch } from 'vue';
+import { markRaw, ref, watch, onUnmounted } from 'vue';
 import { theme, ThemeValue } from '../utilities/theme';
 import { EditorExtension, ExtraKeys } from '../utilities/EditorUtils';
 import { getExtension } from '../utilities/EditorUtils';
+import { lintPipeline } from '../PipelineValidation.js';
 
-const editorContent = defineModel<string>('value');
+const editorContent = defineModel<string>();
 
 let {
   autofocus = false,
@@ -136,7 +135,6 @@ const handleSetup = (editor: CodeMirror.Editor) => {
 };
 
 const DEFAULT_KEY_MAP = {
-  'Ctrl-Space': handleHint,
   F11: function (cm) {
     cm.setOption('fullScreen', !cm.getOption('fullScreen'));
   },
@@ -150,25 +148,34 @@ const DEFAULT_KEY_MAP = {
   }
 } satisfies ExtraKeys<EditorConfiguration['extraKeys']>;
 
-//initialize editor
-const initializeEditor = () => {
-  editor = CodeMirror.fromTextArea(editorElement.value, {
-    mode: toMode(filename),
-    filename,
-    autofocus,
-    lint: lint ? handleLint : lint,
-    lineWrapping: wrap,
-    gutters: ['CodeMirror-lint-markers'],
-    spellcheck,
-    theme: getThemeName(theme.value),
-    inputStyle: 'contenteditable',
-    readOnly: disabled,
-    tabSize: 2,
-    extraKeys: {
+function setUpOptions() {
+  if (editor) {
+    editor.setOption('filename', filename);
+    editor.setOption('lint', filename == '/config.yml' ? lintPipeline : lint ? handleLint : false);
+    editor.setOption('mode', toMode(filename));
+    editor.setOption('readOnly', disabled);
+    editor.setOption('extraKeys', {
+      'Ctrl-Space': filename == '/config.yml' ? 'autocomplete' : handleHint,
       ...DEFAULT_KEY_MAP,
       ...extraKeys
-    }
-  });
+    });
+  }
+}
+
+//initialize editor
+const initializeEditor = () => {
+  //https://stackoverflow.com/questions/67686617/codemirror-on-vue3-has-a-problem-when-setvalue-is-kicked
+  editor = markRaw(
+    CodeMirror.fromTextArea(editorElement.value, {
+      autofocus,
+      lineWrapping: wrap,
+      gutters: ['CodeMirror-lint-markers'],
+      spellcheck,
+      theme: getThemeName(theme.value),
+      inputStyle: 'contenteditable',
+      tabSize: 2
+    })
+  );
 
   //call setup first time, because editor is initialized
   handleSetup(editor);
@@ -176,27 +183,28 @@ const initializeEditor = () => {
   editor.on('change', (editor) => {
     editorContent.value = editor.getValue();
   });
+
+  if (editorContent.value) editor.setValue(editorContent.value);
+
+  setUpOptions();
 };
 
-onMounted(initializeEditor);
+//onMounted(initializeEditor);
+
+watch(editorElement, (newEditorTag) => {
+  if (newEditorTag && !editor) {
+    initializeEditor();
+  }
+});
 
 //update editor based on value in model
 watch(editorContent, (value) => {
   if (value != editor.getValue()) {
     editor.setValue(value);
+    setUpOptions();
   }
 });
 
-//re-initialize editor on filename change
-watch(
-  () => filename,
-  () => {
-    //remove the wrapper element to avoid multiple editors
-    editor.getWrapperElement().remove();
-    initializeEditor();
-  }
-);
-
 //because props are not ref, we need to wrap them into getter functions to be reactive
 watch(
   [theme, () => autofocus, () => disabled, () => extraKeys],
@@ -210,10 +218,20 @@ watch(
     });
   }
 );
+
+onUnmounted(() => {
+  if (editor) {
+    editor.toTextArea();
+    //editor = null;
+    editorElement.value = '';
+  }
+});
 </script>
 
 <template>
-  <textarea ref="editorElement" class="form-control" :value="editorContent"></textarea>
+  <div :class="{ disabled: disabled }">
+    <textarea ref="editorElement" class="form-control"></textarea>
+  </div>
 </template>
 
 <style global>
diff --git a/frontend/src/components/Loader.vue b/frontend/src/components/Loader.vue
deleted file mode 100644
index 26243548c..000000000
--- a/frontend/src/components/Loader.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<script setup lang="ts">
-/**
- * Generate array with range of numbers from start
- *
- * @param size size of the array
- * @param start starting number
- *
- * @returns array of numbers from start to start + size
- */
-const generateRange = (size: number, start = 0) => {
-  return Array.from({ length: size }).map((_, i) => i + start);
-};
-
-const size = 60;
-const color = '#FF3E00';
-const unit = 'px';
-</script>
-
-<template>
-  <div v-for="i in generateRange(3, 1)" :key="i" class="wrapper" :style="`--size:${size}${unit}`">
-    <div
-      class="dot"
-      :style="`--dotSize:${size * 0.25}${unit}; --color:${color}; animation-delay:  ${i * 0.07}s;`"
-    />
-  </div>
-</template>
-
-<style scoped>
-.wrapper {
-  height: var(--size);
-  width: var(--size);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.dot {
-  height: var(--dotSize);
-  width: var(--dotSize);
-  background-color: var(--color);
-  margin: 2px;
-  display: inline-block;
-  border-radius: 100%;
-  animation: sync 0.6s ease-in-out infinite alternate both running;
-}
-
-@-webkit-keyframes sync {
-  33% {
-    -webkit-transform: translateY(10px);
-    transform: translateY(10px);
-  }
-
-  66% {
-    -webkit-transform: translateY(-10px);
-    transform: translateY(-10px);
-  }
-
-  100% {
-    -webkit-transform: translateY(0);
-    transform: translateY(0);
-  }
-}
-
-@keyframes sync {
-  33% {
-    -webkit-transform: translateY(10px);
-    transform: translateY(10px);
-  }
-
-  66% {
-    -webkit-transform: translateY(-10px);
-    transform: translateY(-10px);
-  }
-
-  100% {
-    -webkit-transform: translateY(0);
-    transform: translateY(0);
-  }
-}
-</style>
diff --git a/frontend/src/components/SuspensionWrapper.vue b/frontend/src/components/SuspensionWrapper.vue
index 60b6b4067..addbc1cff 100644
--- a/frontend/src/components/SuspensionWrapper.vue
+++ b/frontend/src/components/SuspensionWrapper.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Loader from './Loader.vue';
+import SyncLoader from '../components/SyncLoader.vue';
 
 defineProps<{
   childComponent: object;
@@ -11,7 +11,7 @@ defineProps<{
     <component :is="childComponent" v-bind="$attrs" />
     <template #fallback>
       <div class="d-flex justify-content-center loading-animation">
-        <Loader />
+        <SyncLoader />
       </div>
     </template>
   </Suspense>
diff --git a/frontend/src/fs.js b/frontend/src/fs.js
index b464491c6..8f825147b 100644
--- a/frontend/src/fs.js
+++ b/frontend/src/fs.js
@@ -69,7 +69,7 @@ function createFs() {
     return {
         subscribe,
         setRoot: (files, endpoint_url) => {
-            openedFiles.set([]);
+            openedFiles.set({});
             currentOpenedFile.set(null);
             currentPath.set('/');
             set({
@@ -264,7 +264,7 @@ function createPath() {
 }
 
 function createOpenedFiles() {
-    const { subscribe, set, update } = writable([]);
+    const { subscribe, set, update } = writable({});
 
     return {
         subscribe,
@@ -305,6 +305,7 @@ export const cwd = derived(
                     return a.type < b.type ? -1 : 1;
                 });
         }
+
         set(map(getInode($path, $fs['root'])['files']));
     },
     []
diff --git a/frontend/src/main.js b/frontend/src/main.js
index e4c1ff637..9f2451e91 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -162,6 +162,7 @@ import QuizSubmitList from './Quiz/Lists/QuizSubmitList.vue';
 import MarkButton from './components/MarkButton.vue';
 import TaskDetail from './Student/TaskDetail.vue';
 import SyncLoader from './components/SyncLoader.vue';
+import EditTask from './Teacher/EditTask/EditTask.vue';
 
 /**
  * Register new Vue component as a custom element.
@@ -235,7 +236,13 @@ function mountMarkButton(id, props) {
     app.mount(id);
 }
 
+function mountEditTask(id, props) {
+    const app = createApp(EditTask, props);
+    app.mount(id);
+}
+
 window.mountStudentPage = mountStudentPage;
 window.mountQuiz = mountQuiz;
 window.mountQuizEdit = mountQuizEdit;
 window.mountMarkButton = mountMarkButton;
+window.mountEditTask = mountEditTask;
diff --git a/frontend/src/utilities/SvelteStoreTypes.ts b/frontend/src/utilities/SvelteStoreTypes.ts
new file mode 100644
index 000000000..3f97a86fb
--- /dev/null
+++ b/frontend/src/utilities/SvelteStoreTypes.ts
@@ -0,0 +1,24 @@
+export interface FileEntry {
+    name?: string;
+    type: 'file' | 'dir';
+    hide_tab?: boolean;
+    content?: string;
+    files?: Record<string, FileEntry>;
+}
+
+export interface User {
+    id: number;
+    username: string;
+    name: string;
+    teacher: boolean;
+    is_superuser: boolean;
+    is_staff: boolean;
+}
+
+export interface Semester {
+    begin: Date;
+    year: number;
+    winter: boolean;
+    abbr: string;
+    inbus_semester_id: number;
+}
diff --git a/frontend/src/utilities/clickOutside.ts b/frontend/src/utilities/clickOutside.ts
new file mode 100644
index 000000000..9673f250a
--- /dev/null
+++ b/frontend/src/utilities/clickOutside.ts
@@ -0,0 +1,39 @@
+import { Directive } from 'vue';
+
+interface HTMLElementWithHandler extends HTMLElement {
+    _clickOutsideHandler?: (event: MouseEvent) => void;
+}
+
+/**
+ * Custom directive used in vue components to detect clicks outside HTML tag.
+ * Is it necessary to use lambda as function as evaluation is not lazy.
+ *
+ * @example
+ *  <script>
+ *  import { clickOutside } from 'clickOutside';
+ *  const vClickOutside = clickOutside;
+ *  </script>
+ *
+ *  <template>
+ *  <tag v-click-outside="() => { 'your code here' } />
+ *  </template>
+ *
+ */
+export const clickOutside: Directive = {
+    mounted(node: HTMLElementWithHandler, binding) {
+        const handler = (event: MouseEvent) => {
+            if (node && !node.contains(event.target as Node)) {
+                binding.value(event);
+            }
+        };
+
+        //save handler to remove it on unmounted
+        node._clickOutsideHandler = handler;
+
+        document.addEventListener('click', handler, true);
+    },
+
+    unmounted(node: HTMLElementWithHandler) {
+        document.removeEventListener('click', node._clickOutsideHandler, true);
+    }
+};
diff --git a/frontend/src/utilities/useSvelteStoreInVue.ts b/frontend/src/utilities/useSvelteStoreInVue.ts
new file mode 100644
index 000000000..718a79d8d
--- /dev/null
+++ b/frontend/src/utilities/useSvelteStoreInVue.ts
@@ -0,0 +1,46 @@
+import { ref, onUnmounted, Ref, watch } from 'vue';
+import { Readable, Unsubscriber, Writable } from 'svelte/store';
+
+/**
+ * Wrap readable Svelte store so it becomes reactive in Vue.
+ * Readable means one way data flow Svelte -> Vue, changing ref value has no effect
+ *
+ * @param store - Svelte store
+ * @returns Vue Ref that updates whenever the Svelte store updates
+ */
+export function useReadableSvelteStore<T>(store: Readable<T>): Ref<T> {
+    const value = ref<T>();
+
+    const unsubscribe: Unsubscriber = store.subscribe((v: T) => {
+        if (v !== null && typeof v === 'object') {
+            value.value = Array.isArray(v) ? ([...v] as T) : ({ ...v } as T);
+        } else {
+            value.value = v;
+        }
+    });
+
+    onUnmounted(unsubscribe);
+
+    return value;
+}
+
+/**
+ * Wrap Writeable Svelte store so it becomes reactive in Vue.
+ * This creates both way data binding
+ *
+ * @param store - Svelte store
+ * @returns Vue Ref that updates whenever the Svelte store updates, changing its value change store state
+ */
+export function useWritableSvelteStore<T>(store: Writable<T>): Ref<T> {
+    const value = ref<T>();
+
+    const unsubscribe: Unsubscriber = store.subscribe((v: T) => {
+        value.value = v;
+    });
+
+    watch(value, (v) => store.set(v), { deep: true });
+
+    onUnmounted(unsubscribe);
+
+    return value;
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index fcb8d2728..4806421db 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -2,7 +2,7 @@
     "compilerOptions": {
         "allowJs": true,
         "target": "ES2020",
-        "lib": ["ES2020", "DOM"],
+        "lib": ["ES2020", "DOM", "DOM.Iterable"],
         "moduleResolution": "Bundler",
         "module": "Preserve",
         "noEmit": true,
diff --git a/templates/web/edit_task.html b/templates/web/edit_task.html
new file mode 100644
index 000000000..e60390c98
--- /dev/null
+++ b/templates/web/edit_task.html
@@ -0,0 +1,25 @@
+{% extends 'web/layout.html' %}
+{% load static %}
+
+{% block fullcontent %}
+    <div id="edit-task"></div>
+{% endblock %}
+
+{% block script %}
+    <script id="initial-props-data" type="application/json">
+        {% if task_id %}
+            { "id": "{{ task_id }}" }
+        {% elif subject_name %}
+            { "subject": "{{ subject_name }}" }
+        {% else %}
+            {}
+        {% endif %}
+    </script>
+
+    <script>
+        const dataElement = document.getElementById('initial-props-data');
+        const routeData = JSON.parse(dataElement.textContent);
+
+        mountEditTask("#edit-task", {params: routeData});
+    </script>
+{% endblock %}
diff --git a/templates/web/task_detail.html b/templates/web/task_detail.html
index 5d6520019..907d1ebde 100644
--- a/templates/web/task_detail.html
+++ b/templates/web/task_detail.html
@@ -13,7 +13,7 @@
 <h2>
     {{ task.name }}
     {% if is_teacher %}
-    <a href="/#/task/edit/{{task.id}}" class="text-muted" title="Edit task"><span class="iconify" data-icon="fa-solid:pen"></span></a>
+    <a href="/task/edit/{{task.id}}" class="text-muted" title="Edit task"><span class="iconify" data-icon="fa-solid:pen"></span></a>
     {% endif %}
 </h2>
 {% if teacher %}
diff --git a/web/urls.py b/web/urls.py
index 51772c957..3a460b466 100644
--- a/web/urls.py
+++ b/web/urls.py
@@ -32,6 +32,16 @@
         student_view.submit_download,
         name="submit_download",
     ),
+    path(
+        "task/edit/<int:task_id>/",
+        student_view.edit_task,
+        name="edit_task",
+    ),
+    path(
+        "task/add/<str:subject_name>/",
+        student_view.edit_new_task,
+        name="edit_task",
+    ),
     path(
         "task/<int:assignment_id>/<str:login>/<int:submit_num>/result", student_view.upload_results
     ),
diff --git a/web/views/student.py b/web/views/student.py
index b5c203678..0f4d77af1 100644
--- a/web/views/student.py
+++ b/web/views/student.py
@@ -1085,3 +1085,13 @@ def quiz_asset(request: HttpRequest, quiz_src: str, asset_path: str) -> HttpResp
             return resp
     except FileNotFoundError:
         raise HttpException404()
+
+
+@user_passes_test(is_teacher)
+def edit_task(request, task_id):
+    return render(request, "web/edit_task.html", {"task_id": task_id})
+
+
+@user_passes_test(is_teacher)
+def edit_new_task(request, subject_name):
+    return render(request, "web/edit_task.html", {"subject_name": subject_name})