diff --git a/cypress/e2e/course_creation.cy.js b/cypress/e2e/course_creation.cy.js
index 3e28b0a51..8d6f60f0a 100644
--- a/cypress/e2e/course_creation.cy.js
+++ b/cypress/e2e/course_creation.cy.js
@@ -31,12 +31,35 @@ describe("Course Creation", () => {
.contains("Preview Video")
.type("https://www.youtube.com/embed/-LPmw2Znl2c");
cy.get("[id=tags]").type("Learning{enter}Frappe{enter}ERPNext{enter}");
- cy.get(".search-input").click().type("frappe");
- cy.wait(1000);
+ cy.get("label")
+ .contains("Category")
+ .parent()
+ .within(() => {
+ cy.get("button").click();
+ });
cy.get("[id^=headlessui-combobox-option-")
.should("be.visible")
.first()
.click();
+
+ /* Instructor */
+ cy.get("label")
+ .contains("Instructors")
+ .parent()
+ .within(() => {
+ cy.get("input").click().type("frappe");
+ cy.get("input")
+ .invoke("attr", "aria-controls")
+ .as("instructor_list_id");
+ });
+ cy.get("@instructor_list_id").then((instructor_list_id) => {
+ cy.get(`[id^=${instructor_list_id}`)
+ .should("be.visible")
+ .within(() => {
+ cy.get("[id^=headlessui-combobox-option-").first().click();
+ });
+ });
+
cy.get("label").contains("Published").click();
cy.get("label").contains("Published On").type("2021-01-01");
cy.button("Save").click();
diff --git a/frontend/package.json b/frontend/package.json
index 5cf5af513..e5c1e94c5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -19,6 +19,7 @@
"@editorjs/paragraph": "^2.11.3",
"@editorjs/simple-image": "^1.6.0",
"chart.js": "^4.4.1",
+ "codemirror-editor-vue3": "^2.8.0",
"dayjs": "^1.11.6",
"feather-icons": "^4.28.0",
"frappe-ui": "^0.1.69",
diff --git a/frontend/src/components/Categories.vue b/frontend/src/components/Categories.vue
new file mode 100644
index 000000000..20f9561e4
--- /dev/null
+++ b/frontend/src/components/Categories.vue
@@ -0,0 +1,151 @@
+
+