From 0748077da9ec1619cdef0cda98f30ba5f6ae1a69 Mon Sep 17 00:00:00 2001
From: Stephan Krusche <krusche@in.tum.de>
Date: Sat, 24 Aug 2024 00:30:40 +0300
Subject: [PATCH 01/15] Development: Add performance guidelines and integrated
 them into the PR template

---
 .github/PULL_REQUEST_TEMPLATE.md    |  13 +-
 docs/.readthedocs.yaml              |   2 +-
 docs/README.md                      |   4 +-
 docs/dev/guidelines.rst             |   1 +
 docs/dev/guidelines/database.rst    |   8 +-
 docs/dev/guidelines/performance.rst | 219 ++++++++++++++++++++++++++++
 docs/dev/guidelines/server.rst      |   8 +-
 docs/requirements.txt               |   4 +-
 8 files changed, 241 insertions(+), 18 deletions(-)
 create mode 100644 docs/dev/guidelines/performance.rst

diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 8cd968c38187..7e405ef32689 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -13,7 +13,8 @@
 
 
 #### Server
-- [ ] **Important**: I implemented the changes with a very good performance and prevented too many (unnecessary) database calls.
+- [ ] **Important**: I implemented the changes with a [very good performance](https://docs.artemis.cit.tum.de/dev/guidelines/performance/) and prevented too many (unnecessary) and too complex database calls.
+- [ ] I **strictly** followed the principle of **data economy** for all database calls.
 - [ ] I **strictly** followed the [server coding and design guidelines](https://docs.artemis.cit.tum.de/dev/guidelines/server/).
 - [ ] I added multiple integration tests (Spring) related to the features (with a high test coverage).
 - [ ] I added pre-authorization annotations according to the [guidelines](https://docs.artemis.cit.tum.de/dev/guidelines/server/#rest-endpoint-best-practices-for-authorization) and checked the course groups for all new REST Calls (security).
@@ -21,7 +22,8 @@
 
 
 #### Client
-- [ ] **Important**: I implemented the changes with a very good performance, prevented too many (unnecessary) REST calls and made sure the UI is responsive, even with large data.
+- [ ] **Important**: I implemented the changes with a very good performance, prevented too many (unnecessary) REST calls and made sure the UI is responsive, even with large data (e.g. using paging).
+- [ ] I **strictly** followed the principle of **data economy** for all client-server REST calls.
 - [ ] I **strictly** followed the [client coding and design guidelines](https://docs.artemis.cit.tum.de/dev/guidelines/client/).
 - [ ] Following the [theming guidelines](https://docs.artemis.cit.tum.de/dev/guidelines/client-design/), I specified colors only in the theming variable files and checked that the changes look consistent in both the light and the dark theme.
 - [ ] I added multiple integration tests (Jest) related to the features (with a high test coverage), while following the [test guidelines](https://docs.artemis.cit.tum.de/dev/guidelines/client-tests/).
@@ -92,8 +94,8 @@ Prerequisites:
 <!-- All PRs that might affect the exam mode (e.g. change a client component that is also used in the exam mode) need an additional verification that the exam mode still works. -->
 
 #### Performance Review
-- [ ] I (as a reviewer) confirm that the client changes (in particular related to REST calls and UI responsiveness) are implemented with a very good performance 
-- [ ] I (as a reviewer) confirm that the server changes (in particular related to database calls) are implemented with a very good performance
+- [ ] I (as a reviewer) confirm that the client changes (in particular related to REST calls and UI responsiveness) are implemented with a very good performance even for very large courses with more than 2000 students.
+- [ ] I (as a reviewer) confirm that the server changes (in particular related to database calls) are implemented with a very good performance even for very large courses with more than 2000 students.
 #### Code Review
 - [ ] Code Review 1
 - [ ] Code Review 2
@@ -103,6 +105,9 @@ Prerequisites:
 #### Exam Mode Test
 - [ ] Test 1
 - [ ] Test 2
+#### Performance Tests
+- [ ] Test 1
+- [ ] Test 2
 
 ### Test Coverage
 <!-- Please add the test coverages for all changed files here. You can see this when executing the tests locally (see build.gradle and package.json) or when looking into the corresponding Bamboo build plan. -->
diff --git a/docs/.readthedocs.yaml b/docs/.readthedocs.yaml
index 9522486c382b..4e14204d7703 100644
--- a/docs/.readthedocs.yaml
+++ b/docs/.readthedocs.yaml
@@ -4,7 +4,7 @@ version: 2
 build:
   os: ubuntu-22.04
   tools:
-    python: "3.10"
+    python: "3.12"
 sphinx:
   fail_on_warning: true
 python:
diff --git a/docs/README.md b/docs/README.md
index aaf6ac4ae190..a806a39d5ef5 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -60,11 +60,11 @@ RtD will build and deploy changes automatically.
 You can install Sphinx using `pip` or choose a system-wide installation instead.
 When using pip, consider using [Python virtual environments].
 ```bash
-pip install -r requirements.txt
+pip install -r requirements.txt --break-system-packages
 ```
 or
 ```bash
-pip3 install -r requirements.txt
+pip3 install -r requirements.txt --break-system-packages
 ```
 The [Installing Sphinx] documentation explains more install options.
 For macOS, it is recommended to install it using homebrew:
diff --git a/docs/dev/guidelines.rst b/docs/dev/guidelines.rst
index b53f26746d0d..8574b339f28d 100644
--- a/docs/dev/guidelines.rst
+++ b/docs/dev/guidelines.rst
@@ -7,6 +7,7 @@ Coding and design guidelines
    :includehidden:
    :maxdepth: 3
 
+   guidelines/performance
    guidelines/server
    guidelines/server-tests
    guidelines/client
diff --git a/docs/dev/guidelines/database.rst b/docs/dev/guidelines/database.rst
index 7898ab2caa33..0c7119159a9d 100644
--- a/docs/dev/guidelines/database.rst
+++ b/docs/dev/guidelines/database.rst
@@ -1,8 +1,6 @@
-**********************
-Database Relationships
-**********************
-
-WORK IN PROGRESS
+********
+Database
+********
 
 1. Retrieving and Building Objects
 ==================================
diff --git a/docs/dev/guidelines/performance.rst b/docs/dev/guidelines/performance.rst
new file mode 100644
index 000000000000..192f3dc34739
--- /dev/null
+++ b/docs/dev/guidelines/performance.rst
@@ -0,0 +1,219 @@
+***********
+Performance
+***********
+
+These guidelines focus on optimizing the performance of Spring Boot applications using Hibernate, with an emphasis on data economy, large-scale testing, paging, and general SQL database best practices. You can find more best practices in the `Database Guidelines <database.html>`_ section.
+
+1. Data Economy
+===============
+
+**Database-Level Filtering**
+
+Ensure that all filtering is done at the database level rather than in memory. This approach minimizes data transfer to the application and reduces memory usage.
+
+Example:
+
+.. code-block:: java
+
+   @Query("""
+          SELECT e
+          FROM Exercise e
+          WHERE e.course.id = :courseId
+              AND e.releaseDate >= :releaseDate
+          """)
+   List<Exercise> findExercisesByCourseAndReleaseDate(@Param("courseId") Long courseId, @Param("releaseDate") ZonedDateTime releaseDate);
+
+**Projections and DTOs**
+
+When only a subset of fields is needed, use projections or Data Transfer Objects (DTOs) instead of fetching entire entities. This reduces the amount of data loaded and improves query performance.
+
+Example:
+
+.. code-block:: java
+
+   @Query("""
+          SELECT new com.example.dto.ExerciseDTO(e.id, e.title)
+          FROM Exercise e
+          WHERE e.course.id = :courseId
+          AND e.releaseDate >= :releaseDate
+          """)
+   List<ExerciseDTO> findExerciseDTOsByCourseAndReleaseDate(@Param("courseId") Long courseId, @Param("releaseDate") ZonedDateTime releaseDate);
+
+2. Large Scale Testing
+=======================
+
+**Test with Realistic Data Loads**
+
+Given that courses can have up to 2,000 students, simulate this scale during testing to identify potential performance bottlenecks when handling large amounts of data.
+
+**Benchmarking**
+
+Perform load testing to ensure that the application can handle the expected volume of data efficiently.
+
+Example:
+
+Use tools like JMeter or Gatling to simulate concurrent users and large datasets.
+
+3. Paging
+=========
+
+**Implement Paging for Large Results**
+
+For queries that return large datasets, implement pagination to avoid loading too much data into memory at once.
+
+Example:
+
+.. code-block:: java
+
+   Page<Exercise> findByCourseId(Long courseId, Pageable pageable);
+
+**Caution with Collection Fetching and Pagination**
+
+Avoid combining `LEFT JOIN FETCH` with pagination, as this can cause performance issues or even fail due to the Cartesian Product problem.
+
+Example:
+
+Instead of:
+
+.. code-block:: java
+
+   @Query("""
+          SELECT c
+          FROM Course c
+              LEFT JOIN FETCH c.exercises
+          WHERE c.id = :courseId
+          """)
+   Page<Course> findCourseWithExercises(@Param("courseId") Long courseId, Pageable pageable);
+
+Do:
+
+.. code-block:: java
+
+   @Query("""
+          SELECT c
+          FROM Course c
+          WHERE c.id = :courseId
+          """)
+   Course findCourseById(@Param("courseId") Long courseId);
+
+   // Fetch exercises in a separate query if needed
+   @Query("""
+          SELECT e
+          FROM Exercise e
+          WHERE e.course.id = :courseId
+          """)
+   List<Exercise> findExercisesByCourseId(@Param("courseId") Long courseId);
+
+You can find out more on https://vladmihalcea.com/hibernate-query-fail-on-pagination-over-collection-fetch
+
+4. Avoiding the N+1 Issue
+=========================
+
+**Eager Fetching and Left Join Fetch**
+
+The N+1 query issue occurs when lazy-loaded collections cause multiple queries to be executed — one for the parent entity and additional queries for each related entity. To avoid this issue, consider using eager fetching or `JOIN FETCH` for collections that are critical to performance.
+
+Example:
+
+.. code-block:: java
+
+   @Query("""
+          SELECT e
+          FROM Exercise e
+          JOIN FETCH e.submissions
+          WHERE e.course.id = :courseId
+          """)
+   List<Exercise> findExercisesWithSubmissions(@Param("courseId") Long courseId);
+
+In this example, the query fetches exercises along with their submissions in a single query, avoiding the N+1 problem. Be cautious, however, as fetching too many collections eagerly can lead to performance degradation due to large result sets.
+
+
+5. Optimal Use of Left Join Fetch
+=================================
+
+**Balance Between Queries**
+
+While reducing the number of queries by using `LEFT JOIN FETCH` is often beneficial, overusing this strategy can lead to performance issues, especially when fetching multiple `OneToMany` relationships. As a best practice, avoid fetching more than three `OneToMany` collections in a single query.
+
+Example:
+
+.. code-block:: java
+
+   @Query("""
+          SELECT c
+          FROM Course c
+              LEFT JOIN FETCH c.exercises e
+              LEFT JOIN FETCH e.participations
+          WHERE c.id = :courseId
+          """)
+   Course findCourseWithExercisesAndParticipations(@Param("courseId") Long courseId);
+
+This query efficiently fetches a course with its exercises and their submissions. However, if more collections are added to the fetch, consider splitting the query into multiple parts to prevent large result sets and excessive memory usage.
+
+**Selective Fetching**
+
+Use lazy loading by default, and override with `JOIN FETCH` only when necessary for performance-critical queries. This approach minimizes the risk of performance degradation due to large query results.
+
+Example:
+
+.. code-block:: java
+
+   @Entity
+   public class Exercise {
+
+       @OneToMany(fetch = FetchType.LAZY, mappedBy = "exercise")
+       private List<Participation> participations;
+
+       // Other fields and methods
+   }
+
+By default, participations are lazily loaded. When you need to fetch them, use a specific `JOIN FETCH` query only in performance-sensitive situations. Alternatively, consider using ``@EntityGraph`` to define fetch plans for specific queries.
+
+6. General SQL Database Best Practices
+======================================
+
+**Indexing**
+
+Indexes are critical for query performance, especially on columns that are frequently used in `WHERE` clauses, `JOIN` conditions, or are sorted. Ensure that all key fields, such as `releaseDate` and `courseId`, are properly indexed.
+
+Example:
+
+Create an index on the `releaseDate` column to speed up queries filtering exercises by date:
+
+.. code-block:: sql
+
+   CREATE INDEX idx_exercise_release_date ON exercise(release_date);
+
+**Normalization vs. Denormalization**
+
+While normalization reduces data redundancy, it can lead to complex queries with multiple joins. In scenarios where read performance is critical, consider denormalizing certain tables to reduce the number of joins. However, always balance this against potential issues such as data inconsistency and increased storage requirements.
+
+**Use of Foreign Keys**
+
+Maintain foreign key constraints to enforce data integrity. However, be aware of the potential performance impact on insert, update, and delete operations in high-load scenarios. Proper indexing can help mitigate these effects.
+
+Example:
+
+.. code-block:: sql
+
+   ALTER TABLE submission ADD CONSTRAINT fk_exercise FOREIGN KEY (exercise_id) REFERENCES exercise(id);
+
+This foreign key ensures that submissions are always linked to a valid exercise, maintaining data integrity.
+
+**Query Optimization**
+
+Regularly review and optimize SQL queries to ensure they are performing efficiently. Use tools like `EXPLAIN` to analyze query execution plans and make adjustments where necessary.
+
+Example:
+
+.. code-block:: sql
+
+   EXPLAIN SELECT * FROM exercise WHERE course_id = 1 AND release_date > '2024-01-01';
+
+Use the `EXPLAIN` output to identify slow-running queries and optimize them by adding indexes, rewriting queries, or adjusting table structures.
+
+**Avoid Transactions**
+
+Transactions are generally very slow and should be avoided when possible.
+
+By following these best practices, you can build Spring Boot applications with Hibernate that are optimized for performance, even under the demands of large-scale data processing.
diff --git a/docs/dev/guidelines/server.rst b/docs/dev/guidelines/server.rst
index 9e5a8ce068de..a4e510f362b0 100644
--- a/docs/dev/guidelines/server.rst
+++ b/docs/dev/guidelines/server.rst
@@ -99,7 +99,7 @@ Avoid code duplication. If we cannot reuse a method elsewhere, then the method i
 8. Comments
 ===========
 
-Only write comments for complicated algorithms, to help other developers better understand them. We should only add a comment, if our code is not self-explanatory.
+Always add JavaDoc and inline comments to help other developers better understand the code and the rationale behind it. ChatGPT can be a great help. It can generate comments for you, but you should always check them and adjust them to your needs. Prefer more extensive comments and documentation and avoid useless and non sense documentation. Comments should always be in English.
 
 9. Utility
 ==========
@@ -121,10 +121,10 @@ It gets activated when a particular jar file is detected on the classpath. The s
 
 * RestControllers should be stateless.
 * RestControllers are by default singletons.
-* RestControllers should not execute business logic but rely on delegation.
-* RestControllers should deal with the HTTP layer of the application.
+* RestControllers should not execute business logic but rely on delegation to ``@Service`` classes.
+* RestControllers should deal with the HTTP layer of the application, handle access control, input data validation, output data cleanup (if necessary) and error handling.
 * RestControllers should be oriented around a use-case/business-capability.
-* RestControllers should return DTOs that are as small as possible
+* RestControllers must always return DTOs that are as small as possible (please focus on data economy to improve performance and follow data privacy principles).
 
 Route naming conventions:
 
diff --git a/docs/requirements.txt b/docs/requirements.txt
index 980c9ef308b6..d7f6f239f035 100644
--- a/docs/requirements.txt
+++ b/docs/requirements.txt
@@ -1,4 +1,4 @@
-Sphinx==7.2.6
+Sphinx==7.4.7
 sphinx-rtd-theme==2.0.0
-sphinx-autobuild==2024.2.4
+sphinx-autobuild==2024.04.16
 sphinxcontrib-bibtex==2.6.2

From 5929e7fc0a813901de548e6422ccebd2085d4573 Mon Sep 17 00:00:00 2001
From: Patrik Zander <38403547+pzdr7@users.noreply.github.com>
Date: Sat, 24 Aug 2024 17:48:33 +0200
Subject: [PATCH 02/15] General: Replace the remaining markdown editors with
 Monaco (#9230)

---
 .../legal-document-update.component.html      |  15 +-
 .../legal/legal-document-update.component.ts  |  39 +--
 .../knowledge-area-edit.component.html        |   2 +-
 ...tandardized-competency-edit.component.html |   2 +-
 ...ardized-competency-management.component.ts |  11 +-
 .../course/competencies/competency.module.ts  |   2 +
 ...mmon-course-competency-form.component.html |   2 +-
 ...common-course-competency-form.component.ts |  12 +-
 ...tency-recommendation-detail.component.html |   2 +-
 .../course/manage/course-management.module.ts |   2 +
 .../manage/course-update.component.html       |   4 +-
 .../tutorial-groups-management.module.ts      |   3 +
 .../tutorial-group-form.component.html        |   2 +-
 ...e-announcement-create-modal.component.html |   7 +-
 ...ive-announcement-create-modal.component.ts |  23 +-
 .../manage/exams/exam-update.component.html   |   8 +-
 ...file-upload-exercise-update.component.html |  10 +-
 .../file-upload-exercise-update.component.ts  |   9 +-
 .../modeling-exercise-update.component.html   |  10 +-
 .../modeling-exercise-update.component.ts     |   9 +-
 ...ercise-editable-instruction.component.html |   2 +
 ...drag-and-drop-question-edit.component.html |  15 +-
 .../drag-and-drop-question-edit.component.ts  |  34 +--
 ...ltiple-choice-question-edit.component.html |  17 +-
 ...multiple-choice-question-edit.component.ts |  64 ++--
 ...te-multiple-choice-question.component.html |  31 +-
 ...uate-multiple-choice-question.component.ts |   2 +
 .../short-answer-question-edit.component.html |   1 +
 .../exercise-hint-update.component.html       |  11 +-
 .../manage/exercise-hint-update.component.ts  |   8 +-
 .../exercise-hint/manage/exercise-hint.scss   |   5 -
 ...rading-instructions-details.component.html |  37 ++-
 ...rading-instructions-details.component.scss |   4 -
 .../grading-instructions-details.component.ts | 289 ++++++++----------
 .../text-exercise-update.component.html       |  10 +-
 .../text-exercise-update.component.ts         |  11 +-
 .../text-unit-form.component.html             |   8 +-
 .../app/lecture/lecture-update.component.html |   7 +-
 .../app/lecture/lecture-update.component.ts   |   6 +-
 .../lecture-wizard-title.component.html       |   2 +-
 .../lecture-wizard-title.component.ts         |   6 +-
 .../markdown-editor.component.scss            |   2 +-
 .../markdown-editor.component.ts              |   2 +-
 .../markdown-editor-monaco.component.html     |  35 ++-
 .../markdown-editor-monaco.component.scss     |   4 +-
 .../markdown-editor-monaco.component.ts       | 123 ++++++--
 .../monaco/markdown-editor-parsing.helper.ts  |  61 ++++
 .../posting-markdown-editor.component.html    |   2 +
 .../monaco-exercise-reference.action.ts       |   4 +
 .../monaco-grading-credits.action.ts          |  20 ++
 .../monaco-grading-criterion.action.ts        |  22 ++
 .../monaco-grading-description.action.ts      |  20 ++
 .../monaco-grading-feedback.action.ts         |  20 ++
 .../monaco-grading-instruction.action.ts      |  35 +++
 .../monaco-grading-scale.action.ts            |  20 ++
 .../monaco-grading-usage-count.action.ts      |  20 ++
 .../actions/monaco-editor-action.model.ts     |  28 +-
 .../monaco-editor-domain-action.model.ts      |  33 +-
 .../model/actions/monaco-formula.action.ts    |   6 +-
 .../model/actions/monaco-task.action.ts       |   9 +-
 .../model/actions/monaco-test-case.action.ts  |   4 +
 ...o-correct-multiple-choice-answer.action.ts |  20 ++
 .../quiz/monaco-quiz-explanation.action.ts    |  20 ++
 .../actions/quiz/monaco-quiz-hint.action.ts   |  20 ++
 ...aco-wrong-multiple-choice-answer.action.ts |  20 ++
 .../monaco-editor-option-preset.model.ts      |   6 +-
 .../monaco-editor-option.helper.ts            |  39 ++-
 .../monaco-editor/monaco-editor.component.ts  |  46 +--
 .../legal-document-update.component.spec.ts   |  15 +-
 .../competency-form.component.spec.ts         |   8 +-
 .../edit-competency.component.spec.ts         |   8 +-
 .../edit-prerequisite.component.spec.ts       |   8 +-
 ...cy-recommendation-detail.component.spec.ts |   4 +-
 .../prerequisite-form.component.spec.ts       |   9 +-
 .../course/course-update.component.spec.ts    |   2 +-
 ...g-and-drop-question-edit.component.spec.ts |  33 +-
 .../exam/exam-update.component.spec.ts        |   6 +-
 ...nnouncement-create-modal.component.spec.ts |   9 +-
 .../exercise-hint-update.component.spec.ts    |   4 +-
 ...multiple-choice-question.component.spec.ts |   4 +-
 .../text-unit-form.component.spec.ts          |   2 +-
 .../lecture/lecture-update.component.spec.ts  |   4 +-
 .../lecture-wizard-title.component.spec.ts    |   4 +-
 .../markdown-editor-monaco.component.spec.ts  |  30 +-
 .../markdown-editor-parsing.helper.spec.ts    |  51 ++++
 ...ple-choice-question-edit.component.spec.ts |  44 +--
 ...ing-instructions-details.component.spec.ts | 100 +++---
 ...aco-editor-action-quiz.integration.spec.ts |  40 +++
 .../monaco-editor-action.integration.spec.ts  |   2 +-
 ...r-grading-instructions.integration.spec.ts |  74 +++++
 .../monaco-editor.component.spec.ts           |   6 +
 .../knowledge-area-edit.component.spec.ts     |   4 +-
 .../standardized-competency-edit.spec.ts      |   4 +-
 .../tutorial-group-form.component.spec.ts     |   2 +-
 ...code-editor-instructor.integration.spec.ts |   2 -
 .../course/CourseCommunicationPage.ts         |   4 +-
 .../pageobjects/exam/ExamCreationPage.ts      |   7 +-
 .../pageobjects/exam/ExamManagementPage.ts    |   2 +-
 .../FileUploadExerciseCreationPage.ts         |   2 +-
 .../quiz/QuizExerciseCreationPage.ts          |   8 +-
 .../text/TextExerciseCreationPage.ts          |   2 +-
 .../lecture/LectureCreationPage.ts            |   2 +-
 .../lecture/LectureManagementPage.ts          |   2 +-
 103 files changed, 1264 insertions(+), 629 deletions(-)
 delete mode 100644 src/main/webapp/app/exercises/shared/exercise-hint/manage/exercise-hint.scss
 create mode 100644 src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-parsing.helper.ts
 create mode 100644 src/main/webapp/app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-credits.action.ts
 create mode 100644 src/main/webapp/app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-criterion.action.ts
 create mode 100644 src/main/webapp/app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-description.action.ts
 create mode 100644 src/main/webapp/app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-feedback.action.ts
 create mode 100644 src/main/webapp/app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-instruction.action.ts
 create mode 100644 src/main/webapp/app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-scale.action.ts
 create mode 100644 src/main/webapp/app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-usage-count.action.ts
 create mode 100644 src/main/webapp/app/shared/monaco-editor/model/actions/quiz/monaco-correct-multiple-choice-answer.action.ts
 create mode 100644 src/main/webapp/app/shared/monaco-editor/model/actions/quiz/monaco-quiz-explanation.action.ts
 create mode 100644 src/main/webapp/app/shared/monaco-editor/model/actions/quiz/monaco-quiz-hint.action.ts
 create mode 100644 src/main/webapp/app/shared/monaco-editor/model/actions/quiz/monaco-wrong-multiple-choice-answer.action.ts
 create mode 100644 src/test/javascript/spec/component/markdown-editor/markdown-editor-parsing.helper.spec.ts
 create mode 100644 src/test/javascript/spec/component/shared/monaco-editor/monaco-editor-grading-instructions.integration.spec.ts

diff --git a/src/main/webapp/app/admin/legal/legal-document-update.component.html b/src/main/webapp/app/admin/legal/legal-document-update.component.html
index d581d9dcf664..7ab8f31edb25 100644
--- a/src/main/webapp/app/admin/legal/legal-document-update.component.html
+++ b/src/main/webapp/app/admin/legal/legal-document-update.component.html
@@ -3,15 +3,14 @@
         <h2>
             <span id="legal-document-update-heading" data-cy="legalDocumentPageHeading" jhiTranslate="{{ titleKey }}"></span>
         </h2>
-        <jhi-markdown-editor
+        <jhi-markdown-editor-monaco
             [markdown]="legalDocument.text"
-            (markdownChange)="checkUnsavedChanges($event)"
+            (markdownChange)="onContentChanged($event)"
             [resizableMinHeight]="MIN_HEIGHT"
             [resizableMaxHeight]="MAX_HEIGHT"
+            [initialEditorHeight]="MIN_HEIGHT"
             [enableFileUpload]="false"
-            [minHeightEditor]="700"
             class="markdown-editor"
-            (onEditSelect)="updateTextIfLanguageChangedInPreview()"
         />
         <div>
             @if (!unsavedChanges && !isSaving) {
@@ -34,13 +33,7 @@ <h2>
             }
         </div>
         <div class="btn-below-editor">
-            <button
-                type="submit"
-                (click)="updateLegalDocument()"
-                class="btn btn-primary"
-                id="update-legal-document-btn"
-                [disabled]="!markdownEditor?.markdown || markdownEditor?.markdown?.trim() === '' || isSaving"
-            >
+            <button type="submit" (click)="updateLegalDocument()" class="btn btn-primary" id="update-legal-document-btn" [disabled]="!currentContentTrimmed || isSaving">
                 <fa-icon [icon]="faSave" />
                 <span jhiTranslate="entity.action.save"></span>
             </button>
diff --git a/src/main/webapp/app/admin/legal/legal-document-update.component.ts b/src/main/webapp/app/admin/legal/legal-document-update.component.ts
index 11151a4410c1..cbe5aafc7cd5 100644
--- a/src/main/webapp/app/admin/legal/legal-document-update.component.ts
+++ b/src/main/webapp/app/admin/legal/legal-document-update.component.ts
@@ -1,14 +1,14 @@
 import { AfterContentChecked, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
 import { faBan, faCheckCircle, faCircleNotch, faExclamationTriangle, faSave } from '@fortawesome/free-solid-svg-icons';
 import { LegalDocumentService } from 'app/shared/service/legal-document.service';
-import { MarkdownEditorComponent, MarkdownEditorHeight } from 'app/shared/markdown-editor/markdown-editor.component';
+import { MarkdownEditorHeight } from 'app/shared/markdown-editor/markdown-editor.component';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { UnsavedChangesWarningComponent } from 'app/admin/legal/unsaved-changes-warning/unsaved-changes-warning.component';
 import { LegalDocument, LegalDocumentLanguage, LegalDocumentType } from 'app/entities/legal-document.model';
 import { ActivatedRoute } from '@angular/router';
 import { Observable, tap } from 'rxjs';
 import { JhiLanguageHelper } from 'app/core/language/language.helper';
-import { ArtemisMarkdownService } from 'app/shared/markdown.service';
+import { MarkdownEditorMonacoComponent } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
 
 @Component({
     selector: 'jhi-privacy-statement-update-component',
@@ -35,12 +35,12 @@ export class LegalDocumentUpdateComponent implements OnInit, AfterContentChecked
     legalDocumentType: LegalDocumentType = LegalDocumentType.PRIVACY_STATEMENT;
     unsavedChanges = false;
     isSaving = false;
-    @ViewChild(MarkdownEditorComponent, { static: false }) markdownEditor: MarkdownEditorComponent;
+    @ViewChild(MarkdownEditorMonacoComponent, { static: false }) markdownEditor: MarkdownEditorMonacoComponent;
 
+    currentContentTrimmed = '';
     currentLanguage = this.DEFAULT_LANGUAGE;
     unsavedChangesWarning: NgbModalRef;
     titleKey: string;
-    private languageChangeInPreview: boolean;
 
     constructor(
         private legalDocumentService: LegalDocumentService,
@@ -48,7 +48,6 @@ export class LegalDocumentUpdateComponent implements OnInit, AfterContentChecked
         private route: ActivatedRoute,
         private languageHelper: JhiLanguageHelper,
         private changeDetectorRef: ChangeDetectorRef,
-        private markdownService: ArtemisMarkdownService,
     ) {}
 
     ngOnInit() {
@@ -84,7 +83,7 @@ export class LegalDocumentUpdateComponent implements OnInit, AfterContentChecked
 
     updateLegalDocument() {
         this.isSaving = true;
-        this.legalDocument.text = this.markdownEditor.markdown!;
+        this.legalDocument.text = this.currentContentTrimmed;
         if (this.legalDocumentType === LegalDocumentType.PRIVACY_STATEMENT) {
             this.legalDocumentService.updatePrivacyStatement(this.legalDocument).subscribe((statement) => {
                 this.setUpdatedDocument(statement);
@@ -102,29 +101,27 @@ export class LegalDocumentUpdateComponent implements OnInit, AfterContentChecked
         this.isSaving = false;
     }
 
-    checkUnsavedChanges(content: string) {
+    onContentChanged(content: string) {
+        this.currentContentTrimmed = content.trim();
         this.unsavedChanges = content !== this.legalDocument.text;
     }
 
-    onLanguageChange(legalDocumentLanguage: any) {
+    onLanguageChange(legalDocumentLanguage: LegalDocumentLanguage) {
         if (this.unsavedChanges) {
             this.showWarning(legalDocumentLanguage);
         } else {
-            this.markdownEditor.markdown = '';
             this.currentLanguage = legalDocumentLanguage;
             this.getLegalDocumentForUpdate(this.legalDocumentType, legalDocumentLanguage).subscribe((document) => {
                 this.legalDocument = document;
+                this.markdownEditor.markdown = this.legalDocument.text;
+                // Ensure the new text is parsed and displayed in the preview
+                this.markdownEditor.parseMarkdown();
                 this.unsavedChanges = false;
-                // if we are currently in preview mode, we need to update the preview
-                if (this.markdownEditor.previewMode) {
-                    this.markdownEditor.previewTextAsHtml = this.markdownService.safeHtmlForMarkdown(this.legalDocument.text);
-                    this.languageChangeInPreview = true;
-                }
             });
         }
     }
 
-    showWarning(legalDocumentLanguage: any) {
+    showWarning(legalDocumentLanguage: LegalDocumentLanguage) {
         this.unsavedChangesWarning = this.modalService.open(UnsavedChangesWarningComponent, { size: 'lg', backdrop: 'static' });
         if (this.legalDocumentType === LegalDocumentType.PRIVACY_STATEMENT) {
             this.unsavedChangesWarning.componentInstance.textMessage = 'artemisApp.legal.privacyStatement.unsavedChangesWarning';
@@ -151,16 +148,4 @@ export class LegalDocumentUpdateComponent implements OnInit, AfterContentChecked
     ngAfterContentChecked() {
         this.changeDetectorRef.detectChanges();
     }
-
-    /**
-     * If the language is changed while we are in the preview mode, we must trigger a change event, so the ace editor updates its content.
-     * We must do this when the editor is visible because otherwise the editor will only be updated if you click on it once.
-     */
-    updateTextIfLanguageChangedInPreview() {
-        if (this.languageChangeInPreview) {
-            // we have to trigger a change event, so the ace editor updates its content
-            this.markdownEditor.aceEditorContainer.getEditor().session._emit('change', { start: { row: 0, column: 0 }, end: { row: 0, column: 0 }, action: 'insert', lines: [] });
-            this.languageChangeInPreview = false;
-        }
-    }
 }
diff --git a/src/main/webapp/app/admin/standardized-competencies/knowledge-area-edit.component.html b/src/main/webapp/app/admin/standardized-competencies/knowledge-area-edit.component.html
index 5121a3a30893..249e72addc6b 100644
--- a/src/main/webapp/app/admin/standardized-competencies/knowledge-area-edit.component.html
+++ b/src/main/webapp/app/admin/standardized-competencies/knowledge-area-edit.component.html
@@ -62,7 +62,7 @@ <h4 jhiTranslate="artemisApp.knowledgeArea.details.titleCreate"></h4>
         <div class="form-group">
             <label jhiTranslate="artemisApp.knowledgeArea.model.description"></label>
             @if (isEditing) {
-                <jhi-markdown-editor
+                <jhi-markdown-editor-monaco
                     [markdown]="form.controls.description.value"
                     (markdownChange)="updateDescriptionControl($event)"
                     class="markdown-preview"
diff --git a/src/main/webapp/app/admin/standardized-competencies/standardized-competency-edit.component.html b/src/main/webapp/app/admin/standardized-competencies/standardized-competency-edit.component.html
index 930756853853..b4e88ba6e4e9 100644
--- a/src/main/webapp/app/admin/standardized-competencies/standardized-competency-edit.component.html
+++ b/src/main/webapp/app/admin/standardized-competencies/standardized-competency-edit.component.html
@@ -45,7 +45,7 @@ <h4 jhiTranslate="artemisApp.standardizedCompetency.details.titleCreate"></h4>
         <div class="form-group">
             <label jhiTranslate="artemisApp.standardizedCompetency.model.description"></label>
             @if (isEditing) {
-                <jhi-markdown-editor
+                <jhi-markdown-editor-monaco
                     [markdown]="form.controls.description.value"
                     (markdownChange)="updateDescriptionControl($event)"
                     class="markdown-preview"
diff --git a/src/main/webapp/app/admin/standardized-competencies/standardized-competency-management.component.ts b/src/main/webapp/app/admin/standardized-competencies/standardized-competency-management.component.ts
index bbd4f86ea8da..fb73da984d1b 100644
--- a/src/main/webapp/app/admin/standardized-competencies/standardized-competency-management.component.ts
+++ b/src/main/webapp/app/admin/standardized-competencies/standardized-competency-management.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostListener, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit } from '@angular/core';
 import { faChevronRight, faDownLeftAndUpRightToCenter, faEye, faFileExport, faFileImport, faPlus, faUpRightAndDownLeftFromCenter } from '@fortawesome/free-solid-svg-icons';
 import {
     KnowledgeAreaDTO,
@@ -27,6 +27,7 @@ import { DocumentationType } from 'app/shared/components/documentation-button/do
     selector: 'jhi-standardized-competency-management',
     templateUrl: './standardized-competency-management.component.html',
     styleUrls: ['standardized-competency-management.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class StandardizedCompetencyManagementComponent extends StandardizedCompetencyFilterPageComponent implements OnInit, OnDestroy, ComponentCanDeactivate {
     protected isLoading = false;
@@ -63,6 +64,7 @@ export class StandardizedCompetencyManagementComponent extends StandardizedCompe
         private alertService: AlertService,
         private modalService: NgbModal,
         private translateService: TranslateService,
+        private changeDetectorRef: ChangeDetectorRef,
     ) {
         super();
     }
@@ -85,6 +87,7 @@ export class StandardizedCompetencyManagementComponent extends StandardizedCompe
                 });
 
                 this.isLoading = false;
+                this.changeDetectorRef.detectChanges();
             },
             error: (errorResponse: HttpErrorResponse) => onError(this.alertService, errorResponse),
         });
@@ -130,6 +133,7 @@ export class StandardizedCompetencyManagementComponent extends StandardizedCompe
                     this.isEditing = false;
                     this.selectedKnowledgeArea = undefined;
                 }
+                this.changeDetectorRef.detectChanges();
             },
             error: (error: HttpErrorResponse) => this.dialogErrorSource.next(error.message),
         });
@@ -152,6 +156,7 @@ export class StandardizedCompetencyManagementComponent extends StandardizedCompe
                         if (!(this.selectedKnowledgeArea?.id || this.selectedCompetency) && !this.isEditing) {
                             this.selectedKnowledgeArea = resultKnowledgeArea;
                         }
+                        this.changeDetectorRef.detectChanges();
                     },
                     error: (error: HttpErrorResponse) => onError(this.alertService, error),
                 });
@@ -167,6 +172,7 @@ export class StandardizedCompetencyManagementComponent extends StandardizedCompe
                         if (resultKnowledgeArea.id === this.selectedKnowledgeArea?.id) {
                             this.selectedKnowledgeArea = resultKnowledgeArea;
                         }
+                        this.changeDetectorRef.detectChanges();
                     },
                     error: (error: HttpErrorResponse) => onError(this.alertService, error),
                 });
@@ -205,6 +211,7 @@ export class StandardizedCompetencyManagementComponent extends StandardizedCompe
                     this.isEditing = false;
                     this.selectedCompetency = undefined;
                 }
+                this.changeDetectorRef.detectChanges();
             },
             error: (error: HttpErrorResponse) => this.dialogErrorSource.next(error.message),
         });
@@ -227,6 +234,7 @@ export class StandardizedCompetencyManagementComponent extends StandardizedCompe
                         if (!(this.selectedCompetency?.id || this.selectedKnowledgeArea) && !this.isEditing) {
                             this.selectedCompetency = resultCompetency;
                         }
+                        this.changeDetectorRef.detectChanges();
                     },
                     error: (error: HttpErrorResponse) => onError(this.alertService, error),
                 });
@@ -244,6 +252,7 @@ export class StandardizedCompetencyManagementComponent extends StandardizedCompe
                         if (resultCompetency.id === this.selectedCompetency?.id) {
                             this.selectedCompetency = resultCompetency;
                         }
+                        this.changeDetectorRef.detectChanges();
                     },
                     error: (error: HttpErrorResponse) => onError(this.alertService, error),
                 });
diff --git a/src/main/webapp/app/course/competencies/competency.module.ts b/src/main/webapp/app/course/competencies/competency.module.ts
index 815be526a131..d7b4c6da30b5 100644
--- a/src/main/webapp/app/course/competencies/competency.module.ts
+++ b/src/main/webapp/app/course/competencies/competency.module.ts
@@ -23,6 +23,7 @@ import { JudgementOfLearningRatingComponent } from 'app/course/competencies/judg
 import { CompetencyManagementTableComponent } from 'app/course/competencies/competency-management/competency-management-table.component';
 import { CompetencySearchComponent } from 'app/course/competencies/import/competency-search.component';
 import { ImportCompetenciesTableComponent } from 'app/course/competencies/import/import-competencies-table.component';
+import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown-editor.module';
 
 @NgModule({
     imports: [
@@ -41,6 +42,7 @@ import { ImportCompetenciesTableComponent } from 'app/course/competencies/import
         RatingModule,
         JudgementOfLearningRatingComponent,
         CompetencyManagementTableComponent,
+        ArtemisMarkdownEditorModule,
     ],
     declarations: [
         CompetencyRingsComponent,
diff --git a/src/main/webapp/app/course/competencies/forms/common-course-competency-form.component.html b/src/main/webapp/app/course/competencies/forms/common-course-competency-form.component.html
index 38a8936b2701..c27066b26924 100644
--- a/src/main/webapp/app/course/competencies/forms/common-course-competency-form.component.html
+++ b/src/main/webapp/app/course/competencies/forms/common-course-competency-form.component.html
@@ -27,7 +27,7 @@
     @if (!isInConnectMode) {
         <div class="form-group">
             <label for="description" jhiTranslate="artemisApp.courseCompetency.description"></label>
-            <jhi-markdown-editor
+            <jhi-markdown-editor-monaco
                 [markdown]="descriptionControl?.value"
                 (markdownChange)="updateDescriptionControl($event)"
                 id="description"
diff --git a/src/main/webapp/app/course/competencies/forms/common-course-competency-form.component.ts b/src/main/webapp/app/course/competencies/forms/common-course-competency-form.component.ts
index 11fbf0f84b9b..eff8620b4cf7 100644
--- a/src/main/webapp/app/course/competencies/forms/common-course-competency-form.component.ts
+++ b/src/main/webapp/app/course/competencies/forms/common-course-competency-form.component.ts
@@ -16,13 +16,23 @@ import { FormsModule } from 'app/forms/forms.module';
 import { ArtemisCompetenciesModule } from 'app/course/competencies/competency.module';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
 import { merge } from 'rxjs';
+import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown-editor.module';
 
 @Component({
     selector: 'jhi-common-course-competency-form',
     templateUrl: './common-course-competency-form.component.html',
     styleUrls: ['./common-course-competency-form.component.scss'],
     standalone: true,
-    imports: [ArtemisSharedModule, FormDateTimePickerModule, ArtemisMarkdownModule, NgbDropdownModule, FormsModule, ArtemisCompetenciesModule, ArtemisSharedComponentModule],
+    imports: [
+        ArtemisSharedModule,
+        FormDateTimePickerModule,
+        ArtemisMarkdownModule,
+        NgbDropdownModule,
+        FormsModule,
+        ArtemisCompetenciesModule,
+        ArtemisSharedComponentModule,
+        ArtemisMarkdownEditorModule,
+    ],
 })
 export class CommonCourseCompetencyFormComponent implements OnInit, OnChanges {
     @Input()
diff --git a/src/main/webapp/app/course/competencies/generate-competencies/competency-recommendation-detail.component.html b/src/main/webapp/app/course/competencies/generate-competencies/competency-recommendation-detail.component.html
index 635267c7d7d8..511a8db012fe 100644
--- a/src/main/webapp/app/course/competencies/generate-competencies/competency-recommendation-detail.component.html
+++ b/src/main/webapp/app/course/competencies/generate-competencies/competency-recommendation-detail.component.html
@@ -64,7 +64,7 @@ <h6 class="mb-0 text-nowrap text-truncate overflow-hidden">{{ titleControl.value
         <div class="form-group">
             <label for="description-{{ index }}">{{ 'artemisApp.competency.description' | artemisTranslate }}</label>
             @if (isInEditMode) {
-                <jhi-markdown-editor
+                <jhi-markdown-editor-monaco
                     [markdown]="descriptionControl.value"
                     (markdownChange)="updateDescriptionControl($event)"
                     id="description-{{ index }}"
diff --git a/src/main/webapp/app/course/manage/course-management.module.ts b/src/main/webapp/app/course/manage/course-management.module.ts
index c0c181457447..333de23de8b3 100644
--- a/src/main/webapp/app/course/manage/course-management.module.ts
+++ b/src/main/webapp/app/course/manage/course-management.module.ts
@@ -69,6 +69,7 @@ import { BuildQueueComponent } from 'app/localci/build-queue/build-queue.compone
 import { SubmissionResultStatusModule } from 'app/overview/submission-result-status.module';
 import { ImageCropperModalComponent } from 'app/course/manage/image-cropper-modal.component';
 import { HeaderCourseComponent } from 'app/overview/header-course.component';
+import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown-editor.module';
 
 @NgModule({
     imports: [
@@ -122,6 +123,7 @@ import { HeaderCourseComponent } from 'app/overview/header-course.component';
         IrisModule,
         DetailModule,
         SubmissionResultStatusModule,
+        ArtemisMarkdownEditorModule,
     ],
     declarations: [
         CourseManagementComponent,
diff --git a/src/main/webapp/app/course/manage/course-update.component.html b/src/main/webapp/app/course/manage/course-update.component.html
index 3013cd9ac721..64de8e420199 100644
--- a/src/main/webapp/app/course/manage/course-update.component.html
+++ b/src/main/webapp/app/course/manage/course-update.component.html
@@ -351,7 +351,7 @@ <h5>
                         <div class="form-group">
                             <label class="form-control-label" jhiTranslate="artemisApp.codeOfConduct.title"></label>
                             <jhi-help-icon text="artemisApp.codeOfConduct.tooltip" />
-                            <jhi-markdown-editor
+                            <jhi-markdown-editor-monaco
                                 class="markdown-editor"
                                 [(markdown)]="course.courseInformationSharingMessagingCodeOfConduct"
                                 (markdownChange)="updateCourseInformationSharingMessagingCodeOfConduct($event)"
@@ -468,7 +468,7 @@ <h5>
                         <label class="form-control-label" jhiTranslate="artemisApp.course.enrollmentConfirmationMessage" for="field_enrollmentConfirmationMessage"
                             >Enrollment Confirmation Message</label
                         >
-                        <jhi-markdown-editor
+                        <jhi-markdown-editor-monaco
                             class="markdown-editor"
                             [(markdown)]="course.enrollmentConfirmationMessage"
                             (markdownChange)="updateEnrollmentConfirmationMessage($event)"
diff --git a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups-management.module.ts b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups-management.module.ts
index b649aa9613ee..257ea19ddd8d 100644
--- a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups-management.module.ts
+++ b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups-management.module.ts
@@ -38,6 +38,8 @@ import { TutorialGroupsChecklistComponent } from './tutorial-groups-checklist/tu
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
 import { TutorialGroupFreePeriodsTableComponent } from 'app/course/tutorial-groups/tutorial-groups-management/tutorial-free-periods/tutorial-free-periods-management/tutorial-group-free-periods-table/tutorial-group-free-periods-table.component';
 import { TutorialGroupsExportButtonComponent } from 'app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/tutorial-groups-management/tutorial-groups-export-button.component/tutorial-groups-export-button.component';
+import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown-editor.module';
+
 @NgModule({
     imports: [
         RouterModule.forChild(tutorialGroupManagementRoutes),
@@ -50,6 +52,7 @@ import { TutorialGroupsExportButtonComponent } from 'app/course/tutorial-groups/
         ArtemisTutorialGroupsSharedModule,
         ArtemisSidePanelModule,
         ArtemisSharedComponentModule,
+        ArtemisMarkdownEditorModule,
     ],
     declarations: [
         TutorialGroupsManagementComponent,
diff --git a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/crud/tutorial-group-form/tutorial-group-form.component.html b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/crud/tutorial-group-form/tutorial-group-form.component.html
index da0d1924c09d..dcd4cfedf033 100644
--- a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/crud/tutorial-group-form/tutorial-group-form.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/crud/tutorial-group-form/tutorial-group-form.component.html
@@ -171,7 +171,7 @@
                         <a href="https://guides.github.com/features/mastering-markdown/"> GitHub Markdown Guide</a>
                     </small>
                     <!-- not included in reactive form -->
-                    <jhi-markdown-editor aria-describedby="additionalInfoHelp" id="additionalInfo" class="markdown-editor" [(markdown)]="additionalInformation" />
+                    <jhi-markdown-editor-monaco aria-describedby="additionalInfoHelp" id="additionalInfo" class="markdown-editor" [(markdown)]="additionalInformation" />
                 </div>
                 <hr />
                 <div class="form-check">
diff --git a/src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-announcement-dialog/exam-live-announcement-create-modal.component.html b/src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-announcement-dialog/exam-live-announcement-create-modal.component.html
index 0b05bacb6172..d6ec36ee35e0 100644
--- a/src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-announcement-dialog/exam-live-announcement-create-modal.component.html
+++ b/src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-announcement-dialog/exam-live-announcement-create-modal.component.html
@@ -9,15 +9,14 @@ <h4 class="modal-title" jhiTranslate="artemisApp.examManagement.announcementCrea
         <div class="modal-body">
             <div class="form-group">
                 <div class="mb-4" jhiTranslate="artemisApp.examManagement.announcementCreate.task"></div>
-                <jhi-markdown-editor
-                    #markdownEditor
+                <jhi-markdown-editor-monaco
                     class="markdown-editor"
                     [markdown]="textContent"
                     [showPreviewButton]="false"
                     [showEditButton]="false"
                     [enableFileUpload]="false"
-                    [colorCommands]="[]"
-                    [defaultCommands]="COMMANDS"
+                    [colorAction]="undefined"
+                    [defaultActions]="actions"
                     (markdownChange)="textContentChanged($event)"
                 />
             </div>
diff --git a/src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-announcement-dialog/exam-live-announcement-create-modal.component.ts b/src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-announcement-dialog/exam-live-announcement-create-modal.component.ts
index d76862155c27..fb9414672e52 100644
--- a/src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-announcement-dialog/exam-live-announcement-create-modal.component.ts
+++ b/src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-announcement-dialog/exam-live-announcement-create-modal.component.ts
@@ -1,18 +1,17 @@
 import { Component } from '@angular/core';
 import { SafeHtml } from '@angular/platform-browser';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import { BoldCommand } from 'app/shared/markdown-editor/commands/bold.command';
-import { ItalicCommand } from 'app/shared/markdown-editor/commands/italic.command';
-import { UnderlineCommand } from 'app/shared/markdown-editor/commands/underline.command';
-import { CodeCommand } from 'app/shared/markdown-editor/commands/code.command';
-import { CodeBlockCommand } from 'app/shared/markdown-editor/commands/codeblock.command';
-import { OrderedListCommand } from 'app/shared/markdown-editor/commands/orderedListCommand';
-import { UnorderedListCommand } from 'app/shared/markdown-editor/commands/unorderedListCommand';
 import { ExamManagementService } from 'app/exam/manage/exam-management.service';
 import { ExamLiveEventType, ExamWideAnnouncementEvent } from 'app/exam/participate/exam-participation-live-events.service';
 import { faCheckCircle, faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { AccountService } from 'app/core/auth/account.service';
 import dayjs from 'dayjs/esm';
+import { MonacoBoldAction } from 'app/shared/monaco-editor/model/actions/monaco-bold.action';
+import { MonacoItalicAction } from 'app/shared/monaco-editor/model/actions/monaco-italic.action';
+import { MonacoUnderlineAction } from 'app/shared/monaco-editor/model/actions/monaco-underline.action';
+import { MonacoCodeAction } from 'app/shared/monaco-editor/model/actions/monaco-code.action';
+import { MonacoCodeBlockAction } from 'app/shared/monaco-editor/model/actions/monaco-code-block.action';
+import { MonacoOrderedListAction } from 'app/shared/monaco-editor/model/actions/monaco-ordered-list.action';
 
 @Component({
     selector: 'jhi-exam-live-announcement-create-modal',
@@ -20,7 +19,15 @@ import dayjs from 'dayjs/esm';
     styleUrls: ['./exam-live-announcement-create-modal.component.scss'],
 })
 export class ExamLiveAnnouncementCreateModalComponent {
-    COMMANDS = [new BoldCommand(), new ItalicCommand(), new UnderlineCommand(), new CodeCommand(), new CodeBlockCommand(), new OrderedListCommand(), new UnorderedListCommand()];
+    actions = [
+        new MonacoBoldAction(),
+        new MonacoItalicAction(),
+        new MonacoUnderlineAction(),
+        new MonacoCodeAction(),
+        new MonacoCodeBlockAction(),
+        new MonacoOrderedListAction(),
+        new MonacoOrderedListAction(),
+    ];
 
     courseId: number;
     examId: number;
diff --git a/src/main/webapp/app/exam/manage/exams/exam-update.component.html b/src/main/webapp/app/exam/manage/exams/exam-update.component.html
index 3fdb6a1dfe4e..01c1a8c61705 100644
--- a/src/main/webapp/app/exam/manage/exams/exam-update.component.html
+++ b/src/main/webapp/app/exam/manage/exams/exam-update.component.html
@@ -257,19 +257,19 @@ <h5 class="pb-1" jhiTranslate="artemisApp.examManagement.sections.examSolutions"
             <h5 class="pb-1" jhiTranslate="artemisApp.examManagement.sections.text"></h5>
             <div class="form-group">
                 <label for="startText" jhiTranslate="artemisApp.examManagement.startText"></label>
-                <jhi-markdown-editor id="startText" class="markdown-editor" [(markdown)]="exam.startText" />
+                <jhi-markdown-editor-monaco id="startText" class="markdown-editor" [(markdown)]="exam.startText" />
             </div>
             <div class="form-group">
                 <label for="startText" jhiTranslate="artemisApp.examManagement.endText"></label>
-                <jhi-markdown-editor id="endText" class="markdown-editor" [(markdown)]="exam.endText" />
+                <jhi-markdown-editor-monaco id="endText" class="markdown-editor" [(markdown)]="exam.endText" />
             </div>
             <div class="form-group">
                 <label for="startText" jhiTranslate="artemisApp.examManagement.confirmationStartText"></label>
-                <jhi-markdown-editor id="confirmationStartText" class="markdown-editor" [(markdown)]="exam.confirmationStartText" />
+                <jhi-markdown-editor-monaco id="confirmationStartText" class="markdown-editor" [(markdown)]="exam.confirmationStartText" />
             </div>
             <div class="form-group">
                 <label for="startText" jhiTranslate="artemisApp.examManagement.confirmationEndText"></label>
-                <jhi-markdown-editor id="confirmationEndText" class="markdown-editor" [(markdown)]="exam.confirmationEndText" />
+                <jhi-markdown-editor-monaco id="confirmationEndText" class="markdown-editor" [(markdown)]="exam.confirmationEndText" />
             </div>
             <div>
                 <button type="button" class="btn btn-secondary" (click)="resetToPreviousState()">
diff --git a/src/main/webapp/app/exercises/file-upload/manage/file-upload-exercise-update.component.html b/src/main/webapp/app/exercises/file-upload/manage/file-upload-exercise-update.component.html
index 018239b68f98..e24b5e92ce73 100644
--- a/src/main/webapp/app/exercises/file-upload/manage/file-upload-exercise-update.component.html
+++ b/src/main/webapp/app/exercises/file-upload/manage/file-upload-exercise-update.component.html
@@ -39,12 +39,11 @@ <h3 jhiTranslate="artemisApp.exercise.sections.mode" id="artemisApp.exercise.sec
         <h3 jhiTranslate="artemisApp.exercise.sections.problem" id="artemisApp.exercise.sections.problem"></h3>
         <div class="form-group" id="field_problemStatement">
             <label class="form-control-label" jhiTranslate="artemisApp.exercise.problemStatement" for="field_problemStatement"></label>
-            <jhi-markdown-editor
+            <jhi-markdown-editor-monaco
                 class="markdown-editor"
-                [domainCommands]="domainCommandsProblemStatement"
+                [domainActions]="domainActionsProblemStatement"
                 [(markdown)]="fileUploadExercise.problemStatement"
                 (markdownChange)="calculateFormSectionStatus()"
-                [editorMode]="EditorMode.LATEX"
             />
         </div>
         @if (!isExamMode) {
@@ -63,12 +62,11 @@ <h3 jhiTranslate="artemisApp.exercise.sections.solution" id="artemisApp.exercise
         <!-- TODO we want to have a file upload here and store a PDF, not a text. We could allow to add text in the sample_solution_explanation field -->
         <div class="form-group" id="field_exampleSolution">
             <label class="form-control-label" jhiTranslate="artemisApp.exercise.exampleSolution" for="field_exampleSolution"></label>
-            <jhi-markdown-editor
+            <jhi-markdown-editor-monaco
                 class="markdown-editor"
-                [domainCommands]="domainCommandsSampleSolution"
+                [domainActions]="domainActionsExampleSolution"
                 [(markdown)]="fileUploadExercise.exampleSolution"
                 (markdownChange)="calculateFormSectionStatus()"
-                [editorMode]="EditorMode.LATEX"
             />
         </div>
         @if (!isExamMode) {
diff --git a/src/main/webapp/app/exercises/file-upload/manage/file-upload-exercise-update.component.ts b/src/main/webapp/app/exercises/file-upload/manage/file-upload-exercise-update.component.ts
index 38e688e7c415..abd489160baa 100644
--- a/src/main/webapp/app/exercises/file-upload/manage/file-upload-exercise-update.component.ts
+++ b/src/main/webapp/app/exercises/file-upload/manage/file-upload-exercise-update.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
 import { AlertService, AlertType } from 'app/core/util/alert.service';
@@ -8,7 +8,6 @@ import { CourseManagementService } from 'app/course/manage/course-management.ser
 import { ExerciseService } from 'app/exercises/shared/exercise/exercise.service';
 import { Exercise, ExerciseMode, IncludedInOverallScore, getCourseId, resetForImport } from 'app/entities/exercise.model';
 import { EditorMode } from 'app/shared/markdown-editor/markdown-editor.component';
-import { KatexCommand } from 'app/shared/markdown-editor/commands/katex.command';
 import { ArtemisNavigationUtilService } from 'app/utils/navigation.utils';
 import { ExerciseCategory } from 'app/entities/exercise-category.model';
 import { cloneDeep } from 'lodash-es';
@@ -27,10 +26,12 @@ import { TeamConfigFormGroupComponent } from 'app/exercises/shared/team-config-f
 import { NgModel } from '@angular/forms';
 import { Subscription } from 'rxjs';
 import { FormSectionStatus } from 'app/forms/form-status-bar/form-status-bar.component';
+import { MonacoFormulaAction } from 'app/shared/monaco-editor/model/actions/monaco-formula.action';
 
 @Component({
     selector: 'jhi-file-upload-exercise-update',
     templateUrl: './file-upload-exercise-update.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FileUploadExerciseUpdateComponent implements AfterViewInit, OnDestroy, OnInit {
     readonly IncludedInOverallScore = IncludedInOverallScore;
@@ -55,8 +56,8 @@ export class FileUploadExerciseUpdateComponent implements AfterViewInit, OnDestr
     existingCategories: ExerciseCategory[];
     EditorMode = EditorMode;
     notificationText?: string;
-    domainCommandsProblemStatement = [new KatexCommand()];
-    domainCommandsSampleSolution = [new KatexCommand()];
+    domainActionsProblemStatement = [new MonacoFormulaAction()];
+    domainActionsExampleSolution = [new MonacoFormulaAction()];
     isImport: boolean;
     examCourseId?: number;
 
diff --git a/src/main/webapp/app/exercises/modeling/manage/modeling-exercise-update.component.html b/src/main/webapp/app/exercises/modeling/manage/modeling-exercise-update.component.html
index 05e678ad84d4..23889e51c013 100644
--- a/src/main/webapp/app/exercises/modeling/manage/modeling-exercise-update.component.html
+++ b/src/main/webapp/app/exercises/modeling/manage/modeling-exercise-update.component.html
@@ -33,12 +33,11 @@ <h3 jhiTranslate="artemisApp.exercise.sections.mode" id="artemisApp.exercise.sec
         <h3 jhiTranslate="artemisApp.exercise.sections.problem" id="artemisApp.exercise.sections.problem"></h3>
         <div class="form-group" name="problemStatement" id="field_problemStatement">
             <label class="form-control-label" jhiTranslate="artemisApp.exercise.problemStatement" for="field_problemStatement"></label>
-            <jhi-markdown-editor
+            <jhi-markdown-editor-monaco
                 class="markdown-editor background-editor-color"
-                [domainCommands]="domainCommandsProblemStatement"
+                [domainActions]="domainActionsProblemStatement"
                 [(markdown)]="modelingExercise.problemStatement"
                 (markdownChange)="calculateFormSectionStatus()"
-                [editorMode]="EditorMode.LATEX"
             />
         </div>
         @if (!isExamMode) {
@@ -66,12 +65,11 @@ <h3 jhiTranslate="artemisApp.exercise.sections.solution" id="artemisApp.exercise
         @if (!isImport) {
             <div class="form-group" name="exampleSolutionExplanation" id="field_exampleSolutionExplanation">
                 <label class="form-control-label" jhiTranslate="artemisApp.modelingExercise.exampleSolutionExplanation" for="field_exampleSolutionExplanation"></label>
-                <jhi-markdown-editor
+                <jhi-markdown-editor-monaco
                     class="markdown-editor background-editor-color"
-                    [domainCommands]="domainCommandsSampleSolution"
+                    [domainActions]="domainActionsExampleSolution"
                     [(markdown)]="modelingExercise.exampleSolutionExplanation"
                     (markdownChange)="calculateFormSectionStatus()"
-                    [editorMode]="EditorMode.LATEX"
                 />
             </div>
         }
diff --git a/src/main/webapp/app/exercises/modeling/manage/modeling-exercise-update.component.ts b/src/main/webapp/app/exercises/modeling/manage/modeling-exercise-update.component.ts
index 7e66dac4b5d8..1da174b17a01 100644
--- a/src/main/webapp/app/exercises/modeling/manage/modeling-exercise-update.component.ts
+++ b/src/main/webapp/app/exercises/modeling/manage/modeling-exercise-update.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { HttpErrorResponse } from '@angular/common/http';
 import { ModelingExercise } from 'app/entities/modeling-exercise.model';
@@ -7,7 +7,6 @@ import { CourseManagementService } from 'app/course/manage/course-management.ser
 import { ExerciseService } from 'app/exercises/shared/exercise/exercise.service';
 import { ExerciseMode, IncludedInOverallScore, resetForImport } from 'app/entities/exercise.model';
 import { EditorMode } from 'app/shared/markdown-editor/markdown-editor.component';
-import { KatexCommand } from 'app/shared/markdown-editor/commands/katex.command';
 import { AssessmentType } from 'app/entities/assessment-type.model';
 import { switchMap, tap } from 'rxjs/operators';
 import { ExerciseGroupService } from 'app/exam/manage/exercise-groups/exercise-group.service';
@@ -32,10 +31,12 @@ import { NgModel } from '@angular/forms';
 import { ExerciseUpdatePlagiarismComponent } from 'app/exercises/shared/plagiarism/exercise-update-plagiarism/exercise-update-plagiarism.component';
 import { TeamConfigFormGroupComponent } from 'app/exercises/shared/team-config-form-group/team-config-form-group.component';
 import { FormDateTimePickerComponent } from 'app/shared/date-time-picker/date-time-picker.component';
+import { MonacoFormulaAction } from 'app/shared/monaco-editor/model/actions/monaco-formula.action';
 
 @Component({
     selector: 'jhi-modeling-exercise-update',
     templateUrl: './modeling-exercise-update.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ModelingExerciseUpdateComponent implements AfterViewInit, OnDestroy, OnInit {
     @ViewChild(ExerciseTitleChannelNameComponent) exerciseTitleChannelNameComponent: ExerciseTitleChannelNameComponent;
@@ -65,8 +66,8 @@ export class ModelingExerciseUpdateComponent implements AfterViewInit, OnDestroy
     exerciseCategories: ExerciseCategory[];
     existingCategories: ExerciseCategory[];
     notificationText?: string;
-    domainCommandsProblemStatement = [new KatexCommand()];
-    domainCommandsSampleSolution = [new KatexCommand()];
+    domainActionsProblemStatement = [new MonacoFormulaAction()];
+    domainActionsExampleSolution = [new MonacoFormulaAction()];
     examCourseId?: number;
     isImport: boolean;
     isExamMode: boolean;
diff --git a/src/main/webapp/app/exercises/programming/manage/instructions-editor/programming-exercise-editable-instruction.component.html b/src/main/webapp/app/exercises/programming/manage/instructions-editor/programming-exercise-editable-instruction.component.html
index 4b697c678b61..677106c40346 100644
--- a/src/main/webapp/app/exercises/programming/manage/instructions-editor/programming-exercise-editable-instruction.component.html
+++ b/src/main/webapp/app/exercises/programming/manage/instructions-editor/programming-exercise-editable-instruction.component.html
@@ -5,8 +5,10 @@
             class="overflow-hidden flex-grow-1"
             [domainActions]="domainActions"
             [initialEditorHeight]="initialEditorHeight"
+            [useDefaultMarkdownEditorOptions]="false"
             [enableResize]="enableResize"
             [markdown]="exercise.problemStatement"
+            [showDefaultPreview]="false"
             (onPreviewSelect)="generateHtml()"
             (markdownChange)="updateProblemStatement($event)"
         >
diff --git a/src/main/webapp/app/exercises/quiz/manage/drag-and-drop-question/drag-and-drop-question-edit.component.html b/src/main/webapp/app/exercises/quiz/manage/drag-and-drop-question/drag-and-drop-question-edit.component.html
index 183061aefb94..4f9c51cf8ead 100644
--- a/src/main/webapp/app/exercises/quiz/manage/drag-and-drop-question/drag-and-drop-question-edit.component.html
+++ b/src/main/webapp/app/exercises/quiz/manage/drag-and-drop-question/drag-and-drop-question-edit.component.html
@@ -200,29 +200,28 @@ <h3 class="mb-0"><span class="badge bg-warning align-text-top" style="width: 60p
         <div class="markupEditorArea">
             @if (!reEvaluationInProgress) {
                 <div class="question-content">
-                    <jhi-markdown-editor
+                    <jhi-markdown-editor-monaco
                         #markdownEditor
                         [markdown]="questionEditorText"
                         [showPreviewButton]="false"
-                        [domainCommands]="dragAndDropQuestionDomainCommands"
+                        [domainActions]="dragAndDropDomainActions"
                         (markdownChange)="changesInMarkdown($event)"
-                        (textWithDomainCommandsFound)="domainCommandsFound($event)"
+                        (textWithDomainActionsFound)="domainActionsFound($event)"
                         class="h-auto"
                     />
                 </div>
-            }
-            @if (reEvaluationInProgress) {
+            } @else {
                 <div class="markupEditorArea">
                     <div class="question-content row">
                         <div class="col-10 col-lg-11">
                             <!-- TODO: Fix file upload    -->
-                            <jhi-markdown-editor
+                            <jhi-markdown-editor-monaco
                                 #markdownEditor
                                 [markdown]="questionEditorText"
                                 [showPreviewButton]="false"
-                                [domainCommands]="dragAndDropQuestionDomainCommands"
+                                [domainActions]="dragAndDropDomainActions"
                                 (markdownChange)="changesInMarkdown($event)"
-                                (textWithDomainCommandsFound)="domainCommandsFound($event)"
+                                (textWithDomainActionsFound)="domainActionsFound($event)"
                                 [enableFileUpload]="false"
                                 class="h-auto"
                             />
diff --git a/src/main/webapp/app/exercises/quiz/manage/drag-and-drop-question/drag-and-drop-question-edit.component.ts b/src/main/webapp/app/exercises/quiz/manage/drag-and-drop-question/drag-and-drop-question-edit.component.ts
index fde9f929e280..784a16bcffcb 100644
--- a/src/main/webapp/app/exercises/quiz/manage/drag-and-drop-question/drag-and-drop-question-edit.component.ts
+++ b/src/main/webapp/app/exercises/quiz/manage/drag-and-drop-question/drag-and-drop-question-edit.component.ts
@@ -16,14 +16,10 @@ import { DragAndDropQuestionUtil } from 'app/exercises/quiz/shared/drag-and-drop
 import { DragAndDropMouseEvent } from 'app/exercises/quiz/manage/drag-and-drop-question/drag-and-drop-mouse-event.class';
 import { DragState } from 'app/entities/quiz/drag-state.enum';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { HintCommand } from 'app/shared/markdown-editor/domainCommands/hint.command';
-import { ExplanationCommand } from 'app/shared/markdown-editor/domainCommands/explanation.command';
 import { DragAndDropMapping } from 'app/entities/quiz/drag-and-drop-mapping.model';
 import { DragAndDropQuestion } from 'app/entities/quiz/drag-and-drop-question.model';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
 import { DragItem } from 'app/entities/quiz/drag-item.model';
 import { DropLocation } from 'app/entities/quiz/drop-location.model';
-import { DomainCommand } from 'app/shared/markdown-editor/domainCommands/domainCommand';
 import { QuizQuestionEdit } from 'app/exercises/quiz/manage/quiz-question-edit.interface';
 import { cloneDeep } from 'lodash-es';
 import { round } from 'app/shared/util/utils';
@@ -52,6 +48,9 @@ import { faFileImage } from '@fortawesome/free-regular-svg-icons';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import { MAX_QUIZ_QUESTION_POINTS } from 'app/shared/constants/input.constants';
 import { FileService } from 'app/shared/http/file.service';
+import { MonacoQuizHintAction } from 'app/shared/monaco-editor/model/actions/quiz/monaco-quiz-hint.action';
+import { MonacoQuizExplanationAction } from 'app/shared/monaco-editor/model/actions/quiz/monaco-quiz-explanation.action';
+import { MarkdownEditorMonacoComponent, TextWithDomainAction } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
 
 @Component({
     selector: 'jhi-drag-and-drop-question-edit',
@@ -63,7 +62,7 @@ import { FileService } from 'app/shared/http/file.service';
 export class DragAndDropQuestionEditComponent implements OnInit, OnChanges, AfterViewInit, QuizQuestionEdit {
     @ViewChild('clickLayer', { static: false }) private clickLayer: ElementRef;
     @ViewChild('backgroundImage ', { static: false }) private backgroundImage: SecuredImageComponent;
-    @ViewChild('markdownEditor', { static: false }) private markdownEditor: MarkdownEditorComponent;
+    @ViewChild('markdownEditor', { static: false }) private markdownEditor: MarkdownEditorMonacoComponent;
 
     @Input() question: DragAndDropQuestion;
     @Input() questionIndex: number;
@@ -107,11 +106,10 @@ export class DragAndDropQuestionEditComponent implements OnInit, OnChanges, Afte
      */
     mouse: DragAndDropMouseEvent;
 
-    hintCommand = new HintCommand();
-    explanationCommand = new ExplanationCommand();
+    hintAction = new MonacoQuizHintAction();
+    explanationAction = new MonacoQuizExplanationAction();
 
-    /** {array} with domainCommands that are needed for a drag and drop question **/
-    dragAndDropQuestionDomainCommands: DomainCommand[] = [this.explanationCommand, this.hintCommand];
+    dragAndDropDomainActions = [this.explanationAction, this.hintAction];
 
     // Icons
     faBan = faBan;
@@ -838,20 +836,18 @@ export class DragAndDropQuestionEditComponent implements OnInit, OnChanges, Afte
     }
 
     /**
-     * 1. Gets the {array} containing the text with the domainCommandIdentifier and creates a new drag and drop problem statement
-     * by assigning the text according to the domainCommandIdentifiers to the drag and drop attributes.
-     * (question text, explanation, hint)
-     * @param domainCommands - containing markdownText with the corresponding domainCommand {DomainCommand} identifier
+     * Creates the drag and drop problem statement from the parsed markdown text, assigning the question text, explanation, and hint according to the domain actions found.
+     * @param textWithDomainActions The parsed markdown text with the corresponding domain actions.
      */
-    domainCommandsFound(domainCommands: [string, DomainCommand | null][]): void {
+    domainActionsFound(textWithDomainActions: TextWithDomainAction[]): void {
         this.cleanupQuestion();
-        for (const [text, command] of domainCommands) {
-            if (command === null && text.length > 0) {
+        for (const { text, action } of textWithDomainActions) {
+            if (action === undefined && text.length > 0) {
                 this.question.text = text;
             }
-            if (command instanceof ExplanationCommand) {
+            if (action instanceof MonacoQuizExplanationAction) {
                 this.question.explanation = text;
-            } else if (command instanceof HintCommand) {
+            } else if (action instanceof MonacoQuizHintAction) {
                 this.question.hint = text;
             }
         }
@@ -873,6 +869,6 @@ export class DragAndDropQuestionEditComponent implements OnInit, OnChanges, Afte
      */
     prepareForSave(): void {
         this.cleanupQuestion();
-        this.markdownEditor.parse();
+        this.markdownEditor.parseMarkdown();
     }
 }
diff --git a/src/main/webapp/app/exercises/quiz/manage/multiple-choice-question/multiple-choice-question-edit.component.html b/src/main/webapp/app/exercises/quiz/manage/multiple-choice-question/multiple-choice-question-edit.component.html
index de7ab74f204c..9e13e98db8c7 100644
--- a/src/main/webapp/app/exercises/quiz/manage/multiple-choice-question/multiple-choice-question-edit.component.html
+++ b/src/main/webapp/app/exercises/quiz/manage/multiple-choice-question/multiple-choice-question-edit.component.html
@@ -94,19 +94,20 @@ <h3 class="mb-0"><span class="badge bg-info align-text-top">MC</span></h3>
         </div>
         <div class="markupEditorArea">
             <div class="question-content">
-                <jhi-markdown-editor
+                <jhi-markdown-editor-monaco
                     #markdownEditor
                     [markdown]="questionEditorText"
                     [showPreviewButton]="true"
-                    [showVisualModeButton]="true"
-                    [domainCommands]="commandMultipleChoiceQuestions"
+                    [showVisualButton]="true"
+                    [domainActions]="multipleChoiceActions"
                     (markdownChange)="changesInMarkdown()"
-                    (textWithDomainCommandsFound)="domainCommandsFound($event)"
+                    (textWithDomainActionsFound)="domainActionsFound($event)"
+                    (onLeaveVisualTab)="onLeaveVisualTab()"
                     [showDefaultPreview]="false"
                     class="h-auto"
                 >
                     <!-- Preview -->
-                    <ng-container id="preview">
+                    <ng-container id="previewMonaco">
                         @if (showMultipleChoiceQuestionPreview) {
                             <jhi-multiple-choice-question [question]="question" [selectedAnswerOptions]="[]" [questionIndex]="questionIndex" />
                         }
@@ -114,13 +115,13 @@ <h3 class="mb-0"><span class="badge bg-info align-text-top">MC</span></h3>
                     </ng-container>
                     <!-- End of Preview-->
                     <!-- Visual -->
-                    <ng-container id="visual" #visual>
+                    <ng-container id="visual">
                         @if (showMultipleChoiceQuestionVisual) {
-                            <jhi-multiple-choice-visual-question [question]="question" (questionChanged)="changesInVisualMode()" />
+                            <jhi-multiple-choice-visual-question #visual [question]="question" (questionChanged)="changesInVisualMode()" />
                         }
                     </ng-container>
                     <!-- End of Visual -->
-                </jhi-markdown-editor>
+                </jhi-markdown-editor-monaco>
             </div>
         </div>
     </div>
diff --git a/src/main/webapp/app/exercises/quiz/manage/multiple-choice-question/multiple-choice-question-edit.component.ts b/src/main/webapp/app/exercises/quiz/manage/multiple-choice-question/multiple-choice-question-edit.component.ts
index 48fdeb5a2c09..014af02dd3b4 100644
--- a/src/main/webapp/app/exercises/quiz/manage/multiple-choice-question/multiple-choice-question-edit.component.ts
+++ b/src/main/webapp/app/exercises/quiz/manage/multiple-choice-question/multiple-choice-question-edit.component.ts
@@ -1,29 +1,33 @@
-import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ArtemisMarkdownService } from 'app/shared/markdown.service';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { HintCommand } from 'app/shared/markdown-editor/domainCommands/hint.command';
-import { ExplanationCommand } from 'app/shared/markdown-editor/domainCommands/explanation.command';
-import { IncorrectOptionCommand } from 'app/shared/markdown-editor/domainCommands/incorrectOptionCommand';
 import { AnswerOption } from 'app/entities/quiz/answer-option.model';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
 import { MultipleChoiceQuestion } from 'app/entities/quiz/multiple-choice-question.model';
-import { CorrectOptionCommand } from 'app/shared/markdown-editor/domainCommands/correctOptionCommand';
-import { DomainCommand } from 'app/shared/markdown-editor/domainCommands/domainCommand';
 import { QuizQuestionEdit } from 'app/exercises/quiz/manage/quiz-question-edit.interface';
 import { generateExerciseHintExplanation } from 'app/shared/util/markdown.util';
 import { faAngleDown, faAngleRight, faQuestionCircle, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { ScoringType } from 'app/entities/quiz/quiz-question.model';
 import { MAX_QUIZ_QUESTION_POINTS } from 'app/shared/constants/input.constants';
+import { MonacoQuizHintAction } from 'app/shared/monaco-editor/model/actions/quiz/monaco-quiz-hint.action';
+import { MonacoWrongMultipleChoiceAnswerAction } from 'app/shared/monaco-editor/model/actions/quiz/monaco-wrong-multiple-choice-answer.action';
+import { MonacoCorrectMultipleChoiceAnswerAction } from 'app/shared/monaco-editor/model/actions/quiz/monaco-correct-multiple-choice-answer.action';
+import { MonacoQuizExplanationAction } from 'app/shared/monaco-editor/model/actions/quiz/monaco-quiz-explanation.action';
+import { MarkdownEditorMonacoComponent, TextWithDomainAction } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
+import { MultipleChoiceVisualQuestionComponent } from 'app/exercises/quiz/shared/questions/multiple-choice-question/multiple-choice-visual-question.component';
 
 @Component({
     selector: 'jhi-multiple-choice-question-edit',
     templateUrl: './multiple-choice-question-edit.component.html',
     styleUrls: ['../quiz-exercise.scss', '../../shared/quiz.scss'],
     encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MultipleChoiceQuestionEditComponent implements OnInit, QuizQuestionEdit {
     @ViewChild('markdownEditor', { static: false })
-    private markdownEditor: MarkdownEditorComponent;
+    private markdownEditor: MarkdownEditorMonacoComponent;
+
+    @ViewChild('visual', { static: false })
+    visualChild: MultipleChoiceVisualQuestionComponent;
 
     @Input()
     question: MultipleChoiceQuestion;
@@ -43,18 +47,17 @@ export class MultipleChoiceQuestionEditComponent implements OnInit, QuizQuestion
 
     /** Set default preview of the markdown editor as preview for the multiple choice question **/
     get showPreview(): boolean {
-        return this.markdownEditor && this.markdownEditor.previewMode;
+        return this.markdownEditor && this.markdownEditor.inPreviewMode;
     }
     showMultipleChoiceQuestionPreview = true;
     showMultipleChoiceQuestionVisual = true;
 
-    hintCommand = new HintCommand();
-    correctCommand = new CorrectOptionCommand();
-    incorrectCommand = new IncorrectOptionCommand();
-    explanationCommand = new ExplanationCommand();
+    correctAction = new MonacoCorrectMultipleChoiceAnswerAction();
+    wrongAction = new MonacoWrongMultipleChoiceAnswerAction();
+    explanationAction = new MonacoQuizExplanationAction();
+    hintAction = new MonacoQuizHintAction();
 
-    /** DomainCommands for the multiple choice question **/
-    commandMultipleChoiceQuestions: DomainCommand[] = [this.correctCommand, this.incorrectCommand, this.explanationCommand, this.hintCommand];
+    multipleChoiceActions = [this.correctAction, this.wrongAction, this.explanationAction, this.hintAction];
 
     // Icons
     faTrash = faTrash;
@@ -131,12 +134,13 @@ export class MultipleChoiceQuestionEditComponent implements OnInit, QuizQuestion
      * to get the newest values in the editor to update the question attributes
      */
     prepareForSave(): void {
-        if (this.markdownEditor.visualMode) {
-            this.markdownEditor.markdown = this.markdownEditor.visualChild.parseQuestion();
-        }
-
         this.cleanupQuestion();
-        this.markdownEditor.parse();
+        this.markdownEditor.parseMarkdown();
+    }
+
+    onLeaveVisualTab(): void {
+        this.markdownEditor.markdown = this.visualChild.parseQuestion();
+        this.prepareForSave();
     }
 
     /**
@@ -153,34 +157,34 @@ export class MultipleChoiceQuestionEditComponent implements OnInit, QuizQuestion
     }
 
     /**
-     * 1. Gets a tuple of text and domainCommandIdentifiers and assigns text values according to the domainCommandIdentifiers a
+     * 1. Gets a tuple of text and domain action identifiers and assigns text values according to the domain actions a
      *    multiple choice question the to the multiple choice question attributes.
      *   (question text, explanation, hint, answerOption (correct/wrong)
-     * 2. The tuple order is the same as the order of the commands in the markdown text inserted by the user
+     * 2. The tuple order is the same as the order of the actions in the markdown text inserted by the user
      * 3. resetMultipleChoicePreview() is triggered to notify the parent component
      *    about the changes within the question and to cacheValidation() since the assigned values have changed
-     * @param domainCommands containing tuples of [text, domainCommandIdentifiers]
+     * @param textWithDomainActions The parsed text segments with their corresponding domain actions.
      */
-    domainCommandsFound(domainCommands: [string, DomainCommand | null][]): void {
+    domainActionsFound(textWithDomainActions: TextWithDomainAction[]): void {
         this.cleanupQuestion();
         let currentAnswerOption;
 
-        for (const [text, command] of domainCommands) {
-            if (command === null && text.length > 0) {
+        for (const { text, action } of textWithDomainActions) {
+            if (action === undefined && text.length > 0) {
                 this.question.text = text;
             }
-            if (command instanceof CorrectOptionCommand || command instanceof IncorrectOptionCommand) {
+            if (action instanceof MonacoCorrectMultipleChoiceAnswerAction || action instanceof MonacoWrongMultipleChoiceAnswerAction) {
                 currentAnswerOption = new AnswerOption();
-                currentAnswerOption.isCorrect = command instanceof CorrectOptionCommand;
+                currentAnswerOption.isCorrect = action instanceof MonacoCorrectMultipleChoiceAnswerAction;
                 currentAnswerOption.text = text;
                 this.question.answerOptions!.push(currentAnswerOption);
-            } else if (command instanceof ExplanationCommand) {
+            } else if (action instanceof MonacoQuizExplanationAction) {
                 if (currentAnswerOption) {
                     currentAnswerOption.explanation = text;
                 } else {
                     this.question.explanation = text;
                 }
-            } else if (command instanceof HintCommand) {
+            } else if (action instanceof MonacoQuizHintAction) {
                 if (currentAnswerOption) {
                     currentAnswerOption.hint = text;
                 } else {
diff --git a/src/main/webapp/app/exercises/quiz/manage/re-evaluate/multiple-choice-question/re-evaluate-multiple-choice-question.component.html b/src/main/webapp/app/exercises/quiz/manage/re-evaluate/multiple-choice-question/re-evaluate-multiple-choice-question.component.html
index 29f375533509..b6b99fc4ebac 100644
--- a/src/main/webapp/app/exercises/quiz/manage/re-evaluate/multiple-choice-question/re-evaluate-multiple-choice-question.component.html
+++ b/src/main/webapp/app/exercises/quiz/manage/re-evaluate/multiple-choice-question/re-evaluate-multiple-choice-question.component.html
@@ -1,3 +1,4 @@
+<!-- TODO for a follow-up: This template relies on method calls to ensure the drag/drop of answer options works. We should avoid this for performance reasons -->
 <div class="edit-mc-question">
     <div class="card-header">
         <div class="row">
@@ -135,17 +136,17 @@ <h3 class="mb-0"><span class="badge bg-info align-text-top">MC</span></h3>
                 <div class="row">
                     <div class="col-10 col-lg-11">
                         <!-- TODO: Fix file upload    -->
-                        <jhi-markdown-editor
-                            [markdown]="getQuestionText(question)"
-                            [editorMode]="editorMode"
-                            [metaCommands]="[]"
-                            [defaultCommands]="[]"
-                            [headerCommands]="[]"
-                            [domainCommands]="[]"
-                            [colorCommands]="[]"
+                        <jhi-markdown-editor-monaco
+                            [markdown]="questionText"
+                            [metaActions]="[]"
+                            [defaultActions]="[]"
+                            [headerActions]="undefined"
+                            [domainActions]="[]"
+                            [colorAction]="undefined"
                             [showEditButton]="false"
                             [showPreviewButton]="false"
                             (markdownChange)="onQuestionChange($event)"
+                            (onBlurEditor)="questionText = getQuestionText(question)"
                             [enableFileUpload]="false"
                             class="editor col"
                             style="width: 90%"
@@ -177,18 +178,18 @@ <h3 class="mb-0"><span class="badge bg-info align-text-top">MC</span></h3>
                         </div>
                         <div class="col-9 col-lg-7 option-text">
                             <!-- TODO: Fix file upload -->
-                            <jhi-markdown-editor
+                            <jhi-markdown-editor-monaco
                                 [markdown]="markdownMap.get(answer.id!)"
-                                [editorMode]="editorMode"
-                                [metaCommands]="[]"
-                                [defaultCommands]="[]"
-                                [headerCommands]="[]"
-                                [domainCommands]="[]"
-                                [colorCommands]="[]"
+                                [metaActions]="[]"
+                                [defaultActions]="[]"
+                                [headerActions]="undefined"
+                                [domainActions]="[]"
+                                [colorAction]="undefined"
                                 [showEditButton]="false"
                                 [showPreviewButton]="false"
                                 (markdownChange)="onAnswerOptionChange($event, answer)"
                                 [enableFileUpload]="false"
+                                [enableResize]="false"
                                 class="editor"
                                 style="width: 65%"
                             />
diff --git a/src/main/webapp/app/exercises/quiz/manage/re-evaluate/multiple-choice-question/re-evaluate-multiple-choice-question.component.ts b/src/main/webapp/app/exercises/quiz/manage/re-evaluate/multiple-choice-question/re-evaluate-multiple-choice-question.component.ts
index 39489c556064..acf8aea5f8d2 100644
--- a/src/main/webapp/app/exercises/quiz/manage/re-evaluate/multiple-choice-question/re-evaluate-multiple-choice-question.component.ts
+++ b/src/main/webapp/app/exercises/quiz/manage/re-evaluate/multiple-choice-question/re-evaluate-multiple-choice-question.component.ts
@@ -26,6 +26,7 @@ export class ReEvaluateMultipleChoiceQuestionComponent implements OnInit {
 
     editorMode = EditorMode.NONE;
     markdownMap: Map<number, string>;
+    questionText: string;
 
     // Create Backup Question for resets
     @Input() backupQuestion: MultipleChoiceQuestion;
@@ -49,6 +50,7 @@ export class ReEvaluateMultipleChoiceQuestionComponent implements OnInit {
                 (answer.isCorrect ? CorrectOptionCommand.IDENTIFIER : IncorrectOptionCommand.IDENTIFIER) + ' ' + generateExerciseHintExplanation(answer),
             );
         }
+        this.questionText = this.getQuestionText(this.question);
     }
 
     /**
diff --git a/src/main/webapp/app/exercises/quiz/manage/short-answer-question/short-answer-question-edit.component.html b/src/main/webapp/app/exercises/quiz/manage/short-answer-question/short-answer-question-edit.component.html
index 8372aea83c43..49822af7d4d7 100644
--- a/src/main/webapp/app/exercises/quiz/manage/short-answer-question/short-answer-question-edit.component.html
+++ b/src/main/webapp/app/exercises/quiz/manage/short-answer-question/short-answer-question-edit.component.html
@@ -287,6 +287,7 @@ <h3 class="mb-0"><span class="badge bg-success align-text-top" style="width: 60p
                         [defaultActions]="markdownActions"
                         [colorAction]="undefined"
                         [initialEditorHeight]="'external'"
+                        [useDefaultMarkdownEditorOptions]="false"
                         [(markdown)]="questionEditorText"
                         (markdownChange)="onTextChange($event)"
                     />
diff --git a/src/main/webapp/app/exercises/shared/exercise-hint/manage/exercise-hint-update.component.html b/src/main/webapp/app/exercises/shared/exercise-hint/manage/exercise-hint-update.component.html
index 1235391ec365..5c80f6e0c868 100644
--- a/src/main/webapp/app/exercises/shared/exercise-hint/manage/exercise-hint-update.component.html
+++ b/src/main/webapp/app/exercises/shared/exercise-hint/manage/exercise-hint-update.component.html
@@ -60,15 +60,8 @@ <h2 id="jhi-exercise-hint-heading" [jhiTranslate]="'artemisApp.exerciseHint.home
                         </jhi-iris-logo-button>
                     </div>
                 }
-                <div class="form-group hint-form__editor-wrapper">
-                    <jhi-markdown-editor
-                        [markdown]="exerciseHint.content"
-                        (markdownChange)="updateHintContent($event)"
-                        [resizableMinHeight]="MarkdownEditorHeight.SMALL"
-                        [resizableMaxHeight]="MarkdownEditorHeight.LARGE"
-                        [domainCommands]="domainCommands"
-                        [editorMode]="editorMode"
-                    />
+                <div class="form-group hint-form__editor-wrapper mb-3">
+                    <jhi-markdown-editor-monaco [markdown]="exerciseHint.content" (markdownChange)="updateHintContent($event)" [domainActions]="domainActions" />
                 </div>
                 @if (exerciseHint.type === HintType.CODE) {
                     <div class="form-group hint-form__editor-wrapper">
diff --git a/src/main/webapp/app/exercises/shared/exercise-hint/manage/exercise-hint-update.component.ts b/src/main/webapp/app/exercises/shared/exercise-hint/manage/exercise-hint-update.component.ts
index 3ea7292de040..c4c7b78f0496 100644
--- a/src/main/webapp/app/exercises/shared/exercise-hint/manage/exercise-hint-update.component.ts
+++ b/src/main/webapp/app/exercises/shared/exercise-hint/manage/exercise-hint-update.component.ts
@@ -4,8 +4,7 @@ import { ActivatedRoute } from '@angular/router';
 import { Observable, Subscription, filter, switchMap } from 'rxjs';
 import { AlertService } from 'app/core/util/alert.service';
 import { ExerciseHintService } from '../shared/exercise-hint.service';
-import { EditorMode, MarkdownEditorHeight } from 'app/shared/markdown-editor/markdown-editor.component';
-import { KatexCommand } from 'app/shared/markdown-editor/commands/katex.command';
+import { MarkdownEditorHeight } from 'app/shared/markdown-editor/markdown-editor.component';
 import { ArtemisNavigationUtilService } from 'app/utils/navigation.utils';
 import { faBan, faCircleNotch, faSave } from '@fortawesome/free-solid-svg-icons';
 import { ExerciseHint, HintType } from 'app/entities/hestia/exercise-hint.model';
@@ -23,13 +22,13 @@ import { IrisSettings } from 'app/entities/iris/settings/iris-settings.model';
 import { ProfileService } from 'app/shared/layouts/profiles/profile.service';
 import { ButtonType } from 'app/shared/components/button.component';
 import { PROFILE_IRIS } from 'app/app.constants';
+import { MonacoFormulaAction } from 'app/shared/monaco-editor/model/actions/monaco-formula.action';
 
 const DEFAULT_DISPLAY_THRESHOLD = 3;
 
 @Component({
     selector: 'jhi-exercise-hint-update',
     templateUrl: './exercise-hint-update.component.html',
-    styleUrls: ['./exercise-hint.scss'],
 })
 export class ExerciseHintUpdateComponent implements OnInit, OnDestroy {
     MarkdownEditorHeight = MarkdownEditorHeight;
@@ -47,8 +46,7 @@ export class ExerciseHintUpdateComponent implements OnInit, OnDestroy {
     isGeneratingDescription: boolean;
     paramSub: Subscription;
 
-    domainCommands = [new KatexCommand()];
-    editorMode = EditorMode.LATEX;
+    domainActions = [new MonacoFormulaAction()];
 
     // Icons
     faCircleNotch = faCircleNotch;
diff --git a/src/main/webapp/app/exercises/shared/exercise-hint/manage/exercise-hint.scss b/src/main/webapp/app/exercises/shared/exercise-hint/manage/exercise-hint.scss
deleted file mode 100644
index 536b30c1def3..000000000000
--- a/src/main/webapp/app/exercises/shared/exercise-hint/manage/exercise-hint.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.hint-form__editor-wrapper {
-    ::ng-deep .markdown-editor {
-        height: 300px;
-    }
-}
diff --git a/src/main/webapp/app/exercises/shared/structured-grading-criterion/grading-instructions-details/grading-instructions-details.component.html b/src/main/webapp/app/exercises/shared/structured-grading-criterion/grading-instructions-details/grading-instructions-details.component.html
index be9cf1f0e6cd..fccbe00c9353 100644
--- a/src/main/webapp/app/exercises/shared/structured-grading-criterion/grading-instructions-details/grading-instructions-details.component.html
+++ b/src/main/webapp/app/exercises/shared/structured-grading-criterion/grading-instructions-details/grading-instructions-details.component.html
@@ -151,15 +151,17 @@
             <!--- Edit Text Mode --->
             @if (!showEditMode) {
                 <div>
-                    <jhi-markdown-editor
+                    <jhi-markdown-editor-monaco
                         #markdownEditor
                         class="markdown-editor"
                         [markdown]="markdownEditorText"
                         [showPreviewButton]="false"
                         [showEditButton]="false"
-                        [domainCommands]="domainCommands"
+                        [domainActions]="domainActionsForMainEditor"
+                        [enableResize]="false"
+                        [initialEditorHeight]="MarkdownEditorHeight.MEDIUM"
                         (markdownChange)="prepareForSave()"
-                        (textWithDomainCommandsFound)="domainCommandsFound($event)"
+                        (textWithDomainActionsFound)="onDomainActionsFound($event)"
                     />
                 </div>
             }
@@ -172,13 +174,13 @@
     <div class="edit-sqi">
         <div class="grading-instructions-update-border">
             <div class="instructions pb-2 row-cols-2">
-                <jhi-markdown-editor
+                <jhi-markdown-editor-monaco
                     #markdownEditor
                     class="editor col-md-8"
                     [markdown]="markdownEditorText"
-                    [domainCommands]="domainCommandsGradingInstructions"
+                    [domainActions]="domainActionsForGradingInstructionParsing"
                     (markdownChange)="prepareForSave()"
-                    (textWithDomainCommandsFound)="setExerciseGradingInstructionText($event)"
+                    (textWithDomainActionsFound)="setExerciseGradingInstructionText($event)"
                     [enableFileUpload]="false"
                     [showEditButton]="false"
                     [showPreviewButton]="false"
@@ -189,7 +191,7 @@
                     <div class="criteria-content pb-2">
                         <div class="row">
                             <div class="col-md-10 text-start">
-                                <div class="input-group" style="height: 33px; width: 75%">
+                                <div class="input-group mb-1" [style.width.%]="75">
                                     <input
                                         class="form-control"
                                         type="text"
@@ -216,22 +218,25 @@
                         </div>
                         @if (criteria.structuredGradingInstructions!) {
                             <div>
-                                @for (instruction of criteria.structuredGradingInstructions; track instruction) {
+                                @for (instruction of criteria.structuredGradingInstructions; track instruction; let index = $index) {
                                     <div>
-                                        <div class="instructions row-cols-2">
-                                            <jhi-markdown-editor
+                                        <div class="instructions row-cols-2 mb-1">
+                                            <jhi-markdown-editor-monaco
                                                 #markdownEditors
                                                 class="editor col-md-8"
-                                                [metaCommands]="[]"
-                                                [defaultCommands]="[]"
-                                                [headerCommands]="[]"
-                                                [colorCommands]="[]"
+                                                [metaActions]="[]"
+                                                [defaultActions]="[]"
+                                                [headerActions]="undefined"
+                                                [colorAction]="undefined"
                                                 [showEditButton]="false"
                                                 [showPreviewButton]="false"
-                                                [domainCommands]="domainCommandsGradingInstructions"
+                                                [domainActions]="[]"
                                                 (markdownChange)="prepareForSave()"
-                                                (textWithDomainCommandsFound)="onInstructionChange($event, instruction)"
+                                                (textWithDomainActionsFound)="onInstructionChange($event, instruction)"
                                                 [enableFileUpload]="false"
+                                                [enableResize]="false"
+                                                [resizableMinHeight]="MarkdownEditorHeight.INLINE"
+                                                [linkEditorHeightToContentHeight]="true"
                                             />
                                             <div class="form-group text-center col-md-4" style="display: block">
                                                 <span class="re-evaluate-button" id="reset-button" (click)="resetInstruction(instruction, criteria)">
diff --git a/src/main/webapp/app/exercises/shared/structured-grading-criterion/grading-instructions-details/grading-instructions-details.component.scss b/src/main/webapp/app/exercises/shared/structured-grading-criterion/grading-instructions-details/grading-instructions-details.component.scss
index 6ec55ecf1d9e..74e64144c104 100644
--- a/src/main/webapp/app/exercises/shared/structured-grading-criterion/grading-instructions-details/grading-instructions-details.component.scss
+++ b/src/main/webapp/app/exercises/shared/structured-grading-criterion/grading-instructions-details/grading-instructions-details.component.scss
@@ -37,10 +37,6 @@
             width: auto;
         }
 
-        .input-group > input {
-            height: 100%;
-        }
-
         .form-group {
             display: flex;
             align-items: center;
diff --git a/src/main/webapp/app/exercises/shared/structured-grading-criterion/grading-instructions-details/grading-instructions-details.component.ts b/src/main/webapp/app/exercises/shared/structured-grading-criterion/grading-instructions-details/grading-instructions-details.component.ts
index 0215dcbfe5d5..64448a6f4569 100644
--- a/src/main/webapp/app/exercises/shared/structured-grading-criterion/grading-instructions-details/grading-instructions-details.component.ts
+++ b/src/main/webapp/app/exercises/shared/structured-grading-criterion/grading-instructions-details/grading-instructions-details.component.ts
@@ -1,18 +1,19 @@
 import { AfterContentInit, ChangeDetectorRef, Component, Input, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
 import { GradingCriterion } from 'app/exercises/shared/structured-grading-criterion/grading-criterion.model';
-import { UsageCountCommand } from 'app/shared/markdown-editor/domainCommands/usageCount.command';
-import { CreditsCommand } from 'app/shared/markdown-editor/domainCommands/credits.command';
-import { FeedbackCommand } from 'app/shared/markdown-editor/domainCommands/feedback.command';
-import { DomainCommand } from 'app/shared/markdown-editor/domainCommands/domainCommand';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
+import { MarkdownEditorHeight } from 'app/shared/markdown-editor/markdown-editor.component';
 import { GradingInstruction } from 'app/exercises/shared/structured-grading-criterion/grading-instruction.model';
-import { GradingScaleCommand } from 'app/shared/markdown-editor/domainCommands/gradingScaleCommand';
-import { GradingInstructionCommand } from 'app/shared/markdown-editor/domainCommands/gradingInstruction.command';
-import { InstructionDescriptionCommand } from 'app/shared/markdown-editor/domainCommands/instructionDescription.command';
-import { GradingCriterionCommand } from 'app/shared/markdown-editor/domainCommands/gradingCriterionCommand';
 import { Exercise } from 'app/entities/exercise.model';
 import { cloneDeep } from 'lodash-es';
 import { faPlus, faTrash, faUndo } from '@fortawesome/free-solid-svg-icons';
+import { MonacoEditorDomainAction } from 'app/shared/monaco-editor/model/actions/monaco-editor-domain-action.model';
+import { MonacoGradingCreditsAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-credits.action';
+import { MonacoGradingScaleAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-scale.action';
+import { MonacoGradingDescriptionAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-description.action';
+import { MonacoGradingFeedbackAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-feedback.action';
+import { MonacoGradingUsageCountAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-usage-count.action';
+import { MarkdownEditorMonacoComponent, TextWithDomainAction } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
+import { MonacoGradingCriterionAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-criterion.action';
+import { MonacoGradingInstructionAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-instruction.action';
 
 @Component({
     selector: 'jhi-grading-instructions-details',
@@ -23,9 +24,9 @@ export class GradingInstructionsDetailsComponent implements OnInit, AfterContent
     /** Ace Editor configuration constants **/
     markdownEditorText = '';
     @ViewChildren('markdownEditors')
-    private markdownEditors: QueryList<MarkdownEditorComponent>;
+    private markdownEditors: QueryList<MarkdownEditorMonacoComponent>;
     @ViewChild('markdownEditor', { static: false })
-    private markdownEditor: MarkdownEditorComponent;
+    private markdownEditor: MarkdownEditorMonacoComponent;
     @Input()
     exercise: Exercise;
     private instructions: GradingInstruction[];
@@ -33,32 +34,32 @@ export class GradingInstructionsDetailsComponent implements OnInit, AfterContent
 
     backupExercise: Exercise;
 
-    gradingCriterionCommand = new GradingCriterionCommand();
-    gradingInstructionCommand = new GradingInstructionCommand();
-    creditsCommand = new CreditsCommand();
-    gradingScaleCommand = new GradingScaleCommand();
-    instructionDescriptionCommand = new InstructionDescriptionCommand();
-    feedbackCommand = new FeedbackCommand();
-    usageCountCommand = new UsageCountCommand();
+    creditsAction = new MonacoGradingCreditsAction();
+    gradingScaleAction = new MonacoGradingScaleAction();
+    descriptionAction = new MonacoGradingDescriptionAction();
+    feedbackAction = new MonacoGradingFeedbackAction();
+    usageCountAction = new MonacoGradingUsageCountAction();
+    gradingInstructionAction = new MonacoGradingInstructionAction(this.creditsAction, this.gradingScaleAction, this.descriptionAction, this.feedbackAction, this.usageCountAction);
+    gradingCriterionAction = new MonacoGradingCriterionAction(this.gradingInstructionAction);
+
+    domainActionsForMainEditor = [
+        this.creditsAction,
+        this.gradingScaleAction,
+        this.descriptionAction,
+        this.feedbackAction,
+        this.usageCountAction,
+        this.gradingInstructionAction,
+        this.gradingCriterionAction,
+    ];
 
     showEditMode: boolean;
 
-    domainCommands: DomainCommand[] = [
-        this.creditsCommand,
-        this.gradingScaleCommand,
-        this.instructionDescriptionCommand,
-        this.feedbackCommand,
-        this.usageCountCommand,
-        this.gradingCriterionCommand,
-        this.gradingInstructionCommand,
-    ];
-
-    domainCommandsGradingInstructions: DomainCommand[] = [
-        this.creditsCommand,
-        this.gradingScaleCommand,
-        this.instructionDescriptionCommand,
-        this.feedbackCommand,
-        this.usageCountCommand,
+    domainActionsForGradingInstructionParsing: MonacoEditorDomainAction[] = [
+        this.creditsAction,
+        this.gradingScaleAction,
+        this.descriptionAction,
+        this.feedbackAction,
+        this.usageCountAction,
     ];
 
     // Icons
@@ -66,6 +67,8 @@ export class GradingInstructionsDetailsComponent implements OnInit, AfterContent
     faTrash = faTrash;
     faUndo = faUndo;
 
+    protected readonly MarkdownEditorHeight = MarkdownEditorHeight;
+
     constructor(private changeDetector: ChangeDetectorRef) {}
 
     ngOnInit() {
@@ -87,7 +90,7 @@ export class GradingInstructionsDetailsComponent implements OnInit, AfterContent
         this.changeDetector.detectChanges();
         this.criteria!.forEach((criterion) => {
             criterion.structuredGradingInstructions.forEach((instruction) => {
-                this.markdownEditors.get(index)!.markdownTextChange(this.generateInstructionText(instruction));
+                this.markdownEditors.get(index)!.markdown = this.generateInstructionText(instruction);
                 index += 1;
             });
         });
@@ -99,10 +102,10 @@ export class GradingInstructionsDetailsComponent implements OnInit, AfterContent
         if (this.exercise.gradingCriteria) {
             for (const criterion of this.exercise.gradingCriteria) {
                 if (criterion.title == undefined) {
-                    // if it is a dummy criterion, leave out the command identifier
+                    // if it is a dummy criterion, leave out the action identifier
                     markdownText += this.generateInstructionsMarkdown(criterion);
                 } else {
-                    markdownText += GradingCriterionCommand.IDENTIFIER + criterion.title + '\n' + '\t' + this.generateInstructionsMarkdown(criterion);
+                    markdownText += `${MonacoGradingCriterionAction.IDENTIFIER} ${criterion.title}\n\t${this.generateInstructionsMarkdown(criterion)}`;
                 }
             }
         }
@@ -130,7 +133,7 @@ export class GradingInstructionsDetailsComponent implements OnInit, AfterContent
     generateInstructionText(instruction: GradingInstruction): string {
         let markdownText = '';
         markdownText =
-            GradingInstructionCommand.IDENTIFIER +
+            MonacoGradingInstructionAction.IDENTIFIER +
             '\n' +
             '\t' +
             this.generateCreditsText(instruction) +
@@ -152,59 +155,52 @@ export class GradingInstructionsDetailsComponent implements OnInit, AfterContent
     }
 
     generateCreditsText(instruction: GradingInstruction): string {
+        const creditsText = MonacoGradingCreditsAction.TEXT;
+        const creditsIdentifier = MonacoGradingCreditsAction.IDENTIFIER;
         if (instruction.credits == undefined) {
-            instruction.credits = parseFloat(CreditsCommand.TEXT);
-            return CreditsCommand.IDENTIFIER + ' ' + CreditsCommand.TEXT;
+            instruction.credits = parseFloat(creditsText) || 0;
         }
-        return CreditsCommand.IDENTIFIER + ' ' + instruction.credits;
+        return `${creditsIdentifier} ${instruction.credits || creditsText}`;
     }
 
     generateGradingScaleText(instruction: GradingInstruction): string {
         if (instruction.gradingScale == undefined) {
-            instruction.gradingScale = GradingScaleCommand.TEXT;
-            return GradingScaleCommand.IDENTIFIER + ' ' + GradingScaleCommand.TEXT;
+            instruction.gradingScale = MonacoGradingScaleAction.TEXT;
         }
-        return GradingScaleCommand.IDENTIFIER + ' ' + instruction.gradingScale;
+        return `${MonacoGradingScaleAction.IDENTIFIER} ${instruction.gradingScale}`;
     }
 
     generateInstructionDescriptionText(instruction: GradingInstruction): string {
         if (instruction.instructionDescription == undefined) {
-            instruction.instructionDescription = InstructionDescriptionCommand.TEXT;
-            return InstructionDescriptionCommand.IDENTIFIER + ' ' + InstructionDescriptionCommand.TEXT;
+            instruction.instructionDescription = MonacoGradingDescriptionAction.TEXT;
         }
-        return InstructionDescriptionCommand.IDENTIFIER + ' ' + instruction.instructionDescription;
+        return `${MonacoGradingDescriptionAction.IDENTIFIER} ${instruction.instructionDescription}`;
     }
 
     generateInstructionFeedback(instruction: GradingInstruction): string {
         if (instruction.feedback == undefined) {
-            instruction.feedback = FeedbackCommand.TEXT;
-            return FeedbackCommand.IDENTIFIER + ' ' + FeedbackCommand.TEXT;
+            instruction.feedback = MonacoGradingFeedbackAction.TEXT;
         }
-        return FeedbackCommand.IDENTIFIER + ' ' + instruction.feedback;
+        return `${MonacoGradingFeedbackAction.IDENTIFIER} ${instruction.feedback}`;
     }
 
     generateUsageCount(instruction: GradingInstruction): string {
         if (instruction.usageCount == undefined) {
-            instruction.usageCount = parseInt(UsageCountCommand.TEXT, 10);
-            return UsageCountCommand.IDENTIFIER + ' ' + UsageCountCommand.TEXT;
+            instruction.usageCount = parseInt(MonacoGradingUsageCountAction.TEXT, 10) || 0;
         }
-        return UsageCountCommand.IDENTIFIER + ' ' + instruction.usageCount;
+        return `${MonacoGradingUsageCountAction.IDENTIFIER} ${instruction.usageCount}`;
     }
 
     initializeExerciseGradingInstructionText(): string {
-        if (this.exercise.gradingInstructions) {
-            return this.exercise.gradingInstructions + '\n\n';
-        } else {
-            return 'Add Assessment Instruction text here' + '\n\n';
-        }
+        return `${this.exercise.gradingInstructions || 'Add Assessment Instruction text here'}\n\n`;
     }
 
     prepareForSave(): void {
         this.cleanupExerciseGradingInstructions();
-        this.markdownEditor.parse();
+        this.markdownEditor.parseMarkdown();
         if (this.exercise.gradingInstructionFeedbackUsed) {
             this.markdownEditors.forEach((component) => {
-                component.parse();
+                component.parseMarkdown(this.domainActionsForGradingInstructionParsing);
             });
         }
     }
@@ -217,37 +213,33 @@ export class GradingInstructionsDetailsComponent implements OnInit, AfterContent
         this.exercise.gradingInstructions = undefined;
     }
 
-    hasCriterionCommand(domainCommands: [string, DomainCommand | null][]): boolean {
-        return domainCommands.some(([, command]) => command instanceof GradingCriterionCommand);
+    hasCriterionAction(textWithDomainActions: TextWithDomainAction[]): boolean {
+        return textWithDomainActions.some(({ action }) => action instanceof MonacoGradingCriterionAction);
     }
 
     /**
-     * @function createSubInstructionCommands
-     * @desc 1. divides the input: domainCommands in two subarrays:
-     *          instructionCommands, which consists of all stand-alone instructions
-     *          criteriaCommands, which consists of instructions that belong to a criterion
-     *       2. for each subarrray a method is called to create the criterion and instruction objects
-     * @param domainCommands containing tuples of [text, domainCommandIdentifiers]
+     * Creates criterion and instruction objects based on the parsed markdown text.
+     * @param textWithDomainActions The parsed text segments with their corresponding domain actions.
      */
-    createSubInstructionCommands(domainCommands: [string, DomainCommand | null][]): void {
-        let instructionCommands;
-        let criteriaCommands;
-        let endOfInstructionsCommand = 0;
-        if (!this.hasCriterionCommand(domainCommands)) {
-            this.setParentForInstructionsWithNoCriterion(domainCommands);
+    createSubInstructionActions(textWithDomainActions: TextWithDomainAction[]): void {
+        let instructionActions;
+        let criterionActions;
+        let endOfInstructionsAction = 0;
+        if (!this.hasCriterionAction(textWithDomainActions)) {
+            this.setParentForInstructionsWithNoCriterion(textWithDomainActions);
         } else {
-            for (const [, command] of domainCommands) {
-                endOfInstructionsCommand++;
-                this.setExerciseGradingInstructionText(domainCommands);
-                if (command instanceof GradingCriterionCommand) {
-                    instructionCommands = domainCommands.slice(0, endOfInstructionsCommand - 1);
-                    if (instructionCommands.length !== 0) {
-                        this.setParentForInstructionsWithNoCriterion(instructionCommands);
+            for (const { action } of textWithDomainActions) {
+                endOfInstructionsAction++;
+                this.setExerciseGradingInstructionText(textWithDomainActions);
+                if (action instanceof MonacoGradingCriterionAction) {
+                    instructionActions = textWithDomainActions.slice(0, endOfInstructionsAction - 1);
+                    if (instructionActions.length !== 0) {
+                        this.setParentForInstructionsWithNoCriterion(instructionActions);
                     }
-                    criteriaCommands = domainCommands.slice(endOfInstructionsCommand - 1);
-                    if (criteriaCommands.length !== 0) {
+                    criterionActions = textWithDomainActions.slice(endOfInstructionsAction - 1);
+                    if (criterionActions.length !== 0) {
                         this.instructions = []; // resets the instructions array to be filled with the instructions of the criteria
-                        this.groupInstructionsToCriteria(criteriaCommands); // creates criterion object for each criterion and their corresponding instruction objects
+                        this.groupInstructionsToCriteria(criterionActions);
                     }
                     break;
                 }
@@ -256,14 +248,13 @@ export class GradingInstructionsDetailsComponent implements OnInit, AfterContent
     }
 
     /**
-     * @function setParentForInstructionsWithNoCriterion
-     * @desc 1. creates a dummy criterion object for each stand-alone instruction
-     * @param domainCommands containing tuples of [text, domainCommandIdentifiers]
+     * Creates a dummy grading criterion object for each instruction that does not belong to a criterion and assigns the instruction to it.
+     * @param textWithDomainActions The parsed text segments with their corresponding domain actions.
      */
-    setParentForInstructionsWithNoCriterion(domainCommands: [string, DomainCommand | null][]): void {
-        for (const [, command] of domainCommands) {
-            this.setExerciseGradingInstructionText(domainCommands);
-            if (command instanceof GradingInstructionCommand) {
+    setParentForInstructionsWithNoCriterion(textWithDomainActions: TextWithDomainAction[]): void {
+        for (const { action } of textWithDomainActions) {
+            this.setExerciseGradingInstructionText(textWithDomainActions);
+            if (action instanceof MonacoGradingInstructionAction) {
                 const dummyCriterion = new GradingCriterion();
                 const newInstruction = new GradingInstruction();
                 dummyCriterion.structuredGradingInstructions = [];
@@ -273,68 +264,63 @@ export class GradingInstructionsDetailsComponent implements OnInit, AfterContent
             }
         }
         this.exercise.gradingCriteria = this.criteria;
-        this.setInstructionParameters(domainCommands);
+        this.setInstructionParameters(textWithDomainActions);
     }
 
     /**
-     * @function groupInstructionsToCriteria
-     * @desc 1. creates a criterion for each GradingCriterionCommandIdentifier
-     *          and creates the instruction objects of this criterion then assigns them to their parent criterion
-     * @param domainCommands containing tuples of [text, domainCommandIdentifiers]
+     * Creates a grading criterion object for each criterion action found in the parsed markdown text and assigns the corresponding grading instructions to it.
+     * @param textWithDomainActions The parsed text segments with their corresponding domain actions.
      */
-    groupInstructionsToCriteria(domainCommands: [string, DomainCommand | null][]): void {
-        const initialCriteriaCommands = domainCommands;
+    groupInstructionsToCriteria(textWithDomainActions: TextWithDomainAction[]): void {
+        const initialCriterionActions = textWithDomainActions;
         if (this.exercise.gradingCriteria == undefined) {
             this.exercise.gradingCriteria = [];
         }
-        for (const [text, command] of domainCommands) {
-            if (command instanceof GradingCriterionCommand) {
+        for (const { text, action } of textWithDomainActions) {
+            if (action instanceof MonacoGradingCriterionAction) {
                 const newCriterion = new GradingCriterion();
                 newCriterion.title = text;
                 this.exercise.gradingCriteria.push(newCriterion);
                 newCriterion.structuredGradingInstructions = [];
-                const modifiedArray = domainCommands.slice(1); // remove GradingCriterionCommandIdentifier after creating its criterion object
+                const arrayWithoutCriterion = textWithDomainActions.slice(1); // remove the identifier after creating its criterion object
                 let endOfCriterion = 0;
-                for (const [, instrCommand] of modifiedArray) {
+                for (const remainingTextWithDomainAction of arrayWithoutCriterion) {
+                    const instrAction = remainingTextWithDomainAction.action;
                     endOfCriterion++;
-                    if (instrCommand instanceof GradingInstructionCommand) {
+                    if (instrAction instanceof MonacoGradingInstructionAction) {
                         const newInstruction = new GradingInstruction(); // create instruction objects that belong to the above created criterion
                         newCriterion.structuredGradingInstructions.push(newInstruction);
                         this.instructions.push(newInstruction);
                     }
-                    if (instrCommand instanceof GradingCriterionCommand) {
-                        domainCommands = domainCommands.slice(endOfCriterion, domainCommands.length);
+                    if (instrAction instanceof MonacoGradingCriterionAction) {
+                        textWithDomainActions = textWithDomainActions.slice(endOfCriterion, textWithDomainActions.length);
                         break;
                     }
                 }
             }
         }
-        this.setInstructionParameters(initialCriteriaCommands.filter(([, command]) => !(command instanceof GradingCriterionCommand)));
+        this.setInstructionParameters(initialCriterionActions.filter(({ action }) => !(action instanceof MonacoGradingCriterionAction)));
     }
 
     /**
-     * @function setInstructionParameters
-     * @desc 1. Gets a tuple of text and domainCommandIdentifiers not including GradingCriterionCommandIdentifiers and assigns text values according to the domainCommandIdentifiers
-     *       2. The tuple order is the same as the order of the commands in the markdown text inserted by the user
-     *       instruction objects must be created before the method gets triggered
-     * @param domainCommands containing tuples of [text, domainCommandIdentifiers]
+     * Sets the parameters of the GradingInstruction objects based on the parsed markdown text. Note that the instruction objects must be created before this method is called.
+     * @param textWithDomainActions The parsed text segments with their corresponding domain actions.
      */
-
-    setInstructionParameters(domainCommands: [string, DomainCommand | null][]): void {
+    setInstructionParameters(textWithDomainActions: TextWithDomainAction[]): void {
         let index = 0;
-        for (const [text, command] of domainCommands) {
+        for (const { text, action } of textWithDomainActions) {
             if (!this.instructions[index]) {
                 break;
             }
-            if (command instanceof CreditsCommand) {
+            if (action instanceof MonacoGradingCreditsAction) {
                 this.instructions[index].credits = parseFloat(text);
-            } else if (command instanceof GradingScaleCommand) {
+            } else if (action instanceof MonacoGradingScaleAction) {
                 this.instructions[index].gradingScale = text;
-            } else if (command instanceof InstructionDescriptionCommand) {
+            } else if (action instanceof MonacoGradingDescriptionAction) {
                 this.instructions[index].instructionDescription = text;
-            } else if (command instanceof FeedbackCommand) {
+            } else if (action instanceof MonacoGradingFeedbackAction) {
                 this.instructions[index].feedback = text;
-            } else if (command instanceof UsageCountCommand) {
+            } else if (action instanceof MonacoGradingUsageCountAction) {
                 this.instructions[index].usageCount = parseInt(text, 10);
                 index++; // index must be increased after the last parameter of the instruction to continue with the next instruction object
             }
@@ -342,28 +328,19 @@ export class GradingInstructionsDetailsComponent implements OnInit, AfterContent
     }
 
     /**
-     * @function domainCommandsFound
-     * @desc 1. Gets a tuple of text and domainCommandIdentifiers and assigns text values according to the domainCommandIdentifiers
-     *       2. The tuple order is the same as the order of the commands in the markdown text inserted by the user
-     * @param domainCommands containing tuples of [text, domainCommandIdentifiers]
+     * Updates the grading instructions of the exercise based on the parsed markdown text.
+     * @param textWithDomainActions The parsed text segments with their corresponding domain actions.
      */
-    domainCommandsFound(domainCommands: [string, DomainCommand | null][]): void {
+    onDomainActionsFound(textWithDomainActions: TextWithDomainAction[]): void {
         this.instructions = [];
         this.criteria = [];
         this.exercise.gradingCriteria = [];
-        this.createSubInstructionCommands(domainCommands);
+        this.createSubInstructionActions(textWithDomainActions);
     }
 
-    /**
-     * @function onInstructionChange
-     * @desc 1. Gets a tuple of text and domainCommandIdentifiers and assigns text values according to the domainCommandIdentifiers
-     *       2. The tuple order is the same as the order of the commands in the markdown text inserted by the user
-     * @param domainCommands containing tuples of [text, domainCommandIdentifiers]
-     * @param {GradingInstruction} instruction
-     */
-    onInstructionChange(domainCommands: [string, DomainCommand | null][], instruction: GradingInstruction): void {
+    onInstructionChange(textWithDomainActions: TextWithDomainAction[], instruction: GradingInstruction): void {
         this.instructions = [instruction];
-        this.setInstructionParameters(domainCommands);
+        this.setInstructionParameters(textWithDomainActions);
     }
 
     /**
@@ -423,9 +400,8 @@ export class GradingInstructionsDetailsComponent implements OnInit, AfterContent
     }
 
     /**
-     * @function addNewInstruction
-     * @desc Adds new grading instruction for desired grading criteria
-     * @param criterion {GradingCriterion} the criteria, which includes the instruction that will be inserted
+     * Adds a new grading instruction for the specified grading criterion.
+     * @param criterion The grading criterion that contains the instruction to insert.
      */
     addNewInstruction(criterion: GradingCriterion) {
         const criterionIndex = this.exercise.gradingCriteria!.indexOf(criterion);
@@ -438,10 +414,6 @@ export class GradingInstructionsDetailsComponent implements OnInit, AfterContent
         this.initializeMarkdown();
     }
 
-    /**
-     * @function addNewGradingCriteria
-     * @desc Adds new grading criteria for the exercise
-     */
     addNewGradingCriterion() {
         const criterion = new GradingCriterion();
         criterion.structuredGradingInstructions = [];
@@ -453,21 +425,11 @@ export class GradingInstructionsDetailsComponent implements OnInit, AfterContent
         }
     }
 
-    /**
-     * @function onCriteriaTitleChange
-     * @desc Detects changes for grading criteria title
-     * @param {GradingCriterion} criterion the criteria, which includes title that will be changed
-     */
     onCriterionTitleChange($event: any, criterion: GradingCriterion) {
         const criterionIndex = this.exercise.gradingCriteria!.indexOf(criterion);
         this.exercise.gradingCriteria![criterionIndex].title = $event.target.value;
     }
 
-    /**
-     * @function resetCriteriaTitle
-     * @desc Resets the whole grading criteria title
-     * @param criterion {GradingCriterion} the criteria, which includes title that will be reset
-     */
     resetCriterionTitle(criterion: GradingCriterion) {
         const criterionIndex = this.findCriterionIndex(criterion, this.exercise);
         const backupCriterionIndex = this.findCriterionIndex(criterion, this.backupExercise);
@@ -478,24 +440,21 @@ export class GradingInstructionsDetailsComponent implements OnInit, AfterContent
         }
     }
 
-    /**
-     * @function deleteGradingCriteria
-     * @desc Deletes the grading criteria with sub-grading instructions
-     * @param criterion {GradingCriterion} the criteria, which will be deleted
-     */
     deleteGradingCriterion(criterion: GradingCriterion) {
         const criterionIndex = this.exercise.gradingCriteria!.indexOf(criterion);
         this.exercise.gradingCriteria!.splice(criterionIndex, 1);
     }
 
     /**
-     * @function setExerciseGradingInstructionText
-     * @desc Gets a tuple of text and domainCommandIdentifiers and assigns text values as grading instructions of exercise
-     * @param domainCommands containing tuples of [text, domainCommandIdentifiers]
+     * Extracts the exercise grading instruction text from the start of the parsed markdown text.
+     * @param textWithDomainActions The parsed text segments with their corresponding domain actions.
      */
-    setExerciseGradingInstructionText(domainCommands: [string, DomainCommand | null][]): void {
-        const [text, command] = domainCommands[0];
-        if (command === null && text.length > 0) {
+    setExerciseGradingInstructionText(textWithDomainActions: TextWithDomainAction[]): void {
+        if (!textWithDomainActions.length) {
+            return;
+        }
+        const { text, action } = textWithDomainActions[0];
+        if (action === undefined && text.length > 0) {
             this.exercise.gradingInstructions = text;
         }
     }
@@ -509,12 +468,6 @@ export class GradingInstructionsDetailsComponent implements OnInit, AfterContent
         this.markdownEditorText = this.generateMarkdown();
     }
 
-    /**
-     * Updates given grading instruction in exercise
-     *
-     * @param instruction needs to be updated
-     * @param criterion includes instruction needs to be updated
-     */
     updateGradingInstruction(instruction: GradingInstruction, criterion: GradingCriterion) {
         const criterionIndex = this.exercise.gradingCriteria!.indexOf(criterion);
         const instructionIndex = this.exercise.gradingCriteria![criterionIndex].structuredGradingInstructions.indexOf(instruction);
diff --git a/src/main/webapp/app/exercises/text/manage/text-exercise/text-exercise-update.component.html b/src/main/webapp/app/exercises/text/manage/text-exercise/text-exercise-update.component.html
index 2e5a417b7c41..5df2017d2538 100644
--- a/src/main/webapp/app/exercises/text/manage/text-exercise/text-exercise-update.component.html
+++ b/src/main/webapp/app/exercises/text/manage/text-exercise/text-exercise-update.component.html
@@ -33,12 +33,11 @@ <h3 jhiTranslate="artemisApp.exercise.sections.mode" id="artemisApp.exercise.sec
         <h3 jhiTranslate="artemisApp.exercise.sections.problem" id="artemisApp.exercise.sections.problem"></h3>
         <div class="form-group">
             <label jhiTranslate="artemisApp.exercise.problemStatement" for="problemStatement"></label>
-            <jhi-markdown-editor
+            <jhi-markdown-editor-monaco
                 id="problemStatement"
                 class="markdown-editor"
-                [domainCommands]="domainCommandsProblemStatement"
+                [domainActions]="domainActionsProblemStatement"
                 [(markdown)]="textExercise.problemStatement"
-                [editorMode]="EditorMode.LATEX"
                 (markdownChange)="calculateFormSectionStatus()"
             />
         </div>
@@ -57,12 +56,11 @@ <h3 jhiTranslate="artemisApp.exercise.sections.problem" id="artemisApp.exercise.
         <h3 jhiTranslate="artemisApp.exercise.sections.solution" id="artemisApp.exercise.sections.solution"></h3>
         <div class="form-group">
             <label jhiTranslate="artemisApp.exercise.exampleSolution" for="exampleSolution"></label>
-            <jhi-markdown-editor
+            <jhi-markdown-editor-monaco
                 id="exampleSolution"
                 class="markdown-editor"
-                [domainCommands]="domainCommandsSampleSolution"
+                [domainActions]="domainActionsExampleSolution"
                 [(markdown)]="textExercise.exampleSolution"
-                [editorMode]="EditorMode.LATEX"
                 (markdownChange)="calculateFormSectionStatus()"
             />
         </div>
diff --git a/src/main/webapp/app/exercises/text/manage/text-exercise/text-exercise-update.component.ts b/src/main/webapp/app/exercises/text/manage/text-exercise/text-exercise-update.component.ts
index 21011cacb571..e55e5fb28db2 100644
--- a/src/main/webapp/app/exercises/text/manage/text-exercise/text-exercise-update.component.ts
+++ b/src/main/webapp/app/exercises/text/manage/text-exercise/text-exercise-update.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { HttpErrorResponse } from '@angular/common/http';
 import { TextExercise } from 'app/entities/text-exercise.model';
@@ -7,8 +7,6 @@ import { CourseManagementService } from 'app/course/manage/course-management.ser
 import { ExerciseService } from 'app/exercises/shared/exercise/exercise.service';
 import { AssessmentType } from 'app/entities/assessment-type.model';
 import { ExerciseMode, IncludedInOverallScore, resetForImport } from 'app/entities/exercise.model';
-import { EditorMode } from 'app/shared/markdown-editor/markdown-editor.component';
-import { KatexCommand } from 'app/shared/markdown-editor/commands/katex.command';
 import { switchMap, tap } from 'rxjs/operators';
 import { ExerciseGroupService } from 'app/exam/manage/exercise-groups/exercise-group.service';
 import { NgForm, NgModel } from '@angular/forms';
@@ -31,10 +29,12 @@ import { FormSectionStatus } from 'app/forms/form-status-bar/form-status-bar.com
 import { ExerciseUpdatePlagiarismComponent } from 'app/exercises/shared/plagiarism/exercise-update-plagiarism/exercise-update-plagiarism.component';
 import { TeamConfigFormGroupComponent } from 'app/exercises/shared/team-config-form-group/team-config-form-group.component';
 import { FormDateTimePickerComponent } from 'app/shared/date-time-picker/date-time-picker.component';
+import { MonacoFormulaAction } from 'app/shared/monaco-editor/model/actions/monaco-formula.action';
 
 @Component({
     selector: 'jhi-text-exercise-update',
     templateUrl: './text-exercise-update.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TextExerciseUpdateComponent implements OnInit, OnDestroy, AfterViewInit {
     readonly IncludedInOverallScore = IncludedInOverallScore;
@@ -56,7 +56,6 @@ export class TextExerciseUpdateComponent implements OnInit, OnDestroy, AfterView
     isExamMode: boolean;
     isImport = false;
     goBackAfterSaving = false;
-    EditorMode = EditorMode;
     AssessmentType = AssessmentType;
     isAthenaEnabled$: Observable<boolean> | undefined;
 
@@ -67,8 +66,8 @@ export class TextExerciseUpdateComponent implements OnInit, OnDestroy, AfterView
     existingCategories: ExerciseCategory[];
     notificationText?: string;
 
-    domainCommandsProblemStatement = [new KatexCommand()];
-    domainCommandsSampleSolution = [new KatexCommand()];
+    domainActionsProblemStatement = [new MonacoFormulaAction()];
+    domainActionsExampleSolution = [new MonacoFormulaAction()];
 
     formSectionStatus: FormSectionStatus[];
 
diff --git a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/text-unit-form/text-unit-form.component.html b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/text-unit-form/text-unit-form.component.html
index 0bf5784ea593..7af504cfd0aa 100644
--- a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/text-unit-form/text-unit-form.component.html
+++ b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/text-unit-form/text-unit-form.component.html
@@ -44,7 +44,13 @@
                         <a href="https://guides.github.com/features/mastering-markdown/"> GitHub Markdown Guide</a>
                     </small>
                     <!-- not included in reactive form -->
-                    <jhi-markdown-editor aria-describedby="contentHelp" id="content" class="markdown-editor" [(markdown)]="content" (markdownChange)="onMarkdownChange($event)" />
+                    <jhi-markdown-editor-monaco
+                        aria-describedby="contentHelp"
+                        id="content"
+                        class="markdown-editor"
+                        [(markdown)]="content"
+                        (markdownChange)="onMarkdownChange($event)"
+                    />
                 </div>
                 <div class="row">
                     <div class="col-12">
diff --git a/src/main/webapp/app/lecture/lecture-update.component.html b/src/main/webapp/app/lecture/lecture-update.component.html
index 67f423adda06..25a522f09f4f 100644
--- a/src/main/webapp/app/lecture/lecture-update.component.html
+++ b/src/main/webapp/app/lecture/lecture-update.component.html
@@ -30,12 +30,7 @@ <h2 id="jhi-lecture-heading" jhiTranslate="artemisApp.lecture.home.createOrEditL
                     <jhi-lecture-title-channel-name [lecture]="lecture" />
                     <div class="form-group" id="field_description">
                         <label class="form-control-label" jhiTranslate="artemisApp.lecture.description" for="field_description"></label>
-                        <jhi-markdown-editor
-                            class="markdown-editor"
-                            [domainCommands]="domainCommandsDescription"
-                            [(markdown)]="lecture.description"
-                            [editorMode]="EditorMode.LATEX"
-                        />
+                        <jhi-markdown-editor-monaco class="markdown-editor" [domainActions]="domainActionsDescription" [(markdown)]="lecture.description" />
                     </div>
                     <div class="d-flex">
                         <div class="form-group flex-grow-1">
diff --git a/src/main/webapp/app/lecture/lecture-update.component.ts b/src/main/webapp/app/lecture/lecture-update.component.ts
index 592d937228cb..e0ac895d50ce 100644
--- a/src/main/webapp/app/lecture/lecture-update.component.ts
+++ b/src/main/webapp/app/lecture/lecture-update.component.ts
@@ -6,15 +6,14 @@ import { AlertService } from 'app/core/util/alert.service';
 import { LectureService } from './lecture.service';
 import { CourseManagementService } from '../course/manage/course-management.service';
 import { Lecture } from 'app/entities/lecture.model';
-import { EditorMode } from 'app/shared/markdown-editor/markdown-editor.component';
 import { Course } from 'app/entities/course.model';
-import { KatexCommand } from 'app/shared/markdown-editor/commands/katex.command';
 import { onError } from 'app/shared/util/global.utils';
 import { ArtemisNavigationUtilService } from 'app/utils/navigation.utils';
 import { DocumentationType } from 'app/shared/components/documentation-button/documentation-button.component';
 import { faBan, faHandshakeAngle, faPuzzlePiece, faQuestionCircle, faSave } from '@fortawesome/free-solid-svg-icons';
 import { LectureUpdateWizardComponent } from 'app/lecture/wizard-mode/lecture-update-wizard.component';
 import { FILE_EXTENSIONS } from 'app/shared/constants/file-extensions.constants';
+import { MonacoFormulaAction } from 'app/shared/monaco-editor/model/actions/monaco-formula.action';
 
 @Component({
     selector: 'jhi-lecture-update',
@@ -26,7 +25,6 @@ export class LectureUpdateComponent implements OnInit {
 
     @ViewChild(LectureUpdateWizardComponent, { static: false }) wizardComponent: LectureUpdateWizardComponent;
 
-    EditorMode = EditorMode;
     lecture: Lecture;
     isSaving: boolean;
     isProcessing: boolean;
@@ -35,7 +33,7 @@ export class LectureUpdateComponent implements OnInit {
 
     courses: Course[];
 
-    domainCommandsDescription = [new KatexCommand()];
+    domainActionsDescription = [new MonacoFormulaAction()];
     file: File;
     fileName: string;
     fileInputTouched = false;
diff --git a/src/main/webapp/app/lecture/wizard-mode/lecture-wizard-title.component.html b/src/main/webapp/app/lecture/wizard-mode/lecture-wizard-title.component.html
index 9656e52daf04..9100d8436184 100644
--- a/src/main/webapp/app/lecture/wizard-mode/lecture-wizard-title.component.html
+++ b/src/main/webapp/app/lecture/wizard-mode/lecture-wizard-title.component.html
@@ -6,6 +6,6 @@ <h1><span jhiTranslate="artemisApp.lecture.wizardMode.steps.titleStepTitle"></sp
     </form>
     <div class="form-group" id="field_description">
         <label class="form-control-label" jhiTranslate="artemisApp.lecture.description" for="field_description"></label>
-        <jhi-markdown-editor class="markdown-editor" [domainCommands]="domainCommandsDescription" [(markdown)]="lecture.description" [editorMode]="EditorMode.LATEX" />
+        <jhi-markdown-editor-monaco class="markdown-editor" [domainActions]="domainActionsDescription" [(markdown)]="lecture.description" />
     </div>
 </div>
diff --git a/src/main/webapp/app/lecture/wizard-mode/lecture-wizard-title.component.ts b/src/main/webapp/app/lecture/wizard-mode/lecture-wizard-title.component.ts
index 8748b9232417..c8b89b284ffb 100644
--- a/src/main/webapp/app/lecture/wizard-mode/lecture-wizard-title.component.ts
+++ b/src/main/webapp/app/lecture/wizard-mode/lecture-wizard-title.component.ts
@@ -1,7 +1,6 @@
 import { Component, Input } from '@angular/core';
-import { KatexCommand } from 'app/shared/markdown-editor/commands/katex.command';
-import { EditorMode } from 'app/shared/markdown-editor/markdown-editor.component';
 import { Lecture } from 'app/entities/lecture.model';
+import { MonacoFormulaAction } from 'app/shared/monaco-editor/model/actions/monaco-formula.action';
 
 @Component({
     selector: 'jhi-lecture-update-wizard-title',
@@ -11,8 +10,7 @@ export class LectureUpdateWizardTitleComponent {
     @Input() currentStep: number;
     @Input() lecture: Lecture;
 
-    domainCommandsDescription = [new KatexCommand()];
-    EditorMode = EditorMode;
+    domainActionsDescription = [new MonacoFormulaAction()];
 
     constructor() {}
 }
diff --git a/src/main/webapp/app/shared/markdown-editor/markdown-editor.component.scss b/src/main/webapp/app/shared/markdown-editor/markdown-editor.component.scss
index 008cc9349fe4..935730fc5c81 100644
--- a/src/main/webapp/app/shared/markdown-editor/markdown-editor.component.scss
+++ b/src/main/webapp/app/shared/markdown-editor/markdown-editor.component.scss
@@ -108,7 +108,7 @@
 }
 
 .background-editor-high {
-    overflow: scroll;
+    overflow: auto;
 }
 
 .dropdown-menu {
diff --git a/src/main/webapp/app/shared/markdown-editor/markdown-editor.component.ts b/src/main/webapp/app/shared/markdown-editor/markdown-editor.component.ts
index 1795b4718b6e..77910b630a20 100644
--- a/src/main/webapp/app/shared/markdown-editor/markdown-editor.component.ts
+++ b/src/main/webapp/app/shared/markdown-editor/markdown-editor.component.ts
@@ -41,7 +41,7 @@ import { InteractiveSearchCommand } from 'app/shared/markdown-editor/commands/in
 
 export enum MarkdownEditorHeight {
     INLINE = 100,
-    SMALL = 200,
+    SMALL = 300,
     MEDIUM = 500,
     LARGE = 1000,
     EXTRA_LARGE = 1500,
diff --git a/src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.html b/src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.html
index 075014915cf8..52d80f585633 100644
--- a/src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.html
+++ b/src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.html
@@ -2,17 +2,18 @@
     <div
         #wrapper
         class="markdown-editor-wrapper"
-        [style.overflow]="inPreviewMode ? 'auto' : 'visible'"
-        [style.height.px]="inPreviewMode ? undefined : targetWrapperHeight"
+        [style.overflow]="inEditMode ? 'visible' : 'auto'"
+        [style.height.px]="inEditMode ? targetWrapperHeight : undefined"
         [style.cursor]="isResizing ? 'ns-resize' : undefined"
+        [style.min-height.px]="minWrapperHeight"
     >
         <nav ngbNav #actionPalette #nav="ngbNav" class="nav-tabs" [destroyOnHide]="false" (navChange)="onNavChanged($event)">
-            <ng-container ngbNavItem="editor_edit">
+            <ng-container [ngbNavItem]="TAB_EDIT">
                 @if (showEditButton) {
                     <a ngbNavLink class="btn-sm text-normal px-2 py-0 m-0"><span jhiTranslate="entity.action.edit"></span></a>
                 }
                 <ng-template ngbNavContent>
-                    <div class="markdown-editor markdown-editor-wrapper flex-column" [ngClass]="{ 'd-flex': !inPreviewMode, 'd-none': inPreviewMode }">
+                    <div class="markdown-editor markdown-editor-wrapper flex-column" [ngClass]="{ 'd-flex': inEditMode, 'd-none': !inEditMode }">
                         <jhi-monaco-editor
                             class="h-100"
                             [shrinkToFit]="false"
@@ -20,6 +21,7 @@
                             (textChanged)="onTextChanged($event)"
                             (contentHeightChanged)="onContentHeightChanged($event)"
                             (drop)="onFileDrop($event)"
+                            (onBlurEditor)="onBlurEditor.emit()"
                         />
                         @if (enableFileUpload) {
                             <div class="d-flex" #fileUploadFooter>
@@ -48,16 +50,31 @@
                     </div>
                 </ng-template>
             </ng-container>
-            <ng-container ngbNavItem="editor_preview">
+            <ng-container [ngbNavItem]="TAB_VISUAL">
+                @if (showVisualButton) {
+                    <a ngbNavLink class="btn-sm text-normal px-2 py-0 m-0" jhiTranslate="entity.action.visual"></a>
+                }
+                <ng-template ngbNavContent>
+                    <div class="mt-1 mb-2 mx-2 overflow-auto">
+                        <ng-content select="[#visual]"></ng-content>
+                    </div>
+                </ng-template>
+            </ng-container>
+            <ng-container [ngbNavItem]="TAB_PREVIEW">
                 @if (showPreviewButton) {
                     <a ngbNavLink class="btn-sm text-normal px-2 py-0 m-0"><span jhiTranslate="entity.action.preview"></span></a>
                 }
                 <ng-template ngbNavContent>
-                    <ng-content class="overflow-auto" select="[#previewMonaco]" />
-                    <!-- TODO preview handling for other exercise types -->
+                    <div class="mt-1 mb-2 mx-2 overflow-auto">
+                        <ng-content class="overflow-auto p-1" select="[#previewMonaco]">
+                            @if (showDefaultPreview) {
+                                <div class="p-0 m-0 background-editor-high markdown-preview" [innerHTML]="defaultPreviewHtml"></div>
+                            }
+                        </ng-content>
+                    </div>
                 </ng-template>
             </ng-container>
-            @if (!inPreviewMode) {
+            @if (inEditMode) {
                 <ng-container ngbNavItem>
                     <div class="d-flex align-items-center" [style.flex-flow]="'row wrap'">
                         <!-- Standard -->
@@ -194,7 +211,7 @@
         </nav>
         <div [ngbNavOutlet]="nav"></div>
     </div>
-    @if (enableResize && !inPreviewMode) {
+    @if (enableResize && inEditMode) {
         <div #resizePlaceholder [style.cursor]="isResizing ? 'ns-resize' : undefined" class="d-flex justify-content-center resize-placeholder">
             <fa-icon
                 cdkDrag
diff --git a/src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.scss b/src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.scss
index d0b4779091e5..77fb21831f07 100644
--- a/src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.scss
+++ b/src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.scss
@@ -1,10 +1,12 @@
 .markdown-editor-wrapper {
     background-color: var(--md-editor-background);
+    .markdown-editor {
+        border: 1px solid var(--border-color);
+    }
 }
 
 .resize-placeholder {
     border: 1px solid var(--border-color);
-    border-bottom: none;
 }
 
 .file-upload-footer-input {
diff --git a/src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.ts b/src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.ts
index e257b5209175..a3f9c027a8db 100644
--- a/src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.ts
+++ b/src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.ts
@@ -42,6 +42,10 @@ import { MonacoLectureAttachmentReferenceAction } from 'app/shared/monaco-editor
 import { LectureUnitType } from 'app/entities/lecture-unit/lectureUnit.model';
 import { ReferenceType } from 'app/shared/metis/metis.util';
 import { MonacoEditorOptionPreset } from 'app/shared/monaco-editor/model/monaco-editor-option-preset.model';
+import { SafeHtml } from '@angular/platform-browser';
+import { ArtemisMarkdownService } from 'app/shared/markdown.service';
+import { parseMarkdownForDomainActions } from 'app/shared/markdown-editor/monaco/markdown-editor-parsing.helper';
+import { COMMUNICATION_MARKDOWN_EDITOR_OPTIONS, DEFAULT_MARKDOWN_EDITOR_OPTIONS } from 'app/shared/monaco-editor/monaco-editor-option.helper';
 
 interface MarkdownActionsByGroup {
     standard: MonacoEditorAction[];
@@ -56,6 +60,8 @@ interface MarkdownActionsByGroup {
     meta: MonacoEditorAction[];
 }
 
+export type TextWithDomainAction = { text: string; action?: MonacoEditorDomainAction };
+
 const EXTERNAL_HEIGHT = 'external';
 
 /**
@@ -64,6 +70,7 @@ const EXTERNAL_HEIGHT = 'external';
  * from covering the border while shrinking.
  */
 const BORDER_WIDTH_OFFSET = 3;
+const BORDER_HEIGHT_OFFSET = 2;
 
 // TODO: Once the old markdown editor is gone, remove the style url.
 @Component({
@@ -98,17 +105,30 @@ export class MarkdownEditorMonacoComponent implements AfterContentInit, AfterVie
     @Input()
     showPreviewButton = true;
 
+    @Input()
+    showVisualButton = false;
+
+    @Input()
+    showDefaultPreview = true;
+
+    @Input()
+    useDefaultMarkdownEditorOptions = true;
+
     @Input()
     showEditButton = true;
 
+    /**
+     * If set to true, the editor will grow and shrink to fit its content. However, the height will still be constrained by {@link resizableMinHeight} and {@link resizableMaxHeight}.
+     * In particular, an empty editor will have the height of {@link resizableMinHeight} upon initialization, no matter what value {@link initialEditorHeight} has.
+     */
     @Input()
     linkEditorHeightToContentHeight = false;
 
     /**
      * The initial height the editor should have. If set to 'external', the editor will try to grow to the available space.
      */
-    @Input({ required: true })
-    initialEditorHeight: MarkdownEditorHeight | 'external';
+    @Input()
+    initialEditorHeight: MarkdownEditorHeight | 'external' = MarkdownEditorHeight.SMALL;
 
     @Input()
     resizableMaxHeight = MarkdownEditorHeight.LARGE;
@@ -158,10 +178,26 @@ export class MarkdownEditorMonacoComponent implements AfterContentInit, AfterVie
     @Output()
     onEditSelect = new EventEmitter<void>();
 
+    @Output()
+    onBlurEditor = new EventEmitter<void>();
+
+    @Output()
+    textWithDomainActionsFound = new EventEmitter<TextWithDomainAction[]>();
+
+    @Output()
+    onDefaultPreviewHtmlChanged = new EventEmitter<SafeHtml | undefined>();
+
+    @Output()
+    onLeaveVisualTab = new EventEmitter<void>();
+
+    defaultPreviewHtml: SafeHtml | undefined;
     inPreviewMode = false;
+    inVisualMode = false;
+    inEditMode = true;
     uniqueMarkdownEditorId: string;
     resizeObserver?: ResizeObserver;
     targetWrapperHeight?: number;
+    minWrapperHeight?: number;
     constrainDragPositionFn?: (pointerPosition: Point) => Point;
     isResizing = false;
     displayedActions: MarkdownActionsByGroup = {
@@ -186,19 +222,27 @@ export class MarkdownEditorMonacoComponent implements AfterContentInit, AfterVie
 
     colorSignal: Signal<string[]> = computed(() => [...this.colorToClassMap.keys()]);
 
+    static readonly TAB_EDIT = 'editor_edit';
+    static readonly TAB_PREVIEW = 'editor_preview';
+    static readonly TAB_VISUAL = 'editor_visual';
     readonly colorPickerMarginTop = 35;
     readonly colorPickerHeight = 110;
     // Icons
     protected readonly faQuestionCircle = faQuestionCircle;
     protected readonly faGripLines = faGripLines;
     protected readonly faAngleDown = faAngleDown;
-    // Types exposed to the template
+    // Types and values exposed to the template
     protected readonly LectureUnitType = LectureUnitType;
     protected readonly ReferenceType = ReferenceType;
+    // We cannot reference these static fields in the template, so we expose them here.
+    protected readonly TAB_EDIT = MarkdownEditorMonacoComponent.TAB_EDIT;
+    protected readonly TAB_PREVIEW = MarkdownEditorMonacoComponent.TAB_PREVIEW;
+    protected readonly TAB_VISUAL = MarkdownEditorMonacoComponent.TAB_VISUAL;
 
     constructor(
         private alertService: AlertService,
         private fileUploaderService: FileUploaderService,
+        private artemisMarkdown: ArtemisMarkdownService,
     ) {
         this.uniqueMarkdownEditorId = 'markdown-editor-' + uuid();
     }
@@ -206,24 +250,33 @@ export class MarkdownEditorMonacoComponent implements AfterContentInit, AfterVie
     ngAfterContentInit(): void {
         // Affects the template - done in this method to avoid ExpressionChangedAfterItHasBeenCheckedErrors.
         this.targetWrapperHeight = this.initialEditorHeight !== EXTERNAL_HEIGHT ? this.initialEditorHeight.valueOf() : undefined;
+        this.minWrapperHeight = this.resizableMinHeight.valueOf();
         this.constrainDragPositionFn = this.constrainDragPosition.bind(this);
         this.displayedActions = {
-            standard: this.defaultActions,
-            header: this.headerActions?.actions ?? [],
-            color: this.colorAction,
+            standard: this.filterDisplayedActions(this.defaultActions),
+            header: this.filterDisplayedActions(this.headerActions?.actions ?? []),
+            color: this.filterDisplayedAction(this.colorAction),
             domain: {
-                withoutOptions: this.domainActions.filter((action) => !(action instanceof MonacoEditorDomainActionWithOptions)),
-                withOptions: <MonacoEditorDomainActionWithOptions[]>this.domainActions.filter((action) => action instanceof MonacoEditorDomainActionWithOptions),
+                withoutOptions: this.filterDisplayedActions(this.domainActions.filter((action) => !(action instanceof MonacoEditorDomainActionWithOptions))),
+                withOptions: this.filterDisplayedActions(this.domainActions.filter((action) => action instanceof MonacoEditorDomainActionWithOptions)),
             },
-            lecture: this.lectureReferenceAction,
-            meta: this.metaActions,
+            lecture: this.filterDisplayedAction(this.lectureReferenceAction),
+            meta: this.filterDisplayedActions(this.metaActions),
         };
     }
 
+    filterDisplayedActions<T extends MonacoEditorAction>(actions: T[]): T[] {
+        return actions.filter((action) => !action.hideInEditor);
+    }
+
+    filterDisplayedAction<T extends MonacoEditorAction>(action?: T): T | undefined {
+        return action?.hideInEditor ? undefined : action;
+    }
+
     ngAfterViewInit(): void {
         this.adjustEditorDimensions();
         this.monacoEditor.setWordWrap(true);
-        this.monacoEditor.changeModel('markdown-content.custom-md', this._markdown, 'custom-md');
+        this.monacoEditor.changeModel('markdown-content.custom-md', this._markdown ?? '', 'custom-md');
         this.resizeObserver = new ResizeObserver(() => {
             this.adjustEditorDimensions();
         });
@@ -232,6 +285,9 @@ export class MarkdownEditorMonacoComponent implements AfterContentInit, AfterVie
         if (this.fileUploadFooter?.nativeElement) {
             this.resizeObserver.observe(this.fileUploadFooter.nativeElement);
         }
+        if (this.actionPalette?.nativeElement) {
+            this.resizeObserver.observe(this.actionPalette.nativeElement);
+        }
         [
             this.defaultActions,
             this.headerActions?.actions ?? [],
@@ -248,6 +304,10 @@ export class MarkdownEditorMonacoComponent implements AfterContentInit, AfterVie
                 }
                 this.monacoEditor.registerAction(action);
             });
+
+        if (this.useDefaultMarkdownEditorOptions) {
+            this.monacoEditor.applyOptionPreset(DEFAULT_MARKDOWN_EDITOR_OPTIONS);
+        }
     }
 
     /**
@@ -289,9 +349,9 @@ export class MarkdownEditorMonacoComponent implements AfterContentInit, AfterVie
      * Adjusts the height of the element when the content height changes.
      * @param newContentHeight The new height of the content in the editor.
      */
-    onContentHeightChanged(newContentHeight: number): void {
+    onContentHeightChanged(newContentHeight: number | undefined): void {
         if (this.linkEditorHeightToContentHeight) {
-            const totalHeight = newContentHeight + this.getElementClientHeight(this.fileUploadFooter) + this.getElementClientHeight(this.actionPalette);
+            const totalHeight = (newContentHeight ?? 0) + this.getElementClientHeight(this.fileUploadFooter) + this.getElementClientHeight(this.actionPalette);
             // Clamp the height so it is between the minimum and maximum height.
             this.targetWrapperHeight = Math.max(this.resizableMinHeight, Math.min(this.resizableMaxHeight, totalHeight));
         }
@@ -305,7 +365,7 @@ export class MarkdownEditorMonacoComponent implements AfterContentInit, AfterVie
         const elementHeight = this.getElementClientHeight(this.isInitialHeightExternal() ? this.fullElement : this.wrapper);
         const fileUploadFooterHeight = this.getElementClientHeight(this.fileUploadFooter);
         const actionPaletteHeight = this.getElementClientHeight(this.actionPalette);
-        return elementHeight - fileUploadFooterHeight - actionPaletteHeight;
+        return elementHeight - fileUploadFooterHeight - actionPaletteHeight - BORDER_HEIGHT_OFFSET;
     }
 
     /**
@@ -327,7 +387,9 @@ export class MarkdownEditorMonacoComponent implements AfterContentInit, AfterVie
      * Adjust the dimensions of the editor to fit the available space.
      */
     adjustEditorDimensions(): void {
-        this.monacoEditor.layoutWithFixedSize(this.getEditorWidth(), this.getEditorHeight());
+        this.onContentHeightChanged(this.monacoEditor.getContentHeight());
+        const editorHeight = this.getEditorHeight();
+        this.monacoEditor.layoutWithFixedSize(this.getEditorWidth(), editorHeight);
     }
 
     /**
@@ -335,13 +397,36 @@ export class MarkdownEditorMonacoComponent implements AfterContentInit, AfterVie
      * @param event The event that contains the new active tab.
      */
     onNavChanged(event: NgbNavChangeEvent) {
-        this.inPreviewMode = event.nextId === 'editor_preview';
-        if (!this.inPreviewMode) {
+        this.inPreviewMode = event.nextId === this.TAB_PREVIEW;
+        this.inVisualMode = event.nextId === this.TAB_VISUAL;
+        this.inEditMode = event.nextId === this.TAB_EDIT;
+        if (this.inEditMode) {
             this.adjustEditorDimensions();
             this.monacoEditor.focus();
-        } else {
+            this.onEditSelect.emit();
+        } else if (this.inPreviewMode) {
             this.onPreviewSelect.emit();
         }
+
+        // Some components need to know when the user leaves the visual tab, as it might make changes to the underlying data.
+        if (event.activeId === this.TAB_VISUAL) {
+            this.onLeaveVisualTab.emit();
+        }
+
+        // Parse the markdown when switching away from the edit tab or from visual to preview mode, as the visual mode may make changes to the markdown.
+        if (event.activeId === this.TAB_EDIT || (event.activeId === this.TAB_VISUAL && this.inPreviewMode)) {
+            this.parseMarkdown();
+        }
+    }
+
+    parseMarkdown(domainActionsToCheck: MonacoEditorDomainAction[] = this.domainActions): void {
+        if (this.showDefaultPreview) {
+            this.defaultPreviewHtml = this.artemisMarkdown.safeHtmlForMarkdown(this._markdown);
+            this.onDefaultPreviewHtmlChanged.emit(this.defaultPreviewHtml);
+        }
+        if (domainActionsToCheck.length && this._markdown) {
+            this.textWithDomainActionsFound.emit(parseMarkdownForDomainActions(this._markdown, domainActionsToCheck));
+        }
     }
 
     /**
@@ -434,7 +519,7 @@ export class MarkdownEditorMonacoComponent implements AfterContentInit, AfterVie
      * Enable the text field mode of the editor. This makes the editor look and behave like a normal text field.
      */
     enableTextFieldMode(): void {
-        this.monacoEditor.enableTextFieldMode();
+        this.monacoEditor.applyOptionPreset(COMMUNICATION_MARKDOWN_EDITOR_OPTIONS);
     }
 
     /**
diff --git a/src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-parsing.helper.ts b/src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-parsing.helper.ts
new file mode 100644
index 000000000000..058cacf8c2ba
--- /dev/null
+++ b/src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-parsing.helper.ts
@@ -0,0 +1,61 @@
+import { MonacoEditorDomainAction } from 'app/shared/monaco-editor/model/actions/monaco-editor-domain-action.model';
+import { escapeStringForUseInRegex } from 'app/shared/util/global.utils';
+import { TextWithDomainAction } from './markdown-editor-monaco.component';
+
+/**
+ * Searches for the domain actions in the given markdown text and returns the text split into parts, each part associated with the domain action it belongs to.
+ * Note that the text will be trimmed before being returned.
+ * @param markdown The markdown text to parse
+ * @param domainActions The domain actions to search for in the markdown
+ */
+export function parseMarkdownForDomainActions(markdown: string, domainActions: MonacoEditorDomainAction[]): TextWithDomainAction[] {
+    let remainingText = markdown;
+    const actionIdentifiersString = domainActions
+        .map((action) => action.getOpeningIdentifier())
+        .map((identifier) => identifier.replace('[', '').replace(']', ''))
+        .map(escapeStringForUseInRegex)
+        .join('|');
+    const textMappedToActionIdentifiers: TextWithDomainAction[] = [];
+
+    /*
+     * The following regex is used to split the text into parts, each part associated with the domain action it belongs to. It is structured as follows:
+     * 1. (?=   If an action is found, add the action identifier to the result of the split
+     * 2. \\[  look for the character '[' to determine the beginning of the action identifier
+     * 3. (${actionIdentifiersString}) look if after the '[' one of the element of actionIdentifiersString is contained
+     * 4. ] look for the character ']' to determine the end of the action identifier
+     * 5. ) ends the group
+     * Flags:
+     * - g: search in the whole string
+     * - m: match the regex over multiple lines
+     * - i: case-insensitive matching
+     */
+    const regex = new RegExp(`(?=\\[(${actionIdentifiersString})])`, 'gmi');
+    while (remainingText.length) {
+        const [textWithActionIdentifier] = remainingText.split(regex, 1);
+        remainingText = remainingText.substring(textWithActionIdentifier.length);
+        const textWithDomainAction = parseLineForDomainAction(textWithActionIdentifier.trim(), domainActions);
+        textMappedToActionIdentifiers.push(textWithDomainAction);
+    }
+
+    return textMappedToActionIdentifiers;
+}
+
+/**
+ * Checks if the given line contains any of the domain action identifiers and returns the text without the identifier along with the domain action it belongs to.
+ * @param text The text to parse
+ * @param domainActions The domain actions to search for in the text
+ */
+function parseLineForDomainAction(text: string, domainActions: MonacoEditorDomainAction[]): TextWithDomainAction {
+    for (const domainAction of domainActions) {
+        const possibleOpeningIdentifiers = [
+            domainAction.getOpeningIdentifier(),
+            domainAction.getOpeningIdentifier().toLowerCase(),
+            domainAction.getOpeningIdentifier().toUpperCase(),
+        ];
+        if (possibleOpeningIdentifiers.some((identifier) => text.indexOf(identifier) !== -1)) {
+            const trimmedLineWithoutIdentifier = possibleOpeningIdentifiers.reduce((line, identifier) => line.replace(identifier, ''), text).trim();
+            return { text: trimmedLineWithoutIdentifier, action: domainAction };
+        }
+    }
+    return { text: text.trim() };
+}
diff --git a/src/main/webapp/app/shared/metis/posting-markdown-editor/posting-markdown-editor.component.html b/src/main/webapp/app/shared/metis/posting-markdown-editor/posting-markdown-editor.component.html
index fb18ef521aa2..cd20f9b54615 100644
--- a/src/main/webapp/app/shared/metis/posting-markdown-editor/posting-markdown-editor.component.html
+++ b/src/main/webapp/app/shared/metis/posting-markdown-editor/posting-markdown-editor.component.html
@@ -12,6 +12,8 @@
         [enableFileUpload]="false"
         [colorAction]="undefined"
         [enableResize]="false"
+        [showDefaultPreview]="false"
+        [useDefaultMarkdownEditorOptions]="false"
         [linkEditorHeightToContentHeight]="true"
         [initialEditorHeight]="editorHeight"
         [resizableMinHeight]="editorHeight"
diff --git a/src/main/webapp/app/shared/monaco-editor/model/actions/communication/monaco-exercise-reference.action.ts b/src/main/webapp/app/shared/monaco-editor/model/actions/communication/monaco-exercise-reference.action.ts
index d9e2024b7513..014894dedd42 100644
--- a/src/main/webapp/app/shared/monaco-editor/model/actions/communication/monaco-exercise-reference.action.ts
+++ b/src/main/webapp/app/shared/monaco-editor/model/actions/communication/monaco-exercise-reference.action.ts
@@ -59,4 +59,8 @@ export class MonacoExerciseReferenceAction extends MonacoEditorDomainActionWithO
         super.dispose();
         this.disposableCompletionProvider?.dispose();
     }
+
+    getOpeningIdentifier(): string {
+        return '[exercise]';
+    }
 }
diff --git a/src/main/webapp/app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-credits.action.ts b/src/main/webapp/app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-credits.action.ts
new file mode 100644
index 000000000000..200a239de9ee
--- /dev/null
+++ b/src/main/webapp/app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-credits.action.ts
@@ -0,0 +1,20 @@
+import { MonacoEditorDomainAction } from 'app/shared/monaco-editor/model/actions/monaco-editor-domain-action.model';
+import * as monaco from 'monaco-editor';
+
+export class MonacoGradingCreditsAction extends MonacoEditorDomainAction {
+    static readonly ID = 'monaco-grading-credits.action';
+    static readonly IDENTIFIER = '[credits]';
+    static readonly TEXT = '0';
+
+    constructor() {
+        super(MonacoGradingCreditsAction.ID, 'artemisApp.assessmentInstructions.instructions.editor.addCredits', undefined, undefined, true);
+    }
+
+    run(editor: monaco.editor.ICodeEditor): void {
+        this.addTextWithDomainActionIdentifier(editor, MonacoGradingCreditsAction.TEXT, true, false);
+    }
+
+    getOpeningIdentifier(): string {
+        return MonacoGradingCreditsAction.IDENTIFIER;
+    }
+}
diff --git a/src/main/webapp/app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-criterion.action.ts b/src/main/webapp/app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-criterion.action.ts
new file mode 100644
index 000000000000..02302850bca5
--- /dev/null
+++ b/src/main/webapp/app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-criterion.action.ts
@@ -0,0 +1,22 @@
+import * as monaco from 'monaco-editor';
+import { MonacoEditorDomainAction } from '../monaco-editor-domain-action.model';
+import { MonacoGradingInstructionAction } from './monaco-grading-instruction.action';
+
+export class MonacoGradingCriterionAction extends MonacoEditorDomainAction {
+    static readonly ID = 'monaco-grading-criterion.action';
+    static readonly IDENTIFIER = '[criterion]';
+    static readonly TEXT = 'Add criterion title (only visible to tutors)';
+
+    constructor(private readonly gradingInstructionAction: MonacoGradingInstructionAction) {
+        super(MonacoGradingCriterionAction.ID, 'artemisApp.assessmentInstructions.instructions.editor.addCriterion');
+    }
+
+    run(editor: monaco.editor.ICodeEditor): void {
+        this.addTextWithDomainActionIdentifier(editor, MonacoGradingCriterionAction.TEXT, false, false);
+        this.gradingInstructionAction.executeInCurrentEditor();
+    }
+
+    getOpeningIdentifier(): string {
+        return MonacoGradingCriterionAction.IDENTIFIER;
+    }
+}
diff --git a/src/main/webapp/app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-description.action.ts b/src/main/webapp/app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-description.action.ts
new file mode 100644
index 000000000000..f04d861cb4d7
--- /dev/null
+++ b/src/main/webapp/app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-description.action.ts
@@ -0,0 +1,20 @@
+import * as monaco from 'monaco-editor';
+import { MonacoEditorDomainAction } from 'app/shared/monaco-editor/model/actions/monaco-editor-domain-action.model';
+
+export class MonacoGradingDescriptionAction extends MonacoEditorDomainAction {
+    static readonly ID = 'monaco-grading-description.action';
+    static readonly IDENTIFIER = '[description]';
+    static readonly TEXT = 'Add grading instruction here (only visible for tutors)';
+
+    constructor() {
+        super(MonacoGradingDescriptionAction.ID, 'artemisApp.assessmentInstructions.instructions.editor.addDescription', undefined, undefined, true);
+    }
+
+    run(editor: monaco.editor.ICodeEditor): void {
+        this.addTextWithDomainActionIdentifier(editor, MonacoGradingDescriptionAction.TEXT, true, false);
+    }
+
+    getOpeningIdentifier(): string {
+        return MonacoGradingDescriptionAction.IDENTIFIER;
+    }
+}
diff --git a/src/main/webapp/app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-feedback.action.ts b/src/main/webapp/app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-feedback.action.ts
new file mode 100644
index 000000000000..2dc1306eeffd
--- /dev/null
+++ b/src/main/webapp/app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-feedback.action.ts
@@ -0,0 +1,20 @@
+import * as monaco from 'monaco-editor';
+import { MonacoEditorDomainAction } from 'app/shared/monaco-editor/model/actions/monaco-editor-domain-action.model';
+
+export class MonacoGradingFeedbackAction extends MonacoEditorDomainAction {
+    static readonly ID = 'monaco-grading-feedback.action';
+    static readonly IDENTIFIER = '[feedback]';
+    static readonly TEXT = 'Add feedback for students here (visible for students)';
+
+    constructor() {
+        super(MonacoGradingFeedbackAction.ID, 'artemisApp.assessmentInstructions.instructions.editor.addFeedback', undefined, undefined, true);
+    }
+
+    run(editor: monaco.editor.ICodeEditor): void {
+        this.addTextWithDomainActionIdentifier(editor, MonacoGradingFeedbackAction.TEXT, true, false);
+    }
+
+    getOpeningIdentifier(): string {
+        return MonacoGradingFeedbackAction.IDENTIFIER;
+    }
+}
diff --git a/src/main/webapp/app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-instruction.action.ts b/src/main/webapp/app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-instruction.action.ts
new file mode 100644
index 000000000000..fa14b18da454
--- /dev/null
+++ b/src/main/webapp/app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-instruction.action.ts
@@ -0,0 +1,35 @@
+import * as monaco from 'monaco-editor';
+import { MonacoEditorDomainAction } from '../monaco-editor-domain-action.model';
+import { MonacoGradingCreditsAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-credits.action';
+import { MonacoGradingScaleAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-scale.action';
+import { MonacoGradingDescriptionAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-description.action';
+import { MonacoGradingFeedbackAction } from './monaco-grading-feedback.action';
+import { MonacoGradingUsageCountAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-usage-count.action';
+
+export class MonacoGradingInstructionAction extends MonacoEditorDomainAction {
+    static readonly ID = 'monaco-grading-instruction.action';
+    static readonly IDENTIFIER = '[instruction]';
+
+    constructor(
+        private readonly creditsAction: MonacoGradingCreditsAction,
+        private readonly scaleAction: MonacoGradingScaleAction,
+        private readonly descriptionAction: MonacoGradingDescriptionAction,
+        private readonly feedbackAction: MonacoGradingFeedbackAction,
+        private readonly usageCountAction: MonacoGradingUsageCountAction,
+    ) {
+        super(MonacoGradingInstructionAction.ID, 'artemisApp.assessmentInstructions.instructions.editor.addInstruction');
+    }
+
+    run(editor: monaco.editor.ICodeEditor): void {
+        this.addTextWithDomainActionIdentifier(editor, '', false, false);
+        this.creditsAction.executeInCurrentEditor();
+        this.scaleAction.executeInCurrentEditor();
+        this.descriptionAction.executeInCurrentEditor();
+        this.feedbackAction.executeInCurrentEditor();
+        this.usageCountAction.executeInCurrentEditor();
+    }
+
+    getOpeningIdentifier(): string {
+        return MonacoGradingInstructionAction.IDENTIFIER;
+    }
+}
diff --git a/src/main/webapp/app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-scale.action.ts b/src/main/webapp/app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-scale.action.ts
new file mode 100644
index 000000000000..53e1bd2b9485
--- /dev/null
+++ b/src/main/webapp/app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-scale.action.ts
@@ -0,0 +1,20 @@
+import { MonacoEditorDomainAction } from 'app/shared/monaco-editor/model/actions/monaco-editor-domain-action.model';
+import * as monaco from 'monaco-editor';
+
+export class MonacoGradingScaleAction extends MonacoEditorDomainAction {
+    static readonly ID = 'monaco-grading-scale.action';
+    static readonly IDENTIFIER = '[gradingScale]';
+    static readonly TEXT = 'Add instruction grading scale here (only visible for tutors)';
+
+    constructor() {
+        super(MonacoGradingScaleAction.ID, 'artemisApp.assessmentInstructions.instructions.editor.addScale', undefined, undefined, true);
+    }
+
+    run(editor: monaco.editor.ICodeEditor): void {
+        this.addTextWithDomainActionIdentifier(editor, MonacoGradingScaleAction.TEXT, true, false);
+    }
+
+    getOpeningIdentifier(): string {
+        return MonacoGradingScaleAction.IDENTIFIER;
+    }
+}
diff --git a/src/main/webapp/app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-usage-count.action.ts b/src/main/webapp/app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-usage-count.action.ts
new file mode 100644
index 000000000000..b68700d3e094
--- /dev/null
+++ b/src/main/webapp/app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-usage-count.action.ts
@@ -0,0 +1,20 @@
+import * as monaco from 'monaco-editor';
+import { MonacoEditorDomainAction } from 'app/shared/monaco-editor/model/actions/monaco-editor-domain-action.model';
+
+export class MonacoGradingUsageCountAction extends MonacoEditorDomainAction {
+    static readonly ID = 'monaco-grading-usage-count.action';
+    static readonly IDENTIFIER = '[maxCountInScore]';
+    static readonly TEXT = '0';
+
+    constructor() {
+        super(MonacoGradingUsageCountAction.ID, 'artemisApp.assessmentInstructions.instructions.editor.addUsageCount', undefined, undefined, true);
+    }
+
+    run(editor: monaco.editor.ICodeEditor): void {
+        this.addTextWithDomainActionIdentifier(editor, MonacoGradingUsageCountAction.TEXT, true, false);
+    }
+
+    getOpeningIdentifier(): string {
+        return MonacoGradingUsageCountAction.IDENTIFIER;
+    }
+}
diff --git a/src/main/webapp/app/shared/monaco-editor/model/actions/monaco-editor-action.model.ts b/src/main/webapp/app/shared/monaco-editor/model/actions/monaco-editor-action.model.ts
index 8a022d32b7fc..07c6c89e4ac5 100644
--- a/src/main/webapp/app/shared/monaco-editor/model/actions/monaco-editor-action.model.ts
+++ b/src/main/webapp/app/shared/monaco-editor/model/actions/monaco-editor-action.model.ts
@@ -11,6 +11,7 @@ export abstract class MonacoEditorAction implements monaco.editor.IActionDescrip
     keybindings?: number[];
 
     icon?: IconDefinition;
+    readonly hideInEditor: boolean;
 
     /**
      * The disposable action that is returned by `editor.addAction`. This is required to unregister the action from the editor.
@@ -28,12 +29,14 @@ export abstract class MonacoEditorAction implements monaco.editor.IActionDescrip
      * @param translationKey The translation key of the action label.
      * @param icon The icon to display in the editor toolbar, if any.
      * @param keybindings The keybindings to trigger the action, if any.
+     * @param hideInEditor Whether to hide the action in the editor toolbar. Defaults to false.
      */
-    constructor(id: string, translationKey: string, icon?: IconDefinition, keybindings?: number[]) {
+    constructor(id: string, translationKey: string, icon?: IconDefinition, keybindings?: number[], hideInEditor?: boolean) {
         this.id = id;
         this.translationKey = translationKey;
         this.icon = icon;
         this.keybindings = keybindings;
+        this.hideInEditor = hideInEditor ?? false;
     }
 
     /**
@@ -61,6 +64,7 @@ export abstract class MonacoEditorAction implements monaco.editor.IActionDescrip
      */
     dispose(): void {
         this.disposableAction?.dispose();
+        this.disposableAction = undefined;
         this._editor = undefined;
     }
 
@@ -321,6 +325,10 @@ export abstract class MonacoEditorAction implements monaco.editor.IActionDescrip
         }
     }
 
+    getPosition(editor: monaco.editor.ICodeEditor): monaco.IPosition {
+        return editor.getPosition() ?? { lineNumber: 1, column: 1 };
+    }
+
     /**
      * Sets the selection of the given editor to the given range and reveals it in the center of the editor.
      * @param editor The editor to set the selection in.
@@ -331,6 +339,24 @@ export abstract class MonacoEditorAction implements monaco.editor.IActionDescrip
         editor.revealRangeInCenter(selection);
     }
 
+    /**
+     * Clears the current selection in the given editor, but preserves the cursor position.
+     * @param editor The editor to clear the selection in.
+     */
+    clearSelection(editor: monaco.editor.ICodeEditor): void {
+        const position = this.getPosition(editor);
+        this.setSelection(editor, new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column));
+    }
+
+    /**
+     * Adjusts the cursor position so it is at the end of the current line.
+     * @param editor The editor to adjust the cursor position in.
+     */
+    moveCursorToEndOfLine(editor: monaco.editor.ICodeEditor): void {
+        const position: monaco.IPosition = { ...this.getPosition(editor), column: Number.POSITIVE_INFINITY };
+        this.setPosition(editor, position);
+    }
+
     /**
      * Toggles the fullscreen mode of the given element. If no element is provided, the editor's DOM node is used.
      * @param editor The editor to toggle the fullscreen mode for.
diff --git a/src/main/webapp/app/shared/monaco-editor/model/actions/monaco-editor-domain-action.model.ts b/src/main/webapp/app/shared/monaco-editor/model/actions/monaco-editor-domain-action.model.ts
index c914241efa76..2a9999e96fd2 100644
--- a/src/main/webapp/app/shared/monaco-editor/model/actions/monaco-editor-domain-action.model.ts
+++ b/src/main/webapp/app/shared/monaco-editor/model/actions/monaco-editor-domain-action.model.ts
@@ -1,7 +1,36 @@
 import { MonacoEditorAction } from './monaco-editor-action.model';
+import * as monaco from 'monaco-editor';
 
 /**
  * Class representing domain actions for Artemis-specific use cases.
- * TODO: In the future, each domain action should have its own logic and a unique identifier (e.g. multiple choice questions, drag and drop questions).
  */
-export abstract class MonacoEditorDomainAction extends MonacoEditorAction {}
+export abstract class MonacoEditorDomainAction extends MonacoEditorAction {
+    abstract getOpeningIdentifier(): string;
+
+    /**
+     * Inserts, below the current line, a new line with the domain action identifier and the given text.
+     * Afterward, if specified, sets the selection to cover exactly the provided text part.
+     * @param editor The editor in which to insert the text
+     * @param text The text to insert. Can be empty.
+     * @param indent Whether to indent the inserted text with a tab.
+     * @param updateSelection Whether to update the selection after inserting the text
+     */
+    addTextWithDomainActionIdentifier(editor: monaco.editor.ICodeEditor, text: string, indent = false, updateSelection = true): void {
+        this.clearSelection(editor);
+        this.moveCursorToEndOfLine(editor);
+        const identifierWithText = text ? `${this.getOpeningIdentifier()} ${text}` : this.getOpeningIdentifier();
+        const insertText = indent ? `\n\t${identifierWithText}` : `\n${identifierWithText}`;
+        this.insertTextAtPosition(editor, this.getPosition(editor), insertText);
+        if (updateSelection) {
+            const newPosition = this.getPosition(editor);
+            // Set the selection to cover exactly the text part
+            this.setSelection(editor, {
+                startLineNumber: newPosition.lineNumber,
+                endLineNumber: newPosition.lineNumber,
+                startColumn: newPosition.column - text.length,
+                endColumn: newPosition.column,
+            });
+        }
+        editor.focus();
+    }
+}
diff --git a/src/main/webapp/app/shared/monaco-editor/model/actions/monaco-formula.action.ts b/src/main/webapp/app/shared/monaco-editor/model/actions/monaco-formula.action.ts
index 4a605b733520..e7d5de9d0324 100644
--- a/src/main/webapp/app/shared/monaco-editor/model/actions/monaco-formula.action.ts
+++ b/src/main/webapp/app/shared/monaco-editor/model/actions/monaco-formula.action.ts
@@ -20,7 +20,11 @@ export class MonacoFormulaAction extends MonacoEditorDomainAction {
      * @param editor The editor in which to toggle formula text.
      */
     run(editor: monaco.editor.ICodeEditor) {
-        this.toggleDelimiterAroundSelection(editor, FORMULA_OPEN_DELIMITER, FORMULA_CLOSE_DELIMITER, MonacoFormulaAction.DEFAULT_FORMULA);
+        this.toggleDelimiterAroundSelection(editor, this.getOpeningIdentifier(), FORMULA_CLOSE_DELIMITER, MonacoFormulaAction.DEFAULT_FORMULA);
         editor.focus();
     }
+
+    getOpeningIdentifier(): string {
+        return FORMULA_OPEN_DELIMITER;
+    }
 }
diff --git a/src/main/webapp/app/shared/monaco-editor/model/actions/monaco-task.action.ts b/src/main/webapp/app/shared/monaco-editor/model/actions/monaco-task.action.ts
index 3a2aa120375a..e1fe3f87b53e 100644
--- a/src/main/webapp/app/shared/monaco-editor/model/actions/monaco-task.action.ts
+++ b/src/main/webapp/app/shared/monaco-editor/model/actions/monaco-task.action.ts
@@ -6,7 +6,8 @@ import { MonacoEditorDomainAction } from 'app/shared/monaco-editor/model/actions
  */
 export class MonacoTaskAction extends MonacoEditorDomainAction {
     static readonly ID = 'monaco-task.action';
-    static readonly INSERT_TASK_TEXT = '[task][Task Short Description](testCaseName)\n';
+    static readonly TEXT = '[Task Short Description](testCaseName)\n';
+
     constructor() {
         super(MonacoTaskAction.ID, 'artemisApp.programmingExercise.problemStatement.taskCommand', undefined, undefined);
     }
@@ -16,7 +17,11 @@ export class MonacoTaskAction extends MonacoEditorDomainAction {
      * @param editor The editor in which to insert the task.
      */
     run(editor: monaco.editor.ICodeEditor): void {
-        this.replaceTextAtCurrentSelection(editor, MonacoTaskAction.INSERT_TASK_TEXT);
+        this.replaceTextAtCurrentSelection(editor, `${this.getOpeningIdentifier()}${MonacoTaskAction.TEXT}`);
         editor.focus();
     }
+
+    getOpeningIdentifier(): string {
+        return '[task]';
+    }
 }
diff --git a/src/main/webapp/app/shared/monaco-editor/model/actions/monaco-test-case.action.ts b/src/main/webapp/app/shared/monaco-editor/model/actions/monaco-test-case.action.ts
index fc243b3943ee..e2d48c615709 100644
--- a/src/main/webapp/app/shared/monaco-editor/model/actions/monaco-test-case.action.ts
+++ b/src/main/webapp/app/shared/monaco-editor/model/actions/monaco-test-case.action.ts
@@ -74,4 +74,8 @@ export class MonacoTestCaseAction extends MonacoEditorDomainActionWithOptions {
         this.replaceTextAtCurrentSelection(editor, args?.selectedItem?.value ?? MonacoTestCaseAction.DEFAULT_INSERT_TEXT);
         editor.focus();
     }
+
+    getOpeningIdentifier(): string {
+        return '(';
+    }
 }
diff --git a/src/main/webapp/app/shared/monaco-editor/model/actions/quiz/monaco-correct-multiple-choice-answer.action.ts b/src/main/webapp/app/shared/monaco-editor/model/actions/quiz/monaco-correct-multiple-choice-answer.action.ts
new file mode 100644
index 000000000000..e8307539ec41
--- /dev/null
+++ b/src/main/webapp/app/shared/monaco-editor/model/actions/quiz/monaco-correct-multiple-choice-answer.action.ts
@@ -0,0 +1,20 @@
+import { MonacoEditorDomainAction } from 'app/shared/monaco-editor/model/actions/monaco-editor-domain-action.model';
+import * as monaco from 'monaco-editor';
+
+export class MonacoCorrectMultipleChoiceAnswerAction extends MonacoEditorDomainAction {
+    static readonly ID = 'artemisApp.multipleChoiceQuestion.editor.addCorrectAnswerOption';
+    static readonly IDENTIFIER = '[correct]';
+    static readonly TEXT = 'Enter a correct answer option here';
+
+    constructor() {
+        super(MonacoCorrectMultipleChoiceAnswerAction.ID, 'artemisApp.multipleChoiceQuestion.editor.addCorrectAnswerOption');
+    }
+
+    run(editor: monaco.editor.ICodeEditor): void {
+        this.addTextWithDomainActionIdentifier(editor, MonacoCorrectMultipleChoiceAnswerAction.TEXT);
+    }
+
+    getOpeningIdentifier(): string {
+        return MonacoCorrectMultipleChoiceAnswerAction.IDENTIFIER;
+    }
+}
diff --git a/src/main/webapp/app/shared/monaco-editor/model/actions/quiz/monaco-quiz-explanation.action.ts b/src/main/webapp/app/shared/monaco-editor/model/actions/quiz/monaco-quiz-explanation.action.ts
new file mode 100644
index 000000000000..6cc078baa448
--- /dev/null
+++ b/src/main/webapp/app/shared/monaco-editor/model/actions/quiz/monaco-quiz-explanation.action.ts
@@ -0,0 +1,20 @@
+import { MonacoEditorDomainAction } from 'app/shared/monaco-editor/model/actions/monaco-editor-domain-action.model';
+import * as monaco from 'monaco-editor';
+
+export class MonacoQuizExplanationAction extends MonacoEditorDomainAction {
+    static readonly ID = 'monaco-quiz-explanation.action';
+    static readonly IDENTIFIER = '[exp]';
+    static readonly TEXT = 'Add an explanation here (only visible in feedback after quiz has ended)';
+
+    constructor() {
+        super(MonacoQuizExplanationAction.ID, 'artemisApp.multipleChoiceQuestion.editor.addExplanation');
+    }
+
+    run(editor: monaco.editor.ICodeEditor): void {
+        this.addTextWithDomainActionIdentifier(editor, MonacoQuizExplanationAction.TEXT, true);
+    }
+
+    getOpeningIdentifier(): string {
+        return MonacoQuizExplanationAction.IDENTIFIER;
+    }
+}
diff --git a/src/main/webapp/app/shared/monaco-editor/model/actions/quiz/monaco-quiz-hint.action.ts b/src/main/webapp/app/shared/monaco-editor/model/actions/quiz/monaco-quiz-hint.action.ts
new file mode 100644
index 000000000000..29c320bf016b
--- /dev/null
+++ b/src/main/webapp/app/shared/monaco-editor/model/actions/quiz/monaco-quiz-hint.action.ts
@@ -0,0 +1,20 @@
+import { MonacoEditorDomainAction } from 'app/shared/monaco-editor/model/actions/monaco-editor-domain-action.model';
+import * as monaco from 'monaco-editor';
+
+export class MonacoQuizHintAction extends MonacoEditorDomainAction {
+    static readonly ID = 'monaco-quiz-hint.action';
+    static readonly IDENTIFIER = '[hint]';
+    static readonly TEXT = 'Add a hint here (visible during the quiz via ?-Button)';
+
+    constructor() {
+        super(MonacoQuizHintAction.ID, 'artemisApp.multipleChoiceQuestion.editor.addHint');
+    }
+
+    run(editor: monaco.editor.ICodeEditor): void {
+        this.addTextWithDomainActionIdentifier(editor, MonacoQuizHintAction.TEXT, true);
+    }
+
+    getOpeningIdentifier(): string {
+        return MonacoQuizHintAction.IDENTIFIER;
+    }
+}
diff --git a/src/main/webapp/app/shared/monaco-editor/model/actions/quiz/monaco-wrong-multiple-choice-answer.action.ts b/src/main/webapp/app/shared/monaco-editor/model/actions/quiz/monaco-wrong-multiple-choice-answer.action.ts
new file mode 100644
index 000000000000..7c682072eb5a
--- /dev/null
+++ b/src/main/webapp/app/shared/monaco-editor/model/actions/quiz/monaco-wrong-multiple-choice-answer.action.ts
@@ -0,0 +1,20 @@
+import * as monaco from 'monaco-editor';
+import { MonacoEditorDomainAction } from 'app/shared/monaco-editor/model/actions/monaco-editor-domain-action.model';
+
+export class MonacoWrongMultipleChoiceAnswerAction extends MonacoEditorDomainAction {
+    static readonly ID = 'monaco-incorrect-multiple-choice-answer.action';
+    static readonly IDENTIFIER = '[wrong]';
+    static readonly TEXT = 'Enter a wrong answer option here';
+
+    constructor() {
+        super(MonacoWrongMultipleChoiceAnswerAction.ID, 'artemisApp.multipleChoiceQuestion.editor.addInCorrectAnswerOption');
+    }
+
+    run(editor: monaco.editor.ICodeEditor): void {
+        this.addTextWithDomainActionIdentifier(editor, MonacoWrongMultipleChoiceAnswerAction.TEXT);
+    }
+
+    getOpeningIdentifier(): string {
+        return MonacoWrongMultipleChoiceAnswerAction.IDENTIFIER;
+    }
+}
diff --git a/src/main/webapp/app/shared/monaco-editor/model/monaco-editor-option-preset.model.ts b/src/main/webapp/app/shared/monaco-editor/model/monaco-editor-option-preset.model.ts
index b4ddcdc5a58d..e3470bdb6837 100644
--- a/src/main/webapp/app/shared/monaco-editor/model/monaco-editor-option-preset.model.ts
+++ b/src/main/webapp/app/shared/monaco-editor/model/monaco-editor-option-preset.model.ts
@@ -1,17 +1,19 @@
 import * as monaco from 'monaco-editor';
 
+export type MonacoEditorOptions = monaco.editor.IEditorOptions;
+
 /**
  * A preset of Monaco Editor options that can be applied to an editor for specific use cases, e.g. short answer quiz questions.
  * Presets are defined in the file monaco-editor-option.helper.ts.
  */
 export class MonacoEditorOptionPreset {
-    constructor(private options: monaco.editor.IEditorOptions) {}
+    constructor(private options: MonacoEditorOptions) {}
 
     /**
      * Update the editor options with the preset options.
      * @param editor The editor to which the options should be applied.
      */
-    apply(editor: monaco.editor.IStandaloneCodeEditor): void {
+    apply(editor: monaco.editor.ICodeEditor): void {
         editor.updateOptions(this.options);
     }
 }
diff --git a/src/main/webapp/app/shared/monaco-editor/monaco-editor-option.helper.ts b/src/main/webapp/app/shared/monaco-editor/monaco-editor-option.helper.ts
index d9c13af84836..ea36346ec1d3 100644
--- a/src/main/webapp/app/shared/monaco-editor/monaco-editor-option.helper.ts
+++ b/src/main/webapp/app/shared/monaco-editor/monaco-editor-option.helper.ts
@@ -1,4 +1,4 @@
-import { MonacoEditorOptionPreset } from 'app/shared/monaco-editor/model/monaco-editor-option-preset.model';
+import { MonacoEditorOptionPreset, MonacoEditorOptions } from 'app/shared/monaco-editor/model/monaco-editor-option-preset.model';
 
 export const SHORT_ANSWER_QUIZ_QUESTION_EDITOR_OPTIONS = new MonacoEditorOptionPreset({
     // Hide the gutter
@@ -14,3 +14,40 @@ export const SHORT_ANSWER_QUIZ_QUESTION_EDITOR_OPTIONS = new MonacoEditorOptionP
     // Disable line highlighting
     renderLineHighlight: 'none',
 });
+
+const defaultMarkdownOptions: MonacoEditorOptions = {
+    // Sets up the layout to make the editor look more like a text field (no line numbers, margin, or highlights).
+    lineNumbers: 'off',
+    glyphMargin: false,
+    folding: false,
+    lineDecorationsWidth: '1ch',
+    lineNumbersMinChars: 0,
+    padding: {
+        top: 5,
+    },
+    renderLineHighlight: 'none',
+    // Only show scrollbars if required.
+    scrollbar: {
+        vertical: 'auto',
+        horizontal: 'auto',
+    },
+    overviewRulerLanes: 0,
+    hideCursorInOverviewRuler: true,
+    // The suggestions from showWords are shared between editors of the same language, so we disable them.
+    suggest: {
+        showWords: false,
+    },
+    // We use the 'simple' strategy for word wraps to prevent performance issues. This prevents us from switching to a different font as the lines would no longer break correctly.
+    wordWrap: 'on',
+    wrappingStrategy: 'simple',
+    selectionHighlight: false,
+    occurrencesHighlight: 'off',
+};
+
+export const DEFAULT_MARKDOWN_EDITOR_OPTIONS = new MonacoEditorOptionPreset(defaultMarkdownOptions);
+
+export const COMMUNICATION_MARKDOWN_EDITOR_OPTIONS = new MonacoEditorOptionPreset({
+    ...defaultMarkdownOptions,
+    // Separates the editor suggest widget from the editor's layout. It will stick to the page, but it won't interfere with other elements.
+    fixedOverflowWidgets: true,
+});
diff --git a/src/main/webapp/app/shared/monaco-editor/monaco-editor.component.ts b/src/main/webapp/app/shared/monaco-editor/monaco-editor.component.ts
index e7c5908d1a9a..1f28308ecb11 100644
--- a/src/main/webapp/app/shared/monaco-editor/monaco-editor.component.ts
+++ b/src/main/webapp/app/shared/monaco-editor/monaco-editor.component.ts
@@ -100,8 +100,12 @@ export class MonacoEditorComponent implements OnInit, OnDestroy {
     @Output()
     contentHeightChanged = new EventEmitter<number>();
 
+    @Output()
+    onBlurEditor = new EventEmitter<void>();
+
     private contentHeightListener?: monaco.IDisposable;
     private textChangedListener?: monaco.IDisposable;
+    private blurEditorWidgetListener?: monaco.IDisposable;
     private textChangedEmitTimeout?: NodeJS.Timeout;
 
     ngOnInit(): void {
@@ -120,6 +124,10 @@ export class MonacoEditorComponent implements OnInit, OnDestroy {
             }
         });
 
+        this.blurEditorWidgetListener = this._editor.onDidBlurEditorWidget(() => {
+            this.onBlurEditor.emit();
+        });
+
         this.themeSubscription = this.themeService.getCurrentThemeObservable().subscribe((theme) => this.changeTheme(theme));
     }
 
@@ -129,6 +137,7 @@ export class MonacoEditorComponent implements OnInit, OnDestroy {
         this.themeSubscription?.unsubscribe();
         this.textChangedListener?.dispose();
         this.contentHeightListener?.dispose();
+        this.blurEditorWidgetListener?.dispose();
     }
 
     private emitTextChangeEvent() {
@@ -393,43 +402,6 @@ export class MonacoEditorComponent implements OnInit, OnDestroy {
         });
     }
 
-    /**
-     * Enables a text field mode for the editor. This will make the editor look more like a text field and less like a code editor.
-     * In particular, line numbers, margins, and highlights will be disabled.
-     */
-    enableTextFieldMode(): void {
-        this._editor.updateOptions({
-            // Sets up the layout to make the editor look more like a text field (no line numbers, margin, or highlights).
-            lineNumbers: 'off',
-            glyphMargin: false,
-            folding: false,
-            lineDecorationsWidth: '1ch',
-            lineNumbersMinChars: 0,
-            padding: {
-                top: 5,
-            },
-            renderLineHighlight: 'none',
-            selectionHighlight: false,
-            occurrencesHighlight: 'off',
-            // Only show scrollbars if required.
-            scrollbar: {
-                vertical: 'auto',
-                horizontal: 'auto',
-            },
-            overviewRulerLanes: 0,
-            hideCursorInOverviewRuler: true,
-            // The suggestions from showWords are shared between editors of the same language.
-            suggest: {
-                showWords: false,
-            },
-            // Separates the editor suggest widget from the editor's layout. It will stick to the page, but it won't interfere with other elements.
-            fixedOverflowWidgets: true,
-            // We use the 'simple' strategy for word wraps to prevent performance issues. This prevents us from switching to a different font as the lines would no longer break correctly.
-            wrappingStrategy: 'simple',
-        });
-        this.setWordWrap(true);
-    }
-
     /**
      * Applies the given options to the editor.
      * @param options The options to apply.
diff --git a/src/test/javascript/spec/component/admin/legal-document-update.component.spec.ts b/src/test/javascript/spec/component/admin/legal-document-update.component.spec.ts
index c9f6b2ebd4ee..bbec5290351b 100644
--- a/src/test/javascript/spec/component/admin/legal-document-update.component.spec.ts
+++ b/src/test/javascript/spec/component/admin/legal-document-update.component.spec.ts
@@ -6,7 +6,6 @@ import { UnsavedChangesWarningComponent } from 'app/admin/legal/unsaved-changes-
 import { ButtonComponent } from 'app/shared/components/button.component';
 import { TranslateDirective } from 'app/shared/language/translate.directive';
 import { ArtemisTestModule } from '../../test.module';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
 import { JhiLanguageHelper } from 'app/core/language/language.helper';
 import { MockNgbModalService } from '../../helpers/mocks/service/mock-ngb-modal.service';
 import { MockLanguageHelper } from '../../helpers/mocks/service/mock-translate.service';
@@ -19,6 +18,7 @@ import { ActivatedRoute, UrlSegment } from '@angular/router';
 import { of } from 'rxjs';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { PrivacyStatement } from 'app/entities/privacy-statement.model';
+import { MarkdownEditorMonacoComponent } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
 
 describe('LegalDocumentUpdateComponent', () => {
     let component: LegalDocumentUpdateComponent;
@@ -35,7 +35,7 @@ describe('LegalDocumentUpdateComponent', () => {
                 MockComponent(UnsavedChangesWarningComponent),
                 MockComponent(ButtonComponent),
                 MockDirective(TranslateDirective),
-                MockComponent(MarkdownEditorComponent),
+                MockComponent(MarkdownEditorMonacoComponent),
                 MockComponent(ModePickerComponent),
                 MockPipe(ArtemisTranslatePipe),
             ],
@@ -117,7 +117,7 @@ describe('LegalDocumentUpdateComponent', () => {
     it('should correctly determine unsaved changes', () => {
         component.unsavedChanges = false;
         component.legalDocument.text = 'text';
-        component.checkUnsavedChanges('changed text');
+        component.onContentChanged('changed text');
         expect(component.unsavedChanges).toBeTrue();
     });
 
@@ -135,7 +135,7 @@ describe('LegalDocumentUpdateComponent', () => {
                 updateFile = jest.spyOn(legalDocumentService, 'updateImprint').mockReturnValue(of(returnValue));
             }
             component.markdownEditor.markdown = 'text';
-            component.unsavedChanges = true;
+            component.onContentChanged('text');
             const expected = new LegalDocument(documentType, LegalDocumentLanguage.GERMAN);
             expected.text = 'text';
             fixture.detectChanges();
@@ -149,13 +149,12 @@ describe('LegalDocumentUpdateComponent', () => {
             expect(component.unsavedChanges).toBeFalse();
         }),
     );
-    it('should set the value of the markdown editor when switching to the edit mode if the language is changed while in preview mode', () => {
+    it('should set the value of the markdown editor when the language is changed while in preview mode', () => {
         setupRoutes(LegalDocumentType.PRIVACY_STATEMENT);
         const returnValue = new PrivacyStatement(LegalDocumentLanguage.GERMAN);
         returnValue.text = 'new content';
-        const updateTextOnEditSelect = jest.spyOn(component, 'updateTextIfLanguageChangedInPreview').mockImplementation();
+        const parseMarkdownStub = jest.spyOn(component.markdownEditor, 'parseMarkdown').mockImplementation();
         component.markdownEditor.markdown = 'text';
-        component.markdownEditor.previewMode = true;
         component.unsavedChanges = false;
         component.ngOnInit();
         const loadFile = jest.spyOn(legalDocumentService, 'getPrivacyStatementForUpdate').mockReturnValue(of(returnValue));
@@ -164,7 +163,7 @@ describe('LegalDocumentUpdateComponent', () => {
         expect(loadFile).toHaveBeenCalledOnce();
         expect(component.legalDocument.text).toBe('new content');
         component.markdownEditor.onEditSelect.emit();
-        expect(updateTextOnEditSelect).toHaveBeenCalledOnce();
+        expect(parseMarkdownStub).toHaveBeenCalledOnce();
     });
 
     function setupRoutes(documentType: LegalDocumentType) {
diff --git a/src/test/javascript/spec/component/competencies/competency-form.component.spec.ts b/src/test/javascript/spec/component/competencies/competency-form.component.spec.ts
index ebe7506fbc81..40ef3c893792 100644
--- a/src/test/javascript/spec/component/competencies/competency-form.component.spec.ts
+++ b/src/test/javascript/spec/component/competencies/competency-form.component.spec.ts
@@ -7,7 +7,7 @@ import { Competency, CompetencyTaxonomy } from 'app/entities/competency.model';
 import { TextUnit } from 'app/entities/lecture-unit/textUnit.model';
 import { Lecture } from 'app/entities/lecture.model';
 import { LectureUnitService } from 'app/lecture/lecture-unit/lecture-unit-management/lectureUnit.service';
-import { MockProvider } from 'ng-mocks';
+import { MockComponent, MockProvider } from 'ng-mocks';
 import { of } from 'rxjs';
 import { ArtemisTestModule } from '../../test.module';
 import { MockTranslateService } from '../../helpers/mocks/service/mock-translate.service';
@@ -17,6 +17,8 @@ import { CompetencyFormComponent } from 'app/course/competencies/forms/competenc
 import { CourseCompetencyFormData } from 'app/course/competencies/forms/course-competency-form.component';
 import { By } from '@angular/platform-browser';
 import { CommonCourseCompetencyFormComponent } from 'app/course/competencies/forms/common-course-competency-form.component';
+import { MarkdownEditorMonacoComponent } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
+import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown-editor.module';
 
 describe('CompetencyFormComponent', () => {
     let competencyFormComponentFixture: ComponentFixture<CompetencyFormComponent>;
@@ -30,6 +32,10 @@ describe('CompetencyFormComponent', () => {
             declarations: [],
             providers: [MockProvider(CompetencyService), MockProvider(LectureUnitService), { provide: TranslateService, useClass: MockTranslateService }],
         })
+            .overrideModule(ArtemisMarkdownEditorModule, {
+                remove: { exports: [MarkdownEditorMonacoComponent] },
+                add: { exports: [MockComponent(MarkdownEditorMonacoComponent)], declarations: [MockComponent(MarkdownEditorMonacoComponent)] },
+            })
             .compileComponents()
             .then(() => {
                 competencyFormComponentFixture = TestBed.createComponent(CompetencyFormComponent);
diff --git a/src/test/javascript/spec/component/competencies/edit-competency.component.spec.ts b/src/test/javascript/spec/component/competencies/edit-competency.component.spec.ts
index 9581c68a404a..88b261712f1f 100644
--- a/src/test/javascript/spec/component/competencies/edit-competency.component.spec.ts
+++ b/src/test/javascript/spec/component/competencies/edit-competency.component.spec.ts
@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MockProvider } from 'ng-mocks';
+import { MockComponent, MockProvider } from 'ng-mocks';
 import { AlertService } from 'app/core/util/alert.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import { of } from 'rxjs';
@@ -15,6 +15,8 @@ import { MockRouter } from '../../helpers/mocks/mock-router';
 import { CompetencyFormStubComponent } from './competency-form-stub.component';
 import { ArtemisTestModule } from '../../test.module';
 import { CompetencyFormComponent } from 'app/course/competencies/forms/competency/competency-form.component';
+import { MarkdownEditorMonacoComponent } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
+import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown-editor.module';
 
 describe('EditCompetencyComponent', () => {
     let editCompetencyComponentFixture: ComponentFixture<EditCompetencyComponent>;
@@ -56,6 +58,10 @@ describe('EditCompetencyComponent', () => {
             ],
             schemas: [],
         })
+            .overrideModule(ArtemisMarkdownEditorModule, {
+                remove: { exports: [MarkdownEditorMonacoComponent] },
+                add: { exports: [MockComponent(MarkdownEditorMonacoComponent)], declarations: [MockComponent(MarkdownEditorMonacoComponent)] },
+            })
             .compileComponents()
             .then(() => {
                 editCompetencyComponentFixture = TestBed.createComponent(EditCompetencyComponent);
diff --git a/src/test/javascript/spec/component/competencies/edit-prerequisite.component.spec.ts b/src/test/javascript/spec/component/competencies/edit-prerequisite.component.spec.ts
index 50e21caf9dfa..7e1009b2d1e8 100644
--- a/src/test/javascript/spec/component/competencies/edit-prerequisite.component.spec.ts
+++ b/src/test/javascript/spec/component/competencies/edit-prerequisite.component.spec.ts
@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MockProvider } from 'ng-mocks';
+import { MockComponent, MockProvider } from 'ng-mocks';
 import { AlertService } from 'app/core/util/alert.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import { of } from 'rxjs';
@@ -16,6 +16,8 @@ import { EditPrerequisiteComponent } from 'app/course/competencies/edit/edit-pre
 import { PrerequisiteService } from 'app/course/competencies/prerequisite.service';
 import { PrerequisiteFormComponent } from 'app/course/competencies/forms/prerequisite/prerequisite-form.component';
 import { PrerequisiteFormStubComponent } from './prerequisite-form-stub.component';
+import { MarkdownEditorMonacoComponent } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
+import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown-editor.module';
 
 describe('EditPrerequisiteComponent', () => {
     let editPrerequisiteComponentFixture: ComponentFixture<EditPrerequisiteComponent>;
@@ -57,6 +59,10 @@ describe('EditPrerequisiteComponent', () => {
             ],
             schemas: [],
         })
+            .overrideModule(ArtemisMarkdownEditorModule, {
+                remove: { exports: [MarkdownEditorMonacoComponent] },
+                add: { exports: [MockComponent(MarkdownEditorMonacoComponent)], declarations: [MockComponent(MarkdownEditorMonacoComponent)] },
+            })
             .compileComponents()
             .then(() => {
                 editPrerequisiteComponentFixture = TestBed.createComponent(EditPrerequisiteComponent);
diff --git a/src/test/javascript/spec/component/competencies/generate-competencies/competency-recommendation-detail.component.spec.ts b/src/test/javascript/spec/component/competencies/generate-competencies/competency-recommendation-detail.component.spec.ts
index a2ee1c0c064b..b97f8099cd1d 100644
--- a/src/test/javascript/spec/component/competencies/generate-competencies/competency-recommendation-detail.component.spec.ts
+++ b/src/test/javascript/spec/component/competencies/generate-competencies/competency-recommendation-detail.component.spec.ts
@@ -11,8 +11,8 @@ import { NgbCollapseMocksModule } from '../../../helpers/mocks/directive/ngbColl
 import { FeatureToggleDirective } from 'app/shared/feature-toggle/feature-toggle.directive';
 import { TranslateDirective } from 'app/shared/language/translate.directive';
 import { HtmlForMarkdownPipe } from 'app/shared/pipes/html-for-markdown.pipe';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
 import { TaxonomySelectComponent } from 'app/course/competencies/taxonomy-select/taxonomy-select.component';
+import { MarkdownEditorMonacoComponent } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
 
 describe('CompetencyRecommendationDetailComponent', () => {
     let competencyRecommendationDetailComponentFixture: ComponentFixture<CompetencyRecommendationDetailComponent>;
@@ -28,7 +28,7 @@ describe('CompetencyRecommendationDetailComponent', () => {
                 MockDirective(TranslateDirective),
                 MockPipe(ArtemisTranslatePipe),
                 MockPipe(HtmlForMarkdownPipe),
-                MockComponent(MarkdownEditorComponent),
+                MockComponent(MarkdownEditorMonacoComponent),
                 MockComponent(TaxonomySelectComponent),
             ],
             providers: [],
diff --git a/src/test/javascript/spec/component/competencies/prerequisite-form.component.spec.ts b/src/test/javascript/spec/component/competencies/prerequisite-form.component.spec.ts
index 3a3e852e4c39..4471d024976b 100644
--- a/src/test/javascript/spec/component/competencies/prerequisite-form.component.spec.ts
+++ b/src/test/javascript/spec/component/competencies/prerequisite-form.component.spec.ts
@@ -6,7 +6,7 @@ import { CompetencyTaxonomy } from 'app/entities/competency.model';
 import { TextUnit } from 'app/entities/lecture-unit/textUnit.model';
 import { Lecture } from 'app/entities/lecture.model';
 import { LectureUnitService } from 'app/lecture/lecture-unit/lecture-unit-management/lectureUnit.service';
-import { MockProvider } from 'ng-mocks';
+import { MockComponent, MockProvider } from 'ng-mocks';
 import { of } from 'rxjs';
 import { ArtemisTestModule } from '../../test.module';
 import { MockTranslateService } from '../../helpers/mocks/service/mock-translate.service';
@@ -19,6 +19,8 @@ import { CommonCourseCompetencyFormComponent } from 'app/course/competencies/for
 import { PrerequisiteFormComponent } from 'app/course/competencies/forms/prerequisite/prerequisite-form.component';
 import { PrerequisiteService } from 'app/course/competencies/prerequisite.service';
 import { Prerequisite } from 'app/entities/prerequisite.model';
+import { MarkdownEditorMonacoComponent } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
+import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown-editor.module';
 
 describe('PrerequisiteFormComponent', () => {
     let prerequisiteFormComponentFixture: ComponentFixture<PrerequisiteFormComponent>;
@@ -29,9 +31,12 @@ describe('PrerequisiteFormComponent', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [CompetencyFormComponent, ArtemisTestModule, ReactiveFormsModule, NgbDropdownModule],
-            declarations: [],
             providers: [MockProvider(PrerequisiteService), MockProvider(LectureUnitService), { provide: TranslateService, useClass: MockTranslateService }],
         })
+            .overrideModule(ArtemisMarkdownEditorModule, {
+                remove: { exports: [MarkdownEditorMonacoComponent] },
+                add: { exports: [MockComponent(MarkdownEditorMonacoComponent)], declarations: [MockComponent(MarkdownEditorMonacoComponent)] },
+            })
             .compileComponents()
             .then(() => {
                 prerequisiteFormComponentFixture = TestBed.createComponent(PrerequisiteFormComponent);
diff --git a/src/test/javascript/spec/component/course/course-update.component.spec.ts b/src/test/javascript/spec/component/course/course-update.component.spec.ts
index 9566d806f9cf..2239ab6f91d1 100644
--- a/src/test/javascript/spec/component/course/course-update.component.spec.ts
+++ b/src/test/javascript/spec/component/course/course-update.component.spec.ts
@@ -43,7 +43,7 @@ import { ImageCropperModalComponent } from 'app/course/manage/image-cropper-moda
 import { FeatureToggle, FeatureToggleService } from 'app/shared/feature-toggle/feature-toggle.service';
 import { MockFeatureToggleService } from '../../helpers/mocks/service/mock-feature-toggle.service';
 
-@Component({ selector: 'jhi-markdown-editor', template: '' })
+@Component({ selector: 'jhi-markdown-editor-monaco', template: '' })
 class MarkdownEditorStubComponent {
     @Input() markdown: string;
     @Input() enableResize = false;
diff --git a/src/test/javascript/spec/component/drag-and-drop-question/drag-and-drop-question-edit.component.spec.ts b/src/test/javascript/spec/component/drag-and-drop-question/drag-and-drop-question-edit.component.spec.ts
index 2f5a5ee00a31..2a5d9fde2bb3 100644
--- a/src/test/javascript/spec/component/drag-and-drop-question/drag-and-drop-question-edit.component.spec.ts
+++ b/src/test/javascript/spec/component/drag-and-drop-question/drag-and-drop-question-edit.component.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { NgModel } from '@angular/forms';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { NgbCollapse, NgbModal, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { DragAndDropMapping } from 'app/entities/quiz/drag-and-drop-mapping.model';
 import { DragAndDropQuestion } from 'app/entities/quiz/drag-and-drop-question.model';
 import { DragItem } from 'app/entities/quiz/drag-item.model';
@@ -13,10 +13,6 @@ import { QuizScoringInfoModalComponent } from 'app/exercises/quiz/manage/quiz-sc
 import { DragAndDropQuestionComponent } from 'app/exercises/quiz/shared/questions/drag-and-drop-question/drag-and-drop-question.component';
 import { FileUploaderService } from 'app/shared/http/file-uploader.service';
 import { SecuredImageComponent } from 'app/shared/image/secured-image.component';
-import { DomainCommand } from 'app/shared/markdown-editor/domainCommands/domainCommand';
-import { ExplanationCommand } from 'app/shared/markdown-editor/domainCommands/explanation.command';
-import { HintCommand } from 'app/shared/markdown-editor/domainCommands/hint.command';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { MockComponent, MockDirective, MockModule, MockPipe, MockProvider } from 'ng-mocks';
 import { MockNgbModalService } from '../../helpers/mocks/service/mock-ngb-modal.service';
@@ -27,8 +23,9 @@ import { DragAndDropQuestionUtil } from 'app/exercises/quiz/shared/drag-and-drop
 import { ChangeDetectorRef } from '@angular/core';
 import { clone } from 'lodash-es';
 import { CdkDragDrop, DragDropModule } from '@angular/cdk/drag-drop';
-import { NgbCollapse } from '@ng-bootstrap/ng-bootstrap';
-import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import { MonacoQuizExplanationAction } from 'app/shared/monaco-editor/model/actions/quiz/monaco-quiz-explanation.action';
+import { MonacoQuizHintAction } from 'app/shared/monaco-editor/model/actions/quiz/monaco-quiz-hint.action';
+import { MarkdownEditorMonacoComponent, TextWithDomainAction } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
 
 describe('DragAndDropQuestionEditComponent', () => {
     let fixture: ComponentFixture<DragAndDropQuestionEditComponent>;
@@ -75,7 +72,7 @@ describe('DragAndDropQuestionEditComponent', () => {
                 DragAndDropQuestionEditComponent,
                 MockPipe(ArtemisTranslatePipe),
                 MockComponent(QuizScoringInfoModalComponent),
-                MockComponent(MarkdownEditorComponent),
+                MockComponent(MarkdownEditorMonacoComponent),
                 MockComponent(SecuredImageComponent),
                 MockComponent(DragAndDropQuestionComponent),
                 MockDirective(NgModel),
@@ -603,36 +600,36 @@ describe('DragAndDropQuestionEditComponent', () => {
         expect(component.questionEditorText).toBe(newValue);
     });
 
-    it('should detect domain commands', () => {
+    it('should detect domain actions', () => {
         component.question = new DragAndDropQuestion();
         component.question.text = 'text';
         component.question.explanation = 'explanation';
         component.question.hint = 'hint';
-        let domainCommand: [string, DomainCommand];
+        let textWithDomainAction: TextWithDomainAction;
 
         // explanation
-        let command = new ExplanationCommand();
+        let action = new MonacoQuizExplanationAction();
         let text = 'take this as an explanationCommand';
-        domainCommand = [text, command];
+        textWithDomainAction = { text, action };
 
-        component.domainCommandsFound([domainCommand]);
+        component.domainActionsFound([textWithDomainAction]);
 
         expect(component.question.explanation).toBe(text);
 
         // hint
-        command = new HintCommand();
+        action = new MonacoQuizHintAction();
         text = 'take this as a hintCommand';
-        domainCommand = [text, command];
+        textWithDomainAction = { text, action };
 
-        component.domainCommandsFound([domainCommand]);
+        component.domainActionsFound([textWithDomainAction]);
 
         expect(component.question.hint).toBe(text);
 
         // text
         text = 'take this null as a command';
-        domainCommand = [text, null as unknown as DomainCommand];
+        textWithDomainAction = { text, action: undefined };
 
-        component.domainCommandsFound([domainCommand]);
+        component.domainActionsFound([textWithDomainAction]);
 
         expect(component.question.text).toBe(text);
     });
diff --git a/src/test/javascript/spec/component/exam/exam-update.component.spec.ts b/src/test/javascript/spec/component/exam/exam-update.component.spec.ts
index 3536693cbe09..6de1e1db5c13 100644
--- a/src/test/javascript/spec/component/exam/exam-update.component.spec.ts
+++ b/src/test/javascript/spec/component/exam/exam-update.component.spec.ts
@@ -19,7 +19,6 @@ import { Exam } from 'app/entities/exam.model';
 import { Course, CourseInformationSharingConfiguration } from 'app/entities/course.model';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { FormDateTimePickerComponent } from 'app/shared/date-time-picker/date-time-picker.component';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
 
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { GradingSystemService } from 'app/grading-system/grading-system.service';
@@ -43,6 +42,7 @@ import { DocumentationButtonComponent } from 'app/shared/components/documentatio
 import { TitleChannelNameComponent } from 'app/shared/form/title-channel-name/title-channel-name.component';
 import { UMLDiagramType } from '@ls1intum/apollon';
 import { TextExercise } from 'app/entities/text-exercise.model';
+import { MarkdownEditorMonacoComponent } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
 
 @Component({
     template: '',
@@ -77,7 +77,7 @@ describe('ExamUpdateComponent', () => {
                 declarations: [
                     ExamUpdateComponent,
                     MockComponent(FormDateTimePickerComponent),
-                    MockComponent(MarkdownEditorComponent),
+                    MockComponent(MarkdownEditorMonacoComponent),
                     MockComponent(DataTableComponent),
                     DummyComponent,
                     MockPipe(ArtemisTranslatePipe),
@@ -606,7 +606,7 @@ describe('ExamUpdateComponent', () => {
                     ExamUpdateComponent,
                     ExamExerciseImportComponent,
                     MockComponent(FormDateTimePickerComponent),
-                    MockComponent(MarkdownEditorComponent),
+                    MockComponent(MarkdownEditorMonacoComponent),
                     MockComponent(DataTableComponent),
                     DummyComponent,
                     MockPipe(ArtemisTranslatePipe),
diff --git a/src/test/javascript/spec/component/exam/manage/exams/exam-announcement-dialog/exam-live-announcement-create-modal.component.spec.ts b/src/test/javascript/spec/component/exam/manage/exams/exam-announcement-dialog/exam-live-announcement-create-modal.component.spec.ts
index 6e248103b247..6ab12448b3fb 100644
--- a/src/test/javascript/spec/component/exam/manage/exams/exam-announcement-dialog/exam-live-announcement-create-modal.component.spec.ts
+++ b/src/test/javascript/spec/component/exam/manage/exams/exam-announcement-dialog/exam-live-announcement-create-modal.component.spec.ts
@@ -7,9 +7,9 @@ import { AccountService } from 'app/core/auth/account.service';
 import { By } from '@angular/platform-browser';
 import { MockComponent } from 'ng-mocks';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
 import { ExamLiveEventComponent } from 'app/exam/shared/events/exam-live-event.component';
 import { ExamWideAnnouncementEvent } from 'app/exam/participate/exam-participation-live-events.service';
+import { MarkdownEditorMonacoComponent } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
 
 describe('ExamLiveAnnouncementCreateModalComponent', () => {
     let component: ExamLiveAnnouncementCreateModalComponent;
@@ -19,7 +19,12 @@ describe('ExamLiveAnnouncementCreateModalComponent', () => {
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            declarations: [ExamLiveAnnouncementCreateModalComponent, MockComponent(FaIconComponent), MockComponent(MarkdownEditorComponent), MockComponent(ExamLiveEventComponent)],
+            declarations: [
+                ExamLiveAnnouncementCreateModalComponent,
+                MockComponent(FaIconComponent),
+                MockComponent(MarkdownEditorMonacoComponent),
+                MockComponent(ExamLiveEventComponent),
+            ],
             providers: [
                 { provide: NgbActiveModal, useValue: { dismiss: jest.fn() } },
                 { provide: ExamManagementService, useValue: { createAnnouncement: jest.fn() } },
diff --git a/src/test/javascript/spec/component/exercise-hint/manage/exercise-hint-update.component.spec.ts b/src/test/javascript/spec/component/exercise-hint/manage/exercise-hint-update.component.spec.ts
index 038a9cc515ef..2af4e435afaf 100644
--- a/src/test/javascript/spec/component/exercise-hint/manage/exercise-hint-update.component.spec.ts
+++ b/src/test/javascript/spec/component/exercise-hint/manage/exercise-hint-update.component.spec.ts
@@ -11,7 +11,6 @@ import { HelpIconComponent } from 'app/shared/components/help-icon.component';
 import { ExerciseHintService } from 'app/exercises/shared/exercise-hint/shared/exercise-hint.service';
 import { ExerciseHint } from 'app/entities/hestia/exercise-hint.model';
 import { ActivatedRoute } from '@angular/router';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
 import { ProgrammingExerciseService } from 'app/exercises/programming/manage/services/programming-exercise.service';
 import { ProgrammingExerciseServerSideTask } from 'app/entities/hestia/programming-exercise-task.model';
 import { ProgrammingExerciseTestCase } from 'app/entities/programming-exercise-test-case.model';
@@ -25,6 +24,7 @@ import { IrisSettings } from 'app/entities/iris/settings/iris-settings.model';
 import { ProfileInfo } from 'app/shared/layouts/profiles/profile-info.model';
 import { ProgrammingExerciseSolutionEntry } from 'app/entities/hestia/programming-exercise-solution-entry.model';
 import { PROFILE_IRIS } from 'app/app.constants';
+import { MarkdownEditorMonacoComponent } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
 
 describe('ExerciseHint Management Update Component', () => {
     let comp: ExerciseHintUpdateComponent;
@@ -52,7 +52,7 @@ describe('ExerciseHint Management Update Component', () => {
     beforeEach(fakeAsync(() => {
         TestBed.configureTestingModule({
             imports: [ArtemisTestModule, FormsModule],
-            declarations: [ExerciseHintUpdateComponent, MockComponent(MarkdownEditorComponent), MockComponent(HelpIconComponent)],
+            declarations: [ExerciseHintUpdateComponent, MockComponent(MarkdownEditorMonacoComponent), MockComponent(HelpIconComponent)],
             providers: [
                 FormBuilder,
                 MockProvider(ProgrammingExerciseService),
diff --git a/src/test/javascript/spec/component/exercises/quiz/manage/re-evaluate/re-evaluate-multiple-choice-question.component.spec.ts b/src/test/javascript/spec/component/exercises/quiz/manage/re-evaluate/re-evaluate-multiple-choice-question.component.spec.ts
index 7c65c546617a..67de3457a999 100644
--- a/src/test/javascript/spec/component/exercises/quiz/manage/re-evaluate/re-evaluate-multiple-choice-question.component.spec.ts
+++ b/src/test/javascript/spec/component/exercises/quiz/manage/re-evaluate/re-evaluate-multiple-choice-question.component.spec.ts
@@ -4,13 +4,13 @@ import { MockComponent, MockDirective, MockModule, MockPipe, MockProvider } from
 import { ArtemisTestModule } from '../../../../../test.module';
 import { ReEvaluateMultipleChoiceQuestionComponent } from 'app/exercises/quiz/manage/re-evaluate/multiple-choice-question/re-evaluate-multiple-choice-question.component';
 import { MultipleChoiceQuestionEditComponent } from 'app/exercises/quiz/manage/multiple-choice-question/multiple-choice-question-edit.component';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
 import { NgModel } from '@angular/forms';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { Directive, Input } from '@angular/core';
 import { MultipleChoiceQuestion } from 'app/entities/quiz/multiple-choice-question.model';
 import { AnswerOption } from 'app/entities/quiz/answer-option.model';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { MarkdownEditorMonacoComponent } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
 
 // eslint-disable-next-line @angular-eslint/directive-selector
 @Directive({ selector: '[sortableData]' })
@@ -31,7 +31,7 @@ describe('ReEvaluateMultipleChoiceQuestionComponent', () => {
             declarations: [
                 ReEvaluateMultipleChoiceQuestionComponent,
                 MockComponent(MultipleChoiceQuestionEditComponent),
-                MockComponent(MarkdownEditorComponent),
+                MockComponent(MarkdownEditorMonacoComponent),
                 MockDirective(NgModel),
                 MockDirective(MockSortableDataDirective),
                 MockPipe(ArtemisTranslatePipe),
diff --git a/src/test/javascript/spec/component/lecture-unit/text-unit/text-unit-form.component.spec.ts b/src/test/javascript/spec/component/lecture-unit/text-unit/text-unit-form.component.spec.ts
index 0dfc849da228..32f0d6889eec 100644
--- a/src/test/javascript/spec/component/lecture-unit/text-unit/text-unit-form.component.spec.ts
+++ b/src/test/javascript/spec/component/lecture-unit/text-unit/text-unit-form.component.spec.ts
@@ -12,7 +12,7 @@ import { MockComponent, MockPipe, MockProvider } from 'ng-mocks';
 import { MockRouter } from '../../../helpers/mocks/mock-router';
 import { CompetencySelectionComponent } from 'app/shared/competency-selection/competency-selection.component';
 
-@Component({ selector: 'jhi-markdown-editor', template: '' })
+@Component({ selector: 'jhi-markdown-editor-monaco', template: '' })
 class MarkdownEditorStubComponent {
     @Input() markdown: string;
     @Input() enableResize = false;
diff --git a/src/test/javascript/spec/component/lecture/lecture-update.component.spec.ts b/src/test/javascript/spec/component/lecture/lecture-update.component.spec.ts
index c53c66a2034f..03be222b4cb4 100644
--- a/src/test/javascript/spec/component/lecture/lecture-update.component.spec.ts
+++ b/src/test/javascript/spec/component/lecture/lecture-update.component.spec.ts
@@ -10,7 +10,6 @@ import { LectureUpdateComponent } from 'app/lecture/lecture-update.component';
 import { LectureService } from 'app/lecture/lecture.service';
 import { LectureUpdateWizardComponent } from 'app/lecture/wizard-mode/lecture-update-wizard.component';
 import { FormDateTimePickerComponent } from 'app/shared/date-time-picker/date-time-picker.component';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
 import { ArtemisDatePipe } from 'app/shared/pipes/artemis-date.pipe';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { HtmlForMarkdownPipe } from 'app/shared/pipes/html-for-markdown.pipe';
@@ -23,6 +22,7 @@ import { MockTranslateService } from '../../helpers/mocks/service/mock-translate
 import { ArtemisTestModule } from '../../test.module';
 import { DocumentationButtonComponent } from 'app/shared/components/documentation-button/documentation-button.component';
 import { LectureTitleChannelNameComponent } from 'app/lecture/lecture-title-channel-name.component';
+import { MarkdownEditorMonacoComponent } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
 
 describe('LectureUpdateComponent', () => {
     let lectureUpdateWizardComponentFixture: ComponentFixture<LectureUpdateWizardComponent>;
@@ -51,7 +51,7 @@ describe('LectureUpdateComponent', () => {
                 MockComponent(LectureTitleChannelNameComponent),
                 MockComponent(LectureUpdateWizardComponent),
                 MockComponent(FormDateTimePickerComponent),
-                MockComponent(MarkdownEditorComponent),
+                MockComponent(MarkdownEditorMonacoComponent),
                 MockComponent(DocumentationButtonComponent),
                 MockPipe(ArtemisTranslatePipe),
                 MockPipe(ArtemisDatePipe),
diff --git a/src/test/javascript/spec/component/lecture/wizard-mode/lecture-wizard-title.component.spec.ts b/src/test/javascript/spec/component/lecture/wizard-mode/lecture-wizard-title.component.spec.ts
index 2d40c01a5b50..36701004edbb 100644
--- a/src/test/javascript/spec/component/lecture/wizard-mode/lecture-wizard-title.component.spec.ts
+++ b/src/test/javascript/spec/component/lecture/wizard-mode/lecture-wizard-title.component.spec.ts
@@ -1,10 +1,10 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { LectureUpdateWizardTitleComponent } from 'app/lecture/wizard-mode/lecture-wizard-title.component';
 import { Lecture } from 'app/entities/lecture.model';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
 import { MockComponent } from 'ng-mocks';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { LectureTitleChannelNameComponent } from 'app/lecture/lecture-title-channel-name.component';
+import { MarkdownEditorMonacoComponent } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
 
 describe('LectureWizardTitleComponent', () => {
     let wizardTitleComponentFixture: ComponentFixture<LectureUpdateWizardTitleComponent>;
@@ -13,7 +13,7 @@ describe('LectureWizardTitleComponent', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [ReactiveFormsModule, FormsModule],
-            declarations: [LectureUpdateWizardTitleComponent, MockComponent(MarkdownEditorComponent), MockComponent(LectureTitleChannelNameComponent)],
+            declarations: [LectureUpdateWizardTitleComponent, MockComponent(MarkdownEditorMonacoComponent), MockComponent(LectureTitleChannelNameComponent)],
             providers: [],
             schemas: [],
         })
diff --git a/src/test/javascript/spec/component/markdown-editor/markdown-editor-monaco.component.spec.ts b/src/test/javascript/spec/component/markdown-editor/markdown-editor-monaco.component.spec.ts
index 2e0ea029b664..6e9ec8921a96 100644
--- a/src/test/javascript/spec/component/markdown-editor/markdown-editor-monaco.component.spec.ts
+++ b/src/test/javascript/spec/component/markdown-editor/markdown-editor-monaco.component.spec.ts
@@ -21,6 +21,7 @@ import { MonacoTestCaseAction } from 'app/shared/monaco-editor/model/actions/mon
 import { MonacoTaskAction } from 'app/shared/monaco-editor/model/actions/monaco-task.action';
 import { MonacoFullscreenAction } from 'app/shared/monaco-editor/model/actions/monaco-fullscreen.action';
 import { MonacoEditorOptionPreset } from 'app/shared/monaco-editor/model/monaco-editor-option-preset.model';
+import { COMMUNICATION_MARKDOWN_EDITOR_OPTIONS } from 'app/shared/monaco-editor/monaco-editor-option.helper';
 
 describe('MarkdownEditorMonacoComponent', () => {
     let fixture: ComponentFixture<MarkdownEditorMonacoComponent>;
@@ -86,11 +87,28 @@ describe('MarkdownEditorMonacoComponent', () => {
         fixture.detectChanges();
         const adjustEditorDimensionsSpy = jest.spyOn(comp, 'adjustEditorDimensions');
         const focusSpy = jest.spyOn(comp.monacoEditor, 'focus');
-        comp.onNavChanged({ nextId: 'editor', activeId: 'editor_preview', preventDefault: jest.fn() });
+        comp.onNavChanged({ nextId: MarkdownEditorMonacoComponent.TAB_EDIT, activeId: MarkdownEditorMonacoComponent.TAB_PREVIEW, preventDefault: jest.fn() });
         expect(adjustEditorDimensionsSpy).toHaveBeenCalledOnce();
         expect(focusSpy).toHaveBeenCalledOnce();
     });
 
+    it('should emit when leaving the visual tab', () => {
+        const emitSpy = jest.spyOn(comp.onLeaveVisualTab, 'emit');
+        fixture.detectChanges();
+        comp.onNavChanged({ nextId: MarkdownEditorMonacoComponent.TAB_EDIT, activeId: MarkdownEditorMonacoComponent.TAB_VISUAL, preventDefault: jest.fn() });
+        expect(emitSpy).toHaveBeenCalledOnce();
+    });
+
+    it.each([
+        { tab: MarkdownEditorMonacoComponent.TAB_EDIT, flags: [true, false, false] },
+        { tab: MarkdownEditorMonacoComponent.TAB_PREVIEW, flags: [false, true, false] },
+        { tab: MarkdownEditorMonacoComponent.TAB_VISUAL, flags: [false, false, true] },
+    ])(`should set the correct flags when navigating to $tab`, ({ tab, flags }) => {
+        fixture.detectChanges();
+        comp.onNavChanged({ nextId: tab, activeId: MarkdownEditorMonacoComponent.TAB_EDIT, preventDefault: jest.fn() });
+        expect([comp.inEditMode, comp.inPreviewMode, comp.inVisualMode]).toEqual(flags);
+    });
+
     it('should embed manually uploaded files', () => {
         const embedFilesStub = jest.spyOn(comp, 'embedFiles').mockImplementation();
         fixture.detectChanges();
@@ -213,11 +231,9 @@ describe('MarkdownEditorMonacoComponent', () => {
 
     it('should react to content height changes if the height is linked to the editor', () => {
         comp.linkEditorHeightToContentHeight = true;
-        comp.initialEditorHeight = MarkdownEditorHeight.MEDIUM;
-        comp.resizableMinHeight = MarkdownEditorHeight.SMALL;
         comp.resizableMaxHeight = MarkdownEditorHeight.LARGE;
         fixture.detectChanges();
-        expect(comp.targetWrapperHeight).toBe(MarkdownEditorHeight.MEDIUM);
+        expect(comp.targetWrapperHeight).toBe(MarkdownEditorHeight.SMALL);
         comp.onContentHeightChanged(1500);
         expect(comp.targetWrapperHeight).toBe(MarkdownEditorHeight.LARGE);
         comp.onContentHeightChanged(20);
@@ -235,11 +251,11 @@ describe('MarkdownEditorMonacoComponent', () => {
         expect(comp.targetWrapperHeight).toBe(300 - wrapperTop - dragElemHeight / 2);
     });
 
-    it('should forward enableTextFieldMode call', () => {
+    it('should use the correct options to enable text field mode', () => {
         fixture.detectChanges();
-        const setTextFieldModeSpy = jest.spyOn(comp.monacoEditor, 'enableTextFieldMode');
+        const applySpy = jest.spyOn(comp.monacoEditor, 'applyOptionPreset');
         comp.enableTextFieldMode();
-        expect(setTextFieldModeSpy).toHaveBeenCalledOnce();
+        expect(applySpy).toHaveBeenCalledExactlyOnceWith(COMMUNICATION_MARKDOWN_EDITOR_OPTIONS);
     });
 
     it('should apply option presets to the editor', () => {
diff --git a/src/test/javascript/spec/component/markdown-editor/markdown-editor-parsing.helper.spec.ts b/src/test/javascript/spec/component/markdown-editor/markdown-editor-parsing.helper.spec.ts
new file mode 100644
index 000000000000..99b9ec09559f
--- /dev/null
+++ b/src/test/javascript/spec/component/markdown-editor/markdown-editor-parsing.helper.spec.ts
@@ -0,0 +1,51 @@
+import { parseMarkdownForDomainActions } from 'app/shared/markdown-editor/monaco/markdown-editor-parsing.helper';
+import { MonacoGradingDescriptionAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-description.action';
+import { MonacoGradingFeedbackAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-feedback.action';
+
+describe('MarkdownEditorParsingHelper', () => {
+    it('should parse markdown without domain action identifiers', () => {
+        const markdown = 'This is some text that uses no domain action identifiers.';
+        const result = parseMarkdownForDomainActions(markdown, []);
+        expect(result).toEqual([{ text: markdown, action: undefined }]);
+    });
+
+    it('should parse single-line text with one domain action identifier', () => {
+        const action = new MonacoGradingDescriptionAction();
+        const markdown = 'This is some text. [description] This is a description.';
+        const result = parseMarkdownForDomainActions(markdown, [action]);
+        expect(result).toEqual([
+            { text: 'This is some text.', action: undefined },
+            { text: 'This is a description.', action },
+        ]);
+    });
+
+    it('should parse single-line text with multiple domain action identifiers', () => {
+        const descriptionAction = new MonacoGradingDescriptionAction();
+        const feedbackAction = new MonacoGradingFeedbackAction();
+        const markdown = 'This is some text. [description] This is a description. [feedback] This is some feedback.';
+        const result = parseMarkdownForDomainActions(markdown, [descriptionAction, feedbackAction]);
+        expect(result).toEqual([
+            { text: 'This is some text.', action: undefined },
+            { text: 'This is a description.', action: descriptionAction },
+            { text: 'This is some feedback.', action: feedbackAction },
+        ]);
+    });
+
+    it('should parse multi-line text without domain action identifiers', () => {
+        const markdown = 'This is some text that uses no domain action identifiers.\nThis is a second line.';
+        const result = parseMarkdownForDomainActions(markdown, []);
+        expect(result).toEqual([{ text: markdown, action: undefined }]);
+    });
+
+    it('should parse multi-line text with multiple domain action identifiers', () => {
+        const descriptionAction = new MonacoGradingDescriptionAction();
+        const feedbackAction = new MonacoGradingFeedbackAction();
+        const markdown = 'This is some text. [description] This is a description.\n [feedback] This is some feedback.';
+        const result = parseMarkdownForDomainActions(markdown, [descriptionAction, feedbackAction]);
+        expect(result).toEqual([
+            { text: 'This is some text.', action: undefined },
+            { text: 'This is a description.', action: descriptionAction },
+            { text: 'This is some feedback.', action: feedbackAction },
+        ]);
+    });
+});
diff --git a/src/test/javascript/spec/component/multiple-choice-question/multiple-choice-question-edit.component.spec.ts b/src/test/javascript/spec/component/multiple-choice-question/multiple-choice-question-edit.component.spec.ts
index 04a5b5b9e616..763122daee76 100644
--- a/src/test/javascript/spec/component/multiple-choice-question/multiple-choice-question-edit.component.spec.ts
+++ b/src/test/javascript/spec/component/multiple-choice-question/multiple-choice-question-edit.component.spec.ts
@@ -7,12 +7,6 @@ import { QuizScoringInfoModalComponent } from 'app/exercises/quiz/manage/quiz-sc
 import { DragAndDropQuestionComponent } from 'app/exercises/quiz/shared/questions/drag-and-drop-question/drag-and-drop-question.component';
 import { MultipleChoiceQuestionComponent } from 'app/exercises/quiz/shared/questions/multiple-choice-question/multiple-choice-question.component';
 import { SecuredImageComponent } from 'app/shared/image/secured-image.component';
-import { CorrectOptionCommand } from 'app/shared/markdown-editor/domainCommands/correctOptionCommand';
-import { ExplanationCommand } from 'app/shared/markdown-editor/domainCommands/explanation.command';
-import { HintCommand } from 'app/shared/markdown-editor/domainCommands/hint.command';
-import { IncorrectOptionCommand } from 'app/shared/markdown-editor/domainCommands/incorrectOptionCommand';
-import { TestCaseCommand } from 'app/shared/markdown-editor/domainCommands/programming-exercise/testCase.command';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { MockComponent, MockDirective, MockPipe } from 'ng-mocks';
 import { DragDropModule } from '@angular/cdk/drag-drop';
@@ -21,6 +15,12 @@ import { NgbCollapseMocksModule } from '../../helpers/mocks/directive/ngbCollaps
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 import { MultipleChoiceVisualQuestionComponent } from 'app/exercises/quiz/shared/questions/multiple-choice-question/multiple-choice-visual-question.component';
 import { ScoringType } from 'app/entities/quiz/quiz-question.model';
+import { MonacoQuizHintAction } from 'app/shared/monaco-editor/model/actions/quiz/monaco-quiz-hint.action';
+import { MonacoQuizExplanationAction } from 'app/shared/monaco-editor/model/actions/quiz/monaco-quiz-explanation.action';
+import { MonacoWrongMultipleChoiceAnswerAction } from 'app/shared/monaco-editor/model/actions/quiz/monaco-wrong-multiple-choice-answer.action';
+import { MonacoCorrectMultipleChoiceAnswerAction } from 'app/shared/monaco-editor/model/actions/quiz/monaco-correct-multiple-choice-answer.action';
+import { MonacoTestCaseAction } from 'app/shared/monaco-editor/model/actions/monaco-test-case.action';
+import { MarkdownEditorMonacoComponent } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
 
 describe('MultipleChoiceQuestionEditComponent', () => {
     let fixture: ComponentFixture<MultipleChoiceQuestionEditComponent>;
@@ -47,7 +47,7 @@ describe('MultipleChoiceQuestionEditComponent', () => {
                 MultipleChoiceQuestionEditComponent,
                 MockPipe(ArtemisTranslatePipe),
                 MockComponent(QuizScoringInfoModalComponent),
-                MockComponent(MarkdownEditorComponent),
+                MockComponent(MarkdownEditorMonacoComponent),
                 MockComponent(SecuredImageComponent),
                 MockComponent(DragAndDropQuestionComponent),
                 MockComponent(MultipleChoiceQuestionComponent),
@@ -91,12 +91,12 @@ describe('MultipleChoiceQuestionEditComponent', () => {
     });
 
     it('should parse answer options but not question titles', () => {
-        component.domainCommandsFound([
-            ['text1', new TestCaseCommand()],
-            ['text2', new CorrectOptionCommand()],
-            ['text3', new IncorrectOptionCommand()],
-            ['text4', new ExplanationCommand()],
-            ['text5', new HintCommand()],
+        component.domainActionsFound([
+            { text: 'text1', action: new MonacoTestCaseAction() },
+            { text: 'text2', action: new MonacoCorrectMultipleChoiceAnswerAction() },
+            { text: 'text3', action: new MonacoWrongMultipleChoiceAnswerAction() },
+            { text: 'text4', action: new MonacoQuizExplanationAction() },
+            { text: 'text5', action: new MonacoQuizHintAction() },
         ]);
 
         const expected: MultipleChoiceQuestion = {
@@ -129,12 +129,12 @@ describe('MultipleChoiceQuestionEditComponent', () => {
     });
 
     it('should parse answer options with question titles', () => {
-        component.domainCommandsFound([
-            ['text1', new ExplanationCommand()],
-            ['text2', new HintCommand()],
-            ['text3', new TestCaseCommand()],
-            ['text4', new CorrectOptionCommand()],
-            ['text5', new IncorrectOptionCommand()],
+        component.domainActionsFound([
+            { text: 'text1', action: new MonacoQuizExplanationAction() },
+            { text: 'text2', action: new MonacoQuizHintAction() },
+            { text: 'text3', action: new MonacoTestCaseAction() },
+            { text: 'text4', action: new MonacoCorrectMultipleChoiceAnswerAction() },
+            { text: 'text5', action: new MonacoWrongMultipleChoiceAnswerAction() },
         ]);
 
         const expected: MultipleChoiceQuestion = {
@@ -165,7 +165,7 @@ describe('MultipleChoiceQuestionEditComponent', () => {
     });
 
     it('should parse question titles', () => {
-        component.domainCommandsFound([['text1', null]]);
+        component.domainActionsFound([{ text: 'text1', action: undefined }]);
 
         const expected: MultipleChoiceQuestion = {
             id: question.id,
@@ -183,8 +183,8 @@ describe('MultipleChoiceQuestionEditComponent', () => {
         expect(component.showMultipleChoiceQuestionPreview).toBeTrue();
     });
 
-    it('should find no domain commands', () => {
-        component.domainCommandsFound([]);
+    it('should find no domain actions', () => {
+        component.domainActionsFound([]);
 
         expectCleanupQuestion();
         expect(component.showMultipleChoiceQuestionPreview).toBeTrue();
diff --git a/src/test/javascript/spec/component/shared/grading-instructions-details.component.spec.ts b/src/test/javascript/spec/component/shared/grading-instructions-details.component.spec.ts
index c5f89566b009..ae00000ae4b6 100644
--- a/src/test/javascript/spec/component/shared/grading-instructions-details.component.spec.ts
+++ b/src/test/javascript/spec/component/shared/grading-instructions-details.component.spec.ts
@@ -4,20 +4,20 @@ import { Exercise } from 'app/entities/exercise.model';
 import { GradingCriterion } from 'app/exercises/shared/structured-grading-criterion/grading-criterion.model';
 import { GradingInstruction } from 'app/exercises/shared/structured-grading-criterion/grading-instruction.model';
 import { GradingInstructionsDetailsComponent } from 'app/exercises/shared/structured-grading-criterion/grading-instructions-details/grading-instructions-details.component';
-import { CreditsCommand } from 'app/shared/markdown-editor/domainCommands/credits.command';
-import { DomainCommand } from 'app/shared/markdown-editor/domainCommands/domainCommand';
-import { FeedbackCommand } from 'app/shared/markdown-editor/domainCommands/feedback.command';
-import { GradingCriterionCommand } from 'app/shared/markdown-editor/domainCommands/gradingCriterionCommand';
-import { GradingInstructionCommand } from 'app/shared/markdown-editor/domainCommands/gradingInstruction.command';
-import { GradingScaleCommand } from 'app/shared/markdown-editor/domainCommands/gradingScaleCommand';
-import { InstructionDescriptionCommand } from 'app/shared/markdown-editor/domainCommands/instructionDescription.command';
-import { UsageCountCommand } from 'app/shared/markdown-editor/domainCommands/usageCount.command';
 import { LocalStorageService, SessionStorageService } from 'ngx-webstorage';
 import { MockSyncStorage } from '../../helpers/mocks/service/mock-sync-storage.service';
 import { MockTranslateService } from '../../helpers/mocks/service/mock-translate.service';
 import { ArtemisTestModule } from '../../test.module';
-
-describe('Grading Instructions Management Component', () => {
+import { MonacoGradingInstructionAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-instruction.action';
+import { MonacoGradingCreditsAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-credits.action';
+import { MonacoGradingScaleAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-scale.action';
+import { MonacoGradingDescriptionAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-description.action';
+import { MonacoGradingFeedbackAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-feedback.action';
+import { MonacoGradingUsageCountAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-usage-count.action';
+import { MonacoGradingCriterionAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-criterion.action';
+import { TextWithDomainAction } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
+
+describe('GradingInstructionsDetailsComponent', () => {
     let component: GradingInstructionsDetailsComponent;
     let fixture: ComponentFixture<GradingInstructionsDetailsComponent>;
     let gradingInstruction: GradingInstruction;
@@ -28,22 +28,13 @@ describe('Grading Instructions Management Component', () => {
     const backupExercise = { id: 1 } as Exercise;
 
     const criterionMarkdownText =
-        '[criterion]' +
-        'testCriteria' +
-        '\n' +
-        '\t' +
-        '[instruction]\n' +
-        '\t' +
-        '[credits]' +
-        ' 1\n' +
-        '\t' +
-        '[gradingScale] scale\n' +
-        '\t' +
-        '[description] description\n' +
-        '\t' +
-        '[feedback] feedback\n' +
-        '\t' +
-        '[maxCountInScore] 0\n\n';
+        '[criterion] testCriteria\n' +
+        '\t[instruction]\n' +
+        '\t[credits] 1\n' +
+        '\t[gradingScale] scale\n' +
+        '\t[description] description\n' +
+        '\t[feedback] feedback\n' +
+        '\t[maxCountInScore] 0\n\n';
 
     beforeEach(() => {
         TestBed.configureTestingModule({
@@ -146,10 +137,10 @@ describe('Grading Instructions Management Component', () => {
 
     it('should change grading instruction', () => {
         const newDescription = 'new text';
-        const domainCommands = [[newDescription, new InstructionDescriptionCommand()]] as [string, DomainCommand | null][];
+        const domainActions = [{ text: newDescription, action: new MonacoGradingDescriptionAction() }] as TextWithDomainAction[];
 
         component.exercise.gradingCriteria = [gradingCriterion];
-        component.onInstructionChange(domainCommands, gradingInstruction);
+        component.onInstructionChange(domainActions, gradingInstruction);
         fixture.detectChanges();
 
         expect(component.exercise.gradingCriteria[0].structuredGradingInstructions[0].instructionDescription).toEqual(newDescription);
@@ -165,25 +156,38 @@ describe('Grading Instructions Management Component', () => {
 
     it('should set grading instruction text for exercise', () => {
         const markdownText = 'new text';
-        const domainCommands = [[markdownText, null]] as [string, DomainCommand | null][];
+        const domainActions = [{ text: markdownText, action: undefined }] as TextWithDomainAction[];
 
-        component.setExerciseGradingInstructionText(domainCommands);
+        component.setExerciseGradingInstructionText(domainActions);
         fixture.detectChanges();
 
         expect(component.exercise.gradingInstructions).toEqual(markdownText);
     });
 
-    it('should set grading instruction without criterion command when markdown-change triggered', () => {
-        const domainCommands = [
-            ['', new GradingInstructionCommand()],
-            ['1', new CreditsCommand()],
-            ['scale', new GradingScaleCommand()],
-            ['description', new InstructionDescriptionCommand()],
-            ['feedback', new FeedbackCommand()],
-            ['0', new UsageCountCommand()],
-        ] as [string, DomainCommand | null][];
+    const getDomainActionArray = () => {
+        const creditsAction = new MonacoGradingCreditsAction();
+        const scaleAction = new MonacoGradingScaleAction();
+        const descriptionAction = new MonacoGradingDescriptionAction();
+        const feedbackAction = new MonacoGradingFeedbackAction();
+        const usageCountAction = new MonacoGradingUsageCountAction();
+        const instructionAction = new MonacoGradingInstructionAction(creditsAction, scaleAction, descriptionAction, feedbackAction, usageCountAction);
+        const criterionAction = new MonacoGradingCriterionAction(instructionAction);
+
+        return [
+            { text: 'testCriteria', action: criterionAction },
+            { text: '', action: instructionAction },
+            { text: '1', action: creditsAction },
+            { text: 'scale', action: scaleAction },
+            { text: 'description', action: descriptionAction },
+            { text: 'feedback', action: feedbackAction },
+            { text: '0', action: usageCountAction },
+        ] as TextWithDomainAction[];
+    };
 
-        component.domainCommandsFound(domainCommands);
+    it('should set grading instruction without criterion action when markdown-change triggered', () => {
+        const domainActionsWithoutCriterion = getDomainActionArray().slice(1);
+
+        component.onDomainActionsFound(domainActionsWithoutCriterion);
         fixture.detectChanges();
 
         expect(component.exercise.gradingCriteria).toBeDefined();
@@ -191,18 +195,10 @@ describe('Grading Instructions Management Component', () => {
         expect(gradingCriteria.structuredGradingInstructions[0]).toEqual(gradingInstructionWithoutId);
     });
 
-    it('should set grading instruction with criterion command when markdown-change triggered', () => {
-        const domainCommands = [
-            ['testCriteria', new GradingCriterionCommand()],
-            ['', new GradingInstructionCommand()],
-            ['1', new CreditsCommand()],
-            ['scale', new GradingScaleCommand()],
-            ['description', new InstructionDescriptionCommand()],
-            ['feedback', new FeedbackCommand()],
-            ['0', new UsageCountCommand()],
-        ] as [string, DomainCommand | null][];
-
-        component.domainCommandsFound(domainCommands);
+    it('should set grading instruction with criterion action when markdown-change triggered', () => {
+        const domainActions = getDomainActionArray();
+
+        component.onDomainActionsFound(domainActions);
         fixture.detectChanges();
 
         expect(component.exercise.gradingCriteria).toBeDefined();
diff --git a/src/test/javascript/spec/component/shared/monaco-editor/monaco-editor-action-quiz.integration.spec.ts b/src/test/javascript/spec/component/shared/monaco-editor/monaco-editor-action-quiz.integration.spec.ts
index 4ef09a0bed8c..482467968cdb 100644
--- a/src/test/javascript/spec/component/shared/monaco-editor/monaco-editor-action-quiz.integration.spec.ts
+++ b/src/test/javascript/spec/component/shared/monaco-editor/monaco-editor-action-quiz.integration.spec.ts
@@ -5,6 +5,10 @@ import { MonacoEditorModule } from 'app/shared/monaco-editor/monaco-editor.modul
 import { MockResizeObserver } from '../../../helpers/mocks/service/mock-resize-observer';
 import { MonacoInsertShortAnswerOptionAction } from 'app/shared/monaco-editor/model/actions/quiz/monaco-insert-short-answer-option.action';
 import { MonacoInsertShortAnswerSpotAction } from 'app/shared/monaco-editor/model/actions/quiz/monaco-insert-short-answer-spot.action';
+import { MonacoWrongMultipleChoiceAnswerAction } from 'app/shared/monaco-editor/model/actions/quiz/monaco-wrong-multiple-choice-answer.action';
+import { MonacoCorrectMultipleChoiceAnswerAction } from 'app/shared/monaco-editor/model/actions/quiz/monaco-correct-multiple-choice-answer.action';
+import { MonacoQuizExplanationAction } from 'app/shared/monaco-editor/model/actions/quiz/monaco-quiz-explanation.action';
+import { MonacoQuizHintAction } from 'app/shared/monaco-editor/model/actions/quiz/monaco-quiz-hint.action';
 
 describe('MonacoEditorActionQuizIntegration', () => {
     let fixture: ComponentFixture<MonacoEditorComponent>;
@@ -135,4 +139,40 @@ describe('MonacoEditorActionQuizIntegration', () => {
             expect(comp.getText()).toBe(questionText + '[-spot 1]' + `\n\n\n[-option 1] ${MonacoInsertShortAnswerOptionAction.DEFAULT_TEXT}`);
         });
     });
+
+    describe('Multiple Choice answer options', () => {
+        it('should insert a wrong MC option', () => {
+            comp.triggerKeySequence('This is a question that needs some options.');
+            const action = new MonacoWrongMultipleChoiceAnswerAction();
+            comp.registerAction(action);
+            action.executeInCurrentEditor();
+            expect(comp.getText()).toBe('This is a question that needs some options.\n[wrong] Enter a wrong answer option here');
+        });
+
+        it('should insert a correct MC option', () => {
+            comp.triggerKeySequence('This is a question that needs some options.');
+            const action = new MonacoCorrectMultipleChoiceAnswerAction();
+            comp.registerAction(action);
+            action.executeInCurrentEditor();
+            expect(comp.getText()).toBe('This is a question that needs some options.\n[correct] Enter a correct answer option here');
+        });
+
+        it('should add an explanation to an answer option', () => {
+            comp.triggerKeySequence('This is a question that has an option.\n[correct] Option 1');
+            const action = new MonacoQuizExplanationAction();
+            comp.registerAction(action);
+            action.executeInCurrentEditor();
+            expect(comp.getText()).toBe(
+                'This is a question that has an option.\n[correct] Option 1\n\t[exp] Add an explanation here (only visible in feedback after quiz has ended)',
+            );
+        });
+
+        it('should add a hint to an answer option', () => {
+            comp.triggerKeySequence('This is a question that has an option.\n[correct] Option 1');
+            const action = new MonacoQuizHintAction();
+            comp.registerAction(action);
+            action.executeInCurrentEditor();
+            expect(comp.getText()).toBe('This is a question that has an option.\n[correct] Option 1\n\t[hint] Add a hint here (visible during the quiz via ?-Button)');
+        });
+    });
 });
diff --git a/src/test/javascript/spec/component/shared/monaco-editor/monaco-editor-action.integration.spec.ts b/src/test/javascript/spec/component/shared/monaco-editor/monaco-editor-action.integration.spec.ts
index c1204d455f57..3ccaa08b5f79 100644
--- a/src/test/javascript/spec/component/shared/monaco-editor/monaco-editor-action.integration.spec.ts
+++ b/src/test/javascript/spec/component/shared/monaco-editor/monaco-editor-action.integration.spec.ts
@@ -180,7 +180,7 @@ describe('MonacoEditorActionIntegration', () => {
         const action = new MonacoTaskAction();
         comp.registerAction(action);
         action.executeInCurrentEditor();
-        expect(comp.getText()).toBe(MonacoTaskAction.INSERT_TASK_TEXT);
+        expect(comp.getText()).toBe(`[task]${MonacoTaskAction.TEXT}`);
     });
 
     it('should enter fullscreen', () => {
diff --git a/src/test/javascript/spec/component/shared/monaco-editor/monaco-editor-grading-instructions.integration.spec.ts b/src/test/javascript/spec/component/shared/monaco-editor/monaco-editor-grading-instructions.integration.spec.ts
new file mode 100644
index 000000000000..a5df872438f0
--- /dev/null
+++ b/src/test/javascript/spec/component/shared/monaco-editor/monaco-editor-grading-instructions.integration.spec.ts
@@ -0,0 +1,74 @@
+import { MonacoEditorComponent } from 'app/shared/monaco-editor/monaco-editor.component';
+import { ArtemisTestModule } from '../../../test.module';
+import { MonacoEditorModule } from 'app/shared/monaco-editor/monaco-editor.module';
+import { MockResizeObserver } from '../../../helpers/mocks/service/mock-resize-observer';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MonacoGradingInstructionAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-instruction.action';
+import { MonacoGradingCreditsAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-credits.action';
+import { MonacoGradingScaleAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-scale.action';
+import { MonacoGradingDescriptionAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-description.action';
+import { MonacoGradingFeedbackAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-feedback.action';
+import { MonacoGradingUsageCountAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-usage-count.action';
+import { MonacoGradingCriterionAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-criterion.action';
+
+describe('MonacoEditorActionGradingInstructionsIntegration', () => {
+    let fixture: ComponentFixture<MonacoEditorComponent>;
+    let comp: MonacoEditorComponent;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [ArtemisTestModule, MonacoEditorModule],
+            declarations: [MonacoEditorComponent],
+            providers: [],
+        })
+            .compileComponents()
+            .then(() => {
+                fixture = TestBed.createComponent(MonacoEditorComponent);
+                comp = fixture.componentInstance;
+                global.ResizeObserver = jest.fn().mockImplementation((callback: ResizeObserverCallback) => {
+                    return new MockResizeObserver(callback);
+                });
+                fixture.detectChanges();
+            });
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    const setupActions = () => {
+        const creditsAction = new MonacoGradingCreditsAction();
+        const scaleAction = new MonacoGradingScaleAction();
+        const descriptionAction = new MonacoGradingDescriptionAction();
+        const feedbackAction = new MonacoGradingFeedbackAction();
+        const usageCountAction = new MonacoGradingUsageCountAction();
+        const instructionAction = new MonacoGradingInstructionAction(creditsAction, scaleAction, descriptionAction, feedbackAction, usageCountAction);
+        const criterionAction = new MonacoGradingCriterionAction(instructionAction);
+        [creditsAction, scaleAction, descriptionAction, feedbackAction, usageCountAction, instructionAction, criterionAction].forEach((action) => comp.registerAction(action));
+        return { creditsAction, scaleAction, descriptionAction, feedbackAction, usageCountAction, instructionAction, criterionAction };
+    };
+
+    const expectedInstructionTextWithoutCriterion =
+        '\n[instruction]' +
+        '\n\t[credits] 0' +
+        '\n\t[gradingScale] Add instruction grading scale here (only visible for tutors)' +
+        '\n\t[description] Add grading instruction here (only visible for tutors)' +
+        '\n\t[feedback] Add feedback for students here (visible for students)' +
+        '\n\t[maxCountInScore] 0';
+
+    const generalInstructionText = 'These are some general instructions for the tutors.';
+
+    it('should insert grading instructions', () => {
+        comp.triggerKeySequence(generalInstructionText);
+        const actions = setupActions();
+        actions.instructionAction.executeInCurrentEditor();
+        expect(comp.getText()).toBe(generalInstructionText + expectedInstructionTextWithoutCriterion);
+    });
+
+    it('should insert grading criterion', () => {
+        comp.triggerKeySequence(generalInstructionText);
+        const actions = setupActions();
+        actions.criterionAction.executeInCurrentEditor();
+        expect(comp.getText()).toBe(`${generalInstructionText}\n[criterion] Add criterion title (only visible to tutors)${expectedInstructionTextWithoutCriterion}`);
+    });
+});
diff --git a/src/test/javascript/spec/component/shared/monaco-editor/monaco-editor.component.spec.ts b/src/test/javascript/spec/component/shared/monaco-editor/monaco-editor.component.spec.ts
index dc9f7fb8b33c..ae34f743a3a7 100644
--- a/src/test/javascript/spec/component/shared/monaco-editor/monaco-editor.component.spec.ts
+++ b/src/test/javascript/spec/component/shared/monaco-editor/monaco-editor.component.spec.ts
@@ -170,6 +170,12 @@ describe('MonacoEditorComponent', () => {
         expect(documentHighlightedMargins).toHaveLength(3);
     });
 
+    it('should get the number of lines in the editor', () => {
+        fixture.detectChanges();
+        comp.setText(multiLineText);
+        expect(comp.getNumberOfLines()).toBe(5);
+    });
+
     it('should pass the current line number to the line decorations hover button when clicked', () => {
         const clickCallbackStub = jest.fn();
         const className = 'testClass';
diff --git a/src/test/javascript/spec/component/standardized-competencies/detail/knowledge-area-edit.component.spec.ts b/src/test/javascript/spec/component/standardized-competencies/detail/knowledge-area-edit.component.spec.ts
index 1dcb3a517efd..da3219405bd2 100644
--- a/src/test/javascript/spec/component/standardized-competencies/detail/knowledge-area-edit.component.spec.ts
+++ b/src/test/javascript/spec/component/standardized-competencies/detail/knowledge-area-edit.component.spec.ts
@@ -5,7 +5,6 @@ import { KnowledgeAreaEditComponent } from 'app/admin/standardized-competencies/
 import { ButtonComponent } from 'app/shared/components/button.component';
 import { MockComponent, MockDirective, MockPipe } from 'ng-mocks';
 import { HtmlForMarkdownPipe } from 'app/shared/pipes/html-for-markdown.pipe';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
 import { TaxonomySelectComponent } from 'app/course/competencies/taxonomy-select/taxonomy-select.component';
 import { TranslatePipeMock } from '../../../helpers/mocks/service/mock-translate.service';
 import { TranslateDirective } from 'app/shared/language/translate.directive';
@@ -13,6 +12,7 @@ import { NgbTooltipMocksModule } from '../../../helpers/mocks/directive/ngbToolt
 import { DeleteButtonDirective } from 'app/shared/delete-dialog/delete-button.directive';
 import { KnowledgeAreaDTO } from 'app/entities/competency/standardized-competency.model';
 import { By } from '@angular/platform-browser';
+import { MarkdownEditorMonacoComponent } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
 
 describe('KnowledgeAreaEditComponent', () => {
     let componentFixture: ComponentFixture<KnowledgeAreaEditComponent>;
@@ -44,7 +44,7 @@ describe('KnowledgeAreaEditComponent', () => {
                 MockComponent(ButtonComponent),
                 TranslatePipeMock,
                 MockPipe(HtmlForMarkdownPipe),
-                MockComponent(MarkdownEditorComponent),
+                MockComponent(MarkdownEditorMonacoComponent),
                 MockComponent(TaxonomySelectComponent),
                 MockDirective(TranslateDirective),
                 MockDirective(DeleteButtonDirective),
diff --git a/src/test/javascript/spec/component/standardized-competencies/detail/standardized-competency-edit.spec.ts b/src/test/javascript/spec/component/standardized-competencies/detail/standardized-competency-edit.spec.ts
index b33c93d1eabd..35d65359675f 100644
--- a/src/test/javascript/spec/component/standardized-competencies/detail/standardized-competency-edit.spec.ts
+++ b/src/test/javascript/spec/component/standardized-competencies/detail/standardized-competency-edit.spec.ts
@@ -6,13 +6,13 @@ import { ButtonComponent } from 'app/shared/components/button.component';
 import { CompetencyTaxonomy } from 'app/entities/competency.model';
 import { MockComponent, MockDirective, MockPipe } from 'ng-mocks';
 import { HtmlForMarkdownPipe } from 'app/shared/pipes/html-for-markdown.pipe';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
 import { TaxonomySelectComponent } from 'app/course/competencies/taxonomy-select/taxonomy-select.component';
 import { TranslatePipeMock } from '../../../helpers/mocks/service/mock-translate.service';
 import { TranslateDirective } from 'app/shared/language/translate.directive';
 import { NgbTooltipMocksModule } from '../../../helpers/mocks/directive/ngbTooltipMocks.module';
 import { DeleteButtonDirective } from 'app/shared/delete-dialog/delete-button.directive';
 import { KnowledgeAreaDTO, StandardizedCompetencyDTO } from 'app/entities/competency/standardized-competency.model';
+import { MarkdownEditorMonacoComponent } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
 
 describe('StandardizedCompetencyEditComponent', () => {
     let componentFixture: ComponentFixture<StandardizedCompetencyEditComponent>;
@@ -47,7 +47,7 @@ describe('StandardizedCompetencyEditComponent', () => {
                 MockComponent(ButtonComponent),
                 TranslatePipeMock,
                 MockPipe(HtmlForMarkdownPipe),
-                MockComponent(MarkdownEditorComponent),
+                MockComponent(MarkdownEditorMonacoComponent),
                 MockComponent(TaxonomySelectComponent),
                 MockDirective(TranslateDirective),
                 MockDirective(DeleteButtonDirective),
diff --git a/src/test/javascript/spec/component/tutorial-groups/tutorial-groups-management/tutorial-groups/crud/tutorial-group-form.component.spec.ts b/src/test/javascript/spec/component/tutorial-groups/tutorial-groups-management/tutorial-groups/crud/tutorial-group-form.component.spec.ts
index 04d2c353f042..06e2de934c41 100644
--- a/src/test/javascript/spec/component/tutorial-groups/tutorial-groups-management/tutorial-groups/crud/tutorial-group-form.component.spec.ts
+++ b/src/test/javascript/spec/component/tutorial-groups/tutorial-groups-management/tutorial-groups/crud/tutorial-group-form.component.spec.ts
@@ -26,7 +26,7 @@ import { generateClickSubmitButton, generateTestFormIsInvalidOnMissingRequiredPr
 import { ArtemisDateRangePipe } from 'app/shared/pipes/artemis-date-range.pipe';
 import { runOnPushChangeDetection } from '../../../../../helpers/on-push-change-detection.helper';
 
-@Component({ selector: 'jhi-markdown-editor', template: '' })
+@Component({ selector: 'jhi-markdown-editor-monaco', template: '' })
 class MarkdownEditorStubComponent {
     @Input() markdown: string;
     @Input() enableResize = false;
diff --git a/src/test/javascript/spec/integration/code-editor/code-editor-instructor.integration.spec.ts b/src/test/javascript/spec/integration/code-editor/code-editor-instructor.integration.spec.ts
index 5fffcf112b9e..a793a859f204 100644
--- a/src/test/javascript/spec/integration/code-editor/code-editor-instructor.integration.spec.ts
+++ b/src/test/javascript/spec/integration/code-editor/code-editor-instructor.integration.spec.ts
@@ -56,7 +56,6 @@ import { CodeEditorBuildOutputComponent } from 'app/exercises/programming/shared
 import { KeysPipe } from 'app/shared/pipes/keys.pipe';
 import { CodeEditorInstructionsComponent } from 'app/exercises/programming/shared/code-editor/instructions/code-editor-instructions.component';
 import { ArtemisDatePipe } from 'app/shared/pipes/artemis-date.pipe';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
 import { ProgrammingExerciseInstructionComponent } from 'app/exercises/programming/shared/instructions-render/programming-exercise-instruction.component';
 import { ProgrammingExerciseInstructionAnalysisComponent } from 'app/exercises/programming/manage/instructions-editor/analysis/programming-exercise-instruction-analysis.component';
 import { ResultComponent } from 'app/exercises/shared/result/result.component';
@@ -107,7 +106,6 @@ describe('CodeEditorInstructorIntegration', () => {
                 UpdatingResultComponent,
                 MockComponent(ProgrammingExerciseStudentTriggerBuildButtonComponent),
                 ProgrammingExerciseEditableInstructionComponent,
-                MockComponent(MarkdownEditorComponent),
                 MockComponent(MarkdownEditorMonacoComponent),
                 ProgrammingExerciseInstructionComponent,
                 MockComponent(ProgrammingExerciseInstructionAnalysisComponent),
diff --git a/src/test/playwright/support/pageobjects/course/CourseCommunicationPage.ts b/src/test/playwright/support/pageobjects/course/CourseCommunicationPage.ts
index 17d24b98c07a..6fd47e0a9a7f 100644
--- a/src/test/playwright/support/pageobjects/course/CourseCommunicationPage.ts
+++ b/src/test/playwright/support/pageobjects/course/CourseCommunicationPage.ts
@@ -156,7 +156,7 @@ export class CourseCommunicationPage {
      */
     async reply(postID: number, content: string) {
         const postElement = this.getSinglePost(postID);
-        const postReplyField = postElement.locator('.new-reply-inline-input .markdown-editor .ace_content');
+        const postReplyField = postElement.locator('.new-reply-inline-input .markdown-editor .monaco-editor');
         await postReplyField.click();
         await postReplyField.pressSequentially(content);
         const responsePromise = this.page.waitForResponse(`${COURSE_BASE}/*/answer-posts`);
@@ -172,7 +172,7 @@ export class CourseCommunicationPage {
      */
     async replyWithMessage(postID: number, content: string): Promise<Post> {
         const postElement = this.getSinglePost(postID);
-        const postReplyField = postElement.locator('.new-reply-inline-input .markdown-editor .ace_content');
+        const postReplyField = postElement.locator('.new-reply-inline-input .markdown-editor .monaco-editor');
         await postReplyField.click();
         await postReplyField.pressSequentially(content);
         const responsePromise = this.page.waitForResponse(`${COURSE_BASE}/*/answer-messages`);
diff --git a/src/test/playwright/support/pageobjects/exam/ExamCreationPage.ts b/src/test/playwright/support/pageobjects/exam/ExamCreationPage.ts
index 53ac528bcdcc..e710822e6723 100644
--- a/src/test/playwright/support/pageobjects/exam/ExamCreationPage.ts
+++ b/src/test/playwright/support/pageobjects/exam/ExamCreationPage.ts
@@ -131,15 +131,10 @@ export class ExamCreationPage {
 
     private async enterText(selector: string, text: string) {
         const textField = this.page.locator(selector);
-        const textInput = textField.locator('.ace_text-input');
-        // const currentText = textField.locator('.ace_text');
-
-        // if (await currentText.isVisible()) {
-        // const text = await currentText.textContent();
+        const textInput = textField.locator('.monaco-editor');
         if (text) {
             await clearTextField(textInput);
         }
-        // }
         await textInput.pressSequentially(text);
     }
 }
diff --git a/src/test/playwright/support/pageobjects/exam/ExamManagementPage.ts b/src/test/playwright/support/pageobjects/exam/ExamManagementPage.ts
index ad7dae5a7225..e2e5f76c24f0 100644
--- a/src/test/playwright/support/pageobjects/exam/ExamManagementPage.ts
+++ b/src/test/playwright/support/pageobjects/exam/ExamManagementPage.ts
@@ -114,7 +114,7 @@ export class ExamManagementPage {
     }
 
     async typeAnnouncementMessage(message: string) {
-        await this.page.locator('.ace_text-input').fill(message);
+        await this.page.locator('.monaco-editor textarea').fill(message);
     }
 
     async verifyAnnouncementContent(announcementTime: Dayjs, message: string, authorUsername: string) {
diff --git a/src/test/playwright/support/pageobjects/exercises/file-upload/FileUploadExerciseCreationPage.ts b/src/test/playwright/support/pageobjects/exercises/file-upload/FileUploadExerciseCreationPage.ts
index 1520841bccf9..760eb91275dc 100644
--- a/src/test/playwright/support/pageobjects/exercises/file-upload/FileUploadExerciseCreationPage.ts
+++ b/src/test/playwright/support/pageobjects/exercises/file-upload/FileUploadExerciseCreationPage.ts
@@ -53,6 +53,6 @@ export class FileUploadExerciseCreationPage {
     }
 
     private async typeText(selector: string, text: string) {
-        await this.page.locator(selector).locator('.ace_content').pressSequentially(text);
+        await this.page.locator(selector).locator('.monaco-editor').pressSequentially(text);
     }
 }
diff --git a/src/test/playwright/support/pageobjects/exercises/quiz/QuizExerciseCreationPage.ts b/src/test/playwright/support/pageobjects/exercises/quiz/QuizExerciseCreationPage.ts
index 7317e96d0711..9cccd6576272 100644
--- a/src/test/playwright/support/pageobjects/exercises/quiz/QuizExerciseCreationPage.ts
+++ b/src/test/playwright/support/pageobjects/exercises/quiz/QuizExerciseCreationPage.ts
@@ -25,8 +25,8 @@ export class QuizExerciseCreationPage {
         await this.page.locator('#score').fill(points.toString());
 
         const fileContent = await Fixtures.get('exercise/quiz/multiple_choice/question.txt');
-        const textInputField = this.page.locator('.ace_text-input');
-        await textInputField.focus();
+        const textInputField = this.page.locator('.monaco-editor');
+        await textInputField.click();
         await textInputField.pressSequentially(fileContent!);
     }
 
@@ -61,9 +61,9 @@ export class QuizExerciseCreationPage {
         await drag(this.page, dragLocator, dropLocator);
 
         const fileContent = await Fixtures.get('exercise/quiz/drag_and_drop/question.txt');
-        const textInputField = this.page.locator('.ace_text-input');
+        const textInputField = this.page.locator('.monaco-editor');
         await clearTextField(textInputField);
-        await textInputField.fill(fileContent!);
+        await textInputField.pressSequentially(fileContent!);
     }
 
     async createDragAndDropItem(text: string) {
diff --git a/src/test/playwright/support/pageobjects/exercises/text/TextExerciseCreationPage.ts b/src/test/playwright/support/pageobjects/exercises/text/TextExerciseCreationPage.ts
index a18217aac3d1..7d13e7ee1101 100644
--- a/src/test/playwright/support/pageobjects/exercises/text/TextExerciseCreationPage.ts
+++ b/src/test/playwright/support/pageobjects/exercises/text/TextExerciseCreationPage.ts
@@ -57,7 +57,7 @@ export class TextExerciseCreationPage {
     }
 
     private async typeText(selector: string, text: string) {
-        const textField = this.page.locator(selector).locator('.ace_content');
+        const textField = this.page.locator(selector).locator('.monaco-editor');
         await textField.click();
         await textField.pressSequentially(text);
     }
diff --git a/src/test/playwright/support/pageobjects/lecture/LectureCreationPage.ts b/src/test/playwright/support/pageobjects/lecture/LectureCreationPage.ts
index 2d2e122969a6..8e4fa68e7f31 100644
--- a/src/test/playwright/support/pageobjects/lecture/LectureCreationPage.ts
+++ b/src/test/playwright/support/pageobjects/lecture/LectureCreationPage.ts
@@ -35,7 +35,7 @@ export class LectureCreationPage {
      * @param description - The description text for the lecture.
      */
     async typeDescription(description: string) {
-        const descriptionField = this.page.locator('.ace_content');
+        const descriptionField = this.page.locator('.monaco-editor');
         await descriptionField.click();
         await descriptionField.pressSequentially(description);
     }
diff --git a/src/test/playwright/support/pageobjects/lecture/LectureManagementPage.ts b/src/test/playwright/support/pageobjects/lecture/LectureManagementPage.ts
index af5624689a7d..40b336fdb1de 100644
--- a/src/test/playwright/support/pageobjects/lecture/LectureManagementPage.ts
+++ b/src/test/playwright/support/pageobjects/lecture/LectureManagementPage.ts
@@ -95,7 +95,7 @@ export class LectureManagementPage {
         await this.openCreateUnit(UnitType.TEXT);
         await this.page.fill('#name', name);
         await this.page.fill('#pick-releaseDate #date-input-field', releaseDate.toString());
-        const contentField = this.page.locator('.ace_content');
+        const contentField = this.page.locator('.monaco-editor');
         await contentField.click();
         await contentField.pressSequentially(text);
         return this.submitUnit();

From 1bb98807618a5f6c4d4a859a96273db296414b67 Mon Sep 17 00:00:00 2001
From: Stephan Krusche <krusche@in.tum.de>
Date: Sat, 24 Aug 2024 18:39:06 +0300
Subject: [PATCH 03/15] Development: Update client dependencies

---
 package-lock.json | 534 +++++++++++++++++++++++++---------------------
 package.json      |  52 +++--
 2 files changed, 321 insertions(+), 265 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bc5fa5d014c4..4ac4c8f4a4b4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,18 +10,18 @@
             "hasInstallScript": true,
             "license": "MIT",
             "dependencies": {
-                "@angular/animations": "18.2.0",
-                "@angular/cdk": "18.2.0",
-                "@angular/common": "18.2.0",
-                "@angular/compiler": "18.2.0",
-                "@angular/core": "18.2.0",
-                "@angular/forms": "18.2.0",
-                "@angular/localize": "18.2.0",
-                "@angular/material": "18.2.0",
-                "@angular/platform-browser": "18.2.0",
-                "@angular/platform-browser-dynamic": "18.2.0",
-                "@angular/router": "18.2.0",
-                "@angular/service-worker": "18.2.0",
+                "@angular/animations": "18.2.1",
+                "@angular/cdk": "18.2.1",
+                "@angular/common": "18.2.1",
+                "@angular/compiler": "18.2.1",
+                "@angular/core": "18.2.1",
+                "@angular/forms": "18.2.1",
+                "@angular/localize": "18.2.1",
+                "@angular/material": "18.2.1",
+                "@angular/platform-browser": "18.2.1",
+                "@angular/platform-browser-dynamic": "18.2.1",
+                "@angular/router": "18.2.1",
+                "@angular/service-worker": "18.2.1",
                 "@ctrl/ngx-emoji-mart": "9.2.0",
                 "@danielmoncada/angular-datetime-picker": "18.1.0",
                 "@fingerprintjs/fingerprintjs": "4.4.3",
@@ -38,7 +38,7 @@
                 "@swimlane/ngx-charts": "20.5.0",
                 "@swimlane/ngx-graph": "8.4.0",
                 "@vscode/codicons": "0.0.36",
-                "ace-builds": "1.35.5",
+                "ace-builds": "1.36.0",
                 "bootstrap": "5.3.3",
                 "brace": "0.11.1",
                 "compare-versions": "6.1.1",
@@ -57,7 +57,7 @@
                 "jszip": "3.10.1",
                 "lodash-es": "4.17.21",
                 "mobile-drag-drop": "3.0.0-rc.0",
-                "monaco-editor": "0.50.0",
+                "monaco-editor": "0.51.0",
                 "ngx-infinite-scroll": "18.0.0",
                 "ngx-webstorage": "18.0.0",
                 "papaparse": "5.4.1",
@@ -66,12 +66,12 @@
                 "showdown": "2.1.0",
                 "showdown-highlight": "3.1.0",
                 "showdown-katex": "0.6.0",
-                "simple-statistics": "7.8.3",
+                "simple-statistics": "7.8.4",
                 "smoothscroll-polyfill": "0.4.4",
                 "sockjs-client": "1.6.1",
                 "split.js": "1.6.5",
                 "ts-cacheable": "1.0.10",
-                "tslib": "2.6.3",
+                "tslib": "2.7.0",
                 "uuid": "10.0.0",
                 "webstomp-client": "1.2.6",
                 "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
@@ -79,22 +79,22 @@
             },
             "devDependencies": {
                 "@angular-builders/jest": "18.0.0",
-                "@angular-devkit/build-angular": "18.2.0",
+                "@angular-devkit/build-angular": "18.2.1",
                 "@angular-eslint/builder": "18.3.0",
                 "@angular-eslint/eslint-plugin": "18.3.0",
                 "@angular-eslint/eslint-plugin-template": "18.3.0",
                 "@angular-eslint/schematics": "18.3.0",
                 "@angular-eslint/template-parser": "18.3.0",
-                "@angular/cli": "18.2.0",
-                "@angular/compiler-cli": "18.2.0",
-                "@angular/language-service": "18.2.0",
+                "@angular/cli": "18.2.1",
+                "@angular/compiler-cli": "18.2.1",
+                "@angular/language-service": "18.2.1",
                 "@sentry/types": "8.26.0",
                 "@types/crypto-js": "4.2.2",
                 "@types/d3-shape": "3.1.6",
                 "@types/dompurify": "3.0.5",
                 "@types/jest": "29.5.12",
                 "@types/lodash-es": "4.17.12",
-                "@types/node": "22.4.2",
+                "@types/node": "22.5.0",
                 "@types/papaparse": "5.3.14",
                 "@types/showdown": "2.0.6",
                 "@types/smoothscroll-polyfill": "0.3.4",
@@ -102,7 +102,7 @@
                 "@types/uuid": "10.0.0",
                 "@typescript-eslint/eslint-plugin": "8.2.0",
                 "@typescript-eslint/parser": "8.2.0",
-                "eslint": "9.9.0",
+                "eslint": "9.9.1",
                 "eslint-config-prettier": "9.1.0",
                 "eslint-plugin-deprecation": "3.0.0",
                 "eslint-plugin-jest": "28.8.0",
@@ -121,7 +121,7 @@
                 "ng-mocks": "14.13.0",
                 "prettier": "3.3.3",
                 "sass": "1.77.8",
-                "ts-jest": "29.2.4",
+                "ts-jest": "29.2.5",
                 "typescript": "5.5.4",
                 "weak-napi": "2.0.2"
             },
@@ -211,13 +211,13 @@
             }
         },
         "node_modules/@angular-devkit/architect": {
-            "version": "0.1802.0",
-            "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1802.0.tgz",
-            "integrity": "sha512-s1atTSL98XLUUxfWEQAnhFaOFIJZDLWjSqec+Sb+f4iZFj+hOFejzJxPVnHMIJudOzn0Lqjk3t987KG/zNEGdg==",
+            "version": "0.1802.1",
+            "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1802.1.tgz",
+            "integrity": "sha512-XTnJfCBMDQl3xF4w/eNrq821gbj2Ig1cqbzpRflhz4pqrANTAfHfPoIC7piWEZ60FNlHapzb6fvh6tJUGXG9og==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@angular-devkit/core": "18.2.0",
+                "@angular-devkit/core": "18.2.1",
                 "rxjs": "7.8.1"
             },
             "engines": {
@@ -227,17 +227,17 @@
             }
         },
         "node_modules/@angular-devkit/build-angular": {
-            "version": "18.2.0",
-            "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-18.2.0.tgz",
-            "integrity": "sha512-V0XKT7xt6d6duXqmDAQEQgEJNXuWAekpHEDxafvBT0MTxcEhu0ozQVwI4oAekiKOz+APIcAZyMzvw3Tlzog5cw==",
+            "version": "18.2.1",
+            "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-18.2.1.tgz",
+            "integrity": "sha512-ANsTWKjIlEvJ6s276TbwnDhkoHhQDfsNiRFUDRGBZu94UNR78ImQZSyKYGHJOeQQH6jpBtraA1rvW5WKozAtlw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@ampproject/remapping": "2.3.0",
-                "@angular-devkit/architect": "0.1802.0",
-                "@angular-devkit/build-webpack": "0.1802.0",
-                "@angular-devkit/core": "18.2.0",
-                "@angular/build": "18.2.0",
+                "@angular-devkit/architect": "0.1802.1",
+                "@angular-devkit/build-webpack": "0.1802.1",
+                "@angular-devkit/core": "18.2.1",
+                "@angular/build": "18.2.1",
                 "@babel/core": "7.25.2",
                 "@babel/generator": "7.25.0",
                 "@babel/helper-annotate-as-pure": "7.24.7",
@@ -248,7 +248,7 @@
                 "@babel/preset-env": "7.25.3",
                 "@babel/runtime": "7.25.0",
                 "@discoveryjs/json-ext": "0.6.1",
-                "@ngtools/webpack": "18.2.0",
+                "@ngtools/webpack": "18.2.1",
                 "@vitejs/plugin-basic-ssl": "1.1.0",
                 "ansi-colors": "4.1.3",
                 "autoprefixer": "10.4.20",
@@ -280,7 +280,7 @@
                 "postcss-loader": "8.1.1",
                 "resolve-url-loader": "5.0.0",
                 "rxjs": "7.8.1",
-                "sass": "1.77.8",
+                "sass": "1.77.6",
                 "sass-loader": "16.0.0",
                 "semver": "7.6.3",
                 "source-map-loader": "5.0.0",
@@ -355,14 +355,39 @@
                 }
             }
         },
+        "node_modules/@angular-devkit/build-angular/node_modules/sass": {
+            "version": "1.77.6",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.6.tgz",
+            "integrity": "sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "chokidar": ">=3.0.0 <4.0.0",
+                "immutable": "^4.0.0",
+                "source-map-js": ">=0.6.2 <2.0.0"
+            },
+            "bin": {
+                "sass": "sass.js"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
+        "node_modules/@angular-devkit/build-angular/node_modules/tslib": {
+            "version": "2.6.3",
+            "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+            "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
+            "dev": true,
+            "license": "0BSD"
+        },
         "node_modules/@angular-devkit/build-webpack": {
-            "version": "0.1802.0",
-            "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.1802.0.tgz",
-            "integrity": "sha512-bU7AxlI/avnlOLrgE195cokrOA1ayT6JjRv8Hxzh1bIOa1jE87HsyjxvQhOLcdEb97zwHqMqbntcgUNBgsegJQ==",
+            "version": "0.1802.1",
+            "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.1802.1.tgz",
+            "integrity": "sha512-xOP9Hxkj/mWYdMTa/8uNxFTv7z+3UiGdt4VAO7vetV5qkU/S9rRq8FEKviCc2llXfwkhInSgeeHpWKdATa+YIQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@angular-devkit/architect": "0.1802.0",
+                "@angular-devkit/architect": "0.1802.1",
                 "rxjs": "7.8.1"
             },
             "engines": {
@@ -376,9 +401,9 @@
             }
         },
         "node_modules/@angular-devkit/core": {
-            "version": "18.2.0",
-            "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-18.2.0.tgz",
-            "integrity": "sha512-8SOopyUKUMqAq2rj32XkTIfr79Y274k4uglxxRtzHYoWwHlLdG0KrA+wCcsh/FU9PyR4dA+5dcDAApn358ZF+Q==",
+            "version": "18.2.1",
+            "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-18.2.1.tgz",
+            "integrity": "sha512-fSuGj6CxiTFR+yjuVcaWqaVb5Wts39CSBYRO1BlsOlbuWFZ2NKC/BAb5bdxpB31heCBJi7e3XbPvcMMJIcnKlA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -404,13 +429,13 @@
             }
         },
         "node_modules/@angular-devkit/schematics": {
-            "version": "18.2.0",
-            "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-18.2.0.tgz",
-            "integrity": "sha512-WWKwz2RKMVI6T25JFwOSSfRLB+anNzabVIRwf85R/YMIo34BUk777f2JU/7cCKlxSpQu39TqIfMQZAyzAD1z0A==",
+            "version": "18.2.1",
+            "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-18.2.1.tgz",
+            "integrity": "sha512-2t/q0Jcv7yqhAzEdNgsxoGSCmPgD4qfnVOJ7EJw3LNIA+kX1CmtN4FESUS0i49kN4AyNJFAI5O2pV8iJiliKaw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@angular-devkit/core": "18.2.0",
+                "@angular-devkit/core": "18.2.1",
                 "jsonc-parser": "3.3.1",
                 "magic-string": "0.30.11",
                 "ora": "5.4.1",
@@ -523,9 +548,9 @@
             }
         },
         "node_modules/@angular/animations": {
-            "version": "18.2.0",
-            "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-18.2.0.tgz",
-            "integrity": "sha512-BFAfqDDjsa0Q91F4s33pFcBG+ydFDurEmwYGG1gmO7UXZJI6ZbRVdULaZHz75M+Bf3hJkzVB05pesvfbK+Fg/g==",
+            "version": "18.2.1",
+            "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-18.2.1.tgz",
+            "integrity": "sha512-jit452yuE6DMVV09E6RAjgapgw64mMVH31ccpPvMDekzPsTuP3KNKtgRFU/k2DFhYJvyczM1AqqlgccE/JGaRw==",
             "license": "MIT",
             "dependencies": {
                 "tslib": "^2.3.0"
@@ -534,18 +559,18 @@
                 "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
             },
             "peerDependencies": {
-                "@angular/core": "18.2.0"
+                "@angular/core": "18.2.1"
             }
         },
         "node_modules/@angular/build": {
-            "version": "18.2.0",
-            "resolved": "https://registry.npmjs.org/@angular/build/-/build-18.2.0.tgz",
-            "integrity": "sha512-LvNJ2VOEVy3N1tGzt+xnKyweRBuUE1NsnuEEWAb9Y+V1cyRgj0s7FX2+IQZZQhP+W/pXfbsKaByOAbJ5KWV85Q==",
+            "version": "18.2.1",
+            "resolved": "https://registry.npmjs.org/@angular/build/-/build-18.2.1.tgz",
+            "integrity": "sha512-HwzjB+I31cAtjTTbbS2NbayzfcWthaKaofJlSmZIst3PN+GwLZ8DU0DRpd/xu5AXkk+DoAIWd+lzUIaqngz6ow==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@ampproject/remapping": "2.3.0",
-                "@angular-devkit/architect": "0.1802.0",
+                "@angular-devkit/architect": "0.1802.1",
                 "@babel/core": "7.25.2",
                 "@babel/helper-annotate-as-pure": "7.24.7",
                 "@babel/helper-split-export-declaration": "7.24.7",
@@ -565,7 +590,7 @@
                 "picomatch": "4.0.2",
                 "piscina": "4.6.1",
                 "rollup": "4.20.0",
-                "sass": "1.77.8",
+                "sass": "1.77.6",
                 "semver": "7.6.3",
                 "vite": "5.4.0",
                 "watchpack": "2.4.1"
@@ -606,10 +631,28 @@
                 }
             }
         },
+        "node_modules/@angular/build/node_modules/sass": {
+            "version": "1.77.6",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.6.tgz",
+            "integrity": "sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "chokidar": ">=3.0.0 <4.0.0",
+                "immutable": "^4.0.0",
+                "source-map-js": ">=0.6.2 <2.0.0"
+            },
+            "bin": {
+                "sass": "sass.js"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
         "node_modules/@angular/cdk": {
-            "version": "18.2.0",
-            "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-18.2.0.tgz",
-            "integrity": "sha512-hjuUWNhxU48WB2i1j4NLwnPTaCnucRElfp7DBX5Io0rY5Lwl3HXafvyi7/A1D0Ah+YsJpktKOWPDGv8r7vxymg==",
+            "version": "18.2.1",
+            "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-18.2.1.tgz",
+            "integrity": "sha512-6y4MmpEPXze6igUHkLsBUPkxw32F8+rmW0xVXZchkSyGlFgqfh53ueXoryWb0qL4s5enkNY6AzXnKAqHfPNkVQ==",
             "license": "MIT",
             "dependencies": {
                 "tslib": "^2.3.0"
@@ -624,18 +667,18 @@
             }
         },
         "node_modules/@angular/cli": {
-            "version": "18.2.0",
-            "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-18.2.0.tgz",
-            "integrity": "sha512-hA60QIA7Dh8LQxM42wqd7WrhwQjbjB8oIRH5Slgbiv8iocAo76scp1/qyZo2SSzjfkB7jxUiao5L4ckiJ/hvZg==",
+            "version": "18.2.1",
+            "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-18.2.1.tgz",
+            "integrity": "sha512-SomUFDHanY4o7k3XBGf1eFt4z1h05IGJHfcbl2vxoc0lY59VN13m/pZsD2AtpqtJTzLQT02XQOUP4rmBbGoQ+Q==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@angular-devkit/architect": "0.1802.0",
-                "@angular-devkit/core": "18.2.0",
-                "@angular-devkit/schematics": "18.2.0",
+                "@angular-devkit/architect": "0.1802.1",
+                "@angular-devkit/core": "18.2.1",
+                "@angular-devkit/schematics": "18.2.1",
                 "@inquirer/prompts": "5.3.8",
                 "@listr2/prompt-adapter-inquirer": "2.0.15",
-                "@schematics/angular": "18.2.0",
+                "@schematics/angular": "18.2.1",
                 "@yarnpkg/lockfile": "1.1.0",
                 "ini": "4.1.3",
                 "jsonc-parser": "3.3.1",
@@ -658,9 +701,9 @@
             }
         },
         "node_modules/@angular/common": {
-            "version": "18.2.0",
-            "resolved": "https://registry.npmjs.org/@angular/common/-/common-18.2.0.tgz",
-            "integrity": "sha512-DELx/QYNqqjmiM+kE5PoVmyG4gPw5WB1bDDeg3hEuBCK3eS2KosgQH0/MQo3OSBZHOcAMFjfHMGqKgxndmYixQ==",
+            "version": "18.2.1",
+            "resolved": "https://registry.npmjs.org/@angular/common/-/common-18.2.1.tgz",
+            "integrity": "sha512-N0ZJO1/iU9UhprplZRPvBcdRgA/i6l6Ng5gXs5ymHBJ0lxsB+mDVCmC4jISjR9gAWc426xXwLaOpuP5Gv3f/yg==",
             "license": "MIT",
             "dependencies": {
                 "tslib": "^2.3.0"
@@ -669,14 +712,14 @@
                 "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
             },
             "peerDependencies": {
-                "@angular/core": "18.2.0",
+                "@angular/core": "18.2.1",
                 "rxjs": "^6.5.3 || ^7.4.0"
             }
         },
         "node_modules/@angular/compiler": {
-            "version": "18.2.0",
-            "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-18.2.0.tgz",
-            "integrity": "sha512-RmGwQ7jRzotUKKMk0CwxTcIXFr5mRxSbJf9o5S3ujuIOo1lYop8SQZvjq67a5BuoYyD+1pX6iMmxZqlbKoihBQ==",
+            "version": "18.2.1",
+            "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-18.2.1.tgz",
+            "integrity": "sha512-5e9ygKEcsBoV6xpaGKVrtsLxLETlrM0oB7twl4qG/xuKYqCLj8cRQMcAKSqDfTPzWMOAQc7pHdk+uFVo/8dWHA==",
             "license": "MIT",
             "dependencies": {
                 "tslib": "^2.3.0"
@@ -685,7 +728,7 @@
                 "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
             },
             "peerDependencies": {
-                "@angular/core": "18.2.0"
+                "@angular/core": "18.2.1"
             },
             "peerDependenciesMeta": {
                 "@angular/core": {
@@ -694,9 +737,9 @@
             }
         },
         "node_modules/@angular/compiler-cli": {
-            "version": "18.2.0",
-            "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-18.2.0.tgz",
-            "integrity": "sha512-pPBFjMqNTNettrleLtEc6a/ysOZjG3F0Z5lyKYePcyNQmn2rpa9XmD2y6PhmzTmIhxeXrogWA84Xgg/vK5wBNw==",
+            "version": "18.2.1",
+            "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-18.2.1.tgz",
+            "integrity": "sha512-D+Qba0r6RfHfffzrebGYp54h05AxpkagLjit/GczKNgWSP1gIgZxSfi88D+GvFmeWvZxWN1ecAQ+yqft9hJqWg==",
             "license": "MIT",
             "dependencies": {
                 "@babel/core": "7.25.2",
@@ -717,14 +760,14 @@
                 "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
             },
             "peerDependencies": {
-                "@angular/compiler": "18.2.0",
+                "@angular/compiler": "18.2.1",
                 "typescript": ">=5.4 <5.6"
             }
         },
         "node_modules/@angular/core": {
-            "version": "18.2.0",
-            "resolved": "https://registry.npmjs.org/@angular/core/-/core-18.2.0.tgz",
-            "integrity": "sha512-7+4wXfeAk1TnG3MGho2gpBI5XHxeSRWzLK2rC5qyyRbmMV+GrIgf1HqFjQ4S02rydkQvGpjqQHtO1PYJnyn4bg==",
+            "version": "18.2.1",
+            "resolved": "https://registry.npmjs.org/@angular/core/-/core-18.2.1.tgz",
+            "integrity": "sha512-9KrSpJ65UlJZNXrE18NszcfOwb5LZgG+LYi5Doe7amt218R1bzb3trvuAm0ZzMaoKh4ugtUCkzEOd4FALPEX6w==",
             "license": "MIT",
             "dependencies": {
                 "tslib": "^2.3.0"
@@ -738,9 +781,9 @@
             }
         },
         "node_modules/@angular/forms": {
-            "version": "18.2.0",
-            "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-18.2.0.tgz",
-            "integrity": "sha512-G+4BjNCUo4cRwg9NwisGLbtG/1AbIJNOO3RUejPJJbCcAkYMSzmDWSQ+LQEGW4vC/1xaDKO8AT71DI/I09bOxA==",
+            "version": "18.2.1",
+            "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-18.2.1.tgz",
+            "integrity": "sha512-T7z8KUuj2PoPxrMrAruQVJha+x4a9Y6IrKYtArgOQQlTwCEJuqpVYuOk5l3fwWpHE9bVEjvgkAMI1D5YXA/U6w==",
             "license": "MIT",
             "dependencies": {
                 "tslib": "^2.3.0"
@@ -749,16 +792,16 @@
                 "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
             },
             "peerDependencies": {
-                "@angular/common": "18.2.0",
-                "@angular/core": "18.2.0",
-                "@angular/platform-browser": "18.2.0",
+                "@angular/common": "18.2.1",
+                "@angular/core": "18.2.1",
+                "@angular/platform-browser": "18.2.1",
                 "rxjs": "^6.5.3 || ^7.4.0"
             }
         },
         "node_modules/@angular/language-service": {
-            "version": "18.2.0",
-            "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-18.2.0.tgz",
-            "integrity": "sha512-brl5061YqfNnT7yZNMWmsgv6ve6p9+kfhX6mZWOGICcY2SYVtCNVHdqzwWTTwY7MvTVfycHxiAf9PEmc5lD4/g==",
+            "version": "18.2.1",
+            "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-18.2.1.tgz",
+            "integrity": "sha512-JI4oox9ELNdDVg0uJqCwgyFoK4XrowV14wSoNpGhpTLModRg3eDS6q+8cKn27cjTQRZvpReyYSTfiZMB8j4eqQ==",
             "dev": true,
             "license": "MIT",
             "engines": {
@@ -766,9 +809,9 @@
             }
         },
         "node_modules/@angular/localize": {
-            "version": "18.2.0",
-            "resolved": "https://registry.npmjs.org/@angular/localize/-/localize-18.2.0.tgz",
-            "integrity": "sha512-ul8yGmimiHkhUU87isDCst0790jTBHP1zPBMI2q7QHv7iDzSN5brV8zUMcRypxhh4mQOCnq2LtP84o5ybn4Sig==",
+            "version": "18.2.1",
+            "resolved": "https://registry.npmjs.org/@angular/localize/-/localize-18.2.1.tgz",
+            "integrity": "sha512-nNdB6ehXCSBpQ75sTh6Gcwy2rgExfZEkGcPARJLpjqQlHO+Mk3b1y3ka6XT9M2qQYUeyukncTFUMEZWwHICsOA==",
             "license": "MIT",
             "dependencies": {
                 "@babel/core": "7.25.2",
@@ -785,21 +828,21 @@
                 "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
             },
             "peerDependencies": {
-                "@angular/compiler": "18.2.0",
-                "@angular/compiler-cli": "18.2.0"
+                "@angular/compiler": "18.2.1",
+                "@angular/compiler-cli": "18.2.1"
             }
         },
         "node_modules/@angular/material": {
-            "version": "18.2.0",
-            "resolved": "https://registry.npmjs.org/@angular/material/-/material-18.2.0.tgz",
-            "integrity": "sha512-lOXk8pAVP4Mr0/Q6YrNnVYQVTnR8aEG5D9QSEWjs+607gONuh/9n7ERBdzX7xO9D0vYyXq+Vil32zcF41/Q8Cg==",
+            "version": "18.2.1",
+            "resolved": "https://registry.npmjs.org/@angular/material/-/material-18.2.1.tgz",
+            "integrity": "sha512-DBSJGqLttT9vYpLGWTuuRoOKd1mNelS0jnNo7jNZyMpjcGfuhNzmPtYiBkXfNsAl7YoXoUmX8+4uh1JZspQGqA==",
             "license": "MIT",
             "dependencies": {
                 "tslib": "^2.3.0"
             },
             "peerDependencies": {
                 "@angular/animations": "^18.0.0 || ^19.0.0",
-                "@angular/cdk": "18.2.0",
+                "@angular/cdk": "18.2.1",
                 "@angular/common": "^18.0.0 || ^19.0.0",
                 "@angular/core": "^18.0.0 || ^19.0.0",
                 "@angular/forms": "^18.0.0 || ^19.0.0",
@@ -808,9 +851,9 @@
             }
         },
         "node_modules/@angular/platform-browser": {
-            "version": "18.2.0",
-            "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-18.2.0.tgz",
-            "integrity": "sha512-yhj281TuPz5a8CehwucwIVl29Oqte9KS4X/VQkMV++GpYQE2KKKcoff4FXSdF5RUcUYkK2li4IvawIqPmUSagg==",
+            "version": "18.2.1",
+            "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-18.2.1.tgz",
+            "integrity": "sha512-hQABX7QotGmCIR3EhCBCDh5ZTvQao+JkuK5CCw2G1PkRfJMBwEpjNqnyhz41hZhWiGlucp9jgbeypppW+mIQEw==",
             "license": "MIT",
             "dependencies": {
                 "tslib": "^2.3.0"
@@ -819,9 +862,9 @@
                 "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
             },
             "peerDependencies": {
-                "@angular/animations": "18.2.0",
-                "@angular/common": "18.2.0",
-                "@angular/core": "18.2.0"
+                "@angular/animations": "18.2.1",
+                "@angular/common": "18.2.1",
+                "@angular/core": "18.2.1"
             },
             "peerDependenciesMeta": {
                 "@angular/animations": {
@@ -830,9 +873,9 @@
             }
         },
         "node_modules/@angular/platform-browser-dynamic": {
-            "version": "18.2.0",
-            "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-18.2.0.tgz",
-            "integrity": "sha512-izfaXKNC/kqOEzJG8eTnFu39VLI3vv3dTKoYOdEKRB7MTI0t0x66oZmABnHcihtkTSvXs/is+7lA5HmH2ZuIEQ==",
+            "version": "18.2.1",
+            "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-18.2.1.tgz",
+            "integrity": "sha512-tYJHtshbaKrtnRA15k3vrveSVBqkVUGhINvGugFA2vMtdTOfhfPw+hhzYrcwJibgU49rHogCfI9mkIbpNRYntA==",
             "license": "MIT",
             "dependencies": {
                 "tslib": "^2.3.0"
@@ -841,16 +884,16 @@
                 "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
             },
             "peerDependencies": {
-                "@angular/common": "18.2.0",
-                "@angular/compiler": "18.2.0",
-                "@angular/core": "18.2.0",
-                "@angular/platform-browser": "18.2.0"
+                "@angular/common": "18.2.1",
+                "@angular/compiler": "18.2.1",
+                "@angular/core": "18.2.1",
+                "@angular/platform-browser": "18.2.1"
             }
         },
         "node_modules/@angular/router": {
-            "version": "18.2.0",
-            "resolved": "https://registry.npmjs.org/@angular/router/-/router-18.2.0.tgz",
-            "integrity": "sha512-6/462hvC3HSwbps8VItECHpkdkiFqRmTKdn1Trik+FjnvdupYrKB6kBsveM3eP+gZD4zyMBMKzBWB9N/xA1clw==",
+            "version": "18.2.1",
+            "resolved": "https://registry.npmjs.org/@angular/router/-/router-18.2.1.tgz",
+            "integrity": "sha512-gVyqW6fYnG7oq1DlZSXJMQ2Py2dJQB7g6XVtRcYB1gR4aeowx5N9ws7PjqAi0ih91ASq2MmP4OlSSWLq+eaMGg==",
             "license": "MIT",
             "dependencies": {
                 "tslib": "^2.3.0"
@@ -859,16 +902,16 @@
                 "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
             },
             "peerDependencies": {
-                "@angular/common": "18.2.0",
-                "@angular/core": "18.2.0",
-                "@angular/platform-browser": "18.2.0",
+                "@angular/common": "18.2.1",
+                "@angular/core": "18.2.1",
+                "@angular/platform-browser": "18.2.1",
                 "rxjs": "^6.5.3 || ^7.4.0"
             }
         },
         "node_modules/@angular/service-worker": {
-            "version": "18.2.0",
-            "resolved": "https://registry.npmjs.org/@angular/service-worker/-/service-worker-18.2.0.tgz",
-            "integrity": "sha512-ngcALrgqMuAeIo5dgou6eBzdtgLvmVg5zwmZuTyrnNPZENEaKTj7u5pm9++gl62797sUWlMbL+fa/BOhntGs5A==",
+            "version": "18.2.1",
+            "resolved": "https://registry.npmjs.org/@angular/service-worker/-/service-worker-18.2.1.tgz",
+            "integrity": "sha512-Is4arGy+4HjyvALmR/GsWI4SwXYVJ1IkauAgxPsQKvWLNHdX7a/CEgEEVQGXq96H46QX9O2OcW69PnPatmJIXg==",
             "license": "MIT",
             "dependencies": {
                 "tslib": "^2.3.0"
@@ -880,8 +923,8 @@
                 "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
             },
             "peerDependencies": {
-                "@angular/common": "18.2.0",
-                "@angular/core": "18.2.0"
+                "@angular/common": "18.2.1",
+                "@angular/core": "18.2.1"
             }
         },
         "node_modules/@babel/code-frame": {
@@ -898,9 +941,9 @@
             }
         },
         "node_modules/@babel/compat-data": {
-            "version": "7.25.2",
-            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.25.2.tgz",
-            "integrity": "sha512-bYcppcpKBvX4znYaPEeFau03bp89ShqNMLs+rmdptMw+heSZh9+z84d2YG+K7cYLbWwzdjtDoW/uqZmPjulClQ==",
+            "version": "7.25.4",
+            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.25.4.tgz",
+            "integrity": "sha512-+LGRog6RAsCJrrrg/IO6LGmpphNe5DiK30dGjCoxxeGv49B10/3XYGxPsAwrDlMFcFEvdAUavDT8r9k/hSyQqQ==",
             "license": "MIT",
             "engines": {
                 "node": ">=6.9.0"
@@ -1000,9 +1043,9 @@
             }
         },
         "node_modules/@babel/helper-create-class-features-plugin": {
-            "version": "7.25.0",
-            "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.0.tgz",
-            "integrity": "sha512-GYM6BxeQsETc9mnct+nIIpf63SAyzvyYN7UB/IlTyd+MBg06afFGp0mIeUqGyWgS2mxad6vqbMrHVlaL3m70sQ==",
+            "version": "7.25.4",
+            "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.4.tgz",
+            "integrity": "sha512-ro/bFs3/84MDgDmMwbcHgDa8/E6J3QKNTk4xJJnVeFtGE+tL0K26E3pNxhYz2b67fJpt7Aphw5XcploKXuCvCQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -1011,7 +1054,7 @@
                 "@babel/helper-optimise-call-expression": "^7.24.7",
                 "@babel/helper-replace-supers": "^7.25.0",
                 "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7",
-                "@babel/traverse": "^7.25.0",
+                "@babel/traverse": "^7.25.4",
                 "semver": "^6.3.1"
             },
             "engines": {
@@ -1270,12 +1313,12 @@
             }
         },
         "node_modules/@babel/parser": {
-            "version": "7.25.3",
-            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.3.tgz",
-            "integrity": "sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==",
+            "version": "7.25.4",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.4.tgz",
+            "integrity": "sha512-nq+eWrOgdtu3jG5Os4TQP3x3cLA8hR8TvJNjD8vnPa20WGycimcparWnLK4jJhElTK6SDyuJo1weMKO/5LpmLA==",
             "license": "MIT",
             "dependencies": {
-                "@babel/types": "^7.25.2"
+                "@babel/types": "^7.25.4"
             },
             "bin": {
                 "parser": "bin/babel-parser.js"
@@ -1646,13 +1689,13 @@
             }
         },
         "node_modules/@babel/plugin-syntax-typescript": {
-            "version": "7.24.7",
-            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.24.7.tgz",
-            "integrity": "sha512-c/+fVeJBB0FeKsFvwytYiUD+LBvhHjGSI0g446PRGdSVGZLRNArBUno2PETbAly3tpiNAQR5XaZ+JslxkotsbA==",
+            "version": "7.25.4",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.25.4.tgz",
+            "integrity": "sha512-uMOCoHVU52BsSWxPOMVv5qKRdeSlPuImUCB2dlPuBSU+W2/ROE7/Zg8F2Kepbk+8yBa68LlRKxO+xgEVWorsDg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@babel/helper-plugin-utils": "^7.24.7"
+                "@babel/helper-plugin-utils": "^7.24.8"
             },
             "engines": {
                 "node": ">=6.9.0"
@@ -1764,14 +1807,14 @@
             }
         },
         "node_modules/@babel/plugin-transform-class-properties": {
-            "version": "7.24.7",
-            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.24.7.tgz",
-            "integrity": "sha512-vKbfawVYayKcSeSR5YYzzyXvsDFWU2mD8U5TFeXtbCPLFUqe7GyCgvO6XDHzje862ODrOwy6WCPmKeWHbCFJ4w==",
+            "version": "7.25.4",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.25.4.tgz",
+            "integrity": "sha512-nZeZHyCWPfjkdU5pA/uHiTaDAFUEqkpzf1YoQT2NeSynCGYq9rxfyI3XpQbfx/a0hSnFH6TGlEXvae5Vi7GD8g==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@babel/helper-create-class-features-plugin": "^7.24.7",
-                "@babel/helper-plugin-utils": "^7.24.7"
+                "@babel/helper-create-class-features-plugin": "^7.25.4",
+                "@babel/helper-plugin-utils": "^7.24.8"
             },
             "engines": {
                 "node": ">=6.9.0"
@@ -1799,17 +1842,17 @@
             }
         },
         "node_modules/@babel/plugin-transform-classes": {
-            "version": "7.25.0",
-            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.0.tgz",
-            "integrity": "sha512-xyi6qjr/fYU304fiRwFbekzkqVJZ6A7hOjWZd+89FVcBqPV3S9Wuozz82xdpLspckeaafntbzglaW4pqpzvtSw==",
+            "version": "7.25.4",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.4.tgz",
+            "integrity": "sha512-oexUfaQle2pF/b6E0dwsxQtAol9TLSO88kQvym6HHBWFliV2lGdrPieX+WgMRLSJDVzdYywk7jXbLPuO2KLTLg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@babel/helper-annotate-as-pure": "^7.24.7",
-                "@babel/helper-compilation-targets": "^7.24.8",
+                "@babel/helper-compilation-targets": "^7.25.2",
                 "@babel/helper-plugin-utils": "^7.24.8",
                 "@babel/helper-replace-supers": "^7.25.0",
-                "@babel/traverse": "^7.25.0",
+                "@babel/traverse": "^7.25.4",
                 "globals": "^11.1.0"
             },
             "engines": {
@@ -2280,14 +2323,14 @@
             }
         },
         "node_modules/@babel/plugin-transform-private-methods": {
-            "version": "7.24.7",
-            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.24.7.tgz",
-            "integrity": "sha512-COTCOkG2hn4JKGEKBADkA8WNb35TGkkRbI5iT845dB+NyqgO8Hn+ajPbSnIQznneJTa3d30scb6iz/DhH8GsJQ==",
+            "version": "7.25.4",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.25.4.tgz",
+            "integrity": "sha512-ao8BG7E2b/URaUQGqN3Tlsg+M3KlHY6rJ1O1gXAEUnZoyNQnvKyH87Kfg+FoxSeyWUB8ISZZsC91C44ZuBFytw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@babel/helper-create-class-features-plugin": "^7.24.7",
-                "@babel/helper-plugin-utils": "^7.24.7"
+                "@babel/helper-create-class-features-plugin": "^7.25.4",
+                "@babel/helper-plugin-utils": "^7.24.8"
             },
             "engines": {
                 "node": ">=6.9.0"
@@ -2517,14 +2560,14 @@
             }
         },
         "node_modules/@babel/plugin-transform-unicode-sets-regex": {
-            "version": "7.24.7",
-            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.24.7.tgz",
-            "integrity": "sha512-2G8aAvF4wy1w/AGZkemprdGMRg5o6zPNhbHVImRz3lss55TYCBd6xStN19rt8XJHq20sqV0JbyWjOWwQRwV/wg==",
+            "version": "7.25.4",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.25.4.tgz",
+            "integrity": "sha512-qesBxiWkgN1Q+31xUE9RcMk79eOXXDCv6tfyGMRSs4RGlioSg2WVyQAm07k726cSE56pa+Kb0y9epX2qaXzTvA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@babel/helper-create-regexp-features-plugin": "^7.24.7",
-                "@babel/helper-plugin-utils": "^7.24.7"
+                "@babel/helper-create-regexp-features-plugin": "^7.25.2",
+                "@babel/helper-plugin-utils": "^7.24.8"
             },
             "engines": {
                 "node": ">=6.9.0"
@@ -2680,16 +2723,16 @@
             }
         },
         "node_modules/@babel/traverse": {
-            "version": "7.25.3",
-            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.3.tgz",
-            "integrity": "sha512-HefgyP1x754oGCsKmV5reSmtV7IXj/kpaE1XYY+D9G5PvKKoFfSbiS4M77MdjuwlZKDIKFCffq9rPU+H/s3ZdQ==",
+            "version": "7.25.4",
+            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.4.tgz",
+            "integrity": "sha512-VJ4XsrD+nOvlXyLzmLzUs/0qjFS4sK30te5yEFlvbbUNEgKaVb2BHZUpAL+ttLPQAHNrsI3zZisbfha5Cvr8vg==",
             "license": "MIT",
             "dependencies": {
                 "@babel/code-frame": "^7.24.7",
-                "@babel/generator": "^7.25.0",
-                "@babel/parser": "^7.25.3",
+                "@babel/generator": "^7.25.4",
+                "@babel/parser": "^7.25.4",
                 "@babel/template": "^7.25.0",
-                "@babel/types": "^7.25.2",
+                "@babel/types": "^7.25.4",
                 "debug": "^4.3.1",
                 "globals": "^11.1.0"
             },
@@ -2697,10 +2740,25 @@
                 "node": ">=6.9.0"
             }
         },
+        "node_modules/@babel/traverse/node_modules/@babel/generator": {
+            "version": "7.25.5",
+            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.5.tgz",
+            "integrity": "sha512-abd43wyLfbWoxC6ahM8xTkqLpGB2iWBVyuKC9/srhFunCd1SDNrV1s72bBpK4hLj8KLzHBBcOblvLQZBNw9r3w==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/types": "^7.25.4",
+                "@jridgewell/gen-mapping": "^0.3.5",
+                "@jridgewell/trace-mapping": "^0.3.25",
+                "jsesc": "^2.5.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
         "node_modules/@babel/types": {
-            "version": "7.25.2",
-            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.2.tgz",
-            "integrity": "sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==",
+            "version": "7.25.4",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.4.tgz",
+            "integrity": "sha512-zQ1ijeeCXVEh+aNL0RlmkPkG8HUiDcU2pzQQFjtbntgAczRASFzj4H+6+bV+dy1ntKR14I/DypeuRG1uma98iQ==",
             "license": "MIT",
             "dependencies": {
                 "@babel/helper-string-parser": "^7.24.8",
@@ -3240,9 +3298,9 @@
             }
         },
         "node_modules/@eslint/config-array": {
-            "version": "0.17.1",
-            "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.17.1.tgz",
-            "integrity": "sha512-BlYOpej8AQ8Ev9xVqroV7a02JK3SkBAaN9GfMMH9W6Ch8FlQlkjGw4Ir7+FgYwfirivAf4t+GtzuAxqfukmISA==",
+            "version": "0.18.0",
+            "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.18.0.tgz",
+            "integrity": "sha512-fTxvnS1sRMu3+JjXwJG0j/i4RT9u4qJ+lqS/yCGap4lH4zZGzQ7tu+xZqQmcMZq5OBZDL4QRxQzRjkWcGt8IVw==",
             "dev": true,
             "license": "Apache-2.0",
             "dependencies": {
@@ -3364,9 +3422,9 @@
             }
         },
         "node_modules/@eslint/js": {
-            "version": "9.9.0",
-            "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.9.0.tgz",
-            "integrity": "sha512-hhetes6ZHP3BlXLxmd8K2SNgkhNSi+UcecbnwWKwpP7kyi/uC75DJ1lOOBO3xrC4jyojtGE3YxKZPHfk4yrgug==",
+            "version": "9.9.1",
+            "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.9.1.tgz",
+            "integrity": "sha512-xIDQRsfg5hNBqHz04H1R3scSVwmI+KUbqjsQKHKQ1DAUSaUjYPReZZmS/5PNiKu1fUvzDd6H7DEDKACSEhu+TQ==",
             "dev": true,
             "license": "MIT",
             "engines": {
@@ -5006,9 +5064,9 @@
             }
         },
         "node_modules/@ngtools/webpack": {
-            "version": "18.2.0",
-            "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-18.2.0.tgz",
-            "integrity": "sha512-a6hbkYzh/KUlI52huiU4vztqIuxzyddg6kJGcelUJx3Ju6MJeziu+XmJ6wqFRvfH89zmJeaSADKsGFQaBHtJLg==",
+            "version": "18.2.1",
+            "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-18.2.1.tgz",
+            "integrity": "sha512-v86U3jOoy5R9ZWe9Q0LbHRx/IBw1lbn0ldBU+gIIepREyVvb9CcH/vAyIb2Fw1zaYvvfG1OyzdrHyW8iGXjdnQ==",
             "dev": true,
             "license": "MIT",
             "engines": {
@@ -5653,14 +5711,14 @@
             ]
         },
         "node_modules/@schematics/angular": {
-            "version": "18.2.0",
-            "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-18.2.0.tgz",
-            "integrity": "sha512-XePvx2ZnxCcAQw5lHVMUrJvm8MXqAWGcMyJDAuQUqNZrPCk3GpCaplWx2n+nPkinYVX2Q2v/DqtvWStQwgU4nA==",
+            "version": "18.2.1",
+            "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-18.2.1.tgz",
+            "integrity": "sha512-bBV7I+MCbdQmBPUFF4ECg37VReM0+AdQsxgwkjBBSYExmkErkDoDgKquwL/tH7stDCc5IfTd0g9BMeosRgDMug==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@angular-devkit/core": "18.2.0",
-                "@angular-devkit/schematics": "18.2.0",
+                "@angular-devkit/core": "18.2.1",
+                "@angular-devkit/schematics": "18.2.1",
                 "jsonc-parser": "3.3.1"
             },
             "engines": {
@@ -6398,9 +6456,9 @@
             }
         },
         "node_modules/@types/node": {
-            "version": "22.4.2",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-22.4.2.tgz",
-            "integrity": "sha512-nAvM3Ey230/XzxtyDcJ+VjvlzpzoHwLsF7JaDRfoI0ytO0mVheerNmM45CtA0yOILXwXXxOrcUWH3wltX+7PSw==",
+            "version": "22.5.0",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.0.tgz",
+            "integrity": "sha512-DkFrJOe+rfdHTqqMg0bSNlGlQ85hSoh2TPzZyhHsXnMtligRWpxUySiyw8FY14ITt24HVCiQPWxS3KO/QlGmWg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -6448,9 +6506,9 @@
             "license": "MIT"
         },
         "node_modules/@types/react": {
-            "version": "18.3.3",
-            "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
-            "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
+            "version": "18.3.4",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.4.tgz",
+            "integrity": "sha512-J7W30FTdfCxDDjmfRM+/JqLHBIyl7xUIp9kwK637FGmY7+mkSFSe6L4jpZzhj5QMfLssSDP4/i75AKkrdC7/Jw==",
             "license": "MIT",
             "dependencies": {
                 "@types/prop-types": "*",
@@ -7019,9 +7077,9 @@
             }
         },
         "node_modules/ace-builds": {
-            "version": "1.35.5",
-            "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.35.5.tgz",
-            "integrity": "sha512-yh3V5BLHlN6gwbmk5sV00WRRvdEggJGJ3AIHhOOGHlgDWNWCSvOnHPO7Chb+AqaxxHuvpxOdXd7ZQesaiuJQZQ==",
+            "version": "1.36.0",
+            "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.36.0.tgz",
+            "integrity": "sha512-7to4F86V5N13EY4M9LWaGo2Wmr9iWe5CrYpc28F+/OyYCf7yd+xBV5x9v/GB73EBGGoYd89m6JjeIUjkL6Yw+w==",
             "license": "BSD-3-Clause"
         },
         "node_modules/acorn": {
@@ -7301,9 +7359,9 @@
             }
         },
         "node_modules/async": {
-            "version": "3.2.5",
-            "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz",
-            "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==",
+            "version": "3.2.6",
+            "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+            "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
             "dev": true,
             "license": "MIT"
         },
@@ -8654,9 +8712,9 @@
             }
         },
         "node_modules/core-js-compat": {
-            "version": "3.38.0",
-            "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.38.0.tgz",
-            "integrity": "sha512-75LAicdLa4OJVwFxFbQR3NdnZjNgX6ILpVcVzcC4T2smerB5lELMrJQQQoWV6TiuC/vlaFqgU2tKQx9w5s0e0A==",
+            "version": "3.38.1",
+            "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.38.1.tgz",
+            "integrity": "sha512-JRH6gfXxGmrzF3tZ57lFx97YARxCXPaMzPo6jELZhv88pBH5VXpQ+y0znKGlFnzuaihqhLbefxSJxWJMPtfDzw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -9714,9 +9772,9 @@
             }
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.5.8",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.8.tgz",
-            "integrity": "sha512-4Nx0gP2tPNBLTrFxBMHpkQbtn2hidPVr/+/FTtcCiBYTucqc70zRyVZiOLj17Ui3wTO7SQ1/N+hkHYzJjBzt6A==",
+            "version": "1.5.13",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.13.tgz",
+            "integrity": "sha512-lbBcvtIJ4J6sS4tb5TLp1b4LyfCdMkwStzXPyAgVgTRAsep4bvrAGaBOP7ZJtQMNJpSQ9SqG4brWOroNaQtm7Q==",
             "license": "ISC"
         },
         "node_modules/emittery": {
@@ -9974,17 +10032,17 @@
             }
         },
         "node_modules/eslint": {
-            "version": "9.9.0",
-            "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.9.0.tgz",
-            "integrity": "sha512-JfiKJrbx0506OEerjK2Y1QlldtBxkAlLxT5OEcRF8uaQ86noDe2k31Vw9rnSWv+MXZHj7OOUV/dA0AhdLFcyvA==",
+            "version": "9.9.1",
+            "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.9.1.tgz",
+            "integrity": "sha512-dHvhrbfr4xFQ9/dq+jcVneZMyRYLjggWjk6RVsIiHsP8Rz6yZ8LvZ//iU4TrZF+SXWG+JkNF2OyiZRvzgRDqMg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.2.0",
                 "@eslint-community/regexpp": "^4.11.0",
-                "@eslint/config-array": "^0.17.1",
+                "@eslint/config-array": "^0.18.0",
                 "@eslint/eslintrc": "^3.1.0",
-                "@eslint/js": "9.9.0",
+                "@eslint/js": "9.9.1",
                 "@humanwhocodes/module-importer": "^1.0.1",
                 "@humanwhocodes/retry": "^0.3.0",
                 "@nodelib/fs.walk": "^1.2.8",
@@ -12115,9 +12173,9 @@
             }
         },
         "node_modules/is-core-module": {
-            "version": "2.15.0",
-            "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.0.tgz",
-            "integrity": "sha512-Dd+Lb2/zvk9SKy1TGCt1wFJFo/MWBPMX5x7KcvLajWTGuomczdQX61PvY5yK6SVACwpoexWo81IfFyoKY2QnTA==",
+            "version": "2.15.1",
+            "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz",
+            "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -15567,9 +15625,9 @@
             }
         },
         "node_modules/micromatch": {
-            "version": "4.0.7",
-            "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
-            "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+            "version": "4.0.8",
+            "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+            "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
             "license": "MIT",
             "dependencies": {
                 "braces": "^3.0.3",
@@ -15898,9 +15956,9 @@
             "license": "MIT"
         },
         "node_modules/monaco-editor": {
-            "version": "0.50.0",
-            "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.50.0.tgz",
-            "integrity": "sha512-8CclLCmrRRh+sul7C08BmPBP3P8wVWfBHomsTcndxg5NRCEPfu/mc2AGU8k37ajjDVXcXFc12ORAMUkmk+lkFA==",
+            "version": "0.51.0",
+            "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.51.0.tgz",
+            "integrity": "sha512-xaGwVV1fq343cM7aOYB6lVE4Ugf0UyimdD/x5PWcWBMKENwectaEu77FAN7c5sFiyumqeJdX1RPTh1ocioyDjw==",
             "license": "MIT"
         },
         "node_modules/moo-color": {
@@ -17212,9 +17270,9 @@
             }
         },
         "node_modules/postcss": {
-            "version": "8.4.40",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.40.tgz",
-            "integrity": "sha512-YF2kKIUzAofPMpfH6hOi2cGnv/HrUlfucspc7pDyvv7kGdqXrfj8SCl/t8owkEgKEuu8ZcRjSOxFxVLqwChZ2Q==",
+            "version": "8.4.41",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.41.tgz",
+            "integrity": "sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==",
             "dev": true,
             "funding": [
                 {
@@ -18764,12 +18822,12 @@
             }
         },
         "node_modules/simple-statistics": {
-            "version": "7.8.3",
-            "resolved": "https://registry.npmjs.org/simple-statistics/-/simple-statistics-7.8.3.tgz",
-            "integrity": "sha512-JFvMY00t6SBGtwMuJ+nqgsx9ylkMiJ5JlK9bkj8AdvniIe5615wWQYkKHXe84XtSuc40G/tlrPu0A5/NlJvv8A==",
+            "version": "7.8.4",
+            "resolved": "https://registry.npmjs.org/simple-statistics/-/simple-statistics-7.8.4.tgz",
+            "integrity": "sha512-KHC7X+4Dji2rFgnPU7FxPPp4GxPz9hvQCHx2x6JbjLYNKuSMHcoNZ54gF0xBBMOAvNtWmfCHcfC4MD2T89ffEA==",
             "license": "ISC",
             "engines": {
-                "node": "*"
+                "node": ">= 18"
             }
         },
         "node_modules/sisteransi": {
@@ -19012,9 +19070,9 @@
             }
         },
         "node_modules/spdx-license-ids": {
-            "version": "3.0.18",
-            "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.18.tgz",
-            "integrity": "sha512-xxRs31BqRYHwiMzudOrpSiHtZ8i/GeionCBDSilhYRj+9gIcI8wCZTlXZKu9vZIVqViP3dcp9qE5G6AlIaD+TQ==",
+            "version": "3.0.20",
+            "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.20.tgz",
+            "integrity": "sha512-jg25NiDV/1fLtSgEgyvVyDunvaNHbuwF9lfNV17gSmPFAlYzdfNBlLtLzXTevwkPj7DhGbmN9VnmJIgLnhvaBw==",
             "dev": true,
             "license": "CC0-1.0"
         },
@@ -19833,21 +19891,21 @@
             }
         },
         "node_modules/ts-jest": {
-            "version": "29.2.4",
-            "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.2.4.tgz",
-            "integrity": "sha512-3d6tgDyhCI29HlpwIq87sNuI+3Q6GLTTCeYRHCs7vDz+/3GCMwEtV9jezLyl4ZtnBgx00I7hm8PCP8cTksMGrw==",
+            "version": "29.2.5",
+            "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.2.5.tgz",
+            "integrity": "sha512-KD8zB2aAZrcKIdGk4OwpJggeLcH1FgrICqDSROWqlnJXGCXK4Mn6FcdK2B6670Xr73lHMG1kHw8R87A0ecZ+vA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "bs-logger": "0.x",
+                "bs-logger": "^0.2.6",
                 "ejs": "^3.1.10",
-                "fast-json-stable-stringify": "2.x",
+                "fast-json-stable-stringify": "^2.1.0",
                 "jest-util": "^29.0.0",
                 "json5": "^2.2.3",
-                "lodash.memoize": "4.x",
-                "make-error": "1.x",
-                "semver": "^7.5.3",
-                "yargs-parser": "^21.0.1"
+                "lodash.memoize": "^4.1.2",
+                "make-error": "^1.3.6",
+                "semver": "^7.6.3",
+                "yargs-parser": "^21.1.1"
             },
             "bin": {
                 "ts-jest": "cli.js"
@@ -19951,9 +20009,9 @@
             }
         },
         "node_modules/tslib": {
-            "version": "2.6.3",
-            "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
-            "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
+            "version": "2.7.0",
+            "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
+            "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==",
             "license": "0BSD"
         },
         "node_modules/tsutils": {
@@ -21022,9 +21080,9 @@
             }
         },
         "node_modules/webpack-dev-middleware": {
-            "version": "7.3.0",
-            "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-7.3.0.tgz",
-            "integrity": "sha512-xD2qnNew+F6KwOGZR7kWdbIou/ud7cVqLEXeK1q0nHcNsX/u7ul/fSdlOTX4ntSL5FNFy7ZJJXbf0piF591JYw==",
+            "version": "7.4.2",
+            "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-7.4.2.tgz",
+            "integrity": "sha512-xOO8n6eggxnwYpy1NlzUKpvrjfJTvae5/D6WOK0S2LSo7vjmo5gCM1DbLUmFqrMTJP+W/0YZNctm7jasWvLuBA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
diff --git a/package.json b/package.json
index 1eda30265f5f..da3d4a60a893 100644
--- a/package.json
+++ b/package.json
@@ -13,18 +13,18 @@
         "node_modules"
     ],
     "dependencies": {
-        "@angular/animations": "18.2.0",
-        "@angular/cdk": "18.2.0",
-        "@angular/common": "18.2.0",
-        "@angular/compiler": "18.2.0",
-        "@angular/core": "18.2.0",
-        "@angular/forms": "18.2.0",
-        "@angular/localize": "18.2.0",
-        "@angular/material": "18.2.0",
-        "@angular/platform-browser": "18.2.0",
-        "@angular/platform-browser-dynamic": "18.2.0",
-        "@angular/router": "18.2.0",
-        "@angular/service-worker": "18.2.0",
+        "@angular/animations": "18.2.1",
+        "@angular/cdk": "18.2.1",
+        "@angular/common": "18.2.1",
+        "@angular/compiler": "18.2.1",
+        "@angular/core": "18.2.1",
+        "@angular/forms": "18.2.1",
+        "@angular/localize": "18.2.1",
+        "@angular/material": "18.2.1",
+        "@angular/platform-browser": "18.2.1",
+        "@angular/platform-browser-dynamic": "18.2.1",
+        "@angular/router": "18.2.1",
+        "@angular/service-worker": "18.2.1",
         "@ctrl/ngx-emoji-mart": "9.2.0",
         "@danielmoncada/angular-datetime-picker": "18.1.0",
         "@fingerprintjs/fingerprintjs": "4.4.3",
@@ -41,7 +41,7 @@
         "@swimlane/ngx-charts": "20.5.0",
         "@swimlane/ngx-graph": "8.4.0",
         "@vscode/codicons": "0.0.36",
-        "ace-builds": "1.35.5",
+        "ace-builds": "1.36.0",
         "bootstrap": "5.3.3",
         "brace": "0.11.1",
         "compare-versions": "6.1.1",
@@ -60,7 +60,7 @@
         "jszip": "3.10.1",
         "lodash-es": "4.17.21",
         "mobile-drag-drop": "3.0.0-rc.0",
-        "monaco-editor": "0.50.0",
+        "monaco-editor": "0.51.0",
         "ngx-infinite-scroll": "18.0.0",
         "ngx-webstorage": "18.0.0",
         "papaparse": "5.4.1",
@@ -69,12 +69,12 @@
         "showdown": "2.1.0",
         "showdown-highlight": "3.1.0",
         "showdown-katex": "0.6.0",
-        "simple-statistics": "7.8.3",
+        "simple-statistics": "7.8.4",
         "smoothscroll-polyfill": "0.4.4",
         "sockjs-client": "1.6.1",
         "split.js": "1.6.5",
         "ts-cacheable": "1.0.10",
-        "tslib": "2.6.3",
+        "tslib": "2.7.0",
         "uuid": "10.0.0",
         "webstomp-client": "1.2.6",
         "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
@@ -91,7 +91,6 @@
         "@typescript-eslint/utils": {
             "eslint": "^9.9.0"
         },
-        "axios": "1.7.4",
         "braces": "3.0.3",
         "critters": "0.0.24",
         "debug": "4.3.6",
@@ -103,36 +102,35 @@
         },
         "jsdom": "24.1.1",
         "katex": "0.16.11",
-        "postcss": "8.4.40",
+        "postcss": "8.4.41",
         "semver": "7.6.3",
         "showdown-katex": {
             "showdown": "2.1.0"
         },
         "tough-cookie": "4.1.4",
-        "undici": "6.19.5",
-        "webpack-dev-middleware": "7.3.0",
+        "webpack-dev-middleware": "7.4.2",
         "word-wrap": "1.2.5",
         "ws": "8.18.0",
         "yargs-parser": "21.1.1"
     },
     "devDependencies": {
         "@angular-builders/jest": "18.0.0",
-        "@angular-devkit/build-angular": "18.2.0",
+        "@angular-devkit/build-angular": "18.2.1",
         "@angular-eslint/builder": "18.3.0",
         "@angular-eslint/eslint-plugin": "18.3.0",
         "@angular-eslint/eslint-plugin-template": "18.3.0",
         "@angular-eslint/schematics": "18.3.0",
         "@angular-eslint/template-parser": "18.3.0",
-        "@angular/cli": "18.2.0",
-        "@angular/compiler-cli": "18.2.0",
-        "@angular/language-service": "18.2.0",
+        "@angular/cli": "18.2.1",
+        "@angular/compiler-cli": "18.2.1",
+        "@angular/language-service": "18.2.1",
         "@sentry/types": "8.26.0",
         "@types/crypto-js": "4.2.2",
         "@types/d3-shape": "3.1.6",
         "@types/dompurify": "3.0.5",
         "@types/jest": "29.5.12",
         "@types/lodash-es": "4.17.12",
-        "@types/node": "22.4.2",
+        "@types/node": "22.5.0",
         "@types/papaparse": "5.3.14",
         "@types/showdown": "2.0.6",
         "@types/smoothscroll-polyfill": "0.3.4",
@@ -140,7 +138,7 @@
         "@types/uuid": "10.0.0",
         "@typescript-eslint/eslint-plugin": "8.2.0",
         "@typescript-eslint/parser": "8.2.0",
-        "eslint": "9.9.0",
+        "eslint": "9.9.1",
         "eslint-config-prettier": "9.1.0",
         "eslint-plugin-deprecation": "3.0.0",
         "eslint-plugin-jest": "28.8.0",
@@ -159,7 +157,7 @@
         "ng-mocks": "14.13.0",
         "prettier": "3.3.3",
         "sass": "1.77.8",
-        "ts-jest": "29.2.4",
+        "ts-jest": "29.2.5",
         "typescript": "5.5.4",
         "weak-napi": "2.0.2"
     },

From 19c6b58041365a39dcd8be5ed8175d3b211d3379 Mon Sep 17 00:00:00 2001
From: Stephan Krusche <krusche@in.tum.de>
Date: Sun, 25 Aug 2024 22:57:47 +0300
Subject: [PATCH 04/15] Development: Improve contributing guidelines

---
 CONTRIBUTING.md | 41 +++++++++++++++++++-
 README.md       | 99 ++++++++++++++++++++++++++-----------------------
 2 files changed, 92 insertions(+), 48 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index ea3d5c107479..482bdb00df6c 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,6 +1,43 @@
-# Contributing Guide for Artemis
+# Contribution Guidelines for Artemis
 
 Read the [setup guide](https://docs.artemis.cit.tum.de/dev/setup.html) on how to set up your local development environment.
 
-Before creating a pull request, please read the [guidelines to the development process](https://docs.artemis.cit.tum.de/dev/development-process/development-process.html) as well as the [coding and design guidelines](https://docs.artemis.cit.tum.de/dev/guidelines.html).
+## Identity and Transparency
+
+To ensure a transparent and trustworthy environment, we have established different guidelines for members of our organization and external contributors.
+
+### For Members of Our Organization
+
+1. **Real Names Required**: As a member of our organization, you must use your full real name in your GitHub profile. This is a prerequisite for joining our organization. Using a real name is crucial for building trust within the team and the broader community. It fosters accountability and transparency, which are essential for collaborative work. When members use their real identities, it encourages open communication and strengthens professional relationships. Furthermore, it aligns with best practices in open-source communities, where transparency is key to ensuring the integrity and reliability of contributions.
+
+2. **Profile Picture**: Members are required to upload an authentic profile picture. Use a clear, professional image and avoid comic-like pictures, memojis, or other non-authentic picture styles. Using a professional and authentic profile picture is essential for establishing credibility and fostering trust within the community. It helps others easily identify and connect with you, which is crucial for effective collaboration. By using a real photo, you present yourself as a serious and committed contributor, which in turn encourages others to take your work and interactions seriously. Avoiding non-authentic images ensures that the focus remains on the substance of your contributions rather than on distractions or misunderstandings that might arise from informal or unprofessional visuals.
+
+3. **Direct Branching and PR Creation**: As a member, you are encourages to create branches and pull requests (PRs) directly within the repository. Please follow the internal branching and code review processes outlined in [guidelines to the development process](https://docs.artemis.cit.tum.de/dev/development-process/development-process.html) and [coding and design guidelines](https://docs.artemis.cit.tum.de/dev/guidelines.html).
+
+### For External Contributors
+
+1. **Identity Verification**: External contributions will only be considered if the contributor uses their real name and an authentic profile picture (see above). This ensures accountability and trustworthiness in all external contributions.
+
+2. **Forking the Repository**: External contributors fork the repository and work on changes in their own branches.
+
+3. **Submit a Pull Request**: Once your work is complete, submit a pull request for review. Ensure that your branch is up to date with the main branch before submitting.
+
+4. **Compliance**: Contributions from external contributors that do not adhere to these guidelines may not be accepted.
+
+### References and Best Practices
+
+- We align our guidelines with the [GitHub Acceptable Use Policies](https://docs.github.com/en/site-policy/acceptable-use-policies) which stress the importance of authenticity and transparency in user profiles.
+- For more insights on contributing to open-source projects, we recommend reviewing the [Open Source Guides by GitHub](https://opensource.guide/).
+
+By following these guidelines, we foster a collaborative environment built on mutual trust and respect, essential for the success of our project.
+
+## Contribution Process
+
+1. **External contributors only**: Fork the Repository and create a branch.
+2. **Create a feature branch**: Work on your changes in a separate branch.
+3. **Submit a pull request**: Once your work is complete, submit a pull request for review.
+
+Thank you for your contributions and for helping us maintain a high standard of quality and trust in this project.
+
+
 
diff --git a/README.md b/README.md
index 30ec2419c16d..092d74dcdbb0 100644
--- a/README.md
+++ b/README.md
@@ -53,22 +53,68 @@ Artemis brings interactive learning to life with instant, individual feedback on
 
 ## Roadmap
 
-The Artemis development team prioritizes the following issues in the future. We welcome feature requests from students, tutors, instructors, and administrators. We are happy to discuss any suggestions for improvements.
+The Artemis development team prioritizes the following areas in the future. We welcome feature requests from students, tutors, instructors, and administrators. We are happy to discuss any suggestions for improvements.
 
 * **Short term**: Further improve the communication features with mobile apps for iOS and Android
-* **Short term**: Improve the REST API of the server application
+* **Short term**: Add the possibility to use Iris for questions on all exercise types and lectures (partly done)
+* **Short term**: Provide GenAI based automatic feedback to modeling, text and programming exercise with Athena
+* **Short term**: Improve the LTI integration with Moodle
+* **Medium term**: Improve the REST API of the server application
+* **Medium term**: Integrate an online IDE (e.g. Eclipse Theia) into Artemis for enhanced user experience
 * **Medium term**: Add more learning analytics features while preserving data privacy
 * **Medium term**: Improve the user experience, usability and navigation
 * **Medium term**: Add automatic generation of hints for programming exercises
 * **Medium term**: Add GenAI support for reviewing exercises for instructors
-* **Medium term**: Add GenAI support for learning analytics
-* **Medium term**: Add the possibility to use Iris for questions on all exercise types and lectures
+* **Medium term**: Add GenAI support for learning analytics (partly done)
 * **Long term**: Explore the possibilities of microservices, Kubernetes based deployment, and micro frontends
-* **Long term**: Integrated on online IDE (e.g. Eclipse Theia) into Artemis for enhanced user experience
 * **Long term**: Allow students to take notes on lecture slides and support the automatic updates of lecture slides
 * **Long term**: Develop an exchange platform for exercises
 
-## Setup, guides, and contributing
+## Contributing to This Project
+
+We welcome contributions from both members of our organization and external contributors. To maintain transparency and trust:
+
+- **Members**: Must use their full real names and upload a professional and authentic profile picture. Members can directly create branches and PRs in the repository.
+- **External Contributors**: Must adhere to our identity guidelines, using real names and authentic profile pictures. Contributions will only be considered if these guidelines are followed.
+
+We adhere to best practices as recommended by [GitHub's Open Source Guides](https://opensource.guide/) and their [Acceptable Use Policies](https://docs.github.com/en/site-policy/acceptable-use-policies). Thank you for helping us create a respectful and professional environment for everyone involved.
+
+We follow a pull request contribution model. For detailed guidelines, please refer to our [CONTRIBUTING.md](./CONTRIBUTING.md). Once your pull request is ready to merge, notify the responsible feature maintainer on Slack:
+
+#### Maintainers
+
+The following members of the project management team are responsible for specific feature areas in Artemis. Contact them if you have questions or if you want to develop new features in this area.
+
+| Feature / Aspect               | Responsible maintainer                                                             |
+|--------------------------------|------------------------------------------------------------------------------------|
+| Programming exercises          | Stephan Krusche ([@krusche](https://github.com/krusche))                           |
+| Integrated code lifecycle      | Stephan Krusche ([@krusche](https://github.com/krusche))                           |
+| Quiz exercises                 | Felix Dietrich ([@FelixTJDietrich](https://github.com/FelixTJDietrich))            |
+| Modeling exercises (+ Apollon) | Stephan Krusche ([@krusche](https://github.com/krusche))                           |
+| Text exercises                 | Maximilian Sölch ([@maximiliansoelch](https://github.com/maximiliansoelch))        |
+| File upload exercises          | Maximilian Sölch ([@maximiliansoelch](https://github.com/maximiliansoelch))        |
+| Exam mode                      | Stephan Krusche ([@krusche](https://github.com/krusche))                           |
+| Grading                        | Maximilian Sölch ([@maximiliansoelch](https://github.com/maximiliansoelch))        |
+| Assessment                     | Maximilian Sölch ([@maximiliansoelch](https://github.com/maximiliansoelch))        |
+| Communication                  | Ramona Beinstingel ([@rabeatwork](https://github.com/rabeatwork))                  |
+| Notifications                  | Ramona Beinstingel ([@rabeatwork](https://github.com/rabeatwork))                  |
+| Team Exercises                 | Stephan Krusche ([@krusche](https://github.com/krusche))                           |
+| Lectures                       | Maximilian Anzinger ([@maximiliananzinger](https://github.com/maximiliananzinger)) |
+| Integrated Markdown Editor     | Patrick Bassner ([@bassner](https://github.com/bassner))                           |
+| Plagiarism checks              | Markus Paulsen ([@MarkusPaulsen](https://github.com/MarkusPaulsen))                |
+| Learning analytics             | Maximilian Anzinger ([@maximiliananzinger](https://github.com/maximiliananzinger)) |
+| Adaptive learning              | Maximilian Anzinger ([@maximiliananzinger](https://github.com/maximiliananzinger)) |
+| Learning paths                 | Maximilian Anzinger ([@maximiliananzinger](https://github.com/maximiliananzinger)) |
+| Tutorial Groups                | Felix Dietrich ([@FelixTJDietrich](https://github.com/FelixTJDietrich))            |
+| Iris                           | Patrick Bassner ([@bassner](https://github.com/bassner))                           |
+| Scalability                    | Matthias Linhuber ([@mtze](https://github.com/mtze))                               |
+| Usability                      | Ramona Beinstingel ([@rabeatwork](https://github.com/rabeatwork))                  |
+| Performance                    | Ramona Beinstingel ([@rabeatwork](https://github.com/rabeatwork))                  |
+| Infrastructure                 | Matthias Linhuber ([@mtze](https://github.com/mtze))                               |
+| Development process            | Felix Dietrich ([@FelixTJDietrich](https://github.com/FelixTJDietrich))            |
+| Mobile apps (iOS + Android)    | Maximilian Sölch ([@maximiliansoelch](https://github.com/maximiliansoelch))        |
+
+## Setup and guidelines
 
 ### Development setup, coding, and design guidelines
 
@@ -76,6 +122,7 @@ The Artemis development team prioritizes the following issues in the future. We
 * [Server coding and design guidelines](https://docs.artemis.cit.tum.de/dev/guidelines/server/)
 * [Client coding and design guidelines](https://docs.artemis.cit.tum.de/dev/guidelines/client/)
 * [Code Review Guidelines](https://docs.artemis.cit.tum.de/dev/development-process/#review)
+* [Performance Guidelines](https://docs.artemis.cit.tum.de/dev/guidelines/performance/)
 
 ### Documentation
 
@@ -96,46 +143,6 @@ Artemis uses these external tools for user management and the configuration of p
 
 If needed, you can configure self service [user registration](https://docs.artemis.cit.tum.de/admin/registration).
 
-### Contributing
-
-Please read the guide on [how to contribute](CONTRIBUTING.md) to Artemis.
-
-Once your PR is ready to merge, notify the responsible feature maintainer on Slack:
-
-#### Maintainers
-
-The following members of the project management team are responsible for specific feature areas in Artemis. Contact them if you have questions or if you want to develop new features in this area.
-
-| Feature / Aspect               | Maintainer                                                                                          |
-|--------------------------------|-----------------------------------------------------------------------------------------------------|
-| Programming exercises          | [@krusche](https://github.com/krusche)                                                              |
-| Integrated code lifecycle      | [@krusche](https://github.com/krusche)                                                              |
-| Quiz exercises                 | [@FelixTJDietrich](https://github.com/FelixTJDietrich)                                                          |
-| Modeling exercises (+ Apollon) | [@krusche](https://github.com/krusche)                                                              |
-| Text exercises                 | [@maximiliansoelch](https://github.com/maximiliansoelch)                                            |
-| File upload exercises          | [@maximiliansoelch](https://github.com/maximiliansoelch)                                            |
-| Exam mode                      | [@krusche](https://github.com/krusche)                                                              |
-| Grading                        | [@maximiliansoelch](https://github.com/maximiliansoelch)                                            |
-| Assessment                     | [@maximiliansoelch](https://github.com/maximiliansoelch)                                            |
-| Communication                  | [@rabeatwork](https://github.com/rabeatwork)                                                        |
-| Notifications                  | [@rabeatwork](https://github.com/rabeatwork)                                                        |
-| Team Exercises                 | [@krusche](https://github.com/krusche)                                                              |
-| Lectures                       | [@maximiliananzinger](https://github.com/maximiliananzinger)     |
-| Integrated Markdown Editor     | [@maximiliansoelch](https://github.com/maximiliansoelch) [@bassner](https://github.com/bassner)     |
-| Plagiarism checks              | [@MarkusPaulsen](https://github.com/MarkusPaulsen)                                                  |
-| Learning analytics             | [@bassner](https://github.com/bassner)                                                              |
-| Adaptive learning              | [@bassner](https://github.com/bassner) [@maximiliananzinger](https://github.com/maximiliananzinger) |
-| Learning paths                 | [@maximiliananzinger](https://github.com/maximiliananzinger)                                        |
-| Tutorial Groups                | [@FelixTJDietrich](https://github.com/FelixTJDietrich)                                                          |
-| Iris                           | [@bassner](https://github.com/bassner)                                                              |
-| Scalability                    | [@mtze](https://github.com/mtze)                                                                    |
-| Usability                      | [@rabeatwork](https://github.com/rabeatwork)                                                        |
-| Performance                    | [@rabeatwork](https://github.com/rabeatwork)                                                        |
-| Infrastructure                 | [@mtze](https://github.com/mtze)                                                                    |
-| Development process            | [@FelixTJDietrich](https://github.com/FelixTJDietrich) |
-| Mobile apps (iOS + Android)    | [@krusche](https://github.com/krusche) [@maximiliansoelch](https://github.com/maximiliansoelch)     |
-
-
 ### Building for production
 
 To build and optimize the Artemis application for production, run:

From 8411fae090ee0c5a1be78672fcc85b6161a9a6cf Mon Sep 17 00:00:00 2001
From: Stephan Krusche <krusche@in.tum.de>
Date: Sun, 25 Aug 2024 23:02:39 +0300
Subject: [PATCH 05/15] Development: Update code of conduct

---
 CODE_OF_CONDUCT.md | 155 +++++++++++++++++++++++++++++++--------------
 1 file changed, 106 insertions(+), 49 deletions(-)

diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index 89ee014c27e2..d4887bcca43e 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -1,76 +1,133 @@
-# Contributor Covenant Code of Conduct
+
+# Artemis Code of Conduct
 
 ## Our Pledge
 
-In the interest of fostering an open and welcoming environment, we as
-contributors and maintainers pledge to making participation in our project and
-our community a harassment-free experience for everyone, regardless of age, body
-size, disability, ethnicity, sex characteristics, gender identity and expression,
-level of experience, education, socio-economic status, nationality, personal
-appearance, race, religion, or sexual identity and orientation.
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, caste, color, religion, or sexual
+identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
 
 ## Our Standards
 
-Examples of behavior that contributes to creating a positive environment
-include:
+Examples of behavior that contributes to a positive environment for our
+community include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the overall
+  community
 
-Examples of unacceptable behavior by participants include:
+Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
- advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
+* The use of sexualized language or imagery, and sexual attention or advances of
+  any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
 * Public or private harassment
-* Publishing others' private information, such as a physical or electronic
- address, without explicit permission
+* Publishing others' private information, such as a physical or email address,
+  without their explicit permission
 * Other conduct which could reasonably be considered inappropriate in a
- professional setting
+  professional setting
 
-## Our Responsibilities
+## Enforcement Responsibilities
 
-Project maintainers are responsible for clarifying the standards of acceptable
-behavior and are expected to take appropriate and fair corrective action in
-response to any instances of unacceptable behavior.
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
 
-Project maintainers have the right and responsibility to remove, edit, or
-reject comments, commits, code, wiki edits, issues, and other contributions
-that are not aligned to this Code of Conduct, or to ban temporarily or
-permanently any contributor for other behaviors that they deem inappropriate,
-threatening, offensive, or harmful.
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
 
 ## Scope
 
-This Code of Conduct applies both within project spaces and in public spaces
-when an individual is representing the project or its community. Examples of
-representing a project or community include using an official project e-mail
-address, posting via an official social media account, or acting as an appointed
-representative at an online or offline event. Representation of a project may be
-further defined and clarified by project maintainers.
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official email address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
 
 ## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project lead Stephan Krusche at krusche@tum.de. All
-complaints will be reviewed and investigated and will result in a response that
-is deemed necessary and appropriate to the circumstances. The project team is
-obligated to maintain confidentiality with regard to the reporter of an incident.
-Further details of specific enforcement policies may be posted separately.
+reported to the community leaders responsible for enforcement at
+[INSERT CONTACT METHOD].
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of
+actions.
 
-Project maintainers who do not follow or enforce the Code of Conduct in good
-faith may face temporary or permanent repercussions as determined by other
-members of the project's leadership.
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or permanent
+ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the
+community.
 
 ## Attribution
 
-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
-available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.1, available at
+[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
 
-[homepage]: https://www.contributor-covenant.org
+Community Impact Guidelines were inspired by
+[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
 
-For answers to common questions about this code of conduct, see
-https://www.contributor-covenant.org/faq
+For answers to common questions about this code of conduct, see the FAQ at
+[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at
+[https://www.contributor-covenant.org/translations][translations].
+
+[homepage]: https://www.contributor-covenant.org
+[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
+[Mozilla CoC]: https://github.com/mozilla/diversity
+[FAQ]: https://www.contributor-covenant.org/faq
+[translations]: https://www.contributor-covenant.org/translations

From 215b72f747e78c6d1ee2de1b8b52f4925ff76f89 Mon Sep 17 00:00:00 2001
From: Asli Aykan <56061820+asliayk@users.noreply.github.com>
Date: Mon, 26 Aug 2024 11:18:06 +0200
Subject: [PATCH 06/15] Development: Replace the old translation feature in the
 client with the new desired approach (#8803)

---
 .../lti-configuration.component.html          |  14 +-
 ...ification-management-update.component.html |   2 +-
 ...tem-notification-management.component.html |  12 +-
 ...pcoming-exams-and-exercises.component.html |  18 +-
 .../user-management.component.html            |  50 ++--
 .../assessment-complaint-alert.component.html |   4 +-
 .../assessment-warning.component.ts           |   4 +-
 ...tructions-assessment-layout.component.html |   6 +-
 .../complaints-student-view.component.html    |  10 +-
 .../complaints-for-tutor.component.html       |  44 +---
 .../form/complaints-form.component.html       |  26 +-
 .../list-of-complaints.component.html         |  63 +++--
 .../request/complaint-request.component.html  |  15 +-
 .../app/core/about-us/about-us.component.html |  20 +-
 ...-export-confirmation-dialog.component.html |   2 +-
 .../data-export/data-export.component.html    |   6 +-
 .../competencies-popover.component.html       |  10 +-
 .../competency-card.component.html            |   2 +-
 .../competency-relation-graph.component.html  |  10 +-
 .../import-all-competencies.component.html    |   6 +-
 ...tency-recommendation-detail.component.html |   8 +-
 .../course-description-form.component.html    |  12 +-
 .../import/competency-search.component.html   |  24 +-
 .../course-scores.component.html              |  12 +-
 ...sment-dashboard-information.component.html |  32 +--
 .../assessment-dashboard.component.html       |  28 +--
 .../exam-assessment-buttons.component.html    |   2 +-
 .../learning-path-legend.component.html       |  20 +-
 .../learning-path.component.html              |   2 +-
 .../learning-path-management.component.html   |   2 +-
 .../course-lti-configuration.component.html   |  34 +--
 ...it-course-lti-configuration.component.html |   2 +-
 ...management-exercises-search.component.html |  28 +--
 ...course-management-exercises.component.html |   4 +-
 .../manage/course-management.component.html   |   8 +-
 .../manage/course-update.component.html       |  34 ++-
 .../course-detail-line-chart.component.html   |  21 +-
 .../course-management-card.component.html     |  40 ++--
 ...rse-management-exercise-row.component.html |  12 +-
 ...agement-overview-statistics.component.html |   2 +-
 ...case-instructor-detail-view.component.html |  20 +-
 ...arism-cases-instructor-view.component.html |  18 +-
 ...sm-case-student-detail-view.component.html |  10 +-
 .../tutorial-group-detail.component.html      |   2 +-
 ...al-group-free-days-overview.component.html |   5 +-
 .../tutorial-group-session-row.component.html |   4 +-
 ...torial-group-sessions-table.component.html |  34 +--
 .../tutorial-group-row.component.html         |   4 +-
 .../tutorial-groups-table.component.html      |  30 +--
 .../registered-students.component.html        |  11 +-
 ...-tutorial-group-free-period.component.html |   2 +-
 ...-tutorial-group-free-period.component.html |   2 +-
 ...rial-group-free-period-form.component.html |  60 ++---
 ...oup-free-period-row-buttons.component.html |   2 +-
 ...oup-free-periods-management.component.html |  12 +-
 ...al-group-free-periods-table.component.html |  12 +-
 ...eate-tutorial-group-session.component.html |   2 +-
 ...edit-tutorial-group-session.component.html |   2 +-
 ...tutorial-group-session-form.component.html |  42 +---
 .../cancellation-modal.component.html         |  24 +-
 ...l-group-session-row-buttons.component.html |   2 +-
 ...l-group-sessions-management.component.html |  10 +-
 .../tutorial-groups-checklist.component.html  |  26 +-
 ...torial-groups-configuration.component.html |   6 +-
 ...torial-groups-configuration.component.html |   2 +-
 ...l-groups-configuration-form.component.html |  63 +++--
 .../create-tutorial-group.component.html      |   2 +-
 .../edit-tutorial-group.component.html        |   2 +-
 .../schedule-form.component.html              |  64 ++---
 .../tutorial-group-form.component.html        |  92 +++-----
 .../tutorial-group-row-buttons.component.html |   6 +-
 ...l-groups-course-information.component.html |   4 +-
 ...torial-groups-import-button.component.html |   6 +-
 ...-registration-import-dialog.component.html |  25 +-
 .../tutorial-groups-management.component.html |  10 +-
 ...scores-average-scores-graph.component.html |   2 +-
 .../exam-scores/exam-scores.component.html    | 145 +++++-------
 .../manage/exam-management.component.html     |  30 +--
 .../exam/manage/exam-status.component.html    |  46 ++--
 .../exam-checklist.component.html             | 172 +++++++-------
 .../exam-edit-working-time.component.html     |   2 +-
 .../manage/exams/exam-detail.component.html   |  22 +-
 .../exam-import/exam-import.component.html    |   8 +-
 .../exam-mode-picker.component.html           |  17 +-
 .../manage/exams/exam-update.component.html   |  14 +-
 .../exercise-group-update.component.html      |   4 +-
 .../exercise-groups.component.html            |  56 +++--
 .../student-exams.component.html              |   4 +-
 .../students/exam-students.component.html     |   2 +-
 ...udents-upload-images-dialog.component.html |   2 +-
 ...m-students-attendance-check.component.html |  18 +-
 .../plagiarism-cases-overview.component.html  |  28 ++-
 .../suspicious-behavior.component.html        |  20 +-
 ...uspicious-sessions-overview.component.html |  14 +-
 .../test-run-management.component.html        |   6 +-
 .../exam-participation-cover.component.html   |   4 +-
 .../exam-navigation-bar.component.html        |  25 +-
 .../exam-participation.component.html         |   8 +-
 ...file-upload-exam-submission.component.html |  17 +-
 .../text/text-exam-submission.component.html  |   8 +-
 .../exam-general-information.component.html   |   8 +-
 .../exam-result-summary.component.html        |   8 +-
 .../quiz-exam-summary.component.html          |   4 +-
 .../events/exam-live-event.component.html     |  17 +-
 .../file-upload-assessment.component.html     |   4 +-
 ...file-upload-exercise-update.component.html |  26 +-
 .../file-upload-submission.component.html     |   4 +-
 ...example-modeling-submission.component.html |  12 +-
 .../modeling-exercise-update.component.html   |  48 ++--
 ...ution-entry-generation-step.component.html |   4 +-
 .../git-diff-report-modal.component.html      |  10 +-
 ...a-category-distribution-chart.component.ts |  47 ++--
 ...est-case-distribution-chart.component.html |  49 ++--
 ...-exercise-configure-grading.component.html |   6 +-
 ...xercise-grading-tasks-table.component.html |   4 +-
 ...ercise-instruction-analysis.component.html |   4 +-
 .../task-count-warning.component.html         |   2 +-
 ...programming-exercise-detail.component.html |   2 +-
 ...rogramming-exercise-grading.component.html |  18 +-
 ...rogramming-exercise-problem.component.html |  12 +-
 ...de-editor-student-container.component.html |  20 +-
 .../programming-submission-policy-status.ts   |  20 +-
 .../status/code-editor-status.component.html  |  12 +-
 ...ise-instruction-step-wizard.component.html |   4 +-
 ...apollon-diagram-create-form.component.html |  22 +-
 .../apollon-diagram-detail.component.html     |  13 +-
 .../apollon-diagram-list.component.html       |   2 +-
 ...drag-and-drop-question-edit.component.html |  12 +-
 ...match-percentage-info-modal.component.html |  10 +-
 ...ltiple-choice-question-edit.component.html |   6 +-
 .../quiz-exercise-update.component.html       |  12 +-
 .../quiz/manage/quiz-exercise.component.html  |  12 +-
 .../quiz-scoring-info-modal.component.html    |  14 +-
 ...te-multiple-choice-question.component.html |   6 +-
 .../quiz-re-evaluate.component.html           |   4 +-
 .../short-answer-question-edit.component.html |  48 ++--
 .../drag-and-drop-question.component.html     |  20 +-
 .../multiple-choice-question.component.html   |  14 +-
 ...iple-choice-visual-question.component.html |   4 +-
 .../short-answer-question.component.html      |   8 +-
 .../assessment-progress-label.component.html  |  22 +-
 ...ercise-assessment-dashboard.component.html | 146 ++++--------
 .../difficulty-picker.component.html          |  24 +-
 .../example-solution.component.html           |   4 +-
 .../example-submission-import.component.html  |   4 +-
 .../example-submissions.component.html        |   2 +-
 ...rcise-detail-common-actions.component.html |   2 +-
 ...-exercise-page-with-details.component.html |  29 +--
 .../header-participation-page.component.html  |   6 +-
 .../exercise-hint-expandable.component.html   |   4 +-
 ...xercise-hint-student-dialog.component.html |   9 +-
 .../exercise-info.component.html              |   2 +-
 .../exercise-scores.component.html            |  37 ++-
 .../exercise-update-warning.component.html    |   4 +-
 .../shared/feedback/feedback.component.html   |  32 +--
 ...ded-in-overall-score-picker.component.html |  15 +-
 .../participation.component.html              |   8 +-
 .../exercise-update-plagiarism.component.html |  13 +-
 .../plagiarism-header.component.html          |  10 +-
 .../plagiarism-inspector.component.html       |  16 +-
 .../plagiarism-run-details.component.html     |  42 ++--
 .../plagiarism-sidebar.component.html         |   8 +-
 .../split-pane-header.component.html          |   2 +-
 .../text-submission-viewer.component.html     |  13 +-
 .../rating-list/rating-list.component.html    |  20 +-
 .../shared/result/result.component.html       |  35 +--
 ...rading-instructions-details.component.html |  12 +-
 .../submission-policy-update.component.ts     |   6 +-
 .../team-participation-table.component.html   |  12 +-
 .../teams-import-dialog.component.html        |  36 +--
 .../shared/team/teams.component.html          |   4 +-
 .../unreferenced-feedback.component.html      |  11 +-
 .../text-assessment-area.component.html       |  13 +-
 .../example-text-submission.component.html    |  22 +-
 .../text-exercise-update.component.html       |  22 +-
 .../feature-overview.component.html           |   4 +-
 .../grading-system/bonus/bonus.component.html |  34 ++-
 .../detailed-grading-system.component.html    |  24 +-
 .../grading-key-overview.component.html       |   2 +-
 .../grading-key-table.component.html          |  10 +-
 .../grading-system-info-modal.component.html  |  26 +-
 .../grading-system.component.html             |  12 +-
 .../interval-grading-system.component.html    |  14 +-
 .../guided-tour/guided-tour.component.html    |   2 +-
 .../iris/about-iris/about-iris.component.html |   8 +-
 .../iris-base-chatbot.component.html          |   2 +-
 ...-common-sub-settings-update.component.html |  20 +-
 .../shared/iris-enabled.component.html        |  10 +-
 .../lecture-attachments.component.html        |   6 +-
 .../attachment-unit-form.component.html       |  30 +--
 .../attachment-units.component.html           |   8 +-
 .../create-exercise-unit.component.html       |  27 ++-
 .../lecture-unit-layout.component.html        |   2 +-
 .../lecture-unit-management.component.html    |   2 +-
 .../online-unit-form.component.html           |  28 +--
 .../text-unit-form.component.html             |  12 +-
 .../video-unit-form.component.html            |  34 +--
 .../app/lecture/lecture-update.component.html |  14 +-
 .../webapp/app/lecture/lecture.component.html |   2 +-
 ...lecture-wizard-competencies.component.html |  12 +-
 ...course-competencies-details.component.html |   6 +-
 .../course-competencies.component.html        |  10 +-
 ...nversations-code-of-conduct.component.html |   2 +-
 .../course-conversations.component.html       |   4 +-
 .../course-wide-search.component.html         |   8 +-
 .../channel-form/channel-form.component.html  |  74 +++---
 .../channels-create-dialog.component.html     |   4 +-
 .../channel-item/channel-item.component.html  |  38 ++-
 .../channels-overview-dialog.component.html   |  12 +-
 ...conversation-add-users-form.component.html |  24 +-
 ...nversation-add-users-dialog.component.html |   4 +-
 .../conversation-detail-dialog.component.html |  41 +++-
 .../conversation-info.component.html          |  32 ++-
 .../conversation-member-row.component.html    |  27 ++-
 .../conversation-members.component.html       |  18 +-
 .../conversation-settings.component.html      |  27 ++-
 ...generic-confirmation-dialog.component.html |   2 +-
 ...update-text-property-dialog.component.html |   2 +-
 .../group-chat-create-dialog.component.html   |  12 +-
 ...e-to-one-chat-create-dialog.component.html |   2 +-
 .../conversation-header.component.html        |  10 +-
 .../conversation-messages.component.html      |  17 +-
 .../course-dashboard.component.html           |   2 +-
 .../course-exercise-row.component.html        |   2 +-
 .../course-lecture-details.component.html     |  30 ++-
 .../course-lecture-row.component.html         |   2 +-
 .../overview/course-overview.component.html   |   4 +-
 ...course-prerequisites-button.component.html |   4 +-
 .../course-registration-button.component.html |   4 +-
 .../course-registration-detail.component.html |   8 +-
 .../course-prerequisites-modal.component.html |   2 +-
 .../course-registration.component.html        |   8 +-
 .../course-statistics.component.html          | 222 +++++++++---------
 .../course-tutorial-group-card.component.html |  11 +-
 .../course-unenrollment-modal.component.html  |  20 +-
 .../app/overview/courses.component.html       |  12 +-
 .../discussion-section.component.html         |  28 +--
 .../course-exercise-details.component.html    |  10 +-
 .../problem-statement.component.html          |   2 +-
 .../app/overview/header-course.component.html |   4 +-
 .../submission-result-status.component.html   |  14 +-
 .../exercise-scores-chart.component.html      |   6 +-
 .../code-button/code-button.component.html    |   9 +-
 .../not-released-tag.component.html           |   5 +-
 .../open-code-editor-button.component.html    |   4 +-
 .../reset-repo-button.component.html          |   6 +-
 .../start-practice-mode-button.component.html |   6 +-
 .../connection-warning.component.html         |   4 +-
 .../consistency-check.component.html          |   2 +-
 .../course-users-selector.component.html      |  12 +-
 .../tutor-leaderboard.component.html          |  18 +-
 .../date-time-picker.component.html           |   2 +-
 .../exercise-categories.component.html        |   2 +-
 .../layouts/navbar/navbar.component.html      |   2 +-
 ...loading-indicator-container.component.html |   2 +-
 .../markdown-editor.component.html            |  20 +-
 .../message-inline-input.component.html       |   6 +-
 .../message-reply-inline-input.component.html |   6 +-
 .../posting-content-part.component.html       |   4 +-
 .../posting-content.component.html            |   8 +-
 .../post-create-edit-modal.component.html     |   4 +-
 .../notification-sidebar.component.html       |  24 +-
 ...icipant-scores-distribution.component.html |   8 +-
 ...tistics-average-score-graph.component.html |  18 +-
 ...cs-score-distribution-graph.component.html |   2 +-
 ...ype-ahead-user-search-field.component.html |   2 +-
 .../users-import-dialog.component.html        |  12 +-
 .../account-information.component.html        |  30 +--
 .../notification-settings.component.html      |   5 +-
 .../science-settings.component.html           |   8 +-
 .../user-settings-container.component.html    |  30 +--
 ...sessment-complaint-alert.component.spec.ts |   9 +-
 .../code-editor-status.component.spec.ts      |  33 ++-
 .../complaints-for-tutor.component.spec.ts    |  11 +-
 ...res-average-scores-graph.component.spec.ts |   5 +-
 .../exercise-group-update.component.spec.ts   |   5 +-
 .../exam-navigation-bar.component.spec.ts     |   5 +-
 .../text-exam-submission.component.spec.ts    |   2 +
 .../events/exam-live-event.component.spec.ts  |  12 +-
 .../test-run-management.component.spec.ts     |   1 +
 .../component/exercises/shared/result.spec.ts |   3 +-
 .../detailed-grading-system.component.spec.ts |   2 +
 ...versation-add-users-form.component.spec.ts |   5 +-
 .../course-statistics.component.spec.ts       |  18 +-
 ...ramming-exercise-grading.component.spec.ts |   2 +
 .../shared/code-button.component.spec.ts      |   2 +
 .../course-users-selector.component.spec.ts   | 119 +++++-----
 .../notification-sidebar.component.spec.ts    |   9 +-
 .../component/shared/result.component.spec.ts |  22 +-
 .../conversation-options.component.spec.ts    |   5 +-
 ...tics-average-score-graph.component.spec.ts |   5 +-
 .../text-assessment-area.component.spec.ts    |  11 +-
 ...xt-submission-assessment.component.spec.ts |   4 +-
 ...urse-tutorial-group-card.component.spec.ts |  17 +-
 ...ial-group-sessions-table.component.spec.ts |  12 +-
 .../tutorial-groups-table.component.spec.ts   |   3 +
 ...l-group-free-period-form.component.spec.ts |  11 +-
 ...-free-periods-management.component.spec.ts |   4 +-
 ...orial-group-session-form.component.spec.ts |  11 +-
 ...roups-configuration-form.component.spec.ts |  11 +-
 ...gistration-import-dialog.component.spec.ts |   5 +-
 301 files changed, 2269 insertions(+), 2614 deletions(-)

diff --git a/src/main/webapp/app/admin/lti-configuration/lti-configuration.component.html b/src/main/webapp/app/admin/lti-configuration/lti-configuration.component.html
index 6e026c952a34..32fb9e3112d8 100644
--- a/src/main/webapp/app/admin/lti-configuration/lti-configuration.component.html
+++ b/src/main/webapp/app/admin/lti-configuration/lti-configuration.component.html
@@ -8,7 +8,7 @@ <h4 class="modal-title" jhiTranslate="artemisApp.lti.version13Configuration"></h
             <ng-template ngbNavContent>
                 <dt></dt>
                 <dt style="display: flex; align-items: center">
-                    <h4 class="modal-title">{{ 'artemisApp.lti.dynamicRegistrationUrl' | artemisTranslate }}</h4>
+                    <h4 class="modal-title" jhiTranslate="artemisApp.lti.dynamicRegistrationUrl"></h4>
                     <jhi-help-icon text="artemisApp.lti.dynamicRegistrationTooltip" />
                 </dt>
                 <dd>
@@ -17,7 +17,7 @@ <h4 class="modal-title">{{ 'artemisApp.lti.dynamicRegistrationUrl' | artemisTran
                 </dd>
                 <dt style="display: flex; align-items: center; justify-content: space-between; width: 100%">
                     <div class="modal-header" style="margin-bottom: 20px">
-                        <h4 class="modal-title" style="margin-right: 2px">{{ 'artemisApp.lti.configuredPlatforms' | artemisTranslate }}</h4>
+                        <h4 class="modal-title" style="margin-right: 2px" jhiTranslate="artemisApp.lti.configuredPlatforms"></h4>
                         <jhi-help-icon text="artemisApp.lti.configuredPlatformsTooltip" />
                     </div>
                     <div class="modal-header" style="margin-bottom: 20px">
@@ -130,35 +130,35 @@ <h4 class="modal-title" style="margin-right: 2px">{{ 'artemisApp.lti.configuredP
             <a ngbNavLink jhiTranslate="artemisApp.lti.serviceUrls"></a>
             <ng-template ngbNavContent>
                 <dt>
-                    <span>{{ 'artemisApp.lti.deepLinkingUrl' | artemisTranslate }}</span>
+                    <span jhiTranslate="artemisApp.lti.deepLinkingUrl"></span>
                 </dt>
                 <dd>
                     <span>{{ getDeepLinkingUrl() }}</span>
                     <jhi-copy-icon-button [copyText]="getDeepLinkingUrl()" />
                 </dd>
                 <dt>
-                    <span>{{ 'artemisApp.lti.toolUrl' | artemisTranslate }}</span>
+                    <span jhiTranslate="artemisApp.lti.toolUrl"></span>
                 </dt>
                 <dd>
                     <span>{{ getToolUrl() }}</span>
                     <jhi-copy-icon-button [copyText]="getToolUrl()" />
                 </dd>
                 <dt>
-                    <span>{{ 'artemisApp.lti.keysetUrl' | artemisTranslate }}</span>
+                    <span jhiTranslate="artemisApp.lti.keysetUrl"></span>
                 </dt>
                 <dd>
                     <span>{{ getKeysetUrl() }}</span>
                     <jhi-copy-icon-button [copyText]="getKeysetUrl()" />
                 </dd>
                 <dt>
-                    <span>{{ 'artemisApp.lti.initiateLoginUrl' | artemisTranslate }}</span>
+                    <span jhiTranslate="artemisApp.lti.initiateLoginUrl"></span>
                 </dt>
                 <dd>
                     <span>{{ getInitiateLoginUrl() }}</span>
                     <jhi-copy-icon-button [copyText]="getInitiateLoginUrl()" />
                 </dd>
                 <dt>
-                    <span>{{ 'artemisApp.lti.redirectUri' | artemisTranslate }}</span>
+                    <span jhiTranslate="artemisApp.lti.redirectUri"></span>
                 </dt>
                 <dd>
                     <span>{{ getRedirectUri() }}</span>
diff --git a/src/main/webapp/app/admin/system-notification-management/system-notification-management-update.component.html b/src/main/webapp/app/admin/system-notification-management/system-notification-management-update.component.html
index 8abce445fd5f..f04719bda98d 100644
--- a/src/main/webapp/app/admin/system-notification-management/system-notification-management-update.component.html
+++ b/src/main/webapp/app/admin/system-notification-management/system-notification-management-update.component.html
@@ -35,7 +35,7 @@ <h2 id="myNotificationLabel" jhiTranslate="artemisApp.systemNotification.createO
                         name="expireDate"
                     />
                     @if (expireDate?.errors?.expireMustBeAfterNotification) {
-                        <span class="text-danger">{{ 'error.systemNotificationNeedsNotificationBeforeExpiration' | artemisTranslate }}</span>
+                        <span class="text-danger" jhiTranslate="error.systemNotificationNeedsNotificationBeforeExpiration"></span>
                     }
                 </div>
             </div>
diff --git a/src/main/webapp/app/admin/system-notification-management/system-notification-management.component.html b/src/main/webapp/app/admin/system-notification-management/system-notification-management.component.html
index d6b7c7feca64..867f0c697bb2 100644
--- a/src/main/webapp/app/admin/system-notification-management/system-notification-management.component.html
+++ b/src/main/webapp/app/admin/system-notification-management/system-notification-management.component.html
@@ -30,19 +30,13 @@ <h2>
                             <td>
                                 @switch (getNotificationState(notification)) {
                                     @case (ACTIVE) {
-                                        <span class="badge bg-success">
-                                            {{ 'artemisApp.systemNotification.active' | artemisTranslate }}
-                                        </span>
+                                        <span class="badge bg-success" jhiTranslate="artemisApp.systemNotification.active"></span>
                                     }
                                     @case (EXPIRED) {
-                                        <span class="badge bg-danger">
-                                            {{ 'artemisApp.systemNotification.expired' | artemisTranslate }}
-                                        </span>
+                                        <span class="badge bg-danger" jhiTranslate="artemisApp.systemNotification.expired"></span>
                                     }
                                     @case (SCHEDULED) {
-                                        <span class="badge bg-info">
-                                            {{ 'artemisApp.systemNotification.scheduled' | artemisTranslate }}
-                                        </span>
+                                        <span class="badge bg-info" jhiTranslate="artemisApp.systemNotification.scheduled"></span>
                                     }
                                 }
                             </td>
diff --git a/src/main/webapp/app/admin/upcoming-exams-and-exercises/upcoming-exams-and-exercises.component.html b/src/main/webapp/app/admin/upcoming-exams-and-exercises/upcoming-exams-and-exercises.component.html
index 1451541419e2..9d928688216a 100644
--- a/src/main/webapp/app/admin/upcoming-exams-and-exercises/upcoming-exams-and-exercises.component.html
+++ b/src/main/webapp/app/admin/upcoming-exams-and-exercises/upcoming-exams-and-exercises.component.html
@@ -10,16 +10,16 @@ <h4 jhiTranslate="artemisApp.upcomingExamsAndExercises.upcomingExercises"></h4>
                 <thead>
                     <tr>
                         <th class="d-md-table-cell" style="width: 300px">
-                            <span>{{ 'artemisApp.upcomingExamsAndExercises.exercise' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.upcomingExamsAndExercises.exercise"></span>
                         </th>
                         <th class="d-md-table-cell" style="width: 300px">
-                            <span>{{ 'artemisApp.upcomingExamsAndExercises.course' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.upcomingExamsAndExercises.course"></span>
                         </th>
                         <th class="d-md-table-cell" style="width: 180px">
-                            <span>{{ 'artemisApp.upcomingExamsAndExercises.releaseDate' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.upcomingExamsAndExercises.releaseDate"></span>
                         </th>
                         <th class="d-md-table-cell" style="width: 180px">
-                            <span>{{ 'artemisApp.upcomingExamsAndExercises.dueDate' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.upcomingExamsAndExercises.dueDate"></span>
                         </th>
                     </tr>
                 </thead>
@@ -61,19 +61,19 @@ <h4 jhiTranslate="artemisApp.upcomingExamsAndExercises.upcomingExams"></h4>
                     <thead>
                         <tr>
                             <th class="d-md-table-cell" style="width: 300px">
-                                <span>{{ 'artemisApp.upcomingExamsAndExercises.exam' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.upcomingExamsAndExercises.exam"></span>
                             </th>
                             <th class="d-md-table-cell" style="width: 300px">
-                                <span>{{ 'artemisApp.upcomingExamsAndExercises.course' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.upcomingExamsAndExercises.course"></span>
                             </th>
                             <th class="d-md-table-cell" style="width: 180px">
-                                <span>{{ 'artemisApp.examManagement.visibleDate' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examManagement.visibleDate"></span>
                             </th>
                             <th class="d-md-table-cell" style="width: 180px">
-                                <span>{{ 'artemisApp.examManagement.startDate' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examManagement.startDate"></span>
                             </th>
                             <th class="d-md-table-cell" style="width: 180px">
-                                <span>{{ 'artemisApp.examManagement.endDate' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examManagement.endDate"></span>
                             </th>
                         </tr>
                     </thead>
diff --git a/src/main/webapp/app/admin/user-management/user-management.component.html b/src/main/webapp/app/admin/user-management/user-management.component.html
index 1c824ea864d0..60a62a3cd70c 100644
--- a/src/main/webapp/app/admin/user-management/user-management.component.html
+++ b/src/main/webapp/app/admin/user-management/user-management.component.html
@@ -63,9 +63,11 @@ <h2>
                                     [ngClass]="{ 'btn-secondary': !filters.numberOfAppliedFilters, 'btn-success': !!filters.numberOfAppliedFilters }"
                                 >
                                     <fa-icon [icon]="faFilter" />
-                                    <span class="d-s-none d-md-inline">{{
-                                        'artemisApp.userManagement.filter.modal.open' | artemisTranslate: { num: filters.numberOfAppliedFilters }
-                                    }}</span>
+                                    <span
+                                        class="d-s-none d-md-inline"
+                                        jhiTranslate="artemisApp.userManagement.filter.modal.open"
+                                        [translateValues]="{ num: filters.numberOfAppliedFilters }"
+                                    ></span>
                                 </button>
                             </div>
                         </div>
@@ -227,14 +229,14 @@ <h2>
 <!-- Modal -->
 <ng-template #content let-modal>
     <div class="modal-header">
-        <h5 class="modal-title">{{ 'artemisApp.userManagement.filter.modal.title' | artemisTranslate }}</h5>
+        <h5 class="modal-title" jhiTranslate="artemisApp.userManagement.filter.modal.title"></h5>
         <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss()"></button>
     </div>
     <div class="modal-body">
         <div class="container-fluid">
             <div class="row user-management-border-bottom">
                 <div class="col d-flex flex-row pb-1">
-                    <h5 class="my-0">{{ 'artemisApp.userManagement.filter.authority.title' | artemisTranslate: { num: this.filters.authorityFilter.size } }}</h5>
+                    <h5 class="my-0" jhiTranslate="artemisApp.userManagement.filter.authority.title" [translateValues]="{ num: this.filters.authorityFilter.size }"></h5>
                     <jhi-help-icon class="ps-1" text="artemisApp.userManagement.filter.authority.tooltip" />
                 </div>
             </div>
@@ -250,9 +252,7 @@ <h5 class="my-0">{{ 'artemisApp.userManagement.filter.authority.title' | artemis
                                     (click)="selectAllRoles()"
                                     [checked]="this.filters.authorityFilter.size === this.authorityFilters.length && !this.filters.noAuthority"
                                 />
-                                <label for="authorityFilter" class="form-check-label ps-1">
-                                    {{ 'artemisApp.userManagement.filter.all' | artemisTranslate }}
-                                </label>
+                                <label for="authorityFilter" class="form-check-label ps-1" jhiTranslate="artemisApp.userManagement.filter.all"></label>
                             </div>
                             <div class="form-check col-6 d-flex justify-content-center">
                                 <input
@@ -262,9 +262,7 @@ <h5 class="my-0">{{ 'artemisApp.userManagement.filter.authority.title' | artemis
                                     (click)="selectEmptyRoles()"
                                     [checked]="this.filters.authorityFilter.size === 0 && this.filters.noAuthority"
                                 />
-                                <label for="emptyRoles" class="form-check-label ps-1">
-                                    {{ 'artemisApp.userManagement.filter.authority.without' | artemisTranslate }}
-                                </label>
+                                <label for="emptyRoles" class="form-check-label ps-1" jhiTranslate="artemisApp.userManagement.filter.authority.without"></label>
                                 <jhi-help-icon class="ps-1" text="artemisApp.userManagement.filter.authority.withoutTooltip" />
                             </div>
                             <div class="form-check col-3 d-flex justify-content-center">
@@ -275,9 +273,7 @@ <h5 class="my-0">{{ 'artemisApp.userManagement.filter.authority.title' | artemis
                                     (click)="deselectAllRoles()"
                                     [checked]="this.filters.authorityFilter.size === 0 && !this.filters.noAuthority"
                                 />
-                                <label for="deselectAll" class="form-check-label ps-1">
-                                    {{ 'artemisApp.userManagement.filter.none' | artemisTranslate }}
-                                </label>
+                                <label for="deselectAll" class="form-check-label ps-1" jhiTranslate="artemisApp.userManagement.filter.none"></label>
                             </div>
                         </div>
                     </div>
@@ -304,7 +300,7 @@ <h5 class="my-0">{{ 'artemisApp.userManagement.filter.authority.title' | artemis
             </div>
             <div class="row row user-management-border-bottom">
                 <div class="col d-flex flex-row pt-3 pb-1">
-                    <h5 class="my-0">{{ 'artemisApp.userManagement.filter.origin.title' | artemisTranslate: { num: this.filters.originFilter.size } }}</h5>
+                    <h5 class="my-0" jhiTranslate="artemisApp.userManagement.filter.origin.title" [translateValues]="{ num: this.filters.originFilter.size }"></h5>
                     <jhi-help-icon class="ps-1" text="artemisApp.userManagement.filter.origin.tooltip" />
                 </div>
             </div>
@@ -321,16 +317,18 @@ <h5 class="my-0">{{ 'artemisApp.userManagement.filter.origin.title' | artemisTra
                         }
                         <li class="col-3">
                             <input class="form-check-input" type="radio" (click)="this.toggleOriginFilter()" [checked]="this.filters.originFilter.size === 0" />
-                            <label class="form-check-label ps-1">
-                                {{ 'artemisApp.userManagement.filter.none' | artemisTranslate }}
-                            </label>
+                            <label class="form-check-label ps-1" jhiTranslate="artemisApp.userManagement.filter.none"></label>
                         </li>
                     </ul>
                 </div>
             </div>
             <div class="row row user-management-border-bottom">
                 <div class="col d-flex flex-row pt-3 pb-1">
-                    <h5 class="my-0">{{ 'artemisApp.userManagement.filter.registrationNumber.title' | artemisTranslate: { num: this.filters.registrationNumberFilter.size } }}</h5>
+                    <h5
+                        class="my-0"
+                        jhiTranslate="artemisApp.userManagement.filter.registrationNumber.title"
+                        [translateValues]="{ num: this.filters.registrationNumberFilter.size }"
+                    ></h5>
                     <jhi-help-icon class="ps-1" text="artemisApp.userManagement.filter.registrationNumber.tooltip" />
                 </div>
             </div>
@@ -360,16 +358,14 @@ <h5 class="my-0">{{ 'artemisApp.userManagement.filter.registrationNumber.title'
                                 (click)="this.toggleRegistrationNumberFilter()"
                                 [checked]="this.filters.registrationNumberFilter.size === 0"
                             />
-                            <label for="toggleRegistrationNumberFilter" class="form-check-label ps-1">
-                                {{ 'artemisApp.userManagement.filter.none' | artemisTranslate }}
-                            </label>
+                            <label for="toggleRegistrationNumberFilter" class="form-check-label ps-1" jhiTranslate="artemisApp.userManagement.filter.none"></label>
                         </li>
                     </ul>
                 </div>
             </div>
             <div class="row user-management-border-bottom">
                 <div class="col d-flex flex-row pt-3 pb-1">
-                    <h5 class="my-0">{{ 'artemisApp.userManagement.filter.status.title' | artemisTranslate: { num: this.filters.statusFilter.size } }}</h5>
+                    <h5 class="my-0" jhiTranslate="artemisApp.userManagement.filter.status.title" [translateValues]="{ num: this.filters.statusFilter.size }"></h5>
                     <jhi-help-icon class="ps-1" text="artemisApp.userManagement.filter.status.tooltip" />
                 </div>
             </div>
@@ -386,9 +382,7 @@ <h5 class="my-0">{{ 'artemisApp.userManagement.filter.status.title' | artemisTra
                         }
                         <li class="col-3">
                             <input class="form-check-input" type="radio" (click)="this.toggleStatusFilter()" [checked]="this.filters.statusFilter.size === 0" />
-                            <label class="form-check-label ps-1">
-                                {{ 'artemisApp.userManagement.filter.none' | artemisTranslate }}
-                            </label>
+                            <label class="form-check-label ps-1" jhiTranslate="artemisApp.userManagement.filter.none"></label>
                         </li>
                     </ul>
                 </div>
@@ -396,9 +390,7 @@ <h5 class="my-0">{{ 'artemisApp.userManagement.filter.status.title' | artemisTra
         </div>
     </div>
     <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" (click)="modal.close()">
-            {{ 'artemisApp.userManagement.filter.modal.close' | artemisTranslate }}
-        </button>
+        <button type="button" class="btn btn-secondary" (click)="modal.close()" jhiTranslate="artemisApp.userManagement.filter.modal.close"></button>
         <button class="btn btn-primary" (click)="applyFilter()">
             <span jhiTranslate="artemisApp.userManagement.filter.apply"></span>
         </button>
diff --git a/src/main/webapp/app/assessment/assessment-complaint-alert/assessment-complaint-alert.component.html b/src/main/webapp/app/assessment/assessment-complaint-alert/assessment-complaint-alert.component.html
index f9b64a37cc41..5cc591067229 100644
--- a/src/main/webapp/app/assessment/assessment-complaint-alert/assessment-complaint-alert.component.html
+++ b/src/main/webapp/app/assessment/assessment-complaint-alert/assessment-complaint-alert.component.html
@@ -1,8 +1,8 @@
 @if (complaint) {
     @if (complaint?.complaintType === ComplaintType.COMPLAINT) {
-        <div class="alert alert-info">{{ 'artemisApp.complaint.hint' | artemisTranslate }}</div>
+        <div class="alert alert-info" jhiTranslate="artemisApp.complaint.hint"></div>
     }
     @if (complaint?.complaintType === ComplaintType.MORE_FEEDBACK) {
-        <div class="alert alert-info">{{ 'artemisApp.moreFeedback.hint' | artemisTranslate }}</div>
+        <div class="alert alert-info" jhiTranslate="artemisApp.moreFeedback.hint"></div>
     }
 }
diff --git a/src/main/webapp/app/assessment/assessment-warning/assessment-warning.component.ts b/src/main/webapp/app/assessment/assessment-warning/assessment-warning.component.ts
index aa21e99239c3..42120b935660 100644
--- a/src/main/webapp/app/assessment/assessment-warning/assessment-warning.component.ts
+++ b/src/main/webapp/app/assessment/assessment-warning/assessment-warning.component.ts
@@ -17,10 +17,10 @@ import { Submission } from 'app/entities/submission.model';
                 <div class="card-header">
                     <fa-icon [icon]="faExclamationTriangle" size="2x" class="text-warning" placement="bottom auto" />
                     @if (isBeforeExerciseDueDate) {
-                        <span>{{ 'artemisApp.assessment.dashboard.warning' | artemisTranslate }}</span>
+                        <span jhiTranslate="artemisApp.assessment.dashboard.warning"></span>
                     }
                     @if (!isBeforeExerciseDueDate) {
-                        <span>{{ 'artemisApp.assessment.dashboard.warningIndividual' | artemisTranslate }}</span>
+                        <span jhiTranslate="artemisApp.assessment.dashboard.warningIndividual"></span>
                     }
                 </div>
             }
diff --git a/src/main/webapp/app/assessment/structured-grading-instructions-assessment-layout/structured-grading-instructions-assessment-layout.component.html b/src/main/webapp/app/assessment/structured-grading-instructions-assessment-layout/structured-grading-instructions-assessment-layout.component.html
index bd1b68e325b8..a270275fdf7b 100644
--- a/src/main/webapp/app/assessment/structured-grading-instructions-assessment-layout/structured-grading-instructions-assessment-layout.component.html
+++ b/src/main/webapp/app/assessment/structured-grading-instructions-assessment-layout/structured-grading-instructions-assessment-layout.component.html
@@ -1,17 +1,17 @@
 @if (criteria) {
     <div class="mb-2">
         <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="button" (click)="expandAll()">
-            <fa-icon [icon]="faExpand" /> <span>{{ 'artemisApp.assessmentInstructions.expandAll' | artemisTranslate }}</span>
+            <fa-icon [icon]="faExpand" /> <span jhiTranslate="artemisApp.assessmentInstructions.expandAll"></span>
         </button>
         <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="button" (click)="collapseAll()">
-            <fa-icon [icon]="faCompress" /> <span>{{ 'artemisApp.assessmentInstructions.collapseAll' | artemisTranslate }}</span>
+            <fa-icon [icon]="faCompress" /> <span jhiTranslate="artemisApp.assessmentInstructions.collapseAll"></span>
         </button>
     </div>
 }
 @if (allowDrop) {
     <div class="alert alert-info">
         <fa-icon [icon]="faInfoCircle" />
-        <span>{{ 'artemisApp.exercise.dragDropInstruction' | artemisTranslate }}</span>
+        <span jhiTranslate="artemisApp.exercise.dragDropInstruction"></span>
     </div>
 }
 @for (criterion of criteria; track criterion; let criterionIndex = $index) {
diff --git a/src/main/webapp/app/complaints/complaints-for-students/complaints-student-view.component.html b/src/main/webapp/app/complaints/complaints-for-students/complaints-student-view.component.html
index efd1d1c458d1..c59190b2dad7 100644
--- a/src/main/webapp/app/complaints/complaints-for-students/complaints-student-view.component.html
+++ b/src/main/webapp/app/complaints/complaints-for-students/complaints-student-view.component.html
@@ -30,9 +30,8 @@
                                 ? ('artemisApp.complaint.complaintNotAllowedTooltip' | artemisTranslate)
                                 : ''
                         }}"
-                    >
-                        {{ 'artemisApp.complaint.moreInfo' | artemisTranslate }}
-                    </button>
+                        jhiTranslate="artemisApp.complaint.moreInfo"
+                    ></button>
                 }
                 @if (!isExamMode && course?.requestMoreFeedbackEnabled) {
                     <button
@@ -41,9 +40,8 @@
                         (click)="formComplaintType = ComplaintType.MORE_FEEDBACK"
                         [disabled]="!timeOfFeedbackRequestValid"
                         title="{{ !timeOfFeedbackRequestValid ? ('artemisApp.moreFeedback.notAllowedTooltip' | artemisTranslate) : '' }}"
-                    >
-                        {{ 'artemisApp.moreFeedback.button' | artemisTranslate }}
-                    </button>
+                        jhiTranslate="artemisApp.moreFeedback.button"
+                    ></button>
                 }
             </div>
         }
diff --git a/src/main/webapp/app/complaints/complaints-for-tutor/complaints-for-tutor.component.html b/src/main/webapp/app/complaints/complaints-for-tutor/complaints-for-tutor.component.html
index 0997b352dbbd..97bd1ae26257 100644
--- a/src/main/webapp/app/complaints/complaints-for-tutor/complaints-for-tutor.component.html
+++ b/src/main/webapp/app/complaints/complaints-for-tutor/complaints-for-tutor.component.html
@@ -1,25 +1,20 @@
 @if (isLoading) {
     <div class="d-flex justify-content-center">
         <div class="spinner-border" role="status">
-            <span class="sr-only">{{ 'loading' | artemisTranslate }}</span>
+            <span class="sr-only" jhiTranslate="loading"></span>
         </div>
     </div>
 }
 @if (!isLoading && complaint) {
-    <h3>
-        {{ complaint.complaintType === ComplaintType.MORE_FEEDBACK ? ('artemisApp.moreFeedback.review' | artemisTranslate) : ('artemisApp.complaint.review' | artemisTranslate) }}
-    </h3>
+    <h3 [jhiTranslate]="complaint.complaintType === ComplaintType.MORE_FEEDBACK ? 'artemisApp.moreFeedback.review' : 'artemisApp.complaint.review'"></h3>
 }
 @if (!isLoading && complaint) {
     <div class="col-12 mt-2" [class.px-0]="zeroIndent">
         @if (handled) {
-            <div class="alert alert-info">
-                {{
-                    complaint.complaintType === ComplaintType.MORE_FEEDBACK
-                        ? ('artemisApp.moreFeedback.alreadyHandled' | artemisTranslate)
-                        : ('artemisApp.complaint.complaintAlreadyHandled' | artemisTranslate)
-                }}
-            </div>
+            <div
+                class="alert alert-info"
+                [jhiTranslate]="complaint.complaintType === ComplaintType.MORE_FEEDBACK ? 'artemisApp.moreFeedback.alreadyHandled' : 'artemisApp.complaint.complaintAlreadyHandled'"
+            ></div>
         }
         <div class="mt-3 mb-3">
             @if (showLockDuration) {
@@ -35,21 +30,13 @@ <h3>
                 </div>
             }
             @if (lockedByCurrentUser) {
-                <button id="lockButton" class="btn btn-secondary" (click)="removeLock()">
-                    {{ 'artemisApp.locks.removeButton' | artemisTranslate }}
-                </button>
+                <button id="lockButton" class="btn btn-secondary" (click)="removeLock()" jhiTranslate="artemisApp.locks.removeButton"></button>
             }
         </div>
         <div class="row">
             <div class="col-12 col-md-6">
                 <h4>
-                    <span
-                        >{{
-                            complaint.complaintType === ComplaintType.MORE_FEEDBACK
-                                ? ('artemisApp.moreFeedback.title' | artemisTranslate)
-                                : ('artemisApp.complaint.title' | artemisTranslate)
-                        }}
-                    </span>
+                    <span [jhiTranslate]="complaint.complaintType === ComplaintType.MORE_FEEDBACK ? 'artemisApp.moreFeedback.title' : 'artemisApp.complaint.title'"></span>
                     @if (handled) {
                         <small>
                             @if (complaint?.accepted) {
@@ -71,13 +58,9 @@ <h4>
             </div>
             @if (handled || isAllowedToRespond) {
                 <div class="col-12 col-md-6">
-                    <h3>
-                        {{
-                            complaint.complaintType === ComplaintType.MORE_FEEDBACK
-                                ? ('artemisApp.moreFeedbackResponse.title' | artemisTranslate)
-                                : ('artemisApp.complaintResponse.title' | artemisTranslate)
-                        }}
-                    </h3>
+                    <h3
+                        [jhiTranslate]="complaint.complaintType === ComplaintType.MORE_FEEDBACK ? 'artemisApp.moreFeedbackResponse.title' : 'artemisApp.complaintResponse.title'"
+                    ></h3>
                     <div class="d-flex flex-column">
                         <textarea
                             id="responseTextArea"
@@ -128,9 +111,8 @@ <h3>
                                     [disabled]="isLockedForLoggedInUser"
                                     (click)="respondToComplaint(true)"
                                     title="{{ 'artemisApp.moreFeedbackResponse.sendResponseTooltip' | artemisTranslate }}"
-                                >
-                                    {{ 'artemisApp.moreFeedbackResponse.provideFeedback' | artemisTranslate }}
-                                </button>
+                                    jhiTranslate="artemisApp.moreFeedbackResponse.provideFeedback"
+                                ></button>
                             </div>
                         </div>
                     }
diff --git a/src/main/webapp/app/complaints/form/complaints-form.component.html b/src/main/webapp/app/complaints/form/complaints-form.component.html
index 3fbeb9a6a83c..59167771ce96 100644
--- a/src/main/webapp/app/complaints/form/complaints-form.component.html
+++ b/src/main/webapp/app/complaints/form/complaints-form.component.html
@@ -2,7 +2,7 @@
     <div class="col-12 mt-4">
         <div class="row">
             <div class="col-12 col-md-6">
-                <h3>{{ complaintType === ComplaintType.COMPLAINT ? ('artemisApp.complaint.title' | artemisTranslate) : ('artemisApp.moreFeedback.title' | artemisTranslate) }}</h3>
+                <h3 [jhiTranslate]="complaintType === ComplaintType.COMPLAINT ? 'artemisApp.complaint.title' : 'artemisApp.moreFeedback.title'"></h3>
                 @if (complaintType !== ComplaintType.COMPLAINT) {
                     <p>
                         {{ (exercise.teamMode ? 'artemisApp.moreFeedback.descriptionTeam' : 'artemisApp.moreFeedback.description') | artemisTranslate }}
@@ -15,28 +15,18 @@ <h3>{{ complaintType === ComplaintType.COMPLAINT ? ('artemisApp.complaint.title'
             <div class="col-12 col-md-6">
                 <p>
                     @if (exercise.teamMode) {
-                        <span>
-                            {{
-                                complaintType === ComplaintType.MORE_FEEDBACK
-                                    ? ('artemisApp.moreFeedback.beDescriptiveTeam' | artemisTranslate)
-                                    : ('artemisApp.complaint.beDescriptiveTeam' | artemisTranslate)
-                            }}
-                        </span>
+                        <span
+                            [jhiTranslate]="complaintType === ComplaintType.MORE_FEEDBACK ? 'artemisApp.moreFeedback.beDescriptiveTeam' : 'artemisApp.complaint.beDescriptiveTeam'"
+                        ></span>
                     }
                     @if (!exercise.teamMode) {
-                        <span>
-                            {{
-                                complaintType === ComplaintType.MORE_FEEDBACK
-                                    ? ('artemisApp.moreFeedback.beDescriptive' | artemisTranslate)
-                                    : ('artemisApp.complaint.beDescriptive' | artemisTranslate)
-                            }}
-                        </span>
+                        <span
+                            [jhiTranslate]="complaintType === ComplaintType.MORE_FEEDBACK ? 'artemisApp.moreFeedback.beDescriptive' : 'artemisApp.complaint.beDescriptive'"
+                        ></span>
                     }
                 </p>
                 @if (!examId) {
-                    <p>
-                        {{ 'artemisApp.complaint.exclusivityDisclaimer' | artemisTranslate }}
-                    </p>
+                    <p jhiTranslate="artemisApp.complaint.exclusivityDisclaimer"></p>
                 }
                 <div class="d-flex flex-column">
                     <textarea id="complainTextArea" class="col-12 px-1" rows="4" [maxLength]="this.maxComplaintTextLimit" [(ngModel)]="complaintText"> </textarea>
diff --git a/src/main/webapp/app/complaints/list-of-complaints/list-of-complaints.component.html b/src/main/webapp/app/complaints/list-of-complaints/list-of-complaints.component.html
index 0651cc2ad7e5..ff642a21befc 100644
--- a/src/main/webapp/app/complaints/list-of-complaints/list-of-complaints.component.html
+++ b/src/main/webapp/app/complaints/list-of-complaints/list-of-complaints.component.html
@@ -3,10 +3,10 @@
         <div class="col-md-8">
             <h2>
                 @if (complaintType === ComplaintType.COMPLAINT) {
-                    <span>{{ 'artemisApp.complaint.listOfComplaints.title' | artemisTranslate }}</span>
+                    <span jhiTranslate="artemisApp.complaint.listOfComplaints.title"></span>
                 }
                 @if (complaintType === ComplaintType.MORE_FEEDBACK) {
-                    <span>{{ 'artemisApp.moreFeedback.list.title' | artemisTranslate }}</span>
+                    <span jhiTranslate="artemisApp.moreFeedback.list.title"></span>
                 }
             </h2>
         </div>
@@ -15,16 +15,16 @@ <h2>
 <div class="col-12 mt-4">
     <div class="alert alert-info" [hidden]="!course || course.isAtLeastInstructor">
         @if (!allComplaintsForTutorLoaded && complaintType === ComplaintType.COMPLAINT) {
-            <span>{{ 'artemisApp.complaint.listOfComplaints.loadAllComplaintsExplanation' | artemisTranslate }}</span>
+            <span jhiTranslate="artemisApp.complaint.listOfComplaints.loadAllComplaintsExplanation"></span>
         }
         @if (!allComplaintsForTutorLoaded && complaintType === ComplaintType.MORE_FEEDBACK) {
-            <span>{{ 'artemisApp.moreFeedback.list.loadAllRequestsExplanation' | artemisTranslate }}</span>
+            <span jhiTranslate="artemisApp.moreFeedback.list.loadAllRequestsExplanation"></span>
         }
         @if (allComplaintsForTutorLoaded && complaintType === ComplaintType.COMPLAINT) {
-            <span> {{ 'artemisApp.complaint.listOfComplaints.allComplaintsLoaded' | artemisTranslate }}</span>
+            <span jhiTranslate="artemisApp.complaint.listOfComplaints.allComplaintsLoaded"></span>
         }
         @if (allComplaintsForTutorLoaded && complaintType === ComplaintType.MORE_FEEDBACK) {
-            <span>{{ 'artemisApp.moreFeedback.list.allRequestsLoaded' | artemisTranslate }}</span>
+            <span jhiTranslate="artemisApp.moreFeedback.list.allRequestsLoaded"></span>
         }
         @if (!allComplaintsForTutorLoaded) {
             <button
@@ -38,10 +38,10 @@ <h2>
                     <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                 }
                 @if (complaintType === ComplaintType.COMPLAINT) {
-                    <span>{{ 'artemisApp.complaint.listOfComplaints.loadAllComplaints' | artemisTranslate }}</span>
+                    <span jhiTranslate="artemisApp.complaint.listOfComplaints.loadAllComplaints"></span>
                 }
                 @if (complaintType === ComplaintType.MORE_FEEDBACK) {
-                    <span>{{ 'artemisApp.moreFeedback.list.loadAllRequests' | artemisTranslate }}</span>
+                    <span jhiTranslate="artemisApp.moreFeedback.list.loadAllRequests"></span>
                 }
             </button>
         }
@@ -59,13 +59,12 @@ <h2>
                 />
                 <label class="form-check-label" for="field_showAddressedComplaint">
                     @if (complaintType === ComplaintType.COMPLAINT) {
-                        <span>{{
-                            'artemisApp.complaint.listOfComplaints.show' + (filterOption === FILTER_OPTION_ADDRESSED_COMPLAINTS ? 'Only' : '') + 'AddressedComplaints'
-                                | artemisTranslate
-                        }}</span>
+                        <span
+                            jhiTranslate="artemisApp.complaint.listOfComplaints.show{{ filterOption === FILTER_OPTION_ADDRESSED_COMPLAINTS ? 'Only' : '' }}AddressedComplaints"
+                        ></span>
                     }
                     @if (complaintType === ComplaintType.MORE_FEEDBACK) {
-                        <span>{{ 'artemisApp.moreFeedback.list.showAnsweredRequests' | artemisTranslate }}</span>
+                        <span jhiTranslate="artemisApp.moreFeedback.list.showAnsweredRequests"></span>
                     }
                 </label>
             </div>
@@ -80,48 +79,48 @@ <h2>
                         <fa-icon [icon]="faSort" />
                     </th>
                     <th jhiSortBy="result.participation.exercise.title">
-                        <a class="th-link">{{ 'artemisApp.complaint.listOfComplaints.exercise' | artemisTranslate }}</a>
+                        <a class="th-link" jhiTranslate="artemisApp.complaint.listOfComplaints.exercise"></a>
                         <fa-icon [icon]="faSort" />
                     </th>
                     <th jhiSortBy="result.submission.id">
-                        <a class="th-link">{{ 'artemisApp.complaint.listOfComplaints.submissionId' | artemisTranslate }}</a>
+                        <a class="th-link" jhiTranslate="artemisApp.complaint.listOfComplaints.submissionId"></a>
                         <fa-icon [icon]="faSort" />
                     </th>
                     <th jhiSortBy="result.assessor.name">
-                        <a class="th-link">{{ 'artemisApp.complaint.listOfComplaints.assessorName' | artemisTranslate }}</a>
+                        <a class="th-link" jhiTranslate="artemisApp.complaint.listOfComplaints.assessorName"></a>
                         <fa-icon [icon]="faSort" />
                     </th>
                     @if (course?.isAtLeastInstructor) {
                         <th jhiSortBy="student.login">
-                            <a class="th-link">{{ 'artemisApp.complaint.listOfComplaints.studentLogin' | artemisTranslate }}</a>
+                            <a class="th-link" jhiTranslate="artemisApp.complaint.listOfComplaints.studentLogin"></a>
                             <fa-icon [icon]="faSort" />
                         </th>
                         <th jhiSortBy="student.name">
-                            <a class="th-link">{{ 'artemisApp.complaint.listOfComplaints.studentName' | artemisTranslate }}</a>
+                            <a class="th-link" jhiTranslate="artemisApp.complaint.listOfComplaints.studentName"></a>
                             <fa-icon [icon]="faSort" />
                         </th>
                         <th jhiSortBy="complaintResponse.reviewer.name">
-                            <a class="th-link">{{ 'artemisApp.complaint.listOfComplaints.reviewerName' | artemisTranslate }}</a>
+                            <a class="th-link" jhiTranslate="artemisApp.complaint.listOfComplaints.reviewerName"></a>
                             <fa-icon [icon]="faSort" />
                         </th>
                     }
                     <th jhiSortBy="submittedTime">
-                        <a class="th-link">{{ 'artemisApp.complaint.listOfComplaints.dateAndTime' | artemisTranslate }}</a>
+                        <a class="th-link" jhiTranslate="artemisApp.complaint.listOfComplaints.dateAndTime"></a>
                         <fa-icon [icon]="faSort" />
                     </th>
                     <th jhiSortBy="responseTime">
-                        <a class="th-link">{{ 'artemisApp.complaint.listOfComplaints.responseTime' | artemisTranslate }}</a>
+                        <a class="th-link" jhiTranslate="artemisApp.complaint.listOfComplaints.responseTime"></a>
                         <fa-icon [icon]="faSort" />
                     </th>
                     <th jhiSortBy="accepted">
-                        <a class="th-link">{{ 'artemisApp.complaint.listOfComplaints.status' | artemisTranslate }}</a>
+                        <a class="th-link" jhiTranslate="artemisApp.complaint.listOfComplaints.status"></a>
                         <fa-icon [icon]="faSort" />
                     </th>
                     <th jhiSortBy="lockStatus">
-                        <a class="th-link">{{ 'artemisApp.locks.lockStatus' | artemisTranslate }}</a>
+                        <a class="th-link" jhiTranslate="artemisApp.locks.lockStatus"></a>
                         <fa-icon [icon]="faSort" />
                     </th>
-                    <th>{{ 'artemisApp.complaint.listOfComplaints.actions' | artemisTranslate }}</th>
+                    <th jhiTranslate="artemisApp.complaint.listOfComplaints.actions"></th>
                 </tr>
             </thead>
             <tbody>
@@ -166,16 +165,16 @@ <h2>
                         </td>
                         <td>
                             @if (complaint.accepted === undefined) {
-                                <span class="text-warning">{{ 'artemisApp.complaint.listOfComplaints.noReply' | artemisTranslate }}</span>
+                                <span class="text-warning" jhiTranslate="artemisApp.complaint.listOfComplaints.noReply"></span>
                             }
                             @if (complaint.accepted === true && complaintType === ComplaintType.COMPLAINT) {
-                                <span class="text-success">{{ 'artemisApp.complaint.listOfComplaints.accepted' | artemisTranslate }}</span>
+                                <span class="text-success" jhiTranslate="artemisApp.complaint.listOfComplaints.accepted"></span>
                             }
                             @if (complaint.accepted === true && complaintType === ComplaintType.MORE_FEEDBACK) {
-                                <span class="text-success">{{ 'artemisApp.moreFeedback.accepted' | artemisTranslate }}</span>
+                                <span class="text-success" jhiTranslate="artemisApp.moreFeedback.accepted"></span>
                             }
                             @if (complaint.accepted === false) {
-                                <span class="text-danger">{{ 'artemisApp.complaint.listOfComplaints.rejected' | artemisTranslate }}</span>
+                                <span class="text-danger" jhiTranslate="artemisApp.complaint.listOfComplaints.rejected"></span>
                             }
                         </td>
                         <td>
@@ -185,10 +184,10 @@ <h2>
                             <button class="btn btn-primary btn-sm" (click)="openAssessmentEditor(complaint)" id="show-complaint">
                                 <fa-icon [icon]="faFolderOpen" [fixedWidth]="true" />
                                 @if (complaintType === ComplaintType.COMPLAINT) {
-                                    <span>{{ 'artemisApp.exerciseAssessmentDashboard.showComplaint' | artemisTranslate }}</span>
+                                    <span jhiTranslate="artemisApp.exerciseAssessmentDashboard.showComplaint"></span>
                                 }
                                 @if (complaintType === ComplaintType.MORE_FEEDBACK) {
-                                    <span>{{ 'artemisApp.exerciseAssessmentDashboard.showMoreFeedbackRequests' | artemisTranslate }}</span>
+                                    <span jhiTranslate="artemisApp.exerciseAssessmentDashboard.showMoreFeedbackRequests"></span>
                                 }
                             </button>
                         </td>
@@ -199,10 +198,10 @@ <h2>
     </div>
     <div class="alert alert-info" [hidden]="complaints.length !== 0">
         @if (complaintType === ComplaintType.COMPLAINT) {
-            <span>{{ 'artemisApp.exerciseAssessmentDashboard.noComplaints' | artemisTranslate }}</span>
+            <span jhiTranslate="artemisApp.exerciseAssessmentDashboard.noComplaints"></span>
         }
         @if (complaintType === ComplaintType.MORE_FEEDBACK) {
-            <span>{{ 'artemisApp.exerciseAssessmentDashboard.noMoreFeedbackRequests' | artemisTranslate }}</span>
+            <span jhiTranslate="artemisApp.exerciseAssessmentDashboard.noMoreFeedbackRequests"></span>
         }
     </div>
 </div>
diff --git a/src/main/webapp/app/complaints/request/complaint-request.component.html b/src/main/webapp/app/complaints/request/complaint-request.component.html
index 5c3b8f448f1c..2f86094c7345 100644
--- a/src/main/webapp/app/complaints/request/complaint-request.component.html
+++ b/src/main/webapp/app/complaints/request/complaint-request.component.html
@@ -7,18 +7,13 @@
         }}
         <span [ngbTooltip]="complaint.submittedTime | artemisDate">{{ complaint.submittedTime | artemisTimeAgo }}</span>
         @if (complaint.accepted === true) {
-            <span class="badge bg-success">
-                {{
-                    complaint.complaintType === ComplaintType.COMPLAINT
-                        ? ('artemisApp.complaint.acceptedLong' | artemisTranslate)
-                        : ('artemisApp.moreFeedback.acceptedLong' | artemisTranslate)
-                }}
-            </span>
+            <span
+                class="badge bg-success"
+                [jhiTranslate]="complaint.complaintType === ComplaintType.COMPLAINT ? 'artemisApp.complaint.acceptedLong' : 'artemisApp.moreFeedback.acceptedLong'"
+            ></span>
         }
         @if (complaint.accepted === false) {
-            <span class="badge bg-danger">
-                {{ 'artemisApp.complaint.rejectedLong' | artemisTranslate }}
-            </span>
+            <span class="badge bg-danger" jhiTranslate="artemisApp.complaint.rejectedLong"></span>
         }
     </p>
     <textarea
diff --git a/src/main/webapp/app/core/about-us/about-us.component.html b/src/main/webapp/app/core/about-us/about-us.component.html
index 50775464fff8..aef3b249c38a 100644
--- a/src/main/webapp/app/core/about-us/about-us.component.html
+++ b/src/main/webapp/app/core/about-us/about-us.component.html
@@ -1,26 +1,26 @@
 <div class="page">
     <div class="card-title ms-2">
-        <h2 class="mb-3 mt-3 font-weight-bold">{{ 'artemisApp.aboutUsOverview.title' | artemisTranslate }}</h2>
+        <h2 class="mb-3 mt-3 font-weight-bold" jhiTranslate="artemisApp.aboutUsOverview.title"></h2>
     </div>
     <div>
-        <h3 class="mb-3 ms-2 font-weight-bold">{{ 'artemisApp.aboutUsOverview.getInTouch' | artemisTranslate }}</h3>
+        <h3 class="mb-3 ms-2 font-weight-bold" jhiTranslate="artemisApp.aboutUsOverview.getInTouch"></h3>
         <ul>
             <li>
-                <a [href]="BUG_REPORT_URL" rel="noreferrer noopener" class="footer-text ms-3" target="_blank">{{ 'bug' | artemisTranslate }}</a>
+                <a [href]="BUG_REPORT_URL" rel="noreferrer noopener" class="footer-text ms-3" target="_blank" jhiTranslate="bug"></a>
             </li>
             <li>
-                <a [href]="FEATURE_REQUEST_URL" class="footer-text ms-3" target="_blank"> {{ 'feature' | artemisTranslate }}</a>
+                <a [href]="FEATURE_REQUEST_URL" class="footer-text ms-3" target="_blank" jhiTranslate="feature"></a>
             </li>
             <li>
-                <a [href]="email" class="footer-text ms-3" target="_top"> {{ 'contact' | artemisTranslate }}</a>
+                <a [href]="email" class="footer-text ms-3" target="_top" jhiTranslate="contact"></a>
             </li>
             <li>
-                <a [href]="RELEASE_NOTES_URL" class="footer-text ms-3" target="_blank">{{ 'releaseNotes' | artemisTranslate }}</a>
+                <a [href]="RELEASE_NOTES_URL" class="footer-text ms-3" target="_blank" jhiTranslate="releaseNotes"></a>
             </li>
         </ul>
     </div>
     <div class="mb-5 ms-2">
-        <h3 class="mb-3 font-weight-bold">{{ 'artemisApp.aboutUsOverview.feature' | artemisTranslate }}</h3>
+        <h3 class="mb-3 font-weight-bold" jhiTranslate="artemisApp.aboutUsOverview.feature"></h3>
         <ol>
             @for (section of SECTIONS; track section) {
                 <li>
@@ -41,7 +41,7 @@ <h4 class="font-weight-bold">{{ pm.fullName }}</h4>
                                 <h5>{{ 'artemisApp.aboutUsOverview.roles.' + pm.role | artemisTranslate }}</h5>
                                 <span>
                                     <i></i>
-                                    <a href="{{ pm.website }}" target="_blank" rel="noopener noreferrer">{{ 'artemisApp.aboutUsOverview.website' | artemisTranslate }}</a>
+                                    <a href="{{ pm.website }}" target="_blank" rel="noopener noreferrer" jhiTranslate="artemisApp.aboutUsOverview.website"></a>
                                 </span>
                             </div>
                         </div>
@@ -52,7 +52,7 @@ <h5>{{ 'artemisApp.aboutUsOverview.roles.' + pm.role | artemisTranslate }}</h5>
     }
     @if (data && data.contributors) {
         <div class="mt-5 ms-2 me-2">
-            <h3 class="font-weight-bold">{{ 'artemisApp.aboutUsOverview.contributors' | artemisTranslate }}</h3>
+            <h3 class="font-weight-bold" jhiTranslate="artemisApp.aboutUsOverview.contributors"></h3>
             <div class="row">
                 @for (contributor of data.contributors; track contributor) {
                     <div class="contributor text-center">
@@ -66,7 +66,7 @@ <h3 class="font-weight-bold">{{ 'artemisApp.aboutUsOverview.contributors' | arte
         </div>
     }
     <div class="mt-5 ms-2 me-2">
-        <h3 class="font-weight-bold">{{ 'artemisApp.git.title' | artemisTranslate }}</h3>
+        <h3 class="font-weight-bold" jhiTranslate="artemisApp.git.title"></h3>
         <div>
             {{ 'artemisApp.git.branch' | artemisTranslate }}: {{ gitBranchName }}<br />
             {{ 'artemisApp.git.commit' | artemisTranslate }}: {{ gitCommitId }}
diff --git a/src/main/webapp/app/core/legal/data-export/confirmation/data-export-confirmation-dialog.component.html b/src/main/webapp/app/core/legal/data-export/confirmation/data-export-confirmation-dialog.component.html
index 0c25f8d340e8..676e5f46c404 100644
--- a/src/main/webapp/app/core/legal/data-export/confirmation/data-export-confirmation-dialog.component.html
+++ b/src/main/webapp/app/core/legal/data-export/confirmation/data-export-confirmation-dialog.component.html
@@ -20,7 +20,7 @@ <h4 class="modal-title">
                                 (change)="onRequestDataExportForOtherUserChanged($event)"
                                 [(ngModel)]="requestForAnotherUser"
                             />
-                            <label for="request-for-other-user" class="form-check-label">{{ 'artemisApp.dataExport.requestForAnotherUser' | artemisTranslate }}</label>
+                            <label for="request-for-other-user" class="form-check-label" jhiTranslate="artemisApp.dataExport.requestForAnotherUser"></label>
                         </div>
                         @if (requestForAnotherUser) {
                             <jhi-type-ahead-user-search-field [(loginOrName)]="expectedLogin" />
diff --git a/src/main/webapp/app/core/legal/data-export/data-export.component.html b/src/main/webapp/app/core/legal/data-export/data-export.component.html
index 0c22abcc9769..a949ef535259 100644
--- a/src/main/webapp/app/core/legal/data-export/data-export.component.html
+++ b/src/main/webapp/app/core/legal/data-export/data-export.component.html
@@ -32,19 +32,19 @@ <h1>
     <div class="mt-3 d-flex-column align-content-center">
         @if (dataExport?.createdDate && state !== DataExportState.FAILED) {
             <p>
-                <span> {{ 'artemisApp.dataExport.lastRequestDate' | artemisTranslate }}</span>
+                <span jhiTranslate="artemisApp.dataExport.lastRequestDate"></span>
                 <span class="bold">{{ dataExport?.createdDate | artemisDate: 'long-date' }}</span>
             </p>
         }
         @if (dataExport?.nextRequestDate && (state === DataExportState.DELETED || state === DataExportState.DOWNLOADED_DELETED) && !canRequestDataExport) {
             <p>
-                <span> {{ 'artemisApp.dataExport.nextRequestDate' | artemisTranslate }}</span>
+                <span jhiTranslate="artemisApp.dataExport.nextRequestDate"></span>
                 <span class="bold">{{ dataExport?.nextRequestDate | artemisDate: 'long-date' }}</span>
             </p>
         }
         @if (state === DataExportState.REQUESTED || state === DataExportState.IN_CREATION) {
             <p>
-                <span> {{ 'artemisApp.dataExport.isBeingCreated' | artemisTranslate }}</span>
+                <span jhiTranslate="artemisApp.dataExport.isBeingCreated"></span>
             </p>
         }
     </div>
diff --git a/src/main/webapp/app/course/competencies/competencies-popover/competencies-popover.component.html b/src/main/webapp/app/course/competencies/competencies-popover/competencies-popover.component.html
index 90ce76259d01..86b706cec05b 100644
--- a/src/main/webapp/app/course/competencies/competencies-popover/competencies-popover.component.html
+++ b/src/main/webapp/app/course/competencies/competencies-popover/competencies-popover.component.html
@@ -1,12 +1,8 @@
-<ng-template #popTitle>
-    <span class="font-weight-bold">{{ 'artemisApp.competency.competencyPopover.connectedCompetencies' | artemisTranslate }}</span></ng-template
->
+<ng-template #popTitle> <span class="font-weight-bold" jhiTranslate="artemisApp.competency.competencyPopover.connectedCompetencies"></span></ng-template>
 <ng-template #popContent>
     @if (competencies && competencies.length > 0) {
         <div>
-            <small>
-                {{ 'artemisApp.competency.competencyPopover.explanation' | artemisTranslate }}
-            </small>
+            <small jhiTranslate="artemisApp.competency.competencyPopover.explanation"></small>
             <ul class="list-group">
                 @for (competency of competencies; track competency) {
                     <a class="list-group-item" [routerLink]="navigationArray">{{ competency.title }}</a>
@@ -14,7 +10,7 @@
             </ul>
         </div>
     } @else {
-        <a [routerLink]="navigationArray">{{ 'artemisApp.competency.competencyPopover.noCompetencies' | artemisTranslate }}</a>
+        <a [routerLink]="navigationArray" jhiTranslate="artemisApp.competency.competencyPopover.noCompetencies"></a>
     }
 </ng-template>
 <button type="button" class="btn btn-sm btn-primary competency-button" [ngbPopover]="popContent" [popoverTitle]="popTitle" popoverClass="competency-popover">
diff --git a/src/main/webapp/app/course/competencies/competency-card/competency-card.component.html b/src/main/webapp/app/course/competencies/competency-card/competency-card.component.html
index e6271908e59c..ffddb7b4643a 100644
--- a/src/main/webapp/app/course/competencies/competency-card/competency-card.component.html
+++ b/src/main/webapp/app/course/competencies/competency-card/competency-card.component.html
@@ -52,7 +52,7 @@ <h4 class="m-0">
             </div>
             @if (competency.softDueDate) {
                 <div class="col-sm col py-2" style="max-width: fit-content">
-                    <span style="vertical-align: middle"> {{ 'artemisApp.competency.competencyCard.softDueDate' | artemisTranslate }} </span>
+                    <span style="vertical-align: middle" jhiTranslate="artemisApp.competency.competencyCard.softDueDate"></span>
                     <span class="badge" [ngClass]="softDueDatePassed && !isMastered ? 'bg-danger' : 'bg-success'" id="date-badge">
                         {{ competency.softDueDate! | artemisTimeAgo }}
                     </span>
diff --git a/src/main/webapp/app/course/competencies/competency-management/competency-relation-graph.component.html b/src/main/webapp/app/course/competencies/competency-management/competency-relation-graph.component.html
index e50d548a6cc4..85abe072e64a 100644
--- a/src/main/webapp/app/course/competencies/competency-management/competency-relation-graph.component.html
+++ b/src/main/webapp/app/course/competencies/competency-management/competency-relation-graph.component.html
@@ -2,9 +2,7 @@
     <div ngbAccordion [closeOthers]="true">
         <div ngbAccordionItem>
             <div ngbAccordionHeader>
-                <button ngbAccordionButton>
-                    {{ 'artemisApp.competency.relation.competencyRelations' | artemisTranslate }}
-                </button>
+                <button ngbAccordionButton jhiTranslate="artemisApp.competency.relation.competencyRelations"></button>
             </div>
             <div ngbAccordionCollapse>
                 <div ngbAccordionBody>
@@ -12,7 +10,7 @@
                         <form class="row p-3 pb-0 g-3 align-items-end">
                             <div class="col">
                                 <div class="form-group">
-                                    <label for="tail">{{ 'artemisApp.competency.relation.tailCompetency' | artemisTranslate }}</label>
+                                    <label for="tail" jhiTranslate="artemisApp.competency.relation.tailCompetency"></label>
                                     <select
                                         [ngClass]="{ 'border-danger': relationError }"
                                         class="form-select"
@@ -29,7 +27,7 @@
                             </div>
                             <div class="col">
                                 <div class="form-group">
-                                    <label for="type">{{ 'artemisApp.competency.relation.relationType' | artemisTranslate }}</label>
+                                    <label for="type" jhiTranslate="artemisApp.competency.relation.relationType"></label>
                                     <select
                                         [ngClass]="{ 'border-danger': relationError }"
                                         class="form-select"
@@ -49,7 +47,7 @@
                             </div>
                             <div class="col">
                                 <div class="form-group">
-                                    <label for="head">{{ 'artemisApp.competency.relation.headCompetency' | artemisTranslate }}</label>
+                                    <label for="head" jhiTranslate="artemisApp.competency.relation.headCompetency"></label>
                                     <select
                                         [ngClass]="{ 'border-danger': relationError }"
                                         class="form-select"
diff --git a/src/main/webapp/app/course/competencies/competency-management/import-all-competencies.component.html b/src/main/webapp/app/course/competencies/competency-management/import-all-competencies.component.html
index 3dcbbb03c4b2..ca189ca775c7 100644
--- a/src/main/webapp/app/course/competencies/competency-management/import-all-competencies.component.html
+++ b/src/main/webapp/app/course/competencies/competency-management/import-all-competencies.component.html
@@ -5,12 +5,12 @@ <h4 class="modal-title" [jhiTranslate]="'artemisApp.' + competencyType + '.impor
     </div>
     <div class="modal-body">
         <div class="form-group form-inline">
-            <span>{{ 'artemisApp.competency.importAll.search' | artemisTranslate }}</span>
+            <span jhiTranslate="artemisApp.competency.importAll.search"></span>
             <input [(ngModel)]="searchTerm" class="form-control ms-2" name="searchCourse" type="text" />
-            <span class="ms-3">{{ 'artemisApp.competency.import.importRelations' | artemisTranslate }}</span>
+            <span class="ms-3" jhiTranslate="artemisApp.competency.import.importRelations"></span>
             <input type="checkbox" class="ms-2" [(ngModel)]="importRelations" name="importRelations" />
             @if (loading) {
-                <span class="ms-3">{{ 'loading' | artemisTranslate }}</span>
+                <span class="ms-3" jhiTranslate="loading"></span>
             }
         </div>
         <table class="table table-striped align-middle flex">
diff --git a/src/main/webapp/app/course/competencies/generate-competencies/competency-recommendation-detail.component.html b/src/main/webapp/app/course/competencies/generate-competencies/competency-recommendation-detail.component.html
index 511a8db012fe..5e3f9ead56cd 100644
--- a/src/main/webapp/app/course/competencies/generate-competencies/competency-recommendation-detail.component.html
+++ b/src/main/webapp/app/course/competencies/generate-competencies/competency-recommendation-detail.component.html
@@ -9,7 +9,7 @@ <h6 class="mb-0 text-nowrap text-truncate overflow-hidden">{{ titleControl.value
         <div class="d-flex align-items-center flex-grow-1 justify-content-end">
             <div class="d-flex me-3">
                 <input class="me-1" type="checkbox" id="viewed-{{ index }}" formControlName="viewed" />
-                <label for="viewed-{{ index }}">{{ 'artemisApp.competency.generate.viewedLabel' | artemisTranslate }}</label>
+                <label for="viewed-{{ index }}" jhiTranslate="artemisApp.competency.generate.viewedLabel"></label>
             </div>
             @if (!isInEditMode) {
                 <jhi-button
@@ -48,7 +48,7 @@ <h6 class="mb-0 text-nowrap text-truncate overflow-hidden">{{ titleControl.value
     </div>
     <div class="card-body border-0" [ngbCollapse]="isCollapsed" formGroupName="competency">
         <div class="form-group">
-            <label for="title-{{ index }}">{{ 'artemisApp.competency.title' | artemisTranslate }}</label>
+            <label for="title-{{ index }}" jhiTranslate="artemisApp.competency.title"></label>
             <input type="text" class="form-control" id="title-{{ index }}" formControlName="title" />
             @if (titleControl.invalid && (titleControl.dirty || titleControl.touched)) {
                 <div class="alert alert-danger">
@@ -62,7 +62,7 @@ <h6 class="mb-0 text-nowrap text-truncate overflow-hidden">{{ titleControl.value
             }
         </div>
         <div class="form-group">
-            <label for="description-{{ index }}">{{ 'artemisApp.competency.description' | artemisTranslate }}</label>
+            <label for="description-{{ index }}" jhiTranslate="artemisApp.competency.description"></label>
             @if (isInEditMode) {
                 <jhi-markdown-editor-monaco
                     [markdown]="descriptionControl.value"
@@ -91,7 +91,7 @@ <h6 class="mb-0 text-nowrap text-truncate overflow-hidden">{{ titleControl.value
             }
         </div>
         <div class="form-group">
-            <label for="taxonomy-{{ index }}">{{ 'artemisApp.competency.taxonomy' | artemisTranslate }}</label>
+            <label for="taxonomy-{{ index }}" jhiTranslate="artemisApp.competency.taxonomy"></label>
             <jhi-taxonomy-select selectId="taxonomy-{{ index }}" [form]="taxonomyControl" />
         </div>
     </div>
diff --git a/src/main/webapp/app/course/competencies/generate-competencies/course-description-form.component.html b/src/main/webapp/app/course/competencies/generate-competencies/course-description-form.component.html
index f0297c939a1c..3b0151de263d 100644
--- a/src/main/webapp/app/course/competencies/generate-competencies/course-description-form.component.html
+++ b/src/main/webapp/app/course/competencies/generate-competencies/course-description-form.component.html
@@ -14,19 +14,13 @@
         @if (courseDescriptionControl.invalid && (courseDescriptionControl.dirty || courseDescriptionControl.touched)) {
             <div class="alert alert-danger mb-0">
                 @if (courseDescriptionControl.errors?.required) {
-                    <div>
-                        {{ 'artemisApp.competency.generate.courseDescription.requiredValidationError' | artemisTranslate }}
-                    </div>
+                    <div jhiTranslate="artemisApp.competency.generate.courseDescription.requiredValidationError"></div>
                 }
                 @if (courseDescriptionControl.errors?.minlength) {
-                    <div>
-                        {{ 'artemisApp.competency.generate.courseDescription.minlengthValidationError' | artemisTranslate: { min: DESCRIPTION_MIN } }}
-                    </div>
+                    <div jhiTranslate="artemisApp.competency.generate.courseDescription.minlengthValidationError" [translateValues]="{ min: DESCRIPTION_MIN }"></div>
                 }
                 @if (courseDescriptionControl.errors?.maxlength) {
-                    <div>
-                        {{ 'artemisApp.competency.generate.courseDescription.maxlengthValidationError' | artemisTranslate: { max: DESCRIPTION_MAX } }}
-                    </div>
+                    <div jhiTranslate="artemisApp.competency.generate.courseDescription.maxlengthValidationError" [translateValues]="{ max: DESCRIPTION_MAX }"></div>
                 }
             </div>
         }
diff --git a/src/main/webapp/app/course/competencies/import/competency-search.component.html b/src/main/webapp/app/course/competencies/import/competency-search.component.html
index 345bc3c02558..2a58720983cf 100644
--- a/src/main/webapp/app/course/competencies/import/competency-search.component.html
+++ b/src/main/webapp/app/course/competencies/import/competency-search.component.html
@@ -1,32 +1,24 @@
 <div class="card">
     <div class="card-header">
-        <h5 class="mb-0">{{ 'artemisApp.competency.import.search.title' | artemisTranslate }}</h5>
+        <h5 class="mb-0" jhiTranslate="artemisApp.competency.import.search.title"></h5>
     </div>
     <div class="card-body pb-1">
         <div class="form-group">
-            <label for="competency-title-input">
-                {{ 'artemisApp.competency.import.search.labelCompetencyTitle' | artemisTranslate }}
-            </label>
+            <label for="competency-title-input" jhiTranslate="artemisApp.competency.import.search.labelCompetencyTitle"></label>
             <input id="competency-title-input" class="form-control" [(ngModel)]="search.title" (keydown.enter)="performSearch()" />
         </div>
         <div [ngbCollapse]="!advancedSearchEnabled">
             <div class="form-group">
-                <label for="competency-description-input">
-                    {{ 'artemisApp.competency.import.search.labelCompetencyDescription' | artemisTranslate }}
-                </label>
+                <label for="competency-description-input" jhiTranslate="artemisApp.competency.import.search.labelCompetencyDescription"></label>
                 <textarea id="competency-description-input" rows="3" class="form-control" [(ngModel)]="search.description" (keydown.enter)="performSearch()"></textarea>
             </div>
             <div class="row">
                 <div class="form-group col">
-                    <label for="course-title-input">
-                        {{ 'artemisApp.competency.import.search.labelCourseTitle' | artemisTranslate }}
-                    </label>
+                    <label for="course-title-input" jhiTranslate="artemisApp.competency.import.search.labelCourseTitle"></label>
                     <input id="course-title-input" class="form-control" [(ngModel)]="search.courseTitle" (keydown.enter)="performSearch()" />
                 </div>
                 <div class="form-group col">
-                    <label for="course-semester-select">
-                        {{ 'artemisApp.competency.import.search.labelCourseSemester' | artemisTranslate }}
-                    </label>
+                    <label for="course-semester-select" jhiTranslate="artemisApp.competency.import.search.labelCourseSemester"></label>
                     <select id="course-semester-select" class="form-select" [(ngModel)]="search.semester" (keydown.enter)="performSearch()">
                         @for (semester of semesters; track semester) {
                             <option [value]="semester">{{ semester }}</option>
@@ -42,9 +34,9 @@ <h5 class="mb-0">{{ 'artemisApp.competency.import.search.title' | artemisTransla
         <div class="d-flex flex-row justify-content-center">
             <div id="toggleAdvancedSearch" class="clickable" (click)="toggleAdvancedSearch()">
                 <fa-icon [icon]="advancedSearchEnabled ? faChevronUp : faChevronDown" />
-                <span>{{
-                    (advancedSearchEnabled ? 'artemisApp.competency.import.search.hideAdvancedSearch' : 'artemisApp.competency.import.search.showAdvancedSearch') | artemisTranslate
-                }}</span>
+                <span
+                    jhiTranslate="{{ advancedSearchEnabled ? 'artemisApp.competency.import.search.hideAdvancedSearch' : 'artemisApp.competency.import.search.showAdvancedSearch' }}"
+                ></span>
             </div>
         </div>
     </div>
diff --git a/src/main/webapp/app/course/course-scores/course-scores.component.html b/src/main/webapp/app/course/course-scores/course-scores.component.html
index 67f3e94610e7..21e3186ea908 100644
--- a/src/main/webapp/app/course/course-scores/course-scores.component.html
+++ b/src/main/webapp/app/course/course-scores/course-scores.component.html
@@ -149,13 +149,11 @@ <h4 jhiTranslate="artemisApp.instructorDashboard.courseScoreChart.scoreDistribut
                             <th jhiSortBy="overallPoints"><span jhiTranslate="artemisApp.instructorDashboard.overallScore"></span> <fa-icon [icon]="faSort" /></th>
                             @if (gradingScaleExists) {
                                 <th jhiSortBy="overallPoints">
-                                    <span>
-                                        {{
-                                            isBonus
-                                                ? ('artemisApp.courseScoreCalculation.gradingSystemBonus' | artemisTranslate)
-                                                : ('artemisApp.courseScoreCalculation.gradingSystemGrade' | artemisTranslate)
-                                        }}
-                                    </span>
+                                    <span
+                                        jhiTranslate="{{
+                                            isBonus ? 'artemisApp.courseScoreCalculation.gradingSystemBonus' : 'artemisApp.courseScoreCalculation.gradingSystemGrade'
+                                        }}"
+                                    ></span>
                                     <fa-icon [icon]="faSort" />
                                 </th>
                             }
diff --git a/src/main/webapp/app/course/dashboards/assessment-dashboard/assessment-dashboard-information.component.html b/src/main/webapp/app/course/dashboards/assessment-dashboard/assessment-dashboard-information.component.html
index aa56233500bd..a91807bd95a9 100644
--- a/src/main/webapp/app/course/dashboards/assessment-dashboard/assessment-dashboard-information.component.html
+++ b/src/main/webapp/app/course/dashboards/assessment-dashboard/assessment-dashboard-information.component.html
@@ -32,16 +32,14 @@
             @if (!isExamMode) {
                 <div>
                     <div class="row g-0 mb-1">
-                        <div class="col-7">
-                            {{ 'artemisApp.assessmentDashboard.assessments' | artemisTranslate }}
-                        </div>
+                        <div class="col-7" jhiTranslate="artemisApp.assessmentDashboard.assessments"></div>
                         <div class="col-5">
                             {{ totalNumberOfAssessments.total }} / {{ numberOfSubmissions.total }} ({{ totalAssessmentPercentage }}%) | {{ numberOfTutorAssessments }}
                         </div>
                     </div>
                     @if (complaintsEnabled) {
                         <div class="row g-0 mb-1">
-                            <div class="col-7">{{ 'artemisApp.assessmentDashboard.complaints' | artemisTranslate }}</div>
+                            <div class="col-7" jhiTranslate="artemisApp.assessmentDashboard.complaints"></div>
                             <div class="col-5">
                                 @if (course?.isAtLeastInstructor) {
                                     <div>
@@ -67,9 +65,7 @@
                     }
                     @if (feedbackRequestEnabled) {
                         <div class="row g-0 mb-1">
-                            <div class="col-7">
-                                {{ 'artemisApp.assessmentDashboard.moreFeedbackRequests' | artemisTranslate }}
-                            </div>
+                            <div class="col-7" jhiTranslate="artemisApp.assessmentDashboard.moreFeedbackRequests"></div>
                             <div class="col-5">
                                 @if (course?.isAtLeastInstructor) {
                                     <div>
@@ -96,9 +92,7 @@
                         </div>
                     }
                     <div class="row g-0 mb-1">
-                        <div class="col-7">
-                            {{ 'artemisApp.assessmentDashboard.assessmentLocks' | artemisTranslate }}
-                        </div>
+                        <div class="col-7" jhiTranslate="artemisApp.assessmentDashboard.assessmentLocks"></div>
                         <div class="col-5">
                             {{ assessmentLocks.tutor }} |
                             <a [routerLink]="assessmentLocksLink" [queryParams]="{ tutorId: tutorId }">
@@ -107,7 +101,7 @@
                         </div>
                     </div>
                     <div class="row g-0 mb-1">
-                        <div class="col-7">{{ 'artemisApp.exerciseAssessmentDashboard.ratings' | artemisTranslate }}</div>
+                        <div class="col-7" jhiTranslate="artemisApp.exerciseAssessmentDashboard.ratings"></div>
                         <div class="col-5">
                             @if (course?.isAtLeastInstructor) {
                                 <a [routerLink]="ratingsLink"> {{ ratings.total }} </a>
@@ -124,18 +118,14 @@
             @if (isExamMode) {
                 <div>
                     <div class="row g-0 mb-1">
-                        <div class="col-7">
-                            {{ 'artemisApp.assessmentDashboard.assessments' | artemisTranslate }}
-                        </div>
+                        <div class="col-7" jhiTranslate="artemisApp.assessmentDashboard.assessments"></div>
                         <div class="col-5">
                             ({{ totalNumberOfAssessments.total }} / {{ numberOfSubmissions.total * numberOfCorrectionRounds }}) ({{ totalAssessmentPercentage }}%) |
                             {{ numberOfTutorAssessments }}
                         </div>
                     </div>
                     <div class="row g-0 mb-1">
-                        <div class="col-7">
-                            {{ 'artemisApp.assessmentDashboard.complaints' | artemisTranslate }}
-                        </div>
+                        <div class="col-7" jhiTranslate="artemisApp.assessmentDashboard.complaints"></div>
                         <div class="col-5">
                             @if (course?.isAtLeastInstructor) {
                                 <div>
@@ -153,9 +143,7 @@
                         </div>
                     </div>
                     <div class="row g-0 mb-1">
-                        <div class="col-7">
-                            {{ 'artemisApp.assessmentDashboard.assessmentLocks' | artemisTranslate }}
-                        </div>
+                        <div class="col-7" jhiTranslate="artemisApp.assessmentDashboard.assessmentLocks"></div>
                         <div class="col-5">
                             {{ assessmentLocks.total }}
                             |
@@ -165,9 +153,7 @@
                         </div>
                     </div>
                     <div class="row g-0 mb-1">
-                        <div class="col-7">
-                            {{ 'artemisApp.assessmentDashboard.totalAssessmentsForCorrectionrounds' | artemisTranslate }}
-                        </div>
+                        <div class="col-7" jhiTranslate="artemisApp.assessmentDashboard.totalAssessmentsForCorrectionrounds"></div>
                         <div class="col-5">
                             {{ numberOfAssessmentsOfCorrectionRounds[0].inTime }}
                             @if (numberOfAssessmentsOfCorrectionRounds[1]) {
diff --git a/src/main/webapp/app/course/dashboards/assessment-dashboard/assessment-dashboard.component.html b/src/main/webapp/app/course/dashboards/assessment-dashboard/assessment-dashboard.component.html
index 6319c7dda35a..6d95da823bb4 100644
--- a/src/main/webapp/app/course/dashboards/assessment-dashboard/assessment-dashboard.component.html
+++ b/src/main/webapp/app/course/dashboards/assessment-dashboard/assessment-dashboard.component.html
@@ -96,9 +96,7 @@ <h4 jhiTranslate="artemisApp.assessmentDashboard.exerciseTable.title"></h4>
                             [ngModel]="hideFinishedExercises"
                             (ngModelChange)="triggerFinishedExercises()"
                         />
-                        <label class="form-check-label" for="field_hideFinishedExercise">
-                            {{ 'artemisApp.assessmentDashboard.hideFinishedExercises' | artemisTranslate }}
-                        </label>
+                        <label class="form-check-label" for="field_hideFinishedExercise" jhiTranslate="artemisApp.assessmentDashboard.hideFinishedExercises"></label>
                     </div>
                     <div class="form-check form-check-inline">
                         <input
@@ -109,9 +107,7 @@ <h4 jhiTranslate="artemisApp.assessmentDashboard.exerciseTable.title"></h4>
                             [ngModel]="hideOptional"
                             (ngModelChange)="triggerOptionalExercises()"
                         />
-                        <label class="form-check-label" for="field_hideOptional">
-                            {{ 'artemisApp.assessmentDashboard.hideOptional' | artemisTranslate }}
-                        </label>
+                        <label class="form-check-label" for="field_hideOptional" jhiTranslate="artemisApp.assessmentDashboard.hideOptional"></label>
                     </div>
                 </div>
             }
@@ -120,33 +116,33 @@ <h4 jhiTranslate="artemisApp.assessmentDashboard.exerciseTable.title"></h4>
                     <thead>
                         <tr jhiSort [(predicate)]="exercisesSortingPredicate" [(ascending)]="exercisesReverseOrder" (sortChange)="sortRows()">
                             <th jhiSortBy="type">
-                                <a class="th-link">{{ 'artemisApp.assessmentDashboard.exerciseType' | artemisTranslate }}</a>
+                                <a class="th-link" jhiTranslate="artemisApp.assessmentDashboard.exerciseType"></a>
                                 <fa-icon [icon]="faSort" />
                             </th>
                             <th jhiSortBy="title">
-                                <a class="th-link">{{ 'artemisApp.assessmentDashboard.exercise' | artemisTranslate }}</a>
+                                <a class="th-link" jhiTranslate="artemisApp.assessmentDashboard.exercise"></a>
                                 <fa-icon [icon]="faSort" />
                             </th>
                             @if (!isTestRun) {
-                                <th>{{ 'artemisApp.assessmentDashboard.yourStatus' | artemisTranslate }}</th>
+                                <th jhiTranslate="artemisApp.assessmentDashboard.yourStatus"></th>
                             }
                             <th jhiSortBy="averageRating">
-                                <a class="th-link">{{ 'artemisApp.assessmentDashboard.exerciseAverageRating' | artemisTranslate }}</a>
+                                <a class="th-link" jhiTranslate="artemisApp.assessmentDashboard.exerciseAverageRating"></a>
                                 <fa-icon [icon]="faSort" />
                             </th>
                             @if (!isExamMode) {
                                 <th jhiSortBy="dueDate">
-                                    <a class="th-link">{{ 'artemisApp.assessmentDashboard.exerciseDueDate' | artemisTranslate }}</a>
+                                    <a class="th-link" jhiTranslate="artemisApp.assessmentDashboard.exerciseDueDate"></a>
                                     <fa-icon [icon]="faSort" />
                                 </th>
                             }
                             @if (!isExamMode) {
                                 <th jhiSortBy="assessmentDueDate">
-                                    <a class="th-link">{{ 'artemisApp.assessmentDashboard.assessmentsDueDate' | artemisTranslate }}</a>
+                                    <a class="th-link" jhiTranslate="artemisApp.assessmentDashboard.assessmentsDueDate"></a>
                                     <fa-icon [icon]="faSort" />
                                 </th>
                             }
-                            <th>{{ 'artemisApp.assessmentDashboard.actions' | artemisTranslate }}</th>
+                            <th jhiTranslate="artemisApp.assessmentDashboard.actions"></th>
                         </tr>
                     </thead>
                     <tbody>
@@ -241,7 +237,7 @@ <h4 jhiTranslate="artemisApp.assessmentDashboard.exerciseTable.title"></h4>
         </div>
         @if (course && course.isAtLeastInstructor && tutorIssues.length > 0) {
             <div class="container-fluid mt-4">
-                <h4>{{ 'artemisApp.assessmentDashboard.tutorPerformanceIssues.title' | artemisTranslate }}</h4>
+                <h4 jhiTranslate="artemisApp.assessmentDashboard.tutorPerformanceIssues.title"></h4>
                 @for (issue of tutorIssues; track issue) {
                     <ul>
                         @if (issue.averageTutorValue < issue.allowedRange.lowerBound) {
@@ -278,10 +274,10 @@ <h4>{{ 'artemisApp.assessmentDashboard.tutorPerformanceIssues.title' | artemisTr
         }
         <div class="container-fluid pt-4">
             @if (!isExamMode) {
-                <h4>{{ 'artemisApp.assessmentDashboard.tutorLeaderboard.courseTitle' | artemisTranslate }}</h4>
+                <h4 jhiTranslate="artemisApp.assessmentDashboard.tutorLeaderboard.courseTitle"></h4>
             }
             @if (isExamMode) {
-                <h4>{{ 'artemisApp.assessmentDashboard.tutorLeaderboard.examTitle' | artemisTranslate }}</h4>
+                <h4 jhiTranslate="artemisApp.assessmentDashboard.tutorLeaderboard.examTitle"></h4>
             }
             <jhi-tutor-leaderboard [exam]="exam" [tutorsData]="stats.tutorLeaderboardEntries" [course]="course" />
         </div>
diff --git a/src/main/webapp/app/course/dashboards/assessment-dashboard/exam-assessment-buttons/exam-assessment-buttons.component.html b/src/main/webapp/app/course/dashboards/assessment-dashboard/exam-assessment-buttons/exam-assessment-buttons.component.html
index 988ad7835bce..1bae6b366f55 100644
--- a/src/main/webapp/app/course/dashboards/assessment-dashboard/exam-assessment-buttons/exam-assessment-buttons.component.html
+++ b/src/main/webapp/app/course/dashboards/assessment-dashboard/exam-assessment-buttons/exam-assessment-buttons.component.html
@@ -3,7 +3,7 @@
         <span>
             <a [routerLink]="['/course-management', courseId, 'exams', examId, 'grading-system']" class="btn btn-info mt-1" id="grading-key-button-{{ exam.id }}">
                 <fa-icon [icon]="faClipboard" />
-                <span class="d-none d-md-inline">{{ 'artemisApp.examManagement.gradingSystem' | artemisTranslate }}</span>
+                <span class="d-none d-md-inline" jhiTranslate="artemisApp.examManagement.gradingSystem"></span>
             </a>
         </span>
         <button
diff --git a/src/main/webapp/app/course/learning-paths/learning-path-graph/learning-path-legend.component.html b/src/main/webapp/app/course/learning-paths/learning-path-graph/learning-path-legend.component.html
index 4252873fa014..15702855fa6a 100644
--- a/src/main/webapp/app/course/learning-paths/learning-path-graph/learning-path-legend.component.html
+++ b/src/main/webapp/app/course/learning-paths/learning-path-graph/learning-path-legend.component.html
@@ -3,9 +3,7 @@
         <div id="competency-end" class="row" ngbTooltip="{{ 'artemisApp.learningPath.graph.legend.competencyEnd.tooltip' | artemisTranslate }}">
             <div class="col-auto"><fa-icon class="legend-icon" [icon]="getIcon(competencyEnd)" /></div>
             <div class="col-auto">
-                <span>
-                    {{ 'artemisApp.learningPath.graph.legend.competencyEnd.title' | artemisTranslate }}
-                </span>
+                <span jhiTranslate="artemisApp.learningPath.graph.legend.competencyEnd.title"></span>
             </div>
         </div>
     }
@@ -13,9 +11,7 @@
         <div id="match-start" class="row" ngbTooltip="{{ 'artemisApp.learningPath.graph.legend.matchStart.tooltip' | artemisTranslate }}">
             <div class="col-auto"><fa-icon class="legend-icon" [icon]="getIcon(matchStart)" /></div>
             <div class="col-auto">
-                <span>
-                    {{ 'artemisApp.learningPath.graph.legend.matchStart.title' | artemisTranslate }}
-                </span>
+                <span jhiTranslate="artemisApp.learningPath.graph.legend.matchStart.title"></span>
             </div>
         </div>
     }
@@ -23,9 +19,7 @@
         <div id="match-end" class="row" ngbTooltip="{{ 'artemisApp.learningPath.graph.legend.matchEnd.tooltip' | artemisTranslate }}">
             <div class="col-auto"><fa-icon class="legend-icon" [icon]="getIcon(matchEnd)" /></div>
             <div class="col-auto">
-                <span>
-                    {{ 'artemisApp.learningPath.graph.legend.matchEnd.title' | artemisTranslate }}
-                </span>
+                <span jhiTranslate="artemisApp.learningPath.graph.legend.matchEnd.title"></span>
             </div>
         </div>
     }
@@ -33,9 +27,7 @@
         <div id="learning-object" class="row" ngbTooltip="{{ 'artemisApp.learningPath.graph.legend.learningObject.tooltip' | artemisTranslate }}">
             <div class="col-auto"><fa-icon class="legend-icon" [icon]="getIcon(learningObject)" /></div>
             <div class="col-auto">
-                <span>
-                    {{ 'artemisApp.learningPath.graph.legend.learningObject.title' | artemisTranslate }}
-                </span>
+                <span jhiTranslate="artemisApp.learningPath.graph.legend.learningObject.title"></span>
             </div>
         </div>
     }
@@ -43,9 +35,7 @@
         <div id="completed-learning-object" class="row" ngbTooltip="{{ 'artemisApp.learningPath.graph.legend.completedLearningObject.tooltip' | artemisTranslate }}">
             <div class="col-auto"><fa-icon class="legend-icon" [icon]="getIcon(completedLearningObject)" /></div>
             <div class="col-auto">
-                <span>
-                    {{ 'artemisApp.learningPath.graph.legend.completedLearningObject.title' | artemisTranslate }}
-                </span>
+                <span jhiTranslate="artemisApp.learningPath.graph.legend.completedLearningObject.title"></span>
             </div>
         </div>
     }
diff --git a/src/main/webapp/app/course/learning-paths/learning-path-graph/learning-path.component.html b/src/main/webapp/app/course/learning-paths/learning-path-graph/learning-path.component.html
index 396b2735560b..864bcc2920b0 100644
--- a/src/main/webapp/app/course/learning-paths/learning-path-graph/learning-path.component.html
+++ b/src/main/webapp/app/course/learning-paths/learning-path-graph/learning-path.component.html
@@ -1,7 +1,7 @@
 @if (isLoading) {
     <div class="d-flex justify-content-center">
         <div class="spinner-border" role="status">
-            <span class="sr-only">{{ 'loading' | artemisTranslate }}</span>
+            <span class="sr-only" jhiTranslate="loading"></span>
         </div>
     </div>
 } @else {
diff --git a/src/main/webapp/app/course/learning-paths/learning-path-management/learning-path-management.component.html b/src/main/webapp/app/course/learning-paths/learning-path-management/learning-path-management.component.html
index 061c611f6b93..c8a10304da15 100644
--- a/src/main/webapp/app/course/learning-paths/learning-path-management/learning-path-management.component.html
+++ b/src/main/webapp/app/course/learning-paths/learning-path-management/learning-path-management.component.html
@@ -1,7 +1,7 @@
 @if (isLoading) {
     <div class="d-flex justify-content-center">
         <div class="spinner-border" role="status">
-            <span class="sr-only">{{ 'loading' | artemisTranslate }}</span>
+            <span class="sr-only" jhiTranslate="loading"></span>
         </div>
     </div>
 }
diff --git a/src/main/webapp/app/course/manage/course-lti-configuration/course-lti-configuration.component.html b/src/main/webapp/app/course/manage/course-lti-configuration/course-lti-configuration.component.html
index 8c267652beff..b7252be6dc5d 100644
--- a/src/main/webapp/app/course/manage/course-lti-configuration/course-lti-configuration.component.html
+++ b/src/main/webapp/app/course/manage/course-lti-configuration/course-lti-configuration.component.html
@@ -16,28 +16,28 @@ <h4 class="modal-title" id="myProgrammingExerciseLabel" jhiTranslate="artemisApp
             <a ngbNavLink jhiTranslate="artemisApp.lti.generalConfiguration"></a>
             <ng-template ngbNavContent>
                 <dt>
-                    <span>{{ 'artemisApp.lti.userPrefix' | artemisTranslate }}</span>
+                    <span jhiTranslate="artemisApp.lti.userPrefix"></span>
                 </dt>
                 <dd>
                     <span>{{ onlineCourseConfiguration?.userPrefix }}</span>
                 </dd>
                 <dt>
-                    <span>{{ 'artemisApp.lti.requireExistingUser' | artemisTranslate }}</span>
+                    <span jhiTranslate="artemisApp.lti.requireExistingUser"></span>
                 </dt>
                 <dd>
-                    <span>{{ (onlineCourseConfiguration?.requireExistingUser ? 'global.generic.yes' : 'global.generic.no') | artemisTranslate }}</span>
+                    <span jhiTranslate="{{ onlineCourseConfiguration?.requireExistingUser ? 'global.generic.yes' : 'global.generic.no' }}"></span>
                 </dd>
                 <div class="form-group">
                     <dt>
                         <span>{{ 'LTI Version' }}</span>
                     </dt>
                     <dd>
-                        <span>{{ 'artemisApp.lti.version13' | artemisTranslate }}</span>
+                        <span jhiTranslate="artemisApp.lti.version13"></span>
                     </dd>
                 </div>
                 <div>
                     <dt>
-                        <span>{{ 'artemisApp.lti13.externalToolSettings' | artemisTranslate }}</span>
+                        <span jhiTranslate="artemisApp.lti13.externalToolSettings"></span>
                         @if (missingLti13ConfigurationField()) {
                             <fa-icon [icon]="faExclamationTriangle" class="text-warning" ngbTooltip="{{ 'artemisApp.lti13.missingConfigurationWarning' | artemisTranslate }}" />
                         }
@@ -45,42 +45,42 @@ <h4 class="modal-title" id="myProgrammingExerciseLabel" jhiTranslate="artemisApp
                     </dt>
                     <dd></dd>
                     <dt>
-                        <span>{{ 'artemisApp.lti.customName' | artemisTranslate }}</span>
+                        <span jhiTranslate="artemisApp.lti.customName"></span>
                     </dt>
                     <dd>
                         <span>{{ onlineCourseConfiguration?.ltiPlatformConfiguration?.customName }}</span>
                         <jhi-copy-icon-button [copyText]="onlineCourseConfiguration?.ltiPlatformConfiguration?.customName ?? ''" />
                     </dd>
                     <dt>
-                        <span>{{ 'artemisApp.lti.registrationId' | artemisTranslate }}</span>
+                        <span jhiTranslate="artemisApp.lti.registrationId"></span>
                     </dt>
                     <dd>
                         <span>{{ onlineCourseConfiguration?.ltiPlatformConfiguration?.registrationId }}</span>
                         <jhi-copy-icon-button [copyText]="onlineCourseConfiguration?.ltiPlatformConfiguration?.registrationId ?? ''" />
                     </dd>
                     <dt>
-                        <span>{{ 'artemisApp.lti.clientId' | artemisTranslate }}</span>
+                        <span jhiTranslate="artemisApp.lti.clientId"></span>
                     </dt>
                     <dd>
                         <span>{{ onlineCourseConfiguration?.ltiPlatformConfiguration?.clientId }}</span>
                         <jhi-copy-icon-button [copyText]="onlineCourseConfiguration?.ltiPlatformConfiguration?.clientId ?? ''" />
                     </dd>
                     <dt>
-                        <span>{{ 'artemisApp.lti.authorizationUri' | artemisTranslate }}</span>
+                        <span jhiTranslate="artemisApp.lti.authorizationUri"></span>
                     </dt>
                     <dd>
                         <span>{{ onlineCourseConfiguration?.ltiPlatformConfiguration?.authorizationUri }}</span>
                         <jhi-copy-icon-button [copyText]="onlineCourseConfiguration?.ltiPlatformConfiguration?.authorizationUri ?? ''" />
                     </dd>
                     <dt>
-                        <span>{{ 'artemisApp.lti.tokenUri' | artemisTranslate }}</span>
+                        <span jhiTranslate="artemisApp.lti.tokenUri"></span>
                     </dt>
                     <dd>
                         <span>{{ onlineCourseConfiguration?.ltiPlatformConfiguration?.tokenUri }}</span>
                         <jhi-copy-icon-button [copyText]="onlineCourseConfiguration?.ltiPlatformConfiguration?.tokenUri ?? ''" />
                     </dd>
                     <dt>
-                        <span>{{ 'artemisApp.lti.jwkSetUri' | artemisTranslate }}</span>
+                        <span jhiTranslate="artemisApp.lti.jwkSetUri"></span>
                     </dt>
                     <dd>
                         <span>{{ onlineCourseConfiguration?.ltiPlatformConfiguration?.jwkSetUri }}</span>
@@ -91,10 +91,10 @@ <h4 class="modal-title" id="myProgrammingExerciseLabel" jhiTranslate="artemisApp
                     <dd>
                         <a (click)="toggleAdvancedSettings()">
                             @if (!showAdvancedSettings) {
-                                <span>{{ 'artemisApp.lti.viewAdvancedSettings' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.lti.viewAdvancedSettings"></span>
                             }
                             @if (showAdvancedSettings) {
-                                <span> {{ 'artemisApp.lti.closeAdvancedSettings' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.lti.closeAdvancedSettings"></span>
                             }
                         </a>
                     </dd>
@@ -102,26 +102,26 @@ <h4 class="modal-title" id="myProgrammingExerciseLabel" jhiTranslate="artemisApp
                 @if (showAdvancedSettings) {
                     <div>
                         <dt>
-                            <span>{{ 'artemisApp.lti.ltiLaunchTarget' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.lti.ltiLaunchTarget"></span>
                             <jhi-help-icon text="artemisApp.lti.launchTargetTooltip" />
                         </dt>
                         <dd>
                             <span>New Window</span>
                         </dd>
                         <dt>
-                            <span>{{ 'artemisApp.lti.scored' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.lti.scored"></span>
                         </dt>
                         <dd>
                             <span>True</span>
                         </dd>
                         <dt>
-                            <span>{{ 'artemisApp.lti.requestUsername' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.lti.requestUsername"></span>
                         </dt>
                         <dd>
                             <span>True</span>
                         </dd>
                         <dt>
-                            <span>{{ 'artemisApp.lti.requestEmail' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.lti.requestEmail"></span>
                             <jhi-help-icon text="artemisApp.lti.requestUserEmailTooltip" />
                         </dt>
                         <dd>
diff --git a/src/main/webapp/app/course/manage/course-lti-configuration/edit-course-lti-configuration.component.html b/src/main/webapp/app/course/manage/course-lti-configuration/edit-course-lti-configuration.component.html
index 85a65e3bf46f..4b6e4c70cea3 100644
--- a/src/main/webapp/app/course/manage/course-lti-configuration/edit-course-lti-configuration.component.html
+++ b/src/main/webapp/app/course/manage/course-lti-configuration/edit-course-lti-configuration.component.html
@@ -36,7 +36,7 @@ <h4 class="modal-title mt-4" id="generalConfiguration" jhiTranslate="artemisApp.
     <div *jhiHasAnyAuthority="'ROLE_ADMIN'">
         <h4 class="modal-title mt-4" id="lti13" jhiTranslate="artemisApp.lti.version13"></h4>
         <div class="form-group mt-2">
-            <span>{{ 'artemisApp.lti13.externalToolSettings' | artemisTranslate }}</span>
+            <span jhiTranslate="artemisApp.lti13.externalToolSettings"></span>
             <jhi-help-icon text="artemisApp.lti13.editExternalToolSettingsTooltip" />
             <div class="form-group">
                 <div ngbDropdown class="d-inline-block me-2">
diff --git a/src/main/webapp/app/course/manage/course-management-exercises-search.component.html b/src/main/webapp/app/course/manage/course-management-exercises-search.component.html
index df388fd7b0af..67fdb931241a 100644
--- a/src/main/webapp/app/course/manage/course-management-exercises-search.component.html
+++ b/src/main/webapp/app/course/manage/course-management-exercises-search.component.html
@@ -1,12 +1,10 @@
 <div class="card search-card">
     <div class="card-header">
-        <h5 class="mb-0">{{ 'artemisApp.course.exercise.search.cardTitle' | artemisTranslate }}</h5>
+        <h5 class="mb-0" jhiTranslate="artemisApp.course.exercise.search.cardTitle"></h5>
     </div>
     <div class="card-body">
         <div class="form-group">
-            <label for="exercise-search-input">
-                {{ 'artemisApp.course.exercise.search.labelExerciseName' | artemisTranslate }}
-            </label>
+            <label for="exercise-search-input" jhiTranslate="artemisApp.course.exercise.search.labelExerciseName"></label>
             <input
                 id="exercise-search-input"
                 type="search"
@@ -18,9 +16,7 @@ <h5 class="mb-0">{{ 'artemisApp.course.exercise.search.cardTitle' | artemisTrans
         </div>
         <div class="row">
             <div class="form-group col">
-                <label for="exercise-search-category-input">
-                    {{ 'artemisApp.course.exercise.search.labelExerciseCategory' | artemisTranslate }}
-                </label>
+                <label for="exercise-search-category-input" jhiTranslate="artemisApp.course.exercise.search.labelExerciseCategory"></label>
                 <input
                     id="exercise-search-category-input"
                     type="text"
@@ -31,9 +27,7 @@ <h5 class="mb-0">{{ 'artemisApp.course.exercise.search.cardTitle' | artemisTrans
                 />
             </div>
             <div class="form-group col">
-                <label for="exercise-search-type-input">
-                    {{ 'artemisApp.course.exercise.search.labelExerciseType' | artemisTranslate }}
-                </label>
+                <label for="exercise-search-type-input" jhiTranslate="artemisApp.course.exercise.search.labelExerciseType"></label>
                 <select id="exercise-search-type-input" class="form-select" [(ngModel)]="exerciseTypeSearch" (ngModelChange)="sendUpdate()">
                     @for (optionValue of typeOptions; track optionValue) {
                         <option [value]="optionValue">
@@ -44,12 +38,14 @@ <h5 class="mb-0">{{ 'artemisApp.course.exercise.search.cardTitle' | artemisTrans
             </div>
         </div>
         <div class="gap-2 d-flex">
-            <button id="resetFilterButton" class="btn btn-secondary offset-6 col-3" type="button" (click)="reset()">
-                {{ 'artemisApp.course.exercise.search.resetButton' | artemisTranslate }}
-            </button>
-            <button id="saveFilterButton" class="btn btn-primary col-3" type="button" (click)="sendUpdate()">
-                {{ 'artemisApp.course.exercise.search.searchButton' | artemisTranslate }}
-            </button>
+            <button
+                id="resetFilterButton"
+                class="btn btn-secondary offset-6 col-3"
+                type="button"
+                (click)="reset()"
+                jhiTranslate="artemisApp.course.exercise.search.resetButton"
+            ></button>
+            <button id="saveFilterButton" class="btn btn-primary col-3" type="button" (click)="sendUpdate()" jhiTranslate="artemisApp.course.exercise.search.searchButton"></button>
         </div>
     </div>
 </div>
diff --git a/src/main/webapp/app/course/manage/course-management-exercises.component.html b/src/main/webapp/app/course/manage/course-management-exercises.component.html
index 603b9c3c3c6e..d267f2b04fa4 100644
--- a/src/main/webapp/app/course/manage/course-management-exercises.component.html
+++ b/src/main/webapp/app/course/manage/course-management-exercises.component.html
@@ -24,9 +24,7 @@ <h3>
         <jhi-course-management-exercises-search (exerciseFilter)="exerciseFilter = $event" />
     }
     @if (showSearch && getFilteredExerciseCount() === 0 && !exerciseFilter.isEmpty()) {
-        <div class="alert alert-secondary" role="alert">
-            {{ 'artemisApp.course.exercise.search.noResults' | artemisTranslate }}
-        </div>
+        <div class="alert alert-secondary" role="alert" jhiTranslate="artemisApp.course.exercise.search.noResults"></div>
     }
     <jhi-course-exercise-card
         [headingJhiTranslate]="'artemisApp.course.programmingExercises'"
diff --git a/src/main/webapp/app/course/manage/course-management.component.html b/src/main/webapp/app/course/manage/course-management.component.html
index 608facb98435..bae8b6e55b96 100644
--- a/src/main/webapp/app/course/manage/course-management.component.html
+++ b/src/main/webapp/app/course/manage/course-management.component.html
@@ -37,14 +37,10 @@ <h4 class="fw-medium" id="course-page-heading" jhiTranslate="artemisApp.course.h
                             <span style="font-size: 24px"> {{ 'artemisApp.course.semester' | artemisTranslate }}: {{ 'global.generic.unset' | artemisTranslate }} </span>
                         }
                         @if (semester === 'test') {
-                            <span style="font-size: 24px">
-                                {{ 'artemisApp.course.testCourse.plural' | artemisTranslate }}
-                            </span>
+                            <span style="font-size: 24px" jhiTranslate="artemisApp.course.testCourse.plural"></span>
                         }
                         @if (semester === 'recent') {
-                            <span style="font-size: 24px">
-                                {{ 'artemisApp.course.recentlyAccessed' | artemisTranslate }}
-                            </span>
+                            <span style="font-size: 24px" jhiTranslate="artemisApp.course.recentlyAccessed"></span>
                         }
                     </div>
                     @if (!semesterCollapsed[semester]) {
diff --git a/src/main/webapp/app/course/manage/course-update.component.html b/src/main/webapp/app/course/manage/course-update.component.html
index 64de8e420199..43b03f3f9040 100644
--- a/src/main/webapp/app/course/manage/course-update.component.html
+++ b/src/main/webapp/app/course/manage/course-update.component.html
@@ -114,7 +114,7 @@ <h5>
                             [error]="!isValidDate"
                         />
                         @if (!isValidDate) {
-                            <span class="invalid-feedback"> {{ 'artemisApp.course.form.startDate.invalid' | artemisTranslate }}</span>
+                            <span class="invalid-feedback" jhiTranslate="artemisApp.course.form.startDate.invalid"></span>
                         }
                     </div>
                     <div class="form-group flex-grow-1 ms-3">
@@ -126,7 +126,7 @@ <h5>
                             [error]="!isValidDate"
                         />
                         @if (!isValidDate) {
-                            <span class="invalid-feedback"> {{ 'artemisApp.course.form.endDate.invalid' | artemisTranslate }}</span>
+                            <span class="invalid-feedback" jhiTranslate="artemisApp.course.form.endDate.invalid"></span>
                         }
                     </div>
                 </div>
@@ -319,9 +319,11 @@ <h5>
                             [ngModelOptions]="{ standalone: true }"
                             (change)="disableMessaging()"
                         />
-                        <label for="field_communicationEnabled" class="form-check-label">
-                            {{ 'artemisApp.course.courseCommunicationSetting.communicationEnabled.label' | artemisTranslate }}
-                        </label>
+                        <label
+                            for="field_communicationEnabled"
+                            class="form-check-label"
+                            jhiTranslate="artemisApp.course.courseCommunicationSetting.communicationEnabled.label"
+                        ></label>
                         <fa-icon
                             [icon]="faQuestionCircle"
                             class="text-secondary"
@@ -338,9 +340,7 @@ <h5>
                             [ngModelOptions]="{ standalone: true }"
                             [disabled]="!communicationEnabled"
                         />
-                        <label for="field_messagingEnabled" class="form-check-label">
-                            {{ 'artemisApp.course.courseCommunicationSetting.messagingEnabled.label' | artemisTranslate }}
-                        </label>
+                        <label for="field_messagingEnabled" class="form-check-label" jhiTranslate="artemisApp.course.courseCommunicationSetting.messagingEnabled.label"></label>
                         <fa-icon
                             [icon]="faQuestionCircle"
                             class="text-secondary"
@@ -446,7 +446,7 @@ <h5>
                                 [error]="!isValidEnrollmentPeriod"
                             />
                             @if (!isValidEnrollmentPeriod) {
-                                <span class="invalid-feedback"> {{ 'artemisApp.course.form.enrollmentStartDate.invalid' | artemisTranslate }}</span>
+                                <span class="invalid-feedback" jhiTranslate="artemisApp.course.form.enrollmentStartDate.invalid"></span>
                             }
                         </div>
                         <div class="form-group flex-grow-1 ms-3">
@@ -458,7 +458,7 @@ <h5>
                                 [error]="!isValidEnrollmentPeriod"
                             />
                             @if (!isValidEnrollmentPeriod) {
-                                <span class="invalid-feedback"> {{ 'artemisApp.course.form.enrollmentEndDate.invalid' | artemisTranslate }}</span>
+                                <span class="invalid-feedback" jhiTranslate="artemisApp.course.form.enrollmentEndDate.invalid"></span>
                             }
                         </div>
                     </div>
@@ -500,7 +500,7 @@ <h5>
                             [error]="!isValidUnenrollmentEndDate"
                         />
                         @if (!isValidUnenrollmentEndDate) {
-                            <span class="invalid-feedback"> {{ 'artemisApp.course.form.unenrollmentEndDate.invalid' | artemisTranslate }}</span>
+                            <span class="invalid-feedback" jhiTranslate="artemisApp.course.form.unenrollmentEndDate.invalid"></span>
                         }
                     </div>
                 }
@@ -509,13 +509,11 @@ <h5>
             @if (tutorialGroupsFeatureActivated) {
                 <div class="col-auto border border-warning p-3">
                     <span class="badge rounded-pill text-bg-warning ms-1">BETA</span>
-                    <label class="form-label" for="timeZone">{{ 'artemisApp.forms.configurationForm.timeZoneInput.label' | artemisTranslate }}</label>
+                    <label class="form-label" for="timeZone" jhiTranslate="artemisApp.forms.configurationForm.timeZoneInput.label"></label>
                     @if (timeZoneChanged) {
-                        <div class="alert alert-danger" role="alert">
-                            {{ 'artemisApp.forms.configurationForm.timeZoneInput.changeWarning' | artemisTranslate }}
-                        </div>
+                        <div class="alert alert-danger" role="alert" jhiTranslate="artemisApp.forms.configurationForm.timeZoneInput.changeWarning"></div>
                     }
-                    <div>{{ 'artemisApp.forms.configurationForm.timeZoneInput.beta' | artemisTranslate }}</div>
+                    <div jhiTranslate="artemisApp.forms.configurationForm.timeZoneInput.beta"></div>
                     <input
                         id="timeZone"
                         type="text"
@@ -530,9 +528,7 @@ <h5>
                         (focus)="tzFocus$.next($any($event).target.value)"
                         (click)="tzClick$.next($any($event).target.value)"
                     />
-                    <div class="form-text">
-                        {{ 'artemisApp.forms.configurationForm.timeZoneInput.explanation' | artemisTranslate }}
-                    </div>
+                    <div class="form-text" jhiTranslate="artemisApp.forms.configurationForm.timeZoneInput.explanation"></div>
                 </div>
             }
             <div class="mt-3 d-flex">
diff --git a/src/main/webapp/app/course/manage/detail/course-detail-line-chart.component.html b/src/main/webapp/app/course/manage/detail/course-detail-line-chart.component.html
index b499fda9b56b..9d379b38622e 100644
--- a/src/main/webapp/app/course/manage/detail/course-detail-line-chart.component.html
+++ b/src/main/webapp/app/course/manage/detail/course-detail-line-chart.component.html
@@ -1,7 +1,7 @@
 <div class="course-detail-parent-container col">
     <div class="d-flex flex-nowrap justify-content-center gap-2 mt-3">
         <a [routerLink]="['/course-management', course.id, 'course-statistics']" class="text-center">
-            <h5>{{ 'artemisApp.courseStatistics.activeStudents' | artemisTranslate }}</h5>
+            <h5 jhiTranslate="artemisApp.courseStatistics.activeStudents"></h5>
         </a>
         <jhi-help-icon class="chart-explanation-tooltip" placement="right auto" text="artemisApp.courseStatistics.activeStudentsExplanation" />
     </div>
@@ -16,25 +16,24 @@ <h5>{{ 'artemisApp.courseStatistics.activeStudents' | artemisTranslate }}</h5>
                                 [disabled]="!showLifetimeOverview && displayedNumberOfWeeks === 4"
                                 (click)="displayPeriodOverview(4)"
                                 ngbTooltip="{{ 'artemisApp.courseStatistics.scopeButton.periodTooltip' | artemisTranslate: { amount: 4 } }}"
-                            >
-                                {{ 'artemisApp.courseStatistics.scopeButton.period' | artemisTranslate: { amount: 4 } }}
-                            </button>
+                                jhiTranslate="artemisApp.courseStatistics.scopeButton.period"
+                                [translateValues]="{ amount: 4 }"
+                            ></button>
                             <button
                                 class="btn"
                                 [disabled]="!showLifetimeOverview && displayedNumberOfWeeks === 8"
                                 (click)="displayPeriodOverview(8)"
                                 ngbTooltip="{{ 'artemisApp.courseStatistics.scopeButton.periodTooltip' | artemisTranslate: { amount: 8 } }}"
-                            >
-                                {{ 'artemisApp.courseStatistics.scopeButton.period' | artemisTranslate: { amount: 8 } }}
-                            </button>
+                                jhiTranslate="artemisApp.courseStatistics.scopeButton.period"
+                                [translateValues]="{ amount: 8 }"
+                            ></button>
                             <button
                                 class="btn"
                                 [disabled]="showLifetimeOverview"
                                 (click)="displayLifetimeOverview()"
                                 ngbTooltip="{{ 'artemisApp.courseStatistics.scopeButton.overviewTooltip' | artemisTranslate }}"
-                            >
-                                {{ 'artemisApp.courseStatistics.scopeButton.overview' | artemisTranslate }}
-                            </button>
+                                jhiTranslate="artemisApp.courseStatistics.scopeButton.overview"
+                            ></button>
                         </div>
                         <span class="pt-1">|</span>
                     }
@@ -85,7 +84,7 @@ <h1 class="spinner">
         </ng-container>
     } @else {
         <ng-container>
-            <h4 class="text-center mt-3">{{ 'artemisApp.course.notStartedYet' | artemisTranslate }}</h4>
+            <h4 class="text-center mt-3" jhiTranslate="artemisApp.course.notStartedYet"></h4>
             <h3 class="text-center">{{ course.startDate | artemisDate }}</h3>
         </ng-container>
     }
diff --git a/src/main/webapp/app/course/manage/overview/course-management-card.component.html b/src/main/webapp/app/course/manage/overview/course-management-card.component.html
index 3619d90a93d8..adf01ba9af77 100644
--- a/src/main/webapp/app/course/manage/overview/course-management-card.component.html
+++ b/src/main/webapp/app/course/manage/overview/course-management-card.component.html
@@ -40,9 +40,7 @@ <h3 class="card-title text-center fw-medium course-title">{{ course.title }} ({{
                             </a>
                         }
                         @if (courseWithUsers.numberOfStudents === undefined) {
-                            <a [routerLink]="['/course-management', course.id, 'groups', 'students']">
-                                {{ 'artemisApp.course.students' | artemisTranslate }}
-                            </a>
+                            <a [routerLink]="['/course-management', course.id, 'groups', 'students']" jhiTranslate="artemisApp.course.students"></a>
                         }
                     </div>
                     <div>
@@ -57,9 +55,7 @@ <h3 class="card-title text-center fw-medium course-title">{{ course.title }} ({{
                             </a>
                         }
                         @if (courseWithUsers.numberOfTeachingAssistants === undefined) {
-                            <a [routerLink]="['/course-management', course.id, 'groups', 'tutors']">
-                                {{ 'artemisApp.course.tutors' | artemisTranslate }}
-                            </a>
+                            <a [routerLink]="['/course-management', course.id, 'groups', 'tutors']" jhiTranslate="artemisApp.course.tutors"></a>
                         }
                     </div>
                 </div>
@@ -76,9 +72,7 @@ <h3 class="card-title text-center fw-medium course-title">{{ course.title }} ({{
                             </a>
                         }
                         @if (courseWithUsers.numberOfEditors === undefined) {
-                            <a [routerLink]="['/course-management', course.id, 'groups', 'editors']">
-                                {{ 'artemisApp.course.editors' | artemisTranslate }}
-                            </a>
+                            <a [routerLink]="['/course-management', course.id, 'groups', 'editors']" jhiTranslate="artemisApp.course.editors"></a>
                         }
                     </div>
                     <div>
@@ -93,9 +87,7 @@ <h3 class="card-title text-center fw-medium course-title">{{ course.title }} ({{
                             </a>
                         }
                         @if (courseWithUsers.numberOfInstructors === undefined) {
-                            <a [routerLink]="['/course-management', course.id, 'groups', 'instructors']">
-                                {{ 'artemisApp.course.instructors' | artemisTranslate }}
-                            </a>
+                            <a [routerLink]="['/course-management', course.id, 'groups', 'instructors']" jhiTranslate="artemisApp.course.instructors"></a>
                         }
                     </div>
                 </div>
@@ -116,7 +108,7 @@ <h3 class="card-title text-center fw-medium course-title">{{ course.title }} ({{
                             <div>
                                 <div class="control-label" (click)="showFutureExercises = !showFutureExercises">
                                     <fa-icon class="control-icon" [icon]="showFutureExercises ? faAngleDown : faAngleUp" />
-                                    <strong>{{ 'artemisApp.course.releasedSoon' | artemisTranslate }}</strong>
+                                    <strong jhiTranslate="artemisApp.course.releasedSoon"></strong>
                                 </div>
                                 @if (showFutureExercises) {
                                     <div>
@@ -139,7 +131,7 @@ <h3 class="card-title text-center fw-medium course-title">{{ course.title }} ({{
                             <div>
                                 <div class="control-label" (click)="showCurrentExercises = !showCurrentExercises">
                                     <fa-icon class="control-icon" [icon]="showCurrentExercises ? faAngleDown : faAngleUp" />
-                                    <strong>{{ 'artemisApp.course.currentWorking' | artemisTranslate }}</strong>
+                                    <strong jhiTranslate="artemisApp.course.currentWorking"></strong>
                                 </div>
                                 @if (showCurrentExercises) {
                                     <div>
@@ -162,7 +154,7 @@ <h3 class="card-title text-center fw-medium course-title">{{ course.title }} ({{
                             <div>
                                 <div class="control-label" (click)="showExercisesInAssessment = !showExercisesInAssessment">
                                     <fa-icon class="control-icon" [icon]="showExercisesInAssessment ? faAngleDown : faAngleUp" />
-                                    <strong>{{ 'artemisApp.course.inAssessment' | artemisTranslate }}</strong>
+                                    <strong jhiTranslate="artemisApp.course.inAssessment"></strong>
                                 </div>
                                 @if (showExercisesInAssessment) {
                                     <div>
@@ -185,7 +177,7 @@ <h3 class="card-title text-center fw-medium course-title">{{ course.title }} ({{
                             <div>
                                 <div class="control-label" (click)="showPastExercises = !showPastExercises">
                                     <fa-icon class="control-icon" [icon]="showPastExercises ? faAngleDown : faAngleUp" />
-                                    <strong>{{ 'artemisApp.course.pastExercises' | artemisTranslate: { amount: pastExercises.length, total: pastExerciseCount } }}</strong>
+                                    <strong jhiTranslate="artemisApp.course.pastExercises" [translateValues]="{ amount: pastExercises.length, total: pastExerciseCount }"></strong>
                                 </div>
                                 @if (showPastExercises) {
                                     <div>
@@ -206,7 +198,7 @@ <h3 class="card-title text-center fw-medium course-title">{{ course.title }} ({{
                         }
                         @if ((futureExercises?.length || 0) + (currentExercises?.length || 0) + (exercisesInAssessment?.length || 0) + (pastExercises?.length || 0) === 0) {
                             <div>
-                                <h4 class="text-center no-exercises mt-3 fw-medium">{{ 'artemisApp.course.noExercises' | artemisTranslate }}</h4>
+                                <h4 class="text-center no-exercises mt-3 fw-medium" jhiTranslate="artemisApp.course.noExercises"></h4>
                             </div>
                         }
                     </div>
@@ -240,7 +232,7 @@ <h4 class="text-center no-exercises mt-3 fw-medium">{{ 'artemisApp.course.noExer
                 id="course-card-open-exams"
             >
                 <fa-icon [icon]="faGraduationCap" />
-                <span class="d-none d-xl-inline">{{ 'entity.action.exams' | artemisTranslate }}</span>
+                <span class="d-none d-xl-inline" jhiTranslate="entity.action.exams"></span>
             </a>
         }
         @if (course.isAtLeastTutor) {
@@ -252,7 +244,7 @@ <h4 class="text-center no-exercises mt-3 fw-medium">{{ 'artemisApp.course.noExer
                 id="course-card-open-exercises"
             >
                 <fa-icon [icon]="faListAlt" />
-                <span class="d-none d-xl-inline">{{ 'entity.action.exercise' | artemisTranslate }}</span>
+                <span class="d-none d-xl-inline" jhiTranslate="entity.action.exercise"></span>
             </a>
         }
         @if (course.isAtLeastEditor) {
@@ -263,7 +255,7 @@ <h4 class="text-center no-exercises mt-3 fw-medium">{{ 'artemisApp.course.noExer
                 id="course-card-open-lectures"
             >
                 <fa-icon [icon]="faFilePdf" />
-                <span class="d-none d-xl-inline">{{ 'entity.action.lecture' | artemisTranslate }}</span>
+                <span class="d-none d-xl-inline" jhiTranslate="entity.action.lecture"></span>
             </a>
         }
         @if (course.isAtLeastTutor) {
@@ -274,7 +266,7 @@ <h4 class="text-center no-exercises mt-3 fw-medium">{{ 'artemisApp.course.noExer
                 id="course-card-open-open-statistics"
             >
                 <fa-icon [icon]="faChartBar" />
-                <span class="d-none d-xl-inline">{{ 'artemisApp.courseStatistics.statistics' | artemisTranslate }}</span>
+                <span class="d-none d-xl-inline" jhiTranslate="artemisApp.courseStatistics.statistics"></span>
             </a>
         }
         @if (isCommunicationEnabled(course) && course.isAtLeastTutor) {
@@ -284,7 +276,7 @@ <h4 class="text-center no-exercises mt-3 fw-medium">{{ 'artemisApp.course.noExer
                 [ngbTooltip]="'artemisApp.courseOverview.menu.communication' | artemisTranslate"
             >
                 <fa-icon [icon]="faComments" />
-                <span class="d-none d-xl-inline">{{ 'artemisApp.metis.communication.label' | artemisTranslate }}</span>
+                <span class="d-none d-xl-inline" jhiTranslate="artemisApp.metis.communication.label"></span>
             </a>
         }
         @if (course.timeZone || course.isAtLeastInstructor) {
@@ -332,7 +324,7 @@ <h4 class="text-center no-exercises mt-3 fw-medium">{{ 'artemisApp.course.noExer
                 id="course-card-open-assessment-dashboard"
             >
                 <fa-icon [icon]="faUserCheck" />
-                <span class="d-none d-xl-inline">{{ 'entity.action.assessmentDashboard' | artemisTranslate }}</span>
+                <span class="d-none d-xl-inline" jhiTranslate="entity.action.assessmentDashboard"></span>
             </a>
         }
         @if (course.isAtLeastInstructor) {
@@ -343,7 +335,7 @@ <h4 class="text-center no-exercises mt-3 fw-medium">{{ 'artemisApp.course.noExer
                 id="course-card-open-scores"
             >
                 <fa-icon [icon]="faTable" />
-                <span class="d-none d-xl-inline">{{ 'entity.action.scores' | artemisTranslate }}</span>
+                <span class="d-none d-xl-inline" jhiTranslate="entity.action.scores"></span>
             </a>
         }
     </div>
diff --git a/src/main/webapp/app/course/manage/overview/course-management-exercise-row.component.html b/src/main/webapp/app/course/manage/overview/course-management-exercise-row.component.html
index f4940c20c0c4..e5f8cdd9dee2 100644
--- a/src/main/webapp/app/course/manage/overview/course-management-exercise-row.component.html
+++ b/src/main/webapp/app/course/manage/overview/course-management-exercise-row.component.html
@@ -25,7 +25,7 @@
                 <div class="row-flex exercise-date-container">
                     <div [ngClass]="!!details.releaseDate ? 'exercise-date' : 'exercise-date exercise-no-date'">
                         <div class="exercise-date-timeline"></div>
-                        <span>{{ 'artemisApp.course.releaseDate' | artemisTranslate }}</span>
+                        <span jhiTranslate="artemisApp.course.releaseDate"></span>
                         @if (!details.releaseDate) {
                             <div>
                                 <div class="calender-icon-container">
@@ -51,7 +51,7 @@
                     </div>
                     <div [ngClass]="!!details.dueDate ? 'exercise-date' : 'exercise-date exercise-no-date'">
                         <div class="exercise-date-timeline"></div>
-                        <span>{{ 'artemisApp.course.dueDate' | artemisTranslate }}</span>
+                        <span jhiTranslate="artemisApp.course.dueDate"></span>
                         @if (!details.dueDate) {
                             <div>
                                 <div class="calender-icon-container">
@@ -77,7 +77,7 @@
                     </div>
                     <div [ngClass]="!!details.assessmentDueDate ? 'exercise-date' : 'exercise-date exercise-no-date'">
                         <div class="exercise-date-timeline"></div>
-                        <span>{{ 'artemisApp.course.assessmentDueDate' | artemisTranslate }}</span>
+                        <span jhiTranslate="artemisApp.course.assessmentDueDate"></span>
                         @if (!details.assessmentDueDate) {
                             <div>
                                 <div class="calender-icon-container">
@@ -105,7 +105,7 @@
                 <div class="row-flex exercise-score-container">
                     @if (statistic && rowType === exerciseRowType.CURRENT) {
                         <div class="exercise-score">
-                            <span>{{ 'artemisApp.course.participations' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.course.participations"></span>
                             <jhi-progress-bar
                                 [tooltip]="'artemisApp.course.participations' | artemisTranslate"
                                 [percentage]="statistic.participationRateInPercent || 0"
@@ -116,7 +116,7 @@
                     }
                     @if (statistic && rowType === exerciseRowType.ASSESSING) {
                         <div class="exercise-score">
-                            <span>{{ 'artemisApp.course.assessmentProgress' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.course.assessmentProgress"></span>
                             <jhi-progress-bar
                                 [tooltip]="'artemisApp.course.assessmentProgress' | artemisTranslate"
                                 [percentage]="statistic.noOfAssessmentsDoneInPercent || 0"
@@ -127,7 +127,7 @@
                     }
                     @if (statistic && rowType === exerciseRowType.PAST) {
                         <div class="exercise-score">
-                            <span>{{ 'artemisApp.course.averageScore' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.course.averageScore"></span>
                             <jhi-progress-bar
                                 [tooltip]="'artemisApp.course.averageScore' | artemisTranslate"
                                 [percentage]="statistic.averageScoreInPercent || 0"
diff --git a/src/main/webapp/app/course/manage/overview/course-management-overview-statistics.component.html b/src/main/webapp/app/course/manage/overview/course-management-overview-statistics.component.html
index 9aebc5ff0678..6e2a65cae400 100644
--- a/src/main/webapp/app/course/manage/overview/course-management-overview-statistics.component.html
+++ b/src/main/webapp/app/course/manage/overview/course-management-overview-statistics.component.html
@@ -1,7 +1,7 @@
 <div class="row justify-content-center chart-title-line">
     <div class="d-inline-flex flex-nowrap justify-content-center align-items-center">
         <a [routerLink]="['/course-management', course.id, 'course-statistics']" class="text-center">
-            <h4>{{ 'artemisApp.courseStatistics.activeStudents' | artemisTranslate }}</h4>
+            <h4 jhiTranslate="artemisApp.courseStatistics.activeStudents"></h4>
         </a>
         <jhi-help-icon class="chart-explanation-tooltip headline-margin" placement="right auto" text="artemisApp.courseStatistics.activeStudentsExplanation" />
     </div>
diff --git a/src/main/webapp/app/course/plagiarism-cases/instructor-view/detail-view/plagiarism-case-instructor-detail-view.component.html b/src/main/webapp/app/course/plagiarism-cases/instructor-view/detail-view/plagiarism-case-instructor-detail-view.component.html
index d6a8cb3f33ac..a66f7b342595 100644
--- a/src/main/webapp/app/course/plagiarism-cases/instructor-view/detail-view/plagiarism-case-instructor-detail-view.component.html
+++ b/src/main/webapp/app/course/plagiarism-cases/instructor-view/detail-view/plagiarism-case-instructor-detail-view.component.html
@@ -3,7 +3,7 @@
         <div class="case-header">
             <div class="row">
                 <div class="col-12 col-lg-6 col-xl-3 d-flex align-items-center">
-                    <h1 class="h2">{{ 'artemisApp.plagiarism.plagiarismCases.plagiarismCase' | artemisTranslate }}</h1>
+                    <h1 class="h2" jhiTranslate="artemisApp.plagiarism.plagiarismCases.plagiarismCase"></h1>
                 </div>
                 <div class="col-12 col-lg-6 col-xl-3 d-flex align-items-center">
                     <jhi-plagiarism-case-verdict [plagiarismCase]="plagiarismCase" class="my-2" />
@@ -50,28 +50,26 @@ <h1 class="h2">{{ 'artemisApp.plagiarism.plagiarismCases.plagiarismCase' | artem
         </div>
         <div class="case-body">
             <section>
-                <h3>{{ 'artemisApp.plagiarism.plagiarismCases.conversation' | artemisTranslate }}</h3>
+                <h3 jhiTranslate="artemisApp.plagiarism.plagiarismCases.conversation"></h3>
                 @if (posts && posts.length > 0) {
                     <jhi-posting-thread [post]="posts[0]" [showAnswers]="true" />
                 }
                 @if ((!posts || posts.length === 0) && createdPost) {
                     <div>
-                        <button class="btn btn-md btn-primary" (click)="createEditModal.open()">
-                            {{ 'artemisApp.plagiarism.plagiarismCases.notifyStudent' | artemisTranslate }}
-                        </button>
+                        <button class="btn btn-md btn-primary" (click)="createEditModal.open()" jhiTranslate="artemisApp.plagiarism.plagiarismCases.notifyStudent"></button>
                         <jhi-post-create-edit-modal #createEditModal [posting]="createdPost" (onCreate)="onStudentNotified($event)" />
                     </div>
                 }
             </section>
             <section class="d-print-none">
-                <h2 class="mt-5">{{ 'artemisApp.plagiarism.plagiarismCases.verdict.verdict' | artemisTranslate }}</h2>
-                <p>{{ 'artemisApp.plagiarism.plagiarismCases.verdict.text' | artemisTranslate }}</p>
+                <h2 class="mt-5" jhiTranslate="artemisApp.plagiarism.plagiarismCases.verdict.verdict"></h2>
+                <p jhiTranslate="artemisApp.plagiarism.plagiarismCases.verdict.text"></p>
                 <div class="verdict-container">
                     <ul ngbNav #nav="ngbNav" [(activeId)]="activeTab" [destroyOnHide]="false" class="nav-tabs">
                         <li [ngbNavItem]="1">
                             <a ngbNavLink jhiTranslate="artemisApp.plagiarism.plagiarismCases.verdict.plagiarism"></a>
                             <ng-template ngbNavContent>
-                                <p>{{ 'artemisApp.plagiarism.plagiarismCases.verdict.plagiarismDescription' | artemisTranslate }}</p>
+                                <p jhiTranslate="artemisApp.plagiarism.plagiarismCases.verdict.plagiarismDescription"></p>
                                 <div class="form-inline">
                                     <jhi-confirm-button
                                         title="artemisApp.plagiarism.plagiarismCases.verdict.plagiarism"
@@ -96,7 +94,7 @@ <h2 class="mt-5">{{ 'artemisApp.plagiarism.plagiarismCases.verdict.verdict' | ar
                         <li [ngbNavItem]="2">
                             <a ngbNavLink jhiTranslate="artemisApp.plagiarism.plagiarismCases.verdict.pointDeduction"></a>
                             <ng-template ngbNavContent>
-                                <p>{{ 'artemisApp.plagiarism.plagiarismCases.verdict.pointDeductionDescription' | artemisTranslate }}</p>
+                                <p jhiTranslate="artemisApp.plagiarism.plagiarismCases.verdict.pointDeductionDescription"></p>
                                 <div class="form-inline">
                                     <div class="input-group w-auto">
                                         <input
@@ -126,7 +124,7 @@ <h2 class="mt-5">{{ 'artemisApp.plagiarism.plagiarismCases.verdict.verdict' | ar
                         <li [ngbNavItem]="3">
                             <a ngbNavLink jhiTranslate="artemisApp.plagiarism.plagiarismCases.verdict.warning"></a>
                             <ng-template ngbNavContent>
-                                <p>{{ 'artemisApp.plagiarism.plagiarismCases.verdict.warningDescription' | artemisTranslate }}</p>
+                                <p jhiTranslate="artemisApp.plagiarism.plagiarismCases.verdict.warningDescription"></p>
                                 <div class="form">
                                     <div class="form-group">
                                         <textarea
@@ -169,7 +167,7 @@ <h2 class="mt-5">{{ 'artemisApp.plagiarism.plagiarismCases.verdict.verdict' | ar
                 </div>
             </section>
             <section>
-                <h3 class="mt-5">{{ 'artemisApp.plagiarism.plagiarismCases.comparisons' | artemisTranslate }}</h3>
+                <h3 class="mt-5" jhiTranslate="artemisApp.plagiarism.plagiarismCases.comparisons"></h3>
                 <div class="container-fluid">
                     <jhi-plagiarism-case-review [plagiarismCase]="plagiarismCase" [forStudent]="false" />
                 </div>
diff --git a/src/main/webapp/app/course/plagiarism-cases/instructor-view/plagiarism-cases-instructor-view.component.html b/src/main/webapp/app/course/plagiarism-cases/instructor-view/plagiarism-cases-instructor-view.component.html
index ce89853044d4..6bad6dfcb843 100644
--- a/src/main/webapp/app/course/plagiarism-cases/instructor-view/plagiarism-cases-instructor-view.component.html
+++ b/src/main/webapp/app/course/plagiarism-cases/instructor-view/plagiarism-cases-instructor-view.component.html
@@ -7,7 +7,7 @@ <h4 jhiTranslate="artemisApp.plagiarism.cases.pageSubtitle"></h4>
     <div>
         <div class="plagiarism-cases--toolbar row mb-3">
             <div class="col-auto">
-                <button class="btn btn-primary" (click)="exportPlagiarismCases()">{{ 'artemisApp.plagiarism.cases.exportCsv' | artemisTranslate }}</button>
+                <button class="btn btn-primary" (click)="exportPlagiarismCases()" jhiTranslate="artemisApp.plagiarism.cases.exportCsv"></button>
             </div>
         </div>
         @for (exercise of exercisesWithPlagiarismCases; track exercise; let i = $index) {
@@ -57,9 +57,11 @@ <h5 class="mb-0">
                                 </a>
                             </div>
                             @if (plagiarismCase.plagiarismSubmissions) {
-                                <div class="col-2 text-center">
-                                    {{ 'artemisApp.plagiarism.plagiarismCases.appearsInComparisons' | artemisTranslate: { count: plagiarismCase.plagiarismSubmissions.length } }}
-                                </div>
+                                <div
+                                    class="col-2 text-center"
+                                    jhiTranslate="artemisApp.plagiarism.plagiarismCases.appearsInComparisons"
+                                    [translateValues]="{ count: plagiarismCase.plagiarismSubmissions.length }"
+                                ></div>
                             }
                             @if (plagiarismCase.post) {
                                 <div class="col-3 text-center">
@@ -67,15 +69,13 @@ <h5 class="mb-0">
                                 </div>
                             }
                             @if (!plagiarismCase.post) {
-                                <div class="col-3 text-center">{{ 'artemisApp.plagiarism.plagiarismCases.notNotified' | artemisTranslate }}</div>
+                                <div class="col-3 text-center" jhiTranslate="artemisApp.plagiarism.plagiarismCases.notNotified"></div>
                             }
                             @if (hasStudentAnswer(plagiarismCase)) {
-                                <div class="col-3 text-center">
-                                    {{ 'artemisApp.plagiarism.plagiarismCases.respondedByStudent' | artemisTranslate }}
-                                </div>
+                                <div class="col-3 text-center" jhiTranslate="artemisApp.plagiarism.plagiarismCases.respondedByStudent"></div>
                             }
                             @if (!hasStudentAnswer(plagiarismCase)) {
-                                <div class="col-3 text-center">{{ 'artemisApp.plagiarism.plagiarismCases.notResponded' | artemisTranslate }}</div>
+                                <div class="col-3 text-center" jhiTranslate="artemisApp.plagiarism.plagiarismCases.notResponded"></div>
                             }
                             <div class="col-3">
                                 <jhi-plagiarism-case-verdict [plagiarismCase]="plagiarismCase" [hideDetails]="true" />
diff --git a/src/main/webapp/app/course/plagiarism-cases/student-view/detail-view/plagiarism-case-student-detail-view.component.html b/src/main/webapp/app/course/plagiarism-cases/student-view/detail-view/plagiarism-case-student-detail-view.component.html
index 93adf2aed0c6..128ceb47bede 100644
--- a/src/main/webapp/app/course/plagiarism-cases/student-view/detail-view/plagiarism-case-student-detail-view.component.html
+++ b/src/main/webapp/app/course/plagiarism-cases/student-view/detail-view/plagiarism-case-student-detail-view.component.html
@@ -3,7 +3,7 @@
         <div class="case-header">
             <div class="row">
                 <div class="col-12 col-lg-6 col-xl-3 d-flex align-items-center">
-                    <h1 class="h2">{{ 'artemisApp.plagiarism.plagiarismCases.plagiarismCase' | artemisTranslate }}</h1>
+                    <h1 class="h2" jhiTranslate="artemisApp.plagiarism.plagiarismCases.plagiarismCase"></h1>
                 </div>
                 <div class="col-12 col-lg-6 col-xl-3 d-flex align-items-center">
                     <jhi-plagiarism-case-verdict [plagiarismCase]="plagiarismCase" class="my-2" />
@@ -34,20 +34,20 @@ <h1 class="h2">{{ 'artemisApp.plagiarism.plagiarismCases.plagiarismCase' | artem
                 <section>
                     @if (plagiarismCase.verdict === plagiarismVerdict.POINT_DEDUCTION) {
                         <div class="alert alert-danger">
-                            <h5>{{ 'artemisApp.plagiarism.plagiarismCases.verdict.pointDeduction' | artemisTranslate }}</h5>
+                            <h5 jhiTranslate="artemisApp.plagiarism.plagiarismCases.verdict.pointDeduction"></h5>
                             <p class="mb-0">{{ plagiarismCase.verdictPointDeduction }}&nbsp;&percnt;</p>
                         </div>
                     }
                     @if (plagiarismCase.verdict === plagiarismVerdict.WARNING) {
                         <div class="alert alert-danger">
-                            <h5>{{ 'artemisApp.plagiarism.plagiarismCases.verdict.warning' | artemisTranslate }}</h5>
+                            <h5 jhiTranslate="artemisApp.plagiarism.plagiarismCases.verdict.warning"></h5>
                             <p class="mb-0">{{ plagiarismCase.verdictMessage }}</p>
                         </div>
                     }
                 </section>
             }
             <section>
-                <h3>{{ 'artemisApp.plagiarism.plagiarismCases.conversation' | artemisTranslate }}</h3>
+                <h3 jhiTranslate="artemisApp.plagiarism.plagiarismCases.conversation"></h3>
                 <div class="row">
                     @if (posts && posts.length > 0) {
                         <div class="row mb-2 col-12">
@@ -97,7 +97,7 @@ <h3>{{ 'artemisApp.plagiarism.plagiarismCases.conversation' | artemisTranslate }
                 </div>
             </section>
             <section>
-                <h3 class="mt-5">{{ 'artemisApp.plagiarism.plagiarismCases.comparisons' | artemisTranslate }}</h3>
+                <h3 class="mt-5" jhiTranslate="artemisApp.plagiarism.plagiarismCases.comparisons"></h3>
                 <div class="container-fluid">
                     <jhi-plagiarism-case-review [plagiarismCase]="plagiarismCase" [forStudent]="true" />
                 </div>
diff --git a/src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-detail/tutorial-group-detail.component.html b/src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-detail/tutorial-group-detail.component.html
index a4c1272ab2e4..ced9dd74a469 100644
--- a/src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-detail/tutorial-group-detail.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-detail/tutorial-group-detail.component.html
@@ -9,7 +9,7 @@ <h2>{{ tutorialGroup.title }}</h2>
         <jhi-detail-overview-list [sections]="tutorialDetailSections" />
     }
     <div class="mt-1">
-        <strong>{{ 'artemisApp.entities.tutorialGroup.sessions' | artemisTranslate }}</strong>
+        <strong jhiTranslate="artemisApp.entities.tutorialGroup.sessions"></strong>
     </div>
     @if (sessions && sessions.length) {
         <div class="scrollbar table-wrapper-scroll-y border border-lightgrey p-3">
diff --git a/src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-free-days-overview/tutorial-group-free-days-overview.component.html b/src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-free-days-overview/tutorial-group-free-days-overview.component.html
index 70edd4b36df5..b3a9ec03eac7 100644
--- a/src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-free-days-overview/tutorial-group-free-days-overview.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-free-days-overview/tutorial-group-free-days-overview.component.html
@@ -15,9 +15,8 @@
                                 placement="top"
                                 [ngbPopover]="freeDay.reason.trim()"
                                 [popoverTitle]="'artemisApp.entities.tutorialFreePeriod.reason' | artemisTranslate"
-                            >
-                                {{ 'artemisApp.entities.tutorialFreePeriod.reason' | artemisTranslate }}
-                            </button>
+                                jhiTranslate="artemisApp.entities.tutorialFreePeriod.reason"
+                            ></button>
                         }
                     </li>
                 }
diff --git a/src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-sessions-table/tutorial-group-session-row/tutorial-group-session-row.component.html b/src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-sessions-table/tutorial-group-session-row/tutorial-group-session-row.component.html
index 37141de8e855..b3abffb208e7 100644
--- a/src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-sessions-table/tutorial-group-session-row/tutorial-group-session-row.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-sessions-table/tutorial-group-session-row/tutorial-group-session-row.component.html
@@ -67,9 +67,7 @@
     @if (tutorialGroup.tutorialGroupSchedule) {
         <td>
             @if (!hasSchedule) {
-                <div class="alert alert-info" role="alert">
-                    {{ 'artemisApp.pages.tutorialGroupSessionManagement.differsFromSchedule' | artemisTranslate }}
-                </div>
+                <div class="alert alert-info" role="alert" jhiTranslate="artemisApp.pages.tutorialGroupSessionManagement.differsFromSchedule"></div>
             }
         </td>
     }
diff --git a/src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-sessions-table/tutorial-group-sessions-table.component.html b/src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-sessions-table/tutorial-group-sessions-table.component.html
index acb3ad023018..16545c75b8ae 100644
--- a/src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-sessions-table/tutorial-group-sessions-table.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-sessions-table/tutorial-group-sessions-table.component.html
@@ -1,25 +1,28 @@
 <div class="table-responsive session-table">
     <div class="col-12 mb-2">
-        <div class="alert alert-info">
-            {{ 'artemisApp.pages.tutorialGroupSessionManagement.timeZoneExplanation' | artemisTranslate: { timeZone: timeZoneUsedForDisplay } }}
-        </div>
+        <div
+            class="alert alert-info"
+            jhiTranslate="artemisApp.pages.tutorialGroupSessionManagement.timeZoneExplanation"
+            [translateValues]="{ timeZone: timeZoneUsedForDisplay }"
+        ></div>
     </div>
     <table class="table table-sm">
         <thead>
             <tr>
                 @if (showIdColumn) {
-                    <th>{{ 'global.field.id' | artemisTranslate }}</th>
+                    <th jhiTranslate="global.field.id"></th>
                 }
-                <th>{{ 'artemisApp.entities.tutorialGroupSession.date' | artemisTranslate }}</th>
+                <th jhiTranslate="artemisApp.entities.tutorialGroupSession.date"></th>
                 <th>
-                    <span>{{
-                        (tutorialGroup.isOnline ? 'artemisApp.forms.scheduleForm.locationInput.labelOnline' : 'artemisApp.forms.scheduleForm.locationInput.labelOffline')
-                            | artemisTranslate
-                    }}</span>
+                    <span
+                        jhiTranslate="{{
+                            tutorialGroup.isOnline ? 'artemisApp.forms.scheduleForm.locationInput.labelOnline' : 'artemisApp.forms.scheduleForm.locationInput.labelOffline'
+                        }}"
+                    ></span>
                 </th>
-                <th class="attendance-column" id="attendanceHeader">{{ 'artemisApp.entities.tutorialGroupSession.attendance' | artemisTranslate }}</th>
+                <th class="attendance-column" id="attendanceHeader" jhiTranslate="artemisApp.entities.tutorialGroupSession.attendance"></th>
                 @if (tutorialGroup.tutorialGroupSchedule) {
-                    <th>{{ 'artemisApp.pages.tutorialGroupSessionManagement.columns.notes' | artemisTranslate }}</th>
+                    <th jhiTranslate="artemisApp.pages.tutorialGroupSessionManagement.columns.notes"></th>
                 }
                 @if (extraColumn) {
                     <th></th>
@@ -45,9 +48,12 @@
                 <td [colSpan]="numberOfColumns">
                     {{ 'artemisApp.pages.tutorialGroupSessionManagement.divider' | artemisTranslate }}
                     <div class="text-center">
-                        <button type="button" class="btn btn-sm btn-outline-secondary" (click)="isCollapsed = !isCollapsed">
-                            {{ 'artemisApp.pages.tutorialGroupSessionManagement.showAll' | artemisTranslate }}
-                        </button>
+                        <button
+                            type="button"
+                            class="btn btn-sm btn-outline-secondary"
+                            (click)="isCollapsed = !isCollapsed"
+                            jhiTranslate="artemisApp.pages.tutorialGroupSessionManagement.showAll"
+                        ></button>
                     </div>
                 </td>
             </tr>
diff --git a/src/main/webapp/app/course/tutorial-groups/shared/tutorial-groups-table/tutorial-group-row/tutorial-group-row.component.html b/src/main/webapp/app/course/tutorial-groups/shared/tutorial-groups-table/tutorial-group-row/tutorial-group-row.component.html
index 00440e00746f..69291296cf47 100644
--- a/src/main/webapp/app/course/tutorial-groups/shared/tutorial-groups-table/tutorial-group-row/tutorial-group-row.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/shared/tutorial-groups-table/tutorial-group-row/tutorial-group-row.component.html
@@ -23,9 +23,7 @@
         } @else {}
     </td>
     @if (mixOfOfflineAndOfflineTutorialGroups) {
-        <td>
-            {{ (tutorialGroup.isOnline ? 'artemisApp.generic.online' : 'artemisApp.generic.offline') | artemisTranslate }}
-        </td>
+        <td jhiTranslate="{{ tutorialGroup.isOnline ? 'artemisApp.generic.online' : 'artemisApp.generic.offline' }}"></td>
     }
     @if (mifOfDifferentLanguages) {
         <td>
diff --git a/src/main/webapp/app/course/tutorial-groups/shared/tutorial-groups-table/tutorial-groups-table.component.html b/src/main/webapp/app/course/tutorial-groups/shared/tutorial-groups-table/tutorial-groups-table.component.html
index 09a12c441264..1abbddca1b11 100644
--- a/src/main/webapp/app/course/tutorial-groups/shared/tutorial-groups-table/tutorial-groups-table.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/shared/tutorial-groups-table/tutorial-groups-table.component.html
@@ -1,63 +1,65 @@
 <div class="table-responsive tutorial-groups-table">
     <div class="col-12 mb-2">
-        <div class="alert alert-info">
-            {{ 'artemisApp.pages.tutorialGroupSessionManagement.timeZoneExplanation' | artemisTranslate: { timeZone: timeZoneUsedForDisplay } }}
-        </div>
+        <div
+            class="alert alert-info"
+            jhiTranslate="artemisApp.pages.tutorialGroupSessionManagement.timeZoneExplanation"
+            [translateValues]="{ timeZone: timeZoneUsedForDisplay }"
+        ></div>
     </div>
     <table class="table table-sm table-hover">
         <thead>
             <tr jhiSort [(predicate)]="sortingPredicate" [(ascending)]="ascending" (sortChange)="sortRows()">
                 @if (showIdColumn) {
                     <th jhiSortBy="id">
-                        <a class="th-link">{{ 'global.field.id' | artemisTranslate }}</a>
+                        <a class="th-link" jhiTranslate="global.field.id"></a>
                         <fa-icon [icon]="faSort" />
                     </th>
                 }
                 <th jhiSortBy="title">
-                    <a class="th-link">{{ 'artemisApp.entities.tutorialGroup.title' | artemisTranslate }}</a>
+                    <a class="th-link" jhiTranslate="artemisApp.entities.tutorialGroup.title"></a>
                     <fa-icon [icon]="faSort" />
                 </th>
                 <th>
-                    <span>{{ 'artemisApp.entities.tutorialGroup.utilization' | artemisTranslate }}</span>
+                    <span jhiTranslate="artemisApp.entities.tutorialGroup.utilization"></span>
                     <fa-icon [icon]="faQuestionCircle" class="text-secondary" ngbTooltip="{{ 'artemisApp.entities.tutorialGroup.utilizationHelp' | artemisTranslate }}" />
                 </th>
                 <th jhiSortBy="capacityAndRegistrations">
-                    <a class="th-link">{{ 'artemisApp.entities.tutorialGroup.registrationsWithCapacity' | artemisTranslate }}</a>
+                    <a class="th-link" jhiTranslate="artemisApp.entities.tutorialGroup.registrationsWithCapacity"></a>
                     <fa-icon [icon]="faSort" />
                 </th>
                 <th jhiSortBy="teachingAssistantName">
-                    <a class="th-link">{{ 'artemisApp.entities.tutorialGroup.teachingAssistant' | artemisTranslate }}</a>
+                    <a class="th-link" jhiTranslate="artemisApp.entities.tutorialGroup.teachingAssistant"></a>
                     <fa-icon [icon]="faSort" />
                 </th>
                 <th jhiSortBy="dayAndTime">
-                    <a class="th-link">{{ 'artemisApp.entities.tutorialGroup.locationTime' | artemisTranslate }}</a>
+                    <a class="th-link" jhiTranslate="artemisApp.entities.tutorialGroup.locationTime"></a>
                     <fa-icon [icon]="faSort" />
                 </th>
                 @if (mixOfOfflineAndOfflineTutorialGroups) {
                     <th jhiSortBy="isOnline" id="online-column">
-                        <a class="th-link">{{ 'artemisApp.entities.tutorialGroup.isOnline' | artemisTranslate }}</a>
+                        <a class="th-link" jhiTranslate="artemisApp.entities.tutorialGroup.isOnline"></a>
                         <fa-icon [icon]="faSort" />
                     </th>
                 }
                 @if (mifOfDifferentLanguages) {
                     <th jhiSortBy="language" id="language-column">
-                        <a class="th-link">{{ 'artemisApp.entities.tutorialGroup.language' | artemisTranslate }}</a>
+                        <a class="th-link" jhiTranslate="artemisApp.entities.tutorialGroup.language"></a>
                         <fa-icon [icon]="faSort" />
                     </th>
                 }
                 @if (tutorialGroupsSplitAcrossMultipleCampuses) {
                     <th jhiSortBy="campus" id="campus-column">
-                        <a class="th-link">{{ 'artemisApp.entities.tutorialGroup.campus' | artemisTranslate }}</a>
+                        <a class="th-link" jhiTranslate="artemisApp.entities.tutorialGroup.campus"></a>
                         <fa-icon [icon]="faSort" />
                     </th>
                 }
                 <th jhiSortBy="nextSession">
-                    <a class="th-link">{{ 'artemisApp.entities.tutorialGroup.nextSession' | artemisTranslate }}</a>
+                    <a class="th-link" jhiTranslate="artemisApp.entities.tutorialGroup.nextSession"></a>
                     <fa-icon [icon]="faSort" />
                 </th>
                 @if (showChannelColumn) {
                     <th>
-                        <a class="th-link" [routerLink]="['/courses', course.id!, 'communication']">{{ 'artemisApp.entities.tutorialGroup.channel' | artemisTranslate }}</a>
+                        <a class="th-link" [routerLink]="['/courses', course.id!, 'communication']" jhiTranslate="artemisApp.entities.tutorialGroup.channel"></a>
                     </th>
                 }
                 @if (extraColumn) {
diff --git a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/registered-students/registered-students.component.html b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/registered-students/registered-students.component.html
index 5b215410d892..037b0abe64a1 100644
--- a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/registered-students/registered-students.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/registered-students/registered-students.component.html
@@ -2,14 +2,17 @@
     @if (isInitialized && tutorialGroup) {
         <div>
             <div class="modal-header">
-                <h4 class="modal-title">{{ 'artemisApp.pages.registeredStudents.header' | artemisTranslate: { title: tutorialGroup.title } }}</h4>
+                <h4 class="modal-title" jhiTranslate="artemisApp.pages.registeredStudents.header" [translateValues]="{ title: tutorialGroup.title }"></h4>
                 <button type="button" class="btn-close" (click)="clear()"></button>
             </div>
             <div class="modal-body">
                 @if (capacityReached) {
-                    <div class="alert alert-warning" role="alert">
-                        {{ 'artemisApp.pages.registeredStudents.capacityWarning' | artemisTranslate: { capacity: tutorialGroup.capacity } }}
-                    </div>
+                    <div
+                        class="alert alert-warning"
+                        role="alert"
+                        jhiTranslate="artemisApp.pages.registeredStudents.capacityWarning"
+                        [translateValues]="{ capacity: tutorialGroup.capacity }"
+                    ></div>
                 }
                 <jhi-course-group
                     [tutorialGroup]="tutorialGroup"
diff --git a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-free-periods/crud/create-tutorial-group-free-period/create-tutorial-group-free-period.component.html b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-free-periods/crud/create-tutorial-group-free-period/create-tutorial-group-free-period.component.html
index f0f12f3eaf09..a810c1c0c46d 100644
--- a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-free-periods/crud/create-tutorial-group-free-period/create-tutorial-group-free-period.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-free-periods/crud/create-tutorial-group-free-period/create-tutorial-group-free-period.component.html
@@ -2,7 +2,7 @@
     @if (isInitialized) {
         <div>
             <div class="modal-header">
-                <h4 class="modal-title">{{ 'artemisApp.pages.createTutorialFreePeriod.title' | artemisTranslate }}</h4>
+                <h4 class="modal-title" jhiTranslate="artemisApp.pages.createTutorialFreePeriod.title"></h4>
                 <button type="button" class="btn-close" (click)="clear()"></button>
             </div>
             <div class="modal-body">
diff --git a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-free-periods/crud/edit-tutorial-group-free-period/edit-tutorial-group-free-period.component.html b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-free-periods/crud/edit-tutorial-group-free-period/edit-tutorial-group-free-period.component.html
index b7f69a950451..9df0a8393f78 100644
--- a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-free-periods/crud/edit-tutorial-group-free-period/edit-tutorial-group-free-period.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-free-periods/crud/edit-tutorial-group-free-period/edit-tutorial-group-free-period.component.html
@@ -2,7 +2,7 @@
     @if (isInitialized) {
         <div>
             <div class="modal-header">
-                <h4 class="modal-title">{{ 'artemisApp.pages.editTutorialFreePeriod.title' | artemisTranslate }}</h4>
+                <h4 class="modal-title" jhiTranslate="artemisApp.pages.editTutorialFreePeriod.title"></h4>
                 <button type="button" class="btn-close" (click)="clear()"></button>
             </div>
             <div class="modal-body">
diff --git a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-free-periods/crud/tutorial-free-period-form/tutorial-group-free-period-form.component.html b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-free-periods/crud/tutorial-free-period-form/tutorial-group-free-period-form.component.html
index fe8fb59ae02b..59a45f3f20da 100644
--- a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-free-periods/crud/tutorial-free-period-form/tutorial-group-free-period-form.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-free-periods/crud/tutorial-free-period-form/tutorial-group-free-period-form.component.html
@@ -1,8 +1,6 @@
 <div class="row">
     <div class="col-12 mb-2">
-        <div class="alert alert-info">
-            {{ 'artemisApp.generic.timeZone' | artemisTranslate: { timeZone } }}
-        </div>
+        <div class="alert alert-info" jhiTranslate="artemisApp.generic.timeZone" [translateValues]="{ timeZone }"></div>
     </div>
     <div class="col-12">
         @if (form) {
@@ -17,7 +15,7 @@
                         [checked]="timeFrame === TimeFrame.Period"
                         (click)="setTimeFrame(TimeFrame.Period)"
                     />
-                    <label class="btn btn-outline-primary" for="FreePeriod">{{ 'artemisApp.forms.tutorialFreePeriodForm.timeFrame.period' | artemisTranslate }}</label>
+                    <label class="btn btn-outline-primary" for="FreePeriod" jhiTranslate="artemisApp.forms.tutorialFreePeriodForm.timeFrame.period"></label>
 
                     <input
                         type="radio"
@@ -28,7 +26,7 @@
                         [checked]="timeFrame === TimeFrame.Day"
                         (click)="setTimeFrame(TimeFrame.Day)"
                     />
-                    <label class="btn btn-outline-primary" for="FreeDay">{{ 'artemisApp.forms.tutorialFreePeriodForm.timeFrame.day' | artemisTranslate }}</label>
+                    <label class="btn btn-outline-primary" for="FreeDay" jhiTranslate="artemisApp.forms.tutorialFreePeriodForm.timeFrame.day"></label>
 
                     <input
                         type="radio"
@@ -39,20 +37,20 @@
                         [checked]="timeFrame === TimeFrame.PeriodWithinDay"
                         (click)="setTimeFrame(TimeFrame.PeriodWithinDay)"
                     />
-                    <label class="btn btn-outline-primary" for="FreePeriodWithinDay">{{
-                        'artemisApp.forms.tutorialFreePeriodForm.timeFrame.periodWithinDay' | artemisTranslate
-                    }}</label>
+                    <label class="btn btn-outline-primary" for="FreePeriodWithinDay" jhiTranslate="artemisApp.forms.tutorialFreePeriodForm.timeFrame.periodWithinDay"></label>
                 </div>
 
                 <!-- Date -->
                 <div>
-                    <label class="form-label" for="startDate">
-                        {{
+                    <label
+                        class="form-label"
+                        for="startDate"
+                        [jhiTranslate]="
                             timeFrame !== TimeFrame.Period
-                                ? ('artemisApp.forms.tutorialFreePeriodForm.dateInput.label' | artemisTranslate)
-                                : ('artemisApp.forms.tutorialFreePeriodForm.dateInput.labelStart' | artemisTranslate)
-                        }}
-                    </label>
+                                ? 'artemisApp.forms.tutorialFreePeriodForm.dateInput.label'
+                                : 'artemisApp.forms.tutorialFreePeriodForm.dateInput.labelStart'
+                        "
+                    ></label>
                     <div class="input-group">
                         <input
                             name="startDate"
@@ -70,14 +68,12 @@
                         <owl-date-time [firstDayOfWeek]="1" datePickerInput [pickerType]="'calendar'" #startDatePicker [pickerMode]="'dialog'" />
                     </div>
                     @if (form.controls.startDate?.invalid && (form.controls.startDate?.dirty || form.controls.startDate?.touched) && form.controls.startDate?.errors?.required) {
-                        <div class="alert alert-danger">
-                            {{ 'artemisApp.forms.tutorialFreePeriodForm.dateInput.requiredDateError' | artemisTranslate }}
-                        </div>
+                        <div class="alert alert-danger" jhiTranslate="artemisApp.forms.tutorialFreePeriodForm.dateInput.requiredDateError"></div>
                     }
                 </div>
 
                 @if (timeFrame === TimeFrame.Period) {
-                    <label class="form-label" for="endDate">{{ 'artemisApp.forms.tutorialFreePeriodForm.dateInput.labelEnd' | artemisTranslate }}</label>
+                    <label class="form-label" for="endDate" jhiTranslate="artemisApp.forms.tutorialFreePeriodForm.dateInput.labelEnd"></label>
                     <div class="input-group">
                         <input
                             name="endDate"
@@ -95,21 +91,17 @@
                         <owl-date-time [firstDayOfWeek]="1" datePickerInput [pickerType]="'calendar'" #endDatePicker [pickerMode]="'dialog'" />
                     </div>
                     @if (form.controls.endDate?.invalid && (form.controls.endDate?.dirty || form.controls.endDate?.touched) && form.controls.endDate?.errors?.required) {
-                        <div class="alert alert-danger">
-                            {{ 'artemisApp.forms.tutorialFreePeriodForm.dateInput.requiredEndDateError' | artemisTranslate }}
-                        </div>
+                        <div class="alert alert-danger" jhiTranslate="artemisApp.forms.tutorialFreePeriodForm.dateInput.requiredEndDateError"></div>
                     } @else if (
                         form.controls.endDate?.touched &&
                         form.controls.startDate?.touched &&
                         (form.controls.endDate?.value | artemisDate: 'short-date' : false : timeZone) <=
                             (form.controls.startDate?.value | artemisDate: 'short-date' : false : timeZone)
                     ) {
-                        <div class="alert alert-danger">
-                            {{ 'artemisApp.forms.tutorialFreePeriodForm.dateInput.invalidEndDateError' | artemisTranslate }}
-                        </div>
+                        <div class="alert alert-danger" jhiTranslate="artemisApp.forms.tutorialFreePeriodForm.dateInput.invalidEndDateError"></div>
                     }
                 } @else if (timeFrame === TimeFrame.PeriodWithinDay) {
-                    <label class="form-label" for="startTime">{{ 'artemisApp.forms.tutorialFreePeriodForm.dateInput.labelStartTime' | artemisTranslate }}</label>
+                    <label class="form-label" for="startTime" jhiTranslate="artemisApp.forms.tutorialFreePeriodForm.dateInput.labelStartTime"></label>
                     <div class="input-group">
                         <input
                             name="startTime"
@@ -126,7 +118,7 @@
                         <owl-date-time timePickerInput [pickerType]="'timer'" #startTimePicker [pickerMode]="'dialog'" />
                     </div>
 
-                    <label class="form-label" for="endTime">{{ 'artemisApp.forms.tutorialFreePeriodForm.dateInput.labelEndTime' | artemisTranslate }}</label>
+                    <label class="form-label" for="endTime" jhiTranslate="artemisApp.forms.tutorialFreePeriodForm.dateInput.labelEndTime"></label>
                     <div class="input-group">
                         <input
                             name="endTime"
@@ -148,14 +140,12 @@
                         form.controls.startTime &&
                         (form.controls.endTime?.value | artemisDate: 'time' : false : timeZone) <= (form.controls.startTime?.value | artemisDate: 'time' : false : timeZone)
                     ) {
-                        <div class="alert alert-danger">
-                            {{ 'artemisApp.forms.tutorialFreePeriodForm.dateInput.invalidEndDateError' | artemisTranslate }}
-                        </div>
+                        <div class="alert alert-danger" jhiTranslate="artemisApp.forms.tutorialFreePeriodForm.dateInput.invalidEndDateError"></div>
                     }
                 }
                 <!-- Reason -->
                 <div class="form-group">
-                    <label for="reason">{{ 'artemisApp.forms.tutorialFreePeriodForm.reasonInput.label' | artemisTranslate }}</label>
+                    <label for="reason" jhiTranslate="artemisApp.forms.tutorialFreePeriodForm.reasonInput.label"></label>
                     <textarea
                         class="form-control"
                         id="reason"
@@ -164,15 +154,17 @@
                         [placeholder]="'artemisApp.forms.tutorialFreePeriodForm.reasonInput.placeholder' | artemisTranslate"
                     ></textarea>
                     @if (form.controls.reason?.invalid && (form.controls.reason?.dirty || (form.controls.reason?.touched && form.controls.reason?.errors?.maxlength))) {
-                        <div class="alert alert-danger">
-                            {{ 'artemisApp.forms.tutorialFreePeriodForm.reasonInput.maxLengthValidationError' | artemisTranslate: { max: '256' } }}
-                        </div>
+                        <div
+                            class="alert alert-danger"
+                            jhiTranslate="artemisApp.forms.tutorialFreePeriodForm.reasonInput.maxLengthValidationError"
+                            [translateValues]="{ max: '256' }"
+                        ></div>
                     }
                 </div>
                 <div class="row mt-2">
                     <div class="col-12">
                         <button id="submitButton" class="btn btn-primary" type="submit" [disabled]="!isSubmitPossible">
-                            <span>{{ (isEditMode ? 'global.generic.edit' : 'global.generic.create') | artemisTranslate }}</span>
+                            <span jhiTranslate="{{ isEditMode ? 'global.generic.edit' : 'global.generic.create' }}"></span>
                         </button>
                     </div>
                 </div>
diff --git a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-free-periods/tutorial-free-periods-management/tutorial-group-free-period-row-buttons/tutorial-group-free-period-row-buttons.component.html b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-free-periods/tutorial-free-periods-management/tutorial-group-free-period-row-buttons/tutorial-group-free-period-row-buttons.component.html
index 5b80e8513372..fca57919527d 100644
--- a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-free-periods/tutorial-free-periods-management/tutorial-group-free-period-row-buttons/tutorial-group-free-period-row-buttons.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-free-periods/tutorial-free-periods-management/tutorial-group-free-period-row-buttons/tutorial-group-free-period-row-buttons.component.html
@@ -3,7 +3,7 @@
 
     <button type="button" [id]="'edit-' + tutorialFreePeriod.id" (click)="openEditFreePeriodDialog($event)" class="btn btn-warning btn-sm me-1">
         <fa-icon [icon]="faWrench" />
-        <span class="d-none d-md-inline">{{ 'entity.action.edit' | artemisTranslate }}</span>
+        <span class="d-none d-md-inline" jhiTranslate="entity.action.edit"></span>
     </button>
     <!-- Delete -->
     <button
diff --git a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-free-periods/tutorial-free-periods-management/tutorial-group-free-periods-management.component.html b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-free-periods/tutorial-free-periods-management/tutorial-group-free-periods-management.component.html
index b7684866ba7c..1d142123bca5 100644
--- a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-free-periods/tutorial-free-periods-management/tutorial-group-free-periods-management.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-free-periods/tutorial-free-periods-management/tutorial-group-free-periods-management.component.html
@@ -3,19 +3,21 @@
         <div class="row">
             <div class="col-12">
                 <div class="d-flex justify-content-between">
-                    <h4>{{ 'artemisApp.pages.tutorialFreePeriodsManagement.title' | artemisTranslate }}</h4>
+                    <h4 jhiTranslate="artemisApp.pages.tutorialFreePeriodsManagement.title"></h4>
                     <div>
                         <button type="button" class="btn btn-primary" id="create-tutorial-free-day" (click)="openCreateFreePeriodDialog($event)">
                             <fa-icon [icon]="faPlus" />
-                            <span>{{ 'artemisApp.pages.tutorialFreePeriodsManagement.createFreePeriodButton' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.pages.tutorialFreePeriodsManagement.createFreePeriodButton"></span>
                         </button>
                     </div>
                 </div>
             </div>
             <div class="col-12 mb-2">
-                <div class="alert alert-info">
-                    {{ 'artemisApp.pages.tutorialFreePeriodsManagement.timeZoneExplanation' | artemisTranslate: { timeZone: course.timeZone } }}
-                </div>
+                <div
+                    class="alert alert-info"
+                    jhiTranslate="artemisApp.pages.tutorialFreePeriodsManagement.timeZoneExplanation"
+                    [translateValues]="{ timeZone: course.timeZone }"
+                ></div>
             </div>
 
             <!-- List of free Periods -->
diff --git a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-free-periods/tutorial-free-periods-management/tutorial-group-free-periods-table/tutorial-group-free-periods-table.component.html b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-free-periods/tutorial-free-periods-management/tutorial-group-free-periods-table/tutorial-group-free-periods-table.component.html
index 70611f9df79b..7c274032f21b 100644
--- a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-free-periods/tutorial-free-periods-management/tutorial-group-free-periods-table/tutorial-group-free-periods-table.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-free-periods/tutorial-free-periods-management/tutorial-group-free-periods-table/tutorial-group-free-periods-table.component.html
@@ -3,12 +3,12 @@
     <table class="table table-sm table-hover">
         <thead>
             <tr>
-                <th class="col-1">{{ 'global.field.id' | artemisTranslate }}</th>
-                <th class="col-2">{{ 'artemisApp.entities.tutorialFreePeriod.startDate' | artemisTranslate }}</th>
-                <th class="col-2">{{ 'artemisApp.entities.tutorialFreePeriod.endDate' | artemisTranslate }}</th>
-                <th class="col-2">{{ 'artemisApp.forms.tutorialFreePeriodForm.dateInput.labelStartTime' | artemisTranslate }}</th>
-                <th class="col-2">{{ 'artemisApp.forms.tutorialFreePeriodForm.dateInput.labelEndTime' | artemisTranslate }}</th>
-                <th class="col-2">{{ 'artemisApp.entities.tutorialFreePeriod.reason' | artemisTranslate }}</th>
+                <th class="col-1" jhiTranslate="global.field.id"></th>
+                <th class="col-2" jhiTranslate="artemisApp.entities.tutorialFreePeriod.startDate"></th>
+                <th class="col-2" jhiTranslate="artemisApp.entities.tutorialFreePeriod.endDate"></th>
+                <th class="col-2" jhiTranslate="artemisApp.forms.tutorialFreePeriodForm.dateInput.labelStartTime"></th>
+                <th class="col-2" jhiTranslate="artemisApp.forms.tutorialFreePeriodForm.dateInput.labelEndTime"></th>
+                <th class="col-2" jhiTranslate="artemisApp.entities.tutorialFreePeriod.reason"></th>
                 <th class="col-1"></th>
             </tr>
         </thead>
diff --git a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-group-sessions/crud/create-tutorial-group-session/create-tutorial-group-session.component.html b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-group-sessions/crud/create-tutorial-group-session/create-tutorial-group-session.component.html
index b2c5a5875541..a4637425d034 100644
--- a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-group-sessions/crud/create-tutorial-group-session/create-tutorial-group-session.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-group-sessions/crud/create-tutorial-group-session/create-tutorial-group-session.component.html
@@ -2,7 +2,7 @@
     @if (isInitialized) {
         <div>
             <div class="modal-header">
-                <h4 class="modal-title">{{ 'artemisApp.pages.createTutorialSession.title' | artemisTranslate }}</h4>
+                <h4 class="modal-title" jhiTranslate="artemisApp.pages.createTutorialSession.title"></h4>
                 <button type="button" class="btn-close" (click)="clear()"></button>
             </div>
             <div class="modal-body">
diff --git a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-group-sessions/crud/edit-tutorial-group-session/edit-tutorial-group-session.component.html b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-group-sessions/crud/edit-tutorial-group-session/edit-tutorial-group-session.component.html
index 41e95ab0fb46..bbd1add0ab9b 100644
--- a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-group-sessions/crud/edit-tutorial-group-session/edit-tutorial-group-session.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-group-sessions/crud/edit-tutorial-group-session/edit-tutorial-group-session.component.html
@@ -2,7 +2,7 @@
     @if (isInitialized) {
         <div>
             <div class="modal-header">
-                <h4 class="modal-title">{{ 'artemisApp.pages.editTutorialSession.title' | artemisTranslate }}</h4>
+                <h4 class="modal-title" jhiTranslate="artemisApp.pages.editTutorialSession.title"></h4>
                 <button type="button" class="btn-close" (click)="clear()"></button>
             </div>
             <div class="modal-body">
diff --git a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-group-sessions/crud/tutorial-group-session-form/tutorial-group-session-form.component.html b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-group-sessions/crud/tutorial-group-session-form/tutorial-group-session-form.component.html
index 818bd2dafafe..539ff442d0fe 100644
--- a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-group-sessions/crud/tutorial-group-session-form/tutorial-group-session-form.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-group-sessions/crud/tutorial-group-session-form/tutorial-group-session-form.component.html
@@ -1,15 +1,13 @@
 <div class="row">
     <div class="col-12 mb-2">
-        <div class="alert alert-info">
-            {{ 'artemisApp.generic.timeZone' | artemisTranslate: { timeZone } }}
-        </div>
+        <div class="alert alert-info" jhiTranslate="artemisApp.generic.timeZone" [translateValues]="{ timeZone }"></div>
     </div>
     <div class="col-12">
         @if (form) {
             <form class="row" [formGroup]="form" (ngSubmit)="submitForm()">
                 <!-- Date -->
                 <div>
-                    <label class="form-label" for="date">{{ 'artemisApp.forms.sessionForm.dateInput.label' | artemisTranslate }}</label>
+                    <label class="form-label" for="date" jhiTranslate="artemisApp.forms.sessionForm.dateInput.label"></label>
                     <div class="input-group">
                         <input formControlName="date" [owlDateTime]="date" class="d-none" />
                         <input
@@ -29,14 +27,10 @@
                     @if (dateControl?.invalid && (dateControl?.dirty || dateControl?.touched)) {
                         <div class="alert alert-danger">
                             @if (dateControl?.errors?.required) {
-                                <div>
-                                    {{ 'artemisApp.forms.sessionForm.dateInput.requiredDateError' | artemisTranslate }}
-                                </div>
+                                <div jhiTranslate="artemisApp.forms.sessionForm.dateInput.requiredDateError"></div>
                             }
                             @if (dateControl?.errors?.owlDateTimeParse) {
-                                <div>
-                                    {{ 'artemisApp.forms.sessionForm.dateInput.parseError' | artemisTranslate }}
-                                </div>
+                                <div jhiTranslate="artemisApp.forms.sessionForm.dateInput.parseError"></div>
                             }
                         </div>
                     }
@@ -45,13 +39,13 @@
                 <div>
                     <div class="row">
                         <div class="col-auto my-auto">
-                            <span>{{ 'artemisApp.forms.sessionForm.timeInput.from' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.forms.sessionForm.timeInput.from"></span>
                         </div>
                         <div class="col-auto">
                             <ngb-timepicker formControlName="startTime" [hourStep]="1" [minuteStep]="15" />
                         </div>
                         <div class="col-auto my-auto">
-                            <span>{{ 'artemisApp.forms.sessionForm.timeInput.to' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.forms.sessionForm.timeInput.to"></span>
                         </div>
                         <div class="col-auto my-auto">
                             <ngb-timepicker formControlName="endTime" [hourStep]="1" [minuteStep]="15" />
@@ -60,34 +54,28 @@
                     @if (startTimeControl?.invalid && (startTimeControl?.dirty || startTimeControl?.touched)) {
                         <div class="alert alert-danger">
                             @if (startTimeControl?.errors?.required) {
-                                <div>
-                                    {{ 'artemisApp.forms.sessionForm.timeInput.invalidTimeRange' | artemisTranslate }}
-                                </div>
+                                <div jhiTranslate="artemisApp.forms.sessionForm.timeInput.invalidTimeRange"></div>
                             }
                         </div>
                     }
                     @if (endTimeControl?.invalid && (endTimeControl?.dirty || endTimeControl?.touched)) {
                         <div class="alert alert-danger">
                             @if (endTimeControl?.errors?.required) {
-                                <div>
-                                    {{ 'artemisApp.forms.sessionForm.timeInput.invalidTimeRange' | artemisTranslate }}
-                                </div>
+                                <div jhiTranslate="artemisApp.forms.sessionForm.timeInput.invalidTimeRange"></div>
                             }
                         </div>
                     }
                     @if (form?.invalid && (form?.dirty || form?.touched)) {
                         <div>
                             @if (form?.errors?.invalidTimeRange) {
-                                <div class="alert alert-danger">
-                                    {{ 'artemisApp.forms.sessionForm.timeInput.invalidTimeRange' | artemisTranslate }}
-                                </div>
+                                <div class="alert alert-danger" jhiTranslate="artemisApp.forms.sessionForm.timeInput.invalidTimeRange"></div>
                             }
                         </div>
                     }
                 </div>
                 <!-- Location -->
                 <div class="form-group">
-                    <label for="location">{{ 'artemisApp.forms.sessionForm.locationInput.labelOnline' | artemisTranslate }}</label>
+                    <label for="location" jhiTranslate="artemisApp.forms.sessionForm.locationInput.labelOnline"></label>
                     <textarea
                         class="form-control"
                         id="location"
@@ -98,14 +86,10 @@
                     @if (locationControl?.invalid && (locationControl?.dirty || locationControl?.touched)) {
                         <div class="alert alert-danger">
                             @if (locationControl?.errors?.maxlength) {
-                                <div>
-                                    {{ 'artemisApp.forms.sessionForm.locationInput.maxLengthValidationError' | artemisTranslate: { max: '2000' } }}
-                                </div>
+                                <div jhiTranslate="artemisApp.forms.sessionForm.locationInput.maxLengthValidationError" [translateValues]="{ max: '2000' }"></div>
                             }
                             @if (locationControl?.errors?.required) {
-                                <div>
-                                    {{ 'artemisApp.forms.sessionForm.locationInput.requiredValidationError' | artemisTranslate }}
-                                </div>
+                                <div jhiTranslate="artemisApp.forms.sessionForm.locationInput.requiredValidationError"></div>
                             }
                         </div>
                     }
@@ -113,7 +97,7 @@
                 <div class="row mt-2">
                     <div class="col-12">
                         <button id="submitButton" class="btn btn-primary" type="submit" [disabled]="!isSubmitPossible">
-                            <span>{{ (isEditMode ? 'global.generic.edit' : 'global.generic.create') | artemisTranslate }}</span>
+                            <span jhiTranslate="{{ isEditMode ? 'global.generic.edit' : 'global.generic.create' }}"></span>
                         </button>
                     </div>
                 </div>
diff --git a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-group-sessions/tutorial-group-sessions-management/cancellation-modal/cancellation-modal.component.html b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-group-sessions/tutorial-group-sessions-management/cancellation-modal/cancellation-modal.component.html
index 84fedb444ecc..ec98d14c41ee 100644
--- a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-group-sessions/tutorial-group-sessions-management/cancellation-modal/cancellation-modal.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-group-sessions/tutorial-group-sessions-management/cancellation-modal/cancellation-modal.component.html
@@ -21,16 +21,15 @@ <h4 class="modal-title">
     @if (tutorialGroupSession.status === tutorialGroupSessionStatus.ACTIVE) {
         <form [formGroup]="form">
             <div class="form-group">
-                <label for="reason">{{ 'artemisApp.pages.tutorialGroupSessionManagement.cancelActivateModal.cancelSession.explanation' | artemisTranslate }}</label>
+                <label for="reason" jhiTranslate="artemisApp.pages.tutorialGroupSessionManagement.cancelActivateModal.cancelSession.explanation"></label>
                 <textarea class="form-control" id="reason" rows="2" formControlName="reason"></textarea>
                 @if (reasonControl?.invalid && (reasonControl?.dirty || reasonControl?.touched)) {
                     <div class="alert alert-danger">
                         @if (reasonControl?.errors?.maxlength) {
-                            <div>
-                                {{
-                                    'artemisApp.pages.tutorialGroupSessionManagement.cancelActivateModal.cancelSession.maxLengthValidationError' | artemisTranslate: { max: '256' }
-                                }}
-                            </div>
+                            <div
+                                jhiTranslate="artemisApp.pages.tutorialGroupSessionManagement.cancelActivateModal.cancelSession.maxLengthValidationError"
+                                [translateValues]="{ max: '256' }"
+                            ></div>
                         }
                     </div>
                 }
@@ -39,8 +38,13 @@ <h4 class="modal-title">
     }
 </div>
 <div class="modal-footer">
-    <button id="dismiss-button" type="button" class="btn btn-outline-secondary" (click)="activeModal.dismiss()">{{ 'global.form.cancel' | artemisTranslate }}</button>
-    <button id="cancel-activate-button" type="button" class="btn btn-success" (click)="cancelOrActivate()" [disabled]="!isSubmitPossible">
-        {{ 'global.form.confirm' | artemisTranslate }}
-    </button>
+    <button id="dismiss-button" type="button" class="btn btn-outline-secondary" (click)="activeModal.dismiss()" jhiTranslate="global.form.cancel"></button>
+    <button
+        id="cancel-activate-button"
+        type="button"
+        class="btn btn-success"
+        (click)="cancelOrActivate()"
+        [disabled]="!isSubmitPossible"
+        jhiTranslate="global.form.confirm"
+    ></button>
 </div>
diff --git a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-group-sessions/tutorial-group-sessions-management/tutorial-group-session-row-buttons/tutorial-group-session-row-buttons.component.html b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-group-sessions/tutorial-group-sessions-management/tutorial-group-session-row-buttons/tutorial-group-session-row-buttons.component.html
index 1552c89a7b4a..1ecd4247b138 100644
--- a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-group-sessions/tutorial-group-sessions-management/tutorial-group-session-row-buttons/tutorial-group-session-row-buttons.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-group-sessions/tutorial-group-sessions-management/tutorial-group-session-row-buttons/tutorial-group-session-row-buttons.component.html
@@ -13,7 +13,7 @@
     <!-- Edit -->
     <button type="button" [id]="'edit-' + tutorialGroupSession.id" (click)="openEditSessionDialog($event)" class="btn btn-warning btn-sm me-1">
         <fa-icon [icon]="faWrench" />
-        <span class="d-none d-md-inline">{{ 'entity.action.edit' | artemisTranslate }}</span>
+        <span class="d-none d-md-inline" jhiTranslate="entity.action.edit"></span>
     </button>
     <!-- Delete -->
     <button
diff --git a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-group-sessions/tutorial-group-sessions-management/tutorial-group-sessions-management.component.html b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-group-sessions/tutorial-group-sessions-management/tutorial-group-sessions-management.component.html
index eac33e8856c9..d2b64825b2bc 100644
--- a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-group-sessions/tutorial-group-sessions-management/tutorial-group-sessions-management.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-group-sessions/tutorial-group-sessions-management/tutorial-group-sessions-management.component.html
@@ -9,7 +9,7 @@ <h4>{{ 'artemisApp.pages.tutorialGroupSessionManagement.title' | artemisTranslat
                 <div class="col-12" class="modal-body">
                     <!-- Schedule -->
                     <dt>
-                        <span>{{ 'artemisApp.entities.tutorialGroup.schedule' | artemisTranslate }}</span>
+                        <span jhiTranslate="artemisApp.entities.tutorialGroup.schedule"></span>
                     </dt>
                     <dd>
                         @if (tutorialGroup.tutorialGroupSchedule) {
@@ -22,10 +22,10 @@ <h4>{{ 'artemisApp.pages.tutorialGroupSessionManagement.title' | artemisTranslat
                             }}</span>
                             <br />
                             @if (tutorialGroup.isOnline) {
-                                <span>{{ 'artemisApp.forms.scheduleForm.locationInput.labelOnline' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.forms.scheduleForm.locationInput.labelOnline"></span>
                             }
                             @if (!tutorialGroup.isOnline) {
-                                <span>{{ 'artemisApp.forms.scheduleForm.locationInput.labelOffline' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.forms.scheduleForm.locationInput.labelOffline"></span>
                             }
                             : {{ tutorialGroup.tutorialGroupSchedule?.location }}
                             <br />
@@ -38,7 +38,7 @@ <h4>{{ 'artemisApp.pages.tutorialGroupSessionManagement.title' | artemisTranslat
                                 }}
                             </span>
                         } @else {
-                            <span>{{ 'artemisApp.pages.tutorialGroupDetail.scheduleNotSet' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.pages.tutorialGroupDetail.scheduleNotSet"></span>
                         }
                         <br />
                     </dd>
@@ -47,7 +47,7 @@ <h4>{{ 'artemisApp.pages.tutorialGroupSessionManagement.title' | artemisTranslat
             <div class="my-2">
                 <button type="button" id="create-session-button" class="btn btn-primary" (click)="openCreateSessionDialog($event)">
                     <fa-icon [icon]="faPlus" />
-                    <span>{{ 'artemisApp.pages.tutorialGroupSessionManagement.createSessionButton' | artemisTranslate }}</span>
+                    <span jhiTranslate="artemisApp.pages.tutorialGroupSessionManagement.createSessionButton"></span>
                 </button>
             </div>
             <div class="scrollbar table-wrapper-scroll-y border border-lightgrey p-3 modal-body">
diff --git a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups-checklist/tutorial-groups-checklist.component.html b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups-checklist/tutorial-groups-checklist.component.html
index b1927166f463..0f537556c16a 100644
--- a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups-checklist/tutorial-groups-checklist.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups-checklist/tutorial-groups-checklist.component.html
@@ -2,39 +2,33 @@
     @if (course) {
         <div class="row">
             <div class="col-12">
-                <h1>{{ 'artemisApp.pages.checklist.title' | artemisTranslate }}</h1>
-                <p>
-                    {{ 'artemisApp.pages.checklist.explanation' | artemisTranslate }}
-                </p>
+                <h1 jhiTranslate="artemisApp.pages.checklist.title"></h1>
+                <p jhiTranslate="artemisApp.pages.checklist.explanation"></p>
             </div>
             <hr />
             <div class="col-12">
-                <p>{{ 'artemisApp.pages.checklist.timeZoneExplanation' | artemisTranslate }}</p>
+                <p jhiTranslate="artemisApp.pages.checklist.timeZoneExplanation"></p>
                 <div>
                     <jhi-checklist-check id="timeZone" [checkAttribute]="isTimeZoneConfigured" />
-                    <label class="form-check-label pe-4" for="timeZone">
-                        {{ 'artemisApp.pages.checklist.timeZone' | artemisTranslate }}
-                    </label>
+                    <label class="form-check-label pe-4" for="timeZone" jhiTranslate="artemisApp.pages.checklist.timeZone"></label>
                     <a [routerLink]="['/course-management', course.id!, 'edit']" class="btn btn-warning btn-md my-2">
-                        <fa-icon [icon]="faWrench" />&nbsp;<span>{{ 'artemisApp.pages.checklist.editCourse' | artemisTranslate }}</span>
+                        <fa-icon [icon]="faWrench" />&nbsp;<span jhiTranslate="artemisApp.pages.checklist.editCourse"></span>
                     </a>
                 </div>
             </div>
             <hr />
             <div class="col-12">
-                <p>{{ 'artemisApp.pages.checklist.configurationExplanation' | artemisTranslate }}</p>
+                <p jhiTranslate="artemisApp.pages.checklist.configurationExplanation"></p>
                 <table>
                     <jhi-checklist-check id="configuration" [checkAttribute]="isTutorialGroupConfigurationCreated" />
-                    <label class="form-check-label pe-4" for="configuration">
-                        {{ 'artemisApp.pages.checklist.configuration' | artemisTranslate }}
-                    </label>
+                    <label class="form-check-label pe-4" for="configuration" jhiTranslate="artemisApp.pages.checklist.configuration"></label>
                     @if (isTutorialGroupConfigurationCreated) {
                         <a
                             [routerLink]="['/course-management', course.id!, 'tutorial-groups', 'configuration', course.tutorialGroupsConfiguration!.id!, 'edit']"
                             class="btn btn-primary btn-md my-2"
                             [class.disabled]="!isTimeZoneConfigured"
                         >
-                            <fa-icon [icon]="faPlus" />&nbsp;<span>{{ 'artemisApp.pages.tutorialGroupsManagement.editConfigurationButton' | artemisTranslate }}</span>
+                            <fa-icon [icon]="faPlus" />&nbsp;<span jhiTranslate="artemisApp.pages.tutorialGroupsManagement.editConfigurationButton"></span>
                         </a>
                     }
                     @if (!isTutorialGroupConfigurationCreated) {
@@ -43,7 +37,7 @@ <h1>{{ 'artemisApp.pages.checklist.title' | artemisTranslate }}</h1>
                             class="btn btn-primary btn-md my-2"
                             [class.disabled]="!isTimeZoneConfigured"
                         >
-                            <fa-icon [icon]="faPlus" />&nbsp;<span>{{ 'artemisApp.pages.checklist.createConfiguration' | artemisTranslate }}</span>
+                            <fa-icon [icon]="faPlus" />&nbsp;<span jhiTranslate="artemisApp.pages.checklist.createConfiguration"></span>
                         </a>
                     }
                 </table>
@@ -51,7 +45,7 @@ <h1>{{ 'artemisApp.pages.checklist.title' | artemisTranslate }}</h1>
             <hr />
             <div class="col-12">
                 <button [routerLink]="['/course-management', course.id!, 'tutorial-groups']" class="btn btn-primary btn-md my-2" [disabled]="!isFullyConfigured">
-                    <span>{{ 'artemisApp.pages.checklist.continueToManagement' | artemisTranslate }}</span>
+                    <span jhiTranslate="artemisApp.pages.checklist.continueToManagement"></span>
                 </button>
             </div>
         </div>
diff --git a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups-configuration/crud/create-tutorial-groups-configuration/create-tutorial-groups-configuration.component.html b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups-configuration/crud/create-tutorial-groups-configuration/create-tutorial-groups-configuration.component.html
index 8ff2c70883d0..57d838855af1 100644
--- a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups-configuration/crud/create-tutorial-groups-configuration/create-tutorial-groups-configuration.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups-configuration/crud/create-tutorial-groups-configuration/create-tutorial-groups-configuration.component.html
@@ -1,7 +1,5 @@
 <jhi-loading-indicator-container [isLoading]="isLoading">
-    <h3>{{ 'artemisApp.pages.createTutorialGroupsConfiguration.title' | artemisTranslate }}</h3>
-    <div class="alert alert-info" role="alert">
-        {{ 'artemisApp.pages.createTutorialGroupsConfiguration.explanation' | artemisTranslate }}
-    </div>
+    <h3 jhiTranslate="artemisApp.pages.createTutorialGroupsConfiguration.title"></h3>
+    <div class="alert alert-info" role="alert" jhiTranslate="artemisApp.pages.createTutorialGroupsConfiguration.explanation"></div>
     <jhi-tutorial-groups-configuration-form [isEditMode]="false" (formSubmitted)="createTutorialsGroupConfiguration($event)" [course]="course" />
 </jhi-loading-indicator-container>
diff --git a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups-configuration/crud/edit-tutorial-groups-configuration/edit-tutorial-groups-configuration.component.html b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups-configuration/crud/edit-tutorial-groups-configuration/edit-tutorial-groups-configuration.component.html
index 9bd9a4cf4b68..383e1f597c22 100644
--- a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups-configuration/crud/edit-tutorial-groups-configuration/edit-tutorial-groups-configuration.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups-configuration/crud/edit-tutorial-groups-configuration/edit-tutorial-groups-configuration.component.html
@@ -1,4 +1,4 @@
 <jhi-loading-indicator-container [isLoading]="isLoading">
-    <h3>{{ 'artemisApp.pages.editTutorialGroupsConfiguration.title' | artemisTranslate }}</h3>
+    <h3 jhiTranslate="artemisApp.pages.editTutorialGroupsConfiguration.title"></h3>
     <jhi-tutorial-groups-configuration-form [formData]="formData" [isEditMode]="true" (formSubmitted)="updateTutorialGroupsConfiguration($event)" [course]="course" />
 </jhi-loading-indicator-container>
diff --git a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups-configuration/crud/tutorial-groups-configuration-form/tutorial-groups-configuration-form.component.html b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups-configuration/crud/tutorial-groups-configuration-form/tutorial-groups-configuration-form.component.html
index 5f942391994b..981804efb514 100644
--- a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups-configuration/crud/tutorial-groups-configuration-form/tutorial-groups-configuration-form.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups-configuration/crud/tutorial-groups-configuration-form/tutorial-groups-configuration-form.component.html
@@ -4,7 +4,7 @@
             <form class="row" [formGroup]="form" (ngSubmit)="submitForm()">
                 <!-- Period -->
                 <div class="col-auto">
-                    <label class="form-label" for="period">{{ 'artemisApp.forms.configurationForm.periodInput.label' | artemisTranslate }}</label>
+                    <label class="form-label" for="period" jhiTranslate="artemisApp.forms.configurationForm.periodInput.label"></label>
                     <div class="input-group">
                         <input
                             name="period"
@@ -23,25 +23,17 @@
                         </button>
                         <owl-date-time [firstDayOfWeek]="1" [pickerType]="'calendar'" #period />
                     </div>
-                    <div class="form-text">
-                        {{ 'artemisApp.forms.configurationForm.periodInput.explanation' | artemisTranslate }}
-                    </div>
+                    <div class="form-text" jhiTranslate="artemisApp.forms.configurationForm.periodInput.explanation"></div>
                     @if (periodControl?.invalid && (periodControl?.dirty || periodControl?.touched)) {
                         <div class="alert alert-danger">
                             @if (periodControl?.errors?.owlRequiredDateTimeRange || periodControl?.errors?.required) {
-                                <div>
-                                    {{ 'artemisApp.forms.configurationForm.periodInput.requiredValidationError' | artemisTranslate }}
-                                </div>
+                                <div jhiTranslate="artemisApp.forms.configurationForm.periodInput.requiredValidationError"></div>
                             }
                             @if (periodControl?.errors?.owlDateTimeParse) {
-                                <div>
-                                    {{ 'artemisApp.forms.configurationForm.periodInput.parseError' | artemisTranslate }}
-                                </div>
+                                <div jhiTranslate="artemisApp.forms.configurationForm.periodInput.parseError"></div>
                             }
                             @if (periodControl?.errors?.owlDateTimeRange) {
-                                <div>
-                                    {{ 'artemisApp.forms.configurationForm.periodInput.invalidRangeError' | artemisTranslate }}
-                                </div>
+                                <div jhiTranslate="artemisApp.forms.configurationForm.periodInput.invalidRangeError"></div>
                             }
                         </div>
                     }
@@ -49,41 +41,46 @@
                     <div [hidden]="!isMessagingEnabled(course)">
                         <div class="form-check">
                             <input class="form-check-input" type="checkbox" formControlName="useTutorialGroupChannels" id="useTutorialGroupChannels" />
-                            <label class="form-check-label" for="useTutorialGroupChannels">
-                                {{ 'artemisApp.forms.configurationForm.useTutorialGroupChannelsInput.label' | artemisTranslate }}
-                            </label>
-                            <small id="channelHelp" class="form-text text-body-secondary d-block">{{
-                                'artemisApp.forms.configurationForm.useTutorialGroupChannelsInput.explanation' | artemisTranslate
-                            }}</small>
+                            <label
+                                class="form-check-label"
+                                for="useTutorialGroupChannels"
+                                jhiTranslate="artemisApp.forms.configurationForm.useTutorialGroupChannelsInput.label"
+                            ></label>
+                            <small
+                                id="channelHelp"
+                                class="form-text text-body-secondary d-block"
+                                jhiTranslate="artemisApp.forms.configurationForm.useTutorialGroupChannelsInput.explanation"
+                            ></small>
                             @if (showChannelDeletionWarning) {
-                                <div class="alert alert-danger" role="alert" id="channelDeletionWarning">
-                                    {{ 'artemisApp.forms.configurationForm.useTutorialGroupChannelsInput.channelDeletionWarning' | artemisTranslate }}
-                                </div>
+                                <div
+                                    class="alert alert-danger"
+                                    role="alert"
+                                    id="channelDeletionWarning"
+                                    jhiTranslate="artemisApp.forms.configurationForm.useTutorialGroupChannelsInput.channelDeletionWarning"
+                                ></div>
                             }
                         </div>
                         <!--Public Channel / Private Channel -->
                         <div class="form-group" [hidden]="!useTutorialGroupChannelsControl?.value">
-                            <label class="d-block">{{ 'artemisApp.dialogs.createChannel.channelForm.isPublicInput.label' | artemisTranslate }}</label>
+                            <label class="d-block" jhiTranslate="artemisApp.dialogs.createChannel.channelForm.isPublicInput.label"></label>
                             <div class="btn-group" role="group">
                                 <input formControlName="usePublicTutorialGroupChannels" type="radio" class="btn-check" id="public" autocomplete="off" checked [value]="true" />
-                                <label class="btn btn-outline-secondary" for="public">{{
-                                    'artemisApp.dialogs.createChannel.channelForm.isPublicInput.public' | artemisTranslate
-                                }}</label>
+                                <label class="btn btn-outline-secondary" for="public" jhiTranslate="artemisApp.dialogs.createChannel.channelForm.isPublicInput.public"></label>
                                 <input formControlName="usePublicTutorialGroupChannels" type="radio" class="btn-check" id="private" autocomplete="off" [value]="false" />
-                                <label class="btn btn-outline-secondary" for="private">{{
-                                    'artemisApp.dialogs.createChannel.channelForm.isPublicInput.private' | artemisTranslate
-                                }}</label>
+                                <label class="btn btn-outline-secondary" for="private" jhiTranslate="artemisApp.dialogs.createChannel.channelForm.isPublicInput.private"></label>
                             </div>
-                            <small id="isPublicHelp" class="form-text text-body-secondary d-block">{{
-                                'artemisApp.dialogs.createChannel.channelForm.isPublicInput.explanation' | artemisTranslate
-                            }}</small>
+                            <small
+                                id="isPublicHelp"
+                                class="form-text text-body-secondary d-block"
+                                jhiTranslate="artemisApp.dialogs.createChannel.channelForm.isPublicInput.explanation"
+                            ></small>
                         </div>
                     </div>
                 </div>
                 <div class="row mt-2">
                     <div class="col-12">
                         <button id="submitButton" class="btn btn-primary" type="submit" [disabled]="!isSubmitPossible">
-                            <span>{{ (isEditMode ? 'global.generic.edit' : 'global.generic.create') | artemisTranslate }}</span>
+                            <span jhiTranslate="{{ isEditMode ? 'global.generic.edit' : 'global.generic.create' }}"></span>
                         </button>
                     </div>
                 </div>
diff --git a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/crud/create-tutorial-group/create-tutorial-group.component.html b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/crud/create-tutorial-group/create-tutorial-group.component.html
index 25250488c664..9dd9e8d60e8e 100644
--- a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/crud/create-tutorial-group/create-tutorial-group.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/crud/create-tutorial-group/create-tutorial-group.component.html
@@ -1,5 +1,5 @@
 <jhi-loading-indicator-container [isLoading]="isLoading">
-    <h3>{{ 'artemisApp.pages.createTutorialGroup.title' | artemisTranslate }}</h3>
+    <h3 jhiTranslate="artemisApp.pages.createTutorialGroup.title"></h3>
     @if (course) {
         <jhi-tutorial-group-form [isEditMode]="false" [course]="course" (formSubmitted)="createTutorialGroup($event)" />
     }
diff --git a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/crud/edit-tutorial-group/edit-tutorial-group.component.html b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/crud/edit-tutorial-group/edit-tutorial-group.component.html
index a6e1ba53502d..47c46d6b6a74 100644
--- a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/crud/edit-tutorial-group/edit-tutorial-group.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/crud/edit-tutorial-group/edit-tutorial-group.component.html
@@ -1,5 +1,5 @@
 <jhi-loading-indicator-container [isLoading]="isLoading">
-    <h3>{{ 'artemisApp.pages.editTutorialGroup.title' | artemisTranslate }}</h3>
+    <h3 jhiTranslate="artemisApp.pages.editTutorialGroup.title"></h3>
     @if (course) {
         <jhi-tutorial-group-form [formData]="formData" [course]="course" [isEditMode]="true" (formSubmitted)="updateTutorialGroup($event)" />
     }
diff --git a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/crud/tutorial-group-form/schedule-form/schedule-form.component.html b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/crud/tutorial-group-form/schedule-form/schedule-form.component.html
index 53c16975f8cb..997d0116c9b9 100644
--- a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/crud/tutorial-group-form/schedule-form/schedule-form.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/crud/tutorial-group-form/schedule-form/schedule-form.component.html
@@ -1,38 +1,32 @@
 <ng-container [formGroup]="parentFormGroup">
     <div formGroupName="schedule" style="border: 0">
         <div>
-            <h3>{{ 'artemisApp.forms.scheduleForm.formTitle' | artemisTranslate }}</h3>
+            <h3 jhiTranslate="artemisApp.forms.scheduleForm.formTitle"></h3>
         </div>
         <div>
             <!-- repetition frequency -->
-            <label for="repetitionFrequency">{{ 'artemisApp.forms.scheduleForm.repetitionFrequencyInput.label' | artemisTranslate }}</label>
+            <label for="repetitionFrequency" jhiTranslate="artemisApp.forms.scheduleForm.repetitionFrequencyInput.label"></label>
             <div class="input-group small-input">
                 <input id="repetitionFrequency" type="number" class="form-control" formControlName="repetitionFrequency" />
-                <div class="input-group-text">{{ 'artemisApp.forms.scheduleForm.repetitionFrequencyInput.weeks' | artemisTranslate }}</div>
+                <div class="input-group-text" jhiTranslate="artemisApp.forms.scheduleForm.repetitionFrequencyInput.weeks"></div>
             </div>
             @if (repetitionFrequencyControl?.invalid && (repetitionFrequencyControl?.dirty || repetitionFrequencyControl?.touched)) {
                 <div class="alert alert-danger">
                     @if (repetitionFrequencyControl?.errors?.min) {
-                        <div>
-                            {{ 'artemisApp.forms.scheduleForm.repetitionFrequencyInput.minValidationError' | artemisTranslate: { min: 1 } }}
-                        </div>
+                        <div jhiTranslate="artemisApp.forms.scheduleForm.repetitionFrequencyInput.minValidationError" [translateValues]="{ min: 1 }"></div>
                     }
                     @if (repetitionFrequencyControl?.errors?.max) {
-                        <div>
-                            {{ 'artemisApp.forms.scheduleForm.repetitionFrequencyInput.maxValidationError' | artemisTranslate: { max: 7 } }}
-                        </div>
+                        <div jhiTranslate="artemisApp.forms.scheduleForm.repetitionFrequencyInput.maxValidationError" [translateValues]="{ max: 7 }"></div>
                     }
                     @if (repetitionFrequencyControl?.errors?.required) {
-                        <div>
-                            {{ 'artemisApp.forms.scheduleForm.repetitionFrequencyInput.requiredValidationError' | artemisTranslate }}
-                        </div>
+                        <div jhiTranslate="artemisApp.forms.scheduleForm.repetitionFrequencyInput.requiredValidationError"></div>
                     }
                 </div>
             }
             <!-- weekday -->
             <div>
                 <div>
-                    <label> {{ 'artemisApp.forms.scheduleForm.weekDayInput.label' | artemisTranslate }}</label>
+                    <label jhiTranslate="artemisApp.forms.scheduleForm.weekDayInput.label"></label>
                 </div>
                 @for (weekDay of weekDays; track weekDay) {
                     <input formControlName="dayOfWeek" type="radio" class="btn-check" name="dayOfWeek" id="{{ weekDay.id }}" autocomplete="off" [value]="weekDay.value" checked />
@@ -43,13 +37,13 @@ <h3>{{ 'artemisApp.forms.scheduleForm.formTitle' | artemisTranslate }}</h3>
             <div>
                 <div class="row">
                     <div class="col-auto my-auto">
-                        <span>{{ 'artemisApp.forms.scheduleForm.timeInput.from' | artemisTranslate }}</span>
+                        <span jhiTranslate="artemisApp.forms.scheduleForm.timeInput.from"></span>
                     </div>
                     <div class="col-auto">
                         <ngb-timepicker formControlName="startTime" [hourStep]="1" [minuteStep]="15" />
                     </div>
                     <div class="col-auto my-auto">
-                        <span>{{ 'artemisApp.forms.scheduleForm.timeInput.to' | artemisTranslate }}</span>
+                        <span jhiTranslate="artemisApp.forms.scheduleForm.timeInput.to"></span>
                     </div>
                     <div class="col-auto my-auto">
                         <ngb-timepicker formControlName="endTime" [hourStep]="1" [minuteStep]="15" />
@@ -58,27 +52,21 @@ <h3>{{ 'artemisApp.forms.scheduleForm.formTitle' | artemisTranslate }}</h3>
                 @if (startTimeControl?.invalid && (startTimeControl?.dirty || startTimeControl?.touched)) {
                     <div class="alert alert-danger">
                         @if (startTimeControl?.errors?.required) {
-                            <div>
-                                {{ 'artemisApp.forms.scheduleForm.timeInput.invalidTimeRange' | artemisTranslate }}
-                            </div>
+                            <div jhiTranslate="artemisApp.forms.scheduleForm.timeInput.invalidTimeRange"></div>
                         }
                     </div>
                 }
                 @if (endTimeControl?.invalid && (endTimeControl?.dirty || endTimeControl?.touched)) {
                     <div class="alert alert-danger">
                         @if (endTimeControl?.errors?.required) {
-                            <div>
-                                {{ 'artemisApp.forms.scheduleForm.timeInput.invalidTimeRange' | artemisTranslate }}
-                            </div>
+                            <div jhiTranslate="artemisApp.forms.scheduleForm.timeInput.invalidTimeRange"></div>
                         }
                     </div>
                 }
                 @if (formGroup?.invalid && (formGroup?.dirty || formGroup?.touched)) {
                     <div>
                         @if (formGroup?.errors?.invalidTimeRange) {
-                            <div class="alert alert-danger">
-                                {{ 'artemisApp.forms.scheduleForm.timeInput.invalidTimeRange' | artemisTranslate }}
-                            </div>
+                            <div class="alert alert-danger" jhiTranslate="artemisApp.forms.scheduleForm.timeInput.invalidTimeRange"></div>
                         }
                     </div>
                 }
@@ -87,10 +75,10 @@ <h3>{{ 'artemisApp.forms.scheduleForm.formTitle' | artemisTranslate }}</h3>
         <!-- Location -->
         <div class="form-group">
             @if (parentIsOnlineControl!.value) {
-                <label for="location">{{ 'artemisApp.forms.scheduleForm.locationInput.labelOnline' | artemisTranslate }}</label>
+                <label for="location" jhiTranslate="artemisApp.forms.scheduleForm.locationInput.labelOnline"></label>
             }
             @if (!parentIsOnlineControl!.value) {
-                <label for="location">{{ 'artemisApp.forms.scheduleForm.locationInput.labelOffline' | artemisTranslate }}</label>
+                <label for="location" jhiTranslate="artemisApp.forms.scheduleForm.locationInput.labelOffline"></label>
             }
             <textarea
                 class="form-control"
@@ -107,14 +95,10 @@ <h3>{{ 'artemisApp.forms.scheduleForm.formTitle' | artemisTranslate }}</h3>
             @if (locationControl?.invalid && (locationControl?.dirty || locationControl?.touched)) {
                 <div class="alert alert-danger">
                     @if (locationControl?.errors?.maxlength) {
-                        <div>
-                            {{ 'artemisApp.forms.scheduleForm.locationInput.maxLengthValidationError' | artemisTranslate: { max: '2000' } }}
-                        </div>
+                        <div jhiTranslate="artemisApp.forms.scheduleForm.locationInput.maxLengthValidationError" [translateValues]="{ max: '2000' }"></div>
                     }
                     @if (locationControl?.errors?.required) {
-                        <div>
-                            {{ 'artemisApp.forms.scheduleForm.locationInput.requiredValidationError' | artemisTranslate }}
-                        </div>
+                        <div jhiTranslate="artemisApp.forms.scheduleForm.locationInput.requiredValidationError"></div>
                     }
                 </div>
             }
@@ -122,11 +106,9 @@ <h3>{{ 'artemisApp.forms.scheduleForm.formTitle' | artemisTranslate }}</h3>
         <!-- Period -->
         <div>
             @if (defaultPeriodChanged) {
-                <div class="alert alert-warning" role="alert">
-                    {{ 'artemisApp.forms.scheduleForm.periodInput.periodWarning' | artemisTranslate }}
-                </div>
+                <div class="alert alert-warning" role="alert" jhiTranslate="artemisApp.forms.scheduleForm.periodInput.periodWarning"></div>
             }
-            <label class="form-label" for="period">{{ 'artemisApp.forms.scheduleForm.periodInput.label' | artemisTranslate }}</label>
+            <label class="form-label" for="period" jhiTranslate="artemisApp.forms.scheduleForm.periodInput.label"></label>
             <div class="input-group">
                 <input formControlName="period" [owlDateTime]="period" class="d-none" [selectMode]="'range'" />
                 <input
@@ -146,21 +128,17 @@ <h3>{{ 'artemisApp.forms.scheduleForm.formTitle' | artemisTranslate }}</h3>
             @if (periodControl?.invalid && (periodControl?.dirty || periodControl?.touched)) {
                 <div class="alert alert-danger">
                     @if (periodControl?.errors?.owlRequiredDateTimeRange || periodControl?.errors?.required) {
-                        <div>
-                            {{ 'artemisApp.createConfiguration.periodInput.requiredValidationError' | artemisTranslate }}
-                        </div>
+                        <div jhiTranslate="artemisApp.createConfiguration.periodInput.requiredValidationError"></div>
                     }
                     @if (periodControl?.errors?.owlDateTimeRange) {
-                        <div>
-                            {{ 'artemisApp.forms.scheduleForm.periodInput.invalidRangeError' | artemisTranslate }}
-                        </div>
+                        <div jhiTranslate="artemisApp.forms.scheduleForm.periodInput.invalidRangeError"></div>
                     }
                 </div>
             }
         </div>
         @if (createdSessions.length > 0) {
             <div>
-                <span>{{ 'artemisApp.forms.scheduleForm.sessionCreationInfo' | artemisTranslate }} </span>
+                <span jhiTranslate="artemisApp.forms.scheduleForm.sessionCreationInfo"></span>
                 @for (session of createdSessions; track session) {
                     <span class="badge bg-info m-1"> {{ session | artemisDate: 'long-date' : false : undefined : true }} </span>
                 }
diff --git a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/crud/tutorial-group-form/tutorial-group-form.component.html b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/crud/tutorial-group-form/tutorial-group-form.component.html
index dcd4cfedf033..881abff7acd5 100644
--- a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/crud/tutorial-group-form/tutorial-group-form.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/crud/tutorial-group-form/tutorial-group-form.component.html
@@ -4,7 +4,7 @@
             <form [formGroup]="form" (ngSubmit)="submitForm()">
                 <!-- Title -->
                 <div class="form-group">
-                    <label class="required" for="title">{{ 'artemisApp.forms.tutorialGroupForm.titleInput.label' | artemisTranslate }}</label>
+                    <label class="required" for="title" jhiTranslate="artemisApp.forms.tutorialGroupForm.titleInput.label"></label>
                     <input
                         type="text"
                         class="form-control"
@@ -15,19 +15,13 @@
                     @if (titleControl?.invalid && (titleControl?.dirty || titleControl?.touched)) {
                         <div class="alert alert-danger">
                             @if (titleControl?.errors?.required) {
-                                <div>
-                                    {{ 'artemisApp.forms.tutorialGroupForm.titleInput.requiredValidationError' | artemisTranslate }}
-                                </div>
+                                <div jhiTranslate="artemisApp.forms.tutorialGroupForm.titleInput.requiredValidationError"></div>
                             }
                             @if (titleControl?.errors?.maxlength) {
-                                <div>
-                                    {{ 'artemisApp.forms.tutorialGroupForm.titleInput.maxLengthValidationError' | artemisTranslate: { max: '19' } }}
-                                </div>
+                                <div jhiTranslate="artemisApp.forms.tutorialGroupForm.titleInput.maxLengthValidationError" [translateValues]="{ max: '19' }"></div>
                             }
                             @if (!titleControl?.errors?.required && !titleControl?.errors?.maxlength && titleControl?.errors?.pattern) {
-                                <div>
-                                    {{ 'artemisApp.forms.tutorialGroupForm.titleInput.regexValidationError' | artemisTranslate }}
-                                </div>
+                                <div jhiTranslate="artemisApp.forms.tutorialGroupForm.titleInput.regexValidationError"></div>
                             }
                         </div>
                     }
@@ -35,27 +29,31 @@
                 @if (updateTutorialGroupChannelNameControl) {
                     <div class="form-check" [hidden]="!showUpdateChannelNameCheckbox">
                         <input class="form-check-input" type="checkbox" formControlName="updateTutorialGroupChannelName" id="updateTutorialGroupChannelNameControl" />
-                        <label class="form-check-label" for="updateTutorialGroupChannelNameControl">
-                            {{ 'artemisApp.forms.tutorialGroupForm.updateChannelNameInput.label' | artemisTranslate }}
-                        </label>
-                        <small id="updateChannelNameHelp" class="form-text text-body-secondary d-block">{{
-                            'artemisApp.forms.tutorialGroupForm.updateChannelNameInput.explanation' | artemisTranslate
-                        }}</small>
+                        <label
+                            class="form-check-label"
+                            for="updateTutorialGroupChannelNameControl"
+                            jhiTranslate="artemisApp.forms.tutorialGroupForm.updateChannelNameInput.label"
+                        ></label>
+                        <small
+                            id="updateChannelNameHelp"
+                            class="form-text text-body-secondary d-block"
+                            jhiTranslate="artemisApp.forms.tutorialGroupForm.updateChannelNameInput.explanation"
+                        ></small>
                     </div>
                 }
                 <!--Online / Offline -->
                 <div class="form-group">
-                    <label class="d-block">{{ 'artemisApp.forms.tutorialGroupForm.isOnlineInput.label' | artemisTranslate }}</label>
+                    <label class="d-block" jhiTranslate="artemisApp.forms.tutorialGroupForm.isOnlineInput.label"></label>
                     <div class="btn-group" role="group">
                         <input formControlName="isOnline" type="radio" class="btn-check" id="online" autocomplete="off" checked [value]="true" />
-                        <label class="btn btn-outline-primary" for="online">{{ 'artemisApp.generic.online' | artemisTranslate }}</label>
+                        <label class="btn btn-outline-primary" for="online" jhiTranslate="artemisApp.generic.online"></label>
                         <input formControlName="isOnline" type="radio" class="btn-check" id="offline" autocomplete="off" [value]="false" />
-                        <label class="btn btn-outline-primary" for="offline">{{ 'artemisApp.generic.offline' | artemisTranslate }}</label>
+                        <label class="btn btn-outline-primary" for="offline" jhiTranslate="artemisApp.generic.offline"></label>
                     </div>
                 </div>
                 <!-- Teaching Assistant -->
                 <div class="form-group">
-                    <label class="required" for="teachingAssistant">{{ 'artemisApp.forms.tutorialGroupForm.teachingAssistantInput.label' | artemisTranslate }}</label>
+                    <label class="required" for="teachingAssistant" jhiTranslate="artemisApp.forms.tutorialGroupForm.teachingAssistantInput.label"></label>
                     <input
                         id="teachingAssistant"
                         type="text"
@@ -70,20 +68,18 @@
                         (focus)="taFocus$.next($any($event).target.value)"
                         (click)="taClick$.next($any($event).target.value)"
                     />
-                    <small id="taHelp" class="form-text text-body-secondary">{{ 'artemisApp.forms.tutorialGroupForm.teachingAssistantInput.taHelp' | artemisTranslate }}</small>
+                    <small id="taHelp" class="form-text text-body-secondary" jhiTranslate="artemisApp.forms.tutorialGroupForm.teachingAssistantInput.taHelp"></small>
                     @if (teachingAssistantControl?.invalid && (teachingAssistantControl?.dirty || teachingAssistantControl?.touched)) {
                         <div class="alert alert-danger">
                             @if (teachingAssistantControl?.errors?.required) {
-                                <div>
-                                    {{ 'artemisApp.forms.tutorialGroupForm.teachingAssistantInput.requiredValidationError' | artemisTranslate }}
-                                </div>
+                                <div jhiTranslate="artemisApp.forms.tutorialGroupForm.teachingAssistantInput.requiredValidationError"></div>
                             }
                         </div>
                     }
                 </div>
                 <!-- Campus -->
                 <div class="form-group">
-                    <label for="campus">{{ 'artemisApp.forms.tutorialGroupForm.campusInput.label' | artemisTranslate }}</label>
+                    <label for="campus" jhiTranslate="artemisApp.forms.tutorialGroupForm.campusInput.label"></label>
                     <input
                         id="campus"
                         type="text"
@@ -98,13 +94,11 @@
                         (focus)="campusFocus$.next($any($event).target.value)"
                         (click)="campusClick$.next($any($event).target.value)"
                     />
-                    <small id="campusHelp" class="form-text text-body-secondary">{{ 'artemisApp.forms.tutorialGroupForm.campusInput.campusHelp' | artemisTranslate }}</small>
+                    <small id="campusHelp" class="form-text text-body-secondary" jhiTranslate="artemisApp.forms.tutorialGroupForm.campusInput.campusHelp"></small>
                     @if (campusControl?.invalid && (campusControl?.dirty || campusControl?.touched)) {
                         <div class="alert alert-danger">
                             @if (campusControl?.errors?.max) {
-                                <div>
-                                    {{ 'artemisApp.forms.tutorialGroupForm.campusInput.maxLengthValidationError' | artemisTranslate: { max: '255' } }}
-                                </div>
+                                <div jhiTranslate="artemisApp.forms.tutorialGroupForm.campusInput.maxLengthValidationError" [translateValues]="{ max: '255' }"></div>
                             }
                         </div>
                     }
@@ -112,16 +106,16 @@
                 <!-- Capacity -->
                 <div class="row">
                     <div class="col-auto">
-                        <label for="capacity">{{ 'artemisApp.forms.tutorialGroupForm.capacityInput.label' | artemisTranslate }}</label>
+                        <label for="capacity" jhiTranslate="artemisApp.forms.tutorialGroupForm.capacityInput.label"></label>
                         <div class="input-group">
                             <input id="capacity" type="number" class="form-control" formControlName="capacity" />
-                            <div class="input-group-text">{{ 'artemisApp.forms.tutorialGroupForm.capacityInput.unit' | artemisTranslate }}</div>
+                            <div class="input-group-text" jhiTranslate="artemisApp.forms.tutorialGroupForm.capacityInput.unit"></div>
                         </div>
                     </div>
                 </div>
                 <!-- Language -->
                 <div class="form-group">
-                    <label for="language">{{ 'artemisApp.forms.tutorialGroupForm.languageInput.label' | artemisTranslate }}</label>
+                    <label for="language" jhiTranslate="artemisApp.forms.tutorialGroupForm.languageInput.label"></label>
                     <input
                         id="language"
                         type="text"
@@ -136,37 +130,31 @@
                         (focus)="languageFocus$.next($any($event).target.value)"
                         (click)="languageClick$.next($any($event).target.value)"
                     />
-                    <small id="languageHelp" class="form-text text-body-secondary">{{ 'artemisApp.forms.tutorialGroupForm.languageInput.languageHelp' | artemisTranslate }}</small>
+                    <small id="languageHelp" class="form-text text-body-secondary" jhiTranslate="artemisApp.forms.tutorialGroupForm.languageInput.languageHelp"></small>
                 </div>
                 <!-- Validation Errors for the smaller input from above-->
                 <div class="form-group">
                     @if (capacityControl?.invalid && (capacityControl?.dirty || capacityControl?.touched)) {
                         <div class="alert alert-danger">
                             @if (capacityControl?.errors?.min) {
-                                <div>
-                                    {{ 'artemisApp.forms.tutorialGroupForm.capacityInput.minValidationError' | artemisTranslate }}
-                                </div>
+                                <div jhiTranslate="artemisApp.forms.tutorialGroupForm.capacityInput.minValidationError"></div>
                             }
                         </div>
                     }
                     @if (languageControl?.invalid && (languageControl?.dirty || languageControl?.touched)) {
                         <div class="alert alert-danger">
                             @if (languageControl?.errors?.max) {
-                                <div>
-                                    {{ 'artemisApp.forms.tutorialGroupForm.languageInput.maxLengthValidationError' | artemisTranslate: { max: '255' } }}
-                                </div>
+                                <div jhiTranslate="artemisApp.forms.tutorialGroupForm.languageInput.maxLengthValidationError" [translateValues]="{ max: '255' }"></div>
                             }
                             @if (languageControl?.errors?.required) {
-                                <div>
-                                    {{ 'artemisApp.forms.tutorialGroupForm.languageInput.requiredValidationError' | artemisTranslate }}
-                                </div>
+                                <div jhiTranslate="artemisApp.forms.tutorialGroupForm.languageInput.requiredValidationError"></div>
                             }
                         </div>
                     }
                 </div>
                 <!-- Additional Information -->
                 <div class="form-group">
-                    <label class="d-block" for="additionalInfo">{{ 'artemisApp.forms.tutorialGroupForm.additionalInformationInput.label' | artemisTranslate }}</label>
+                    <label class="d-block" for="additionalInfo" jhiTranslate="artemisApp.forms.tutorialGroupForm.additionalInformationInput.label"></label>
                     <small id="additionalInfoHelp" class="form-text mb-1 text-body-secondary">
                         <a href="https://guides.github.com/features/mastering-markdown/"> GitHub Markdown Guide</a>
                     </small>
@@ -176,14 +164,10 @@
                 <hr />
                 <div class="form-check">
                     <input class="form-check-input" type="checkbox" [(ngModel)]="configureSchedule" id="configureSchedule" [ngModelOptions]="{ standalone: true }" />
-                    <label class="form-check-label" for="configureSchedule">
-                        {{ 'artemisApp.forms.scheduleForm.configureRecurringSchedule' | artemisTranslate }}
-                    </label>
+                    <label class="form-check-label" for="configureSchedule" jhiTranslate="artemisApp.forms.scheduleForm.configureRecurringSchedule"></label>
                 </div>
                 @if (showScheduledChangedWarning) {
-                    <div class="alert alert-danger" role="alert">
-                        {{ 'artemisApp.forms.scheduleForm.scheduleChangeWarning' | artemisTranslate }}
-                    </div>
+                    <div class="alert alert-danger" role="alert" jhiTranslate="artemisApp.forms.scheduleForm.scheduleChangeWarning"></div>
                 }
                 <hr />
                 <jhi-schedule-form [hidden]="!configureSchedule" #scheduleForm [parentFormGroup]="form" [course]="course" />
@@ -191,7 +175,7 @@
                 <!-- Optional Notification Message -->
                 @if (notificationControl) {
                     <div class="form-group border border-info rounded p-3">
-                        <label for="notificationText">{{ 'artemisApp.forms.tutorialGroupForm.notificationInput.label' | artemisTranslate }}</label>
+                        <label for="notificationText" jhiTranslate="artemisApp.forms.tutorialGroupForm.notificationInput.label"></label>
                         <textarea
                             class="form-control"
                             id="notificationText"
@@ -199,15 +183,11 @@
                             [placeholder]="'artemisApp.forms.tutorialGroupForm.notificationInput.placeholder' | artemisTranslate"
                             rows="3"
                         ></textarea>
-                        <small id="notificationHelp" class="form-text text-body-secondary">{{
-                            'artemisApp.forms.tutorialGroupForm.notificationInput.help' | artemisTranslate
-                        }}</small>
+                        <small id="notificationHelp" class="form-text text-body-secondary" jhiTranslate="artemisApp.forms.tutorialGroupForm.notificationInput.help"></small>
                         @if (notificationControl?.invalid && (notificationControl?.dirty || notificationControl?.touched)) {
                             <div class="alert alert-danger">
                                 @if (notificationControl?.errors?.maxlength) {
-                                    <div>
-                                        {{ 'artemisApp.forms.tutorialGroupForm.notificationInput.maxLengthValidationError' | artemisTranslate: { max: '1000' } }}
-                                    </div>
+                                    <div jhiTranslate="artemisApp.forms.tutorialGroupForm.notificationInput.maxLengthValidationError" [translateValues]="{ max: '1000' }"></div>
                                 }
                             </div>
                         }
diff --git a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/tutorial-groups-management/tutorial-group-row-buttons/tutorial-group-row-buttons.component.html b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/tutorial-groups-management/tutorial-group-row-buttons/tutorial-group-row-buttons.component.html
index a052ec715cf5..a8b564078cf0 100644
--- a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/tutorial-groups-management/tutorial-group-row-buttons/tutorial-group-row-buttons.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/tutorial-groups-management/tutorial-group-row-buttons/tutorial-group-row-buttons.component.html
@@ -4,21 +4,21 @@
         @if (isAtLeastInstructor || tutorialGroup.isUserTutor) {
             <button type="button" [id]="'sessions-' + tutorialGroup.id" (click)="openSessionDialog($event)" class="btn btn-primary btn-sm me-1">
                 <fa-icon [icon]="faCalendar" />
-                <span class="d-none d-md-inline">{{ 'artemisApp.pages.tutorialGroupsManagement.rowButtons.sessions' | artemisTranslate }}</span>
+                <span class="d-none d-md-inline" jhiTranslate="artemisApp.pages.tutorialGroupsManagement.rowButtons.sessions"></span>
             </button>
         }
         <!-- Registered Students -->
         @if (isAtLeastInstructor || tutorialGroup.isUserTutor) {
             <button [id]="'registrations-' + tutorialGroup.id" class="btn btn-primary btn-sm me-1" (click)="openRegistrationDialog($event)">
                 <fa-icon [icon]="faUsers" />
-                <span class="d-none d-md-inline">{{ 'artemisApp.pages.registeredStudents.title' | artemisTranslate }}</span>
+                <span class="d-none d-md-inline" jhiTranslate="artemisApp.pages.registeredStudents.title"></span>
             </button>
         }
         <!-- Edit -->
         @if (isAtLeastInstructor) {
             <a [id]="'edit-' + tutorialGroup.id" [routerLink]="['/course-management', course.id!, 'tutorial-groups', tutorialGroup.id, 'edit']" class="btn btn-warning btn-sm me-1">
                 <fa-icon [icon]="faWrench" />
-                <span class="d-none d-md-inline">{{ 'entity.action.edit' | artemisTranslate }}</span>
+                <span class="d-none d-md-inline" jhiTranslate="entity.action.edit"></span>
             </a>
         }
         <!-- Delete -->
diff --git a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/tutorial-groups-management/tutorial-groups-course-information/tutorial-groups-course-information.component.html b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/tutorial-groups-management/tutorial-groups-course-information/tutorial-groups-course-information.component.html
index 7052e8afe23a..538b169cad14 100644
--- a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/tutorial-groups-management/tutorial-groups-course-information/tutorial-groups-course-information.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/tutorial-groups-management/tutorial-groups-course-information/tutorial-groups-course-information.component.html
@@ -1,10 +1,10 @@
 <jhi-side-panel [panelHeader]="'artemisApp.pages.courseTutorialGroupOverview.sidePanel.header' | artemisTranslate">
     <div class="row mb-1">
-        <div class="col-8">{{ 'artemisApp.pages.courseTutorialGroupOverview.sidePanel.numberOfGroups' | artemisTranslate }}</div>
+        <div class="col-8" jhiTranslate="artemisApp.pages.courseTutorialGroupOverview.sidePanel.numberOfGroups"></div>
         <div class="col-4">{{ tutorialGroups ? tutorialGroups.length : 0 }}</div>
     </div>
     <div class="row mb-1">
-        <div class="col-8">{{ 'artemisApp.pages.courseTutorialGroupOverview.sidePanel.numberOfRegistrations' | artemisTranslate }}</div>
+        <div class="col-8" jhiTranslate="artemisApp.pages.courseTutorialGroupOverview.sidePanel.numberOfRegistrations"></div>
         <div class="col-4">{{ totalNumberOfRegistrations }}</div>
     </div>
 </jhi-side-panel>
diff --git a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/tutorial-groups-management/tutorial-groups-import-button/tutorial-groups-import-button.component.html b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/tutorial-groups-management/tutorial-groups-import-button/tutorial-groups-import-button.component.html
index 2294f0c94397..ad2e2fa9e64f 100644
--- a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/tutorial-groups-management/tutorial-groups-import-button/tutorial-groups-import-button.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/tutorial-groups-management/tutorial-groups-import-button/tutorial-groups-import-button.component.html
@@ -1,13 +1,13 @@
 <button id="importDialogButton" (click)="openTutorialGroupImportDialog($event)" ngbDropdownItem>
-    <span>{{ 'artemisApp.tutorialGroupImportDialog.importButton' | artemisTranslate }}</span>
+    <span jhiTranslate="artemisApp.tutorialGroupImportDialog.importButton"></span>
 </button>
 
 <ng-template #warning let-warning>
     <div class="modal-header">
-        <h4 class="modal-title">{{ 'artemisApp.tutorialGroupImportDialog.warning' | artemisTranslate }}</h4>
+        <h4 class="modal-title" jhiTranslate="artemisApp.tutorialGroupImportDialog.warning"></h4>
     </div>
     <div class="modal-body">
-        <p>{{ 'artemisApp.tutorialGroupImportDialog.finishedWarning' | artemisTranslate }}</p>
+        <p jhiTranslate="artemisApp.tutorialGroupImportDialog.finishedWarning"></p>
     </div>
     <div class="modal-footer">
         <button type="button" class="btn btn-light" (click)="warning.close()">Ok</button>
diff --git a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/tutorial-groups-management/tutorial-groups-import-dialog/tutorial-groups-registration-import-dialog.component.html b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/tutorial-groups-management/tutorial-groups-import-dialog/tutorial-groups-registration-import-dialog.component.html
index de2055dd82ab..cf676a9cbe75 100644
--- a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/tutorial-groups-management/tutorial-groups-import-dialog/tutorial-groups-registration-import-dialog.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/tutorial-groups-management/tutorial-groups-import-dialog/tutorial-groups-registration-import-dialog.component.html
@@ -264,9 +264,10 @@ <h4 class="modal-title">
                     @if (statusHeaderControl?.invalid && (statusHeaderControl?.dirty || statusHeaderControl?.touched)) {
                         <div class="alert alert-danger">
                             @if (statusHeaderControl?.errors?.maxlength) {
-                                <div>
-                                    {{ 'artemisApp.tutorialGroupImportDialog.fixedPlaceForm.statusHeaderInput.maxLengthValidationError' | artemisTranslate: { max: '255' } }}
-                                </div>
+                                <div
+                                    jhiTranslate="artemisApp.tutorialGroupImportDialog.fixedPlaceForm.statusHeaderInput.maxLengthValidationError"
+                                    [translateValues]="{ max: '255' }"
+                                ></div>
                             }
                         </div>
                     }
@@ -284,9 +285,10 @@ <h4 class="modal-title">
                     @if (fixedPlaceValueControl?.invalid && (fixedPlaceValueControl?.dirty || fixedPlaceValueControl?.touched)) {
                         <div class="alert alert-danger">
                             @if (fixedPlaceValueControl?.errors?.maxlength) {
-                                <div>
-                                    {{ 'artemisApp.tutorialGroupImportDialog.fixedPlaceForm.fixedPlaceValueInput.maxLengthValidationError' | artemisTranslate: { max: '255' } }}
-                                </div>
+                                <div
+                                    jhiTranslate="artemisApp.tutorialGroupImportDialog.fixedPlaceForm.fixedPlaceValueInput.maxLengthValidationError"
+                                    [translateValues]="{ max: '255' }"
+                                ></div>
                             }
                         </div>
                     }
@@ -429,14 +431,17 @@ <h4 class="modal-title">
             <div class="flex-shrink-0 me-2 d-flex">
                 @if (!isImportDone) {
                     <div>
-                        <strong>{{ 'artemisApp.tutorialGroupImportDialog.table.footer.total' | artemisTranslate: { count: allRegistrations.length } }}</strong>
+                        <strong jhiTranslate="artemisApp.tutorialGroupImportDialog.table.footer.total" [translateValues]="{ count: allRegistrations.length }"></strong>
                     </div>
                 } @else {
                     <div>
-                        <strong>{{ 'artemisApp.tutorialGroupImportDialog.table.footer.imported' | artemisTranslate: { count: numberOfImportedRegistrations } }}</strong>
+                        <strong jhiTranslate="artemisApp.tutorialGroupImportDialog.table.footer.imported" [translateValues]="{ count: numberOfImportedRegistrations }"></strong>
                     </div>
                     <div class="ms-2">
-                        <strong>{{ 'artemisApp.tutorialGroupImportDialog.table.footer.notImported' | artemisTranslate: { count: numberOfNotImportedRegistration } }}</strong>
+                        <strong
+                            jhiTranslate="artemisApp.tutorialGroupImportDialog.table.footer.notImported"
+                            [translateValues]="{ count: numberOfNotImportedRegistration }"
+                        ></strong>
                     </div>
                 }
             </div>
@@ -450,7 +455,7 @@ <h4 class="modal-title">
             @if (!isImportDone) {
                 <button type="submit" id="import" name="importButton" class="btn btn-primary" [disabled]="isSubmitDisabled" (click)="import()">
                     <fa-icon [icon]="faFileImport" class="me-2" />
-                    <span>{{ 'entity.action.to-import' | artemisTranslate }}</span>
+                    <span jhiTranslate="entity.action.to-import"></span>
                     <fa-icon class="ms-1" [hidden]="!isImporting" animation="spin" [icon]="faCircleNotch" />
                 </button>
             } @else {
diff --git a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/tutorial-groups-management/tutorial-groups-management.component.html b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/tutorial-groups-management/tutorial-groups-management.component.html
index 07bb83d83ec0..989af8120b65 100644
--- a/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/tutorial-groups-management/tutorial-groups-management.component.html
+++ b/src/main/webapp/app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/tutorial-groups-management/tutorial-groups-management.component.html
@@ -15,17 +15,15 @@ <h4>
                                 [routerLink]="['/course-management', courseId, 'tutorial-groups', 'configuration', course!.tutorialGroupsConfiguration!.id, 'tutorial-free-days']"
                             >
                                 <fa-icon [icon]="faUmbrellaBeach" />
-                                <span class="d-none d-md-inline">{{ 'artemisApp.pages.tutorialGroupsManagement.freePeriodsButtons' | artemisTranslate }}</span>
+                                <span class="d-none d-md-inline" jhiTranslate="artemisApp.pages.tutorialGroupsManagement.freePeriodsButtons"></span>
                             </a>
                         }
                         <a class="btn btn-primary" [routerLink]="['/course-management', courseId, 'tutorial-groups', 'create']">
                             <fa-icon [icon]="faPlus" />
-                            <span class="d-none d-md-inline">{{ 'artemisApp.pages.tutorialGroupsManagement.creatTutorialGroupButton' | artemisTranslate }}</span>
+                            <span class="d-none d-md-inline" jhiTranslate="artemisApp.pages.tutorialGroupsManagement.creatTutorialGroupButton"></span>
                         </a>
                         <div ngbDropdown class="d-inline-block">
-                            <button type="button" class="btn btn-primary" id="dropdownBasic1" ngbDropdownToggle>
-                                {{ 'artemisApp.generic.more' | artemisTranslate }}
-                            </button>
+                            <button type="button" class="btn btn-primary" id="dropdownBasic1" ngbDropdownToggle jhiTranslate="artemisApp.generic.more"></button>
                             <div ngbDropdownMenu>
                                 @if (course?.tutorialGroupsConfiguration) {
                                     <a
@@ -33,7 +31,7 @@ <h4>
                                         class="btn"
                                         [routerLink]="['/course-management', courseId, 'tutorial-groups', 'configuration', course!.tutorialGroupsConfiguration!.id, 'edit']"
                                     >
-                                        <span>{{ 'artemisApp.pages.tutorialGroupsManagement.editConfigurationButton' | artemisTranslate }}</span>
+                                        <span jhiTranslate="artemisApp.pages.tutorialGroupsManagement.editConfigurationButton"></span>
                                     </a>
                                 }
                                 <jhi-tutorial-groups-import-button
diff --git a/src/main/webapp/app/exam/exam-scores/exam-scores-average-scores-graph.component.html b/src/main/webapp/app/exam/exam-scores/exam-scores-average-scores-graph.component.html
index 47e15fab1953..35ab48c1854a 100644
--- a/src/main/webapp/app/exam/exam-scores/exam-scores-average-scores-graph.component.html
+++ b/src/main/webapp/app/exam/exam-scores/exam-scores-average-scores-graph.component.html
@@ -1,6 +1,6 @@
 <div class="row d-flex justify-content-center mb-1">
     <div #containerRef class="col-md-8 col-11 align-items-center px-0">
-        <h6 class="text-center">{{ 'artemisApp.examScores.exerciseGroupTitle' | artemisTranslate: { groupTitle: this.averageScores.title } }}</h6>
+        <h6 class="text-center" jhiTranslate="artemisApp.examScores.exerciseGroupTitle" [translateValues]="{ groupTitle: this.averageScores.title }"></h6>
         <ngx-charts-bar-horizontal
             [roundEdges]="false"
             [view]="[containerRef.offsetWidth, 100]"
diff --git a/src/main/webapp/app/exam/exam-scores/exam-scores.component.html b/src/main/webapp/app/exam/exam-scores/exam-scores.component.html
index 00e0d35e6eae..2fe2e07c3e3a 100644
--- a/src/main/webapp/app/exam/exam-scores/exam-scores.component.html
+++ b/src/main/webapp/app/exam/exam-scores/exam-scores.component.html
@@ -11,12 +11,12 @@
             @if (!exerciseGroups) {
                 <div class="alert alert-warning">
                     <fa-icon [icon]="faExclamationTriangle" />
-                    <span>{{ 'artemisApp.examScores.noExerciseGroupAvailable' | artemisTranslate }}</span>
+                    <span jhiTranslate="artemisApp.examScores.noExerciseGroupAvailable"></span>
                 </div>
             }
             @if (!studentResults) {
                 <div class="alert alert-info">
-                    <span>{{ 'artemisApp.examScores.noStudentResultAvailable' | artemisTranslate }}</span>
+                    <span jhiTranslate="artemisApp.examScores.noStudentResultAvailable"></span>
                 </div>
             }
         </div>
@@ -58,7 +58,7 @@ <h4>
                         [checked]="filterForSubmittedExams"
                         (change)="toggleFilterForSubmittedExam()"
                     />
-                    <label for="toggleFilterForSubmittedExam" class="form-check-label">{{ 'artemisApp.examScores.filterForSubmittedExams' | artemisTranslate }}</label>
+                    <label for="toggleFilterForSubmittedExam" class="form-check-label" jhiTranslate="artemisApp.examScores.filterForSubmittedExams"></label>
                 </div>
                 <div class="form-check form-check-inline">
                     <input
@@ -68,7 +68,7 @@ <h4>
                         [checked]="filterForNonEmptySubmissions"
                         (change)="toggleFilterForNonEmptySubmission()"
                     />
-                    <label for="toggleFilterForNonEmptySubmission" class="form-check-label">{{ 'artemisApp.examScores.filterForNonEmptySubmissions' | artemisTranslate }}</label>
+                    <label for="toggleFilterForNonEmptySubmission" class="form-check-label" jhiTranslate="artemisApp.examScores.filterForNonEmptySubmissions"></label>
                 </div>
             </div>
             <!-- Exam Point Statistics -->
@@ -78,24 +78,16 @@ <h4>
                         <tr>
                             <th></th>
                             @if (gradingScaleExists && !isBonus) {
-                                <th colspan="3">
-                                    {{ 'artemisApp.examScores.secondCorrectionColumn' | artemisTranslate }}
-                                </th>
+                                <th colspan="3" jhiTranslate="artemisApp.examScores.secondCorrectionColumn"></th>
                             }
                             @if (gradingScaleExists && !isBonus) {
-                                <th colspan="3" style="border-left: 3px solid grey">
-                                    {{ 'artemisApp.examScores.firstCorrectionColumn' | artemisTranslate }}
-                                </th>
+                                <th colspan="3" style="border-left: 3px solid grey" jhiTranslate="artemisApp.examScores.firstCorrectionColumn"></th>
                             }
                             @if (!gradingScaleExists || isBonus) {
-                                <th colspan="2">
-                                    {{ 'artemisApp.examScores.secondCorrectionColumn' | artemisTranslate }}
-                                </th>
+                                <th colspan="2" jhiTranslate="artemisApp.examScores.secondCorrectionColumn"></th>
                             }
                             @if (!gradingScaleExists || isBonus) {
-                                <th colspan="2" style="border-left: 3px solid grey">
-                                    {{ 'artemisApp.examScores.firstCorrectionColumn' | artemisTranslate }}
-                                </th>
+                                <th colspan="2" style="border-left: 3px solid grey" jhiTranslate="artemisApp.examScores.firstCorrectionColumn"></th>
                             }
                         </tr>
                     </thead>
@@ -104,36 +96,24 @@ <h4>
                     <tr>
                         <th></th>
                         @if (gradingScaleExists && !isBonus) {
-                            <th>
-                                {{ 'artemisApp.examScores.passedColumn' | artemisTranslate }}
-                            </th>
+                            <th jhiTranslate="artemisApp.examScores.passedColumn"></th>
                         }
-                        <th>
-                            {{ 'artemisApp.examScores.submittedColumn' | artemisTranslate }}
-                        </th>
-                        <th>
-                            {{ 'artemisApp.examScores.totalColumn' | artemisTranslate }}
-                        </th>
+                        <th jhiTranslate="artemisApp.examScores.submittedColumn"></th>
+                        <th jhiTranslate="artemisApp.examScores.totalColumn"></th>
                         @if (hasSecondCorrectionAndStarted && gradingScaleExists && !isBonus) {
-                            <th style="border-left: 3px solid grey">
-                                {{ 'artemisApp.examScores.passedColumn' | artemisTranslate }}
-                            </th>
+                            <th style="border-left: 3px solid grey" jhiTranslate="artemisApp.examScores.passedColumn"></th>
                         }
                         @if (hasSecondCorrectionAndStarted) {
-                            <th [ngStyle]="!gradingScaleExists || isBonus ? { 'border-left': '3px solid grey' } : {}">
-                                {{ 'artemisApp.examScores.submittedColumn' | artemisTranslate }}
-                            </th>
+                            <th [ngStyle]="!gradingScaleExists || isBonus ? { 'border-left': '3px solid grey' } : {}" jhiTranslate="artemisApp.examScores.submittedColumn"></th>
                         }
                         @if (hasSecondCorrectionAndStarted) {
-                            <th>
-                                {{ 'artemisApp.examScores.totalColumn' | artemisTranslate }}
-                            </th>
+                            <th jhiTranslate="artemisApp.examScores.totalColumn"></th>
                         }
                     </tr>
                 </thead>
                 <tbody>
                     <tr>
-                        <th scope="row">{{ 'artemisApp.examScores.noOfExams' | artemisTranslate }}</th>
+                        <th scope="row" jhiTranslate="artemisApp.examScores.noOfExams"></th>
                         @if (gradingScaleExists && !isBonus) {
                             <td>
                                 {{ aggregatedExamResults.noOfExamsFilteredForPassed }}
@@ -158,7 +138,7 @@ <h4>
                         }
                     </tr>
                     <tr>
-                        <th scope="row">{{ 'artemisApp.examScores.averagePointsColumn' | artemisTranslate }}</th>
+                        <th scope="row" jhiTranslate="artemisApp.examScores.averagePointsColumn"></th>
                         @if (gradingScaleExists && !isBonus) {
                             <td>
                                 {{ aggregatedExamResults.meanPointsPassed !== null ? roundAndPerformLocalConversion(aggregatedExamResults.meanPointsPassed) : '-' }}
@@ -200,9 +180,7 @@ <h4>
                     </tr>
                     @if (gradingScaleExists) {
                         <tr>
-                            <th scope="row">
-                                {{ isBonus ? ('artemisApp.examScores.averageBonusColumn' | artemisTranslate) : ('artemisApp.examScores.averageGradeColumn' | artemisTranslate) }}
-                            </th>
+                            <th scope="row" jhiTranslate="{{ isBonus ? 'artemisApp.examScores.averageBonusColumn' : 'artemisApp.examScores.averageGradeColumn' }}"></th>
                             @if (!isBonus) {
                                 <td>{{ aggregatedExamResults.meanGradePassed !== null ? aggregatedExamResults.meanGradePassed : '-' }}</td>
                             }
@@ -226,7 +204,7 @@ <h4>
                         </tr>
                     }
                     <tr>
-                        <th scope="row">{{ 'artemisApp.examScores.medianColumn' | artemisTranslate }}</th>
+                        <th scope="row" jhiTranslate="artemisApp.examScores.medianColumn"></th>
                         @if (gradingScaleExists && !isBonus) {
                             <td>
                                 {{ aggregatedExamResults.medianPassed !== null ? roundAndPerformLocalConversion(aggregatedExamResults.medianPassed) : '-' }}
@@ -272,9 +250,7 @@ <h4>
                     </tr>
                     @if (gradingScaleExists) {
                         <tr>
-                            <th scope="row">
-                                {{ isBonus ? ('artemisApp.examScores.medianBonusColumn' | artemisTranslate) : ('artemisApp.examScores.medianGradeColumn' | artemisTranslate) }}
-                            </th>
+                            <th scope="row" jhiTranslate="{{ isBonus ? 'artemisApp.examScores.medianBonusColumn' : 'artemisApp.examScores.medianGradeColumn' }}"></th>
                             @if (!isBonus) {
                                 <td>{{ aggregatedExamResults.medianGradePassed !== null ? aggregatedExamResults.medianGradePassed : '-' }}</td>
                             }
@@ -298,7 +274,7 @@ <h4>
                         </tr>
                     }
                     <tr>
-                        <th scope="row">{{ 'artemisApp.examScores.standardDeviationColumn' | artemisTranslate }}</th>
+                        <th scope="row" jhiTranslate="artemisApp.examScores.standardDeviationColumn"></th>
                         @if (gradingScaleExists && !isBonus) {
                             <td>
                                 {{ aggregatedExamResults.standardDeviationPassed !== null ? roundAndPerformLocalConversion(aggregatedExamResults.standardDeviationPassed) : '-' }}
@@ -330,7 +306,7 @@ <h4>
                     </tr>
                     @if (gradingScaleExists && hasNumericGrades) {
                         <tr>
-                            <th scope="row">{{ 'artemisApp.examScores.standardGradeDeviationColumn' | artemisTranslate }}</th>
+                            <th scope="row" jhiTranslate="artemisApp.examScores.standardGradeDeviationColumn"></th>
                             @if (!isBonus) {
                                 <td>
                                     {{
@@ -373,30 +349,30 @@ <h4>
                 @if (gradingScaleExists && this.aggregatedExamResults.medianRelativePassed !== null) {
                     <div class="form-check">
                         <input id="toggleMedianPassed" class="form-check-input" type="checkbox" [checked]="showPassedMedian" (change)="toggleMedian(medianType.PASSED)" />
-                        <label for="toggleMedianPassed" class="form-check-label">
-                            {{
-                                'artemisApp.examScores.highlightPassedMedian'
-                                    | artemisTranslate
-                                        : {
-                                              median: this.aggregatedExamResults.medianRelativePassed
-                                                  ? roundScoreSpecifiedByCourseSettings(this.aggregatedExamResults.medianRelativePassed, course)
-                                                  : 0,
-                                          }
-                            }}
-                        </label>
+                        <label
+                            for="toggleMedianPassed"
+                            class="form-check-label"
+                            jhiTranslate="artemisApp.examScores.highlightPassedMedian"
+                            [translateValues]="{
+                                median: this.aggregatedExamResults.medianRelativePassed
+                                    ? roundScoreSpecifiedByCourseSettings(this.aggregatedExamResults.medianRelativePassed, course)
+                                    : 0,
+                            }"
+                        ></label>
                     </div>
                 }
                 <div class="form-check">
                     <input id="toggleMedianOverall" class="form-check-input" type="checkbox" [checked]="showOverallMedian" (change)="toggleMedian(overallChartMedianType)" />
-                    <label for="toggleMedianOverall" class="form-check-label">
-                        {{ 'artemisApp.examScores.highlightOverallMedian' | artemisTranslate: { median: this.overallChartMedian } }}
-                    </label>
+                    <label
+                        for="toggleMedianOverall"
+                        class="form-check-label"
+                        jhiTranslate="artemisApp.examScores.highlightOverallMedian"
+                        [translateValues]="{ median: this.overallChartMedian }"
+                    ></label>
                 </div>
                 <!-- Histogram -->
                 @if (hasBonus) {
-                    <h4 class="text-center mb-0">
-                        {{ 'artemisApp.examScores.gradesBeforeBonus' | artemisTranslate }}
-                    </h4>
+                    <h4 class="text-center mb-0" jhiTranslate="artemisApp.examScores.gradesBeforeBonus"></h4>
                 }
                 <div class="row d-flex justify-content-center">
                     <jhi-participant-scores-distribution
@@ -410,9 +386,7 @@ <h4 class="text-center mb-0">
                 </div>
                 <!-- Histogram with bonus -->
                 @if (hasBonus) {
-                    <h4 class="text-center mt-5 mb-0">
-                        {{ 'artemisApp.examScores.gradesAfterBonus' | artemisTranslate }}
-                    </h4>
+                    <h4 class="text-center mt-5 mb-0" jhiTranslate="artemisApp.examScores.gradesAfterBonus"></h4>
                 }
                 @if (hasBonus) {
                     <div class="row d-flex justify-content-center">
@@ -448,9 +422,7 @@ <h4 class="mt-3">
                             <thead class="table-dark">
                                 <tr>
                                     <th>#</th>
-                                    <th>
-                                        {{ 'artemisApp.examScores.titleExerciseGroupColumn' | artemisTranslate }}
-                                    </th>
+                                    <th jhiTranslate="artemisApp.examScores.titleExerciseGroupColumn"></th>
                                     <th>
                                         {{ 'artemisApp.examScores.participantsColumn' | artemisTranslate }}
                                         <jhi-help-icon text="artemisApp.examScores.participantsExerciseGroupTooltip" />
@@ -460,17 +432,9 @@ <h4 class="mt-3">
                                         <jhi-help-icon text="artemisApp.examScores.averageExerciseGroupTooltip" />
                                     </th>
                                     @if (gradingScaleExists) {
-                                        <th>
-                                            {{
-                                                isBonus
-                                                    ? ('artemisApp.examScores.averageBonusColumn' | artemisTranslate)
-                                                    : ('artemisApp.examScores.averageGradeColumn' | artemisTranslate)
-                                            }}
-                                        </th>
+                                        <th jhiTranslate="{{ isBonus ? 'artemisApp.examScores.averageBonusColumn' : 'artemisApp.examScores.averageGradeColumn' }}"></th>
                                     }
-                                    <th>
-                                        {{ 'artemisApp.examScores.titleExerciseColumn' | artemisTranslate }}
-                                    </th>
+                                    <th jhiTranslate="artemisApp.examScores.titleExerciseColumn"></th>
                                     <th>
                                         {{ 'artemisApp.examScores.participantsColumn' | artemisTranslate }}
                                         <jhi-help-icon text="artemisApp.examScores.participantsExerciseTooltip" />
@@ -585,44 +549,43 @@ <h4>
                             </th>
                             @if (gradingScaleExists) {
                                 <th jhiSortBy="overallScoreAchieved">
-                                    <span>{{
-                                        isBonus ? ('artemisApp.examScores.overallBonusColumn' | artemisTranslate) : ('artemisApp.examScores.overallGradeColumn' | artemisTranslate)
-                                    }}</span>
+                                    <span jhiTranslate="{{ isBonus ? 'artemisApp.examScores.overallBonusColumn' : 'artemisApp.examScores.overallGradeColumn' }}"></span>
                                     <fa-icon [icon]="faSort" />
                                 </th>
                             }
                             @if (hasBonus) {
                                 @if (presentationScoreThreshold !== undefined) {
                                     <th jhiSortBy="gradeWithBonus.achievedPresentationScore">
-                                        <span>{{ 'artemisApp.examScores.presentationScoreThresholdColumn' | artemisTranslate: { threshold: presentationScoreThreshold } }}</span>
+                                        <span
+                                            jhiTranslate="artemisApp.examScores.presentationScoreThresholdColumn"
+                                            [translateValues]="{ threshold: presentationScoreThreshold }"
+                                        ></span>
                                         <fa-icon [icon]="faSort" />
                                     </th>
                                 }
                                 <th jhiSortBy="gradeWithBonus.bonusGrade">
-                                    <span>{{
-                                        hasBonus === BonusStrategy.POINTS
-                                            ? ('artemisApp.examScores.bonusPointsColumn' | artemisTranslate)
-                                            : ('artemisApp.examScores.bonusGradeColumn' | artemisTranslate)
-                                    }}</span>
+                                    <span
+                                        [jhiTranslate]="hasBonus === BonusStrategy.POINTS ? 'artemisApp.examScores.bonusPointsColumn' : 'artemisApp.examScores.bonusGradeColumn'"
+                                    ></span>
                                     <fa-icon [icon]="faSort" />
                                 </th>
                                 <th jhiSortBy="gradeWithBonus.finalGrade">
-                                    <span>{{ 'artemisApp.examScores.finalGradeColumn' | artemisTranslate }}</span>
+                                    <span jhiTranslate="artemisApp.examScores.finalGradeColumn"></span>
                                     <fa-icon [icon]="faSort" />
                                 </th>
                             }
                             @if (gradingScaleExists && !isBonus) {
-                                <th>{{ 'artemisApp.examScores.passedColumn' | artemisTranslate }}</th>
+                                <th jhiTranslate="artemisApp.examScores.passedColumn"></th>
                             }
                             @if (hasPlagiarismVerdicts) {
                                 <th jhiSortBy="mostSeverePlagiarismVerdict">
-                                    <span>{{ 'artemisApp.examScores.mostSeverePlagiarismVerdictColumn' | artemisTranslate }}</span>
+                                    <span jhiTranslate="artemisApp.examScores.mostSeverePlagiarismVerdictColumn"></span>
                                     <fa-icon [icon]="faSort" />
                                 </th>
                             }
                             @if (hasPlagiarismVerdictsInBonusSource) {
                                 <th jhiSortBy="gradeWithBonus.mostSeverePlagiarismVerdict">
-                                    <span>{{ 'artemisApp.examScores.mostSeverePlagiarismVerdictInBonusColumn' | artemisTranslate }}</span>
+                                    <span jhiTranslate="artemisApp.examScores.mostSeverePlagiarismVerdictInBonusColumn"></span>
                                     <fa-icon [icon]="faSort" />
                                 </th>
                             }
diff --git a/src/main/webapp/app/exam/manage/exam-management.component.html b/src/main/webapp/app/exam/manage/exam-management.component.html
index f7689477c83e..d56b14cda7f6 100644
--- a/src/main/webapp/app/exam/manage/exam-management.component.html
+++ b/src/main/webapp/app/exam/manage/exam-management.component.html
@@ -7,11 +7,11 @@ <h4 id="course-page-heading" jhiTranslate="artemisApp.examManagement.title"></h4
                 <div class="ms-auto text-truncate justify-content-end">
                     <a class="btn btn-primary me-1" (click)="openImportModal()">
                         <fa-icon [icon]="faFileImport" />
-                        <span>{{ 'artemisApp.examManagement.importExam' | artemisTranslate }}</span>
+                        <span jhiTranslate="artemisApp.examManagement.importExam"></span>
                     </a>
                     <a class="btn btn-primary jh-create-entity create-exam" id="create-exam" [routerLink]="['new']">
                         <fa-icon [icon]="faPlus" />
-                        <span>{{ 'artemisApp.examManagement.createExam' | artemisTranslate }}</span>
+                        <span jhiTranslate="artemisApp.examManagement.createExam"></span>
                     </a>
                 </div>
             }
@@ -24,15 +24,15 @@ <h4 id="course-page-heading" jhiTranslate="artemisApp.examManagement.title"></h4
                     <thead>
                         <tr jhiSort [(predicate)]="predicate" [(ascending)]="ascending" (sortChange)="sortRows()">
                             <th class="d-md-table-cell" jhiSortBy="id">
-                                <span>{{ 'global.field.id' | artemisTranslate }}</span>
+                                <span jhiTranslate="global.field.id"></span>
                                 <fa-icon [icon]="faSort" />
                             </th>
                             <th jhiSortBy="title">
-                                <span>{{ 'artemisApp.exam.title' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.exam.title"></span>
                                 <fa-icon [icon]="faSort" />
                             </th>
                             <th class="d-md-table-cell">
-                                <span>{{ 'artemisApp.examStatus.columnTitle' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examStatus.columnTitle"></span>
                             </th>
                             <th></th>
                         </tr>
@@ -61,10 +61,10 @@ <h4 id="course-page-heading" jhiTranslate="artemisApp.examManagement.title"></h4
                                             </span>
                                         }
                                         @if (!exam.testExam) {
-                                            <div class="badge bg-success">{{ 'artemisApp.examManagement.testExam.realExam' | artemisTranslate }}</div>
+                                            <div class="badge bg-success" jhiTranslate="artemisApp.examManagement.testExam.realExam"></div>
                                         }
                                         @if (exam.testExam) {
-                                            <div class="badge bg-primary">{{ 'artemisApp.examManagement.testExam.testExam' | artemisTranslate }}</div>
+                                            <div class="badge bg-primary" jhiTranslate="artemisApp.examManagement.testExam.testExam"></div>
                                         }
                                     </ng-container>
                                 </td>
@@ -82,7 +82,7 @@ <h4 id="course-page-heading" jhiTranslate="artemisApp.examManagement.title"></h4
                                                 >
                                                     <div>
                                                         <fa-icon [icon]="faListAlt" />
-                                                        <span class="d-none d-md-inline">{{ 'artemisApp.examManagement.exerciseGroups' | artemisTranslate }}</span>
+                                                        <span class="d-none d-md-inline" jhiTranslate="artemisApp.examManagement.exerciseGroups"></span>
                                                     </div>
                                                 </a>
                                             }
@@ -94,7 +94,7 @@ <h4 id="course-page-heading" jhiTranslate="artemisApp.examManagement.title"></h4
                                                 >
                                                     <div>
                                                         <fa-icon [icon]="faEye" />
-                                                        <span class="d-none d-md-inline">{{ 'artemisApp.examManagement.studentExams' | artemisTranslate }}</span>
+                                                        <span class="d-none d-md-inline" jhiTranslate="artemisApp.examManagement.studentExams"></span>
                                                     </div>
                                                 </a>
                                             }
@@ -106,7 +106,7 @@ <h4 id="course-page-heading" jhiTranslate="artemisApp.examManagement.title"></h4
                                                 >
                                                     <div>
                                                         <fa-icon [icon]="faThList" />
-                                                        <span class="d-none d-md-inline">{{ 'artemisApp.examManagement.assessmentDashboard' | artemisTranslate }}</span>
+                                                        <span class="d-none d-md-inline" jhiTranslate="artemisApp.examManagement.assessmentDashboard"></span>
                                                     </div>
                                                 </a>
                                             }
@@ -114,7 +114,7 @@ <h4 id="course-page-heading" jhiTranslate="artemisApp.examManagement.title"></h4
                                                 <a [routerLink]="[exam.id, 'edit']" class="btn btn-warning btn-sm me-1 mb-1 d-flex align-items-center justify-content-center">
                                                     <div>
                                                         <fa-icon [icon]="faWrench" />
-                                                        <span class="d-none d-md-inline">{{ 'entity.action.edit' | artemisTranslate }}</span>
+                                                        <span class="d-none d-md-inline" jhiTranslate="entity.action.edit"></span>
                                                     </div>
                                                 </a>
                                             }
@@ -123,7 +123,7 @@ <h4 id="course-page-heading" jhiTranslate="artemisApp.examManagement.title"></h4
                                             @if (course.isAtLeastInstructor) {
                                                 <a [routerLink]="[exam.id, 'test-runs']" class="btn btn-info btn-sm me-1 mb-1 assessment-dashboard">
                                                     <fa-icon [icon]="faUser" />
-                                                    <span class="d-none d-md-inline">{{ 'artemisApp.examManagement.testRun.testRun' | artemisTranslate }}</span>
+                                                    <span class="d-none d-md-inline" jhiTranslate="artemisApp.examManagement.testRun.testRun"></span>
                                                 </a>
                                             }
                                             @if (!exam.testExam && course.isAtLeastInstructor) {
@@ -133,19 +133,19 @@ <h4 id="course-page-heading" jhiTranslate="artemisApp.examManagement.title"></h4
                                                     id="student-button-{{ exam.id }}"
                                                 >
                                                     <fa-icon [icon]="faUser" />
-                                                    <span class="d-none d-md-inline">{{ 'artemisApp.examManagement.students' | artemisTranslate }}</span>
+                                                    <span class="d-none d-md-inline" jhiTranslate="artemisApp.examManagement.students"></span>
                                                 </a>
                                             }
                                             @if (course.isAtLeastInstructor) {
                                                 <a [routerLink]="['/course-management', course.id, 'exams', exam.id, 'scores']" class="btn btn-info btn-sm me-1 mb-1">
                                                     <fa-icon [icon]="faEye" />
-                                                    <span class="d-none d-md-inline">{{ 'entity.action.scores' | artemisTranslate }}</span>
+                                                    <span class="d-none d-md-inline" jhiTranslate="entity.action.scores"></span>
                                                 </a>
                                             }
                                             @if (course.isAtLeastInstructor) {
                                                 <a [routerLink]="[exam.id]" class="btn btn-info btn-sm me-1 mb-1" id="checklist-button-{{ exam.id }}">
                                                     <fa-icon [icon]="faThList" />
-                                                    <span class="d-none d-md-inline">{{ 'artemisApp.examManagement.examChecklist' | artemisTranslate }}</span>
+                                                    <span class="d-none d-md-inline" jhiTranslate="artemisApp.examManagement.examChecklist"></span>
                                                 </a>
                                             }
                                         </div>
diff --git a/src/main/webapp/app/exam/manage/exam-status.component.html b/src/main/webapp/app/exam/manage/exam-status.component.html
index 8e51dc8bc66b..a308dd071108 100644
--- a/src/main/webapp/app/exam/manage/exam-status.component.html
+++ b/src/main/webapp/app/exam/manage/exam-status.component.html
@@ -12,12 +12,13 @@
                 }
             </div>
             <div class="status-step-content">
-                <h6 class="text-center">{{ 'artemisApp.examStatus.preparation.' + (isTestExam ? 'testExam.' : '') + 'examPreparation' | artemisTranslate }}</h6>
+                <h6 class="text-center" jhiTranslate="artemisApp.examStatus.preparation.{{ isTestExam ? 'testExam.' : '' }}examPreparation"></h6>
                 <ol>
                     <li class="d-flex align-items-center">
-                        <span>{{
-                            'artemisApp.examStatus.preparation.configureExercises' | artemisTranslate: { amount: exam.exerciseGroups ? exam.exerciseGroups.length : 0 }
-                        }}</span>
+                        <span
+                            jhiTranslate="artemisApp.examStatus.preparation.configureExercises"
+                            [translateValues]="{ amount: exam.exerciseGroups ? exam.exerciseGroups.length : 0 }"
+                        ></span>
                         @if (configuredExercises) {
                             <fa-icon [icon]="faCheckCircle" class="check" />
                         }
@@ -32,14 +33,14 @@ <h6 class="text-center">{{ 'artemisApp.examStatus.preparation.' + (isTestExam ?
                                 <fa-icon [icon]="faCheckCircle" class="check" />
                             }
                             @if (maxPointExercises !== exam.examMaxPoints) {
-                                <span>{{ 'artemisApp.examStatus.preparation.testExam.maxPointsWrong' | artemisTranslate: { points: maxPointExercises } }} </span>
+                                <span jhiTranslate="artemisApp.examStatus.preparation.testExam.maxPointsWrong" [translateValues]="{ points: maxPointExercises }"></span>
                                 <fa-icon [icon]="faTimes" class="cross" />
                             }
                         </li>
                     }
                     @if (!isTestExam) {
                         <li class="d-flex align-items-center">
-                            <span>{{ 'artemisApp.examStatus.preparation.registerStudents' | artemisTranslate: { registered: exam.numberOfExamUsers } }} </span>
+                            <span jhiTranslate="artemisApp.examStatus.preparation.registerStudents" [translateValues]="{ registered: exam.numberOfExamUsers }"></span>
                             @if (registeredStudents) {
                                 <fa-icon [icon]="faCheckCircle" class="check" />
                             }
@@ -50,22 +51,19 @@ <h6 class="text-center">{{ 'artemisApp.examStatus.preparation.' + (isTestExam ?
                     }
                     @if (!isTestExam) {
                         <li class="d-flex align-items-center">
-                            <span>{{ 'artemisApp.examStatus.preparation.generateStudentExams' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.examStatus.preparation.generateStudentExams"></span>
                             <!-- If no students are registered yet, we do not want to display "0 of 0" -->
                             @if (!registeredStudents) {
-                                <span>{{ 'artemisApp.examStatus.preparation.notRegistered' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examStatus.preparation.notRegistered"></span>
                             }
                             @if (registeredStudents) {
-                                <span>
-                                    {{
-                                        'artemisApp.examStatus.preparation.registered'
-                                            | artemisTranslate
-                                                : {
-                                                      generated: numberOfGeneratedStudentExams,
-                                                      total: exam.numberOfExamUsers,
-                                                  }
-                                    }}
-                                </span>
+                                <span
+                                    jhiTranslate="artemisApp.examStatus.preparation.registered"
+                                    [translateValues]="{
+                                        generated: numberOfGeneratedStudentExams,
+                                        total: exam.numberOfExamUsers,
+                                    }"
+                                ></span>
                             }
                             @if (generatedStudentExams) {
                                 <fa-icon [icon]="faCheckCircle" class="check" />
@@ -77,7 +75,7 @@ <h6 class="text-center">{{ 'artemisApp.examStatus.preparation.' + (isTestExam ?
                     }
                     @if (!isTestExam) {
                         <li class="d-flex align-items-center">
-                            <span>{{ 'artemisApp.examStatus.preparation.prepareExerciseStart' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.examStatus.preparation.prepareExerciseStart"></span>
                             @if (preparedExerciseStart) {
                                 <fa-icon [icon]="faCheckCircle" class="check" />
                             }
@@ -115,13 +113,13 @@ <h6 class="text-center">{{ 'artemisApp.examStatus.preparation.' + (isTestExam ?
         </div>
         <div class="status-step-content">
             <div class="text-center mb-1">
-                <h6>{{ 'artemisApp.examStatus.conduction.' + (isTestExam ? 'testExam.' : '') + 'examConduction' | artemisTranslate }}</h6>
+                <h6 jhiTranslate="artemisApp.examStatus.conduction.{{ isTestExam ? 'testExam.' : '' }}examConduction"></h6>
                 <b>{{ exam.startDate | artemisDate }} - {{ exam.endDate | artemisDate }}</b>
             </div>
             <!-- In case the exercise configuration is wrong, but the test eam already started, students are not able to start a test eam -->
             @if (examConductionState === examConductionStateEnum.ERROR) {
                 <div class="text-center mb-1">
-                    <h6>{{ 'artemisApp.examStatus.conduction.' + (isTestExam ? 'testExam.' : '') + 'conductionSuspended' | artemisTranslate }}</h6>
+                    <h6 jhiTranslate="artemisApp.examStatus.conduction.{{ isTestExam ? 'testExam.' : '' }}conductionSuspended"></h6>
                 </div>
             }
             @if (course?.isAtLeastInstructor && examChecklist && examConductionState !== examConductionStateEnum.ERROR) {
@@ -179,7 +177,7 @@ <h6>{{ 'artemisApp.examStatus.conduction.' + (isTestExam ? 'testExam.' : '') + '
                 }
             </div>
             <div class="status-step-content">
-                <h6 class="text-center">{{ 'artemisApp.examStatus.correction.examCorrection' | artemisTranslate }}</h6>
+                <h6 class="text-center" jhiTranslate="artemisApp.examStatus.correction.examCorrection"></h6>
                 @if (examChecklist) {
                     <ol>
                         @if (examChecklist.numberOfTotalExamAssessmentsFinishedByCorrectionRound !== null && numberOfSubmitted !== 0) {
@@ -215,9 +213,7 @@ <h6 class="text-center">{{ 'artemisApp.examStatus.correction.examCorrection' | a
                                 </b>
                             }
                             @if (!exam.publishResultsDate) {
-                                <b class="unset">
-                                    {{ 'artemisApp.examStatus.correction.notSet' | artemisTranslate }}
-                                </b>
+                                <b class="unset" jhiTranslate="artemisApp.examStatus.correction.notSet"></b>
                             }
                             <br />
                         </li>
diff --git a/src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-checklist.component.html b/src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-checklist.component.html
index 62378895923a..d0525ddc1928 100644
--- a/src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-checklist.component.html
+++ b/src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-checklist.component.html
@@ -1,13 +1,13 @@
 @if (exam?.course?.isAtLeastInstructor) {
     <div>
         <h2>
-            <span>{{ 'artemisApp.examManagement.checklist.' + (isTestExam ? 'testExam.' : '') + 'title' | artemisTranslate }}</span>
+            <span jhiTranslate="artemisApp.examManagement.checklist.{{ isTestExam ? 'testExam.' : '' }}title"></span>
         </h2>
         @if (!isTestExam) {
             <p>
                 <span>
                     {{ 'artemisApp.examManagement.checklist.introduction' | artemisTranslate }}
-                    <a href="https://docs.artemis.cit.tum.de/user/exams/instructors_guide/">{{ 'artemisApp.examManagement.checklist.linkDescription' | artemisTranslate }}</a>
+                    <a href="https://docs.artemis.cit.tum.de/user/exams/instructors_guide/" jhiTranslate="artemisApp.examManagement.checklist.linkDescription"></a>
                     {{ 'artemisApp.examManagement.checklist.introductionPart2' | artemisTranslate }}
                 </span>
             </p>
@@ -15,13 +15,11 @@ <h2>
         @if (isTestExam) {
             <p>
                 <!-- documentation currently missing. -->
-                <span> {{ 'artemisApp.examManagement.checklist.testExam.introduction' | artemisTranslate }}</span>
+                <span jhiTranslate="artemisApp.examManagement.checklist.testExam.introduction"></span>
             </p>
         }
         <br />
-        <h3>
-            {{ 'artemisApp.examStatus.preparation.' + (isTestExam ? 'testExam.' : '') + 'examPreparation' | artemisTranslate }}
-        </h3>
+        <h3 jhiTranslate="artemisApp.examStatus.preparation.{{ isTestExam ? 'testExam.' : '' }}examPreparation"></h3>
         <div class="table-responsive">
             <table class="table table-striped">
                 <thead>
@@ -30,13 +28,13 @@ <h3>
                             <span>#</span>
                         </th>
                         <th>
-                            <span>{{ 'artemisApp.examManagement.checklist.checklistItem' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.examManagement.checklist.checklistItem"></span>
                         </th>
                         <th>
-                            <span>{{ 'artemisApp.examManagement.checklist.description' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.examManagement.checklist.description"></span>
                         </th>
                         <th>
-                            <span>{{ 'artemisApp.examManagement.checklist.goTo' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.examManagement.checklist.goTo"></span>
                         </th>
                     </tr>
                 </thead>
@@ -44,16 +42,16 @@ <h3>
                     <tr>
                         <td>1</td>
                         <td>
-                            <span>{{ 'artemisApp.examManagement.checklist.tableItem.exerciseGroups' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.examManagement.checklist.tableItem.exerciseGroups"></span>
                         </td>
                         <td>
-                            <span>{{ 'artemisApp.examManagement.checklist.descriptionItem.exerciseGroups' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.examManagement.checklist.descriptionItem.exerciseGroups"></span>
                             <hr />
                             <ul class="list-unstyled">
                                 <li class="list-group-item border-1">
                                     <span>
                                         <jhi-checklist-check [checkAttribute]="exam.exerciseGroups && exam.exerciseGroups.length > 0" />
-                                        <span>{{ 'artemisApp.examManagement.checklist.textitems.leastoneexercisegroup' | artemisTranslate }}</span>
+                                        <span jhiTranslate="artemisApp.examManagement.checklist.textitems.leastoneexercisegroup"></span>
                                     </span>
                                 </li>
                                 <li class="list-group-item border-1">
@@ -66,30 +64,31 @@ <h3>
                                                 (exam.numberOfExercisesInExam ?? 0) <= exam.exerciseGroups.length
                                             "
                                         />
-                                        <span>{{
-                                            (!hasOptionalExercises
-                                                ? 'artemisApp.examManagement.checklist.textitems.numberofexercisegroupsequal'
-                                                : 'artemisApp.examManagement.checklist.textitems.numberofexercisegroupsinbetween'
-                                            ) | artemisTranslate
-                                        }}</span>
+                                        <span
+                                            jhiTranslate="{{
+                                                !hasOptionalExercises
+                                                    ? 'artemisApp.examManagement.checklist.textitems.numberofexercisegroupsequal'
+                                                    : 'artemisApp.examManagement.checklist.textitems.numberofexercisegroupsinbetween'
+                                            }}"
+                                        ></span>
                                     </span>
                                 </li>
                                 <li class="list-group-item border-1">
                                     <span>
                                         <jhi-checklist-check [checkAttribute]="allGroupsContainExercise" />
-                                        <span>{{ 'artemisApp.examManagement.checklist.textitems.eachexercisegroup' | artemisTranslate }}</span>
+                                        <span jhiTranslate="artemisApp.examManagement.checklist.textitems.eachexercisegroup"></span>
                                     </span>
                                 </li>
                                 <li class="list-group-item border-1">
                                     <span>
                                         <jhi-checklist-check [checkAttribute]="pointsExercisesEqual" />
-                                        <span>{{ 'artemisApp.examManagement.checklist.textitems.pointsexercisegroupequal' | artemisTranslate }}</span>
+                                        <span jhiTranslate="artemisApp.examManagement.checklist.textitems.pointsexercisegroupequal"></span>
                                     </span>
                                 </li>
                                 <li class="list-group-item border-1">
                                     <span>
                                         <jhi-checklist-check [checkAttribute]="totalPoints" />
-                                        <span>{{ 'artemisApp.examManagement.checklist.textitems.totalpointspossible' | artemisTranslate }}</span>
+                                        <span jhiTranslate="artemisApp.examManagement.checklist.textitems.totalpointspossible"></span>
                                     </span>
                                 </li>
                             </ul>
@@ -100,22 +99,22 @@ <h3>
                         <td>
                             <a type="submit" [routerLink]="getExamRoutesByIdentifier('exercise-groups')" class="btn btn-primary" id="exercises-button-groups-table">
                                 <fa-icon [icon]="faListAlt" />
-                                <span>{{ 'artemisApp.examManagement.exerciseGroups' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examManagement.exerciseGroups"></span>
                             </a>
                         </td>
                     </tr>
                     <tr>
                         <td>2</td>
                         <td>
-                            <span>{{ 'artemisApp.examManagement.checklist.tableItem.testRun' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.examManagement.checklist.tableItem.testRun"></span>
                         </td>
                         <td>
-                            <span>{{ 'artemisApp.examManagement.checklist.descriptionItem.testRun' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.examManagement.checklist.descriptionItem.testRun"></span>
                             <hr />
                             <ul class="list-unstyled">
                                 @if (examChecklist) {
                                     <li class="list-group-item border-1">
-                                        <span>{{ 'artemisApp.examManagement.checklist.textitems.testruns' | artemisTranslate }}</span>
+                                        <span jhiTranslate="artemisApp.examManagement.checklist.textitems.testruns"></span>
                                         {{ examChecklist.numberOfTestRuns }}
                                     </li>
                                 }
@@ -124,7 +123,7 @@ <h3>
                         <td>
                             <a [routerLink]="getExamRoutesByIdentifier('test-runs')" class="btn btn-info">
                                 <fa-icon [icon]="faUser" />
-                                <span>{{ 'artemisApp.examManagement.testRun.testRun' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examManagement.testRun.testRun"></span>
                             </a>
                         </td>
                     </tr>
@@ -132,20 +131,20 @@ <h3>
                         <tr>
                             <td>3</td>
                             <td>
-                                <span>{{ 'artemisApp.examManagement.checklist.tableItem.register' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examManagement.checklist.tableItem.register"></span>
                             </td>
                             <td>
-                                <span>{{ 'artemisApp.examManagement.checklist.descriptionItem.register' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examManagement.checklist.descriptionItem.register"></span>
                                 <hr />
                                 <ul class="list-unstyled">
                                     <li class="list-group-item border-1">
                                         <span>
                                             <jhi-checklist-check [checkAttribute]="!!exam.numberOfExamUsers && exam.numberOfExamUsers! > 0" />
-                                            <span>{{ 'artemisApp.examManagement.checklist.textitems.leastonestudent' | artemisTranslate }}</span>
+                                            <span jhiTranslate="artemisApp.examManagement.checklist.textitems.leastonestudent"></span>
                                         </span>
                                     </li>
                                     <li class="list-group-item border-1">
-                                        <span>{{ 'artemisApp.examManagement.checklist.textitems.studentsregistered' | artemisTranslate }}</span>
+                                        <span jhiTranslate="artemisApp.examManagement.checklist.textitems.studentsregistered"></span>
                                         <span> {{ exam.numberOfExamUsers }} </span>
                                     </li>
                                 </ul>
@@ -153,23 +152,23 @@ <h3>
                             <td>
                                 <a [routerLink]="getExamRoutesByIdentifier('students')" class="btn btn-info">
                                     <fa-icon [icon]="faUser" />
-                                    <span>{{ 'artemisApp.examManagement.students' | artemisTranslate }}</span>
+                                    <span jhiTranslate="artemisApp.examManagement.students"></span>
                                 </a>
                             </td>
                         </tr>
                         <tr>
                             <td>4</td>
                             <td>
-                                <span>{{ 'artemisApp.examManagement.checklist.tableItem.generateStudentExams' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examManagement.checklist.tableItem.generateStudentExams"></span>
                             </td>
                             <td>
-                                <span>{{ 'artemisApp.examManagement.checklist.descriptionItem.generateStudentExams' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examManagement.checklist.descriptionItem.generateStudentExams"></span>
                                 <hr />
                                 <ul class="list-unstyled">
                                     <li class="list-group-item border-1">
                                         <span>
                                             <jhi-checklist-check [checkAttribute]="allExamsGenerated" />
-                                            <span>{{ 'artemisApp.examManagement.checklist.textitems.allexamsgenerated' | artemisTranslate }}</span>
+                                            <span jhiTranslate="artemisApp.examManagement.checklist.textitems.allexamsgenerated"></span>
                                         </span>
                                     </li>
                                 </ul>
@@ -177,23 +176,23 @@ <h3>
                             <td>
                                 <a [routerLink]="getExamRoutesByIdentifier('student-exams')" class="btn btn-primary">
                                     <fa-icon [icon]="faEye" />
-                                    <span class="d-none d-md-inline">{{ 'artemisApp.examManagement.studentExams' | artemisTranslate }}</span>
+                                    <span class="d-none d-md-inline" jhiTranslate="artemisApp.examManagement.studentExams"></span>
                                 </a>
                             </td>
                         </tr>
                         <tr>
                             <td>5</td>
                             <td>
-                                <span>{{ 'artemisApp.examManagement.checklist.tableItem.prepareExerciseStart' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examManagement.checklist.tableItem.prepareExerciseStart"></span>
                             </td>
                             <td>
-                                <span>{{ 'artemisApp.examManagement.checklist.descriptionItem.prepareExerciseStart' | artemisTranslate }} </span>
+                                <span jhiTranslate="artemisApp.examManagement.checklist.descriptionItem.prepareExerciseStart"></span>
                                 <hr />
                                 <ul class="list-unstyled">
                                     @if (examChecklist) {
                                         <li class="list-group-item border-1">
                                             <jhi-checklist-check [checkAttribute]="!!examChecklist.allExamExercisesAllStudentsPrepared && this.allExamsGenerated" />
-                                            <span>{{ 'artemisApp.examManagement.checklist.textitems.allExercisesPrepared' | artemisTranslate }}</span>
+                                            <span jhiTranslate="artemisApp.examManagement.checklist.textitems.allExercisesPrepared"></span>
                                         </li>
                                     }
                                 </ul>
@@ -201,7 +200,7 @@ <h3>
                             <td>
                                 <a [routerLink]="getExamRoutesByIdentifier('student-exams')" class="btn btn-primary">
                                     <fa-icon [icon]="faEye" />
-                                    <span class="d-none d-md-inline">{{ 'artemisApp.examManagement.studentExams' | artemisTranslate }}</span>
+                                    <span class="d-none d-md-inline" jhiTranslate="artemisApp.examManagement.studentExams"></span>
                                 </a>
                             </td>
                         </tr>
@@ -209,10 +208,10 @@ <h3>
                     <tr>
                         <td>{{ isTestExam ? 3 : 6 }}</td>
                         <td>
-                            <span>{{ 'artemisApp.examManagement.checklist.tableItem.examDetails' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.examManagement.checklist.tableItem.examDetails"></span>
                         </td>
                         <td>
-                            <span>{{ 'artemisApp.examManagement.checklist.descriptionItem.examDetails' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.examManagement.checklist.descriptionItem.examDetails"></span>
                             @if (isTestExam) {
                                 <hr />
                                 <span>{{ 'artemisApp.examManagement.checklist.testExam.detailsHintForTestExams' | artemisTranslate }} :</span>
@@ -221,19 +220,19 @@ <h3>
                                     <li class="list-group-item border-1">
                                         <span>
                                             <jhi-checklist-check [checkAttribute]="true" />
-                                            <span>{{ 'artemisApp.examManagement.checklist.testExam.studentRegistration' | artemisTranslate }}</span>
+                                            <span jhiTranslate="artemisApp.examManagement.checklist.testExam.studentRegistration"></span>
                                         </span>
                                     </li>
                                     <li class="list-group-item border-1">
                                         <span>
                                             <jhi-checklist-check [checkAttribute]="true" />
-                                            <span>{{ 'artemisApp.studentExams.studentExamStatusTestExam' | artemisTranslate }}</span>
+                                            <span jhiTranslate="artemisApp.studentExams.studentExamStatusTestExam"></span>
                                         </span>
                                     </li>
                                     <li class="list-group-item border-1">
                                         <span>
                                             <jhi-checklist-check [checkAttribute]="true" />
-                                            <span>{{ 'artemisApp.examManagement.checklist.testExam.instantResults' | artemisTranslate }}</span>
+                                            <span jhiTranslate="artemisApp.examManagement.checklist.testExam.instantResults"></span>
                                         </span>
                                     </li>
                                 </ul>
@@ -249,15 +248,14 @@ <h3>
             </table>
         </div>
         <hr />
-        <h3>{{ 'artemisApp.examStatus.conduction.' + (isTestExam ? 'testExam.' : '') + 'examConduction' | artemisTranslate }}</h3>
-        <b>{{
-            'artemisApp.examManagement.checklist.conductionPlannedFromTo'
-                | artemisTranslate
-                    : {
-                          from: exam.startDate! | artemisDate,
-                          to: exam.endDate! | artemisDate,
-                      }
-        }}</b>
+        <h3 jhiTranslate="artemisApp.examStatus.conduction.{{ isTestExam ? 'testExam.' : '' }}examConduction"></h3>
+        <b
+            jhiTranslate="artemisApp.examManagement.checklist.conductionPlannedFromTo"
+            [translateValues]="{
+                from: exam.startDate! | artemisDate,
+                to: exam.endDate! | artemisDate,
+            }"
+        ></b>
         <div class="table-responsive">
             <table class="table table-striped">
                 <thead>
@@ -266,13 +264,13 @@ <h3>{{ 'artemisApp.examStatus.conduction.' + (isTestExam ? 'testExam.' : '') + '
                             <span>#</span>
                         </th>
                         <th>
-                            <span>{{ 'artemisApp.examManagement.checklist.checklistItem' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.examManagement.checklist.checklistItem"></span>
                         </th>
                         <th>
-                            <span>{{ 'artemisApp.examManagement.checklist.description' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.examManagement.checklist.description"></span>
                         </th>
                         <th>
-                            <span>{{ 'artemisApp.examManagement.checklist.goTo' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.examManagement.checklist.goTo"></span>
                         </th>
                     </tr>
                 </thead>
@@ -280,10 +278,10 @@ <h3>{{ 'artemisApp.examStatus.conduction.' + (isTestExam ? 'testExam.' : '') + '
                     <tr>
                         <td>1</td>
                         <td>
-                            <span>{{ 'artemisApp.examManagement.checklist.tableItem.conductExam' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.examManagement.checklist.tableItem.conductExam"></span>
                         </td>
                         <td>
-                            <span>{{ 'artemisApp.examManagement.checklist.descriptionItem.conductExam' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.examManagement.checklist.descriptionItem.conductExam"></span>
                             <hr />
                             <!-- Display number of registered students -->
                             @if (exam.numberOfExamUsers) {
@@ -326,24 +324,24 @@ <h3>{{ 'artemisApp.examStatus.conduction.' + (isTestExam ? 'testExam.' : '') + '
                             }
                             @if (examChecklist && numberOfSubmitted! === 0) {
                                 <div>
-                                    <span>{{ 'artemisApp.examManagement.checklist.textitems.noSubmissions' | artemisTranslate }}</span>
+                                    <span jhiTranslate="artemisApp.examManagement.checklist.textitems.noSubmissions"></span>
                                 </div>
                             }
                         </td>
                         <td>
                             <a [routerLink]="getExamRoutesByIdentifier('student-exams')" class="btn btn-primary">
                                 <fa-icon [icon]="faEye" />
-                                <span class="d-none d-md-inline">{{ 'artemisApp.examManagement.studentExams' | artemisTranslate }}</span>
+                                <span class="d-none d-md-inline" jhiTranslate="artemisApp.examManagement.studentExams"></span>
                             </a>
                         </td>
                     </tr>
                     <tr>
                         <td>2</td>
                         <td>
-                            <span>{{ 'artemisApp.examManagement.checklist.tableItem.editWorkingTime' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.examManagement.checklist.tableItem.editWorkingTime"></span>
                         </td>
                         <td>
-                            <span>{{ 'artemisApp.examManagement.checklist.descriptionItem.editWorkingTime' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.examManagement.checklist.descriptionItem.editWorkingTime"></span>
                         </td>
                         <td>
                             <jhi-exam-edit-working-time [(exam)]="exam" />
@@ -368,7 +366,7 @@ <h3>{{ 'artemisApp.examStatus.conduction.' + (isTestExam ? 'testExam.' : '') + '
         </div>
         <hr />
         @if (!isTestExam) {
-            <h3>{{ 'artemisApp.examStatus.correction.examCorrection' | artemisTranslate }}</h3>
+            <h3 jhiTranslate="artemisApp.examStatus.correction.examCorrection"></h3>
             <div class="table-responsive">
                 <table class="table table-striped">
                     <thead>
@@ -377,13 +375,13 @@ <h3>{{ 'artemisApp.examStatus.correction.examCorrection' | artemisTranslate }}</
                                 <span>#</span>
                             </th>
                             <th>
-                                <span>{{ 'artemisApp.examManagement.checklist.checklistItem' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examManagement.checklist.checklistItem"></span>
                             </th>
                             <th>
-                                <span>{{ 'artemisApp.examManagement.checklist.description' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examManagement.checklist.description"></span>
                             </th>
                             <th>
-                                <span>{{ 'artemisApp.examManagement.checklist.goTo' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examManagement.checklist.goTo"></span>
                             </th>
                         </tr>
                     </thead>
@@ -391,27 +389,27 @@ <h3>{{ 'artemisApp.examStatus.correction.examCorrection' | artemisTranslate }}</
                         <tr>
                             <td>1</td>
                             <td>
-                                <span>{{ 'artemisApp.examManagement.checklist.tableItem.suspiciousBehavior' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examManagement.checklist.tableItem.suspiciousBehavior"></span>
                             </td>
                             <td>
-                                <span>{{ 'artemisApp.examManagement.checklist.descriptionItem.suspiciousBehavior' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examManagement.checklist.descriptionItem.suspiciousBehavior"></span>
                                 <hr />
                                 <br />
                             </td>
                             <td>
                                 <a [routerLink]="['suspicious-behavior']" class="btn btn-info">
                                     <fa-icon [icon]="faChartBar" />
-                                    <span>{{ 'artemisApp.examManagement.suspiciousBehavior.title' | artemisTranslate }}</span>
+                                    <span jhiTranslate="artemisApp.examManagement.suspiciousBehavior.title"></span>
                                 </a>
                             </td>
                         </tr>
                         <tr>
                             <td>2</td>
                             <td>
-                                <span>{{ 'artemisApp.examManagement.checklist.tableItem.assessAllSubmissions' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examManagement.checklist.tableItem.assessAllSubmissions"></span>
                             </td>
                             <td>
-                                <span>{{ 'artemisApp.examManagement.checklist.descriptionItem.assessAllSubmissions' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examManagement.checklist.descriptionItem.assessAllSubmissions"></span>
                                 <hr />
                                 <!-- Display assessment progress summed up over all exercises, by correction round -->
                                 @if (examChecklist && examChecklist.numberOfTotalExamAssessmentsFinishedByCorrectionRound !== null && numberOfSubmitted !== 0) {
@@ -439,7 +437,7 @@ <h3>{{ 'artemisApp.examStatus.correction.examCorrection' | artemisTranslate }}</
                                 }
                                 @if (examChecklist && numberOfSubmitted === 0) {
                                     <div>
-                                        <span>{{ 'artemisApp.examManagement.checklist.textitems.noSubmissions' | artemisTranslate }}</span>
+                                        <span jhiTranslate="artemisApp.examManagement.checklist.textitems.noSubmissions"></span>
                                     </div>
                                 }
                                 <br />
@@ -447,24 +445,24 @@ <h3>{{ 'artemisApp.examStatus.correction.examCorrection' | artemisTranslate }}</
                             <td>
                                 <a [routerLink]="getExamRoutesByIdentifier('assessment-dashboard')" class="btn btn-primary">
                                     <fa-icon [icon]="faThList" />
-                                    <span>{{ 'artemisApp.examManagement.assessmentDashboard' | artemisTranslate }}</span>
+                                    <span jhiTranslate="artemisApp.examManagement.assessmentDashboard"></span>
                                 </a>
                             </td>
                         </tr>
                         <tr>
                             <td>3</td>
                             <td>
-                                <span>{{ 'artemisApp.examManagement.checklist.tableItem.publishResults' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examManagement.checklist.tableItem.publishResults"></span>
                             </td>
                             <td>
-                                <span>{{ 'artemisApp.examManagement.checklist.descriptionItem.publishResults' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examManagement.checklist.descriptionItem.publishResults"></span>
                                 <hr />
                                 <ul class="list-unstyled">
                                     <li class="list-group-item border-1">
                                         <span>
                                             <li class="list-group-item border-1">
                                                 <jhi-checklist-check [checkAttribute]="!!exam.publishResultsDate" />
-                                                <span>{{ 'artemisApp.examManagement.checklist.textitems.pulishingdateset' | artemisTranslate }}</span>
+                                                <span jhiTranslate="artemisApp.examManagement.checklist.textitems.pulishingdateset"></span>
                                             </li>
                                             @if (exam.publishResultsDate) {
                                                 <hr />
@@ -574,22 +572,22 @@ <h3>{{ 'artemisApp.examStatus.correction.examCorrection' | artemisTranslate }}</
                         <tr>
                             <td>4</td>
                             <td>
-                                <span>{{ 'artemisApp.examManagement.checklist.tableItem.examReview' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examManagement.checklist.tableItem.examReview"></span>
                             </td>
                             <td>
-                                <span>{{ 'artemisApp.examManagement.checklist.descriptionItem.examReview' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examManagement.checklist.descriptionItem.examReview"></span>
                                 <hr />
                                 <ul class="list-unstyled">
                                     <li class="list-group-item border-1">
                                         <span>
                                             <jhi-checklist-check [checkAttribute]="!!exam.examStudentReviewStart" />
-                                            <span>{{ 'artemisApp.examManagement.checklist.textitems.startdatereviewset' | artemisTranslate }}</span>
+                                            <span jhiTranslate="artemisApp.examManagement.checklist.textitems.startdatereviewset"></span>
                                         </span>
                                     </li>
                                     <li class="list-group-item border-1">
                                         <span>
                                             <jhi-checklist-check [checkAttribute]="!!exam.examStudentReviewEnd" />
-                                            <span>{{ 'artemisApp.examManagement.checklist.textitems.enddatereviewset' | artemisTranslate }}</span>
+                                            <span jhiTranslate="artemisApp.examManagement.checklist.textitems.enddatereviewset"></span>
                                         </span>
                                     </li>
                                 </ul>
@@ -603,10 +601,10 @@ <h3>{{ 'artemisApp.examStatus.correction.examCorrection' | artemisTranslate }}</
                         <tr>
                             <td>5</td>
                             <td>
-                                <span>{{ 'artemisApp.examManagement.checklist.tableItem.resolveComplaints' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examManagement.checklist.tableItem.resolveComplaints"></span>
                             </td>
                             <td>
-                                <span>{{ 'artemisApp.examManagement.checklist.descriptionItem.resolveComplaints' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examManagement.checklist.descriptionItem.resolveComplaints"></span>
                                 <hr />
                                 @if (examChecklist && examChecklist.numberOfAllComplaintsDone !== null && examChecklist.numberOfAllComplaints !== 0) {
                                     <div>
@@ -621,7 +619,7 @@ <h3>{{ 'artemisApp.examStatus.correction.examCorrection' | artemisTranslate }}</
                                 }
                                 @if (examChecklist && examChecklist.numberOfAllComplaints === 0) {
                                     <div>
-                                        <span>{{ 'artemisApp.examManagement.checklist.textitems.noComplaints' | artemisTranslate }}</span>
+                                        <span jhiTranslate="artemisApp.examManagement.checklist.textitems.noComplaints"></span>
                                     </div>
                                 }
                                 <br />
@@ -629,22 +627,22 @@ <h3>{{ 'artemisApp.examStatus.correction.examCorrection' | artemisTranslate }}</
                             <td>
                                 <a [routerLink]="getExamRoutesByIdentifier('assessment-dashboard')" class="btn btn-primary" id="tutor-exam-dashboard-button_table_complaints">
                                     <fa-icon [icon]="faThList" />
-                                    <span>{{ 'artemisApp.examManagement.assessmentDashboard' | artemisTranslate }}</span>
+                                    <span jhiTranslate="artemisApp.examManagement.assessmentDashboard"></span>
                                 </a>
                             </td>
                         </tr>
                         <tr>
                             <td>6</td>
                             <td>
-                                <span>{{ 'artemisApp.examManagement.checklist.tableItem.exportResults' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examManagement.checklist.tableItem.exportResults"></span>
                             </td>
                             <td>
-                                <span>{{ 'artemisApp.examManagement.checklist.descriptionItem.exportResults' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examManagement.checklist.descriptionItem.exportResults"></span>
                             </td>
                             <td>
                                 <a [routerLink]="getExamRoutesByIdentifier('scores')" class="btn btn-info" id="scores-button_publish_result">
                                     <fa-icon [icon]="faEye" />
-                                    <span>{{ 'entity.action.scores' | artemisTranslate }}</span>
+                                    <span jhiTranslate="entity.action.scores"></span>
                                 </a>
                             </td>
                         </tr>
diff --git a/src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-edit-workingtime-dialog/exam-edit-working-time.component.html b/src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-edit-workingtime-dialog/exam-edit-working-time.component.html
index 0145161f28b6..e0cd3e78705c 100644
--- a/src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-edit-workingtime-dialog/exam-edit-working-time.component.html
+++ b/src/main/webapp/app/exam/manage/exams/exam-checklist-component/exam-edit-workingtime-dialog/exam-edit-working-time.component.html
@@ -1,4 +1,4 @@
 <button id="edit-working-time-button" class="btn btn-md btn-warning" [disabled]="!workingTimeChangeAllowed" (click)="openDialog($event)">
     <fa-icon [icon]="faHourglassHalf" />
-    <span class="d-none d-md-inline">{{ 'artemisApp.examManagement.editWorkingTime.title' | artemisTranslate }}</span>
+    <span class="d-none d-md-inline" jhiTranslate="artemisApp.examManagement.editWorkingTime.title"></span>
 </button>
diff --git a/src/main/webapp/app/exam/manage/exams/exam-detail.component.html b/src/main/webapp/app/exam/manage/exams/exam-detail.component.html
index a2308edbf6aa..243126fc3758 100644
--- a/src/main/webapp/app/exam/manage/exams/exam-detail.component.html
+++ b/src/main/webapp/app/exam/manage/exams/exam-detail.component.html
@@ -4,10 +4,10 @@
             <div>
                 <h2 id="exam-detail-title">
                     @if (!exam.testExam) {
-                        <span class="badge bg-success">{{ 'artemisApp.examManagement.testExam.realExam' | artemisTranslate }}</span>
+                        <span class="badge bg-success" jhiTranslate="artemisApp.examManagement.testExam.realExam"></span>
                     }
                     @if (exam.testExam) {
-                        <span class="badge bg-primary">{{ 'artemisApp.examManagement.testExam.testExam' | artemisTranslate }}</span>
+                        <span class="badge bg-primary" jhiTranslate="artemisApp.examManagement.testExam.testExam"></span>
                     }
                     {{ exam.title }}
                 </h2>
@@ -16,50 +16,50 @@ <h2 id="exam-detail-title">
                     <div>
                         <a id="exercises-button-groups" type="submit" [routerLink]="getExamRoutesByIdentifier('exercise-groups')" class="btn btn-primary mt-1">
                             <fa-icon [icon]="faListAlt" />
-                            <span>{{ 'artemisApp.examManagement.exerciseGroups' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.examManagement.exerciseGroups"></span>
                         </a>
                         <!-- Remove ngIf when Quiz Exam feature is fully implemented -->
                         @if (false) {
                             <a id="quiz-pool" type="submit" [routerLink]="getExamRoutesByIdentifier('quiz-pool')" class="btn btn-primary mt-1">
                                 <fa-icon [icon]="faListAlt" />
-                                <span>{{ 'artemisApp.examManagement.quizPool' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examManagement.quizPool"></span>
                             </a>
                         }
                         @if (!exam.testExam) {
                             <a id="students-button" [routerLink]="getExamRoutesByIdentifier('students')" class="btn btn-info mt-1">
                                 <fa-icon [icon]="faUser" />
-                                <span>{{ 'artemisApp.examManagement.students' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examManagement.students"></span>
                             </a>
                         }
                         <a id="studentExamsButton" [routerLink]="getExamRoutesByIdentifier('student-exams')" class="btn btn-info mt-1">
                             <fa-icon [icon]="faEye" />
-                            <span class="d-none d-md-inline">{{ 'artemisApp.examManagement.studentExams' | artemisTranslate }}</span>
+                            <span class="d-none d-md-inline" jhiTranslate="artemisApp.examManagement.studentExams"></span>
                         </a>
                         <a id="testrun-button" [routerLink]="getExamRoutesByIdentifier('test-runs')" class="btn btn-info mt-1">
                             <fa-icon [icon]="faFlaskVial" />
-                            <span>{{ 'artemisApp.examManagement.testRun.testRun' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.examManagement.testRun.testRun"></span>
                         </a>
                         @if (!exam.testExam) {
                             <a id="assessment-dashboard-button" [routerLink]="getExamRoutesByIdentifier('assessment-dashboard')" class="btn btn-primary mt-1">
                                 <fa-icon [icon]="faThList" />
-                                <span>{{ 'artemisApp.examManagement.assessmentDashboard' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examManagement.assessmentDashboard"></span>
                             </a>
                         }
                         @if (!exam.testExam) {
                             <a [routerLink]="getExamRoutesByIdentifier('grading-system')" class="btn btn-info mt-1">
                                 <fa-icon [icon]="faClipboard" />
-                                <span>{{ 'artemisApp.examManagement.gradingSystem' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examManagement.gradingSystem"></span>
                             </a>
                         }
                         @if (canHaveBonus) {
                             <a [routerLink]="getExamRoutesByIdentifier('bonus')" class="btn btn-info mt-1">
                                 <fa-icon [icon]="faAward" />
-                                <span>{{ 'artemisApp.examManagement.bonus' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.examManagement.bonus"></span>
                             </a>
                         }
                         <a id="scores-button" [routerLink]="getExamRoutesByIdentifier('scores')" class="btn btn-info mt-1">
                             <fa-icon [icon]="faEye" />
-                            <span>{{ 'entity.action.scores' | artemisTranslate }}</span>
+                            <span jhiTranslate="entity.action.scores"></span>
                         </a>
                         <a [routerLink]="getExamRoutesByIdentifier('plagiarism-cases')" class="tab-item btn btn-info btn-md mt-1">
                             <fa-icon [icon]="faHeartBroken" />
diff --git a/src/main/webapp/app/exam/manage/exams/exam-import/exam-import.component.html b/src/main/webapp/app/exam/manage/exams/exam-import/exam-import.component.html
index cc6e19353695..04c0f2e4ae7c 100644
--- a/src/main/webapp/app/exam/manage/exams/exam-import/exam-import.component.html
+++ b/src/main/webapp/app/exam/manage/exams/exam-import/exam-import.component.html
@@ -1,10 +1,10 @@
 <form>
     <div class="modal-header">
         @if (!subsequentExerciseGroupSelection) {
-            <h4 class="modal-title">{{ 'artemisApp.examManagement.importExam' | artemisTranslate }}</h4>
+            <h4 class="modal-title" jhiTranslate="artemisApp.examManagement.importExam"></h4>
         }
         @if (subsequentExerciseGroupSelection) {
-            <h4 class="modal-title">{{ 'artemisApp.examManagement.exerciseGroup.import' | artemisTranslate }}</h4>
+            <h4 class="modal-title" jhiTranslate="artemisApp.examManagement.exerciseGroup.import"></h4>
         }
         <button type="button" class="btn-close" data-dismiss="modal" aria-hidden="true" (click)="clear()"></button>
     </div>
@@ -54,10 +54,10 @@ <h4 class="modal-title">{{ 'artemisApp.examManagement.exerciseGroup.import' | ar
                             </td>
                             <td class="text-break col-2">
                                 @if (!exam.testExam) {
-                                    <span class="badge bg-success">{{ 'artemisApp.examManagement.testExam.realExam' | artemisTranslate }}</span>
+                                    <span class="badge bg-success" jhiTranslate="artemisApp.examManagement.testExam.realExam"></span>
                                 }
                                 @if (exam.testExam) {
-                                    <span class="badge bg-primary">{{ 'artemisApp.examManagement.testExam.testExam' | artemisTranslate }}</span>
+                                    <span class="badge bg-primary" jhiTranslate="artemisApp.examManagement.testExam.testExam"></span>
                                 }
                             </td>
                             <td class="col-1">
diff --git a/src/main/webapp/app/exam/manage/exams/exam-mode-picker/exam-mode-picker.component.html b/src/main/webapp/app/exam/manage/exams/exam-mode-picker/exam-mode-picker.component.html
index 49ee3579c49e..fe55d21b62a8 100644
--- a/src/main/webapp/app/exam/manage/exams/exam-mode-picker/exam-mode-picker.component.html
+++ b/src/main/webapp/app/exam/manage/exams/exam-mode-picker/exam-mode-picker.component.html
@@ -1,8 +1,14 @@
 <div id="exam-mode-picker" class="d-flex align-items-start">
     <div class="btn-group" [ngClass]="{ disabled: disableInput }">
-        <div id="standard-mode" class="btn" [class.btn-success]="!exam.testExam" [class.btn-default]="exam.testExam" [class.disabled]="disableInput" (click)="setExamMode(false)">
-            {{ 'artemisApp.examManagement.testExam.realExam' | artemisTranslate }}
-        </div>
+        <div
+            id="standard-mode"
+            class="btn"
+            [class.btn-success]="!exam.testExam"
+            [class.btn-default]="exam.testExam"
+            [class.disabled]="disableInput"
+            (click)="setExamMode(false)"
+            jhiTranslate="artemisApp.examManagement.testExam.realExam"
+        ></div>
         <div
             id="test-mode"
             class="btn btn-default"
@@ -10,8 +16,7 @@
             [class.btn-default]="!exam.testExam"
             [class.disabled]="disableInput"
             (click)="setExamMode(true)"
-        >
-            {{ 'artemisApp.examManagement.testExam.testExam' | artemisTranslate }}
-        </div>
+            jhiTranslate="artemisApp.examManagement.testExam.testExam"
+        ></div>
     </div>
 </div>
diff --git a/src/main/webapp/app/exam/manage/exams/exam-update.component.html b/src/main/webapp/app/exam/manage/exams/exam-update.component.html
index 01c1a8c61705..780e07a92c40 100644
--- a/src/main/webapp/app/exam/manage/exams/exam-update.component.html
+++ b/src/main/webapp/app/exam/manage/exams/exam-update.component.html
@@ -4,15 +4,15 @@
             @if (!exam.id) {
                 <div class="d-flex align-items-center">
                     @if (!isImport) {
-                        <h4>{{ 'artemisApp.examManagement.createExam' | artemisTranslate }}</h4>
+                        <h4 jhiTranslate="artemisApp.examManagement.createExam"></h4>
                     }
                     @if (isImport) {
-                        <h4>{{ 'artemisApp.examManagement.importExam' | artemisTranslate }}</h4>
+                        <h4 jhiTranslate="artemisApp.examManagement.importExam"></h4>
                     }
                     <jhi-documentation-button [type]="documentationType" />
                 </div>
             } @else {
-                <h4>{{ 'artemisApp.examManagement.editExam' | artemisTranslate }}</h4>
+                <h4 jhiTranslate="artemisApp.examManagement.editExam"></h4>
             }
             <!-- Section exam configuration -->
             <div>
@@ -102,7 +102,7 @@ <h5 class="pb-1" jhiTranslate="artemisApp.examManagement.sections.conduction"></
                         id="startDate"
                     />
                     @if (isStartDateSet && isValidStartDateValue && !isValidStartDate) {
-                        <span class="invalid-feedback"> {{ 'entity.startDateError' | artemisTranslate }}</span>
+                        <span class="invalid-feedback" jhiTranslate="entity.startDateError"></span>
                     }
                 </div>
                 <div class="col-sm-4">
@@ -118,7 +118,7 @@ <h5 class="pb-1" jhiTranslate="artemisApp.examManagement.sections.conduction"></
                         id="endDate"
                     />
                     @if (isEndDateSet && isValidEndDateValue && !isValidEndDate) {
-                        <span class="invalid-feedback"> {{ 'entity.endDateError' | artemisTranslate }}</span>
+                        <span class="invalid-feedback" jhiTranslate="entity.endDateError"></span>
                     }
                 </div>
             </div>
@@ -232,7 +232,7 @@ <h6 class="pb-1" jhiTranslate="artemisApp.examManagement.sections.assessmentEmpt
                                 id="examStudentReviewEnd"
                             />
                             @if (!isValidExamStudentReviewEnd) {
-                                <span class="invalid-feedback"> {{ 'artemisApp.examManagement.reviewDatesInvalidWarning' | artemisTranslate }}</span>
+                                <span class="invalid-feedback" jhiTranslate="artemisApp.examManagement.reviewDatesInvalidWarning"></span>
                             }
                         </div>
                     </div>
@@ -279,7 +279,7 @@ <h5 class="pb-1" jhiTranslate="artemisApp.examManagement.sections.text"></h5>
                     <fa-icon [icon]="faSave" />&nbsp;{{ 'entity.action.' + (isImport ? 'import' : 'save') | artemisTranslate }}
                 </button>
                 <ng-template #renderedWarning>
-                    <div>{{ 'artemisApp.examManagement.reviewDatesInvalidExplanation' | artemisTranslate }}</div>
+                    <div jhiTranslate="artemisApp.examManagement.reviewDatesInvalidExplanation"></div>
                 </ng-template>
                 @if (!isValidExamStudentReviewEnd) {
                     <span class="badge bg-warning" [ngbTooltip]="renderedWarning" placement="right auto">
diff --git a/src/main/webapp/app/exam/manage/exercise-groups/exercise-group-update.component.html b/src/main/webapp/app/exam/manage/exercise-groups/exercise-group-update.component.html
index dedbac0c4960..fd9aab7bd355 100644
--- a/src/main/webapp/app/exam/manage/exercise-groups/exercise-group-update.component.html
+++ b/src/main/webapp/app/exam/manage/exercise-groups/exercise-group-update.component.html
@@ -1,5 +1,5 @@
 <div>
-    <h4>{{ (exerciseGroup.id ? 'artemisApp.examManagement.exerciseGroup.update' : 'artemisApp.examManagement.exerciseGroup.create') | artemisTranslate }}</h4>
+    <h4 jhiTranslate="{{ exerciseGroup.id ? 'artemisApp.examManagement.exerciseGroup.update' : 'artemisApp.examManagement.exerciseGroup.create' }}"></h4>
     <form name="editForm" role="form" #editForm="ngForm" (ngSubmit)="save()">
         <div class="form-group">
             <label class="form-check-label" for="title" jhiTranslate="artemisApp.examManagement.exerciseGroup.title"></label>
@@ -10,7 +10,7 @@ <h4>{{ (exerciseGroup.id ? 'artemisApp.examManagement.exerciseGroup.update' : 'a
             <label class="form-check-label" for="isMandatory" jhiTranslate="artemisApp.examManagement.exerciseGroup.mandatory"></label>
         </div>
         <ngb-alert [type]="alertType" [dismissible]="false">
-            <span>{{ 'artemisApp.examManagement.exerciseGroup.titleInfo' | artemisTranslate }}</span>
+            <span jhiTranslate="artemisApp.examManagement.exerciseGroup.titleInfo"></span>
         </ngb-alert>
         <div class="mt-3">
             <button type="button" class="btn btn-secondary" (click)="previousState()"><fa-icon [icon]="faBan" />&nbsp;<span jhiTranslate="entity.action.cancel"></span></button>
diff --git a/src/main/webapp/app/exam/manage/exercise-groups/exercise-groups.component.html b/src/main/webapp/app/exam/manage/exercise-groups/exercise-groups.component.html
index 3ef9ff418472..8b72a9f8f417 100644
--- a/src/main/webapp/app/exam/manage/exercise-groups/exercise-groups.component.html
+++ b/src/main/webapp/app/exam/manage/exercise-groups/exercise-groups.component.html
@@ -1,6 +1,6 @@
 <div class="d-flex pb-3 border-bottom mb-2">
     <div class="d-flex flex-column justify-content-center">
-        <h4 class="mb-0">{{ 'artemisApp.examManagement.exerciseGroups' | artemisTranslate }}</h4>
+        <h4 class="mb-0" jhiTranslate="artemisApp.examManagement.exerciseGroups"></h4>
     </div>
     @if (course?.isAtLeastEditor) {
         <div class="ms-auto d-flex flex-wrap">
@@ -51,12 +51,12 @@ <h5 class="group-title font-weight-bold mb-0">{{ exerciseGroup.title }}</h5>
                             <div class="btn-group-vertical me-1 mb-1" style="justify-content: end">
                                 <a [routerLink]="[exerciseGroup.id, 'file-upload-exercises', 'new']" class="btn btn-info btn-sm me-1 mb-1" style="max-height: 44%">
                                     <fa-icon [icon]="faPlus" />
-                                    <span class="d-none d-xl-inline">{{ 'artemisApp.fileUploadExercise.home.createLabel' | artemisTranslate }}</span>
+                                    <span class="d-none d-xl-inline" jhiTranslate="artemisApp.fileUploadExercise.home.createLabel"></span>
                                     <fa-icon [icon]="faFileUpload" />
                                 </a>
                                 <a (click)="openImportModal(exerciseGroup, exerciseType.FILE_UPLOAD)" class="btn btn-info btn-sm me-1 mb-1">
                                     <fa-icon [icon]="faFileImport" />
-                                    <span class="d-none d-xl-inline">{{ 'artemisApp.fileUploadExercise.home.importLabel' | artemisTranslate }}</span>
+                                    <span class="d-none d-xl-inline" jhiTranslate="artemisApp.fileUploadExercise.home.importLabel"></span>
                                     <fa-icon [icon]="faFileUpload" />
                                 </a>
                             </div>
@@ -65,12 +65,12 @@ <h5 class="group-title font-weight-bold mb-0">{{ exerciseGroup.title }}</h5>
                             <div class="btn-group-vertical me-1 mb-1" style="justify-content: end">
                                 <a [routerLink]="[exerciseGroup.id, 'quiz-exercises', 'new']" class="add-quiz-exercise btn btn-info btn-sm me-1 mb-1" style="max-height: 44%">
                                     <fa-icon [icon]="faPlus" />
-                                    <span class="d-none d-xl-inline">{{ 'artemisApp.quizExercise.home.createLabel' | artemisTranslate }}</span>
+                                    <span class="d-none d-xl-inline" jhiTranslate="artemisApp.quizExercise.home.createLabel"></span>
                                     <fa-icon [icon]="faCheckDouble" />
                                 </a>
                                 <a (click)="openImportModal(exerciseGroup, exerciseType.QUIZ)" class="btn btn-info btn-sm me-1 mb-1">
                                     <fa-icon [icon]="faFileImport" />
-                                    <span class="d-none d-xl-inline">{{ 'artemisApp.quizExercise.home.importLabel' | artemisTranslate }}</span>
+                                    <span class="d-none d-xl-inline" jhiTranslate="artemisApp.quizExercise.home.importLabel"></span>
                                     <fa-icon [icon]="faCheckDouble" />
                                 </a>
                             </div>
@@ -79,12 +79,12 @@ <h5 class="group-title font-weight-bold mb-0">{{ exerciseGroup.title }}</h5>
                             <div class="btn-group-vertical me-1 mb-1">
                                 <a [routerLink]="[exerciseGroup.id, 'text-exercises', 'new']" class="add-text-exercise btn btn-info btn-sm me-1 mb-1">
                                     <fa-icon [icon]="faPlus" />
-                                    <span class="d-none d-xl-inline">{{ 'artemisApp.textExercise.home.createLabel' | artemisTranslate }}</span>
+                                    <span class="d-none d-xl-inline" jhiTranslate="artemisApp.textExercise.home.createLabel"></span>
                                     <fa-icon [icon]="faFont" />
                                 </a>
                                 <a (click)="openImportModal(exerciseGroup, exerciseType.TEXT)" class="btn btn-info btn-sm me-1 mb-1">
                                     <fa-icon [icon]="faFileImport" />
-                                    <span class="d-none d-xl-inline">{{ 'artemisApp.textExercise.home.importLabel' | artemisTranslate }}</span>
+                                    <span class="d-none d-xl-inline" jhiTranslate="artemisApp.textExercise.home.importLabel"></span>
                                     <fa-icon [icon]="faFont" />
                                 </a>
                             </div>
@@ -93,12 +93,12 @@ <h5 class="group-title font-weight-bold mb-0">{{ exerciseGroup.title }}</h5>
                             <div class="btn-group-vertical me-1 mb-1">
                                 <a [routerLink]="[exerciseGroup.id, 'modeling-exercises', 'new']" class="add-modeling-exercise btn btn-info btn-sm me-1 mb-1">
                                     <fa-icon [icon]="faPlus" />
-                                    <span class="d-none d-xl-inline">{{ 'artemisApp.modelingExercise.home.createLabel' | artemisTranslate }}</span>
+                                    <span class="d-none d-xl-inline" jhiTranslate="artemisApp.modelingExercise.home.createLabel"></span>
                                     <fa-icon [icon]="faProjectDiagram" />
                                 </a>
                                 <a (click)="openImportModal(exerciseGroup, exerciseType.MODELING)" class="btn btn-info btn-sm me-1 mb-1">
                                     <fa-icon [icon]="faFileImport" />
-                                    <span class="d-none d-xl-inline">{{ 'artemisApp.modelingExercise.home.importLabel' | artemisTranslate }}</span>
+                                    <span class="d-none d-xl-inline" jhiTranslate="artemisApp.modelingExercise.home.importLabel"></span>
                                     <fa-icon [icon]="faProjectDiagram" />
                                 </a>
                             </div>
@@ -107,12 +107,12 @@ <h5 class="group-title font-weight-bold mb-0">{{ exerciseGroup.title }}</h5>
                             <div class="btn-group-vertical me-1 mb-1">
                                 <a [routerLink]="[exerciseGroup.id, 'programming-exercises', 'new']" class="add-programming-exercise btn btn-info btn-sm me-1 mb-1">
                                     <fa-icon [icon]="faPlus" />
-                                    <span class="d-none d-xl-inline">{{ 'artemisApp.programmingExercise.home.createLabel' | artemisTranslate }}</span>
+                                    <span class="d-none d-xl-inline" jhiTranslate="artemisApp.programmingExercise.home.createLabel"></span>
                                     <fa-icon [icon]="faKeyboard" />
                                 </a>
                                 <a (click)="openImportModal(exerciseGroup, exerciseType.PROGRAMMING)" class="btn btn-info btn-sm me-1 mb-1">
                                     <fa-icon [icon]="faFileImport" />
-                                    <span class="d-none d-xl-inline">{{ 'artemisApp.programmingExercise.home.importLabel' | artemisTranslate }}</span>
+                                    <span class="d-none d-xl-inline" jhiTranslate="artemisApp.programmingExercise.home.importLabel"></span>
                                     <fa-icon [icon]="faKeyboard" />
                                 </a>
                             </div>
@@ -122,7 +122,7 @@ <h5 class="group-title font-weight-bold mb-0">{{ exerciseGroup.title }}</h5>
                                 <div class="d-flex flex-column me-1 mb-1">
                                     <a [routerLink]="[exerciseGroup.id, 'edit']" class="edit-group btn btn-warning btn-sm me-1 mb-1">
                                         <fa-icon [icon]="faWrench" />
-                                        <span class="d-none d-xl-inline">{{ 'entity.action.edit' | artemisTranslate }}</span>
+                                        <span class="d-none d-xl-inline" jhiTranslate="entity.action.edit"></span>
                                     </a>
                                     @if (
                                         exerciseGroup.id &&
@@ -181,50 +181,50 @@ <h5 class="group-title font-weight-bold mb-0">{{ exerciseGroup.title }}</h5>
                         <thead>
                             <tr>
                                 <th class="d-md-table-cell">
-                                    <span>{{ 'global.field.id' | artemisTranslate }}</span>
+                                    <span jhiTranslate="global.field.id"></span>
                                 </th>
                                 <th>
-                                    <span>{{ 'artemisApp.examManagement.exerciseGroup.type' | artemisTranslate }}</span>
+                                    <span jhiTranslate="artemisApp.examManagement.exerciseGroup.type"></span>
                                 </th>
                                 <th>
-                                    <span>{{ 'artemisApp.examManagement.exerciseGroup.title' | artemisTranslate }}</span>
+                                    <span jhiTranslate="artemisApp.examManagement.exerciseGroup.title"></span>
                                 </th>
                                 <th>
-                                    <span>{{ 'artemisApp.examManagement.exerciseGroup.points' | artemisTranslate }}</span>
+                                    <span jhiTranslate="artemisApp.examManagement.exerciseGroup.points"></span>
                                 </th>
                                 <th>
-                                    <span>{{ 'artemisApp.exercise.bonus' | artemisTranslate }}</span>
+                                    <span jhiTranslate="artemisApp.exercise.bonus"></span>
                                 </th>
                                 <th>
-                                    <span>{{ 'artemisApp.exercise.includedCompletely' | artemisTranslate }}</span>
+                                    <span jhiTranslate="artemisApp.exercise.includedCompletely"></span>
                                 </th>
                                 @if (exerciseGroup.id && exerciseGroupToExerciseTypesDict.get(exerciseGroup.id!)?.includes(exerciseType.PROGRAMMING)) {
                                     <th>
-                                        <span>{{ 'artemisApp.exercise.shortName' | artemisTranslate }}</span>
+                                        <span jhiTranslate="artemisApp.exercise.shortName"></span>
                                     </th>
                                     <th>
-                                        <span>{{ 'artemisApp.programmingExercise.repositories' | artemisTranslate }}</span>
+                                        <span jhiTranslate="artemisApp.programmingExercise.repositories"></span>
                                     </th>
                                     <th>
-                                        <span>{{ 'artemisApp.programmingExercise.buildplans' | artemisTranslate }}</span>
+                                        <span jhiTranslate="artemisApp.programmingExercise.buildplans"></span>
                                     </th>
                                     <th>
-                                        <span>{{ 'artemisApp.programmingExercise.participationMode' | artemisTranslate }}</span>
+                                        <span jhiTranslate="artemisApp.programmingExercise.participationMode"></span>
                                     </th>
                                 }
                                 @if (exerciseGroup.id && exerciseGroupToExerciseTypesDict.get(exerciseGroup.id)?.includes(exerciseType.QUIZ)) {
                                     <th>
-                                        <span>{{ 'artemisApp.quizExercise.questions' | artemisTranslate }}</span>
+                                        <span jhiTranslate="artemisApp.quizExercise.questions"></span>
                                     </th>
                                 }
                                 @if (exerciseGroup.id && exerciseGroupToExerciseTypesDict.get(exerciseGroup.id)?.includes(exerciseType.MODELING)) {
                                     <th>
-                                        <span>{{ 'artemisApp.modelingExercise.diagramType' | artemisTranslate }}</span>
+                                        <span jhiTranslate="artemisApp.modelingExercise.diagramType"></span>
                                     </th>
                                 }
                                 @if (exerciseGroup.id && exerciseGroupToExerciseTypesDict.get(exerciseGroup.id)?.includes(exerciseType.FILE_UPLOAD)) {
                                     <th>
-                                        <span>{{ 'artemisApp.fileUploadExercise.filePattern' | artemisTranslate }}</span>
+                                        <span jhiTranslate="artemisApp.fileUploadExercise.filePattern"></span>
                                     </th>
                                 }
                                 @if (
@@ -234,7 +234,7 @@ <h5 class="group-title font-weight-bold mb-0">{{ exerciseGroup.title }}</h5>
                                         exerciseGroupToExerciseTypesDict.get(exerciseGroup.id)?.includes(exerciseType.MODELING))
                                 ) {
                                     <th>
-                                        <span>{{ 'artemisApp.assessmentMode' | artemisTranslate }}</span>
+                                        <span jhiTranslate="artemisApp.assessmentMode"></span>
                                     </th>
                                 }
                                 <th></th>
@@ -365,9 +365,7 @@ <h5 class="group-title font-weight-bold mb-0">{{ exerciseGroup.title }}</h5>
                 </div>
             }
             @if (!exerciseGroup.exercises) {
-                <div>
-                    {{ 'artemisApp.examManagement.exerciseGroup.noExercises' | artemisTranslate }}
-                </div>
+                <div jhiTranslate="artemisApp.examManagement.exerciseGroup.noExercises"></div>
             }
         </div>
     </div>
diff --git a/src/main/webapp/app/exam/manage/student-exams/student-exams.component.html b/src/main/webapp/app/exam/manage/student-exams/student-exams.component.html
index fd714d8f3f14..5b85ae4215cd 100644
--- a/src/main/webapp/app/exam/manage/student-exams/student-exams.component.html
+++ b/src/main/webapp/app/exam/manage/student-exams/student-exams.component.html
@@ -177,7 +177,7 @@ <h2>
                     </span>
                 </ng-template>
                 <ng-template ngx-datatable-cell-template let-value="value">
-                    <span>{{ (value ? 'global.generic.yes' : 'global.generic.no') | artemisTranslate }}</span>
+                    <span jhiTranslate="{{ value ? 'global.generic.yes' : 'global.generic.no' }}"></span>
                 </ng-template>
             </ngx-datatable-column>
             <ngx-datatable-column prop="submitted" [minWidth]="80" [width]="80">
@@ -188,7 +188,7 @@ <h2>
                     </span>
                 </ng-template>
                 <ng-template ngx-datatable-cell-template let-value="value">
-                    <span class="submitted">{{ (value ? 'global.generic.yes' : 'global.generic.no') | artemisTranslate }}</span>
+                    <span class="submitted" jhiTranslate="{{ value ? 'global.generic.yes' : 'global.generic.no' }}"></span>
                 </ng-template>
             </ngx-datatable-column>
             <ngx-datatable-column prop="submissionDate" [minWidth]="130" [width]="130">
diff --git a/src/main/webapp/app/exam/manage/students/exam-students.component.html b/src/main/webapp/app/exam/manage/students/exam-students.component.html
index 471b3bcde32e..7a1aa199b56d 100644
--- a/src/main/webapp/app/exam/manage/students/exam-students.component.html
+++ b/src/main/webapp/app/exam/manage/students/exam-students.component.html
@@ -39,7 +39,7 @@ <h3>
                     title="{{ 'artemisApp.examManagement.examStudents.verifyAttendanceTooltip' | artemisTranslate }}"
                 >
                     <fa-icon [icon]="faCheck" />
-                    <span class="d-none d-md-inline">{{ 'artemisApp.examManagement.examStudents.verifyAttendanceBtn' | artemisTranslate }}</span>
+                    <span class="d-none d-md-inline" jhiTranslate="artemisApp.examManagement.examStudents.verifyAttendanceBtn"></span>
                 </a>
             }
             @if (!isTestExam) {
diff --git a/src/main/webapp/app/exam/manage/students/upload-images/students-upload-images-dialog.component.html b/src/main/webapp/app/exam/manage/students/upload-images/students-upload-images-dialog.component.html
index 1e4543088f11..ac30244295db 100644
--- a/src/main/webapp/app/exam/manage/students/upload-images/students-upload-images-dialog.component.html
+++ b/src/main/webapp/app/exam/manage/students/upload-images/students-upload-images-dialog.component.html
@@ -34,7 +34,7 @@ <h4 class="modal-title">
                 @if (hasParsed) {
                     <div>
                         <div class="ms-2">
-                            <strong>{{ 'artemisApp.importUsers.numberOfUsersNotImported' | artemisTranslate }}</strong>
+                            <strong jhiTranslate="artemisApp.importUsers.numberOfUsersNotImported"></strong>
                             <span
                                 ><b style="color: red">{{ notFoundUsers?.numberOfUsersNotFound }}</b></span
                             >
diff --git a/src/main/webapp/app/exam/manage/students/verify-attendance-check/exam-students-attendance-check.component.html b/src/main/webapp/app/exam/manage/students/verify-attendance-check/exam-students-attendance-check.component.html
index 2eee9c93ac88..85acc42e31d6 100644
--- a/src/main/webapp/app/exam/manage/students/verify-attendance-check/exam-students-attendance-check.component.html
+++ b/src/main/webapp/app/exam/manage/students/verify-attendance-check/exam-students-attendance-check.component.html
@@ -2,7 +2,7 @@
     @if (isLoading) {
         <div class="d-flex justify-content-center">
             <div class="spinner-border" role="status">
-                <span class="sr-only">{{ 'loading' | artemisTranslate }}</span>
+                <span class="sr-only" jhiTranslate="loading"></span>
             </div>
         </div>
     } @else {
@@ -35,26 +35,26 @@ <h3><span class="text-white badge bg-danger" [jhiTranslate]="'artemisApp.examMan
                 <thead>
                     <tr jhiSort [(predicate)]="predicate" [(ascending)]="ascending" (sortChange)="sortRows()">
                         <th class="d-md-table-cell" jhiSortBy="id">
-                            <span>{{ 'global.field.id' | artemisTranslate }}</span>
+                            <span jhiTranslate="global.field.id"></span>
                             <fa-icon [icon]="faSort" />
                         </th>
                         <th></th>
                         <th class="d-md-table-cell" jhiSortBy="login">
-                            <span>{{ 'artemisApp.examManagement.examStudents.login' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.examManagement.examStudents.login"></span>
                             <fa-icon [icon]="faSort" />
                         </th>
                         <th class="d-md-table-cell" jhiSortBy="registrationNumber">
-                            <span>{{ 'artemisApp.examManagement.examStudents.registrationNumber' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.examManagement.examStudents.registrationNumber"></span>
                             <fa-icon [icon]="faSort" />
                         </th>
                         <th class="d-md-table-cell">
-                            <span>{{ 'artemisApp.examManagement.examStudents.attendanceChecks' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.examManagement.examStudents.attendanceChecks"></span>
                         </th>
                         <th class="d-md-table-cell">
-                            <span>{{ 'artemisApp.studentExams.started' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.studentExams.started"></span>
                         </th>
                         <th class="d-md-table-cell">
-                            <span>{{ 'artemisApp.studentExams.submitted' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.studentExams.submitted"></span>
                         </th>
                     </tr>
                 </thead>
@@ -91,10 +91,10 @@ <h3>
                                 }
                             </td>
                             <td class="d-md-table-cell">
-                                <span>{{ (examUser?.started ? 'global.generic.yes' : 'global.generic.no') | artemisTranslate }}</span>
+                                <span jhiTranslate="{{ examUser?.started ? 'global.generic.yes' : 'global.generic.no' }}"></span>
                             </td>
                             <td class="d-md-table-cell">
-                                <span>{{ (examUser?.submitted ? 'global.generic.yes' : 'global.generic.no') | artemisTranslate }}</span>
+                                <span jhiTranslate="{{ examUser?.submitted ? 'global.generic.yes' : 'global.generic.no' }}"></span>
                             </td>
                         </tr>
                     }
diff --git a/src/main/webapp/app/exam/manage/suspicious-behavior/plagiarism-cases-overview/plagiarism-cases-overview.component.html b/src/main/webapp/app/exam/manage/suspicious-behavior/plagiarism-cases-overview/plagiarism-cases-overview.component.html
index d027012cf046..88b2917e7530 100644
--- a/src/main/webapp/app/exam/manage/suspicious-behavior/plagiarism-cases-overview/plagiarism-cases-overview.component.html
+++ b/src/main/webapp/app/exam/manage/suspicious-behavior/plagiarism-cases-overview/plagiarism-cases-overview.component.html
@@ -1,12 +1,12 @@
-<h5>{{ 'artemisApp.examManagement.plagiarismCasesOverview.title' | artemisTranslate }}</h5>
+<h5 jhiTranslate="artemisApp.examManagement.plagiarismCasesOverview.title"></h5>
 <table class="table">
     <thead>
         <tr>
             <th scope="col">#</th>
-            <th scope="col">{{ 'artemisApp.examManagement.plagiarismCasesOverview.exerciseName' | artemisTranslate }}</th>
-            <th scope="col">{{ 'artemisApp.examManagement.plagiarismCasesOverview.numberOfResults' | artemisTranslate }}</th>
-            <th scope="col">{{ 'artemisApp.examManagement.plagiarismCasesOverview.numberOfCases' | artemisTranslate }}</th>
-            <th scope="col">{{ 'artemisApp.examManagement.plagiarismCasesOverview.actions' | artemisTranslate }}</th>
+            <th scope="col" jhiTranslate="artemisApp.examManagement.plagiarismCasesOverview.exerciseName"></th>
+            <th scope="col" jhiTranslate="artemisApp.examManagement.plagiarismCasesOverview.numberOfResults"></th>
+            <th scope="col" jhiTranslate="artemisApp.examManagement.plagiarismCasesOverview.numberOfCases"></th>
+            <th scope="col" jhiTranslate="artemisApp.examManagement.plagiarismCasesOverview.actions"></th>
         </tr>
     </thead>
     <tbody>
@@ -17,16 +17,22 @@ <h5>{{ 'artemisApp.examManagement.plagiarismCasesOverview.title' | artemisTransl
                 <td>{{ plagiarismResultsPerExercise.get(exercise) }}</td>
                 <td>{{ plagiarismCasesPerExercise.get(exercise) }}</td>
                 <td>
-                    <button id="view-plagiarism-results-btn-{{ i }}" class="btn btn-primary" (click)="goToPlagiarismDetection(exercise)">
-                        {{ 'artemisApp.examManagement.plagiarismCasesOverview.viewResultsOrRunDetection' | artemisTranslate }}
-                    </button>
+                    <button
+                        id="view-plagiarism-results-btn-{{ i }}"
+                        class="btn btn-primary"
+                        (click)="goToPlagiarismDetection(exercise)"
+                        jhiTranslate="artemisApp.examManagement.plagiarismCasesOverview.viewResultsOrRunDetection"
+                    ></button>
                 </td>
             </tr>
         }
     </tbody>
 </table>
 @if (anyPlagiarismCases) {
-    <button class="btn btn-primary" id="view-plagiarism-cases-btn" (click)="goToPlagiarismCases()">
-        {{ 'artemisApp.examManagement.plagiarismCasesOverview.viewCases' | artemisTranslate }}
-    </button>
+    <button
+        class="btn btn-primary"
+        id="view-plagiarism-cases-btn"
+        (click)="goToPlagiarismCases()"
+        jhiTranslate="artemisApp.examManagement.plagiarismCasesOverview.viewCases"
+    ></button>
 }
diff --git a/src/main/webapp/app/exam/manage/suspicious-behavior/suspicious-behavior.component.html b/src/main/webapp/app/exam/manage/suspicious-behavior/suspicious-behavior.component.html
index 6e5324ec1046..fbe0e73a6b1d 100644
--- a/src/main/webapp/app/exam/manage/suspicious-behavior/suspicious-behavior.component.html
+++ b/src/main/webapp/app/exam/manage/suspicious-behavior/suspicious-behavior.component.html
@@ -2,12 +2,10 @@ <h5>
     {{ 'artemisApp.examManagement.suspiciousBehavior.title' | artemisTranslate }}
     <jhi-documentation-button [type]="documentationType" />
 </h5>
-<p>
-    {{ 'artemisApp.examManagement.suspiciousBehavior.suspiciousSessionDescription' | artemisTranslate }}
-</p>
+<p jhiTranslate="artemisApp.examManagement.suspiciousBehavior.suspiciousSessionDescription"></p>
 <div>
     <input class="form-check-input" type="checkbox" id="different-student-exams-same-ip" [(ngModel)]="checkboxCriterionDifferentStudentExamsSameIPAddressChecked" />
-    <label for="different-student-exams-same-ip">{{ 'artemisApp.examManagement.suspiciousBehavior.suspiciousSessionCriterionIpAddress' | artemisTranslate }}</label>
+    <label for="different-student-exams-same-ip" jhiTranslate="artemisApp.examManagement.suspiciousBehavior.suspiciousSessionCriterionIpAddress"></label>
 </div>
 <div>
     <input
@@ -16,13 +14,11 @@ <h5>
         id="different-student-exams-same-fingerprints"
         [(ngModel)]="checkboxCriterionDifferentStudentExamsSameBrowserFingerprintChecked"
     />
-    <label for="different-student-exams-same-fingerprints">{{
-        'artemisApp.examManagement.suspiciousBehavior.suspiciousSessionCriterionBrowserFingerprint' | artemisTranslate
-    }}</label>
+    <label for="different-student-exams-same-fingerprints" jhiTranslate="artemisApp.examManagement.suspiciousBehavior.suspiciousSessionCriterionBrowserFingerprint"></label>
 </div>
 <div>
     <input class="form-check-input" type="checkbox" id="same-student-exam-different-ips" [(ngModel)]="checkboxCriterionSameStudentExamDifferentIPAddressesChecked" />
-    <label for="same-student-exam-different-ips">{{ 'artemisApp.examManagement.suspiciousBehavior.suspiciousSessionCriterionDifferentIpAddress' | artemisTranslate }}</label>
+    <label for="same-student-exam-different-ips" jhiTranslate="artemisApp.examManagement.suspiciousBehavior.suspiciousSessionCriterionDifferentIpAddress"></label>
 </div>
 <div>
     <input
@@ -31,18 +27,16 @@ <h5>
         id="same-student-exam-different-fingerprints"
         [(ngModel)]="checkboxCriterionSameStudentExamDifferentBrowserFingerprintsChecked"
     />
-    <label for="same-student-exam-different-fingerprints">{{
-        'artemisApp.examManagement.suspiciousBehavior.suspiciousSessionCriterionDifferentBrowserFingerprint' | artemisTranslate
-    }}</label>
+    <label for="same-student-exam-different-fingerprints" jhiTranslate="artemisApp.examManagement.suspiciousBehavior.suspiciousSessionCriterionDifferentBrowserFingerprint"></label>
 </div>
 <div>
     <input class="form-check-input" type="checkbox" id="ip-outside-of-range" [(ngModel)]="checkboxCriterionIPOutsideOfASpecificRangeChecked" />
-    <label for="ip-outside-of-range">{{ 'artemisApp.examManagement.suspiciousBehavior.suspiciousSessionCriterionIpOutsideOfRange' | artemisTranslate }}</label>
+    <label for="ip-outside-of-range" jhiTranslate="artemisApp.examManagement.suspiciousBehavior.suspiciousSessionCriterionIpOutsideOfRange"></label>
 </div>
 @if (checkboxCriterionIPOutsideOfASpecificRangeChecked) {
     <div class="form-group col-6">
         <div class="d-flex">
-            <label for="ip-subnet" class="me-2">{{ 'artemisApp.examManagement.suspiciousBehavior.subnet' | artemisTranslate }}</label>
+            <label for="ip-subnet" class="me-2" jhiTranslate="artemisApp.examManagement.suspiciousBehavior.subnet"></label>
             <jhi-help-icon text="artemisApp.examManagement.suspiciousBehavior.subnetHelp" />
         </div>
         <input type="text" class="form-control" id="ip-subnet" [(ngModel)]="ipSubnet" [pattern]="ipSubnetRegexPattern" required />
diff --git a/src/main/webapp/app/exam/manage/suspicious-behavior/suspicious-sessions-overview/suspicious-sessions-overview.component.html b/src/main/webapp/app/exam/manage/suspicious-behavior/suspicious-sessions-overview/suspicious-sessions-overview.component.html
index 99d55bae1d19..369a156ad591 100644
--- a/src/main/webapp/app/exam/manage/suspicious-behavior/suspicious-sessions-overview/suspicious-sessions-overview.component.html
+++ b/src/main/webapp/app/exam/manage/suspicious-behavior/suspicious-sessions-overview/suspicious-sessions-overview.component.html
@@ -1,4 +1,4 @@
-<h5 class="mb-3">{{ 'artemisApp.examManagement.suspiciousBehavior.suspiciousSessions.title' | artemisTranslate }}</h5>
+<h5 class="mb-3" jhiTranslate="artemisApp.examManagement.suspiciousBehavior.suspiciousSessions.title"></h5>
 @for (suspiciousSessionsSet of suspiciousSessions; track suspiciousSessionsSet; let i = $index) {
     <p class="mb-0">
         {{ 'artemisApp.examManagement.suspiciousBehavior.suspiciousSessions.case' | artemisTranslate }}
@@ -18,12 +18,12 @@ <h5 class="mb-3">{{ 'artemisApp.examManagement.suspiciousBehavior.suspiciousSess
         <table class="table">
             <thead>
                 <tr>
-                    <th scope="col">{{ 'artemisApp.examSession.id' | artemisTranslate }}</th>
-                    <th scope="col">{{ 'artemisApp.examSession.browserFingerprintHash' | artemisTranslate }}</th>
-                    <th scope="col">{{ 'artemisApp.examSession.ipAddress' | artemisTranslate }}</th>
-                    <th scope="col">{{ 'artemisApp.examSession.createdDate' | artemisTranslate }}</th>
-                    <th scope="col">{{ 'artemisApp.examSession.studentExamId' | artemisTranslate }}</th>
-                    <th scope="col">{{ 'artemisApp.examSession.userLogin' | artemisTranslate }}</th>
+                    <th scope="col" jhiTranslate="artemisApp.examSession.id"></th>
+                    <th scope="col" jhiTranslate="artemisApp.examSession.browserFingerprintHash"></th>
+                    <th scope="col" jhiTranslate="artemisApp.examSession.ipAddress"></th>
+                    <th scope="col" jhiTranslate="artemisApp.examSession.createdDate"></th>
+                    <th scope="col" jhiTranslate="artemisApp.examSession.studentExamId"></th>
+                    <th scope="col" jhiTranslate="artemisApp.examSession.userLogin"></th>
                 </tr>
             </thead>
             <tbody jhi-suspicious-sessions [suspiciousSessions]="suspiciousSessionsSet"></tbody>
diff --git a/src/main/webapp/app/exam/manage/test-runs/test-run-management.component.html b/src/main/webapp/app/exam/manage/test-runs/test-run-management.component.html
index 7c794b51fee1..988dcfa83074 100644
--- a/src/main/webapp/app/exam/manage/test-runs/test-run-management.component.html
+++ b/src/main/webapp/app/exam/manage/test-runs/test-run-management.component.html
@@ -48,7 +48,7 @@ <h2><span jhiTranslate="artemisApp.examManagement.testRun.title"></span>{{ exam?
                 <thead>
                     <tr jhiSort [(predicate)]="predicate" [(ascending)]="ascending" (sortChange)="sortRows()">
                         <th class="d-none d-md-table-cell" jhiSortBy="id">
-                            <span>{{ 'global.field.id' | artemisTranslate }}</span>
+                            <span jhiTranslate="global.field.id"></span>
                             <fa-icon [icon]="faSort" />
                         </th>
                         <th class="d-none d-md-table-cell" jhiSortBy="id">
@@ -84,8 +84,8 @@ <h2><span jhiTranslate="artemisApp.examManagement.testRun.title"></span>{{ exam?
                                 <a> {{ testRun.user?.name || '--' }}</a>
                             </td>
                             <td class="working-time">{{ testRun.workingTime || 0 | artemisDurationFromSeconds }}</td>
-                            <td class="started">{{ (testRun.started ? 'global.generic.yes' : 'global.generic.no') | artemisTranslate }}</td>
-                            <td class="submitted">{{ (testRun.submitted ? 'global.generic.yes' : 'global.generic.no') | artemisTranslate }}</td>
+                            <td class="started" jhiTranslate="{{ testRun.started ? 'global.generic.yes' : 'global.generic.no' }}"></td>
+                            <td class="submitted" jhiTranslate="{{ testRun.submitted ? 'global.generic.yes' : 'global.generic.no' }}"></td>
                             <td>{{ testRun.submissionDate | artemisDate }}</td>
                             <td [width]="350">
                                 <div class="w-100 text-end">
diff --git a/src/main/webapp/app/exam/participate/exam-cover/exam-participation-cover.component.html b/src/main/webapp/app/exam/participate/exam-cover/exam-participation-cover.component.html
index a90146998779..9d56b746c3c9 100644
--- a/src/main/webapp/app/exam/participate/exam-cover/exam-participation-cover.component.html
+++ b/src/main/webapp/app/exam/participate/exam-cover/exam-participation-cover.component.html
@@ -193,9 +193,7 @@ <h4 id="exam-finished-title">
         </div>
         @if (handInEarly) {
             <div class="mt-3">
-                <div class="mb-2 font-weight-bold text-secondary">
-                    {{ 'artemisApp.examParticipation.continueAfterHandInEarlyDescription' | artemisTranslate }}
-                </div>
+                <div class="mb-2 font-weight-bold text-secondary" jhiTranslate="artemisApp.examParticipation.continueAfterHandInEarlyDescription"></div>
             </div>
         }
         <div class="d-flex justify-content-end gap-3">
diff --git a/src/main/webapp/app/exam/participate/exam-navigation-bar/exam-navigation-bar.component.html b/src/main/webapp/app/exam/participate/exam-navigation-bar/exam-navigation-bar.component.html
index 7d86f3a1f68b..e8f14a4be1c1 100644
--- a/src/main/webapp/app/exam/participate/exam-navigation-bar/exam-navigation-bar.component.html
+++ b/src/main/webapp/app/exam/participate/exam-navigation-bar/exam-navigation-bar.component.html
@@ -1,19 +1,22 @@
 <div class="row justify-content-between align-items-start exam-navigation pt-3">
     <div class="col m-0">
         @if (exercises && exercises.length > 0 && !overviewPageOpen) {
-            <div class="col d-none d-lg-block h3 m-0 text-overflow">
-                {{ 'artemisApp.examParticipation.progress' | artemisTranslate: { current: exerciseIndex + 1, all: exercises.length } }}
-            </div>
+            <div
+                class="col d-none d-lg-block h3 m-0 text-overflow"
+                jhiTranslate="artemisApp.examParticipation.progress"
+                [translateValues]="{ current: exerciseIndex + 1, all: exercises.length }"
+            ></div>
         }
         @if (exercises && exercises.length > 0 && !overviewPageOpen) {
-            <div class="col d-block d-lg-none h3 m-0 text-overflow" style="flex: 0.2">
-                {{ 'artemisApp.examParticipation.progressSmall' | artemisTranslate: { current: exerciseIndex + 1, all: exercises.length } }}
-            </div>
+            <div
+                class="col d-block d-lg-none h3 m-0 text-overflow"
+                style="flex: 0.2"
+                jhiTranslate="artemisApp.examParticipation.progressSmall"
+                [translateValues]="{ current: exerciseIndex + 1, all: exercises.length }"
+            ></div>
         }
         @if (overviewPageOpen) {
-            <div class="h3 m-0 text-overflow d-block col">
-                {{ 'artemisApp.examParticipation.examOverview' | artemisTranslate }}
-            </div>
+            <div class="h3 m-0 text-overflow d-block col" jhiTranslate="artemisApp.examParticipation.examOverview"></div>
         }
         <div class="mt-2">
             <jhi-exam-live-events-button />
@@ -83,9 +86,7 @@
                             {{ 'artemisApp.examParticipation.' + (exerciseIndex >= exercises.length - 1 ? 'submitLastExercise' : 'submitOtherExercise') | artemisTranslate }}
                         </button>
                     }
-                    <button id="hand-in-early" class="btn btn-danger ms-2" (click)="handInEarly()">
-                        {{ 'artemisApp.examParticipation.handInEarly' | artemisTranslate }}
-                    </button>
+                    <button id="hand-in-early" class="btn btn-danger ms-2" (click)="handInEarly()" jhiTranslate="artemisApp.examParticipation.handInEarly"></button>
                 </div>
                 <div class="ms-3 mb-2">
                     <jhi-exam-timer class="d-flex justify-content-end mx-0" [criticalTime]="criticalTime" [endDate]="endDate" (timerAboutToEnd)="triggerExamAboutToEnd()" />
diff --git a/src/main/webapp/app/exam/participate/exam-participation.component.html b/src/main/webapp/app/exam/participate/exam-participation.component.html
index bfa6fe636568..391c435fee09 100644
--- a/src/main/webapp/app/exam/participate/exam-participation.component.html
+++ b/src/main/webapp/app/exam/participate/exam-participation.component.html
@@ -96,9 +96,11 @@
                             @if ((generateParticipationStatus | async) === 'failed') {
                                 <div class="d-flex justify-content-center align-items-center">
                                     <p class="mb-0" jhiTranslate="artemisApp.examParticipation.generateParticipationFailed"></p>
-                                    <button class="btn btn-sm btn-primary px-3 ms-2" (click)="createParticipationForExercise(this.activeExamPage.exercise!).subscribe()">
-                                        {{ 'artemisApp.examParticipation.generateParticipationRetry' | artemisTranslate }}
-                                    </button>
+                                    <button
+                                        class="btn btn-sm btn-primary px-3 ms-2"
+                                        (click)="createParticipationForExercise(this.activeExamPage.exercise!).subscribe()"
+                                        jhiTranslate="artemisApp.examParticipation.generateParticipationRetry"
+                                    ></button>
                                 </div>
                             }
 
diff --git a/src/main/webapp/app/exam/participate/exercises/file-upload/file-upload-exam-submission.component.html b/src/main/webapp/app/exam/participate/exercises/file-upload/file-upload-exam-submission.component.html
index e1aae0b032ca..be5dce5a54a3 100644
--- a/src/main/webapp/app/exam/participate/exercises/file-upload/file-upload-exam-submission.component.html
+++ b/src/main/webapp/app/exam/participate/exercises/file-upload/file-upload-exam-submission.component.html
@@ -27,9 +27,12 @@ <h3 class="text-align-left fw-normal">
                                     <input #fileInput id="fileUploadInput" type="file" class="custom-file-input" (change)="setFileSubmissionForExercise($event)" />
                                 </div>
                                 <div class="col-4">
-                                    <button class="btn btn-primary" id="file-upload-submit" (click)="saveUploadedFile()">
-                                        {{ 'artemisApp.examParticipation.uploadFile' | artemisTranslate }}
-                                    </button>
+                                    <button
+                                        class="btn btn-primary"
+                                        id="file-upload-submit"
+                                        (click)="saveUploadedFile()"
+                                        jhiTranslate="artemisApp.examParticipation.uploadFile"
+                                    ></button>
                                 </div>
                             </div>
                             <p class="d-inline-block" jhiTranslate="artemisApp.fileUploadExercise.supportedFileExtensions"></p>
@@ -46,9 +49,7 @@ <h3 class="text-align-left fw-normal">
             </div>
             @if (submittedFileName && studentSubmission?.filePath) {
                 <div class="card-text">
-                    <h6>
-                        {{ 'artemisApp.fileUploadSubmission.submittedFile' | artemisTranslate: { filename: submittedFileName } }}
-                    </h6>
+                    <h6 jhiTranslate="artemisApp.fileUploadSubmission.submittedFile" [translateValues]="{ filename: submittedFileName }"></h6>
                     <a class="text-primary" (click)="downloadFile(studentSubmission!.filePath!)" jhiTranslate="artemisApp.fileUploadSubmission.download"></a>
                     @if (submittedFileExtension) {
                         <span class="ms-2 badge bg-info">
@@ -59,9 +60,7 @@ <h6>
             }
             @if (!submittedFileName && examTimeline) {
                 <div>
-                    <h6>
-                        {{ 'artemisApp.timeline.fileUploadNotSubmitted' | artemisTranslate }}
-                    </h6>
+                    <h6 jhiTranslate="artemisApp.timeline.fileUploadNotSubmitted"></h6>
                 </div>
             }
         </div>
diff --git a/src/main/webapp/app/exam/participate/exercises/text/text-exam-submission.component.html b/src/main/webapp/app/exam/participate/exercises/text/text-exam-submission.component.html
index b10c4cbac26c..653d0f6b0ad5 100644
--- a/src/main/webapp/app/exam/participate/exercises/text/text-exam-submission.component.html
+++ b/src/main/webapp/app/exam/participate/exercises/text/text-exam-submission.component.html
@@ -20,12 +20,8 @@ <h3 class="text-align-left fw-normal">
         <div left-body class="text-editor-grid mt-4 ps-2 pb-2 w-100">
             <div class="grid-area-main">
                 <div>
-                    <span class="badge bg-primary mb-2">
-                        {{ 'artemisApp.textExercise.wordCount' | artemisTranslate: { count: wordCount } }}
-                    </span>
-                    <span class="badge bg-primary mb-2">
-                        {{ 'artemisApp.textExercise.characterCount' | artemisTranslate: { count: characterCount } }}
-                    </span>
+                    <span class="badge bg-primary mb-2" jhiTranslate="artemisApp.textExercise.wordCount" [translateValues]="{ count: wordCount }"></span>
+                    <span class="badge bg-primary mb-2" jhiTranslate="artemisApp.textExercise.characterCount" [translateValues]="{ count: characterCount }"></span>
                 </div>
                 <ng-container>
                     <textarea
diff --git a/src/main/webapp/app/exam/participate/general-information/exam-general-information.component.html b/src/main/webapp/app/exam/participate/general-information/exam-general-information.component.html
index 17a9fe8d8752..d6b4a6cd2c74 100644
--- a/src/main/webapp/app/exam/participate/general-information/exam-general-information.component.html
+++ b/src/main/webapp/app/exam/participate/general-information/exam-general-information.component.html
@@ -1,8 +1,6 @@
 <div>
     @if (!displayOnExamCover) {
-        <h3 id="general-information-title">
-            {{ 'artemisApp.exam.examSummary.generalInformation' | artemisTranslate }}
-        </h3>
+        <h3 id="general-information-title" jhiTranslate="artemisApp.exam.examSummary.generalInformation"></h3>
     }
     <div class="ml-4 mt-3 mb-4">
         <table class="table table-borderless mx-auto d-block">
@@ -11,7 +9,7 @@ <h3 id="general-information-title">
                     <tr>
                         <th>{{ 'artemisApp.examManagement.testExam.examMode' | artemisTranslate }}:</th>
                         <td>
-                            <span class="badge bg-primary">{{ 'artemisApp.examManagement.testExam.testExam' | artemisTranslate }}</span>
+                            <span class="badge bg-primary" jhiTranslate="artemisApp.examManagement.testExam.testExam"></span>
                         </td>
                     </tr>
                 }
@@ -93,7 +91,7 @@ <h3 id="general-information-title">
                                 <span>{{ exam.examStudentReviewEnd | artemisDate }}</span>
                             }
                             @if (reviewIsOpen) {
-                                <div class="mx-2 badge bg-success">{{ 'artemisApp.exam.studentReviewEnabled' | artemisTranslate }}</div>
+                                <div class="mx-2 badge bg-success" jhiTranslate="artemisApp.exam.studentReviewEnabled"></div>
                             }
                         </td>
                     </tr>
diff --git a/src/main/webapp/app/exam/participate/summary/exam-result-summary.component.html b/src/main/webapp/app/exam/participate/summary/exam-result-summary.component.html
index 06c7ae63bf6f..f1017919bfb7 100644
--- a/src/main/webapp/app/exam/participate/summary/exam-result-summary.component.html
+++ b/src/main/webapp/app/exam/participate/summary/exam-result-summary.component.html
@@ -11,9 +11,7 @@ <h2>
 </div>
 @if (studentExam && !studentExam.submitted) {
     <div class="alert alert-danger text-center">
-        <strong>
-            {{ 'artemisApp.exam.examSummary.youAreViewingAnUnsubmittedExam' | artemisTranslate }}
-        </strong>
+        <strong jhiTranslate="artemisApp.exam.examSummary.youAreViewingAnUnsubmittedExam"></strong>
     </div>
 }
 @if (studentExam?.exam) {
@@ -42,9 +40,7 @@ <h2>
         {{ 'artemisApp.exam.resultInformation' | artemisTranslate }}
     </div>
 }
-<h3>
-    {{ 'artemisApp.exam.exercises' | artemisTranslate }}
-</h3>
+<h3 jhiTranslate="artemisApp.exam.exercises"></h3>
 @for (exercise of studentExam?.exercises; track exercise; let i = $index) {
     <div [id]="'exercise-' + exercise.id">
         <jhi-collapsible-card [isCardContentCollapsed]="exerciseInfos[exercise.id!].isCollapsed" [toggleCollapse]="toggleCollapseExercise(exerciseInfos[exercise.id!])">
diff --git a/src/main/webapp/app/exam/participate/summary/exercises/quiz-exam-summary/quiz-exam-summary.component.html b/src/main/webapp/app/exam/participate/summary/exercises/quiz-exam-summary/quiz-exam-summary.component.html
index 4e36d07cf014..712358bb9347 100644
--- a/src/main/webapp/app/exam/participate/summary/exercises/quiz-exam-summary/quiz-exam-summary.component.html
+++ b/src/main/webapp/app/exam/participate/summary/exercises/quiz-exam-summary/quiz-exam-summary.component.html
@@ -1,9 +1,7 @@
 @if (quizParticipation.quizQuestions && quizParticipation.quizQuestions.length > 0) {
     <div class="quiz-container">
         @if (showMissingResultsNotice) {
-            <div class="alert alert-info mb-2">
-                {{ 'artemisApp.exam.examSummary.missingResultNotice' | artemisTranslate }}
-            </div>
+            <div class="alert alert-info mb-2" jhiTranslate="artemisApp.exam.examSummary.missingResultNotice"></div>
         }
         @for (question of quizParticipation.quizQuestions!; track question; let i = $index) {
             <div class="quiz-content">
diff --git a/src/main/webapp/app/exam/shared/events/exam-live-event.component.html b/src/main/webapp/app/exam/shared/events/exam-live-event.component.html
index fa7d67675528..06bd840dcf5f 100644
--- a/src/main/webapp/app/exam/shared/events/exam-live-event.component.html
+++ b/src/main/webapp/app/exam/shared/events/exam-live-event.component.html
@@ -37,20 +37,20 @@
                         <table class="table table-borderless mx-auto">
                             <tbody>
                                 <tr>
-                                    <th>{{ 'artemisApp.studentExamDetail.name' | artemisTranslate }}</th>
+                                    <th jhiTranslate="artemisApp.studentExamDetail.name"></th>
                                     <td>{{ event.user?.firstName }} {{ event.user?.lastName }}</td>
                                 </tr>
                                 <tr>
-                                    <th>{{ 'artemisApp.studentExamDetail.login' | artemisTranslate }}</th>
+                                    <th jhiTranslate="artemisApp.studentExamDetail.login"></th>
                                     <td>{{ event.user?.login }}</td>
                                 </tr>
                                 <tr>
-                                    <th>{{ 'artemisApp.studentExamDetail.email' | artemisTranslate }}</th>
+                                    <th jhiTranslate="artemisApp.studentExamDetail.email"></th>
                                     <td>{{ event.user?.email }}</td>
                                 </tr>
                                 @if (event.user?.visibleRegistrationNumber) {
                                     <tr>
-                                        <th>{{ 'artemisApp.studentExamDetail.matriculationNumber' | artemisTranslate }}</th>
+                                        <th jhiTranslate="artemisApp.studentExamDetail.matriculationNumber"></th>
                                         <td>{{ event.user?.visibleRegistrationNumber }}</td>
                                     </tr>
                                 }
@@ -61,11 +61,12 @@
             }
             @case (ExamLiveEventType.PROBLEM_STATEMENT_UPDATE) {
                 <div>
-                    <div>
-                        {{ 'artemisApp.exam.events.messages.problemStatementUpdate.description' | artemisTranslate: { exerciseName: problemStatementUpdateEvent.exerciseName } }}
-                    </div>
+                    <div
+                        jhiTranslate="artemisApp.exam.events.messages.problemStatementUpdate.description"
+                        [translateValues]="{ exerciseName: problemStatementUpdateEvent.exerciseName }"
+                    ></div>
                     @if (problemStatementUpdateEvent.text) {
-                        <div>{{ 'artemisApp.exam.events.messages.problemStatementUpdate.instructorMessage' | artemisTranslate }}</div>
+                        <div jhiTranslate="artemisApp.exam.events.messages.problemStatementUpdate.instructorMessage"></div>
                         <div [innerHTML]="problemStatementUpdateEvent.text | htmlForMarkdown"></div>
                     }
                 </div>
diff --git a/src/main/webapp/app/exercises/file-upload/assess/file-upload-assessment.component.html b/src/main/webapp/app/exercises/file-upload/assess/file-upload-assessment.component.html
index a3a04e2f4b8d..002e35fe3ee3 100644
--- a/src/main/webapp/app/exercises/file-upload/assess/file-upload-assessment.component.html
+++ b/src/main/webapp/app/exercises/file-upload/assess/file-upload-assessment.component.html
@@ -30,7 +30,7 @@
                     <div class="row">
                         @if (submission?.filePath) {
                             <div class="col-12 card-text">
-                                <a class="text-primary" (click)="downloadFile(submission!.filePath!)">{{ 'artemisApp.fileUploadAssessment.submissionFile' | artemisTranslate }}</a>
+                                <a class="text-primary" (click)="downloadFile(submission!.filePath!)" jhiTranslate="artemisApp.fileUploadAssessment.submissionFile"></a>
                                 <span class="ms-2 badge bg-info">{{ attachmentExtension(submission!.filePath!) | uppercase }}</span>
                             </div>
                         }
@@ -77,7 +77,7 @@
                 <div class="row">
                     @if (submission?.filePath) {
                         <div class="col-12 card-text">
-                            <a class="text-primary" (click)="downloadFile(submission!.filePath!)">{{ 'artemisApp.fileUploadAssessment.submissionFile' | artemisTranslate }}</a>
+                            <a class="text-primary" (click)="downloadFile(submission!.filePath!)" jhiTranslate="artemisApp.fileUploadAssessment.submissionFile"></a>
                             <span class="ms-2 badge bg-info">{{ attachmentExtension(submission!.filePath!) | uppercase }}</span>
                         </div>
                     }
diff --git a/src/main/webapp/app/exercises/file-upload/manage/file-upload-exercise-update.component.html b/src/main/webapp/app/exercises/file-upload/manage/file-upload-exercise-update.component.html
index e24b5e92ce73..244e6275b8b2 100644
--- a/src/main/webapp/app/exercises/file-upload/manage/file-upload-exercise-update.component.html
+++ b/src/main/webapp/app/exercises/file-upload/manage/file-upload-exercise-update.component.html
@@ -81,9 +81,7 @@ <h3 jhiTranslate="artemisApp.exercise.sections.solution" id="artemisApp.exercise
                     (valueChange)="validateDate()"
                 />
                 @if (fileUploadExercise.exampleSolutionPublicationDateError) {
-                    <span class="invalid-feedback">
-                        {{ 'artemisApp.exercise.exampleSolutionPublicationDateError' | artemisTranslate }}
-                    </span>
+                    <span class="invalid-feedback" jhiTranslate="artemisApp.exercise.exampleSolutionPublicationDateError"></span>
                 }
             </div>
         }
@@ -117,7 +115,7 @@ <h3 jhiTranslate="artemisApp.exercise.sections.grading" id="artemisApp.exercise.
                         [(ngModel)]="fileUploadExercise.startDate"
                     />
                     @if (fileUploadExercise.startDateError) {
-                        <span class="invalid-feedback">{{ 'artemisApp.exercise.startDateError' | artemisTranslate }}</span>
+                        <span class="invalid-feedback" jhiTranslate="artemisApp.exercise.startDateError"></span>
                     }
                 </div>
             </div>
@@ -138,7 +136,7 @@ <h3 jhiTranslate="artemisApp.exercise.sections.grading" id="artemisApp.exercise.
                         [(ngModel)]="fileUploadExercise.dueDate"
                     />
                     @if (fileUploadExercise.dueDateError) {
-                        <span class="invalid-feedback">{{ 'artemisApp.exercise.dueDateError' | artemisTranslate }}</span>
+                        <span class="invalid-feedback" jhiTranslate="artemisApp.exercise.dueDateError"></span>
                     }
                 </div>
                 <div class="form-group flex-grow-1 ms-3">
@@ -155,15 +153,13 @@ <h3 jhiTranslate="artemisApp.exercise.sections.grading" id="artemisApp.exercise.
                         [(ngModel)]="fileUploadExercise.assessmentDueDate"
                     />
                     @if (fileUploadExercise.assessmentDueDateError) {
-                        <span class="invalid-feedback">{{ 'artemisApp.exercise.assessmentDueDateError' | artemisTranslate }}</span>
+                        <span class="invalid-feedback" jhiTranslate="artemisApp.exercise.assessmentDueDateError"></span>
                     }
                 </div>
             </div>
         }
         <div class="form-group">
-            <label class="form-control-label">{{
-                'artemisApp.exercise.includedInOverallScore' + (fileUploadExercise.course ? 'Course' : 'Exam') + 'Label' | artemisTranslate
-            }}</label>
+            <label class="form-control-label" jhiTranslate="artemisApp.exercise.includedInOverallScore{{ fileUploadExercise.course ? 'Course' : 'Exam' }}Label"></label>
             <div>
                 <jhi-included-in-overall-score-picker
                     [(includedInOverallScore)]="fileUploadExercise.includedInOverallScore"
@@ -188,9 +184,7 @@ <h3 jhiTranslate="artemisApp.exercise.sections.grading" id="artemisApp.exercise.
                         #points="ngModel"
                     />
                     @if (points?.invalid && (points?.dirty || points?.touched) && points?.errors) {
-                        <div class="alert alert-danger">
-                            {{ 'artemisApp.exercise.pointsError' | artemisTranslate }}
-                        </div>
+                        <div class="alert alert-danger" jhiTranslate="artemisApp.exercise.pointsError"></div>
                     }
                 </div>
             </div>
@@ -209,9 +203,11 @@ <h3 jhiTranslate="artemisApp.exercise.sections.grading" id="artemisApp.exercise.
                         #bonusPoints="ngModel"
                     />
                     @if (bonusPoints?.invalid && (bonusPoints?.dirty || bonusPoints?.touched) && bonusPoints?.errors) {
-                        <div class="alert alert-danger" [hidden]="fileUploadExercise.includedInOverallScore !== IncludedInOverallScore.INCLUDED_COMPLETELY">
-                            {{ 'artemisApp.exercise.bonusPointsError' | artemisTranslate }}
-                        </div>
+                        <div
+                            class="alert alert-danger"
+                            [hidden]="fileUploadExercise.includedInOverallScore !== IncludedInOverallScore.INCLUDED_COMPLETELY"
+                            jhiTranslate="artemisApp.exercise.bonusPointsError"
+                        ></div>
                     }
                 </div>
             </div>
diff --git a/src/main/webapp/app/exercises/file-upload/participate/file-upload-submission.component.html b/src/main/webapp/app/exercises/file-upload/participate/file-upload-submission.component.html
index 6ef4808465d3..563047cf80cd 100644
--- a/src/main/webapp/app/exercises/file-upload/participate/file-upload-submission.component.html
+++ b/src/main/webapp/app/exercises/file-upload/participate/file-upload-submission.component.html
@@ -53,8 +53,8 @@ <h6>
                             <span> {{ submission!.submissionDate! | artemisTimeAgo }}</span>
                         </h6>
                     } @else {
-                        <h5>{{ 'artemisApp.exam.examSummary.yourSubmission' | artemisTranslate }}</h5>
-                        <span>{{ 'artemisApp.fileUploadSubmission.submittedFile' | artemisTranslate: { filename: submittedFileName } }}</span>
+                        <h5 jhiTranslate="artemisApp.exam.examSummary.yourSubmission"></h5>
+                        <span jhiTranslate="artemisApp.fileUploadSubmission.submittedFile" [translateValues]="{ filename: submittedFileName }"></span>
                     }
                     <br />
                     <div class="mt-2">
diff --git a/src/main/webapp/app/exercises/modeling/manage/example-modeling/example-modeling-submission.component.html b/src/main/webapp/app/exercises/modeling/manage/example-modeling/example-modeling-submission.component.html
index 20082632d010..8f414f19509e 100644
--- a/src/main/webapp/app/exercises/modeling/manage/example-modeling/example-modeling-submission.component.html
+++ b/src/main/webapp/app/exercises/modeling/manage/example-modeling/example-modeling-submission.component.html
@@ -5,7 +5,7 @@ <h2 jhiTranslate="artemisApp.modelingExercise.exampleSubmissionForModelingExerci
                 Example Modeling Submission for Exercise {{ exercise?.title }}
             </h2>
             @if (toComplete) {
-                <h5 class="fw-light">{{ 'artemisApp.exampleSubmission.home.assessmentTraining' | artemisTranslate }}</h5>
+                <h5 class="fw-light" jhiTranslate="artemisApp.exampleSubmission.home.assessmentTraining"></h5>
             }
             @if (assessmentMode) {
                 <p jhiTranslate="artemisApp.exampleSubmission.assessmentInstruction"></p>
@@ -17,7 +17,7 @@ <h5 class="fw-light">{{ 'artemisApp.exampleSubmission.home.assessmentTraining' |
                     <div class="d-flex justify-content-end flex-wrap align-items-center">
                         <div>
                             <div class="text-start">
-                                <span>{{ 'artemisApp.exampleSubmission.assessmentTraining' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.exampleSubmission.assessmentTraining"></span>
                                 <jhi-help-icon [text]="'artemisApp.exampleSubmission.selectModelExplanation'" />
                             </div>
                             <div class="btn-group" role="group">
@@ -30,9 +30,7 @@ <h5 class="fw-light">{{ 'artemisApp.exampleSubmission.home.assessmentTraining' |
                                     [value]="ExampleSubmissionMode.READ_AND_CONFIRM"
                                     [(ngModel)]="selectedMode"
                                 />
-                                <label class="btn btn-outline-secondary" for="read-and-confirm-button">{{
-                                    'artemisApp.exampleSubmission.readAndConfirm' | artemisTranslate
-                                }}</label>
+                                <label class="btn btn-outline-secondary" for="read-and-confirm-button" jhiTranslate="artemisApp.exampleSubmission.readAndConfirm"></label>
                                 <input
                                     type="radio"
                                     class="btn-check"
@@ -42,7 +40,7 @@ <h5 class="fw-light">{{ 'artemisApp.exampleSubmission.home.assessmentTraining' |
                                     [value]="ExampleSubmissionMode.ASSESS_CORRECTLY"
                                     [(ngModel)]="selectedMode"
                                 />
-                                <label class="btn btn-outline-secondary" for="only-not-imported">{{ 'artemisApp.exampleSubmission.assessCorrectly' | artemisTranslate }}</label>
+                                <label class="btn btn-outline-secondary" for="only-not-imported" jhiTranslate="artemisApp.exampleSubmission.assessCorrectly"></label>
                             </div>
                         </div>
                         <button (click)="upsertExampleModelingSubmission()" class="btn btn-primary ms-2 button-resize">
@@ -134,7 +132,7 @@ <h5 class="fw-light">{{ 'artemisApp.exampleSubmission.home.assessmentTraining' |
                     @if (highlightedElements && highlightedElements.size > 0) {
                         <div class="col">
                             <div [style.background-color]="highlightColor" class="my-2 text-center">
-                                <span>{{ 'artemisApp.exampleSubmission.modelElementHint' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.exampleSubmission.modelElementHint"></span>
                             </div>
                         </div>
                     }
diff --git a/src/main/webapp/app/exercises/modeling/manage/modeling-exercise-update.component.html b/src/main/webapp/app/exercises/modeling/manage/modeling-exercise-update.component.html
index 23889e51c013..5df3a96c4deb 100644
--- a/src/main/webapp/app/exercises/modeling/manage/modeling-exercise-update.component.html
+++ b/src/main/webapp/app/exercises/modeling/manage/modeling-exercise-update.component.html
@@ -85,9 +85,7 @@ <h3 jhiTranslate="artemisApp.exercise.sections.solution" id="artemisApp.exercise
                     (valueChange)="validateDate()"
                 />
                 @if (modelingExercise.exampleSolutionPublicationDateError) {
-                    <span class="invalid-feedback">
-                        {{ 'artemisApp.exercise.exampleSolutionPublicationDateError' | artemisTranslate }}
-                    </span>
+                    <span class="invalid-feedback" jhiTranslate="artemisApp.exercise.exampleSolutionPublicationDateError"></span>
                 }
             </div>
         }
@@ -121,7 +119,7 @@ <h3 jhiTranslate="artemisApp.exercise.sections.grading" id="artemisApp.exercise.
                         [(ngModel)]="modelingExercise.startDate"
                     />
                     @if (modelingExercise.startDateError) {
-                        <span class="invalid-feedback">{{ 'artemisApp.exercise.startDateError' | artemisTranslate }}</span>
+                        <span class="invalid-feedback" jhiTranslate="artemisApp.exercise.startDateError"></span>
                     }
                 </div>
             </div>
@@ -142,7 +140,7 @@ <h3 jhiTranslate="artemisApp.exercise.sections.grading" id="artemisApp.exercise.
                         [(ngModel)]="modelingExercise.dueDate"
                     />
                     @if (modelingExercise.dueDateError) {
-                        <span class="invalid-feedback">{{ 'artemisApp.exercise.dueDateError' | artemisTranslate }}</span>
+                        <span class="invalid-feedback" jhiTranslate="artemisApp.exercise.dueDateError"></span>
                     }
                 </div>
                 <div class="form-group flex-grow-1 ms-3">
@@ -159,15 +157,13 @@ <h3 jhiTranslate="artemisApp.exercise.sections.grading" id="artemisApp.exercise.
                         [(ngModel)]="modelingExercise.assessmentDueDate"
                     />
                     @if (modelingExercise.assessmentDueDateError) {
-                        <span class="invalid-feedback">{{ 'artemisApp.exercise.assessmentDueDateError' | artemisTranslate }}</span>
+                        <span class="invalid-feedback" jhiTranslate="artemisApp.exercise.assessmentDueDateError"></span>
                     }
                 </div>
             </div>
         }
         <div class="form-group">
-            <label class="form-control-label">{{
-                'artemisApp.exercise.includedInOverallScore' + (modelingExercise.course ? 'Course' : 'Exam') + 'Label' | artemisTranslate
-            }}</label>
+            <label class="form-control-label" jhiTranslate="artemisApp.exercise.includedInOverallScore{{ modelingExercise.course ? 'Course' : 'Exam' }}Label"></label>
             <div>
                 <jhi-included-in-overall-score-picker
                     [(includedInOverallScore)]="modelingExercise.includedInOverallScore"
@@ -193,9 +189,7 @@ <h3 jhiTranslate="artemisApp.exercise.sections.grading" id="artemisApp.exercise.
                         #points="ngModel"
                     />
                     @if (points?.invalid && (points?.dirty || points?.touched) && points?.errors) {
-                        <div class="alert alert-danger">
-                            {{ 'artemisApp.exercise.pointsError' | artemisTranslate }}
-                        </div>
+                        <div class="alert alert-danger" jhiTranslate="artemisApp.exercise.pointsError"></div>
                     }
                 </div>
             </div>
@@ -214,9 +208,11 @@ <h3 jhiTranslate="artemisApp.exercise.sections.grading" id="artemisApp.exercise.
                         #bonusPoints="ngModel"
                     />
                     @if (bonusPoints?.invalid && (bonusPoints?.dirty || bonusPoints?.touched) && bonusPoints?.errors) {
-                        <div class="alert alert-danger" [hidden]="modelingExercise.includedInOverallScore !== IncludedInOverallScore.INCLUDED_COMPLETELY">
-                            {{ 'artemisApp.exercise.bonusPointsError' | artemisTranslate }}
-                        </div>
+                        <div
+                            class="alert alert-danger"
+                            [hidden]="modelingExercise.includedInOverallScore !== IncludedInOverallScore.INCLUDED_COMPLETELY"
+                            jhiTranslate="artemisApp.exercise.bonusPointsError"
+                        ></div>
                     }
                 </div>
             </div>
@@ -231,17 +227,17 @@ <h3 jhiTranslate="artemisApp.exercise.sections.grading" id="artemisApp.exercise.
                 (ngModelChange)="diagramTypeChanged()"
                 id="field_diagramType"
             >
-                <option value="ClassDiagram">{{ 'artemisApp.DiagramType.ClassDiagram' | artemisTranslate }}</option>
-                <option value="ActivityDiagram">{{ 'artemisApp.DiagramType.ActivityDiagram' | artemisTranslate }}</option>
-                <option value="ObjectDiagram">{{ 'artemisApp.DiagramType.ObjectDiagram' | artemisTranslate }}</option>
-                <option value="UseCaseDiagram">{{ 'artemisApp.DiagramType.UseCaseDiagram' | artemisTranslate }}</option>
-                <option value="CommunicationDiagram">{{ 'artemisApp.DiagramType.CommunicationDiagram' | artemisTranslate }}</option>
-                <option value="ComponentDiagram">{{ 'artemisApp.DiagramType.ComponentDiagram' | artemisTranslate }}</option>
-                <option value="DeploymentDiagram">{{ 'artemisApp.DiagramType.DeploymentDiagram' | artemisTranslate }}</option>
-                <option value="PetriNet">{{ 'artemisApp.DiagramType.PetriNet' | artemisTranslate }}</option>
-                <option value="SyntaxTree">{{ 'artemisApp.DiagramType.SyntaxTree' | artemisTranslate }}</option>
-                <option value="Flowchart">{{ 'artemisApp.DiagramType.Flowchart' | artemisTranslate }}</option>
-                <option value="BPMN">{{ 'artemisApp.DiagramType.BPMN' | artemisTranslate }}</option>
+                <option value="ClassDiagram" jhiTranslate="artemisApp.DiagramType.ClassDiagram"></option>
+                <option value="ActivityDiagram" jhiTranslate="artemisApp.DiagramType.ActivityDiagram"></option>
+                <option value="ObjectDiagram" jhiTranslate="artemisApp.DiagramType.ObjectDiagram"></option>
+                <option value="UseCaseDiagram" jhiTranslate="artemisApp.DiagramType.UseCaseDiagram"></option>
+                <option value="CommunicationDiagram" jhiTranslate="artemisApp.DiagramType.CommunicationDiagram"></option>
+                <option value="ComponentDiagram" jhiTranslate="artemisApp.DiagramType.ComponentDiagram"></option>
+                <option value="DeploymentDiagram" jhiTranslate="artemisApp.DiagramType.DeploymentDiagram"></option>
+                <option value="PetriNet" jhiTranslate="artemisApp.DiagramType.PetriNet"></option>
+                <option value="SyntaxTree" jhiTranslate="artemisApp.DiagramType.SyntaxTree"></option>
+                <option value="Flowchart" jhiTranslate="artemisApp.DiagramType.Flowchart"></option>
+                <option value="BPMN" jhiTranslate="artemisApp.DiagramType.BPMN"></option>
             </select>
         </div>
         @if (semiAutomaticAssessmentAvailable) {
diff --git a/src/main/webapp/app/exercises/programming/hestia/generation-overview/steps/solution-entry-generation-step/solution-entry-generation-step.component.html b/src/main/webapp/app/exercises/programming/hestia/generation-overview/steps/solution-entry-generation-step/solution-entry-generation-step.component.html
index 433689205c2b..3e3b36f53456 100644
--- a/src/main/webapp/app/exercises/programming/hestia/generation-overview/steps/solution-entry-generation-step/solution-entry-generation-step.component.html
+++ b/src/main/webapp/app/exercises/programming/hestia/generation-overview/steps/solution-entry-generation-step/solution-entry-generation-step.component.html
@@ -40,7 +40,7 @@
     <table class="table table-striped" aria-describedby="showHealthLabel">
         <thead>
             <tr>
-                <th scope="col" class="text-left">{{ 'global.field.id' | artemisTranslate }}</th>
+                <th scope="col" class="text-left" jhiTranslate="global.field.id"></th>
                 <th scope="col" class="text-left">
                     {{ 'artemisApp.programmingExerciseTestCase.testName' | artemisTranslate }}
                     <fa-icon
@@ -50,7 +50,7 @@
                     />
                 </th>
                 <th scope="col" class="text-left">File Path</th>
-                <th scope="col" class="text-left">{{ 'artemisApp.exerciseHint.content' | artemisTranslate }}</th>
+                <th scope="col" class="text-left" jhiTranslate="artemisApp.exerciseHint.content"></th>
                 <th scope="col" class="text-left">
                     <span jhiTranslate="artemisApp.codeHint.entryType"></span>
                     <jhi-help-icon text="artemisApp.codeHint.entryTypeTooltip" />
diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.html b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.html
index eacc4d1f6f9e..198b27469831 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.html
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component.html
@@ -1,11 +1,9 @@
 <div>
     <div class="modal-header">
-        <h3 class="modal-title">
-            {{
-                (diffForTemplateAndSolution ? 'artemisApp.programmingExercise.diffReport.title' : 'artemisApp.programmingExercise.diffReport.titleForSubmissions')
-                    | artemisTranslate
-            }}
-        </h3>
+        <h3
+            class="modal-title"
+            jhiTranslate="{{ diffForTemplateAndSolution ? 'artemisApp.programmingExercise.diffReport.title' : 'artemisApp.programmingExercise.diffReport.titleForSubmissions' }}"
+        ></h3>
         <button type="button" class="btn-close" aria-label="Close" (click)="close()"></button>
     </div>
     <div class="modal-body">
diff --git a/src/main/webapp/app/exercises/programming/manage/grading/charts/sca-category-distribution-chart.component.ts b/src/main/webapp/app/exercises/programming/manage/grading/charts/sca-category-distribution-chart.component.ts
index 6385cf5773e7..59c58c9fc817 100644
--- a/src/main/webapp/app/exercises/programming/manage/grading/charts/sca-category-distribution-chart.component.ts
+++ b/src/main/webapp/app/exercises/programming/manage/grading/charts/sca-category-distribution-chart.component.ts
@@ -22,11 +22,14 @@ enum ScaChartBarTitle {
         <div>
             <div>
                 <div class="d-flex justify-content-between">
-                    <h4>{{ 'artemisApp.programmingExercise.configureGrading.charts.categoryDistribution.title' | artemisTranslate }}</h4>
+                    <h4 jhiTranslate="artemisApp.programmingExercise.configureGrading.charts.categoryDistribution.title"></h4>
                     @if (tableFiltered) {
-                        <button type="button" class="btn btn-info" (click)="resetTableFilter()">
-                            {{ 'artemisApp.programmingExercise.configureGrading.charts.resetFilter' | artemisTranslate }}
-                        </button>
+                        <button
+                            type="button"
+                            class="btn btn-info"
+                            (click)="resetTableFilter()"
+                            jhiTranslate="artemisApp.programmingExercise.configureGrading.charts.resetFilter"
+                        ></button>
                     }
                 </div>
                 <p [innerHTML]="'artemisApp.programmingExercise.configureGrading.charts.categoryDistribution.description' | artemisTranslate"></p>
@@ -48,49 +51,31 @@ enum ScaChartBarTitle {
                             @switch (model.series) {
                                 @case (scaChartBarTitle.PENALTY) {
                                     <div>
-                                        <span>
-                                            {{ 'artemisApp.programmingAssessment.penaltyTooltip' | artemisTranslate: { percentage: model.value.toFixed(2) } }}
-                                        </span>
+                                        <span jhiTranslate="artemisApp.programmingAssessment.penaltyTooltip" [translateValues]="{ percentage: model.value.toFixed(2) }"></span>
                                         <br />
-                                        <span>
-                                            {{ 'artemisApp.programmingAssessment.issuesTooltip' | artemisTranslate: { percentage: model.issues.toFixed(2) } }}
-                                        </span>
+                                        <span jhiTranslate="artemisApp.programmingAssessment.issuesTooltip" [translateValues]="{ percentage: model.issues.toFixed(2) }"></span>
                                         <br />
-                                        <span>
-                                            {{ 'artemisApp.programmingAssessment.deductionsTooltip' | artemisTranslate: { percentage: model.points.toFixed(2) } }}
-                                        </span>
+                                        <span jhiTranslate="artemisApp.programmingAssessment.deductionsTooltip" [translateValues]="{ percentage: model.points.toFixed(2) }"></span>
                                     </div>
                                 }
                                 @case (scaChartBarTitle.ISSUES) {
                                     <div>
-                                        <span>
-                                            {{ 'artemisApp.programmingAssessment.penaltyTooltip' | artemisTranslate: { percentage: model.penalty.toFixed(2) } }}
-                                        </span>
+                                        <span jhiTranslate="artemisApp.programmingAssessment.penaltyTooltip" [translateValues]="{ percentage: model.penalty.toFixed(2) }"></span>
                                         <br />
-                                        <span>
-                                            {{ 'artemisApp.programmingAssessment.issuesTooltip' | artemisTranslate: { percentage: model.value.toFixed(2) } }}
-                                        </span>
+                                        <span jhiTranslate="artemisApp.programmingAssessment.issuesTooltip" [translateValues]="{ percentage: model.value.toFixed(2) }"></span>
                                         <br />
-                                        <span>
-                                            {{ 'artemisApp.programmingAssessment.deductionsTooltip' | artemisTranslate: { percentage: model.points.toFixed(2) } }}
-                                        </span>
+                                        <span jhiTranslate="artemisApp.programmingAssessment.deductionsTooltip" [translateValues]="{ percentage: model.points.toFixed(2) }"></span>
                                     </div>
                                 }
                             }
                         </div>
                         @if ([scaChartBarTitle.DEDUCTIONS_EN, scaChartBarTitle.DEDUCTIONS_DE].includes(model.series)) {
                             <div>
-                                <span>
-                                    {{ 'artemisApp.programmingAssessment.penaltyTooltip' | artemisTranslate: { percentage: model.penalty.toFixed(2) } }}
-                                </span>
+                                <span jhiTranslate="artemisApp.programmingAssessment.penaltyTooltip" [translateValues]="{ percentage: model.penalty.toFixed(2) }"></span>
                                 <br />
-                                <span>
-                                    {{ 'artemisApp.programmingAssessment.issuesTooltip' | artemisTranslate: { percentage: model.issues.toFixed(2) } }}
-                                </span>
+                                <span jhiTranslate="artemisApp.programmingAssessment.issuesTooltip" [translateValues]="{ percentage: model.issues.toFixed(2) }"></span>
                                 <br />
-                                <span>
-                                    {{ 'artemisApp.programmingAssessment.deductionsTooltip' | artemisTranslate: { percentage: model.value.toFixed(2) } }}
-                                </span>
+                                <span jhiTranslate="artemisApp.programmingAssessment.deductionsTooltip" [translateValues]="{ percentage: model.value.toFixed(2) }"></span>
                             </div>
                         }
                     </ng-template>
diff --git a/src/main/webapp/app/exercises/programming/manage/grading/charts/test-case-distribution-chart.component.html b/src/main/webapp/app/exercises/programming/manage/grading/charts/test-case-distribution-chart.component.html
index 6ae8e2c7e24d..727a368d1c44 100644
--- a/src/main/webapp/app/exercises/programming/manage/grading/charts/test-case-distribution-chart.component.html
+++ b/src/main/webapp/app/exercises/programming/manage/grading/charts/test-case-distribution-chart.component.html
@@ -1,11 +1,9 @@
 <div>
     <div>
         <div class="d-flex justify-content-between">
-            <h4>{{ 'artemisApp.programmingExercise.configureGrading.charts.testCaseWeights.title' | artemisTranslate }}</h4>
+            <h4 jhiTranslate="artemisApp.programmingExercise.configureGrading.charts.testCaseWeights.title"></h4>
             @if (tableFiltered) {
-                <button type="button" class="btn btn-info" (click)="resetTableFilter()">
-                    {{ 'artemisApp.programmingExercise.configureGrading.charts.resetFilter' | artemisTranslate }}
-                </button>
+                <button type="button" class="btn btn-info" (click)="resetTableFilter()" jhiTranslate="artemisApp.programmingExercise.configureGrading.charts.resetFilter"></button>
             }
         </div>
         <p>
@@ -28,37 +26,35 @@ <h4>{{ 'artemisApp.programmingExercise.configureGrading.charts.testCaseWeights.t
                 <br />
                 @if ([testCaseBarTitle.WEIGHT_EN, testCaseBarTitle.WEIGHT_DE].includes(model.series)) {
                     <div>
-                        <span>
-                            {{ 'artemisApp.programmingExercise.configureGrading.charts.testCaseWeights.weightTooltip' | artemisTranslate: { percentage: model.value.toFixed(2) } }}
-                        </span>
+                        <span
+                            jhiTranslate="artemisApp.programmingExercise.configureGrading.charts.testCaseWeights.weightTooltip"
+                            [translateValues]="{ percentage: model.value.toFixed(2) }"
+                        ></span>
                         <br />
-                        <span>
-                            {{
-                                'artemisApp.programmingExercise.configureGrading.charts.testCaseWeights.weightAndBonusTooltip'
-                                    | artemisTranslate: { percentage: model.bonus.toFixed(2) }
-                            }}
-                        </span>
+                        <span
+                            jhiTranslate="artemisApp.programmingExercise.configureGrading.charts.testCaseWeights.weightAndBonusTooltip"
+                            [translateValues]="{ percentage: model.bonus.toFixed(2) }"
+                        ></span>
                     </div>
                 }
                 @if ([testCaseBarTitle.WEIGHT_AND_BONUS_EN, testCaseBarTitle.WEIGHT_AND_BONUS_DE].includes(model.series)) {
                     <div>
-                        <span>
-                            {{ 'artemisApp.programmingExercise.configureGrading.charts.testCaseWeights.weightTooltip' | artemisTranslate: { percentage: model.weight.toFixed(2) } }}
-                        </span>
+                        <span
+                            jhiTranslate="artemisApp.programmingExercise.configureGrading.charts.testCaseWeights.weightTooltip"
+                            [translateValues]="{ percentage: model.weight.toFixed(2) }"
+                        ></span>
                         <br />
-                        <span>
-                            {{
-                                'artemisApp.programmingExercise.configureGrading.charts.testCaseWeights.weightAndBonusTooltip'
-                                    | artemisTranslate: { percentage: model.value.toFixed(2) }
-                            }}
-                        </span>
+                        <span
+                            jhiTranslate="artemisApp.programmingExercise.configureGrading.charts.testCaseWeights.weightAndBonusTooltip"
+                            [translateValues]="{ percentage: model.value.toFixed(2) }"
+                        ></span>
                     </div>
                 }
             </ng-template>
         </ngx-charts-bar-horizontal-normalized>
     </div>
     <div class="mt-4">
-        <h4>{{ 'artemisApp.programmingExercise.configureGrading.charts.testCasePoints.title' | artemisTranslate }}</h4>
+        <h4 jhiTranslate="artemisApp.programmingExercise.configureGrading.charts.testCasePoints.title"></h4>
         <p [innerHTML]="'artemisApp.programmingExercise.configureGrading.charts.testCasePoints.description' | artemisTranslate"></p>
     </div>
     <div #containerRefPoints class="points-chart bg-light">
@@ -74,9 +70,10 @@ <h4>{{ 'artemisApp.programmingExercise.configureGrading.charts.testCasePoints.ti
             <ng-template #tooltipTemplate let-model="model">
                 <b>{{ model.name }}</b>
                 <br />
-                <span>
-                    {{ 'artemisApp.programmingExercise.configureGrading.charts.testCasePoints.pointsTooltip' | artemisTranslate: { percentage: model.value.toFixed(2) } }}
-                </span>
+                <span
+                    jhiTranslate="artemisApp.programmingExercise.configureGrading.charts.testCasePoints.pointsTooltip"
+                    [translateValues]="{ percentage: model.value.toFixed(2) }"
+                ></span>
             </ng-template>
         </ngx-charts-bar-horizontal-stacked>
     </div>
diff --git a/src/main/webapp/app/exercises/programming/manage/grading/programming-exercise-configure-grading.component.html b/src/main/webapp/app/exercises/programming/manage/grading/programming-exercise-configure-grading.component.html
index 6ee637d20532..f637a537c0a6 100644
--- a/src/main/webapp/app/exercises/programming/manage/grading/programming-exercise-configure-grading.component.html
+++ b/src/main/webapp/app/exercises/programming/manage/grading/programming-exercise-configure-grading.component.html
@@ -52,7 +52,7 @@ <h3 class="fw-medium" jhiTranslate="artemisApp.programmingExercise.configureGrad
                     <jhi-submission-policy-update #policyUpdate [programmingExercise]="programmingExercise" [editable]="programmingExercise.isAtLeastInstructor!" />
                     @if (programmingExercise.isAtLeastEditor && programmingExercise.submissionPolicy !== undefined) {
                         <ngb-alert [dismissible]="false" [type]="'info'">
-                            <span>{{ 'artemisApp.programmingExercise.submissionPolicy.submissionPenalty.triggerAllInformation' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.programmingExercise.submissionPolicy.submissionPenalty.triggerAllInformation"></span>
                         </ngb-alert>
                     }
                 </div>
@@ -71,7 +71,7 @@ <h3 class="fw-medium" jhiTranslate="artemisApp.programmingExercise.configureGrad
                         </div>
                         <div class="col-5">
                             <h2 class="mb-5 fw-medium">
-                                <span>{{ 'artemisApp.programmingExercise.configureGrading.charts.title' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.programmingExercise.configureGrading.charts.title"></span>
                                 @if (!!changedTestCaseIds.length) {
                                     <span class="badge bg-primary" jhiTranslate="artemisApp.programmingExercise.configureGrading.charts.preview"></span>
                                 }
@@ -239,7 +239,7 @@ <h2 class="fw-medium" jhiTranslate="artemisApp.programmingExercise.configureGrad
                         </div>
                         <div class="col-5">
                             <h2 class="mb-5 fw-medium">
-                                <span>{{ 'artemisApp.programmingExercise.configureGrading.charts.title' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.programmingExercise.configureGrading.charts.title"></span>
                                 @if (!!changedCategoryIds.length) {
                                     <span class="badge bg-primary" jhiTranslate="artemisApp.programmingExercise.configureGrading.charts.preview"></span>
                                 }
diff --git a/src/main/webapp/app/exercises/programming/manage/grading/tasks/programming-exercise-grading-tasks-table.component.html b/src/main/webapp/app/exercises/programming/manage/grading/tasks/programming-exercise-grading-tasks-table.component.html
index 52934fae6007..52943cc868c4 100644
--- a/src/main/webapp/app/exercises/programming/manage/grading/tasks/programming-exercise-grading-tasks-table.component.html
+++ b/src/main/webapp/app/exercises/programming/manage/grading/tasks/programming-exercise-grading-tasks-table.component.html
@@ -126,9 +126,7 @@ <h2 class="fw-medium">Tasks</h2>
             <fa-icon [icon]="getSortIcon('type')" class="ms-2" />
             <fa-icon [icon]="faQuestionCircle" class="text-secondary ms-2" />
         </button>
-        <div class="task__row__cell">
-            {{ 'artemisApp.programmingExercise.configureGrading.gradingTableHeader.passedPercent' | artemisTranslate }}
-        </div>
+        <div class="task__row__cell" jhiTranslate="artemisApp.programmingExercise.configureGrading.gradingTableHeader.passedPercent"></div>
     </div>
     @for (task of tasks; track task; let i = $index) {
         <jhi-programming-exercise-task [index]="i" [task]="task" [openSubject]="allTasksExpandedSubject" (updateTasksEvent)="updateTasks()" [isExamExercise]="isExamExercise" />
diff --git a/src/main/webapp/app/exercises/programming/manage/instructions-editor/analysis/programming-exercise-instruction-analysis.component.html b/src/main/webapp/app/exercises/programming/manage/instructions-editor/analysis/programming-exercise-instruction-analysis.component.html
index dd43838f3314..014cd64753f1 100644
--- a/src/main/webapp/app/exercises/programming/manage/instructions-editor/analysis/programming-exercise-instruction-analysis.component.html
+++ b/src/main/webapp/app/exercises/programming/manage/instructions-editor/analysis/programming-exercise-instruction-analysis.component.html
@@ -26,7 +26,7 @@
             }
             @if (missingTestCases.length) {
                 <div class="text-start">
-                    <span>{{ 'artemisApp.programmingExercise.testCaseAnalysis.missingTestCases' | artemisTranslate: { number: missingTestCases.length } }}</span>
+                    <span jhiTranslate="artemisApp.programmingExercise.testCaseAnalysis.missingTestCases" [translateValues]="{ number: missingTestCases.length }"></span>
                     <ul>
                         @for (test of missingTestCases; track test) {
                             <li>{{ test }}</li>
@@ -37,7 +37,7 @@
 
             @if (repeatedTestCases.length) {
                 <div class="text-start">
-                    <span>{{ 'artemisApp.programmingExercise.testCaseAnalysis.repeatedTestCases' | artemisTranslate: { number: repeatedTestCases.length } }}</span>
+                    <span jhiTranslate="artemisApp.programmingExercise.testCaseAnalysis.repeatedTestCases" [translateValues]="{ number: repeatedTestCases.length }"></span>
                     <ul>
                         @for (test of repeatedTestCases; track test) {
                             <li>{{ test }}</li>
diff --git a/src/main/webapp/app/exercises/programming/manage/instructions-editor/analysis/task-count-warning/task-count-warning.component.html b/src/main/webapp/app/exercises/programming/manage/instructions-editor/analysis/task-count-warning/task-count-warning.component.html
index 631270039a07..d0210bef4c72 100644
--- a/src/main/webapp/app/exercises/programming/manage/instructions-editor/analysis/task-count-warning/task-count-warning.component.html
+++ b/src/main/webapp/app/exercises/programming/manage/instructions-editor/analysis/task-count-warning/task-count-warning.component.html
@@ -13,7 +13,7 @@
     <div class="text-start w-100">
         @if (numOfTasks > advisedMaxNumOfTasks) {
             <div class="text-start">
-                <span>{{ 'artemisApp.programmingExercise.tasksAnalysis.numOfTasks' | artemisTranslate: { number: numOfTasks, limit: advisedMaxNumOfTasks } }}</span>
+                <span jhiTranslate="artemisApp.programmingExercise.tasksAnalysis.numOfTasks" [translateValues]="{ number: numOfTasks, limit: advisedMaxNumOfTasks }"></span>
             </div>
         }
     </div>
diff --git a/src/main/webapp/app/exercises/programming/manage/programming-exercise-detail.component.html b/src/main/webapp/app/exercises/programming/manage/programming-exercise-detail.component.html
index 2e601a24a5e5..95da3dea7a71 100644
--- a/src/main/webapp/app/exercises/programming/manage/programming-exercise-detail.component.html
+++ b/src/main/webapp/app/exercises/programming/manage/programming-exercise-detail.component.html
@@ -80,7 +80,7 @@ <h2><span jhiTranslate="artemisApp.programmingExercise.detail.title"></span> {{
                         @if (programmingExercise.assessmentType === AssessmentType.SEMI_AUTOMATIC || programmingExercise.allowComplaintsForAutomaticAssessments) {
                             <a [routerLink]="[shortBaseResource, 'assessment-dashboard', programmingExercise.id]" class="btn btn-info btn-sm">
                                 <fa-icon [icon]="faUserCheck" />
-                                <span class="d-none d-md-inline">{{ 'artemisApp.exercise.exerciseAssessmentDashboard' | artemisTranslate }}</span>
+                                <span class="d-none d-md-inline" jhiTranslate="artemisApp.exercise.exerciseAssessmentDashboard"></span>
                             </a>
                         }
                         @if (programmingExercise.isAtLeastEditor && plagiarismCheckSupported) {
diff --git a/src/main/webapp/app/exercises/programming/manage/update/update-components/programming-exercise-grading.component.html b/src/main/webapp/app/exercises/programming/manage/update/update-components/programming-exercise-grading.component.html
index cda675597e30..596b6d8c38c7 100644
--- a/src/main/webapp/app/exercises/programming/manage/update/update-components/programming-exercise-grading.component.html
+++ b/src/main/webapp/app/exercises/programming/manage/update/update-components/programming-exercise-grading.component.html
@@ -2,7 +2,7 @@
     <h3 jhiTranslate="artemisApp.programmingExercise.wizardMode.detailedSteps.gradingStepTitle" id="artemisApp.programmingExercise.wizardMode.detailedSteps.gradingStepTitle"></h3>
     <p jhiTranslate="artemisApp.programmingExercise.wizardMode.detailedSteps.gradingStepMessage"></p>
     <div class="form-group">
-        <label class="form-control-label">{{ 'artemisApp.exercise.includedInOverallScore' + (programmingExercise.course ? 'Course' : 'Exam') + 'Label' | artemisTranslate }}</label>
+        <label class="form-control-label" jhiTranslate="artemisApp.exercise.includedInOverallScore{{ programmingExercise.course ? 'Course' : 'Exam' }}Label"></label>
         <div>
             <jhi-included-in-overall-score-picker [(includedInOverallScore)]="programmingExercise.includedInOverallScore" [allowNotIncluded]="true" />
         </div>
@@ -23,9 +23,7 @@ <h3 jhiTranslate="artemisApp.programmingExercise.wizardMode.detailedSteps.gradin
                     #maxScore="ngModel"
                 />
                 @if (maxScore?.invalid && (maxScore?.dirty || maxScore?.touched) && maxScore?.errors) {
-                    <div class="alert alert-danger">
-                        {{ 'artemisApp.exercise.pointsError' | artemisTranslate }}
-                    </div>
+                    <div class="alert alert-danger" jhiTranslate="artemisApp.exercise.pointsError"></div>
                 }
             </div>
         </div>
@@ -44,9 +42,11 @@ <h3 jhiTranslate="artemisApp.programmingExercise.wizardMode.detailedSteps.gradin
                     #bonusPoints="ngModel"
                 />
                 @if (bonusPoints?.invalid && (bonusPoints?.dirty || bonusPoints?.touched) && bonusPoints?.errors) {
-                    <div class="alert alert-danger" [hidden]="programmingExercise.includedInOverallScore !== IncludedInOverallScore.INCLUDED_COMPLETELY">
-                        {{ 'artemisApp.exercise.bonusPointsError' | artemisTranslate }}
-                    </div>
+                    <div
+                        class="alert alert-danger"
+                        [hidden]="programmingExercise.includedInOverallScore !== IncludedInOverallScore.INCLUDED_COMPLETELY"
+                        jhiTranslate="artemisApp.exercise.bonusPointsError"
+                    ></div>
                 }
             </div>
         </div>
@@ -94,9 +94,9 @@ <h3 jhiTranslate="artemisApp.programmingExercise.wizardMode.detailedSteps.gradin
         />
         @if (programmingExerciseCreationConfig.isEdit) {
             <ngb-alert [dismissible]="false" [type]="'info'">
-                <span>{{ 'artemisApp.programmingExercise.submissionPolicy.editInGradingInformation' | artemisTranslate }}</span>
+                <span jhiTranslate="artemisApp.programmingExercise.submissionPolicy.editInGradingInformation"></span>
                 <a [href]="editPolicyUrl">
-                    <span>{{ 'artemisApp.programmingExercise.submissionPolicy.goToGradingToEditInformation' | artemisTranslate }}</span>
+                    <span jhiTranslate="artemisApp.programmingExercise.submissionPolicy.goToGradingToEditInformation"></span>
                 </a>
             </ngb-alert>
         }
diff --git a/src/main/webapp/app/exercises/programming/manage/update/update-components/programming-exercise-problem.component.html b/src/main/webapp/app/exercises/programming/manage/update/update-components/programming-exercise-problem.component.html
index 0b1c6ad56f56..61cd41a42924 100644
--- a/src/main/webapp/app/exercises/programming/manage/update/update-components/programming-exercise-problem.component.html
+++ b/src/main/webapp/app/exercises/programming/manage/update/update-components/programming-exercise-problem.component.html
@@ -6,11 +6,13 @@ <h3 jhiTranslate="artemisApp.programmingExercise.wizardMode.detailedSteps.proble
         @if (programmingExerciseCreationConfig.isImportFromExistingExercise || programmingExerciseCreationConfig.isImportFromFile) {
             <ngb-alert [dismissible]="false">
                 <span class="font-weight-bold">{{ 'artemisApp.exercise.import.attention' | artemisTranslate }}</span
-                ><span>{{
-                    programmingExerciseCreationConfig.isImportFromExistingExercise
-                        ? ('artemisApp.exercise.import.markdownWarning' | artemisTranslate)
-                        : ('artemisApp.exercise.import.embeddedFilesWarning' | artemisTranslate)
-                }}</span>
+                ><span
+                    jhiTranslate="{{
+                        programmingExerciseCreationConfig.isImportFromExistingExercise
+                            ? 'artemisApp.exercise.import.markdownWarning'
+                            : 'artemisApp.exercise.import.embeddedFilesWarning'
+                    }}"
+                ></span>
             </ngb-alert>
         }
         @if (programmingExerciseCreationConfig.isImportFromExistingExercise) {
diff --git a/src/main/webapp/app/exercises/programming/participate/code-editor-student-container.component.html b/src/main/webapp/app/exercises/programming/participate/code-editor-student-container.component.html
index 054042061c0d..b1e8a2e356d1 100644
--- a/src/main/webapp/app/exercises/programming/participate/code-editor-student-container.component.html
+++ b/src/main/webapp/app/exercises/programming/participate/code-editor-student-container.component.html
@@ -44,19 +44,15 @@
             </div>
             <div submissionPolicy class="ps-2 pt-1 justify-self-center">
                 @if (exercise.submissionPolicy && exercise.submissionPolicy.active && numberOfSubmissionsForSubmissionPolicy !== undefined) {
-                    <span>
-                        {{
-                            'artemisApp.programmingExercise.submissionPolicy.submissionsAllowed'
-                                | artemisTranslate: { submissionCount: numberOfSubmissionsForSubmissionPolicy, totalSubmissions: exercise.submissionPolicy.submissionLimit }
-                        }}
-                    </span>
+                    <span
+                        jhiTranslate="artemisApp.programmingExercise.submissionPolicy.submissionsAllowed"
+                        [translateValues]="{ submissionCount: numberOfSubmissionsForSubmissionPolicy, totalSubmissions: exercise.submissionPolicy.submissionLimit }"
+                    ></span>
                     @if (exercise.submissionPolicy.type === SubmissionPolicyType.SUBMISSION_PENALTY) {
-                        <span>
-                            {{
-                                'artemisApp.programmingExercise.submissionPolicy.submissionPenalty.penaltyInfoLabel'
-                                    | artemisTranslate: { points: exercise.submissionPolicy.exceedingPenalty }
-                            }}
-                        </span>
+                        <span
+                            jhiTranslate="artemisApp.programmingExercise.submissionPolicy.submissionPenalty.penaltyInfoLabel"
+                            [translateValues]="{ points: exercise.submissionPolicy.exceedingPenalty }"
+                        ></span>
                     }
                 }
             </div>
diff --git a/src/main/webapp/app/exercises/programming/participate/programming-submission-policy-status.ts b/src/main/webapp/app/exercises/programming/participate/programming-submission-policy-status.ts
index bf3cd9026f40..e6162da1afd9 100644
--- a/src/main/webapp/app/exercises/programming/participate/programming-submission-policy-status.ts
+++ b/src/main/webapp/app/exercises/programming/participate/programming-submission-policy-status.ts
@@ -7,19 +7,15 @@ import { SubmissionPolicyType } from 'app/entities/submission-policy.model';
     template: `
         @if (exercise.submissionPolicy && exercise.submissionPolicy.active && submissionCount !== undefined) {
             <div submissionPolicy>
-                <span>
-                    {{
-                        'artemisApp.programmingExercise.submissionPolicy.submissionsAllowed'
-                            | artemisTranslate: { submissionCount: submissionCount, totalSubmissions: exercise.submissionPolicy.submissionLimit }
-                    }}
-                </span>
+                <span
+                    jhiTranslate="artemisApp.programmingExercise.submissionPolicy.submissionsAllowed"
+                    [translateValues]="{ submissionCount: submissionCount, totalSubmissions: exercise.submissionPolicy.submissionLimit }"
+                ></span>
                 @if (exercise.submissionPolicy.type === SubmissionPolicyType.SUBMISSION_PENALTY) {
-                    <span>
-                        {{
-                            'artemisApp.programmingExercise.submissionPolicy.submissionPenalty.penaltyInfoLabel'
-                                | artemisTranslate: { points: exercise.submissionPolicy.exceedingPenalty }
-                        }}
-                    </span>
+                    <span
+                        jhiTranslate="artemisApp.programmingExercise.submissionPolicy.submissionPenalty.penaltyInfoLabel"
+                        [translateValues]="{ points: exercise.submissionPolicy.exceedingPenalty }"
+                    ></span>
                 }
             </div>
         }
diff --git a/src/main/webapp/app/exercises/programming/shared/code-editor/status/code-editor-status.component.html b/src/main/webapp/app/exercises/programming/shared/code-editor/status/code-editor-status.component.html
index 2102e75ddf69..3d9c0233d530 100644
--- a/src/main/webapp/app/exercises/programming/shared/code-editor/status/code-editor-status.component.html
+++ b/src/main/webapp/app/exercises/programming/shared/code-editor/status/code-editor-status.component.html
@@ -5,7 +5,7 @@
                 <div>
                     <span ngbTooltip="{{ 'artemisApp.editor.changesUndefinedTooltip' | artemisTranslate }}">
                         <fa-icon [icon]="faCircleNotch" animation="spin" class="text-info me-1" />
-                        <span class="text-info">{{ 'artemisApp.editor.changesUndefined' | artemisTranslate }}</span>
+                        <span class="text-info" jhiTranslate="artemisApp.editor.changesUndefined"></span>
                     </span>
                 </div>
             }
@@ -13,7 +13,7 @@
                 <div>
                     <span ngbTooltip="{{ 'artemisApp.editor.changesErrorTooltip' | artemisTranslate }}">
                         <fa-icon [icon]="faTimesCircle" class="text-danger me-1" />
-                        <span class="text-danger">{{ 'artemisApp.editor.changesError' | artemisTranslate }}</span>
+                        <span class="text-danger" jhiTranslate="artemisApp.editor.changesError"></span>
                     </span>
                 </div>
             }
@@ -21,7 +21,7 @@
                 <div>
                     <span ngbTooltip="{{ 'artemisApp.editor.changesConflictTooltip' | artemisTranslate }}">
                         <fa-icon [icon]="faTimesCircle" class="text-danger me-1" />
-                        <span class="text-danger">{{ 'artemisApp.editor.changesConflict' | artemisTranslate }}</span>
+                        <span class="text-danger" jhiTranslate="artemisApp.editor.changesConflict"></span>
                     </span>
                 </div>
             }
@@ -29,7 +29,7 @@
                 <div>
                     <span ngbTooltip="{{ 'artemisApp.editor.changesSubmittedTooltip' | artemisTranslate }}">
                         <fa-icon [icon]="faCheckCircle" class="text-success me-1" />
-                        <span class="text-info">{{ 'artemisApp.editor.changesSubmitted' | artemisTranslate }}</span>
+                        <span class="text-info" jhiTranslate="artemisApp.editor.changesSubmitted"></span>
                     </span>
                 </div>
             }
@@ -37,7 +37,7 @@
                 <div>
                     <span ngbTooltip="{{ 'artemisApp.editor.unsubmittedChangesTooltip' | artemisTranslate }}">
                         <fa-icon [icon]="faExclamationTriangle" class="text-warning me-1" />
-                        <span class="text-info">{{ 'artemisApp.editor.unsubmittedChanges' | artemisTranslate }}</span>
+                        <span class="text-info" jhiTranslate="artemisApp.editor.unsubmittedChanges"></span>
                     </span>
                 </div>
             }
@@ -45,7 +45,7 @@
                 <div>
                     <span ngbTooltip="{{ 'artemisApp.editor.submittingChangesTooltip' | artemisTranslate }}">
                         <fa-icon [icon]="faCircleNotch" class="text-info me-1" animation="spin" />
-                        <span class="text-info">{{ 'artemisApp.editor.submittingChanges' | artemisTranslate }}</span>
+                        <span class="text-info" jhiTranslate="artemisApp.editor.submittingChanges"></span>
                     </span>
                 </div>
             }
diff --git a/src/main/webapp/app/exercises/programming/shared/instructions-render/step-wizard/programming-exercise-instruction-step-wizard.component.html b/src/main/webapp/app/exercises/programming/shared/instructions-render/step-wizard/programming-exercise-instruction-step-wizard.component.html
index a0bb5f4203fc..eaf81d0a62f8 100644
--- a/src/main/webapp/app/exercises/programming/shared/instructions-render/step-wizard/programming-exercise-instruction-step-wizard.component.html
+++ b/src/main/webapp/app/exercises/programming/shared/instructions-render/step-wizard/programming-exercise-instruction-step-wizard.component.html
@@ -1,8 +1,6 @@
 <div class="card-second-header" [hidden]="!steps?.length">
     <div class="stepwizard">
-        <div class="stepwizard-title">
-            {{ 'artemisApp.programmingExercise.problemStatement.tasksOfExercise' | artemisTranslate }}
-        </div>
+        <div class="stepwizard-title" jhiTranslate="artemisApp.programmingExercise.problemStatement.tasksOfExercise"></div>
         <div class="stepwizard-row">
             @for (step of steps; track step; let i = $index) {
                 <div class="stepwizard-step">
diff --git a/src/main/webapp/app/exercises/quiz/manage/apollon-diagrams/apollon-diagram-create-form.component.html b/src/main/webapp/app/exercises/quiz/manage/apollon-diagrams/apollon-diagram-create-form.component.html
index ff4737f5e7d5..c7fef4d606df 100644
--- a/src/main/webapp/app/exercises/quiz/manage/apollon-diagrams/apollon-diagram-create-form.component.html
+++ b/src/main/webapp/app/exercises/quiz/manage/apollon-diagrams/apollon-diagram-create-form.component.html
@@ -10,17 +10,17 @@ <h4 class="modal-title" id="myApollonDiagramLabel" jhiTranslate="artemisApp.apol
         <div class="form-group-narrow">
             <label class="form-control-label" jhiTranslate="artemisApp.modelingExercise.diagramType" for="field_diagramType"></label>
             <select class="form-select" name="diagramType" [(ngModel)]="apollonDiagram.diagramType" id="field_diagramType">
-                <option value="ClassDiagram">{{ 'artemisApp.DiagramType.ClassDiagram' | artemisTranslate }}</option>
-                <option value="ActivityDiagram">{{ 'artemisApp.DiagramType.ActivityDiagram' | artemisTranslate }}</option>
-                <option value="ObjectDiagram">{{ 'artemisApp.DiagramType.ObjectDiagram' | artemisTranslate }}</option>
-                <option value="UseCaseDiagram">{{ 'artemisApp.DiagramType.UseCaseDiagram' | artemisTranslate }}</option>
-                <option value="CommunicationDiagram">{{ 'artemisApp.DiagramType.CommunicationDiagram' | artemisTranslate }}</option>
-                <option value="ComponentDiagram">{{ 'artemisApp.DiagramType.ComponentDiagram' | artemisTranslate }}</option>
-                <option value="DeploymentDiagram">{{ 'artemisApp.DiagramType.DeploymentDiagram' | artemisTranslate }}</option>
-                <option value="PetriNet">{{ 'artemisApp.DiagramType.PetriNet' | artemisTranslate }}</option>
-                <option value="SyntaxTree">{{ 'artemisApp.DiagramType.SyntaxTree' | artemisTranslate }}</option>
-                <option value="Flowchart">{{ 'artemisApp.DiagramType.Flowchart' | artemisTranslate }}</option>
-                <option value="BPMN">{{ 'artemisApp.DiagramType.BPMN' | artemisTranslate }}</option>
+                <option value="ClassDiagram" jhiTranslate="artemisApp.DiagramType.ClassDiagram"></option>
+                <option value="ActivityDiagram" jhiTranslate="artemisApp.DiagramType.ActivityDiagram"></option>
+                <option value="ObjectDiagram" jhiTranslate="artemisApp.DiagramType.ObjectDiagram"></option>
+                <option value="UseCaseDiagram" jhiTranslate="artemisApp.DiagramType.UseCaseDiagram"></option>
+                <option value="CommunicationDiagram" jhiTranslate="artemisApp.DiagramType.CommunicationDiagram"></option>
+                <option value="ComponentDiagram" jhiTranslate="artemisApp.DiagramType.ComponentDiagram"></option>
+                <option value="DeploymentDiagram" jhiTranslate="artemisApp.DiagramType.DeploymentDiagram"></option>
+                <option value="PetriNet" jhiTranslate="artemisApp.DiagramType.PetriNet"></option>
+                <option value="SyntaxTree" jhiTranslate="artemisApp.DiagramType.SyntaxTree"></option>
+                <option value="Flowchart" jhiTranslate="artemisApp.DiagramType.Flowchart"></option>
+                <option value="BPMN" jhiTranslate="artemisApp.DiagramType.BPMN"></option>
             </select>
         </div>
     </div>
diff --git a/src/main/webapp/app/exercises/quiz/manage/apollon-diagrams/apollon-diagram-detail.component.html b/src/main/webapp/app/exercises/quiz/manage/apollon-diagrams/apollon-diagram-detail.component.html
index 2eba8db14941..65b59b45c255 100644
--- a/src/main/webapp/app/exercises/quiz/manage/apollon-diagrams/apollon-diagram-detail.component.html
+++ b/src/main/webapp/app/exercises/quiz/manage/apollon-diagrams/apollon-diagram-detail.component.html
@@ -1,5 +1,5 @@
 <div class="modal-header">
-    <h4 class="modal-title">{{ 'artemisApp.apollonDiagram.detail.title' | artemisTranslate: { title: this.apollonDiagram?.title } }}</h4>
+    <h4 class="modal-title" jhiTranslate="artemisApp.apollonDiagram.detail.title" [translateValues]="{ title: this.apollonDiagram?.title }"></h4>
     <button type="button" class="btn ms-auto text-secondary" (click)="confirmExitDetailView(true)"><fa-icon [icon]="faX" size="lg" /></button>
 </div>
 <div class="modal-body">
@@ -37,8 +37,13 @@ <h4 class="modal-title">{{ 'artemisApp.apollonDiagram.detail.title' | artemisTra
         jhiTranslate="artemisApp.apollonDiagram.detail.save"
     ></button>
     <div [ngbTooltip]="!hasInteractive ? ('artemisApp.apollonDiagram.create.validationError' | artemisTranslate) : undefined">
-        <button id="generate-quiz-exercise" class="btn btn-primary" (click)="generateExercise()" [hidden]="!apollonDiagram" [disabled]="!hasInteractive">
-            {{ 'artemisApp.apollonDiagram.detail.createLabel' | artemisTranslate }}
-        </button>
+        <button
+            id="generate-quiz-exercise"
+            class="btn btn-primary"
+            (click)="generateExercise()"
+            [hidden]="!apollonDiagram"
+            [disabled]="!hasInteractive"
+            jhiTranslate="artemisApp.apollonDiagram.detail.createLabel"
+        ></button>
     </div>
 </div>
diff --git a/src/main/webapp/app/exercises/quiz/manage/apollon-diagrams/apollon-diagram-list.component.html b/src/main/webapp/app/exercises/quiz/manage/apollon-diagrams/apollon-diagram-list.component.html
index d826fca80ac9..328f37d9780a 100644
--- a/src/main/webapp/app/exercises/quiz/manage/apollon-diagrams/apollon-diagram-list.component.html
+++ b/src/main/webapp/app/exercises/quiz/manage/apollon-diagrams/apollon-diagram-list.component.html
@@ -1,5 +1,5 @@
 <div class="modal-header">
-    <h4 class="modal-title">{{ 'artemisApp.apollonDiagram.home.title' | artemisTranslate }}</h4>
+    <h4 class="modal-title" jhiTranslate="artemisApp.apollonDiagram.home.title"></h4>
     <button type="button" class="btn ms-auto text-secondary" (click)="handleCloseDiagramClick()"><fa-icon [icon]="faX" size="lg" /></button>
 </div>
 <div class="modal-body">
diff --git a/src/main/webapp/app/exercises/quiz/manage/drag-and-drop-question/drag-and-drop-question-edit.component.html b/src/main/webapp/app/exercises/quiz/manage/drag-and-drop-question/drag-and-drop-question-edit.component.html
index 4f9c51cf8ead..a285e73eda79 100644
--- a/src/main/webapp/app/exercises/quiz/manage/drag-and-drop-question/drag-and-drop-question-edit.component.html
+++ b/src/main/webapp/app/exercises/quiz/manage/drag-and-drop-question/drag-and-drop-question-edit.component.html
@@ -110,9 +110,9 @@ <h3 class="mb-0"><span class="badge bg-warning align-text-top" style="width: 60p
                 <div class="form-group">
                     <span jhiTranslate="artemisApp.quizQuestion.scoringType" class="colon-suffix no-flex-shrink"></span>
                     <select class="form-select" [(ngModel)]="question.scoringType" (ngModelChange)="questionUpdated.emit()" title="scoring type">
-                        <option value="ALL_OR_NOTHING">{{ 'artemisApp.quizExercise.scoringType.all_or_nothing' | artemisTranslate }}</option>
-                        <option value="PROPORTIONAL_WITH_PENALTY">{{ 'artemisApp.quizExercise.scoringType.proportional_with_penalty' | artemisTranslate }}</option>
-                        <option value="PROPORTIONAL_WITHOUT_PENALTY">{{ 'artemisApp.quizExercise.scoringType.proportional_without_penalty' | artemisTranslate }}</option>
+                        <option value="ALL_OR_NOTHING" jhiTranslate="artemisApp.quizExercise.scoringType.all_or_nothing"></option>
+                        <option value="PROPORTIONAL_WITH_PENALTY" jhiTranslate="artemisApp.quizExercise.scoringType.proportional_with_penalty"></option>
+                        <option value="PROPORTIONAL_WITHOUT_PENALTY" jhiTranslate="artemisApp.quizExercise.scoringType.proportional_without_penalty"></option>
                     </select>
                     <jhi-quiz-scoring-info-modal />
                 </div>
@@ -144,9 +144,9 @@ <h3 class="mb-0"><span class="badge bg-warning align-text-top" style="width: 60p
                     <div class="form-group">
                         <span jhiTranslate="artemisApp.quizQuestion.scoringType" class="colon-suffix no-flex-shrink"></span>
                         <select class="form-select" [(ngModel)]="question.scoringType" (ngModelChange)="questionUpdated.emit()" title="scoring type">
-                            <option value="ALL_OR_NOTHING">{{ 'artemisApp.quizExercise.scoringType.all_or_nothing' | artemisTranslate }}</option>
-                            <option value="PROPORTIONAL_WITH_PENALTY">{{ 'artemisApp.quizExercise.scoringType.proportional_with_penalty' | artemisTranslate }}</option>
-                            <option value="PROPORTIONAL_WITHOUT_PENALTY">{{ 'artemisApp.quizExercise.scoringType.proportional_without_penalty' | artemisTranslate }}</option>
+                            <option value="ALL_OR_NOTHING" jhiTranslate="artemisApp.quizExercise.scoringType.all_or_nothing"></option>
+                            <option value="PROPORTIONAL_WITH_PENALTY" jhiTranslate="artemisApp.quizExercise.scoringType.proportional_with_penalty"></option>
+                            <option value="PROPORTIONAL_WITHOUT_PENALTY" jhiTranslate="artemisApp.quizExercise.scoringType.proportional_without_penalty"></option>
                         </select>
                         <jhi-quiz-scoring-info-modal />
                     </div>
diff --git a/src/main/webapp/app/exercises/quiz/manage/match-percentage-info-modal/match-percentage-info-modal.component.html b/src/main/webapp/app/exercises/quiz/manage/match-percentage-info-modal/match-percentage-info-modal.component.html
index c653e3747365..e53cf5bda583 100644
--- a/src/main/webapp/app/exercises/quiz/manage/match-percentage-info-modal/match-percentage-info-modal.component.html
+++ b/src/main/webapp/app/exercises/quiz/manage/match-percentage-info-modal/match-percentage-info-modal.component.html
@@ -1,18 +1,18 @@
 <ng-template #info let-c="close" let-d="dismiss">
     <div class="modal-header">
-        <h4 class="modal-title">{{ 'artemisApp.quizExercise.matchingInfoModalTitle' | artemisTranslate }}</h4>
+        <h4 class="modal-title" jhiTranslate="artemisApp.quizExercise.matchingInfoModalTitle"></h4>
         <button type="button" class="btn-close" aria-label="Close" (click)="d()"></button>
     </div>
     <div class="modal-body">
         <table class="table">
             <tr>
-                <th>{{ 'artemisApp.quizExercise.matchLetterCase.title' | artemisTranslate }}</th>
-                <td>{{ 'artemisApp.quizExercise.matchLetterCase.explanation' | artemisTranslate }}</td>
+                <th jhiTranslate="artemisApp.quizExercise.matchLetterCase.title"></th>
+                <td jhiTranslate="artemisApp.quizExercise.matchLetterCase.explanation"></td>
             </tr>
 
             <tr>
-                <th>{{ 'artemisApp.quizExercise.matchPercentage.explanationTitle' | artemisTranslate }}</th>
-                <td>{{ 'artemisApp.quizExercise.matchPercentage.explanation' | artemisTranslate }}</td>
+                <th jhiTranslate="artemisApp.quizExercise.matchPercentage.explanationTitle"></th>
+                <td jhiTranslate="artemisApp.quizExercise.matchPercentage.explanation"></td>
             </tr>
         </table>
     </div>
diff --git a/src/main/webapp/app/exercises/quiz/manage/multiple-choice-question/multiple-choice-question-edit.component.html b/src/main/webapp/app/exercises/quiz/manage/multiple-choice-question/multiple-choice-question-edit.component.html
index 9e13e98db8c7..84d72e6ee23b 100644
--- a/src/main/webapp/app/exercises/quiz/manage/multiple-choice-question/multiple-choice-question-edit.component.html
+++ b/src/main/webapp/app/exercises/quiz/manage/multiple-choice-question/multiple-choice-question-edit.component.html
@@ -47,9 +47,9 @@ <h3 class="mb-0"><span class="badge bg-info align-text-top">MC</span></h3>
                     [disabled]="question.singleChoice ?? false"
                     title="scoring type"
                 >
-                    <option value="ALL_OR_NOTHING">{{ 'artemisApp.quizExercise.scoringType.all_or_nothing' | artemisTranslate }}</option>
-                    <option value="PROPORTIONAL_WITH_PENALTY">{{ 'artemisApp.quizExercise.scoringType.proportional_with_penalty' | artemisTranslate }}</option>
-                    <option value="PROPORTIONAL_WITHOUT_PENALTY">{{ 'artemisApp.quizExercise.scoringType.proportional_without_penalty' | artemisTranslate }}</option>
+                    <option value="ALL_OR_NOTHING" jhiTranslate="artemisApp.quizExercise.scoringType.all_or_nothing"></option>
+                    <option value="PROPORTIONAL_WITH_PENALTY" jhiTranslate="artemisApp.quizExercise.scoringType.proportional_with_penalty"></option>
+                    <option value="PROPORTIONAL_WITHOUT_PENALTY" jhiTranslate="artemisApp.quizExercise.scoringType.proportional_without_penalty"></option>
                 </select>
                 <jhi-quiz-scoring-info-modal />
             </div>
diff --git a/src/main/webapp/app/exercises/quiz/manage/quiz-exercise-update.component.html b/src/main/webapp/app/exercises/quiz/manage/quiz-exercise-update.component.html
index 01efeed3e88b..5548d546d1b7 100644
--- a/src/main/webapp/app/exercises/quiz/manage/quiz-exercise-update.component.html
+++ b/src/main/webapp/app/exercises/quiz/manage/quiz-exercise-update.component.html
@@ -112,9 +112,9 @@ <h4>
                                 <label for="quizMode" jhiTranslate="artemisApp.quizExercise.quizMode.title" class="colon-suffix no-flex-shrink"></label>
                                 <jhi-help-icon text="artemisApp.quizExercise.quizMode.explanation" />
                                 <select id="quizMode" class="form-select" [(ngModel)]="quizExercise.quizMode" (ngModelChange)="cacheValidation()">
-                                    <option [value]="QuizMode.SYNCHRONIZED">{{ 'artemisApp.quizExercise.quizMode.synchronized' | artemisTranslate }}</option>
-                                    <option [value]="QuizMode.BATCHED">{{ 'artemisApp.quizExercise.quizMode.batched' | artemisTranslate }}</option>
-                                    <option [value]="QuizMode.INDIVIDUAL">{{ 'artemisApp.quizExercise.quizMode.individual' | artemisTranslate }}</option>
+                                    <option [value]="QuizMode.SYNCHRONIZED" jhiTranslate="artemisApp.quizExercise.quizMode.synchronized"></option>
+                                    <option [value]="QuizMode.BATCHED" jhiTranslate="artemisApp.quizExercise.quizMode.batched"></option>
+                                    <option [value]="QuizMode.INDIVIDUAL" jhiTranslate="artemisApp.quizExercise.quizMode.individual"></option>
                                 </select>
                                 <ng-container>
                                     <!-- releaseDate works similar to Exam.visibleDate -->
@@ -140,7 +140,7 @@ <h4>
                                         [(ngModel)]="quizExercise.dueDate"
                                     />
                                     @if (quizExercise.dueDateError) {
-                                        <span class="invalid-feedback">{{ 'artemisApp.quizExercise.dueDateError' | artemisTranslate }}</span>
+                                        <span class="invalid-feedback" jhiTranslate="artemisApp.quizExercise.dueDateError"></span>
                                     }
                                 }
                                 @if (quizExercise.quizMode === QuizMode.SYNCHRONIZED) {
@@ -199,9 +199,7 @@ <h4>
                 <div class="row">
                     <div class="col">
                         <div class="form-group">
-                            <label class="form-control-label">{{
-                                'artemisApp.exercise.includedInOverallScore' + (quizExercise.course ? 'Course' : 'Exam') + 'Label' | artemisTranslate
-                            }}</label>
+                            <label class="form-control-label" jhiTranslate="artemisApp.exercise.includedInOverallScore{{ quizExercise.course ? 'Course' : 'Exam' }}Label"></label>
                             <div>
                                 @if (quizExercise.includedInOverallScore) {
                                     <jhi-included-in-overall-score-picker
diff --git a/src/main/webapp/app/exercises/quiz/manage/quiz-exercise.component.html b/src/main/webapp/app/exercises/quiz/manage/quiz-exercise.component.html
index 097f8d74b05a..f016eb439967 100644
--- a/src/main/webapp/app/exercises/quiz/manage/quiz-exercise.component.html
+++ b/src/main/webapp/app/exercises/quiz/manage/quiz-exercise.component.html
@@ -19,7 +19,7 @@
                     <th jhiSortBy="duration"><span jhiTranslate="artemisApp.quizExercise.duration"></span>&nbsp;<fa-icon [icon]="faSort" /></th>
                     <th jhiSortBy="maxPoints"><span jhiTranslate="artemisApp.exercise.points"></span>&nbsp;<fa-icon [icon]="faSort" /></th>
                     <th jhiSortBy="includedInOverallScore"><span jhiTranslate="artemisApp.exercise.includedCompletely"></span>&nbsp;<fa-icon [icon]="faSort" /></th>
-                    <th>{{ 'artemisApp.quizExercise.quizLifecycle' | artemisTranslate }}</th>
+                    <th jhiTranslate="artemisApp.quizExercise.quizLifecycle"></th>
                     <th class="d-md-table-cell"><span jhiTranslate="artemisApp.exercise.categories"></span></th>
                     <th></th>
                 </tr>
@@ -47,19 +47,19 @@
                         }
                         <td>
                             @if (quizExercise.status === QuizStatus.CLOSED) {
-                                <span>{{ 'artemisApp.quizExercise.quizStatus.closed' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.quizExercise.quizStatus.closed"></span>
                             }
                             @if (quizExercise.status === QuizStatus.INVISIBLE) {
-                                <span>{{ 'artemisApp.quizExercise.quizStatus.invisible' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.quizExercise.quizStatus.invisible"></span>
                             }
                             @if (quizExercise.status === QuizStatus.VISIBLE) {
-                                <span>{{ 'artemisApp.quizExercise.quizStatus.visible' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.quizExercise.quizStatus.visible"></span>
                             }
                             @if (quizExercise.status === QuizStatus.ACTIVE) {
-                                <span>{{ 'artemisApp.quizExercise.quizStatus.active' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.quizExercise.quizStatus.active"></span>
                             }
                             @if (quizExercise.status === QuizStatus.OPEN_FOR_PRACTICE) {
-                                <span>{{ 'artemisApp.quizExercise.quizStatus.openForPractice' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.quizExercise.quizStatus.openForPractice"></span>
                             }
                         </td>
                         <td>{{ quizExercise.releaseDate ? (quizExercise.releaseDate | artemisDate: 'long' : true) : '-' }}</td>
diff --git a/src/main/webapp/app/exercises/quiz/manage/quiz-scoring-info-modal/quiz-scoring-info-modal.component.html b/src/main/webapp/app/exercises/quiz/manage/quiz-scoring-info-modal/quiz-scoring-info-modal.component.html
index 345fec5d5378..dcc2030e4f34 100644
--- a/src/main/webapp/app/exercises/quiz/manage/quiz-scoring-info-modal/quiz-scoring-info-modal.component.html
+++ b/src/main/webapp/app/exercises/quiz/manage/quiz-scoring-info-modal/quiz-scoring-info-modal.component.html
@@ -1,23 +1,23 @@
 <ng-template #info let-c="close" let-d="dismiss">
     <div class="modal-header">
-        <h4 class="modal-title">{{ 'artemisApp.quizExercise.scoringTypeExplanation.title' | artemisTranslate }}</h4>
+        <h4 class="modal-title" jhiTranslate="artemisApp.quizExercise.scoringTypeExplanation.title"></h4>
         <button type="button" class="btn-close" aria-label="Close" (click)="d()"></button>
     </div>
     <div class="modal-body">
         <table class="table">
             <tr>
-                <th>{{ 'artemisApp.quizExercise.scoringType.all_or_nothing' | artemisTranslate }}</th>
-                <td>{{ 'artemisApp.quizExercise.scoringTypeExplanation.all_or_nothing' | artemisTranslate }}</td>
+                <th jhiTranslate="artemisApp.quizExercise.scoringType.all_or_nothing"></th>
+                <td jhiTranslate="artemisApp.quizExercise.scoringTypeExplanation.all_or_nothing"></td>
             </tr>
 
             <tr>
-                <th>{{ 'artemisApp.quizExercise.scoringType.proportional_with_penalty' | artemisTranslate }}</th>
-                <td>{{ 'artemisApp.quizExercise.scoringTypeExplanation.proportional_with_penalty' | artemisTranslate }}</td>
+                <th jhiTranslate="artemisApp.quizExercise.scoringType.proportional_with_penalty"></th>
+                <td jhiTranslate="artemisApp.quizExercise.scoringTypeExplanation.proportional_with_penalty"></td>
             </tr>
 
             <tr>
-                <th>{{ 'artemisApp.quizExercise.scoringType.proportional_without_penalty' | artemisTranslate }}</th>
-                <td>{{ 'artemisApp.quizExercise.scoringTypeExplanation.proportional_without_penalty' | artemisTranslate }}</td>
+                <th jhiTranslate="artemisApp.quizExercise.scoringType.proportional_without_penalty"></th>
+                <td jhiTranslate="artemisApp.quizExercise.scoringTypeExplanation.proportional_without_penalty"></td>
             </tr>
         </table>
     </div>
diff --git a/src/main/webapp/app/exercises/quiz/manage/re-evaluate/multiple-choice-question/re-evaluate-multiple-choice-question.component.html b/src/main/webapp/app/exercises/quiz/manage/re-evaluate/multiple-choice-question/re-evaluate-multiple-choice-question.component.html
index b6b99fc4ebac..aacbf1d246b1 100644
--- a/src/main/webapp/app/exercises/quiz/manage/re-evaluate/multiple-choice-question/re-evaluate-multiple-choice-question.component.html
+++ b/src/main/webapp/app/exercises/quiz/manage/re-evaluate/multiple-choice-question/re-evaluate-multiple-choice-question.component.html
@@ -80,9 +80,9 @@ <h3 class="mb-0"><span class="badge bg-info align-text-top">MC</span></h3>
                 <div class="form-group">
                     <span jhiTranslate="artemisApp.quizQuestion.scoringType" class="colon-suffix no-flex-shrink"></span>
                     <select class="form-select" [(ngModel)]="question.scoringType" title="scoring type">
-                        <option value="ALL_OR_NOTHING">{{ 'artemisApp.quizExercise.scoringType.all_or_nothing' | artemisTranslate }}</option>
-                        <option value="PROPORTIONAL_WITH_PENALTY">{{ 'artemisApp.quizExercise.scoringType.proportional_with_penalty' | artemisTranslate }}</option>
-                        <option value="PROPORTIONAL_WITHOUT_PENALTY">{{ 'artemisApp.quizExercise.scoringType.proportional_without_penalty' | artemisTranslate }}</option>
+                        <option value="ALL_OR_NOTHING" jhiTranslate="artemisApp.quizExercise.scoringType.all_or_nothing"></option>
+                        <option value="PROPORTIONAL_WITH_PENALTY" jhiTranslate="artemisApp.quizExercise.scoringType.proportional_with_penalty"></option>
+                        <option value="PROPORTIONAL_WITHOUT_PENALTY" jhiTranslate="artemisApp.quizExercise.scoringType.proportional_without_penalty"></option>
                     </select>
                 </div>
             </div>
diff --git a/src/main/webapp/app/exercises/quiz/manage/re-evaluate/quiz-re-evaluate.component.html b/src/main/webapp/app/exercises/quiz/manage/re-evaluate/quiz-re-evaluate.component.html
index da535def7274..beda166c1e83 100644
--- a/src/main/webapp/app/exercises/quiz/manage/re-evaluate/quiz-re-evaluate.component.html
+++ b/src/main/webapp/app/exercises/quiz/manage/re-evaluate/quiz-re-evaluate.component.html
@@ -69,9 +69,7 @@ <h5>
                     </div>
                     <div class="col-12 col-lg-5">
                         <div class="row form-group">
-                            <label class="form-control-label">{{
-                                'artemisApp.exercise.includedInOverallScore' + (quizExercise.course ? 'Course' : 'Exam') + 'Label' | artemisTranslate
-                            }}</label>
+                            <label class="form-control-label" jhiTranslate="artemisApp.exercise.includedInOverallScore{{ quizExercise.course ? 'Course' : 'Exam' }}Label"></label>
                             <div>
                                 @if (quizExercise.includedInOverallScore) {
                                     <jhi-included-in-overall-score-picker
diff --git a/src/main/webapp/app/exercises/quiz/manage/short-answer-question/short-answer-question-edit.component.html b/src/main/webapp/app/exercises/quiz/manage/short-answer-question/short-answer-question-edit.component.html
index 49822af7d4d7..481e9a768333 100644
--- a/src/main/webapp/app/exercises/quiz/manage/short-answer-question/short-answer-question-edit.component.html
+++ b/src/main/webapp/app/exercises/quiz/manage/short-answer-question/short-answer-question-edit.component.html
@@ -118,14 +118,14 @@ <h3 class="mb-0"><span class="badge bg-success align-text-top" style="width: 60p
                 <div class="form-group">
                     <span jhiTranslate="artemisApp.quizQuestion.scoringType" class="colon-suffix no-flex-shrink"></span>
                     <select class="form-select" [(ngModel)]="shortAnswerQuestion.scoringType" (ngModelChange)="questionUpdated.emit()" title="scoring type">
-                        <option value="ALL_OR_NOTHING">{{ 'artemisApp.quizExercise.scoringType.all_or_nothing' | artemisTranslate }}</option>
-                        <option value="PROPORTIONAL_WITH_PENALTY">{{ 'artemisApp.quizExercise.scoringType.proportional_with_penalty' | artemisTranslate }}</option>
-                        <option value="PROPORTIONAL_WITHOUT_PENALTY">{{ 'artemisApp.quizExercise.scoringType.proportional_without_penalty' | artemisTranslate }}</option>
+                        <option value="ALL_OR_NOTHING" jhiTranslate="artemisApp.quizExercise.scoringType.all_or_nothing"></option>
+                        <option value="PROPORTIONAL_WITH_PENALTY" jhiTranslate="artemisApp.quizExercise.scoringType.proportional_with_penalty"></option>
+                        <option value="PROPORTIONAL_WITHOUT_PENALTY" jhiTranslate="artemisApp.quizExercise.scoringType.proportional_without_penalty"></option>
                     </select>
                     <jhi-quiz-scoring-info-modal />
                 </div>
                 <div class="form-group match-percentage-container">
-                    <span class="colon-suffix no-flex-shrink">{{ 'artemisApp.quizExercise.answerMatching.title' | artemisTranslate }}</span>
+                    <span class="colon-suffix no-flex-shrink" jhiTranslate="artemisApp.quizExercise.answerMatching.title"></span>
                     <div class="slider-container">
                         <div class="slider-with-label">
                             <input
@@ -152,9 +152,11 @@ <h3 class="mb-0"><span class="badge bg-success align-text-top" style="width: 60p
                             [checked]="shortAnswerQuestion.similarityValue === 100"
                             (change)="toggleExactMatchCheckbox(inputElement.checked)"
                         />
-                        <label class="form-check-label custom-control-label" for="{{ 'cbMatchAnswersExactly' + questionIndex }}">{{
-                            'artemisApp.quizExercise.matchPercentage.title' | artemisTranslate
-                        }}</label>
+                        <label
+                            class="form-check-label custom-control-label"
+                            for="{{ 'cbMatchAnswersExactly' + questionIndex }}"
+                            jhiTranslate="artemisApp.quizExercise.matchPercentage.title"
+                        ></label>
                     </div>
                     <div class="form-group form-check custom-control custom-checkbox">
                         <input
@@ -164,9 +166,11 @@ <h3 class="mb-0"><span class="badge bg-success align-text-top" style="width: 60p
                             [(ngModel)]="shortAnswerQuestion.matchLetterCase"
                             (ngModelChange)="questionUpdated.emit()"
                         />
-                        <label class="form-check-label custom-control-label" for="{{ 'cbMatchLetterCase' + questionIndex }}">{{
-                            'artemisApp.quizExercise.matchLetterCase.title' | artemisTranslate
-                        }}</label>
+                        <label
+                            class="form-check-label custom-control-label"
+                            for="{{ 'cbMatchLetterCase' + questionIndex }}"
+                            jhiTranslate="artemisApp.quizExercise.matchLetterCase.title"
+                        ></label>
                     </div>
                 </div>
                 @if (!reEvaluationInProgress) {
@@ -184,9 +188,9 @@ <h3 class="mb-0"><span class="badge bg-success align-text-top" style="width: 60p
                     <div class="form-group">
                         <span jhiTranslate="artemisApp.quizQuestion.scoringType" class="colon-suffix no-flex-shrink"></span>
                         <select class="form-select" [(ngModel)]="shortAnswerQuestion.scoringType" (ngModelChange)="questionUpdated.emit()" title="scoring type">
-                            <option value="ALL_OR_NOTHING">{{ 'artemisApp.quizExercise.scoringType.all_or_nothing' | artemisTranslate }}</option>
-                            <option value="PROPORTIONAL_WITH_PENALTY">{{ 'artemisApp.quizExercise.scoringType.proportional_with_penalty' | artemisTranslate }}</option>
-                            <option value="PROPORTIONAL_WITHOUT_PENALTY">{{ 'artemisApp.quizExercise.scoringType.proportional_without_penalty' | artemisTranslate }}</option>
+                            <option value="ALL_OR_NOTHING" jhiTranslate="artemisApp.quizExercise.scoringType.all_or_nothing"></option>
+                            <option value="PROPORTIONAL_WITH_PENALTY" jhiTranslate="artemisApp.quizExercise.scoringType.proportional_with_penalty"></option>
+                            <option value="PROPORTIONAL_WITHOUT_PENALTY" jhiTranslate="artemisApp.quizExercise.scoringType.proportional_without_penalty"></option>
                         </select>
                         <jhi-quiz-scoring-info-modal />
                     </div>
@@ -221,7 +225,7 @@ <h3 class="mb-0"><span class="badge bg-success align-text-top" style="width: 60p
                 <div class="col-12 row align-items-center justify-content-center justify-content-lg-start">
                     <div class="col-lg-6 row">
                         <div class="col-12 col-lg-4 form-group mt-1">
-                            <span class="colon-suffix no-flex-shrink">{{ 'artemisApp.quizExercise.answerMatching.title' | artemisTranslate }}</span>
+                            <span class="colon-suffix no-flex-shrink" jhiTranslate="artemisApp.quizExercise.answerMatching.title"></span>
                         </div>
                         <div class="col-12 col-lg-7">
                             <div class="slider-container">
@@ -254,9 +258,11 @@ <h3 class="mb-0"><span class="badge bg-success align-text-top" style="width: 60p
                                 [checked]="shortAnswerQuestion.similarityValue === 100"
                                 (change)="toggleExactMatchCheckbox(inputElement.checked)"
                             />
-                            <label class="form-check-label custom-control-label" for="{{ 'cbMatchAnswersExactly' + questionIndex }}">{{
-                                'artemisApp.quizExercise.matchPercentage.title' | artemisTranslate
-                            }}</label>
+                            <label
+                                class="form-check-label custom-control-label"
+                                for="{{ 'cbMatchAnswersExactly' + questionIndex }}"
+                                jhiTranslate="artemisApp.quizExercise.matchPercentage.title"
+                            ></label>
                         </div>
                     </div>
                     <div class="col-12 col-lg-3" style="padding: 0 0.5rem">
@@ -268,9 +274,11 @@ <h3 class="mb-0"><span class="badge bg-success align-text-top" style="width: 60p
                                 [(ngModel)]="shortAnswerQuestion.matchLetterCase"
                                 (ngModelChange)="questionUpdated.emit()"
                             />
-                            <label class="form-check-label custom-control-label" for="{{ 'cbMatchLetterCase' + questionIndex }}">{{
-                                'artemisApp.quizExercise.matchLetterCase.title' | artemisTranslate
-                            }}</label>
+                            <label
+                                class="form-check-label custom-control-label"
+                                for="{{ 'cbMatchLetterCase' + questionIndex }}"
+                                jhiTranslate="artemisApp.quizExercise.matchLetterCase.title"
+                            ></label>
                         </div>
                     </div>
                 </div>
diff --git a/src/main/webapp/app/exercises/quiz/shared/questions/drag-and-drop-question/drag-and-drop-question.component.html b/src/main/webapp/app/exercises/quiz/shared/questions/drag-and-drop-question/drag-and-drop-question.component.html
index 45872ae42fa3..db2299ee644b 100644
--- a/src/main/webapp/app/exercises/quiz/shared/questions/drag-and-drop-question/drag-and-drop-question.component.html
+++ b/src/main/webapp/app/exercises/quiz/shared/questions/drag-and-drop-question/drag-and-drop-question.component.html
@@ -5,22 +5,16 @@
     <div [hidden]="loadingState === 'success'">
         @if (loadingState !== 'error') {
             <h2>
-                <span style="color: grey"
-                    ><fa-icon [icon]="faSpinner" animation="spin" />&nbsp;<span>{{ 'artemisApp.quizQuestion.loading' | artemisTranslate }}</span></span
-                >
+                <span style="color: grey"><fa-icon [icon]="faSpinner" animation="spin" />&nbsp;<span jhiTranslate="artemisApp.quizQuestion.loading"></span></span>
             </h2>
         }
         @if (loadingState === 'error') {
             <div>
                 <h2>
-                    <span style="color: grey"
-                        ><fa-icon [icon]="faExclamationCircle" />&nbsp;<span>{{ 'artemisApp.quizQuestion.failed' | artemisTranslate }}</span></span
-                    >
+                    <span style="color: grey"><fa-icon [icon]="faExclamationCircle" />&nbsp;<span jhiTranslate="artemisApp.quizQuestion.failed"></span></span>
                 </h2>
                 <p>
-                    <button class="btn btn-default" (click)="secureImageComponent.retryLoadImage()">
-                        {{ 'artemisApp.quizQuestion.retry' | artemisTranslate }}
-                    </button>
+                    <button class="btn btn-default" (click)="secureImageComponent.retryLoadImage()" jhiTranslate="artemisApp.quizQuestion.retry"></button>
                 </p>
             </div>
         }
@@ -90,14 +84,10 @@ <h4 class="question-title-display">
                 @if (showResult && !forceSampleSolution) {
                     <div>
                         @if (!showingSampleSolution) {
-                            <div class="btn btn-outline-primary" (click)="showSampleSolution()">
-                                {{ 'artemisApp.quizQuestion.showSampleSolution' | artemisTranslate }}
-                            </div>
+                            <div class="btn btn-outline-primary" (click)="showSampleSolution()" jhiTranslate="artemisApp.quizQuestion.showSampleSolution"></div>
                         }
                         @if (showingSampleSolution) {
-                            <div class="btn btn-outline-primary" (click)="hideSampleSolution()">
-                                {{ 'artemisApp.quizQuestion.hideSampleSolution' | artemisTranslate }}
-                            </div>
+                            <div class="btn btn-outline-primary" (click)="hideSampleSolution()" jhiTranslate="artemisApp.quizQuestion.hideSampleSolution"></div>
                         }
                     </div>
                 }
diff --git a/src/main/webapp/app/exercises/quiz/shared/questions/multiple-choice-question/multiple-choice-question.component.html b/src/main/webapp/app/exercises/quiz/shared/questions/multiple-choice-question/multiple-choice-question.component.html
index 4e8613b42c15..63e6da43a628 100644
--- a/src/main/webapp/app/exercises/quiz/shared/questions/multiple-choice-question/multiple-choice-question.component.html
+++ b/src/main/webapp/app/exercises/quiz/shared/questions/multiple-choice-question/multiple-choice-question.component.html
@@ -10,10 +10,10 @@ <h4 class="question-title-display">
         <span style="color: red" jhiTranslate="artemisApp.quizQuestion.invalidText"></span>
     }
     @if (!isSingleChoice) {
-        <h6>{{ 'artemisApp.quizQuestion.allOptions' | artemisTranslate }}</h6>
+        <h6 jhiTranslate="artemisApp.quizQuestion.allOptions"></h6>
     }
     @if (isSingleChoice) {
-        <h6>{{ 'artemisApp.quizQuestion.singleOption' | artemisTranslate }}</h6>
+        <h6 jhiTranslate="artemisApp.quizQuestion.singleOption"></h6>
     }
     @if (question.hint || (question.explanation && showResult)) {
         <div class="hint">
@@ -98,13 +98,13 @@ <h6>{{ 'artemisApp.quizQuestion.singleOption' | artemisTranslate }}</h6>
     @if (showResult) {
         <table class="answer-options-result">
             <tr>
-                <th class="content">{{ 'artemisApp.multipleChoiceQuestion.answer' | artemisTranslate }}</th>
-                <th class="solution">{{ 'artemisApp.multipleChoiceQuestion.solution' | artemisTranslate }}</th>
+                <th class="content" jhiTranslate="artemisApp.multipleChoiceQuestion.answer"></th>
+                <th class="solution" jhiTranslate="artemisApp.multipleChoiceQuestion.solution"></th>
                 @if (!forceSampleSolution) {
                     <th class="result-symbol"></th>
                 }
                 @if (!forceSampleSolution) {
-                    <th class="selection">{{ 'artemisApp.multipleChoiceQuestion.you' | artemisTranslate }}</th>
+                    <th class="selection" jhiTranslate="artemisApp.multipleChoiceQuestion.you"></th>
                 }
             </tr>
             @for (answerOption of question.answerOptions; track answerOption; let i = $index) {
@@ -134,10 +134,10 @@ <h6>{{ 'artemisApp.quizQuestion.singleOption' | artemisTranslate }}</h6>
                     </td>
                     <td class="solution">
                         @if (!answerOption.invalid && !question.invalid && answerOption.isCorrect) {
-                            <span id="answer-option-{{ i }}-correct" class="correct">{{ 'artemisApp.multipleChoiceQuestion.correct' | artemisTranslate }}</span>
+                            <span id="answer-option-{{ i }}-correct" class="correct" jhiTranslate="artemisApp.multipleChoiceQuestion.correct"></span>
                         }
                         @if (!answerOption.invalid && !question.invalid && !answerOption.isCorrect) {
-                            <span id="answer-option-{{ i }}-wrong" class="wrong">{{ 'artemisApp.multipleChoiceQuestion.wrong' | artemisTranslate }}</span>
+                            <span id="answer-option-{{ i }}-wrong" class="wrong" jhiTranslate="artemisApp.multipleChoiceQuestion.wrong"></span>
                         }
                         @if (answerOption.invalid || question.invalid) {
                             <span id="answer-option-{{ i }}-invalid" class="wrong" jhiTranslate="artemisApp.quizQuestion.invalid"></span>
diff --git a/src/main/webapp/app/exercises/quiz/shared/questions/multiple-choice-question/multiple-choice-visual-question.component.html b/src/main/webapp/app/exercises/quiz/shared/questions/multiple-choice-question/multiple-choice-visual-question.component.html
index 941b371f74e0..d22aaa202246 100644
--- a/src/main/webapp/app/exercises/quiz/shared/questions/multiple-choice-question/multiple-choice-visual-question.component.html
+++ b/src/main/webapp/app/exercises/quiz/shared/questions/multiple-choice-question/multiple-choice-visual-question.component.html
@@ -1,5 +1,5 @@
 <div class="markdown-preview visual-mode">
-    <h4>{{ 'artemisApp.multipleChoiceQuestion.visualEditor.questionTitle' | artemisTranslate }}</h4>
+    <h4 jhiTranslate="artemisApp.multipleChoiceQuestion.visualEditor.questionTitle"></h4>
     <textarea
         id="mc-question"
         class="form-control form-group-narrow"
@@ -30,7 +30,7 @@ <h4>{{ 'artemisApp.multipleChoiceQuestion.visualEditor.questionTitle' | artemisT
             placeholder="{{ 'artemisApp.multipleChoiceQuestion.visualEditor.explanationPlaceholder' | artemisTranslate }}"
         />
     </div>
-    <h4>{{ 'artemisApp.multipleChoiceQuestion.visualEditor.answersTitle' | artemisTranslate }}</h4>
+    <h4 jhiTranslate="artemisApp.multipleChoiceQuestion.visualEditor.answersTitle"></h4>
     @for (answerOption of question.answerOptions; track answerOption; let i = $index) {
         <div id="answer-option-{{ i }}" class="visual-answer-option form-group-narrow">
             <div class="form-group-narrow visual-answer-question-container">
diff --git a/src/main/webapp/app/exercises/quiz/shared/questions/short-answer-question/short-answer-question.component.html b/src/main/webapp/app/exercises/quiz/shared/questions/short-answer-question/short-answer-question.component.html
index ee1c8a7dbaff..e348700edb56 100644
--- a/src/main/webapp/app/exercises/quiz/shared/questions/short-answer-question/short-answer-question.component.html
+++ b/src/main/webapp/app/exercises/quiz/shared/questions/short-answer-question/short-answer-question.component.html
@@ -116,14 +116,10 @@ <h4 class="question-title-display">
     @if (showResult && !forceSampleSolution) {
         <div>
             @if (!showingSampleSolution) {
-                <div class="btn btn-outline-primary" (click)="showSampleSolution()">
-                    {{ 'artemisApp.quizQuestion.showSampleSolution' | artemisTranslate }}
-                </div>
+                <div class="btn btn-outline-primary" (click)="showSampleSolution()" jhiTranslate="artemisApp.quizQuestion.showSampleSolution"></div>
             }
             @if (showingSampleSolution) {
-                <div class="btn btn-outline-primary" (click)="hideSampleSolution()">
-                    {{ 'artemisApp.quizQuestion.hideSampleSolution' | artemisTranslate }}
-                </div>
+                <div class="btn btn-outline-primary" (click)="hideSampleSolution()" jhiTranslate="artemisApp.quizQuestion.hideSampleSolution"></div>
             }
         </div>
     }
diff --git a/src/main/webapp/app/exercises/shared/assessment-progress-label/assessment-progress-label.component.html b/src/main/webapp/app/exercises/shared/assessment-progress-label/assessment-progress-label.component.html
index 82cb8923178e..01153454d473 100644
--- a/src/main/webapp/app/exercises/shared/assessment-progress-label/assessment-progress-label.component.html
+++ b/src/main/webapp/app/exercises/shared/assessment-progress-label/assessment-progress-label.component.html
@@ -1,18 +1,16 @@
 <h4>
     @if (submissions && submissions.length === 0) {
-        <small class="text-warning"> {{ 'artemisApp.assessmentDashboard.noSubmissionFound' | artemisTranslate: {} }} </small>
+        <small class="text-warning" jhiTranslate="artemisApp.assessmentDashboard.noSubmissionFound" [translateValues]="{}"></small>
     }
     @if (submissions && submissions.length > 0) {
-        <small [ngClass]="numberAssessedSubmissions === submissions.length ? 'text-success' : 'text-warning'">
-            {{
-                'artemisApp.assessmentDashboard.progressDescription'
-                    | artemisTranslate
-                        : {
-                              percentageAssessed: (numberAssessedSubmissions / submissions.length) * 100 | number: '0.0-0',
-                              numberAssessed: numberAssessedSubmissions,
-                              numberSubmissions: submissions.length,
-                          }
-            }}
-        </small>
+        <small
+            [ngClass]="numberAssessedSubmissions === submissions.length ? 'text-success' : 'text-warning'"
+            jhiTranslate="artemisApp.assessmentDashboard.progressDescription"
+            [translateValues]="{
+                percentageAssessed: (numberAssessedSubmissions / submissions.length) * 100 | number: '0.0-0',
+                numberAssessed: numberAssessedSubmissions,
+                numberSubmissions: submissions.length,
+            }"
+        ></small>
     }
 </h4>
diff --git a/src/main/webapp/app/exercises/shared/dashboards/tutor/exercise-assessment-dashboard.component.html b/src/main/webapp/app/exercises/shared/dashboards/tutor/exercise-assessment-dashboard.component.html
index eae89aacb43b..bb0b532d5fe7 100644
--- a/src/main/webapp/app/exercises/shared/dashboards/tutor/exercise-assessment-dashboard.component.html
+++ b/src/main/webapp/app/exercises/shared/dashboards/tutor/exercise-assessment-dashboard.component.html
@@ -70,9 +70,7 @@
                         [panelDescriptionHeader]="'artemisApp.exerciseAssessmentDashboard.totalYours' | artemisTranslate"
                     >
                         <div class="row g-0 mb-1">
-                            <div class="col-7">
-                                {{ 'artemisApp.assessmentDashboard.submissions' | artemisTranslate }}
-                            </div>
+                            <div class="col-7" jhiTranslate="artemisApp.assessmentDashboard.submissions"></div>
                             <div class="col-5">
                                 <span class="text-success">{{ numberOfSubmissions.inTime }}</span>
                                 @if (numberOfSubmissions.late > 0) {
@@ -88,7 +86,7 @@
 
                         @if (complaintsEnabled) {
                             <div class="row g-0 mb-1">
-                                <div class="col-7">{{ 'artemisApp.assessmentDashboard.complaints' | artemisTranslate }}</div>
+                                <div class="col-7" jhiTranslate="artemisApp.assessmentDashboard.complaints"></div>
                                 <div class="col-5">
                                     @if (exercise.isAtLeastInstructor) {
                                         <div>
@@ -115,9 +113,7 @@
 
                         @if (feedbackRequestEnabled) {
                             <div class="row g-0 mb-1">
-                                <div class="col-7">
-                                    {{ 'artemisApp.assessmentDashboard.moreFeedbackRequests' | artemisTranslate }}
-                                </div>
+                                <div class="col-7" jhiTranslate="artemisApp.assessmentDashboard.moreFeedbackRequests"></div>
                                 <div class="col-5">
                                     @if (exercise.isAtLeastInstructor) {
                                         <div>
@@ -147,13 +143,13 @@
                         }
 
                         <div class="row g-0 mb-1">
-                            <div class="col-7">{{ 'artemisApp.exerciseAssessmentDashboard.ratings' | artemisTranslate }}</div>
+                            <div class="col-7" jhiTranslate="artemisApp.exerciseAssessmentDashboard.ratings"></div>
                             <div class="col-5">{{ ratingsDashboardInfo.total }} | {{ ratingsDashboardInfo.tutor }}</div>
                         </div>
                         <div class="row g-0 mb-1">
                             <a [routerLink]="getExerciseDetailsLink()" [queryParams]="" class="btn btn-info btn-sm me-1 mb-3" id="exercise-details">
                                 <fa-icon [icon]="faListAlt" [fixedWidth]="true" />
-                                <span class="d-none d-md-inline">{{ 'artemisApp.exerciseAssessmentDashboard.exerciseDetails' | artemisTranslate }}</span>
+                                <span class="d-none d-md-inline" jhiTranslate="artemisApp.exerciseAssessmentDashboard.exerciseDetails"></span>
                             </a>
                         </div>
                     </jhi-side-panel>
@@ -161,12 +157,12 @@
                     <div class="me-2 d-block float-end">
                         <div>
                             <div class="square bg-success d-inline-block"></div>
-                            <span>{{ 'artemisApp.exerciseAssessmentDashboard.stats.intime' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.exerciseAssessmentDashboard.stats.intime"></span>
                         </div>
                         @if (numberOfSubmissions.late > 0) {
                             <div>
                                 <div class="square bg-danger d-inline-block"></div>
-                                <span>{{ 'artemisApp.exerciseAssessmentDashboard.stats.late' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.exerciseAssessmentDashboard.stats.late"></span>
                             </div>
                         }
                     </div>
@@ -213,7 +209,7 @@
 
                 @if (exercise.type === ExerciseType.PROGRAMMING) {
                     <div class="col-12">
-                        <h4>{{ 'artemisApp.exerciseAssessmentDashboard.exampleSolution' | artemisTranslate }}</h4>
+                        <h4 jhiTranslate="artemisApp.exerciseAssessmentDashboard.exampleSolution"></h4>
                         @if (!localVCEnabled) {
                             <a jhiSecureLink [href]="programmingExercise.solutionParticipation?.repositoryUri || ''">
                                 <jhi-button jhiTranslate="artemisApp.exerciseAssessmentDashboard.programmingExercise.exampleSolution" />
@@ -236,7 +232,7 @@ <h4>{{ 'artemisApp.exerciseAssessmentDashboard.exampleSolution' | artemisTransla
 
                 @if (exercise.gradingCriteria && exercise.gradingCriteria.length > 0) {
                     <div class="col-md-6 mt-4">
-                        <h4>{{ 'artemisApp.exerciseAssessmentDashboard.structuredGradingInstructions' | artemisTranslate }}</h4>
+                        <h4 jhiTranslate="artemisApp.exerciseAssessmentDashboard.structuredGradingInstructions"></h4>
                         <jhi-structured-grading-instructions-assessment-layout [readonly]="true" [criteria]="exercise.gradingCriteria || []" />
                     </div>
                 }
@@ -245,19 +241,15 @@ <h4>{{ 'artemisApp.exerciseAssessmentDashboard.structuredGradingInstructions' |
 
         @if (tutorParticipationStatus === NOT_PARTICIPATED && !isTestRun) {
             <div class="col-12 text-center mt-2 mb-4">
-                <p>{{ 'artemisApp.exerciseAssessmentDashboard.pleaseContactIfUnclear' | artemisTranslate }}</p>
+                <p jhiTranslate="artemisApp.exerciseAssessmentDashboard.pleaseContactIfUnclear"></p>
 
                 <button id="participate-in-assessment" class="btn btn-primary guided-tour-instructions-button p-1" (click)="readInstruction()" [disabled]="isLoading">
                     @if (exercise.gradingInstructions && exercise.gradingInstructions.length > 0) {
-                        <span>
-                            {{ 'artemisApp.exerciseAssessmentDashboard.readAndUnderstood' | artemisTranslate }}
-                        </span>
+                        <span jhiTranslate="artemisApp.exerciseAssessmentDashboard.readAndUnderstood"></span>
                     }
 
                     @if (!exercise.gradingInstructions || exercise.gradingInstructions.length === 0) {
-                        <span>
-                            {{ 'artemisApp.exerciseAssessmentDashboard.startYourParticipation' | artemisTranslate }}
-                        </span>
+                        <span jhiTranslate="artemisApp.exerciseAssessmentDashboard.startYourParticipation"></span>
                     }
                 </button>
             </div>
@@ -294,9 +286,7 @@ <h4>{{ 'artemisApp.exerciseAssessmentDashboard.structuredGradingInstructions' |
                                             (click)="openExampleSubmission(nextExampleSubmissionId, true, false)"
                                         >
                                             @if (stats.toReview.done <= 0) {
-                                                <span>
-                                                    {{ 'artemisApp.exerciseAssessmentDashboard.start' | artemisTranslate }}
-                                                </span>
+                                                <span jhiTranslate="artemisApp.exerciseAssessmentDashboard.start"></span>
                                             } @else {
                                                 {{ 'artemisApp.exerciseAssessmentDashboard.continue' | artemisTranslate }}
                                             }
@@ -339,9 +329,7 @@ <h4>{{ 'artemisApp.exerciseAssessmentDashboard.structuredGradingInstructions' |
                                             (click)="openExampleSubmission(nextExampleSubmissionId, false, true)"
                                         >
                                             @if (stats.toAssess.done <= 0) {
-                                                <span>
-                                                    {{ 'artemisApp.exerciseAssessmentDashboard.start' | artemisTranslate }}
-                                                </span>
+                                                <span jhiTranslate="artemisApp.exerciseAssessmentDashboard.start"></span>
                                             } @else {
                                                 {{ 'artemisApp.exerciseAssessmentDashboard.continue' | artemisTranslate }}
                                             }
@@ -373,22 +361,20 @@ <h4>{{ 'artemisApp.exerciseAssessmentDashboard.structuredGradingInstructions' |
                         </div>
                     }
                     @if (submissionLockLimitReached && tutorParticipationStatus !== REVIEWED_INSTRUCTIONS) {
-                        <div class="alert alert-danger">
-                            {{ 'artemisApp.submission.lockedSubmissionsLimitReached' | artemisTranslate }}
-                        </div>
+                        <div class="alert alert-danger" jhiTranslate="artemisApp.submission.lockedSubmissionsLimitReached"></div>
                     }
                     @for (roundState of numberOfAssessmentsOfCorrectionRounds; track roundState; let correctionRound = $index) {
                         <div>
                             @if ((tutorParticipationStatus === TRAINED || exercise.isAtLeastInstructor || tutorParticipationStatus === COMPLETED) && !isTestRun) {
                                 @if (!isExamMode) {
-                                    <h4 class="d-inline-block">
-                                        {{ 'artemisApp.exerciseAssessmentDashboard.studentsSubmissions' | artemisTranslate }}
-                                    </h4>
+                                    <h4 class="d-inline-block" jhiTranslate="artemisApp.exerciseAssessmentDashboard.studentsSubmissions"></h4>
                                 }
                                 @if (isExamMode) {
-                                    <h4 class="d-inline-block">
-                                        {{ 'artemisApp.exerciseAssessmentDashboard.studentsSubmissionsExam' | artemisTranslate: { round: correctionRound + 1 } }}
-                                    </h4>
+                                    <h4
+                                        class="d-inline-block"
+                                        jhiTranslate="artemisApp.exerciseAssessmentDashboard.studentsSubmissionsExam"
+                                        [translateValues]="{ round: correctionRound + 1 }"
+                                    ></h4>
                                 }
                                 @if (correctionRound > 0) {
                                     <fa-icon
@@ -400,9 +386,7 @@ <h4 class="d-inline-block">
                             }
                             @if (numberOfCorrectionRoundsEnabled > correctionRound) {
                                 @if (isTestRun) {
-                                    <h4>
-                                        {{ 'artemisApp.exerciseAssessmentDashboard.testRunSubmissions' | artemisTranslate }}
-                                    </h4>
+                                    <h4 jhiTranslate="artemisApp.exerciseAssessmentDashboard.testRunSubmissions"></h4>
                                 }
                                 @if (tutorParticipationStatus === TRAINED || exercise.isAtLeastInstructor || tutorParticipationStatus === COMPLETED || isTestRun) {
                                     <div class="table-responsive">
@@ -417,20 +401,20 @@ <h4>
                                                     >
                                                         <th>#</th>
                                                         <th jhiSortBy="submissionDate">
-                                                            <a class="th-link">{{ 'artemisApp.exerciseAssessmentDashboard.submissionDate' | artemisTranslate }}</a>
+                                                            <a class="th-link" jhiTranslate="artemisApp.exerciseAssessmentDashboard.submissionDate"></a>
                                                             <fa-icon [icon]="faSort" />
                                                         </th>
                                                         <th jhiSortBy="results.correctionRound.score">
-                                                            <a class="th-link">{{ 'artemisApp.exerciseAssessmentDashboard.result' | artemisTranslate }}</a>
+                                                            <a class="th-link" jhiTranslate="artemisApp.exerciseAssessmentDashboard.result"></a>
                                                             <fa-icon [icon]="faSort" />
                                                         </th>
                                                         @if (exercise.type === ExerciseType.TEXT) {
                                                             <th jhiSortBy="language">
-                                                                <a class="th-link">{{ 'artemisApp.exerciseAssessmentDashboard.language' | artemisTranslate }}</a>
+                                                                <a class="th-link" jhiTranslate="artemisApp.exerciseAssessmentDashboard.language"></a>
                                                                 <fa-icon [icon]="faSort" />
                                                             </th>
                                                         }
-                                                        <th>{{ 'artemisApp.exerciseAssessmentDashboard.action' | artemisTranslate }}</th>
+                                                        <th jhiTranslate="artemisApp.exerciseAssessmentDashboard.action"></th>
                                                     </tr>
                                                 </thead>
                                                 <tbody>
@@ -536,13 +520,9 @@ <h4>
                                         } @else {
                                             <jhi-assessment-warning [exercise]="exercise" />
                                             @if (!exercise.teamMode) {
-                                                <div class="alert alert-info">
-                                                    {{ 'artemisApp.exerciseAssessmentDashboard.noSubmissions' | artemisTranslate }}
-                                                </div>
+                                                <div class="alert alert-info" jhiTranslate="artemisApp.exerciseAssessmentDashboard.noSubmissions"></div>
                                             } @else {
-                                                <div class="alert alert-warning">
-                                                    {{ 'artemisApp.exerciseAssessmentDashboard.startAssessmentFromTeamPages' | artemisTranslate }}
-                                                </div>
+                                                <div class="alert alert-warning" jhiTranslate="artemisApp.exerciseAssessmentDashboard.startAssessmentFromTeamPages"></div>
                                             }
                                         }
                                         @if (
@@ -570,17 +550,13 @@ <h4>
                                 }
                             }
                             @if (numberOfCorrectionRoundsEnabled <= correctionRound) {
-                                <div class="alert alert-info">
-                                    {{ 'artemisApp.exerciseAssessmentDashboard.correctionRoundNotYetEnabled' | artemisTranslate }}
-                                </div>
+                                <div class="alert alert-info" jhiTranslate="artemisApp.exerciseAssessmentDashboard.correctionRoundNotYetEnabled"></div>
                             }
                         </div>
                     }
                     <!-- Complaints -->
                     @if (tutorParticipationStatus === TRAINED || exercise.isAtLeastInstructor || tutorParticipationStatus === COMPLETED || isTestRun) {
-                        <h4 class="d-inline-block">
-                            {{ 'artemisApp.exerciseAssessmentDashboard.complaints' | artemisTranslate }}
-                        </h4>
+                        <h4 class="d-inline-block" jhiTranslate="artemisApp.exerciseAssessmentDashboard.complaints"></h4>
                         <fa-icon class="text-secondary" [icon]="faQuestionCircle" [ngbTooltip]="'artemisApp.exerciseAssessmentDashboard.complaintHint' | artemisTranslate" />
                         <div class="table-responsive">
                             @if (submissionsWithComplaints && submissionsWithComplaints!.length > 0) {
@@ -589,22 +565,22 @@ <h4 class="d-inline-block">
                                         <tr jhiSort [(predicate)]="sortPredicates[1]" [(ascending)]="reverseOrders[1]" (sortChange)="sortComplaintRows()">
                                             <th>#</th>
                                             <th jhiSortBy="complaint.submittedTime">
-                                                <a class="th-link">{{ 'artemisApp.exerciseAssessmentDashboard.submissionDate' | artemisTranslate }}</a>
+                                                <a class="th-link" jhiTranslate="artemisApp.exerciseAssessmentDashboard.submissionDate"></a>
                                                 <fa-icon [icon]="faSort" />
                                             </th>
                                             <th jhiSortBy="submission.latestResult.score">
-                                                <a class="th-link">{{ 'artemisApp.exerciseAssessmentDashboard.result' | artemisTranslate }}</a>
+                                                <a class="th-link" jhiTranslate="artemisApp.exerciseAssessmentDashboard.result"></a>
                                                 <fa-icon [icon]="faSort" />
                                             </th>
                                             <th jhiSortBy="responseTime">
-                                                <a class="th-link">{{ 'artemisApp.exerciseAssessmentDashboard.responseTime' | artemisTranslate }}</a>
+                                                <a class="th-link" jhiTranslate="artemisApp.exerciseAssessmentDashboard.responseTime"></a>
                                                 <fa-icon [icon]="faSort" />
                                             </th>
                                             <th jhiSortBy="complaint.accepted">
-                                                <a class="th-link">{{ 'artemisApp.exerciseAssessmentDashboard.status' | artemisTranslate }}</a>
+                                                <a class="th-link" jhiTranslate="artemisApp.exerciseAssessmentDashboard.status"></a>
                                                 <fa-icon [icon]="faSort" />
                                             </th>
-                                            <th>{{ 'artemisApp.exerciseAssessmentDashboard.action' | artemisTranslate }}</th>
+                                            <th jhiTranslate="artemisApp.exerciseAssessmentDashboard.action"></th>
                                         </tr>
                                     </thead>
                                     <tbody>
@@ -634,19 +610,13 @@ <h4 class="d-inline-block">
                                                 </td>
                                                 <td>
                                                     @if (submissionWithComplaint.complaint.accepted === undefined) {
-                                                        <span class="text-warning">
-                                                            {{ 'artemisApp.complaint.listOfComplaints.noReply' | artemisTranslate }}
-                                                        </span>
+                                                        <span class="text-warning" jhiTranslate="artemisApp.complaint.listOfComplaints.noReply"></span>
                                                     }
                                                     @if (submissionWithComplaint.complaint.accepted === true) {
-                                                        <span class="text-success">
-                                                            {{ 'artemisApp.complaint.listOfComplaints.accepted' | artemisTranslate }}
-                                                        </span>
+                                                        <span class="text-success" jhiTranslate="artemisApp.complaint.listOfComplaints.accepted"></span>
                                                     }
                                                     @if (submissionWithComplaint.complaint.accepted === false) {
-                                                        <span class="text-danger">
-                                                            {{ 'artemisApp.complaint.listOfComplaints.rejected' | artemisTranslate }}
-                                                        </span>
+                                                        <span class="text-danger" jhiTranslate="artemisApp.complaint.listOfComplaints.rejected"></span>
                                                     }
                                                 </td>
                                                 <td>
@@ -690,14 +660,10 @@ <h4 class="d-inline-block">
                                 </table>
                             } @else {
                                 @if (complaintsDashboardInfo.total === 0) {
-                                    <div class="alert alert-info">
-                                        {{ 'artemisApp.exerciseAssessmentDashboard.noComplaints' | artemisTranslate }}
-                                    </div>
+                                    <div class="alert alert-info" jhiTranslate="artemisApp.exerciseAssessmentDashboard.noComplaints"></div>
                                 }
                                 @if (complaintsDashboardInfo.total !== 0) {
-                                    <div class="alert alert-info">
-                                        {{ 'artemisApp.exerciseAssessmentDashboard.noComplaintsDisplayed' | artemisTranslate }}
-                                    </div>
+                                    <div class="alert alert-info" jhiTranslate="artemisApp.exerciseAssessmentDashboard.noComplaintsDisplayed"></div>
                                 }
                             }
                         </div>
@@ -705,9 +671,7 @@ <h4 class="d-inline-block">
 
                     <!-- More Feedback Requests -->
                     @if ((tutorParticipationStatus === TRAINED || exercise.isAtLeastInstructor || tutorParticipationStatus === COMPLETED) && !isExamMode) {
-                        <h4 class="d-inline-block">
-                            {{ 'artemisApp.exerciseAssessmentDashboard.moreFeedback' | artemisTranslate }}
-                        </h4>
+                        <h4 class="d-inline-block" jhiTranslate="artemisApp.exerciseAssessmentDashboard.moreFeedback"></h4>
                         <fa-icon
                             class="text-secondary"
                             [icon]="faQuestionCircle"
@@ -720,22 +684,22 @@ <h4 class="d-inline-block">
                                         <tr jhiSort [(predicate)]="sortPredicates[2]" [(ascending)]="reverseOrders[2]" (sortChange)="sortMoreFeedbackRows()">
                                             <th>#</th>
                                             <th jhiSortBy="complaint.submittedTime">
-                                                <a class="th-link">{{ 'artemisApp.exerciseAssessmentDashboard.submissionDate' | artemisTranslate }}</a>
+                                                <a class="th-link" jhiTranslate="artemisApp.exerciseAssessmentDashboard.submissionDate"></a>
                                                 <fa-icon [icon]="faSort" />
                                             </th>
                                             <th jhiSortBy="submission.latestResult.score">
-                                                <a class="th-link">{{ 'artemisApp.exerciseAssessmentDashboard.result' | artemisTranslate }}</a>
+                                                <a class="th-link" jhiTranslate="artemisApp.exerciseAssessmentDashboard.result"></a>
                                                 <fa-icon [icon]="faSort" />
                                             </th>
                                             <th jhiSortBy="responseTime">
-                                                <a class="th-link">{{ 'artemisApp.exerciseAssessmentDashboard.responseTime' | artemisTranslate }}</a>
+                                                <a class="th-link" jhiTranslate="artemisApp.exerciseAssessmentDashboard.responseTime"></a>
                                                 <fa-icon [icon]="faSort" />
                                             </th>
                                             <th jhiSortBy="complaint.accepted">
-                                                <a class="th-link">{{ 'artemisApp.exerciseAssessmentDashboard.status' | artemisTranslate }}</a>
+                                                <a class="th-link" jhiTranslate="artemisApp.exerciseAssessmentDashboard.status"></a>
                                                 <fa-icon [icon]="faSort" />
                                             </th>
-                                            <th>{{ 'artemisApp.exerciseAssessmentDashboard.action' | artemisTranslate }}</th>
+                                            <th jhiTranslate="artemisApp.exerciseAssessmentDashboard.action"></th>
                                         </tr>
                                     </thead>
                                     <tbody>
@@ -761,14 +725,10 @@ <h4 class="d-inline-block">
                                                 </td>
                                                 <td>
                                                     @if (moreFeedbackRequest.complaint.accepted === undefined) {
-                                                        <span class="text-warning">
-                                                            {{ 'artemisApp.complaint.listOfComplaints.noReply' | artemisTranslate }}
-                                                        </span>
+                                                        <span class="text-warning" jhiTranslate="artemisApp.complaint.listOfComplaints.noReply"></span>
                                                     }
                                                     @if (moreFeedbackRequest.complaint.accepted === true) {
-                                                        <span class="text-success">
-                                                            {{ 'artemisApp.moreFeedback.accepted' | artemisTranslate }}
-                                                        </span>
+                                                        <span class="text-success" jhiTranslate="artemisApp.moreFeedback.accepted"></span>
                                                     }
                                                 </td>
                                                 <td>
@@ -813,14 +773,10 @@ <h4 class="d-inline-block">
                                 </table>
                             } @else {
                                 @if (moreFeedbackRequestsDashboardInfo.total === 0) {
-                                    <div class="alert alert-info">
-                                        {{ 'artemisApp.exerciseAssessmentDashboard.noMoreFeedbackRequests' | artemisTranslate }}
-                                    </div>
+                                    <div class="alert alert-info" jhiTranslate="artemisApp.exerciseAssessmentDashboard.noMoreFeedbackRequests"></div>
                                 }
                                 @if (moreFeedbackRequestsDashboardInfo.total !== 0) {
-                                    <div class="alert alert-info">
-                                        {{ 'artemisApp.exerciseAssessmentDashboard.noMoreFeedbackRequestsDisplayed' | artemisTranslate }}
-                                    </div>
+                                    <div class="alert alert-info" jhiTranslate="artemisApp.exerciseAssessmentDashboard.noMoreFeedbackRequestsDisplayed"></div>
                                 }
                             }
                         </div>
@@ -833,7 +789,7 @@ <h4 class="d-inline-block">
         @if (this.tutorParticipation.status! === TRAINED || exercise.isAtLeastInstructor) {
             <div>
                 @if (!isExamMode) {
-                    <h2>{{ 'artemisApp.instructorExerciseDashboard.leaderboardTitle' | artemisTranslate }}</h2>
+                    <h2 jhiTranslate="artemisApp.instructorExerciseDashboard.leaderboardTitle"></h2>
                 }
                 <jhi-tutor-leaderboard [exam]="exam" [tutorsData]="statsForDashboard.tutorLeaderboardEntries" [exercise]="exercise" />
             </div>
diff --git a/src/main/webapp/app/exercises/shared/difficulty-picker/difficulty-picker.component.html b/src/main/webapp/app/exercises/shared/difficulty-picker/difficulty-picker.component.html
index ca7ed23187b1..5071bdc0cb5a 100644
--- a/src/main/webapp/app/exercises/shared/difficulty-picker/difficulty-picker.component.html
+++ b/src/main/webapp/app/exercises/shared/difficulty-picker/difficulty-picker.component.html
@@ -1,26 +1,26 @@
 <div class="btn-group">
-    <div class="btn" [ngClass]="{ 'btn-primary selected': !exercise.difficulty, 'btn-default': exercise.difficulty }" (click)="setDifficulty(undefined)">
-        {{ 'artemisApp.exercise.noLevel' | artemisTranslate }}
-    </div>
+    <div
+        class="btn"
+        [ngClass]="{ 'btn-primary selected': !exercise.difficulty, 'btn-default': exercise.difficulty }"
+        (click)="setDifficulty(undefined)"
+        jhiTranslate="artemisApp.exercise.noLevel"
+    ></div>
     <div
         class="btn"
         [ngClass]="{ 'btn-success selected': exercise.difficulty === DifficultyLevel.EASY, 'btn-default': exercise.difficulty !== DifficultyLevel.EASY }"
         (click)="setDifficulty(DifficultyLevel.EASY)"
-    >
-        {{ 'artemisApp.exercise.easy' | artemisTranslate }}
-    </div>
+        jhiTranslate="artemisApp.exercise.easy"
+    ></div>
     <div
         class="btn btn-default"
         [ngClass]="{ 'btn-warning selected': exercise.difficulty === DifficultyLevel.MEDIUM, 'btn-default': exercise.difficulty !== DifficultyLevel.MEDIUM }"
         (click)="setDifficulty(DifficultyLevel.MEDIUM)"
-    >
-        {{ 'artemisApp.exercise.medium' | artemisTranslate }}
-    </div>
+        jhiTranslate="artemisApp.exercise.medium"
+    ></div>
     <div
         class="btn btn-default"
         [ngClass]="{ 'btn-danger selected': exercise.difficulty === DifficultyLevel.HARD, 'btn-default': exercise.difficulty !== DifficultyLevel.HARD }"
         (click)="setDifficulty(DifficultyLevel.HARD)"
-    >
-        {{ 'artemisApp.exercise.hard' | artemisTranslate }}
-    </div>
+        jhiTranslate="artemisApp.exercise.hard"
+    ></div>
 </div>
diff --git a/src/main/webapp/app/exercises/shared/example-solution/example-solution.component.html b/src/main/webapp/app/exercises/shared/example-solution/example-solution.component.html
index c9ee6d3173e8..d6e797f436e0 100644
--- a/src/main/webapp/app/exercises/shared/example-solution/example-solution.component.html
+++ b/src/main/webapp/app/exercises/shared/example-solution/example-solution.component.html
@@ -10,7 +10,7 @@
                 <!-- PROBLEM STATEMENT START -->
                 <div class="row mt-2 mb-2 align-items-baseline" id="problem-statement">
                     <div class="col-12 col-md-12 markdown-preview problem-statement">
-                        <h3>{{ 'artemisApp.exercise.problemStatement' | artemisTranslate }}</h3>
+                        <h3 jhiTranslate="artemisApp.exercise.problemStatement"></h3>
                         <p
                             [innerHTML]="
                                 exercise?.problemStatement ? (exercise.problemStatement | htmlForMarkdown) : ('artemisApp.exercise.emptyProblemStatement' | artemisTranslate)
@@ -20,7 +20,7 @@ <h3>{{ 'artemisApp.exercise.problemStatement' | artemisTranslate }}</h3>
                 </div>
                 <!-- PROBLEM STATEMENT END -->
                 <div class="row mb-2 mt-2 align-items-baseline">
-                    <h3 class="pe-2">{{ 'artemisApp.exercise.exampleSolution' | artemisTranslate }}</h3>
+                    <h3 class="pe-2" jhiTranslate="artemisApp.exercise.exampleSolution"></h3>
                 </div>
                 <dl class="row-md jh-entity-details markdown-preview">
                     @if (exampleSolutionInfo?.exampleSolutionUML || exampleSolutionInfo?.exampleSolution) {
diff --git a/src/main/webapp/app/exercises/shared/example-submission/example-submission-import/example-submission-import.component.html b/src/main/webapp/app/exercises/shared/example-submission/example-submission-import/example-submission-import.component.html
index 85020bd48121..a4d0dd872fbb 100644
--- a/src/main/webapp/app/exercises/shared/example-submission/example-submission-import/example-submission-import.component.html
+++ b/src/main/webapp/app/exercises/shared/example-submission/example-submission-import/example-submission-import.component.html
@@ -78,10 +78,10 @@ <h4 class="modal-title" jhiTranslate="artemisApp.exampleSubmission.useAsExampleS
             </div>
         } @else {
             @if (searchTermEntered) {
-                <p>{{ 'artemisApp.assessment.dashboard.empty' | artemisTranslate }}</p>
+                <p jhiTranslate="artemisApp.assessment.dashboard.empty"></p>
             }
             @if (!searchTermEntered) {
-                <p>{{ 'artemisApp.assessment.dashboard.emptySearch' | artemisTranslate }}</p>
+                <p jhiTranslate="artemisApp.assessment.dashboard.emptySearch"></p>
             }
         }
         <div class="d-flex justify-content-between p-2">
diff --git a/src/main/webapp/app/exercises/shared/example-submission/example-submissions.component.html b/src/main/webapp/app/exercises/shared/example-submission/example-submissions.component.html
index 7b6504b0c2b6..166365065b10 100644
--- a/src/main/webapp/app/exercises/shared/example-submission/example-submissions.component.html
+++ b/src/main/webapp/app/exercises/shared/example-submission/example-submissions.component.html
@@ -3,7 +3,7 @@
         <div class="row">
             <div class="col-12 col-sm">
                 <h4>
-                    <span>{{ 'artemisApp.exampleSubmission.exampleSubmissions' | artemisTranslate }}</span>
+                    <span jhiTranslate="artemisApp.exampleSubmission.exampleSubmissions"></span>
                 </h4>
             </div>
             <div class="col-12 col-sm-auto d-flex flex-btn-group-container me-1 mb-1">
diff --git a/src/main/webapp/app/exercises/shared/exercise-detail-common-actions/non-programming-exercise-detail-common-actions.component.html b/src/main/webapp/app/exercises/shared/exercise-detail-common-actions/non-programming-exercise-detail-common-actions.component.html
index 4f0561af8f46..98899a615586 100644
--- a/src/main/webapp/app/exercises/shared/exercise-detail-common-actions/non-programming-exercise-detail-common-actions.component.html
+++ b/src/main/webapp/app/exercises/shared/exercise-detail-common-actions/non-programming-exercise-detail-common-actions.component.html
@@ -25,7 +25,7 @@
         @if (exercise.assessmentType === AssessmentType.SEMI_AUTOMATIC || exercise.assessmentType === AssessmentType.MANUAL || exercise.allowComplaintsForAutomaticAssessments) {
             <a [routerLink]="shortBaseResource + 'assessment-dashboard/' + exercise.id" class="btn btn-info btn-sm">
                 <fa-icon [icon]="faUserCheck" />
-                <span class="d-none d-md-inline">{{ 'artemisApp.exercise.exerciseAssessmentDashboard' | artemisTranslate }}</span>
+                <span class="d-none d-md-inline" jhiTranslate="artemisApp.exercise.exerciseAssessmentDashboard"></span>
             </a>
         }
         @if (course && exercise.isAtLeastTutor) {
diff --git a/src/main/webapp/app/exercises/shared/exercise-headers/header-exercise-page-with-details.component.html b/src/main/webapp/app/exercises/shared/exercise-headers/header-exercise-page-with-details.component.html
index fc6a6fe86647..2ed3b9d18422 100644
--- a/src/main/webapp/app/exercises/shared/exercise-headers/header-exercise-page-with-details.component.html
+++ b/src/main/webapp/app/exercises/shared/exercise-headers/header-exercise-page-with-details.component.html
@@ -86,14 +86,10 @@
                         @if (course?.presentationScore) {
                             {{ 'artemisApp.courseOverview.exerciseDetails.presented' | artemisTranslate }}
                             @if ((studentParticipation?.presentationScore ?? 0) > 0) {
-                                <span class="badge bg-success">
-                                    {{ 'global.generic.yes' | artemisTranslate }}
-                                </span>
+                                <span class="badge bg-success" jhiTranslate="global.generic.yes"></span>
                             }
                             @if ((studentParticipation?.presentationScore ?? 0) <= 0) {
-                                <span class="badge bg-secondary">
-                                    {{ 'global.generic.no' | artemisTranslate }}
-                                </span>
+                                <span class="badge bg-secondary" jhiTranslate="global.generic.no"></span>
                             }
                         } @else {
                             {{ 'artemisApp.courseOverview.exerciseDetails.presentation' | artemisTranslate }}
@@ -103,9 +99,7 @@
                                 </span>
                             }
                             @if (!studentParticipation?.presentationScore) {
-                                <span class="badge bg-secondary">
-                                    {{ 'global.generic.unset' | artemisTranslate }}
-                                </span>
+                                <span class="badge bg-secondary" jhiTranslate="global.generic.unset"></span>
                             }
                         }
                     </div>
@@ -144,14 +138,10 @@
                         @if (course?.presentationScore) {
                             {{ 'artemisApp.courseOverview.exerciseDetails.presented' | artemisTranslate }}
                             @if ((studentParticipation?.presentationScore ?? 0) > 0) {
-                                <span class="badge bg-success">
-                                    {{ 'global.generic.yes' | artemisTranslate }}
-                                </span>
+                                <span class="badge bg-success" jhiTranslate="global.generic.yes"></span>
                             }
                             @if ((studentParticipation?.presentationScore ?? 0) <= 0) {
-                                <span class="badge bg-secondary">
-                                    {{ 'global.generic.no' | artemisTranslate }}
-                                </span>
+                                <span class="badge bg-secondary" jhiTranslate="global.generic.no"></span>
                             }
                         }
                         @if (!course?.presentationScore) {
@@ -162,9 +152,7 @@
                                 </span>
                             }
                             @if (!studentParticipation?.presentationScore) {
-                                <span class="badge bg-secondary">
-                                    {{ 'global.generic.unset' | artemisTranslate }}
-                                </span>
+                                <span class="badge bg-secondary" jhiTranslate="global.generic.unset"></span>
                             }
                         }
                     </div>
@@ -176,9 +164,8 @@
                     <span
                         class="badge bg-success"
                         [ngbTooltip]="'artemisApp.courseOverview.exerciseDetails.complaintPossibleTooltip' | artemisTranslate: { days: course?.maxComplaintTimeDays }"
-                    >
-                        {{ 'global.generic.yes' | artemisTranslate }}
-                    </span>
+                        jhiTranslate="global.generic.yes"
+                    ></span>
                 </div>
             }
         </div>
diff --git a/src/main/webapp/app/exercises/shared/exercise-headers/header-participation-page.component.html b/src/main/webapp/app/exercises/shared/exercise-headers/header-participation-page.component.html
index 4dabbf9dea73..af31df28d183 100644
--- a/src/main/webapp/app/exercises/shared/exercise-headers/header-participation-page.component.html
+++ b/src/main/webapp/app/exercises/shared/exercise-headers/header-participation-page.component.html
@@ -4,7 +4,7 @@
             <div class="col-12 col-sm-12 col-lg-5 d-flex flex-column justify-content-center">
                 <h4 class="fw-medium"><ng-content select="[pagetitle]" /></h4>
                 <div class="d-flex align-items-center">
-                    <h6 class="me-2 mb-0 fw-medium">{{ 'artemisApp.courseOverview.exerciseDetails.dueDate' | artemisTranslate }}</h6>
+                    <h6 class="me-2 mb-0 fw-medium" jhiTranslate="artemisApp.courseOverview.exerciseDetails.dueDate"></h6>
                     <span>{{ (dueDate | artemisDate) || 'N/A' }}</span>
                     @if (dueDate) {
                         <span [ngClass]="exerciseStatusBadge" class="badge ms-2">{{ dueDate | artemisTimeAgo }}</span>
@@ -12,7 +12,7 @@ <h6 class="me-2 mb-0 fw-medium">{{ 'artemisApp.courseOverview.exerciseDetails.du
                 </div>
                 @if (exercise.categories) {
                     <div class="d-sm-flex">
-                        <h6 class="me-1 fw-medium">{{ 'artemisApp.courseOverview.exerciseDetails.categories' | artemisTranslate }}</h6>
+                        <h6 class="me-1 fw-medium" jhiTranslate="artemisApp.courseOverview.exerciseDetails.categories"></h6>
                         @for (category of exerciseCategories; track category) {
                             <h6 class="fw-medium">
                                 <span class="badge text-white me-1" [ngStyle]="{ backgroundColor: category.color }">{{ category.category }}</span>
@@ -26,7 +26,7 @@ <h6 class="fw-medium">
                     @if (exercise.maxPoints) {
                         <tr>
                             <td>
-                                <h6 class="fw-medium">{{ 'artemisApp.courseOverview.exerciseDetails.points' | artemisTranslate }}</h6>
+                                <h6 class="fw-medium" jhiTranslate="artemisApp.courseOverview.exerciseDetails.points"></h6>
                             </td>
                             <td>
                                 <span>
diff --git a/src/main/webapp/app/exercises/shared/exercise-hint/participate/exercise-hint-expandable.component.html b/src/main/webapp/app/exercises/shared/exercise-hint/participate/exercise-hint-expandable.component.html
index 8f5f0b1cce9f..7dc825d8aa95 100644
--- a/src/main/webapp/app/exercises/shared/exercise-hint/participate/exercise-hint-expandable.component.html
+++ b/src/main/webapp/app/exercises/shared/exercise-hint/participate/exercise-hint-expandable.component.html
@@ -21,12 +21,12 @@
         </mat-panel-description>
     </mat-expansion-panel-header>
     <mat-action-row>
-        <button type="button" [ngClass]="'btn btn-secondary'" (click)="collapseContent()">{{ 'artemisApp.exerciseHint.studentDialog.collapse' | artemisTranslate }}</button>
+        <button type="button" [ngClass]="'btn btn-secondary'" (click)="collapseContent()" jhiTranslate="artemisApp.exerciseHint.studentDialog.collapse"></button>
     </mat-action-row>
     @if (isLoading) {
         <div class="d-flex justify-content-center">
             <div class="spinner-border" role="status">
-                <span class="sr-only">{{ 'loading' | artemisTranslate }}</span>
+                <span class="sr-only" jhiTranslate="loading"></span>
             </div>
         </div>
     } @else {
diff --git a/src/main/webapp/app/exercises/shared/exercise-hint/participate/exercise-hint-student-dialog.component.html b/src/main/webapp/app/exercises/shared/exercise-hint/participate/exercise-hint-student-dialog.component.html
index b7f412a0ef42..09c17845b507 100644
--- a/src/main/webapp/app/exercises/shared/exercise-hint/participate/exercise-hint-student-dialog.component.html
+++ b/src/main/webapp/app/exercises/shared/exercise-hint/participate/exercise-hint-student-dialog.component.html
@@ -6,10 +6,11 @@ <h4 class="modal-title" jhiTranslate="artemisApp.exerciseHint.studentDialog.titl
     @if (availableExerciseHints?.length) {
         <div class="mb-3">
             <h2 jhiTranslate="artemisApp.exerciseHint.studentDialog.availableHintsTitle"></h2>
-            <span class="mb-5">{{
-                'artemisApp.exerciseHint.studentDialog.availableHintTaskDescription'
-                    | artemisTranslate: { taskName: availableExerciseHints.first()!.programmingExerciseTask!.taskName }
-            }}</span>
+            <span
+                class="mb-5"
+                jhiTranslate="artemisApp.exerciseHint.studentDialog.availableHintTaskDescription"
+                [translateValues]="{ taskName: availableExerciseHints.first()!.programmingExerciseTask!.taskName }"
+            ></span>
             @for (hint of availableExerciseHints; track hint) {
                 <div class="mb-3">
                     <jhi-exercise-hint-expandable [exerciseHint]="hint" [hasUsed]="false" (onHintActivated)="this.onHintActivated.emit($event)" />
diff --git a/src/main/webapp/app/exercises/shared/exercise-info/exercise-info.component.html b/src/main/webapp/app/exercises/shared/exercise-info/exercise-info.component.html
index 6730415e6a25..e223cb6f2b06 100644
--- a/src/main/webapp/app/exercises/shared/exercise-info/exercise-info.component.html
+++ b/src/main/webapp/app/exercises/shared/exercise-info/exercise-info.component.html
@@ -1,5 +1,5 @@
 <div class="panel-wrapper col-12 col-xxl-8">
-    <div class="panel-header">{{ 'artemisApp.exercise.details' | artemisTranslate }}</div>
+    <div class="panel-header" jhiTranslate="artemisApp.exercise.details"></div>
     <div class="vertLine"></div>
     <div class="panel-body">
         @if (exercise.releaseDate) {
diff --git a/src/main/webapp/app/exercises/shared/exercise-scores/exercise-scores.component.html b/src/main/webapp/app/exercises/shared/exercise-scores/exercise-scores.component.html
index bd6a45ee94dc..999ab5fe4108 100644
--- a/src/main/webapp/app/exercises/shared/exercise-scores/exercise-scores.component.html
+++ b/src/main/webapp/app/exercises/shared/exercise-scores/exercise-scores.component.html
@@ -12,7 +12,7 @@ <h2>
             <h4 class="d-flex align-items-center">
                 <span class="me-2">
                     <strong class="text-primary"> {{ 'artemisApp.assessment.dashboard.activeFilter' | artemisTranslate }}: </strong>
-                    <span class="ms-1">{{ 'artemisApp.exercise.showingOnlyInRange' | artemisTranslate: { range: this.rangeFilter.toString() } }}</span>
+                    <span class="ms-1" jhiTranslate="artemisApp.exercise.showingOnlyInRange" [translateValues]="{ range: this.rangeFilter.toString() }"></span>
                 </span>
                 <button type="button" class="btn btn-primary" (click)="resetFilterOptions()" jhiTranslate="artemisApp.assessment.dashboard.resetFilter"></button>
             </h4>
@@ -46,17 +46,14 @@ <h4 class="d-flex align-items-center">
                     </ul>
                 </div>
                 @if (filteredParticipations.length && participationsPerFilter.get(resultCriteria.filterProp) !== filteredParticipations.length) {
-                    <span>
-                        {{
-                            'artemisApp.exercise.showingOfResults'
-                                | artemisTranslate
-                                    : {
-                                          filtered: participationsPerFilter.get(resultCriteria.filterProp),
-                                          total: filteredParticipations.length,
-                                          percent: ((participationsPerFilter.get(resultCriteria.filterProp) ?? 0) * 100) / filteredParticipations.length | number: '1.0-1',
-                                      }
-                        }}
-                    </span>
+                    <span
+                        jhiTranslate="artemisApp.exercise.showingOfResults"
+                        [translateValues]="{
+                            filtered: participationsPerFilter.get(resultCriteria.filterProp),
+                            total: filteredParticipations.length,
+                            percent: ((participationsPerFilter.get(resultCriteria.filterProp) ?? 0) * 100) / filteredParticipations.length | number: '1.0-1',
+                        }"
+                    ></span>
                 }
             </div>
             <div class="p-2">
@@ -158,7 +155,7 @@ <h5 jhiTranslate="artemisApp.exercise.export.options"></h5>
                     <ngx-datatable-column prop="" [sortable]="true" [minWidth]="100" [width]="180">
                         <ng-template ngx-datatable-header-template>
                             <span class="datatable-header-cell-wrapper" (click)="controls.onSort(exercise.teamMode ? 'team.name' : 'student.name')">
-                                <span class="datatable-header-cell-label bold sortable">{{ 'artemisApp.exercise.name' | artemisTranslate }}</span>
+                                <span class="datatable-header-cell-label bold sortable" jhiTranslate="artemisApp.exercise.name"></span>
                                 <fa-icon [icon]="controls.iconForSortPropField(exercise.teamMode ? 'team.name' : 'student.name')" />
                             </span>
                         </ng-template>
@@ -181,12 +178,12 @@ <h5 jhiTranslate="artemisApp.exercise.export.options"></h5>
                         <ng-template ngx-datatable-header-template>
                             @if (exercise.teamMode) {
                                 <span class="datatable-header-cell-wrapper" (click)="controls.onSort('team.shortName')">
-                                    <span class="datatable-header-cell-label bold sortable">{{ 'artemisApp.exercise.teamShortName' | artemisTranslate }}</span>
+                                    <span class="datatable-header-cell-label bold sortable" jhiTranslate="artemisApp.exercise.teamShortName"></span>
                                     <fa-icon [icon]="controls.iconForSortPropField('team.shortName')" />
                                 </span>
                             } @else {
                                 <span class="datatable-header-cell-wrapper" (click)="controls.onSort('student.login')">
-                                    <span class="datatable-header-cell-label bold sortable">{{ 'artemisApp.exercise.studentId' | artemisTranslate }}</span>
+                                    <span class="datatable-header-cell-label bold sortable" jhiTranslate="artemisApp.exercise.studentId"></span>
                                     <fa-icon [icon]="controls.iconForSortPropField('student.login')" />
                                 </span>
                             }
@@ -204,7 +201,7 @@ <h5 jhiTranslate="artemisApp.exercise.export.options"></h5>
                     <ngx-datatable-column prop="" [sortable]="true" [minWidth]="130" [width]="140">
                         <ng-template ngx-datatable-header-template>
                             <span class="datatable-header-cell-wrapper" (click)="controls.onSort('results?.last()?.completionDate')">
-                                <span class="datatable-header-cell-label bold sortable">{{ 'artemisApp.exercise.completionDate' | artemisTranslate }}</span>
+                                <span class="datatable-header-cell-label bold sortable" jhiTranslate="artemisApp.exercise.completionDate"></span>
                                 <fa-icon [icon]="controls.iconForSortPropField('results?.last()?.completionDate')" />
                             </span>
                         </ng-template>
@@ -215,7 +212,7 @@ <h5 jhiTranslate="artemisApp.exercise.export.options"></h5>
                     <ngx-datatable-column prop="" [sortable]="true" [minWidth]="250" [width]="260">
                         <ng-template ngx-datatable-header-template>
                             <span class="datatable-header-cell-wrapper" (click)="controls.onSort('results?.last()?.score')">
-                                <span class="datatable-header-cell-label bold">{{ 'artemisApp.exercise.lastResult' | artemisTranslate }}</span>
+                                <span class="datatable-header-cell-label bold" jhiTranslate="artemisApp.exercise.lastResult"></span>
                                 <fa-icon [icon]="controls.iconForSortPropField('results?.last()?.score')" />
                             </span>
                         </ng-template>
@@ -229,7 +226,7 @@ <h5 jhiTranslate="artemisApp.exercise.export.options"></h5>
                         <ngx-datatable-column prop="" [sortable]="true" [minWidth]="130" [width]="140">
                             <ng-template ngx-datatable-header-template>
                                 <span class="datatable-header-cell-wrapper" (click)="controls.onSort('results?.last().assessmentType')">
-                                    <span class="datatable-header-cell-label bold">{{ 'artemisApp.exercise.type' | artemisTranslate }}</span>
+                                    <span class="datatable-header-cell-label bold" jhiTranslate="artemisApp.exercise.type"></span>
                                     <fa-icon [icon]="controls.iconForSortPropField('results?.last().assessmentType')" />
                                 </span>
                             </ng-template>
@@ -277,7 +274,7 @@ <h5 jhiTranslate="artemisApp.exercise.export.options"></h5>
                     <ngx-datatable-column prop="" [sortable]="true" [minWidth]="100" [width]="110">
                         <ng-template ngx-datatable-header-template>
                             <span class="datatable-header-cell-wrapper d-inline-block w-100 text-center" (click)="controls.onSort('submissionCount')">
-                                <span class="datatable-header-cell-label bold">{{ 'artemisApp.exercise.submissionCount' | artemisTranslate }}</span>
+                                <span class="datatable-header-cell-label bold" jhiTranslate="artemisApp.exercise.submissionCount"></span>
                                 <fa-icon [icon]="controls.iconForSortPropField('submissionCount')" />
                             </span>
                         </ng-template>
@@ -296,7 +293,7 @@ <h5 jhiTranslate="artemisApp.exercise.export.options"></h5>
                     <ngx-datatable-column prop="" [sortable]="true" [minWidth]="80" [width]="90">
                         <ng-template ngx-datatable-header-template>
                             <span class="datatable-header-cell-wrapper" (click)="controls.onSort('results?.last()?.durationInMinutes')">
-                                <span class="datatable-header-cell-label bold">{{ 'artemisApp.exercise.duration' | artemisTranslate }}</span>
+                                <span class="datatable-header-cell-label bold" jhiTranslate="artemisApp.exercise.duration"></span>
                                 <fa-icon [icon]="controls.iconForSortPropField('results?.last()?.durationInMinutes')" />
                             </span>
                         </ng-template>
diff --git a/src/main/webapp/app/exercises/shared/exercise-update-warning/exercise-update-warning.component.html b/src/main/webapp/app/exercises/shared/exercise-update-warning/exercise-update-warning.component.html
index 3f1295a4ee83..026ba95b9279 100644
--- a/src/main/webapp/app/exercises/shared/exercise-update-warning/exercise-update-warning.component.html
+++ b/src/main/webapp/app/exercises/shared/exercise-update-warning/exercise-update-warning.component.html
@@ -18,9 +18,7 @@
         @if (instructionDeleted) {
             <div class="warning-info">
                 <input class="form-check-input" type="checkbox" name="deleteFeedback" id="deleteFeedback" [ngModel]="deleteFeedback" (ngModelChange)="toggleDeleteFeedback()" />
-                <label class="form-check-label text-danger" for="deleteFeedback">
-                    {{ 'artemisApp.exercise.update.warning.deleteFeedback' | artemisTranslate }}
-                </label>
+                <label class="form-check-label text-danger" for="deleteFeedback" jhiTranslate="artemisApp.exercise.update.warning.deleteFeedback"></label>
             </div>
         }
         @if (creditChanged || usageCountChanged || instructionDeleted) {
diff --git a/src/main/webapp/app/exercises/shared/feedback/feedback.component.html b/src/main/webapp/app/exercises/shared/feedback/feedback.component.html
index 02ec4680e56e..5d41e4bfe798 100644
--- a/src/main/webapp/app/exercises/shared/feedback/feedback.component.html
+++ b/src/main/webapp/app/exercises/shared/feedback/feedback.component.html
@@ -3,9 +3,7 @@
         @if (taskName) {
             <h3 class="modal-title" [innerHTML]="'artemisApp.result.detail.feedbackForTask' | artemisTranslate: { taskName }"></h3>
         } @else {
-            <h3 class="modal-title">
-                {{ 'artemisApp.result.detail.feedback' | artemisTranslate }}
-            </h3>
+            <h3 class="modal-title" jhiTranslate="artemisApp.result.detail.feedback"></h3>
         }
 
         @if (activeModal) {
@@ -40,26 +38,22 @@ <h6 [innerHTML]="'artemisApp.result.afterDueDateFeedbackHidden' | artemisTransla
                         <div class="d-flex justify-content-between align-items-start">
                             <h4>
                                 @if (result.assessmentType === AssessmentType.AUTOMATIC_ATHENA) {
-                                    <span>
-                                        {{ 'artemisApp.result.resultString.automaticAIFeedbackSuccessfulTooltip' | artemisTranslate }}
-                                    </span>
+                                    <span jhiTranslate="artemisApp.result.resultString.automaticAIFeedbackSuccessfulTooltip"></span>
                                 } @else {
                                     @if (!exercise?.maxPoints) {
-                                        <span>
-                                            {{ 'artemisApp.result.score' | artemisTranslate: { score: roundValueSpecifiedByCourseSettings(result.score, course) } }}
-                                        </span>
+                                        <span
+                                            jhiTranslate="artemisApp.result.score"
+                                            [translateValues]="{ score: roundValueSpecifiedByCourseSettings(result.score, course) }"
+                                        ></span>
                                     } @else {
                                         @if (exercise && exercise.maxPoints) {
-                                            <span>
-                                                {{
-                                                    'artemisApp.result.scoreWithPoints'
-                                                        | artemisTranslate
-                                                            : {
-                                                                  score: roundValueSpecifiedByCourseSettings(result.score ?? 0, course),
-                                                                  points: roundValueSpecifiedByCourseSettings(((result.score ?? 0) * exercise.maxPoints) / 100, course),
-                                                              }
-                                                }}
-                                            </span>
+                                            <span
+                                                jhiTranslate="artemisApp.result.scoreWithPoints"
+                                                [translateValues]="{
+                                                    score: roundValueSpecifiedByCourseSettings(result.score ?? 0, course),
+                                                    points: roundValueSpecifiedByCourseSettings(((result.score ?? 0) * exercise.maxPoints) / 100, course),
+                                                }"
+                                            ></span>
                                         }
                                     }
                                 }
diff --git a/src/main/webapp/app/exercises/shared/included-in-overall-score-picker/included-in-overall-score-picker.component.html b/src/main/webapp/app/exercises/shared/included-in-overall-score-picker/included-in-overall-score-picker.component.html
index ca7687b905ed..edaa0ae542cc 100644
--- a/src/main/webapp/app/exercises/shared/included-in-overall-score-picker/included-in-overall-score-picker.component.html
+++ b/src/main/webapp/app/exercises/shared/included-in-overall-score-picker/included-in-overall-score-picker.component.html
@@ -6,9 +6,8 @@
             'btn-default': includedInOverallScore !== IncludedInOverallScore.INCLUDED_COMPLETELY,
         }"
         (click)="change(IncludedInOverallScore.INCLUDED_COMPLETELY)"
-    >
-        {{ 'artemisApp.exercise.yes' | artemisTranslate }}
-    </div>
+        jhiTranslate="artemisApp.exercise.yes"
+    ></div>
     <div
         class="btn btn-default"
         [ngClass]="{
@@ -16,9 +15,8 @@
             'btn-default': includedInOverallScore !== IncludedInOverallScore.INCLUDED_AS_BONUS,
         }"
         (click)="change(IncludedInOverallScore.INCLUDED_AS_BONUS)"
-    >
-        {{ 'artemisApp.exercise.bonus' | artemisTranslate }}
-    </div>
+        jhiTranslate="artemisApp.exercise.bonus"
+    ></div>
     @if (allowNotIncluded) {
         <div
             class="btn btn-default"
@@ -27,8 +25,7 @@
                 'btn-default': includedInOverallScore !== IncludedInOverallScore.NOT_INCLUDED,
             }"
             (click)="change(IncludedInOverallScore.NOT_INCLUDED)"
-        >
-            {{ 'artemisApp.exercise.no' | artemisTranslate }}
-        </div>
+            jhiTranslate="artemisApp.exercise.no"
+        ></div>
     }
 </div>
diff --git a/src/main/webapp/app/exercises/shared/participation/participation.component.html b/src/main/webapp/app/exercises/shared/participation/participation.component.html
index c81cad22ee1f..c3eadf5cd3e1 100644
--- a/src/main/webapp/app/exercises/shared/participation/participation.component.html
+++ b/src/main/webapp/app/exercises/shared/participation/participation.component.html
@@ -8,11 +8,11 @@ <h2>
                 <div class="d-flex align-items-center mt-2">
                     <label class="radio-inline mb-0 d-flex align-items-center">
                         <input type="radio" [ngModel]="participationCriteria.filterProp" (click)="updateParticipationFilter(FilterProp.ALL)" [value]="FilterProp.ALL" />
-                        <span class="ms-1">{{ 'artemisApp.exercise.showAll' | artemisTranslate }}</span>
+                        <span class="ms-1" jhiTranslate="artemisApp.exercise.showAll"></span>
                     </label>
                     <label class="radio-inline ms-2 mb-0 d-flex align-items-center">
                         <input type="radio" [ngModel]="participationCriteria.filterProp" (click)="updateParticipationFilter(FilterProp.FAILED)" [value]="FilterProp.FAILED" />
-                        <span class="ms-1">{{ 'artemisApp.exercise.showFailed' | artemisTranslate }}</span>
+                        <span class="ms-1" jhiTranslate="artemisApp.exercise.showFailed"></span>
                     </label>
                     <label class="radio-inline ms-2 mb-0 d-flex align-items-center">
                         <input
@@ -21,7 +21,7 @@ <h2>
                             (click)="updateParticipationFilter(FilterProp.NO_SUBMISSIONS)"
                             [value]="FilterProp.NO_SUBMISSIONS"
                         />
-                        <span class="ms-1">{{ 'artemisApp.exercise.showNoSubmissions' | artemisTranslate }}</span>
+                        <span class="ms-1" jhiTranslate="artemisApp.exercise.showNoSubmissions"></span>
                     </label>
                     @if (exercise.type === ExerciseType.PROGRAMMING && afterDueDate) {
                         <label class="radio-inline ms-2 mb-0 d-flex align-items-center">
@@ -31,7 +31,7 @@ <h2>
                                 (click)="updateParticipationFilter(FilterProp.NO_PRACTICE)"
                                 [value]="FilterProp.NO_PRACTICE"
                             />
-                            <span class="ms-1">{{ 'artemisApp.exercise.showNoPracticeMode' | artemisTranslate }}</span>
+                            <span class="ms-1" jhiTranslate="artemisApp.exercise.showNoPracticeMode"></span>
                         </label>
                     }
                 </div>
diff --git a/src/main/webapp/app/exercises/shared/plagiarism/exercise-update-plagiarism/exercise-update-plagiarism.component.html b/src/main/webapp/app/exercises/shared/plagiarism/exercise-update-plagiarism/exercise-update-plagiarism.component.html
index c848e2b44c17..99c853afd07e 100644
--- a/src/main/webapp/app/exercises/shared/plagiarism/exercise-update-plagiarism/exercise-update-plagiarism.component.html
+++ b/src/main/webapp/app/exercises/shared/plagiarism/exercise-update-plagiarism/exercise-update-plagiarism.component.html
@@ -1,12 +1,11 @@
 <div class="form-group col-auto border border-warning p-3">
     <!-- Toggle Button -->
-    <button type="button" class="btn btn-secondary me-1" (click)="isCPCCollapsed = !isCPCCollapsed">
-        {{
-            isCPCCollapsed
-                ? ('artemisApp.plagiarism.showContinuousPlagiarismControl' | artemisTranslate)
-                : ('artemisApp.plagiarism.hideContinuousPlagiarismControl' | artemisTranslate)
-        }}
-    </button>
+    <button
+        type="button"
+        class="btn btn-secondary me-1"
+        (click)="isCPCCollapsed = !isCPCCollapsed"
+        jhiTranslate="{{ isCPCCollapsed ? 'artemisApp.plagiarism.showContinuousPlagiarismControl' : 'artemisApp.plagiarism.hideContinuousPlagiarismControl' }}"
+    ></button>
     <fa-icon [icon]="faQuestionCircle" placement="bottom auto" [ngbTooltip]="'artemisApp.plagiarism.continuousPlagiarismControlTooltip' | artemisTranslate" />
     <span class="badge rounded-pill text-bg-warning ms-1">BETA</span>
     <div class="row" [hidden]="isCPCCollapsed">
diff --git a/src/main/webapp/app/exercises/shared/plagiarism/plagiarism-header/plagiarism-header.component.html b/src/main/webapp/app/exercises/shared/plagiarism/plagiarism-header/plagiarism-header.component.html
index 290833345037..aff14deb4db6 100644
--- a/src/main/webapp/app/exercises/shared/plagiarism/plagiarism-header/plagiarism-header.component.html
+++ b/src/main/webapp/app/exercises/shared/plagiarism/plagiarism-header/plagiarism-header.component.html
@@ -12,18 +12,16 @@ <h5 class="fw-medium">
             class="btn btn-success btn-sm"
             (click)="confirmPlagiarism()"
             data-qa="confirm-plagiarism-button"
-        >
-            {{ 'artemisApp.plagiarism.confirm' | artemisTranslate }}
-        </button>
+            jhiTranslate="artemisApp.plagiarism.confirm"
+        ></button>
 
         <button
             [disabled]="comparison.status === plagiarismStatus.DENIED || isLoading || exercise.teamMode"
             class="btn btn-danger btn-sm"
             (click)="denyPlagiarism()"
             data-qa="deny-plagiarism-button"
-        >
-            {{ 'artemisApp.plagiarism.deny' | artemisTranslate }}
-        </button>
+            jhiTranslate="artemisApp.plagiarism.deny"
+        ></button>
 
         <div class="vertical-divider"></div>
 
diff --git a/src/main/webapp/app/exercises/shared/plagiarism/plagiarism-inspector/plagiarism-inspector.component.html b/src/main/webapp/app/exercises/shared/plagiarism/plagiarism-inspector/plagiarism-inspector.component.html
index 9dc516d097a4..1af8f423204d 100644
--- a/src/main/webapp/app/exercises/shared/plagiarism/plagiarism-inspector/plagiarism-inspector.component.html
+++ b/src/main/webapp/app/exercises/shared/plagiarism/plagiarism-inspector/plagiarism-inspector.component.html
@@ -4,17 +4,17 @@
             <div class="plagiarism-header-top-left">
                 <h4 class="plagiarism-page-title fw-medium" (click)="showOptions = !showOptions" [class.active]="showOptions">
                     <fa-icon class="plagiarism-options-toggle" [icon]="faChevronRight" />
-                    <span>{{ 'artemisApp.plagiarism.plagiarismDetection' | artemisTranslate }}</span>
+                    <span jhiTranslate="artemisApp.plagiarism.plagiarismDetection"></span>
                 </h4>
                 <div class="plagiarism-warning">
                     <fa-icon [icon]="faExclamationTriangle" id="plagiarismCaution" />
-                    <span>{{ 'artemisApp.plagiarism.caution' | artemisTranslate }}</span>
+                    <span jhiTranslate="artemisApp.plagiarism.caution"></span>
                 </div>
             </div>
             <div class="plagiarism-header-top-right">
                 @if (chartFilterApplied) {
                     <button class="check-plagiarism btn btn-info" (click)="resetFilter()">
-                        <span>{{ 'artemisApp.plagiarism.resetFilter' | artemisTranslate }}</span>
+                        <span jhiTranslate="artemisApp.plagiarism.resetFilter"></span>
                     </button>
                 }
                 <button
@@ -23,7 +23,7 @@ <h4 class="plagiarism-page-title fw-medium" (click)="showOptions = !showOptions"
                     (click)="checkPlagiarism()"
                     [overwriteDisabled]="detectionInProgress"
                 >
-                    <span>{{ plagiarismResult ? ('artemisApp.plagiarism.rerun' | artemisTranslate) : ('artemisApp.plagiarism.detect' | artemisTranslate) }}</span>
+                    <span jhiTranslate="{{ plagiarismResult ? 'artemisApp.plagiarism.rerun' : 'artemisApp.plagiarism.detect' }}"></span>
                 </button>
                 <ng-template #toggleDeleteModal let-modal>
                     <div class="modal-header">
@@ -42,9 +42,7 @@ <h4 class="modal-title">
                                 [checked]="deleteAllPlagiarismComparisons"
                                 (change)="toggleDeleteAllPlagiarismComparisons()"
                             />
-                            <label for="deleteAllPlagiarismComparisons" class="form-check-label">{{
-                                'artemisApp.plagiarism.cleanUp.confirmDialog.deleteAll' | artemisTranslate
-                            }}</label>
+                            <label for="deleteAllPlagiarismComparisons" class="form-check-label" jhiTranslate="artemisApp.plagiarism.cleanUp.confirmDialog.deleteAll"></label>
                         </div>
                         @if (deleteAllPlagiarismComparisons) {
                             <p jhiTranslate="artemisApp.plagiarism.cleanUp.confirmDialog.warning" class="text-warning"></p>
@@ -140,9 +138,7 @@ <h4 class="modal-title">
                 </div>
             }
             @if (!detectionInProgress) {
-                <span class="plagiarism-empty-label">
-                    {{ 'artemisApp.plagiarism.empty' | artemisTranslate }}
-                </span>
+                <span class="plagiarism-empty-label" jhiTranslate="artemisApp.plagiarism.empty"></span>
             }
         </div>
     }
diff --git a/src/main/webapp/app/exercises/shared/plagiarism/plagiarism-run-details/plagiarism-run-details.component.html b/src/main/webapp/app/exercises/shared/plagiarism/plagiarism-run-details/plagiarism-run-details.component.html
index 1c6e8f5f8c26..57d24497648f 100644
--- a/src/main/webapp/app/exercises/shared/plagiarism/plagiarism-run-details/plagiarism-run-details.component.html
+++ b/src/main/webapp/app/exercises/shared/plagiarism/plagiarism-run-details/plagiarism-run-details.component.html
@@ -1,49 +1,37 @@
 <div class="plagiarism-run-details">
     <div class="plagiarism-run-details-stats">
         <div class="plagiarism-run-details-stats-item">
-            <div class="plagiarism-run-details-label">
-                {{ 'artemisApp.plagiarism.numberOfDetectedSubmissions' | artemisTranslate }}
-            </div>
+            <div class="plagiarism-run-details-label" jhiTranslate="artemisApp.plagiarism.numberOfDetectedSubmissions"></div>
             <div class="plagiarism-run-details-info">
                 {{ plagiarismResultStats?.numberOfDetectedSubmissions }}
             </div>
         </div>
         <div class="plagiarism-run-details-stats-item">
-            <div class="plagiarism-run-details-label">
-                {{ 'artemisApp.plagiarism.averageSimilarity' | artemisTranslate }}
-            </div>
+            <div class="plagiarism-run-details-label" jhiTranslate="artemisApp.plagiarism.averageSimilarity"></div>
             <div class="plagiarism-run-details-info">
                 {{ plagiarismResultStats?.averageSimilarity?.toFixed(2) + ' %' }}
             </div>
         </div>
         <div class="plagiarism-run-details-stats-item">
-            <div class="plagiarism-run-details-label">
-                {{ 'artemisApp.plagiarism.maximalSimilarity' | artemisTranslate }}
-            </div>
+            <div class="plagiarism-run-details-label" jhiTranslate="artemisApp.plagiarism.maximalSimilarity"></div>
             <div class="plagiarism-run-details-info">
                 {{ plagiarismResultStats?.maximalSimilarity?.toFixed(2) + ' %' }}
             </div>
         </div>
         <div class="plagiarism-run-details-stats-item">
-            <div class="plagiarism-run-details-label">
-                {{ 'artemisApp.plagiarism.duration' | artemisTranslate }}
-            </div>
+            <div class="plagiarism-run-details-label" jhiTranslate="artemisApp.plagiarism.duration"></div>
             <div class="plagiarism-run-details-info duration">
                 {{ plagiarismResult?.duration | date: 'HH:mm:ss' : 'GMT' }}
             </div>
         </div>
         <div class="plagiarism-run-details-stats-item">
-            <div class="plagiarism-run-details-label">
-                {{ 'artemisApp.plagiarism.startedAt' | artemisTranslate }}
-            </div>
+            <div class="plagiarism-run-details-label" jhiTranslate="artemisApp.plagiarism.startedAt"></div>
             <div class="plagiarism-run-details-info">
                 {{ plagiarismResult?.createdDate?.toLocaleString() | date: 'dd.MM.YY HH:mm' : 'GMT' }}
             </div>
         </div>
         <div class="plagiarism-run-details-stats-item">
-            <div class="plagiarism-run-details-label">
-                {{ 'artemisApp.plagiarism.startedBy' | artemisTranslate }}
-            </div>
+            <div class="plagiarism-run-details-label" jhiTranslate="artemisApp.plagiarism.startedBy"></div>
             <div class="plagiarism-run-details-info">
                 {{ plagiarismResultStats?.createdBy ?? 'unknown' }}
             </div>
@@ -69,15 +57,15 @@
                 (select)="onSelect($event)"
             >
                 <ng-template #tooltipTemplate let-model="model">
-                    <b>{{ 'artemisApp.plagiarism.numberIdentifiedPairs' | artemisTranslate: { amount: model.value } }} </b> <br />
-                    <span> {{ 'artemisApp.plagiarism.confirmed' | artemisTranslate: { amount: getBucketDTO(model.label).confirmed } }}</span> <br />
-                    <span> {{ 'artemisApp.plagiarism.denied' | artemisTranslate: { amount: getBucketDTO(model.label).denied } }}</span> <br />
-                    <span> {{ 'artemisApp.plagiarism.open' | artemisTranslate: { amount: getBucketDTO(model.label).open } }}</span> <br />
-                    <span>{{ 'artemisApp.plagiarism.withSimilarity' | artemisTranslate: { range: model.name } }}</span> <br />
-                    <b>{{
-                        'artemisApp.plagiarism.portionOfAllCases'
-                            | artemisTranslate: { percentage: totalDetectedPlagiarisms > 0 ? round((model.value * 100) / totalDetectedPlagiarisms, 2) : 0 }
-                    }}</b>
+                    <b jhiTranslate="artemisApp.plagiarism.numberIdentifiedPairs" [translateValues]="{ amount: model.value }"></b> <br />
+                    <span jhiTranslate="artemisApp.plagiarism.confirmed" [translateValues]="{ amount: getBucketDTO(model.label).confirmed }"></span> <br />
+                    <span jhiTranslate="artemisApp.plagiarism.denied" [translateValues]="{ amount: getBucketDTO(model.label).denied }"></span> <br />
+                    <span jhiTranslate="artemisApp.plagiarism.open" [translateValues]="{ amount: getBucketDTO(model.label).open }"></span> <br />
+                    <span jhiTranslate="artemisApp.plagiarism.withSimilarity" [translateValues]="{ range: model.name }"></span> <br />
+                    <b
+                        jhiTranslate="artemisApp.plagiarism.portionOfAllCases"
+                        [translateValues]="{ percentage: totalDetectedPlagiarisms > 0 ? round((model.value * 100) / totalDetectedPlagiarisms, 2) : 0 }"
+                    ></b>
                 </ng-template>
             </ngx-charts-bar-vertical>
         </div>
diff --git a/src/main/webapp/app/exercises/shared/plagiarism/plagiarism-sidebar/plagiarism-sidebar.component.html b/src/main/webapp/app/exercises/shared/plagiarism/plagiarism-sidebar/plagiarism-sidebar.component.html
index ef1a22f6f05b..4d923eb90132 100644
--- a/src/main/webapp/app/exercises/shared/plagiarism/plagiarism-sidebar/plagiarism-sidebar.component.html
+++ b/src/main/webapp/app/exercises/shared/plagiarism/plagiarism-sidebar/plagiarism-sidebar.component.html
@@ -6,14 +6,14 @@
     @if (casesFiltered) {
         <div class="filter-disclaimer">
             <fa-icon class="text-warning disclaimer-icon" [icon]="faExclamationTriangle" />
-            <span>{{ 'artemisApp.plagiarism.casesFiltered' | artemisTranslate }}</span>
+            <span jhiTranslate="artemisApp.plagiarism.casesFiltered"></span>
         </div>
     }
     <!--  Temporary solution until #6593 is fixed  -->
     @if (comparisons?.length === 100) {
         <div class="filter-disclaimer">
             <fa-icon class="text-warning disclaimer-icon" [icon]="faExclamationTriangle" />
-            <span>{{ 'artemisApp.plagiarism.casesTrimmed' | artemisTranslate }}</span>
+            <span jhiTranslate="artemisApp.plagiarism.casesTrimmed"></span>
         </div>
     }
     @if (comparisons && comparisons.length) {
@@ -42,9 +42,7 @@
         </ul>
     }
     @if (!comparisons || !comparisons.length) {
-        <div class="plagiarism-empty">
-            {{ 'artemisApp.plagiarism.notFound' | artemisTranslate }}
-        </div>
+        <div class="plagiarism-empty" jhiTranslate="artemisApp.plagiarism.notFound"></div>
     }
     <div class="plagiarism-paging">
         <div class="plagiarism-paging-left" [class.disabled]="currentPage === 0" (click)="handlePageLeft()">
diff --git a/src/main/webapp/app/exercises/shared/plagiarism/plagiarism-split-view/split-pane-header/split-pane-header.component.html b/src/main/webapp/app/exercises/shared/plagiarism/plagiarism-split-view/split-pane-header/split-pane-header.component.html
index 5b2de1e9f269..865d3dfe654c 100644
--- a/src/main/webapp/app/exercises/shared/plagiarism/plagiarism-split-view/split-pane-header/split-pane-header.component.html
+++ b/src/main/webapp/app/exercises/shared/plagiarism/plagiarism-split-view/split-pane-header/split-pane-header.component.html
@@ -16,7 +16,7 @@
                 </li>
             }
             @if (!hasFiles()) {
-                <li>{{ 'artemisApp.plagiarism.noFilesFound' | artemisTranslate }}</li>
+                <li jhiTranslate="artemisApp.plagiarism.noFilesFound"></li>
             }
         </ul>
     }
diff --git a/src/main/webapp/app/exercises/shared/plagiarism/plagiarism-split-view/text-submission-viewer/text-submission-viewer.component.html b/src/main/webapp/app/exercises/shared/plagiarism/plagiarism-split-view/text-submission-viewer/text-submission-viewer.component.html
index 4690d672a4e1..96315f6b7d57 100644
--- a/src/main/webapp/app/exercises/shared/plagiarism/plagiarism-split-view/text-submission-viewer/text-submission-viewer.component.html
+++ b/src/main/webapp/app/exercises/shared/plagiarism/plagiarism-split-view/text-submission-viewer/text-submission-viewer.component.html
@@ -8,9 +8,12 @@
     </div>
 }
 @if (!loading && !binaryFile!! && !cannotLoadFiles) {
-    <div class="text-submission-viewer" [innerHTML]="fileContent || ' '" [ngClass]="{ 'no-file': !fileContent, 'is-code': isProgrammingExercise }">
-        {{ 'artemisApp.plagiarism.noFileSelected' | artemisTranslate }}
-    </div>
+    <div
+        class="text-submission-viewer"
+        [innerHTML]="fileContent || ' '"
+        [ngClass]="{ 'no-file': !fileContent, 'is-code': isProgrammingExercise }"
+        jhiTranslate="artemisApp.plagiarism.noFileSelected"
+    ></div>
 }
 @if (loading && !cannotLoadFiles) {
     <div class="plagiarism-submission-loader">
@@ -21,7 +24,7 @@
 }
 @if (binaryFile && !cannotLoadFiles) {
     <div class="binaryFileDialogue">
-        <span class="me-1">{{ 'artemisApp.plagiarism.binaryFileNotRendered' | artemisTranslate }}</span>
-        <a class="text-primary" (click)="downloadCurrentFile()">{{ 'entity.action.download' | artemisTranslate }}</a>
+        <span class="me-1" jhiTranslate="artemisApp.plagiarism.binaryFileNotRendered"></span>
+        <a class="text-primary" (click)="downloadCurrentFile()" jhiTranslate="entity.action.download"></a>
     </div>
 }
diff --git a/src/main/webapp/app/exercises/shared/rating/rating-list/rating-list.component.html b/src/main/webapp/app/exercises/shared/rating/rating-list/rating-list.component.html
index 1223db12741c..ad09e7a8e29a 100644
--- a/src/main/webapp/app/exercises/shared/rating/rating-list/rating-list.component.html
+++ b/src/main/webapp/app/exercises/shared/rating/rating-list/rating-list.component.html
@@ -2,7 +2,7 @@
     <div class="row justify-content-between">
         <div class="col-md-8">
             <h2>
-                <span>{{ 'artemisApp.ratingList.title' | artemisTranslate }}</span>
+                <span jhiTranslate="artemisApp.ratingList.title"></span>
             </h2>
         </div>
     </div>
@@ -10,7 +10,7 @@ <h2>
 <div class="col-12 mt-4">
     <div class="row table-responsive">
         <div [hidden]="ratings.length !== 0">
-            <span>{{ 'artemisApp.ratingList.noRatingToShow' | artemisTranslate }}</span>
+            <span jhiTranslate="artemisApp.ratingList.noRatingToShow"></span>
         </div>
         <table class="table" [hidden]="ratings.length === 0">
             <thead>
@@ -20,30 +20,30 @@ <h2>
                         <fa-icon [icon]="faSort" />
                     </th>
                     <th jhiSortBy="result.participation.exercise.title">
-                        <a class="th-link">{{ 'artemisApp.ratingList.exercise' | artemisTranslate }}</a>
+                        <a class="th-link" jhiTranslate="artemisApp.ratingList.exercise"></a>
                         <fa-icon [icon]="faSort" />
                     </th>
                     <th jhiSortBy="result.participation.exercise.type">
-                        <a class="th-link">{{ 'artemisApp.ratingList.exerciseType' | artemisTranslate }}</a>
+                        <a class="th-link" jhiTranslate="artemisApp.ratingList.exerciseType"></a>
                         <fa-icon [icon]="faSort" />
                     </th>
                     <th jhiSortBy="result.assessor.login">
-                        <a class="th-link">{{ 'artemisApp.complaint.listOfComplaints.assessorLogin' | artemisTranslate }}</a>
+                        <a class="th-link" jhiTranslate="artemisApp.complaint.listOfComplaints.assessorLogin"></a>
                         <fa-icon [icon]="faSort" />
                     </th>
                     <th jhiSortBy="result.assessor.name">
-                        <a class="th-link">{{ 'artemisApp.complaint.listOfComplaints.assessorName' | artemisTranslate }}</a>
+                        <a class="th-link" jhiTranslate="artemisApp.complaint.listOfComplaints.assessorName"></a>
                         <fa-icon [icon]="faSort" />
                     </th>
                     <th jhiSortBy="rating.result.assessmentType">
-                        <a class="th-link">{{ 'artemisApp.ratingList.assessmentType' | artemisTranslate }}</a>
+                        <a class="th-link" jhiTranslate="artemisApp.ratingList.assessmentType"></a>
                         <fa-icon [icon]="faSort" />
                     </th>
                     <th jhiSortBy="rating">
-                        <a class="th-link">{{ 'artemisApp.ratingList.rating' | artemisTranslate }}</a>
+                        <a class="th-link" jhiTranslate="artemisApp.ratingList.rating"></a>
                         <fa-icon [icon]="faSort" />
                     </th>
-                    <th class="text-center">{{ 'artemisApp.ratingList.actions' | artemisTranslate }}</th>
+                    <th class="text-center" jhiTranslate="artemisApp.ratingList.actions"></th>
                 </tr>
             </thead>
             <tbody>
@@ -73,7 +73,7 @@ <h2>
                         <td class="text-center">
                             <button class="btn btn-primary btn-sm" (click)="openResult(rating)">
                                 <fa-icon [icon]="faFolderOpen" [fixedWidth]="true" />
-                                <span>{{ 'artemisApp.ratingList.openSubmission' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.ratingList.openSubmission"></span>
                             </button>
                         </td>
                     </tr>
diff --git a/src/main/webapp/app/exercises/shared/result/result.component.html b/src/main/webapp/app/exercises/shared/result/result.component.html
index f335b5b72c0e..acdaa2cb76fe 100644
--- a/src/main/webapp/app/exercises/shared/result/result.component.html
+++ b/src/main/webapp/app/exercises/shared/result/result.component.html
@@ -80,45 +80,48 @@
             <span [class]="textColorClass" id="test-late">
                 <fa-icon [icon]="resultIconClass" size="lg" />
                 <span class="score"> {{ resultString }}, </span>
-                <span class="text-body-secondary">{{ 'artemisApp.courseOverview.exerciseList.exerciseLateFeedback' | artemisTranslate }}</span>
+                <span class="text-body-secondary" jhiTranslate="artemisApp.courseOverview.exerciseList.exerciseLateFeedback"></span>
             </span>
         }
         @case (ResultTemplateStatus.SUBMITTED) {
-            <span id="test-submitted" class="text-body-secondary">{{ 'artemisApp.courseOverview.exerciseList.exerciseSubmitted' | artemisTranslate }}</span>
+            <span id="test-submitted" class="text-body-secondary" jhiTranslate="artemisApp.courseOverview.exerciseList.exerciseSubmitted"></span>
         }
         @case (ResultTemplateStatus.SUBMITTED_WAITING_FOR_GRADING) {
-            <span id="test-submitted-waiting-grading" class="text-body-secondary">{{
-                'artemisApp.courseOverview.exerciseList.exerciseSubmittedWaitingForGrading' | artemisTranslate
-            }}</span>
+            <span id="test-submitted-waiting-grading" class="text-body-secondary" jhiTranslate="artemisApp.courseOverview.exerciseList.exerciseSubmittedWaitingForGrading"></span>
         }
         @case (ResultTemplateStatus.LATE_NO_FEEDBACK) {
-            <span id="test-late-no-feedback" class="text-body-secondary">{{ 'artemisApp.courseOverview.exerciseList.exerciseLateSubmission' | artemisTranslate }}</span>
+            <span id="test-late-no-feedback" class="text-body-secondary" jhiTranslate="artemisApp.courseOverview.exerciseList.exerciseLateSubmission"></span>
         }
         @case (ResultTemplateStatus.MISSING) {
             <span class="text-danger">
                 <fa-icon [icon]="faExclamationCircle" size="lg" />&nbsp;
                 @switch (missingResultInfo) {
                     @case (MissingResultInfo.FAILED_PROGRAMMING_SUBMISSION_ONLINE_IDE) {
-                        <span [ngbTooltip]="'artemisApp.result.missing.programmingFailedSubmission.tooltipOnlineIde' | artemisTranslate">{{
-                            'artemisApp.result.missing.programmingFailedSubmission.message' | artemisTranslate
-                        }}</span>
+                        <span
+                            [ngbTooltip]="'artemisApp.result.missing.programmingFailedSubmission.tooltipOnlineIde' | artemisTranslate"
+                            jhiTranslate="artemisApp.result.missing.programmingFailedSubmission.message"
+                        ></span>
                     }
                     @case (MissingResultInfo.FAILED_PROGRAMMING_SUBMISSION_OFFLINE_IDE) {
-                        <span [ngbTooltip]="'artemisApp.result.missing.programmingFailedSubmission.tooltipOfflineIde' | artemisTranslate">{{
-                            'artemisApp.result.missing.programmingFailedSubmission.message' | artemisTranslate
-                        }}</span>
+                        <span
+                            [ngbTooltip]="'artemisApp.result.missing.programmingFailedSubmission.tooltipOfflineIde' | artemisTranslate"
+                            jhiTranslate="artemisApp.result.missing.programmingFailedSubmission.message"
+                        ></span>
                     }
                 }
                 @if (result && exercise?.type !== ExerciseType.QUIZ) {
-                    <span [ngClass]="{ 'clickable-result': !isInSidebarCard }" class="result" (click)="showDetails(result)">
-                        {{ 'artemisApp.result.missing.viewPrevious' | artemisTranslate }}
-                    </span>
+                    <span
+                        [ngClass]="{ 'clickable-result': !isInSidebarCard }"
+                        class="result"
+                        (click)="showDetails(result)"
+                        jhiTranslate="artemisApp.result.missing.viewPrevious"
+                    ></span>
                 }
             </span>
         }
         @default {
             <span class="text-body-secondary">
-                <span> {{ (showUngradedResults ? 'artemisApp.result.noResult' : 'artemisApp.result.noGradedResult') | artemisTranslate }}</span>
+                <span jhiTranslate="{{ showUngradedResults ? 'artemisApp.result.noResult' : 'artemisApp.result.noGradedResult' }}"></span>
             </span>
         }
     }
diff --git a/src/main/webapp/app/exercises/shared/structured-grading-criterion/grading-instructions-details/grading-instructions-details.component.html b/src/main/webapp/app/exercises/shared/structured-grading-criterion/grading-instructions-details/grading-instructions-details.component.html
index fccbe00c9353..a339415dfbd0 100644
--- a/src/main/webapp/app/exercises/shared/structured-grading-criterion/grading-instructions-details/grading-instructions-details.component.html
+++ b/src/main/webapp/app/exercises/shared/structured-grading-criterion/grading-instructions-details/grading-instructions-details.component.html
@@ -46,27 +46,27 @@
                                     <thead>
                                         <tr>
                                             <th width="10%">
-                                                <span>{{ 'artemisApp.exercise.credits' | artemisTranslate }}</span>
+                                                <span jhiTranslate="artemisApp.exercise.credits"></span>
                                                 <jhi-help-icon text="artemisApp.exercise.creditsHint" class="me-1" />
                                             </th>
                                             <th width="10%">
-                                                <span>{{ 'artemisApp.exercise.gradingScale' | artemisTranslate }}</span>
+                                                <span jhiTranslate="artemisApp.exercise.gradingScale"></span>
                                                 <jhi-help-icon text="artemisApp.exercise.gradingScaleHint" class="me-1" />
                                             </th>
                                             <th width="30%">
-                                                <span>{{ 'artemisApp.exercise.instructionDescription' | artemisTranslate }}</span>
+                                                <span jhiTranslate="artemisApp.exercise.instructionDescription"></span>
                                                 <jhi-help-icon text="artemisApp.exercise.descriptionHint" class="me-1" />
                                             </th>
                                             <th width="30%">
-                                                <span>{{ 'artemisApp.exercise.feedback' | artemisTranslate }}</span>
+                                                <span jhiTranslate="artemisApp.exercise.feedback"></span>
                                                 <jhi-help-icon text="artemisApp.exercise.feedbackHint" class="me-1" />
                                             </th>
                                             <th width="10%">
-                                                <span>{{ 'artemisApp.exercise.limit' | artemisTranslate }}</span>
+                                                <span jhiTranslate="artemisApp.exercise.limit"></span>
                                                 <jhi-help-icon text="artemisApp.exercise.usageCountHint" class="me-1" />
                                             </th>
                                             <th width="5%">
-                                                <span>{{ 'artemisApp.exercise.action' | artemisTranslate }}</span>
+                                                <span jhiTranslate="artemisApp.exercise.action"></span>
                                             </th>
                                         </tr>
                                     </thead>
diff --git a/src/main/webapp/app/exercises/shared/submission-policy/submission-policy-update.component.ts b/src/main/webapp/app/exercises/shared/submission-policy/submission-policy-update.component.ts
index 0271a489f45f..58220c431757 100644
--- a/src/main/webapp/app/exercises/shared/submission-policy/submission-policy-update.component.ts
+++ b/src/main/webapp/app/exercises/shared/submission-policy/submission-policy-update.component.ts
@@ -18,9 +18,9 @@ import { FormControl, FormGroup, Validators } from '@angular/forms';
                 id="field_submissionPolicy"
                 [disabled]="!editable"
             >
-                <option value="none">{{ 'artemisApp.programmingExercise.submissionPolicy.none.optionLabel' | artemisTranslate }}</option>
-                <option value="lock_repository">{{ 'artemisApp.programmingExercise.submissionPolicy.lockRepository.optionLabel' | artemisTranslate }}</option>
-                <option value="submission_penalty">{{ 'artemisApp.programmingExercise.submissionPolicy.submissionPenalty.optionLabel' | artemisTranslate }}</option>
+                <option value="none" jhiTranslate="artemisApp.programmingExercise.submissionPolicy.none.optionLabel"></option>
+                <option value="lock_repository" jhiTranslate="artemisApp.programmingExercise.submissionPolicy.lockRepository.optionLabel"></option>
+                <option value="submission_penalty" jhiTranslate="artemisApp.programmingExercise.submissionPolicy.submissionPenalty.optionLabel"></option>
             </select>
         </div>
         @if (!isNonePolicy) {
diff --git a/src/main/webapp/app/exercises/shared/team/team-participation-table/team-participation-table.component.html b/src/main/webapp/app/exercises/shared/team/team-participation-table/team-participation-table.component.html
index eaf550d3861b..370f1915587f 100644
--- a/src/main/webapp/app/exercises/shared/team/team-participation-table/team-participation-table.component.html
+++ b/src/main/webapp/app/exercises/shared/team/team-participation-table/team-participation-table.component.html
@@ -53,13 +53,9 @@
             <ngx-datatable-column [minWidth]="120" [width]="120" [maxWidth]="120" [frozenLeft]="true">
                 <ng-template ngx-datatable-cell-template let-value="row">
                     @if (exercise.id !== value.id) {
-                        <a (click)="onActivate()" [routerLink]="['/courses', course.id, 'exercises', value.id, 'teams', value.team.id]">
-                            {{ 'entity.action.view' | artemisTranslate }}
-                        </a>
+                        <a (click)="onActivate()" [routerLink]="['/courses', course.id, 'exercises', value.id, 'teams', value.team.id]" jhiTranslate="entity.action.view"></a>
                     } @else {
-                        <span class="current-team">
-                            {{ 'entity.action.view' | artemisTranslate }}
-                        </span>
+                        <span class="current-team" jhiTranslate="entity.action.view"></span>
                     }
                 </ng-template>
             </ngx-datatable-column>
@@ -67,9 +63,7 @@
                 <ngx-datatable-column prop="participation" [minWidth]="150" [width]="150" [maxWidth]="150">
                     <ng-template ngx-datatable-header-template>
                         <span class="datatable-header-cell-wrapper" (click)="controls.onSort('id')">
-                            <span class="datatable-header-cell-label bold sortable">
-                                {{ 'artemisApp.team.detail.participationsTable.columns.participationId.label' | artemisTranslate }}
-                            </span>
+                            <span class="datatable-header-cell-label bold sortable" jhiTranslate="artemisApp.team.detail.participationsTable.columns.participationId.label"></span>
                             <fa-icon [icon]="controls.iconForSortPropField('id')" />
                         </span>
                     </ng-template>
diff --git a/src/main/webapp/app/exercises/shared/team/teams-import-dialog/teams-import-dialog.component.html b/src/main/webapp/app/exercises/shared/team/teams-import-dialog/teams-import-dialog.component.html
index 129c574ad4ea..972d620dfc31 100644
--- a/src/main/webapp/app/exercises/shared/team/teams-import-dialog/teams-import-dialog.component.html
+++ b/src/main/webapp/app/exercises/shared/team/teams-import-dialog/teams-import-dialog.component.html
@@ -191,11 +191,13 @@ <h4 class="modal-title">
                         <div class="ms-2 radio-label-with-explanation">
                             <strong>
                                 {{ 'artemisApp.team.importStrategy.options.purgeExisting.label' | artemisTranslate }}
-                                <span class="badge bg-danger ms-1">{{ 'artemisApp.team.importStrategy.options.purgeExisting.badge' | artemisTranslate }}</span>
+                                <span class="badge bg-danger ms-1" jhiTranslate="artemisApp.team.importStrategy.options.purgeExisting.badge"></span>
                             </strong>
-                            <p [class.text-body-secondary]="importStrategy !== ImportStrategy.PURGE_EXISTING" class="explanation mb-2">
-                                {{ 'artemisApp.team.importStrategy.options.purgeExisting.explanation' | artemisTranslate }}
-                            </p>
+                            <p
+                                [class.text-body-secondary]="importStrategy !== ImportStrategy.PURGE_EXISTING"
+                                class="explanation mb-2"
+                                jhiTranslate="artemisApp.team.importStrategy.options.purgeExisting.explanation"
+                            ></p>
                         </div>
                     </label>
                     <label class="d-flex align-items-start">
@@ -210,11 +212,13 @@ <h4 class="modal-title">
                         <div class="ms-2 radio-label-with-explanation">
                             <strong>
                                 {{ 'artemisApp.team.importStrategy.options.createOnly.label' | artemisTranslate }}
-                                <span class="badge bg-success ms-1">{{ 'artemisApp.team.importStrategy.options.createOnly.badge' | artemisTranslate }}</span>
+                                <span class="badge bg-success ms-1" jhiTranslate="artemisApp.team.importStrategy.options.createOnly.badge"></span>
                             </strong>
-                            <p [class.text-body-secondary]="importStrategy !== ImportStrategy.CREATE_ONLY" class="explanation mb-0">
-                                {{ 'artemisApp.team.importStrategy.options.createOnly.explanation' | artemisTranslate }}
-                            </p>
+                            <p
+                                [class.text-body-secondary]="importStrategy !== ImportStrategy.CREATE_ONLY"
+                                class="explanation mb-0"
+                                jhiTranslate="artemisApp.team.importStrategy.options.createOnly.explanation"
+                            ></p>
                         </div>
                     </label>
                 </div>
@@ -226,28 +230,26 @@ <h4 class="modal-title">
             <div class="flex-shrink-0 me-2 d-flex">
                 @if (studentsAppearInMultipleTeams) {
                     <div>
-                        <strong>{{ 'artemisApp.team.importPreview.studentsInMultipleTeams' | artemisTranslate }}</strong>
+                        <strong jhiTranslate="artemisApp.team.importPreview.studentsInMultipleTeams"></strong>
                     </div>
                 } @else {
                     @if (numberOfTeamsToBeImported! === 0) {
                         <div>
                             @if (sourceTeams.length === 0) {
-                                <strong>{{ 'artemisApp.team.importPreview.noTeamsToImport' | artemisTranslate }}</strong>
+                                <strong jhiTranslate="artemisApp.team.importPreview.noTeamsToImport"></strong>
                             }
                             @if (sourceTeams.length > 0) {
-                                <strong>{{ 'artemisApp.team.importPreview.noConflictFreeTeamsToImport' | artemisTranslate }}</strong>
+                                <strong jhiTranslate="artemisApp.team.importPreview.noConflictFreeTeamsToImport"></strong>
                             }
                         </div>
                     }
                     @if (numberOfTeamsToBeImported! > 0) {
                         @if (numberOfTeamsToBeDeleted! > 0) {
-                            <div class="me-3">
-                                <strong>{{ 'artemisApp.team.importPreview.teamsToBeDeleted' | artemisTranslate }}</strong> {{ numberOfTeamsToBeDeleted! }}
-                            </div>
+                            <div class="me-3"><strong jhiTranslate="artemisApp.team.importPreview.teamsToBeDeleted"></strong> {{ numberOfTeamsToBeDeleted! }}</div>
                         }
                         @if (numberOfTeamsToBeImported! !== numberOfTeamsAfterImport!) {
                             <div class="me-3">
-                                <strong>{{ 'artemisApp.team.importPreview.teamsToBeImported' | artemisTranslate }}</strong> {{ numberOfTeamsToBeImported! }}
+                                <strong jhiTranslate="artemisApp.team.importPreview.teamsToBeImported"></strong> {{ numberOfTeamsToBeImported! }}
                                 @if (numberOfTeamsToBeImported! < sourceTeams.length) {
                                     <span jhiTranslate="artemisApp.team.importPreview.outOf" [translateValues]="{ number: sourceTeams.length }">
                                         (out of {{ sourceTeams.length }})
@@ -255,9 +257,7 @@ <h4 class="modal-title">
                                 }
                             </div>
                         }
-                        <div>
-                            <strong>{{ 'artemisApp.team.importPreview.totalTeamsAfterImport' | artemisTranslate }}</strong> {{ numberOfTeamsAfterImport! }}
-                        </div>
+                        <div><strong jhiTranslate="artemisApp.team.importPreview.totalTeamsAfterImport"></strong> {{ numberOfTeamsAfterImport! }}</div>
                     }
                 }
             </div>
diff --git a/src/main/webapp/app/exercises/shared/team/teams.component.html b/src/main/webapp/app/exercises/shared/team/teams.component.html
index 75e445c5c04b..bf2c964ac2ac 100644
--- a/src/main/webapp/app/exercises/shared/team/teams.component.html
+++ b/src/main/webapp/app/exercises/shared/team/teams.component.html
@@ -7,11 +7,11 @@ <h2 class="mb-1">
             <div class="d-flex align-items-center">
                 <label class="radio-inline mb-0 d-flex align-items-center">
                     <input type="radio" [ngModel]="teamCriteria.filterProp" (click)="updateTeamFilter(FilterProp.ALL)" [value]="FilterProp.ALL" />
-                    <span class="ms-1">{{ 'artemisApp.team.filters.all' | artemisTranslate }}</span>
+                    <span class="ms-1" jhiTranslate="artemisApp.team.filters.all"></span>
                 </label>
                 <label class="radio-inline ms-2 mb-0 d-flex align-items-center">
                     <input type="radio" [ngModel]="teamCriteria.filterProp" (click)="updateTeamFilter(FilterProp.OWN)" [value]="FilterProp.OWN" />
-                    <span class="ms-1">{{ 'artemisApp.team.filters.own' | artemisTranslate }}</span>
+                    <span class="ms-1" jhiTranslate="artemisApp.team.filters.own"></span>
                 </label>
             </div>
         </div>
diff --git a/src/main/webapp/app/exercises/shared/unreferenced-feedback/unreferenced-feedback.component.html b/src/main/webapp/app/exercises/shared/unreferenced-feedback/unreferenced-feedback.component.html
index 684ca88ff890..0f6975db8be5 100644
--- a/src/main/webapp/app/exercises/shared/unreferenced-feedback/unreferenced-feedback.component.html
+++ b/src/main/webapp/app/exercises/shared/unreferenced-feedback/unreferenced-feedback.component.html
@@ -1,14 +1,17 @@
 <div (drop)="createAssessmentOnDrop($event)" (dragover)="$event.preventDefault()">
     <div class="col-md-6">
-        <button class="add-unreferenced-feedback btn btn-success mt-4" (click)="addUnreferencedFeedback()" [disabled]="readOnly">
-            {{ 'artemisApp.fileUploadAssessment.addFeedback' | artemisTranslate }}
-        </button>
+        <button
+            class="add-unreferenced-feedback btn btn-success mt-4"
+            (click)="addUnreferencedFeedback()"
+            [disabled]="readOnly"
+            jhiTranslate="artemisApp.fileUploadAssessment.addFeedback"
+        ></button>
         <div class="row mt-4">
             <h4 class="col-12" jhiTranslate="artemisApp.assessment.detail.feedback"></h4>
             @if (unreferencedFeedback.length + feedbackSuggestions.length === 0) {
                 <div class="col-12 col-lg-8 col-xl-6">
                     <div class="alert alert-secondary text-center" role="alert">
-                        <p>{{ 'artemisApp.fileUploadAssessment.assessInstructionWithDropOption' | artemisTranslate }}</p>
+                        <p jhiTranslate="artemisApp.fileUploadAssessment.assessInstructionWithDropOption"></p>
                     </div>
                 </div>
             }
diff --git a/src/main/webapp/app/exercises/text/assess/text-assessment-area/text-assessment-area.component.html b/src/main/webapp/app/exercises/text/assess/text-assessment-area/text-assessment-area.component.html
index 48bcfce2053a..e170a8cd1f32 100644
--- a/src/main/webapp/app/exercises/text/assess/text-assessment-area/text-assessment-area.component.html
+++ b/src/main/webapp/app/exercises/text/assess/text-assessment-area/text-assessment-area.component.html
@@ -23,10 +23,11 @@
     />
 }
 <div>
-    <span class="badge bg-primary mb-2" id="text-assessment-word-count">
-        {{ 'artemisApp.textExercise.wordCount' | artemisTranslate: { count: wordCount } }}
-    </span>
-    <span class="badge bg-primary mb-2" id="text-assessment-character-count">
-        {{ 'artemisApp.textExercise.characterCount' | artemisTranslate: { count: characterCount } }}
-    </span>
+    <span class="badge bg-primary mb-2" id="text-assessment-word-count" jhiTranslate="artemisApp.textExercise.wordCount" [translateValues]="{ count: wordCount }"></span>
+    <span
+        class="badge bg-primary mb-2"
+        id="text-assessment-character-count"
+        jhiTranslate="artemisApp.textExercise.characterCount"
+        [translateValues]="{ count: characterCount }"
+    ></span>
 </div>
diff --git a/src/main/webapp/app/exercises/text/manage/example-text-submission/example-text-submission.component.html b/src/main/webapp/app/exercises/text/manage/example-text-submission/example-text-submission.component.html
index 878e6050d678..b723733cb65e 100644
--- a/src/main/webapp/app/exercises/text/manage/example-text-submission/example-text-submission.component.html
+++ b/src/main/webapp/app/exercises/text/manage/example-text-submission/example-text-submission.component.html
@@ -3,7 +3,7 @@
         <div class="col-6">
             <h2>
                 @if (isNewSubmission) {
-                    <span>{{ 'artemisApp.exampleSubmission.createNew' | artemisTranslate }} </span>
+                    <span jhiTranslate="artemisApp.exampleSubmission.createNew"></span>
                 }
                 {{ 'artemisApp.exampleSubmission.pageHeader' | artemisTranslate }}
                 {{ exercise?.title }}
@@ -11,7 +11,7 @@ <h2>
             @if (state.ui === UIStates.ASSESSMENT && toComplete && referencedBlocksInExampleSubmission && referencedBlocksInExampleSubmission.length > 0) {
                 <div class="col">
                     <div class="my-2 text-center hint">
-                        <span>{{ 'artemisApp.exampleSubmission.textHint' | artemisTranslate }}</span>
+                        <span jhiTranslate="artemisApp.exampleSubmission.textHint"></span>
                     </div>
                 </div>
             }
@@ -20,7 +20,7 @@ <h2>
             <div class="col-4 text-end d-flex align-items-center gap-2 justify-content-end">
                 <div>
                     <div class="text-start">
-                        <span>{{ 'artemisApp.exampleSubmission.assessmentTraining' | artemisTranslate }}</span>
+                        <span jhiTranslate="artemisApp.exampleSubmission.assessmentTraining"></span>
                         <jhi-help-icon [text]="'artemisApp.exampleSubmission.selectModelExplanation'" />
                     </div>
                     <div class="btn-group" role="group">
@@ -35,7 +35,7 @@ <h2>
                             [ngModel]="selectedMode"
                             (ngModelChange)="onModeChange($event)"
                         />
-                        <label class="btn btn-outline-secondary" for="read-and-confirm-button">{{ 'artemisApp.exampleSubmission.readAndConfirm' | artemisTranslate }}</label>
+                        <label class="btn btn-outline-secondary" for="read-and-confirm-button" jhiTranslate="artemisApp.exampleSubmission.readAndConfirm"></label>
                         <input
                             [disabled]="state.submissionEditButton === 3"
                             type="radio"
@@ -47,7 +47,7 @@ <h2>
                             [ngModel]="selectedMode"
                             (ngModelChange)="onModeChange($event)"
                         />
-                        <label class="btn btn-outline-secondary" for="only-not-imported">{{ 'artemisApp.exampleSubmission.assessCorrectly' | artemisTranslate }}</label>
+                        <label class="btn btn-outline-secondary" for="only-not-imported" jhiTranslate="artemisApp.exampleSubmission.assessCorrectly"></label>
                     </div>
                 </div>
                 @switch (state.submissionEditButton) {
@@ -102,7 +102,7 @@ <h2>
     </div>
 </div>
 @if (toComplete) {
-    <h5 class="fw-light mt-3">{{ 'artemisApp.exampleSubmission.home.assessmentTraining' | artemisTranslate }}</h5>
+    <h5 class="fw-light mt-3" jhiTranslate="artemisApp.exampleSubmission.home.assessmentTraining"></h5>
 }
 <jhi-resizeable-container class="col-12 mt-3">
     <!--region Left Panel-->
@@ -163,9 +163,13 @@ <h5 class="fw-light mt-3">{{ 'artemisApp.exampleSubmission.home.assessmentTraini
 }
 @if (toComplete) {
     <div class="col-12 text-end pt-2">
-        <button class="btn btn-primary col-3 guided-tour-check-assessment" (click)="checkAssessment()" [disabled]="!assessmentsAreValid" id="checkAssessment">
-            {{ 'artemisApp.exampleSubmission.submitAssessment' | artemisTranslate }}
-        </button>
+        <button
+            class="btn btn-primary col-3 guided-tour-check-assessment"
+            (click)="checkAssessment()"
+            [disabled]="!assessmentsAreValid"
+            id="checkAssessment"
+            jhiTranslate="artemisApp.exampleSubmission.submitAssessment"
+        ></button>
     </div>
 }
 @if (readOnly) {
diff --git a/src/main/webapp/app/exercises/text/manage/text-exercise/text-exercise-update.component.html b/src/main/webapp/app/exercises/text/manage/text-exercise/text-exercise-update.component.html
index 5df2017d2538..9200b885485c 100644
--- a/src/main/webapp/app/exercises/text/manage/text-exercise/text-exercise-update.component.html
+++ b/src/main/webapp/app/exercises/text/manage/text-exercise/text-exercise-update.component.html
@@ -76,7 +76,7 @@ <h3 jhiTranslate="artemisApp.exercise.sections.solution" id="artemisApp.exercise
                     (valueChange)="validateDate()"
                 />
                 @if (textExercise.exampleSolutionPublicationDateError) {
-                    <span class="invalid-feedback">{{ 'artemisApp.exercise.exampleSolutionPublicationDateError' | artemisTranslate }}</span>
+                    <span class="invalid-feedback" jhiTranslate="artemisApp.exercise.exampleSolutionPublicationDateError"></span>
                 }
             </div>
         }
@@ -110,7 +110,7 @@ <h3 jhiTranslate="artemisApp.exercise.sections.grading" id="artemisApp.exercise.
                         [(ngModel)]="textExercise.startDate"
                     />
                     @if (textExercise.startDateError) {
-                        <span class="invalid-feedback">{{ 'artemisApp.exercise.startDateError' | artemisTranslate }}</span>
+                        <span class="invalid-feedback" jhiTranslate="artemisApp.exercise.startDateError"></span>
                     }
                 </div>
             </div>
@@ -129,7 +129,7 @@ <h3 jhiTranslate="artemisApp.exercise.sections.grading" id="artemisApp.exercise.
                         [(ngModel)]="textExercise.dueDate"
                     />
                     @if (textExercise.dueDateError) {
-                        <span class="invalid-feedback">{{ 'artemisApp.exercise.dueDateError' | artemisTranslate }}</span>
+                        <span class="invalid-feedback" jhiTranslate="artemisApp.exercise.dueDateError"></span>
                     }
                 </div>
                 <div class="form-group flex-grow-1 ms-3">
@@ -146,13 +146,13 @@ <h3 jhiTranslate="artemisApp.exercise.sections.grading" id="artemisApp.exercise.
                         [(ngModel)]="textExercise.assessmentDueDate"
                     />
                     @if (textExercise.assessmentDueDateError) {
-                        <span class="invalid-feedback">{{ 'artemisApp.exercise.assessmentDueDateError' | artemisTranslate }}</span>
+                        <span class="invalid-feedback" jhiTranslate="artemisApp.exercise.assessmentDueDateError"></span>
                     }
                 </div>
             </div>
         }
         <div class="form-group">
-            <label class="form-control-label">{{ 'artemisApp.exercise.includedInOverallScore' + (textExercise.course ? 'Course' : 'Exam') + 'Label' | artemisTranslate }}</label>
+            <label class="form-control-label" jhiTranslate="artemisApp.exercise.includedInOverallScore{{ textExercise.course ? 'Course' : 'Exam' }}Label"></label>
             <div>
                 <jhi-included-in-overall-score-picker
                     [(includedInOverallScore)]="textExercise.includedInOverallScore"
@@ -177,9 +177,7 @@ <h3 jhiTranslate="artemisApp.exercise.sections.grading" id="artemisApp.exercise.
                         [(ngModel)]="textExercise.maxPoints"
                     />
                     @if (points?.invalid && (points?.dirty || points?.touched) && points?.errors) {
-                        <div class="alert alert-danger">
-                            {{ 'artemisApp.exercise.pointsError' | artemisTranslate }}
-                        </div>
+                        <div class="alert alert-danger" jhiTranslate="artemisApp.exercise.pointsError"></div>
                     }
                 </div>
             </div>
@@ -198,9 +196,11 @@ <h3 jhiTranslate="artemisApp.exercise.sections.grading" id="artemisApp.exercise.
                         #bonusPoints="ngModel"
                     />
                     @if (bonusPoints?.invalid && (bonusPoints?.dirty || bonusPoints?.touched) && bonusPoints?.errors) {
-                        <div class="alert alert-danger" [hidden]="textExercise.includedInOverallScore !== IncludedInOverallScore.INCLUDED_COMPLETELY">
-                            {{ 'artemisApp.exercise.bonusPointsError' | artemisTranslate }}
-                        </div>
+                        <div
+                            class="alert alert-danger"
+                            [hidden]="textExercise.includedInOverallScore !== IncludedInOverallScore.INCLUDED_COMPLETELY"
+                            jhiTranslate="artemisApp.exercise.bonusPointsError"
+                        ></div>
                     }
                 </div>
             </div>
diff --git a/src/main/webapp/app/feature-overview/feature-overview.component.html b/src/main/webapp/app/feature-overview/feature-overview.component.html
index 990dbda9f0cd..52eab3bfe420 100644
--- a/src/main/webapp/app/feature-overview/feature-overview.component.html
+++ b/src/main/webapp/app/feature-overview/feature-overview.component.html
@@ -1,6 +1,6 @@
 <div class="wrapper">
     <div class="header">
-        <h1>{{ 'featureOverview.title' | artemisTranslate }}</h1>
+        <h1 jhiTranslate="featureOverview.title"></h1>
     </div>
     <div class="content mx-auto">
         <div class="features-overview">
@@ -17,7 +17,7 @@ <h3 class="title">{{ feature.title | artemisTranslate }}</h3>
                 </div>
             }
         </div>
-        <h2>{{ 'featureOverview.featureDetails' | artemisTranslate }}</h2>
+        <h2 jhiTranslate="featureOverview.featureDetails"></h2>
         @for (feature of features; track feature) {
             <div id="feature{{ feature.id }}" class="feature-content">
                 <h3>{{ feature.title | artemisTranslate }}</h3>
diff --git a/src/main/webapp/app/grading-system/bonus/bonus.component.html b/src/main/webapp/app/grading-system/bonus/bonus.component.html
index 938d819d26e3..2676e6a068e1 100644
--- a/src/main/webapp/app/grading-system/bonus/bonus.component.html
+++ b/src/main/webapp/app/grading-system/bonus/bonus.component.html
@@ -11,7 +11,7 @@
     }
 </ng-template>
 <article class="bonus-form-start">
-    <h2>{{ 'artemisApp.bonus.title' | artemisTranslate }}</h2>
+    <h2 jhiTranslate="artemisApp.bonus.title"></h2>
     <div class="row mt-4">
         <div class="bonus-form-step col-1"></div>
         <div class="form-group col">
@@ -61,10 +61,10 @@ <h2>{{ 'artemisApp.bonus.title' | artemisTranslate }}</h2>
                 <table class="table table-striped">
                     <thead>
                         <tr>
-                            <th>{{ 'artemisApp.exam.examSummary.bonus' | artemisTranslate }}</th>
-                            <th>{{ 'artemisApp.exam.examSummary.interval' | artemisTranslate }}</th>
+                            <th jhiTranslate="artemisApp.exam.examSummary.bonus"></th>
+                            <th jhiTranslate="artemisApp.exam.examSummary.interval"></th>
                             @if (hasPointsSet()) {
-                                <th>{{ 'artemisApp.exam.examSummary.intervalPoints' | artemisTranslate }}</th>
+                                <th jhiTranslate="artemisApp.exam.examSummary.intervalPoints"></th>
                             }
                         </tr>
                     </thead>
@@ -87,7 +87,7 @@ <h2>{{ 'artemisApp.bonus.title' | artemisTranslate }}</h2>
             </div>
         }
         @if (bonus.bonusStrategy && bonus.sourceGradingScale && bonus.weight) {
-            <h5 class="mb-0">{{ 'artemisApp.bonus.formula.title' | artemisTranslate }}</h5>
+            <h5 class="mb-0" jhiTranslate="artemisApp.bonus.formula.title"></h5>
             @if (bonus.bonusStrategy && bonus.weight && bonusToGradeStepsDTO) {
                 <div class="fs-3 mb-4">
                     <div class="d-flex pb-2 align-items-center">
@@ -113,13 +113,9 @@ <h5 class="mb-0">{{ 'artemisApp.bonus.formula.title' | artemisTranslate }}</h5>
                         </div>
                     </div>
                     @if (bonus.bonusStrategy === BonusStrategy.POINTS) {
-                        <div class="row fs-6 ps-2">
-                            {{ 'artemisApp.bonus.formula.finalGradeFromPoints' | artemisTranslate }}
-                        </div>
+                        <div class="row fs-6 ps-2" jhiTranslate="artemisApp.bonus.formula.finalGradeFromPoints"></div>
                     }
-                    <div class="row fs-6 ps-2">
-                        {{ 'artemisApp.bonus.formula.finalGradeLimit' | artemisTranslate: { maxPossibleGrade: maxPossibleGrade() } }}
-                    </div>
+                    <div class="row fs-6 ps-2" jhiTranslate="artemisApp.bonus.formula.finalGradeLimit" [translateValues]="{ maxPossibleGrade: maxPossibleGrade() }"></div>
                 </div>
             }
             @if (hasBonusStrategyWeightMismatch) {
@@ -127,19 +123,19 @@ <h5 class="mb-0">{{ 'artemisApp.bonus.formula.title' | artemisTranslate }}</h5>
             }
             @if (examples.length) {
                 <div>
-                    <h5>{{ 'artemisApp.bonus.examples.title' | artemisTranslate }}</h5>
-                    <p class="mb-1">{{ 'artemisApp.bonus.examples.helpText' | artemisTranslate }}</p>
+                    <h5 jhiTranslate="artemisApp.bonus.examples.title"></h5>
+                    <p class="mb-1" jhiTranslate="artemisApp.bonus.examples.helpText"></p>
                     <table class="table table-striped">
                         <thead>
                             <tr>
-                                <th>{{ 'artemisApp.bonus.examples.examPoints' | artemisTranslate }}</th>
-                                <th>{{ 'artemisApp.bonus.examples.examGrade' | artemisTranslate }}</th>
-                                <th>{{ 'artemisApp.bonus.examples.bonusSourceStudentPoints' | artemisTranslate }}</th>
-                                <th>{{ 'artemisApp.bonus.examples.bonusGrade' | artemisTranslate }}</th>
+                                <th jhiTranslate="artemisApp.bonus.examples.examPoints"></th>
+                                <th jhiTranslate="artemisApp.bonus.examples.examGrade"></th>
+                                <th jhiTranslate="artemisApp.bonus.examples.bonusSourceStudentPoints"></th>
+                                <th jhiTranslate="artemisApp.bonus.examples.bonusGrade"></th>
                                 @if (currentBonusStrategyOption === BonusStrategyOption.POINTS) {
-                                    <th>{{ 'artemisApp.bonus.examples.finalPoints' | artemisTranslate }}</th>
+                                    <th jhiTranslate="artemisApp.bonus.examples.finalPoints"></th>
                                 }
-                                <th>{{ 'artemisApp.bonus.examples.finalGrade' | artemisTranslate }}</th>
+                                <th jhiTranslate="artemisApp.bonus.examples.finalGrade"></th>
                             </tr>
                         </thead>
                         <tbody>
diff --git a/src/main/webapp/app/grading-system/detailed-grading-system/detailed-grading-system.component.html b/src/main/webapp/app/grading-system/detailed-grading-system/detailed-grading-system.component.html
index 88cc248eb61e..a1d61c9b289e 100644
--- a/src/main/webapp/app/grading-system/detailed-grading-system/detailed-grading-system.component.html
+++ b/src/main/webapp/app/grading-system/detailed-grading-system/detailed-grading-system.component.html
@@ -4,31 +4,21 @@
             <thead>
                 <tr>
                     <th>
-                        <span>
-                            {{ 'artemisApp.gradingSystem.min' | artemisTranslate }}
-                        </span>
+                        <span jhiTranslate="artemisApp.gradingSystem.min"></span>
                     </th>
                     <th>
-                        <span>
-                            {{ 'artemisApp.gradingSystem.minPoints' | artemisTranslate }}
-                        </span>
+                        <span jhiTranslate="artemisApp.gradingSystem.minPoints"></span>
                     </th>
                     <th>
-                        <span> {{ 'artemisApp.gradingSystem.max' | artemisTranslate }} </span>
+                        <span jhiTranslate="artemisApp.gradingSystem.max"></span>
                     </th>
                     <th>
-                        <span>
-                            {{ 'artemisApp.gradingSystem.maxPoints' | artemisTranslate }}
-                        </span>
+                        <span jhiTranslate="artemisApp.gradingSystem.maxPoints"></span>
                     </th>
                     <th [colSpan]="2">
-                        <span>
-                            {{
-                                this.gradingScale.gradeType === GradeType.GRADE
-                                    ? ('artemisApp.gradingSystem.gradeName' | artemisTranslate)
-                                    : ('artemisApp.gradingSystem.bonusPoints' | artemisTranslate)
-                            }}
-                        </span>
+                        <span
+                            [jhiTranslate]="this.gradingScale.gradeType === GradeType.GRADE ? 'artemisApp.gradingSystem.gradeName' : 'artemisApp.gradingSystem.bonusPoints'"
+                        ></span>
                     </th>
                 </tr>
             </thead>
diff --git a/src/main/webapp/app/grading-system/grading-key-overview/grading-key-overview.component.html b/src/main/webapp/app/grading-system/grading-key-overview/grading-key-overview.component.html
index e8d2049f27c0..9b959a75bbdb 100644
--- a/src/main/webapp/app/grading-system/grading-key-overview/grading-key-overview.component.html
+++ b/src/main/webapp/app/grading-system/grading-key-overview/grading-key-overview.component.html
@@ -5,7 +5,7 @@ <h1 class="text-center mb-3">
             {{ title }}
         </h1>
         @if (!isExam) {
-            <h6>{{ 'artemisApp.gradingSystem.overview.info' | artemisTranslate }}</h6>
+            <h6 jhiTranslate="artemisApp.gradingSystem.overview.info"></h6>
         }
         <jhi-grade-key-table />
         <button type="button" class="btn btn-secondary" (click)="previousState()"><fa-icon [icon]="faChevronLeft" />&nbsp;<span jhiTranslate="entity.action.back"></span></button>
diff --git a/src/main/webapp/app/grading-system/grading-key-overview/grading-key/grading-key-table.component.html b/src/main/webapp/app/grading-system/grading-key-overview/grading-key/grading-key-table.component.html
index 299ba8a449c5..96f12a89ac13 100644
--- a/src/main/webapp/app/grading-system/grading-key-overview/grading-key/grading-key-table.component.html
+++ b/src/main/webapp/app/grading-system/grading-key-overview/grading-key/grading-key-table.component.html
@@ -1,15 +1,15 @@
 <div>
     @if (!isExam) {
-        <h6>{{ 'artemisApp.gradingSystem.overview.info' | artemisTranslate }}</h6>
+        <h6 jhiTranslate="artemisApp.gradingSystem.overview.info"></h6>
     }
     <div>
         <table class="table table-striped w-auto">
             <thead>
                 <tr>
-                    <th>{{ isBonus ? ('artemisApp.exam.examSummary.bonus' | artemisTranslate) : ('artemisApp.exam.examSummary.grade' | artemisTranslate) }}</th>
-                    <th>{{ 'artemisApp.exam.examSummary.interval' | artemisTranslate }}</th>
+                    <th jhiTranslate="{{ isBonus ? 'artemisApp.exam.examSummary.bonus' : 'artemisApp.exam.examSummary.grade' }}"></th>
+                    <th jhiTranslate="artemisApp.exam.examSummary.interval"></th>
                     @if (hasPointsSet) {
-                        <th>{{ 'artemisApp.exam.examSummary.intervalPoints' | artemisTranslate }}</th>
+                        <th jhiTranslate="artemisApp.exam.examSummary.intervalPoints"></th>
                     }
                 </tr>
             </thead>
@@ -57,7 +57,7 @@ <h6>{{ 'artemisApp.gradingSystem.overview.info' | artemisTranslate }}</h6>
         </table>
     </div>
     <div>
-        <h6>{{ 'artemisApp.gradingSystem.overview.intervals.title' | artemisTranslate }}</h6>
+        <h6 jhiTranslate="artemisApp.gradingSystem.overview.intervals.title"></h6>
         <ul>
             <li><span style="font-weight: bold">[a, b)</span>: {{ 'artemisApp.gradingSystem.overview.intervals.leftInclusiveRightExclusive' | artemisTranslate }}</li>
             <li><span style="font-weight: bold">(a, b]</span>: {{ 'artemisApp.gradingSystem.overview.intervals.leftExclusiveRightInclusive' | artemisTranslate }}</li>
diff --git a/src/main/webapp/app/grading-system/grading-system-info-modal/grading-system-info-modal.component.html b/src/main/webapp/app/grading-system/grading-system-info-modal/grading-system-info-modal.component.html
index a16bf94026ba..d59b5dd01694 100644
--- a/src/main/webapp/app/grading-system/grading-system-info-modal/grading-system-info-modal.component.html
+++ b/src/main/webapp/app/grading-system/grading-system-info-modal/grading-system-info-modal.component.html
@@ -1,38 +1,38 @@
 <ng-template #info let-c="close" let-d="dismiss">
     <div class="modal-header">
-        <h4 class="modal-title">{{ 'artemisApp.gradingSystem.info.title' | artemisTranslate }}</h4>
+        <h4 class="modal-title" jhiTranslate="artemisApp.gradingSystem.info.title"></h4>
         <button type="button" class="btn-close" aria-label="Close" (click)="d()"><span aria-hidden="true"></span></button>
     </div>
     <div class="modal-body">
         <table class="table">
             <tr>
-                <th>{{ 'artemisApp.gradingSystem.info.general.title' | artemisTranslate }}</th>
-                <td>{{ 'artemisApp.gradingSystem.info.general.explanation' | artemisTranslate }}</td>
+                <th jhiTranslate="artemisApp.gradingSystem.info.general.title"></th>
+                <td jhiTranslate="artemisApp.gradingSystem.info.general.explanation"></td>
             </tr>
             <hr />
             <tr>
-                <th>{{ 'artemisApp.gradingSystem.info.maxPoints.title' | artemisTranslate }}</th>
-                <td>{{ 'artemisApp.gradingSystem.info.maxPoints.explanation' | artemisTranslate }}</td>
+                <th jhiTranslate="artemisApp.gradingSystem.info.maxPoints.title"></th>
+                <td jhiTranslate="artemisApp.gradingSystem.info.maxPoints.explanation"></td>
             </tr>
             <hr />
             <tr>
-                <th>{{ 'artemisApp.gradingSystem.info.gradeType.title' | artemisTranslate }}</th>
-                <td>{{ 'artemisApp.gradingSystem.info.gradeType.explanation' | artemisTranslate }}</td>
+                <th jhiTranslate="artemisApp.gradingSystem.info.gradeType.title"></th>
+                <td jhiTranslate="artemisApp.gradingSystem.info.gradeType.explanation"></td>
             </tr>
             <hr />
             <tr>
-                <th>{{ 'artemisApp.gradingSystem.info.inclusivity.title' | artemisTranslate }}</th>
-                <td>{{ 'artemisApp.gradingSystem.info.inclusivity.explanation' | artemisTranslate }}</td>
+                <th jhiTranslate="artemisApp.gradingSystem.info.inclusivity.title"></th>
+                <td jhiTranslate="artemisApp.gradingSystem.info.inclusivity.explanation"></td>
             </tr>
             <hr />
             <tr>
-                <th>{{ 'artemisApp.gradingSystem.info.firstPassingGrade.title' | artemisTranslate }}</th>
-                <td>{{ 'artemisApp.gradingSystem.info.firstPassingGrade.explanation' | artemisTranslate }}</td>
+                <th jhiTranslate="artemisApp.gradingSystem.info.firstPassingGrade.title"></th>
+                <td jhiTranslate="artemisApp.gradingSystem.info.firstPassingGrade.explanation"></td>
             </tr>
             <hr />
             <tr>
-                <th>{{ 'artemisApp.gradingSystem.info.importExport.title' | artemisTranslate }}</th>
-                <td>{{ 'artemisApp.gradingSystem.info.importExport.explanation' | artemisTranslate }}</td>
+                <th jhiTranslate="artemisApp.gradingSystem.info.importExport.title"></th>
+                <td jhiTranslate="artemisApp.gradingSystem.info.importExport.explanation"></td>
             </tr>
         </table>
     </div>
diff --git a/src/main/webapp/app/grading-system/grading-system.component.html b/src/main/webapp/app/grading-system/grading-system.component.html
index 65f83944d3ef..73eff43a322e 100644
--- a/src/main/webapp/app/grading-system/grading-system.component.html
+++ b/src/main/webapp/app/grading-system/grading-system.component.html
@@ -24,9 +24,7 @@ <h2>
         </div>
         <div class="dropdown-container">
             <div class="form-group">
-                <span class="colon-suffix no-flex-shrink">{{
-                    isExam ? ('artemisApp.examManagement.maxPoints.title' | artemisTranslate) : ('artemisApp.course.maxPoints.title' | artemisTranslate)
-                }}</span>
+                <span class="colon-suffix no-flex-shrink" jhiTranslate="{{ isExam ? 'artemisApp.examManagement.maxPoints.title' : 'artemisApp.course.maxPoints.title' }}"></span>
                 @if (!isExam) {
                     <jhi-help-icon text="artemisApp.course.maxPoints.info" />
                 }
@@ -68,12 +66,8 @@ <h2>
 <div class="tab-bar" id="tab-bar">
     <div class="col-12 no-indent">
         <div>
-            <div class="tab-item interval" routerLink="interval" routerLinkActive="active">
-                {{ 'artemisApp.gradingSystem.intervalTab.title' | artemisTranslate }}
-            </div>
-            <div class="tab-item detailed" routerLink="detailed" routerLinkActive="active">
-                {{ 'artemisApp.gradingSystem.detailedTab.title' | artemisTranslate }}
-            </div>
+            <div class="tab-item interval" routerLink="interval" routerLinkActive="active" jhiTranslate="artemisApp.gradingSystem.intervalTab.title"></div>
+            <div class="tab-item detailed" routerLink="detailed" routerLinkActive="active" jhiTranslate="artemisApp.gradingSystem.detailedTab.title"></div>
         </div>
     </div>
 </div>
diff --git a/src/main/webapp/app/grading-system/interval-grading-system/interval-grading-system.component.html b/src/main/webapp/app/grading-system/interval-grading-system/interval-grading-system.component.html
index 8b30dabedbd5..3b8a116ef2cc 100644
--- a/src/main/webapp/app/grading-system/interval-grading-system/interval-grading-system.component.html
+++ b/src/main/webapp/app/grading-system/interval-grading-system/interval-grading-system.component.html
@@ -12,9 +12,7 @@
             <thead>
                 <tr>
                     <th>
-                        <span>
-                            {{ 'artemisApp.gradingSystem.intervalTab.title' | artemisTranslate }}
-                        </span>
+                        <span jhiTranslate="artemisApp.gradingSystem.intervalTab.title"></span>
                     </th>
                     <th>
                         <span>
@@ -29,13 +27,9 @@
                         </span>
                     </th>
                     <th [colSpan]="2">
-                        <span>
-                            {{
-                                this.gradingScale.gradeType === GradeType.GRADE
-                                    ? ('artemisApp.gradingSystem.gradeName' | artemisTranslate)
-                                    : ('artemisApp.gradingSystem.bonusPoints' | artemisTranslate)
-                            }}
-                        </span>
+                        <span
+                            [jhiTranslate]="this.gradingScale.gradeType === GradeType.GRADE ? 'artemisApp.gradingSystem.gradeName' : 'artemisApp.gradingSystem.bonusPoints'"
+                        ></span>
                     </th>
                 </tr>
             </thead>
diff --git a/src/main/webapp/app/guided-tour/guided-tour.component.html b/src/main/webapp/app/guided-tour/guided-tour.component.html
index 2e3beed56c91..573b73a72161 100644
--- a/src/main/webapp/app/guided-tour/guided-tour.component.html
+++ b/src/main/webapp/app/guided-tour/guided-tour.component.html
@@ -40,7 +40,7 @@
                         @if (currentTourStep.headlineTranslateKey) {
                             <h3 class="headline">
                                 @if (!guidedTourService.isOnResizeMessage && guidedTourService.currentTour && guidedTourService.currentTour.steps.length > 1) {
-                                    <span>{{ 'tour.step' | artemisTranslate: { string: guidedTourService.getCurrentStepString() } }} </span>
+                                    <span jhiTranslate="tour.step" [translateValues]="{ string: guidedTourService.getCurrentStepString() }"></span>
                                 }
                                 {{ currentTourStep.headlineTranslateKey | artemisTranslate }}
                             </h3>
diff --git a/src/main/webapp/app/iris/about-iris/about-iris.component.html b/src/main/webapp/app/iris/about-iris/about-iris.component.html
index 82f59de31e50..947df8f6bef0 100644
--- a/src/main/webapp/app/iris/about-iris/about-iris.component.html
+++ b/src/main/webapp/app/iris/about-iris/about-iris.component.html
@@ -6,16 +6,14 @@
                     <jhi-iris-logo [size]="IrisLogoSize.BIG" />
                 </div>
                 <div class="col-8">
-                    <h2 class="mt-2 font-weight-bold">
-                        {{ 'artemisApp.exerciseChatbot.title' | artemisTranslate }}
-                    </h2>
+                    <h2 class="mt-2 font-weight-bold" jhiTranslate="artemisApp.exerciseChatbot.title"></h2>
                     <div class="ms-2 d-none d-md-block">
-                        <p class="mt-1 font-weight-normal">{{ 'artemisApp.exerciseChatbot.subtext' | artemisTranslate }}</p>
+                        <p class="mt-1 font-weight-normal" jhiTranslate="artemisApp.exerciseChatbot.subtext"></p>
                     </div>
                 </div>
             </div>
             <div class="row d-md-none">
-                <p class="mt-1 font-weight-normal">{{ 'artemisApp.exerciseChatbot.subtext' | artemisTranslate }}</p>
+                <p class="mt-1 font-weight-normal" jhiTranslate="artemisApp.exerciseChatbot.subtext"></p>
             </div>
         </div>
     </div>
diff --git a/src/main/webapp/app/iris/base-chatbot/iris-base-chatbot.component.html b/src/main/webapp/app/iris/base-chatbot/iris-base-chatbot.component.html
index 0c3b9c5e57f0..9734b552d14d 100644
--- a/src/main/webapp/app/iris/base-chatbot/iris-base-chatbot.component.html
+++ b/src/main/webapp/app/iris/base-chatbot/iris-base-chatbot.component.html
@@ -179,7 +179,7 @@ <h3 jhiTranslate="artemisApp.iris.chat.helpOffer"></h3>
                     this.hasActiveStage
                 "
             />
-            <span class="disclaimer-message">{{ 'artemisApp.exerciseChatbot.disclaimer' | artemisTranslate }}</span>
+            <span class="disclaimer-message" jhiTranslate="artemisApp.exerciseChatbot.disclaimer"></span>
         </div>
     }
 </div>
diff --git a/src/main/webapp/app/iris/settings/iris-settings-update/iris-common-sub-settings-update/iris-common-sub-settings-update.component.html b/src/main/webapp/app/iris/settings/iris-settings-update/iris-common-sub-settings-update/iris-common-sub-settings-update.component.html
index e231aae3390b..4132e9fab587 100644
--- a/src/main/webapp/app/iris/settings/iris-settings-update/iris-common-sub-settings-update/iris-common-sub-settings-update.component.html
+++ b/src/main/webapp/app/iris/settings/iris-settings-update/iris-common-sub-settings-update/iris-common-sub-settings-update.component.html
@@ -9,12 +9,20 @@
     }
 }
 <div class="btn-group">
-    <div class="btn" [ngClass]="{ 'btn-success selected': enabled, 'btn-default': !enabled }" [class.disabled]="isSettingsSwitchDisabled" (click)="onEnable()">
-        {{ 'artemisApp.iris.settings.subSettings.enabled.on' | artemisTranslate }}
-    </div>
-    <div class="btn" [ngClass]="{ 'btn-danger selected': !enabled, 'btn-default': enabled }" [class.disabled]="isSettingsSwitchDisabled" (click)="onDisable()">
-        {{ 'artemisApp.iris.settings.subSettings.enabled.off' | artemisTranslate }}
-    </div>
+    <div
+        class="btn"
+        [ngClass]="{ 'btn-success selected': enabled, 'btn-default': !enabled }"
+        [class.disabled]="isSettingsSwitchDisabled"
+        (click)="onEnable()"
+        jhiTranslate="artemisApp.iris.settings.subSettings.enabled.on"
+    ></div>
+    <div
+        class="btn"
+        [ngClass]="{ 'btn-danger selected': !enabled, 'btn-default': enabled }"
+        [class.disabled]="isSettingsSwitchDisabled"
+        (click)="onDisable()"
+        jhiTranslate="artemisApp.iris.settings.subSettings.enabled.off"
+    ></div>
 </div>
 <h4 class="form-label mt-3" jhiTranslate="artemisApp.iris.settings.subSettings.models.title"></h4>
 <span><span class="fw-bold fs-5" jhiTranslate="artemisApp.iris.settings.subSettings.models.allowedModels.title"></span>: </span>
diff --git a/src/main/webapp/app/iris/settings/shared/iris-enabled.component.html b/src/main/webapp/app/iris/settings/shared/iris-enabled.component.html
index 17d26de15f89..baeaca3cdf6a 100644
--- a/src/main/webapp/app/iris/settings/shared/iris-enabled.component.html
+++ b/src/main/webapp/app/iris/settings/shared/iris-enabled.component.html
@@ -4,15 +4,13 @@
         [ngClass]="{ 'btn-success selected': irisSubSettings?.enabled, 'btn-default': !irisSubSettings?.enabled }"
         [class.disabled]="disabled"
         (click)="setEnabled(true)"
-    >
-        {{ 'artemisApp.iris.settings.subSettings.enabled.on' | artemisTranslate }}
-    </div>
+        jhiTranslate="artemisApp.iris.settings.subSettings.enabled.on"
+    ></div>
     <div
         class="btn btn-default"
         [ngClass]="{ 'btn-danger selected': !irisSubSettings?.enabled, 'btn-default': irisSubSettings?.enabled }"
         [class.disabled]="disabled"
         (click)="setEnabled(false)"
-    >
-        {{ 'artemisApp.iris.settings.subSettings.enabled.off' | artemisTranslate }}
-    </div>
+        jhiTranslate="artemisApp.iris.settings.subSettings.enabled.off"
+    ></div>
 </div>
diff --git a/src/main/webapp/app/lecture/lecture-attachments.component.html b/src/main/webapp/app/lecture/lecture-attachments.component.html
index b5bd8a61163f..dafff574b446 100644
--- a/src/main/webapp/app/lecture/lecture-attachments.component.html
+++ b/src/main/webapp/app/lecture/lecture-attachments.component.html
@@ -103,9 +103,7 @@ <h4 jhiTranslate="artemisApp.lecture.attachments.attachments"></h4>
                                                     </div>
                                                 </td>
                                                 @if (attachmentToBeCreated?.id === attachment?.id) {
-                                                    <div class="edit-overlay">
-                                                        {{ 'artemisApp.lecture.attachments.isBeingEdited' | artemisTranslate }}
-                                                    </div>
+                                                    <div class="edit-overlay" jhiTranslate="artemisApp.lecture.attachments.isBeingEdited"></div>
                                                 }
                                             </tr>
                                         }
@@ -140,7 +138,7 @@ <h4 jhiTranslate="artemisApp.lecture.attachments.editAttachment"></h4>
                                         jhiTranslate="artemisApp.lecture.attachments.file"
                                         >File</label
                                     >
-                                    <small id="fileHelp" class="form-text text-body-secondary">{{ 'artemisApp.lecture.attachments.fileLimitation' | artemisTranslate }} </small>
+                                    <small id="fileHelp" class="form-text text-body-secondary" jhiTranslate="artemisApp.lecture.attachments.fileLimitation"></small>
                                     <fa-icon
                                         [icon]="faQuestionCircle"
                                         [ngbTooltip]="'artemisApp.lecture.attachments.fileLimitationTooltip' | artemisTranslate: { extensions: allowedFileExtensions }"
diff --git a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.html b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.html
index 9d7cb956a39c..414beb7b9666 100644
--- a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.html
+++ b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-unit-form/attachment-unit-form.component.html
@@ -13,20 +13,16 @@
                 @if (nameControl?.invalid && (nameControl?.dirty || nameControl?.touched)) {
                     <div class="alert alert-danger">
                         @if (nameControl?.errors?.required) {
-                            <div>
-                                {{ 'artemisApp.attachmentUnit.createAttachmentUnit.nameRequiredValidationError' | artemisTranslate }}
-                            </div>
+                            <div jhiTranslate="artemisApp.attachmentUnit.createAttachmentUnit.nameRequiredValidationError"></div>
                         }
                         @if (nameControl?.errors?.maxlength) {
-                            <div>
-                                {{ 'artemisApp.attachmentUnit.createAttachmentUnit.nameMaxLengthValidationError' | artemisTranslate }}
-                            </div>
+                            <div jhiTranslate="artemisApp.attachmentUnit.createAttachmentUnit.nameMaxLengthValidationError"></div>
                         }
                     </div>
                 }
             </div>
             <div class="form-group">
-                <label for="description">{{ 'artemisApp.attachmentUnit.createAttachmentUnit.description' | artemisTranslate }}</label>
+                <label for="description" jhiTranslate="artemisApp.attachmentUnit.createAttachmentUnit.description"></label>
                 <textarea
                     class="form-control"
                     id="description"
@@ -37,16 +33,14 @@
                 @if (descriptionControl?.invalid && (descriptionControl?.dirty || descriptionControl?.touched)) {
                     <div class="alert alert-danger">
                         @if (descriptionControl?.errors?.maxlength) {
-                            <div>
-                                {{ 'artemisApp.attachmentUnit.createAttachmentUnit.descriptionMaxLengthValidationError' | artemisTranslate }}
-                            </div>
+                            <div jhiTranslate="artemisApp.attachmentUnit.createAttachmentUnit.descriptionMaxLengthValidationError"></div>
                         }
                     </div>
                 }
             </div>
             <div class="form-group">
                 <label>{{ 'artemisApp.attachmentUnit.createAttachmentUnit.file' | artemisTranslate }}*</label>
-                <small id="fileHelp" class="form-text text-body-secondary">{{ 'artemisApp.attachmentUnit.createAttachmentUnit.fileLimitation' | artemisTranslate }} </small>
+                <small id="fileHelp" class="form-text text-body-secondary" jhiTranslate="artemisApp.attachmentUnit.createAttachmentUnit.fileLimitation"></small>
                 <fa-icon
                     [icon]="faQuestionCircle"
                     [ngbTooltip]="'artemisApp.attachmentUnit.createAttachmentUnit.fileLimitationTooltip' | artemisTranslate: { extensions: allowedFileExtensions }"
@@ -73,9 +67,7 @@
                     </div>
                 }
                 @if (!fileName && fileInputTouched) {
-                    <div class="alert alert-danger">
-                        {{ 'artemisApp.attachmentUnit.createAttachmentUnit.fileRequiredValidationError' | artemisTranslate }}
-                    </div>
+                    <div class="alert alert-danger" jhiTranslate="artemisApp.attachmentUnit.createAttachmentUnit.fileRequiredValidationError"></div>
                 }
             </div>
             <div class="form-group">
@@ -90,7 +82,7 @@
                 />
             </div>
             <div class="form-group" [hidden]="!isEditMode">
-                <label for="updateNotificationText">{{ 'artemisApp.attachmentUnit.createAttachmentUnit.updateNotificationText' | artemisTranslate }}</label>
+                <label for="updateNotificationText" jhiTranslate="artemisApp.attachmentUnit.createAttachmentUnit.updateNotificationText"></label>
                 <textarea
                     class="form-control"
                     id="updateNotificationText"
@@ -102,21 +94,19 @@
                 @if (updateNotificationTextControl?.invalid && (updateNotificationTextControl?.dirty || updateNotificationTextControl?.touched)) {
                     <div class="alert alert-danger">
                         @if (updateNotificationTextControl?.errors?.maxlength) {
-                            <div>
-                                {{ 'artemisApp.attachmentUnit.createAttachmentUnit.updateNotificationTextMaxLengthValidationError' | artemisTranslate }}
-                            </div>
+                            <div jhiTranslate="artemisApp.attachmentUnit.createAttachmentUnit.updateNotificationTextMaxLengthValidationError"></div>
                         }
                     </div>
                 }
             </div>
             <div class="form-group">
-                <label for="version">{{ 'artemisApp.attachmentUnit.createAttachmentUnit.version' | artemisTranslate }}</label>
+                <label for="version" jhiTranslate="artemisApp.attachmentUnit.createAttachmentUnit.version"></label>
                 <input id="version" class="form-control disabled" type="text" readonly formControlName="version" />
             </div>
             <div class="row">
                 <div class="col-12">
                     <button id="submitButton" class="btn btn-primary" type="submit" [disabled]="!isSubmitPossible">
-                        <span>{{ 'entity.action.submit' | artemisTranslate }}</span>
+                        <span jhiTranslate="entity.action.submit"></span>
                     </button>
                     @if (hasCancelButton) {
                         <button type="button" (click)="cancelForm()" class="btn btn-default">
diff --git a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-units/attachment-units.component.html b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-units/attachment-units.component.html
index a5521571870d..38e8728489b5 100644
--- a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-units/attachment-units.component.html
+++ b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/attachment-units/attachment-units.component.html
@@ -77,12 +77,12 @@ <h2 id="page-heading">
         </table>
     </div>
     <div class="mt-3 mb-3">
-        <span class="px-1">{{ 'artemisApp.attachmentUnit.createAttachmentUnits.removeSlides' | artemisTranslate }}</span>
+        <span class="px-1" jhiTranslate="artemisApp.attachmentUnit.createAttachmentUnits.removeSlides"></span>
         <div>
             <div class="alert alert-warning mt-3 ml-3">
                 <ul>
-                    <li>{{ 'artemisApp.attachmentUnit.createAttachmentUnits.removeSlidesInfo.firstLine' | artemisTranslate }}</li>
-                    <li>{{ 'artemisApp.attachmentUnit.createAttachmentUnits.removeSlidesInfo.secondLine' | artemisTranslate }}</li>
+                    <li jhiTranslate="artemisApp.attachmentUnit.createAttachmentUnits.removeSlidesInfo.firstLine"></li>
+                    <li jhiTranslate="artemisApp.attachmentUnit.createAttachmentUnits.removeSlidesInfo.secondLine"></li>
                     <li>
                         {{ 'artemisApp.attachmentUnit.createAttachmentUnits.removeSlidesInfo.thirdLine' | artemisTranslate }}
                         {{ removedSlidesNumbers.length > 0 ? removedSlidesNumbers : '-' }}
@@ -112,7 +112,7 @@ <h2 id="page-heading">
         [disabled]="units.length < 1"
         class="btn btn-primary"
     >
-        <span>{{ 'entity.action.submit' | artemisTranslate }}</span>
+        <span jhiTranslate="entity.action.submit"></span>
     </button>
     <button (click)="cancelSplit()" class="btn btn-default"><fa-icon [icon]="faBan" />&nbsp;<span jhiTranslate="entity.action.cancel"></span></button>
     @if (invalidUnitTableMessage) {
diff --git a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/create-exercise-unit/create-exercise-unit.component.html b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/create-exercise-unit/create-exercise-unit.component.html
index 8fed64368500..f4d559178079 100644
--- a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/create-exercise-unit/create-exercise-unit.component.html
+++ b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/create-exercise-unit/create-exercise-unit.component.html
@@ -1,19 +1,19 @@
 @if (isLoading) {
     <div class="d-flex justify-content-center">
         <div class="spinner-border" role="status">
-            <span class="sr-only">{{ 'loading' | artemisTranslate }}</span>
+            <span class="sr-only" jhiTranslate="loading"></span>
         </div>
     </div>
 } @else {
     <div class="container">
         <div class="row">
             <div class="col-12 mx-auto">
-                <h2>{{ 'artemisApp.exerciseUnit.createExerciseUnit.headline' | artemisTranslate }}</h2>
+                <h2 jhiTranslate="artemisApp.exerciseUnit.createExerciseUnit.headline"></h2>
             </div>
         </div>
         <div class="row">
             <div class="col-sm-6 mx-auto">
-                <p>{{ 'artemisApp.exerciseUnit.createExerciseUnit.description' | artemisTranslate }}</p>
+                <p jhiTranslate="artemisApp.exerciseUnit.createExerciseUnit.description"></p>
             </div>
             <div class="col-sm-6 mx-auto text-end">
                 @if (hasCancelButton) {
@@ -22,13 +22,22 @@ <h2>{{ 'artemisApp.exerciseUnit.createExerciseUnit.headline' | artemisTranslate
                     </button>
                 }
                 @if (hasCreateExerciseButton) {
-                    <button id="createExerciseButton" type="button" class="btn btn-primary" (click)="createNewExercise()">
-                        {{ 'artemisApp.lecture.wizardMode.newExercise' | artemisTranslate }}
-                    </button>
+                    <button
+                        id="createExerciseButton"
+                        type="button"
+                        class="btn btn-primary"
+                        (click)="createNewExercise()"
+                        jhiTranslate="artemisApp.lecture.wizardMode.newExercise"
+                    ></button>
                 }
-                <button id="createButton" type="button" class="btn btn-primary" [disabled]="exercisesToCreateUnitFor.length === 0" (click)="createExerciseUnits()">
-                    {{ 'entity.action.submit' | artemisTranslate }}
-                </button>
+                <button
+                    id="createButton"
+                    type="button"
+                    class="btn btn-primary"
+                    [disabled]="exercisesToCreateUnitFor.length === 0"
+                    (click)="createExerciseUnits()"
+                    jhiTranslate="entity.action.submit"
+                ></button>
             </div>
         </div>
         <div class="row">
diff --git a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/lecture-unit-layout/lecture-unit-layout.component.html b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/lecture-unit-layout/lecture-unit-layout.component.html
index ee71cdb80fc3..1320a915b14f 100644
--- a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/lecture-unit-layout/lecture-unit-layout.component.html
+++ b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/lecture-unit-layout/lecture-unit-layout.component.html
@@ -1,7 +1,7 @@
 @if (isLoading) {
     <div class="d-flex justify-content-center">
         <div class="spinner-border" role="status">
-            <span class="sr-only">{{ 'loading' | artemisTranslate }}</span>
+            <span class="sr-only" jhiTranslate="loading"></span>
         </div>
     </div>
 } @else {
diff --git a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/lecture-unit-management.component.html b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/lecture-unit-management.component.html
index 60173be6523b..1a3aea4b7238 100644
--- a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/lecture-unit-management.component.html
+++ b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/lecture-unit-management.component.html
@@ -1,7 +1,7 @@
 @if (isLoading) {
     <div class="d-flex justify-content-center">
         <div class="spinner-border" role="status">
-            <span class="sr-only">{{ 'loading' | artemisTranslate }}</span>
+            <span class="sr-only" jhiTranslate="loading"></span>
         </div>
     </div>
 }
diff --git a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/online-unit-form/online-unit-form.component.html b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/online-unit-form/online-unit-form.component.html
index f6d25a0b3864..0758f7f02a87 100644
--- a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/online-unit-form/online-unit-form.component.html
+++ b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/online-unit-form/online-unit-form.component.html
@@ -11,20 +11,14 @@
                     [placeholder]="'artemisApp.onlineUnit.createOnlineUnit.sourcePlaceHolder' | artemisTranslate"
                     (change)="onLinkChanged()"
                 />
-                <small id="urlHelperExplanation" class="form-text text-body-secondary">{{
-                    'artemisApp.onlineUnit.createOnlineUnit.urlHelperPlaceholder' | artemisTranslate
-                }}</small>
+                <small id="urlHelperExplanation" class="form-text text-body-secondary" jhiTranslate="artemisApp.onlineUnit.createOnlineUnit.urlHelperPlaceholder"></small>
                 @if (sourceControl?.invalid && (sourceControl?.dirty || sourceControl?.touched)) {
                     <div class="alert alert-danger">
                         @if (sourceControl?.errors?.required) {
-                            <div>
-                                {{ 'artemisApp.onlineUnit.createOnlineUnit.sourceRequiredValidationError' | artemisTranslate }}
-                            </div>
+                            <div jhiTranslate="artemisApp.onlineUnit.createOnlineUnit.sourceRequiredValidationError"></div>
                         }
                         @if (sourceControl?.errors?.invalidUrl) {
-                            <div>
-                                {{ 'artemisApp.onlineUnit.createOnlineUnit.sourceURLValidationError' | artemisTranslate }}
-                            </div>
+                            <div jhiTranslate="artemisApp.onlineUnit.createOnlineUnit.sourceURLValidationError"></div>
                         }
                     </div>
                 }
@@ -41,20 +35,16 @@
                 @if (nameControl?.invalid && (nameControl?.dirty || nameControl?.touched)) {
                     <div class="alert alert-danger">
                         @if (nameControl?.errors?.required) {
-                            <div>
-                                {{ 'artemisApp.onlineUnit.createOnlineUnit.nameRequiredValidationError' | artemisTranslate }}
-                            </div>
+                            <div jhiTranslate="artemisApp.onlineUnit.createOnlineUnit.nameRequiredValidationError"></div>
                         }
                         @if (nameControl?.errors?.maxlength) {
-                            <div>
-                                {{ 'artemisApp.onlineUnit.createOnlineUnit.nameMaxLengthValidationError' | artemisTranslate }}
-                            </div>
+                            <div jhiTranslate="artemisApp.onlineUnit.createOnlineUnit.nameMaxLengthValidationError"></div>
                         }
                     </div>
                 }
             </div>
             <div class="form-group">
-                <label for="description">{{ 'artemisApp.onlineUnit.createOnlineUnit.description' | artemisTranslate }}</label>
+                <label for="description" jhiTranslate="artemisApp.onlineUnit.createOnlineUnit.description"></label>
                 <textarea
                     class="form-control"
                     id="description"
@@ -65,9 +55,7 @@
                 @if (descriptionControl?.invalid && (descriptionControl?.dirty || descriptionControl?.touched)) {
                     <div class="alert alert-danger">
                         @if (descriptionControl?.errors?.maxlength) {
-                            <div>
-                                {{ 'artemisApp.onlineUnit.createOnlineUnit.descriptionMaxLengthValidationError' | artemisTranslate }}
-                            </div>
+                            <div jhiTranslate="artemisApp.onlineUnit.createOnlineUnit.descriptionMaxLengthValidationError"></div>
                         }
                     </div>
                 }
@@ -86,7 +74,7 @@
             <div class="row">
                 <div class="col-12">
                     <button id="submitButton" class="btn btn-primary" type="submit" [disabled]="!isSubmitPossible">
-                        <span>{{ 'entity.action.submit' | artemisTranslate }}</span>
+                        <span jhiTranslate="entity.action.submit"></span>
                     </button>
                     @if (hasCancelButton) {
                         <button type="button" (click)="cancelForm()" class="btn btn-default">
diff --git a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/text-unit-form/text-unit-form.component.html b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/text-unit-form/text-unit-form.component.html
index 7af504cfd0aa..8f0eccda8242 100644
--- a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/text-unit-form/text-unit-form.component.html
+++ b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/text-unit-form/text-unit-form.component.html
@@ -14,14 +14,10 @@
                     @if (nameControl?.invalid && (nameControl?.dirty || nameControl?.touched)) {
                         <div class="alert alert-danger">
                             @if (nameControl?.errors?.required) {
-                                <div>
-                                    {{ 'artemisApp.textUnit.createTextUnit.nameRequiredValidationError' | artemisTranslate }}
-                                </div>
+                                <div jhiTranslate="artemisApp.textUnit.createTextUnit.nameRequiredValidationError"></div>
                             }
                             @if (nameControl?.errors?.maxlength) {
-                                <div>
-                                    {{ 'artemisApp.textUnit.createTextUnit.nameMaxLengthValidationError' | artemisTranslate }}
-                                </div>
+                                <div jhiTranslate="artemisApp.textUnit.createTextUnit.nameMaxLengthValidationError"></div>
                             }
                         </div>
                     }
@@ -38,7 +34,7 @@
                     />
                 </div>
                 <div class="form-group">
-                    <label class="d-block" for="content">{{ 'artemisApp.textUnit.createTextUnit.content' | artemisTranslate }}</label>
+                    <label class="d-block" for="content" jhiTranslate="artemisApp.textUnit.createTextUnit.content"></label>
                     <small id="contentHelp" class="form-text mb-1 text-body-secondary">
                         {{ 'artemisApp.textUnit.markdownHelp' | artemisTranslate }}
                         <a href="https://guides.github.com/features/mastering-markdown/"> GitHub Markdown Guide</a>
@@ -55,7 +51,7 @@
                 <div class="row">
                     <div class="col-12">
                         <button id="submitButton" class="btn btn-primary" type="submit" [disabled]="!isSubmitPossible">
-                            <span>{{ 'entity.action.submit' | artemisTranslate }}</span>
+                            <span jhiTranslate="entity.action.submit"></span>
                         </button>
                         @if (hasCancelButton) {
                             <button type="button" (click)="cancelForm()" class="btn btn-default">
diff --git a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/video-unit-form/video-unit-form.component.html b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/video-unit-form/video-unit-form.component.html
index 299ddc2f7c93..4253c17c54cb 100644
--- a/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/video-unit-form/video-unit-form.component.html
+++ b/src/main/webapp/app/lecture/lecture-unit/lecture-unit-management/video-unit-form/video-unit-form.component.html
@@ -14,20 +14,16 @@
                     @if (nameControl?.invalid && (nameControl?.dirty || nameControl?.touched)) {
                         <div class="alert alert-danger">
                             @if (nameControl?.errors?.required) {
-                                <div>
-                                    {{ 'artemisApp.videoUnit.createVideoUnit.nameRequiredValidationError' | artemisTranslate }}
-                                </div>
+                                <div jhiTranslate="artemisApp.videoUnit.createVideoUnit.nameRequiredValidationError"></div>
                             }
                             @if (nameControl?.errors?.maxlength) {
-                                <div>
-                                    {{ 'artemisApp.videoUnit.createVideoUnit.nameMaxLengthValidationError' | artemisTranslate }}
-                                </div>
+                                <div jhiTranslate="artemisApp.videoUnit.createVideoUnit.nameMaxLengthValidationError"></div>
                             }
                         </div>
                     }
                 </div>
                 <div class="form-group">
-                    <label for="description">{{ 'artemisApp.videoUnit.createVideoUnit.description' | artemisTranslate }}</label>
+                    <label for="description" jhiTranslate="artemisApp.videoUnit.createVideoUnit.description"></label>
                     <textarea
                         class="form-control"
                         id="description"
@@ -38,9 +34,7 @@
                     @if (descriptionControl?.invalid && (descriptionControl?.dirty || descriptionControl?.touched)) {
                         <div class="alert alert-danger">
                             @if (descriptionControl?.errors?.maxlength) {
-                                <div>
-                                    {{ 'artemisApp.videoUnit.createVideoUnit.descriptionMaxLengthValidationError' | artemisTranslate }}
-                                </div>
+                                <div jhiTranslate="artemisApp.videoUnit.createVideoUnit.descriptionMaxLengthValidationError"></div>
                             }
                         </div>
                     }
@@ -63,7 +57,7 @@
                         </div>
                         <div class="col-1"></div>
                         <div class="col-7">
-                            <label for="urlHelper">{{ 'artemisApp.videoUnit.createVideoUnit.urlVideoHelper' | artemisTranslate }}</label>
+                            <label for="urlHelper" jhiTranslate="artemisApp.videoUnit.createVideoUnit.urlVideoHelper"></label>
                         </div>
                     </div>
                     <div class="row">
@@ -90,29 +84,21 @@
                             @if (sourceControl?.invalid && (sourceControl?.dirty || sourceControl?.touched)) {
                                 <div class="alert alert-danger">
                                     @if (sourceControl?.errors?.required) {
-                                        <div>
-                                            {{ 'artemisApp.videoUnit.createVideoUnit.sourceRequiredValidationError' | artemisTranslate }}
-                                        </div>
+                                        <div jhiTranslate="artemisApp.videoUnit.createVideoUnit.sourceRequiredValidationError"></div>
                                     }
                                     @if (sourceControl?.errors?.invalidVideoUrl) {
-                                        <div>
-                                            {{ 'artemisApp.videoUnit.createVideoUnit.sourceURLValidationError' | artemisTranslate }}
-                                        </div>
+                                        <div jhiTranslate="artemisApp.videoUnit.createVideoUnit.sourceURLValidationError"></div>
                                     }
                                 </div>
                             }
                         </div>
                         <div class="col-1"></div>
                         <div class="col-7">
-                            <small id="urlHelperExplanation" class="form-text text-body-secondary">{{
-                                'artemisApp.videoUnit.createVideoUnit.urlHelperPlaceholder' | artemisTranslate
-                            }}</small>
+                            <small id="urlHelperExplanation" class="form-text text-body-secondary" jhiTranslate="artemisApp.videoUnit.createVideoUnit.urlHelperPlaceholder"></small>
                             @if (urlHelperControl?.invalid && (urlHelperControl?.dirty || urlHelperControl?.touched)) {
                                 <div class="alert alert-danger">
                                     @if (urlHelperControl?.errors?.invalidVideoUrl) {
-                                        <div>
-                                            {{ 'artemisApp.videoUnit.createVideoUnit.urlHelperValidationError' | artemisTranslate }}
-                                        </div>
+                                        <div jhiTranslate="artemisApp.videoUnit.createVideoUnit.urlHelperValidationError"></div>
                                     }
                                 </div>
                             }
@@ -122,7 +108,7 @@
                 <div class="row">
                     <div class="col-12">
                         <button id="submitButton" class="btn btn-primary" type="submit" [disabled]="!isSubmitPossible">
-                            <span>{{ 'entity.action.submit' | artemisTranslate }}</span>
+                            <span jhiTranslate="entity.action.submit"></span>
                         </button>
                         @if (hasCancelButton) {
                             <button type="button" (click)="cancelForm()" class="btn btn-default">
diff --git a/src/main/webapp/app/lecture/lecture-update.component.html b/src/main/webapp/app/lecture/lecture-update.component.html
index 25a522f09f4f..9ba49083c37c 100644
--- a/src/main/webapp/app/lecture/lecture-update.component.html
+++ b/src/main/webapp/app/lecture/lecture-update.component.html
@@ -72,22 +72,22 @@ <h2 id="jhi-lecture-heading" jhiTranslate="artemisApp.lecture.home.createOrEditL
                 </div>
                 <div class="py-2">
                     <input class="form-check-input" type="checkbox" name="processUnit" (change)="onSelectProcessUnit()" [disabled]="editForm.form.invalid || isSaving" />
-                    <span class="px-1">{{ 'artemisApp.attachmentUnit.createAttachmentUnits.processAutomatically' | artemisTranslate }}</span>
+                    <span class="px-1" jhiTranslate="artemisApp.attachmentUnit.createAttachmentUnits.processAutomatically"></span>
                     <fa-icon [icon]="faQuestionCircle" [ngbTooltip]="'artemisApp.attachmentUnit.createAttachmentUnits.lectureFileToolTip' | artemisTranslate" />
                 </div>
                 @if (processUnitMode) {
                     <div class="alert alert-warning mt-3">
                         <ul class="informative-text">
-                            <li>{{ 'artemisApp.attachmentUnit.createAttachmentUnits.informativeText.firstLine' | artemisTranslate }}</li>
-                            <li>{{ 'artemisApp.attachmentUnit.createAttachmentUnits.informativeText.secondLine' | artemisTranslate }}</li>
-                            <li>{{ 'artemisApp.attachmentUnit.createAttachmentUnits.informativeText.note' | artemisTranslate }}</li>
+                            <li jhiTranslate="artemisApp.attachmentUnit.createAttachmentUnits.informativeText.firstLine"></li>
+                            <li jhiTranslate="artemisApp.attachmentUnit.createAttachmentUnits.informativeText.secondLine"></li>
+                            <li jhiTranslate="artemisApp.attachmentUnit.createAttachmentUnits.informativeText.note"></li>
                         </ul>
                     </div>
                 }
                 @if (processUnitMode) {
                     <div class="form-group">
                         <label>{{ 'artemisApp.attachmentUnit.createAttachmentUnit.file' | artemisTranslate }}*</label>
-                        <small id="fileHelp" class="form-text text-body-secondary">{{ 'artemisApp.attachmentUnit.createAttachmentUnit.fileLimitation' | artemisTranslate }} </small>
+                        <small id="fileHelp" class="form-text text-body-secondary" jhiTranslate="artemisApp.attachmentUnit.createAttachmentUnit.fileLimitation"></small>
                         <fa-icon
                             [icon]="faQuestionCircle"
                             [ngbTooltip]="'artemisApp.attachmentUnit.createAttachmentUnit.fileLimitationTooltip' | artemisTranslate: { extensions: allowedFileExtensions }"
@@ -107,9 +107,7 @@ <h2 id="jhi-lecture-heading" jhiTranslate="artemisApp.lecture.home.createOrEditL
                             </div>
                         </div>
                         @if (!fileName && fileInputTouched) {
-                            <div class="alert alert-danger">
-                                {{ 'artemisApp.attachmentUnit.createAttachmentUnit.fileRequiredValidationError' | artemisTranslate }}
-                            </div>
+                            <div class="alert alert-danger" jhiTranslate="artemisApp.attachmentUnit.createAttachmentUnit.fileRequiredValidationError"></div>
                         }
                     </div>
                 }
diff --git a/src/main/webapp/app/lecture/lecture.component.html b/src/main/webapp/app/lecture/lecture.component.html
index e507242d7a13..68a82448b85e 100644
--- a/src/main/webapp/app/lecture/lecture.component.html
+++ b/src/main/webapp/app/lecture/lecture.component.html
@@ -16,7 +16,7 @@ <h2 id="page-heading">
                         id="filter-dropdown-button"
                     >
                         <fa-icon [icon]="faFilter" />
-                        <span class="d-s-none d-md-inline">{{ 'artemisApp.courseOverview.exerciseList.filter' | artemisTranslate: { num: activeFilters.size } }}</span>
+                        <span class="d-s-none d-md-inline" jhiTranslate="artemisApp.courseOverview.exerciseList.filter" [translateValues]="{ num: activeFilters.size }"></span>
                     </button>
                     <ul ngbDropdownMenu class="checkbox-menu text-nowrap pe-2" aria-labelledby="filter-dropdown-button">
                         <li>
diff --git a/src/main/webapp/app/lecture/wizard-mode/lecture-wizard-competencies.component.html b/src/main/webapp/app/lecture/wizard-mode/lecture-wizard-competencies.component.html
index adfb4aa9ede0..e7e90982591c 100644
--- a/src/main/webapp/app/lecture/wizard-mode/lecture-wizard-competencies.component.html
+++ b/src/main/webapp/app/lecture/wizard-mode/lecture-wizard-competencies.component.html
@@ -12,10 +12,10 @@ <h1><span jhiTranslate="artemisApp.lecture.wizardMode.steps.competenciesStepTitl
                             <tr>
                                 <th><span>ID</span></th>
                                 <th>
-                                    <span>{{ 'artemisApp.lecture.wizardMode.competencyTitle' | artemisTranslate }}</span>
+                                    <span jhiTranslate="artemisApp.lecture.wizardMode.competencyTitle"></span>
                                 </th>
                                 <th>
-                                    <span>{{ 'artemisApp.lecture.wizardMode.competencyConnectedUnits' | artemisTranslate }}</span>
+                                    <span jhiTranslate="artemisApp.lecture.wizardMode.competencyConnectedUnits"></span>
                                 </th>
                                 <th></th>
                             </tr>
@@ -26,9 +26,7 @@ <h1><span jhiTranslate="artemisApp.lecture.wizardMode.steps.competenciesStepTitl
                                     <td>
                                         {{ competency.id }}
                                         @if (currentlyProcessedCompetency?.id === competency?.id) {
-                                            <div class="edit-overlay">
-                                                {{ 'artemisApp.lecture.attachments.isBeingEdited' | artemisTranslate }}
-                                            </div>
+                                            <div class="edit-overlay" jhiTranslate="artemisApp.lecture.attachments.isBeingEdited"></div>
                                         }
                                     </td>
                                     <td>{{ competency.title }}</td>
@@ -65,7 +63,7 @@ <h1><span jhiTranslate="artemisApp.lecture.wizardMode.steps.competenciesStepTitl
     @if (isLoadingCompetencies) {
         <div class="d-flex justify-content-center">
             <div class="spinner-border" role="status">
-                <span class="sr-only">{{ 'loading' | artemisTranslate }}</span>
+                <span class="sr-only" jhiTranslate="loading"></span>
             </div>
         </div>
     }
@@ -79,7 +77,7 @@ <h1><span jhiTranslate="artemisApp.lecture.wizardMode.steps.competenciesStepTitl
     @if (isLoadingCompetencyForm) {
         <div class="d-flex justify-content-center">
             <div class="spinner-border" role="status">
-                <span class="sr-only">{{ 'loading' | artemisTranslate }}</span>
+                <span class="sr-only" jhiTranslate="loading"></span>
             </div>
         </div>
     }
diff --git a/src/main/webapp/app/overview/course-competencies/course-competencies-details.component.html b/src/main/webapp/app/overview/course-competencies/course-competencies-details.component.html
index bcb3067b9621..57a6aba8aafd 100644
--- a/src/main/webapp/app/overview/course-competencies/course-competencies-details.component.html
+++ b/src/main/webapp/app/overview/course-competencies/course-competencies-details.component.html
@@ -2,7 +2,7 @@
 @if (isLoading) {
     <div class="d-flex justify-content-center">
         <div class="spinner-border" role="status">
-            <span class="sr-only">{{ 'loading' | artemisTranslate }}</span>
+            <span class="sr-only" jhiTranslate="loading"></span>
         </div>
     </div>
 }
@@ -33,7 +33,7 @@ <h3 class="mb-0">
                 </div>
                 @if (competency.softDueDate) {
                     <div class="col-auto text-right">
-                        <span style="vertical-align: middle"> {{ 'artemisApp.competency.competencyCard.softDueDate' | artemisTranslate }} </span>
+                        <span style="vertical-align: middle" jhiTranslate="artemisApp.competency.competencyCard.softDueDate"></span>
                         <span class="badge" [ngClass]="softDueDatePassed ? 'bg-danger' : 'bg-success'" id="date-badge"> {{ competency.softDueDate | artemisTimeAgo }} </span>
                     </div>
                 }
@@ -41,7 +41,7 @@ <h3 class="mb-0">
                     @if (competency.course?.isAtLeastInstructor) {
                         <a class="btn btn-sm btn-warning float-end" [routerLink]="['/course-management', courseId, 'competency-management', competency.id, 'edit']">
                             <fa-icon [icon]="faPencilAlt" />
-                            <span class="d-none d-md-inline">{{ 'entity.action.edit' | artemisTranslate }}</span>
+                            <span class="d-none d-md-inline" jhiTranslate="entity.action.edit"></span>
                         </a>
                     }
                 </div>
diff --git a/src/main/webapp/app/overview/course-competencies/course-competencies.component.html b/src/main/webapp/app/overview/course-competencies/course-competencies.component.html
index 5525e504c070..2e478331ff8f 100644
--- a/src/main/webapp/app/overview/course-competencies/course-competencies.component.html
+++ b/src/main/webapp/app/overview/course-competencies/course-competencies.component.html
@@ -38,13 +38,13 @@
         }
     </div>
     <div class="col-12 col-lg-3 offset-lg-1">
-        <h3 class="mt-3">{{ 'artemisApp.competency.table.panelHeader' | artemisTranslate }}</h3>
+        <h3 class="mt-3" jhiTranslate="artemisApp.competency.table.panelHeader"></h3>
         <span class="badge bg-dark">{{ countMasteredCompetencies }} / {{ countCompetencies }}</span> {{ 'artemisApp.competency.mastered' | artemisTranslate }}
         <dl class="mt-3">
-            <dt>{{ 'artemisApp.competency.progress' | artemisTranslate }}</dt>
-            <dd>{{ 'artemisApp.competency.progressDescription' | artemisTranslate }}</dd>
-            <dt>{{ 'artemisApp.competency.mastery' | artemisTranslate }}</dt>
-            <dd>{{ 'artemisApp.competency.masteryDescription' | artemisTranslate }}</dd>
+            <dt jhiTranslate="artemisApp.competency.progress"></dt>
+            <dd jhiTranslate="artemisApp.competency.progressDescription"></dd>
+            <dt jhiTranslate="artemisApp.competency.mastery"></dt>
+            <dd jhiTranslate="artemisApp.competency.masteryDescription"></dd>
         </dl>
     </div>
 </div>
diff --git a/src/main/webapp/app/overview/course-conversations/code-of-conduct/course-conversations-code-of-conduct.component.html b/src/main/webapp/app/overview/course-conversations/code-of-conduct/course-conversations-code-of-conduct.component.html
index fa89913e8392..7972f8cd36fe 100644
--- a/src/main/webapp/app/overview/course-conversations/code-of-conduct/course-conversations-code-of-conduct.component.html
+++ b/src/main/webapp/app/overview/course-conversations/code-of-conduct/course-conversations-code-of-conduct.component.html
@@ -1,4 +1,4 @@
-<h3>{{ 'artemisApp.codeOfConduct.title' | artemisTranslate }}</h3>
+<h3 jhiTranslate="artemisApp.codeOfConduct.title"></h3>
 <div [innerHTML]="course.courseInformationSharingMessagingCodeOfConduct || '' | htmlForMarkdown"></div>
 <ul>
     @for (user of responsibleContacts; track user) {
diff --git a/src/main/webapp/app/overview/course-conversations/course-conversations.component.html b/src/main/webapp/app/overview/course-conversations/course-conversations.component.html
index a042cd0ee25d..52cf58d80242 100644
--- a/src/main/webapp/app/overview/course-conversations/course-conversations.component.html
+++ b/src/main/webapp/app/overview/course-conversations/course-conversations.component.html
@@ -17,9 +17,7 @@
     @if (course && isCodeOfConductAccepted === false) {
         <div class="module-bg px-3 py-3 code-of-conduct">
             <jhi-course-conversations-code-of-conduct [course]="course!" />
-            <button id="acceptCodeOfConductButton" class="btn btn-primary" type="button" (click)="acceptCodeOfConduct()">
-                {{ 'artemisApp.codeOfConduct.accept' | artemisTranslate }}
-            </button>
+            <button id="acceptCodeOfConductButton" class="btn btn-primary" type="button" (click)="acceptCodeOfConduct()" jhiTranslate="artemisApp.codeOfConduct.accept"></button>
         </div>
     }
     @if (isCodeOfConductAccepted && isServiceSetUp && course) {
diff --git a/src/main/webapp/app/overview/course-conversations/course-wide-search/course-wide-search.component.html b/src/main/webapp/app/overview/course-conversations/course-wide-search/course-wide-search.component.html
index ce1e3506941d..f4a255b49422 100644
--- a/src/main/webapp/app/overview/course-conversations/course-wide-search/course-wide-search.component.html
+++ b/src/main/webapp/app/overview/course-conversations/course-wide-search/course-wide-search.component.html
@@ -29,11 +29,11 @@ <h4 class="d-inline-block rounded p-1 info">
                                 id="filterToUnresolved"
                                 (change)="onSelectContext()"
                             />
-                            <label for="filterToUnresolved" class="p-0">{{ 'artemisApp.metis.overview.filterToUnresolved' | artemisTranslate }}</label>
+                            <label for="filterToUnresolved" class="p-0" jhiTranslate="artemisApp.metis.overview.filterToUnresolved"></label>
                         </div>
                         <div class="col-auto p-0 ps-2">
                             <input class="form-check-input" type="checkbox" formControlName="filterToOwn" name="filterToOwn" id="filterToOwn" (change)="onSelectContext()" />
-                            <label for="filterToOwn" class="p-0">{{ 'artemisApp.metis.overview.filterToOwn' | artemisTranslate }}</label>
+                            <label for="filterToOwn" class="p-0" jhiTranslate="artemisApp.metis.overview.filterToOwn"></label>
                         </div>
                         <div class="col-auto p-0 ps-2">
                             <input
@@ -44,12 +44,12 @@ <h4 class="d-inline-block rounded p-1 info">
                                 id="filterToAnsweredOrReacted"
                                 (change)="onSelectContext()"
                             />
-                            <label for="filterToAnsweredOrReacted" class="p-0">{{ 'artemisApp.metis.overview.filterToAnsweredOrReacted' | artemisTranslate }}</label>
+                            <label for="filterToAnsweredOrReacted" class="p-0" jhiTranslate="artemisApp.metis.overview.filterToAnsweredOrReacted"></label>
                         </div>
                     </div>
                     <!-- sort dropdown -->
                     <div class="d-flex">
-                        <div class="col-auto p-0">{{ 'artemisApp.metis.overview.sortedByDate' | artemisTranslate }}</div>
+                        <div class="col-auto p-0" jhiTranslate="artemisApp.metis.overview.sortedByDate"></div>
                         <div class="col-auto p-0 clickable" role="button" (click)="onChangeSortDir()">
                             <fa-icon
                                 [icon]="sortingOrder === SortDirection.ASCENDING ? faLongArrowAltUp : faLongArrowAltDown"
diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/channels-create-dialog/channel-form/channel-form.component.html b/src/main/webapp/app/overview/course-conversations/dialogs/channels-create-dialog/channel-form/channel-form.component.html
index f34ba20f5391..194d404fc58b 100644
--- a/src/main/webapp/app/overview/course-conversations/dialogs/channels-create-dialog/channel-form/channel-form.component.html
+++ b/src/main/webapp/app/overview/course-conversations/dialogs/channels-create-dialog/channel-form/channel-form.component.html
@@ -4,7 +4,7 @@
             <form [formGroup]="form" (ngSubmit)="submitForm()">
                 <!-- CHANNEL NAME -->
                 <div class="form-group">
-                    <label class="required" for="name">{{ 'artemisApp.dialogs.createChannel.channelForm.nameInput.label' | artemisTranslate }}</label>
+                    <label class="required" for="name" jhiTranslate="artemisApp.dialogs.createChannel.channelForm.nameInput.label"></label>
                     <div class="input-group">
                         <span class="input-group-text">
                             <jhi-channel-icon [isPublic]="isPublicControl?.value" [isAnnouncementChannel]="isisAnnouncementChannelControl?.value" />
@@ -20,36 +20,30 @@
                     @if (nameControl?.invalid && (nameControl?.dirty || nameControl?.touched)) {
                         <div class="alert alert-danger">
                             @if (nameControl?.errors?.required) {
-                                <div>
-                                    {{ 'artemisApp.dialogs.createChannel.channelForm.nameInput.requiredValidationError' | artemisTranslate }}
-                                </div>
+                                <div jhiTranslate="artemisApp.dialogs.createChannel.channelForm.nameInput.requiredValidationError"></div>
                             }
                             @if (nameControl?.errors?.maxlength) {
-                                <div>
-                                    {{ 'artemisApp.dialogs.createChannel.channelForm.nameInput.maxLengthValidationError' | artemisTranslate: { max: '30' } }}
-                                </div>
+                                <div jhiTranslate="artemisApp.dialogs.createChannel.channelForm.nameInput.maxLengthValidationError" [translateValues]="{ max: '30' }"></div>
                             }
                             @if (!nameControl?.errors?.required && !nameControl?.errors?.maxlength && nameControl?.errors?.pattern) {
-                                <div>
-                                    {{ 'artemisApp.dialogs.createChannel.channelForm.nameInput.regexValidationError' | artemisTranslate }}
-                                </div>
+                                <div jhiTranslate="artemisApp.dialogs.createChannel.channelForm.nameInput.regexValidationError"></div>
                             }
                         </div>
                     }
                 </div>
                 <!-- DESCRIPTION -->
                 <div class="form-group">
-                    <label for="description">{{ 'artemisApp.dialogs.createChannel.channelForm.descriptionInput.label' | artemisTranslate }}</label>
+                    <label for="description" jhiTranslate="artemisApp.dialogs.createChannel.channelForm.descriptionInput.label"></label>
                     <input type="text" class="form-control" id="description" formControlName="description" />
-                    <small id="descriptionHelp" class="form-text text-body-secondary">{{
-                        'artemisApp.dialogs.createChannel.channelForm.descriptionInput.descriptionHelp' | artemisTranslate
-                    }}</small>
+                    <small
+                        id="descriptionHelp"
+                        class="form-text text-body-secondary"
+                        jhiTranslate="artemisApp.dialogs.createChannel.channelForm.descriptionInput.descriptionHelp"
+                    ></small>
                     @if (descriptionControl?.invalid && (descriptionControl?.dirty || descriptionControl?.touched)) {
                         <div class="alert alert-danger">
                             @if (descriptionControl?.errors?.maxlength) {
-                                <div>
-                                    {{ 'artemisApp.dialogs.createChannel.channelForm.descriptionInput.maxLengthValidationError' | artemisTranslate: { max: '250' } }}
-                                </div>
+                                <div jhiTranslate="artemisApp.dialogs.createChannel.channelForm.descriptionInput.maxLengthValidationError" [translateValues]="{ max: '250' }"></div>
                             }
                         </div>
                     }
@@ -57,45 +51,49 @@
                 <!--Public Channel / Private Channel -->
                 <div>
                     <div class="form-group">
-                        <label class="d-block">{{ 'artemisApp.dialogs.createChannel.channelForm.isPublicInput.label' | artemisTranslate }}</label>
+                        <label class="d-block" jhiTranslate="artemisApp.dialogs.createChannel.channelForm.isPublicInput.label"></label>
                         <div class="btn-group" role="group">
                             <input formControlName="isPublic" type="radio" class="btn-check" id="public" autocomplete="off" checked [value]="true" />
-                            <label class="btn btn-outline-secondary" for="public">{{
-                                'artemisApp.dialogs.createChannel.channelForm.isPublicInput.public' | artemisTranslate
-                            }}</label>
+                            <label class="btn btn-outline-secondary" for="public" jhiTranslate="artemisApp.dialogs.createChannel.channelForm.isPublicInput.public"></label>
                             <input formControlName="isPublic" type="radio" class="btn-check" id="private" autocomplete="off" [value]="false" />
-                            <label class="btn btn-outline-secondary" for="private">{{
-                                'artemisApp.dialogs.createChannel.channelForm.isPublicInput.private' | artemisTranslate
-                            }}</label>
+                            <label class="btn btn-outline-secondary" for="private" jhiTranslate="artemisApp.dialogs.createChannel.channelForm.isPublicInput.private"></label>
                         </div>
-                        <small id="isPublicHelp" class="form-text text-body-secondary d-block">{{
-                            'artemisApp.dialogs.createChannel.channelForm.isPublicInput.explanation' | artemisTranslate
-                        }}</small>
+                        <small
+                            id="isPublicHelp"
+                            class="form-text text-body-secondary d-block"
+                            jhiTranslate="artemisApp.dialogs.createChannel.channelForm.isPublicInput.explanation"
+                        ></small>
                     </div>
                 </div>
                 <!--Announcement Channel -->
                 <div>
                     <div class="form-group">
-                        <label class="d-block">{{ 'artemisApp.dialogs.createChannel.channelForm.isAnnouncementChannelInput.label' | artemisTranslate }}</label>
+                        <label class="d-block" jhiTranslate="artemisApp.dialogs.createChannel.channelForm.isAnnouncementChannelInput.label"></label>
                         <div class="btn-group" role="group">
                             <input formControlName="isAnnouncementChannel" type="radio" class="btn-check" id="isAnnouncementChannel" autocomplete="off" checked [value]="true" />
-                            <label class="btn btn-outline-secondary" for="isAnnouncementChannel">{{
-                                'artemisApp.dialogs.createChannel.channelForm.isAnnouncementChannelInput.true' | artemisTranslate
-                            }}</label>
+                            <label
+                                class="btn btn-outline-secondary"
+                                for="isAnnouncementChannel"
+                                jhiTranslate="artemisApp.dialogs.createChannel.channelForm.isAnnouncementChannelInput.true"
+                            ></label>
                             <input formControlName="isAnnouncementChannel" type="radio" class="btn-check" id="isNotAnnouncementChannel" autocomplete="off" [value]="false" />
-                            <label class="btn btn-outline-secondary" for="isNotAnnouncementChannel">{{
-                                'artemisApp.dialogs.createChannel.channelForm.isAnnouncementChannelInput.false' | artemisTranslate
-                            }}</label>
+                            <label
+                                class="btn btn-outline-secondary"
+                                for="isNotAnnouncementChannel"
+                                jhiTranslate="artemisApp.dialogs.createChannel.channelForm.isAnnouncementChannelInput.false"
+                            ></label>
                         </div>
-                        <small id="isAnnouncementChannelHelp" class="form-text text-body-secondary d-block">{{
-                            'artemisApp.dialogs.createChannel.channelForm.isAnnouncementChannelInput.explanation' | artemisTranslate
-                        }}</small>
+                        <small
+                            id="isAnnouncementChannelHelp"
+                            class="form-text text-body-secondary d-block"
+                            jhiTranslate="artemisApp.dialogs.createChannel.channelForm.isAnnouncementChannelInput.explanation"
+                        ></small>
                     </div>
                 </div>
                 <div class="row">
                     <div class="col-12 text-end">
                         <button type="submit" id="submitButton" [disabled]="!isSubmitPossible" class="btn btn-primary">
-                            <span>{{ 'artemisApp.dialogs.createChannel.channelForm.createButton' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.dialogs.createChannel.channelForm.createButton"></span>
                         </button>
                     </div>
                 </div>
diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/channels-create-dialog/channels-create-dialog.component.html b/src/main/webapp/app/overview/course-conversations/dialogs/channels-create-dialog/channels-create-dialog.component.html
index c661c2315af0..cd5b295812a3 100644
--- a/src/main/webapp/app/overview/course-conversations/dialogs/channels-create-dialog/channels-create-dialog.component.html
+++ b/src/main/webapp/app/overview/course-conversations/dialogs/channels-create-dialog/channels-create-dialog.component.html
@@ -13,9 +13,7 @@ <h4 class="modal-title">
             <button type="button" class="btn-close" (click)="dismiss()"></button>
         </div>
         <div class="modal-body">
-            <p>
-                {{ 'artemisApp.dialogs.createChannel.description' | artemisTranslate }}
-            </p>
+            <p jhiTranslate="artemisApp.dialogs.createChannel.description"></p>
             <jhi-channel-form
                 (channelTypeChanged)="onChannelTypeChanged($event)"
                 (isAnnouncementChannelChanged)="onIsAnnouncementChannelChanged($event)"
diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/channels-overview-dialog/channel-item/channel-item.component.html b/src/main/webapp/app/overview/course-conversations/dialogs/channels-overview-dialog/channel-item/channel-item.component.html
index b3c8b0699470..29888c66fa72 100644
--- a/src/main/webapp/app/overview/course-conversations/dialogs/channels-overview-dialog/channel-item/channel-item.component.html
+++ b/src/main/webapp/app/overview/course-conversations/dialogs/channels-overview-dialog/channel-item/channel-item.component.html
@@ -18,28 +18,42 @@
             }
             @if (channel.tutorialGroupId && channel.tutorialGroupTitle) {
                 <div>
-                    <span class="badge bg-info rounded-pill">{{
-                        'artemisApp.entities.tutorialGroup.channelReverse' | artemisTranslate: { title: channel.tutorialGroupTitle }
-                    }}</span>
+                    <span
+                        class="badge bg-info rounded-pill"
+                        jhiTranslate="artemisApp.entities.tutorialGroup.channelReverse"
+                        [translateValues]="{ title: channel.tutorialGroupTitle }"
+                    ></span>
                 </div>
             }
         </div>
         <div class="interaction">
             @if (canJoinChannel(channel)) {
-                <button [id]="'register' + channel.id" type="button" class="btn btn-primary" (click)="emitChannelAction($event, 'register')">
-                    {{ 'artemisApp.dialogs.channelOverview.actions.join' | artemisTranslate }}
-                </button>
+                <button
+                    [id]="'register' + channel.id"
+                    type="button"
+                    class="btn btn-primary"
+                    (click)="emitChannelAction($event, 'register')"
+                    jhiTranslate="artemisApp.dialogs.channelOverview.actions.join"
+                ></button>
                 <!--ToDo:  Introduce method to view public channel even if no participant maybe hacky around with visitor status or something? -->
             }
             @if (!!channel.isMember) {
-                <button [id]="'view' + channel.id" type="button" class="btn btn-secondary" (click)="emitChannelAction($event, 'view')">
-                    {{ 'artemisApp.dialogs.channelOverview.actions.view' | artemisTranslate }}
-                </button>
+                <button
+                    [id]="'view' + channel.id"
+                    type="button"
+                    class="btn btn-secondary"
+                    (click)="emitChannelAction($event, 'view')"
+                    jhiTranslate="artemisApp.dialogs.channelOverview.actions.view"
+                ></button>
             }
             @if (canLeaveConversation(channel)) {
-                <button [id]="'deregister' + channel.id" type="button" class="btn btn-danger" (click)="emitChannelAction($event, 'deregister')">
-                    {{ 'artemisApp.dialogs.channelOverview.actions.leave' | artemisTranslate }}
-                </button>
+                <button
+                    [id]="'deregister' + channel.id"
+                    type="button"
+                    class="btn btn-danger"
+                    (click)="emitChannelAction($event, 'deregister')"
+                    jhiTranslate="artemisApp.dialogs.channelOverview.actions.leave"
+                ></button>
             }
         </div>
     </div>
diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/channels-overview-dialog/channels-overview-dialog.component.html b/src/main/webapp/app/overview/course-conversations/dialogs/channels-overview-dialog/channels-overview-dialog.component.html
index c0bb68d5c04b..b19e105f22cd 100644
--- a/src/main/webapp/app/overview/course-conversations/dialogs/channels-overview-dialog/channels-overview-dialog.component.html
+++ b/src/main/webapp/app/overview/course-conversations/dialogs/channels-overview-dialog/channels-overview-dialog.component.html
@@ -26,7 +26,7 @@ <h4 class="modal-title">
                     <div class="form-group mt-4">
                         <div (click)="otherChannelsAreCollapsed = !otherChannelsAreCollapsed" class="other-channels">
                             <fa-icon [icon]="faChevronRight" [rotate]="!otherChannelsAreCollapsed ? 90 : undefined" />
-                            <span class="h5">{{ 'artemisApp.dialogs.channelOverview.otherChannels' | artemisTranslate }}</span>
+                            <span class="h5" jhiTranslate="artemisApp.dialogs.channelOverview.otherChannels"></span>
                         </div>
                         <div [(ngbCollapse)]="otherChannelsAreCollapsed">
                             <div class="table-wrapper-scroll-y scrollbar mt-2">
@@ -44,9 +44,13 @@ <h4 class="modal-title">
             </div>
             <div class="modal-footer justify-content-between">
                 @if (createChannelFn && canCreateChannel(course)) {
-                    <button type="button" class="btn btn-secondary" (click)="openCreateChannelDialog($event)" id="createChannel">
-                        {{ 'artemisApp.dialogs.channelOverview.createChannelButton' | artemisTranslate }}
-                    </button>
+                    <button
+                        type="button"
+                        class="btn btn-secondary"
+                        (click)="openCreateChannelDialog($event)"
+                        id="createChannel"
+                        jhiTranslate="artemisApp.dialogs.channelOverview.createChannelButton"
+                    ></button>
                 }
             </div>
         </div>
diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-add-users-dialog/add-users-form/conversation-add-users-form.component.html b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-add-users-dialog/add-users-form/conversation-add-users-form.component.html
index dd050ac7ba18..b22435bd18ab 100644
--- a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-add-users-dialog/add-users-form/conversation-add-users-form.component.html
+++ b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-add-users-dialog/add-users-form/conversation-add-users-form.component.html
@@ -2,9 +2,7 @@
     <div class="row">
         <div class="col-12">
             @if (maxSelectable !== undefined) {
-                <div class="alert alert-info">
-                    {{ 'artemisApp.dialogs.addUsers.addUsersForm.maxUsersNote' | artemisTranslate: { max: maxSelectable } }}
-                </div>
+                <div class="alert alert-info" jhiTranslate="artemisApp.dialogs.addUsers.addUsersForm.maxUsersNote" [translateValues]="{ max: maxSelectable }"></div>
             }
             <div [hidden]="maxSelectable === 0">
                 <div class="mode-switch" [hidden]="!getAsChannel(activeConversation)">
@@ -19,9 +17,9 @@
                                 [value]="'individual'"
                                 [ngModelOptions]="{ standalone: true }"
                             />
-                            <label class="btn btn-secondary" for="individual">{{ 'artemisApp.dialogs.addUsers.addUsersForm.addIndividualUsers' | artemisTranslate }}</label>
+                            <label class="btn btn-secondary" for="individual" jhiTranslate="artemisApp.dialogs.addUsers.addUsersForm.addIndividualUsers"></label>
                             <input [(ngModel)]="mode" type="radio" class="btn-check" id="group" autocomplete="off" [value]="'group'" [ngModelOptions]="{ standalone: true }" />
-                            <label class="btn btn-secondary" for="group">{{ 'artemisApp.dialogs.addUsers.addUsersForm.addWholeGroups' | artemisTranslate }}</label>
+                            <label class="btn btn-secondary" for="group" jhiTranslate="artemisApp.dialogs.addUsers.addUsersForm.addWholeGroups"></label>
                         </div>
                     </div>
                 </div>
@@ -36,14 +34,10 @@
                             @if (selectedUsersControl?.invalid && (selectedUsersControl?.dirty || selectedUsersControl?.touched)) {
                                 <div class="alert alert-danger">
                                     @if (selectedUsersControl?.errors?.required) {
-                                        <div>
-                                            {{ 'artemisApp.dialogs.addUsers.addUsersForm.requiredError' | artemisTranslate }}
-                                        </div>
+                                        <div jhiTranslate="artemisApp.dialogs.addUsers.addUsersForm.requiredError"></div>
                                     }
                                     @if (selectedUsersControl?.errors?.maxlength) {
-                                        <div>
-                                            {{ 'artemisApp.dialogs.addUsers.addUsersForm.maxError' | artemisTranslate: { max: maxSelectable } }}
-                                        </div>
+                                        <div jhiTranslate="artemisApp.dialogs.addUsers.addUsersForm.maxError" [translateValues]="{ max: maxSelectable }"></div>
                                     }
                                 </div>
                             }
@@ -53,22 +47,22 @@
                         <div class="col-12">
                             <div class="form-check form-check-inline">
                                 <input class="form-check-input" type="checkbox" id="allStudents" formControlName="addAllStudents" />
-                                <label class="form-check-label" for="allStudents">{{ 'artemisApp.dialogs.addUsers.addUsersForm.addAllStudents' | artemisTranslate }}</label>
+                                <label class="form-check-label" for="allStudents" jhiTranslate="artemisApp.dialogs.addUsers.addUsersForm.addAllStudents"></label>
                             </div>
                             <div class="form-check form-check-inline">
                                 <input class="form-check-input" type="checkbox" id="allTutors" formControlName="addAllTutors" />
-                                <label class="form-check-label" for="allTutors">{{ 'artemisApp.dialogs.addUsers.addUsersForm.addAllTutors' | artemisTranslate }}</label>
+                                <label class="form-check-label" for="allTutors" jhiTranslate="artemisApp.dialogs.addUsers.addUsersForm.addAllTutors"></label>
                             </div>
                             <div class="form-check form-check-inline">
                                 <input class="form-check-input" type="checkbox" id="allInstructors" formControlName="addAllInstructors" />
-                                <label class="form-check-label" for="allInstructors">{{ 'artemisApp.dialogs.addUsers.addUsersForm.addAllInstructors' | artemisTranslate }}</label>
+                                <label class="form-check-label" for="allInstructors" jhiTranslate="artemisApp.dialogs.addUsers.addUsersForm.addAllInstructors"></label>
                             </div>
                         </div>
                     </div>
                     <div class="row">
                         <div class="col-12 text-end">
                             <button type="submit" id="submitButton" [disabled]="!isSubmitPossible" class="btn btn-primary">
-                                <span>{{ 'artemisApp.dialogs.addUsers.addUsersForm.addUsersButton' | artemisTranslate }}</span>
+                                <span jhiTranslate="artemisApp.dialogs.addUsers.addUsersForm.addUsersButton"></span>
                             </button>
                         </div>
                     </div>
diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-add-users-dialog/conversation-add-users-dialog.component.html b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-add-users-dialog/conversation-add-users-dialog.component.html
index 162723705463..32f3096ca9f0 100644
--- a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-add-users-dialog/conversation-add-users-dialog.component.html
+++ b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-add-users-dialog/conversation-add-users-dialog.component.html
@@ -10,9 +10,7 @@ <h4 class="modal-title">
                     </span>
                 }
                 @if (getAsGroupChat(activeConversation)) {
-                    <span>
-                        {{ 'artemisApp.dialogs.addUsers.addUsersToGroupChat' | artemisTranslate }}
-                    </span>
+                    <span jhiTranslate="artemisApp.dialogs.addUsers.addUsersToGroupChat"></span>
                 }
             </h4>
             <button type="button" class="btn-close" (click)="dismiss()"></button>
diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/conversation-detail-dialog.component.html b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/conversation-detail-dialog.component.html
index 7545d6f726a1..bd18770a088c 100644
--- a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/conversation-detail-dialog.component.html
+++ b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/conversation-detail-dialog.component.html
@@ -13,9 +13,14 @@ <h4 class="modal-title">
                 </span>
                 @if (getAsChannel(activeConversation); as channel) {
                     @if (channel.tutorialGroupId && channel.tutorialGroupTitle) {
-                        <a (click)="clear()" class="btn btn-info btn-sm ms-2" [routerLink]="['/courses', course.id, 'tutorial-groups', channel.tutorialGroupId]" role="button">{{
-                            'artemisApp.entities.tutorialGroup.channelReverse' | artemisTranslate: { title: channel.tutorialGroupTitle }
-                        }}</a>
+                        <a
+                            (click)="clear()"
+                            class="btn btn-info btn-sm ms-2"
+                            [routerLink]="['/courses', course.id, 'tutorial-groups', channel.tutorialGroupId]"
+                            role="button"
+                            jhiTranslate="artemisApp.entities.tutorialGroup.channelReverse"
+                            [translateValues]="{ title: channel.tutorialGroupTitle }"
+                        ></a>
                     }
                 }
             </h4>
@@ -24,20 +29,32 @@ <h4 class="modal-title">
         <div>
             <ul class="nav nav-tabs">
                 <li class="nav-item">
-                    <a class="nav-link info-tab" [class.active]="selectedTab === Tabs.INFO" role="button" (click)="selectedTab = Tabs.INFO">
-                        {{ 'artemisApp.dialogs.conversationDetail.tabs.info' | artemisTranslate }}
-                    </a>
+                    <a
+                        class="nav-link info-tab"
+                        [class.active]="selectedTab === Tabs.INFO"
+                        role="button"
+                        (click)="selectedTab = Tabs.INFO"
+                        jhiTranslate="artemisApp.dialogs.conversationDetail.tabs.info"
+                    ></a>
                 </li>
                 <li class="nav-item members-tab">
-                    <a class="nav-link" [class.active]="selectedTab === Tabs.MEMBERS" role="button" (click)="selectedTab = Tabs.MEMBERS">
-                        {{ 'artemisApp.dialogs.conversationDetail.tabs.members' | artemisTranslate }}
-                    </a>
+                    <a
+                        class="nav-link"
+                        [class.active]="selectedTab === Tabs.MEMBERS"
+                        role="button"
+                        (click)="selectedTab = Tabs.MEMBERS"
+                        jhiTranslate="artemisApp.dialogs.conversationDetail.tabs.members"
+                    ></a>
                 </li>
                 @if (!isOneToOneChat(activeConversation)) {
                     <li class="nav-item settings-tab">
-                        <a class="nav-link" [class.active]="selectedTab === Tabs.SETTINGS" role="button" (click)="selectedTab = Tabs.SETTINGS">
-                            {{ 'artemisApp.dialogs.conversationDetail.tabs.settings' | artemisTranslate }}
-                        </a>
+                        <a
+                            class="nav-link"
+                            [class.active]="selectedTab === Tabs.SETTINGS"
+                            role="button"
+                            (click)="selectedTab = Tabs.SETTINGS"
+                            jhiTranslate="artemisApp.dialogs.conversationDetail.tabs.settings"
+                        ></a>
                     </li>
                 }
             </ul>
diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-info/conversation-info.component.html b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-info/conversation-info.component.html
index bc11bb78838f..78984e09adcb 100644
--- a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-info/conversation-info.component.html
+++ b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-info/conversation-info.component.html
@@ -14,14 +14,16 @@
                             value="{{ channelOrGroupChat.name ?? ('artemisApp.dialogs.conversationDetail.infoTab.noName' | artemisTranslate) }}"
                         >
                         </textarea>
-                        <label for="name">{{ 'artemisApp.dialogs.conversationDetail.infoTab.name' | artemisTranslate }}</label>
+                        <label for="name" jhiTranslate="artemisApp.dialogs.conversationDetail.infoTab.name"></label>
                         @if (
                             (isChannel(channelOrGroupChat) && canChangeChannelProperties(channelOrGroupChat)) ||
                             (isGroupChat(channelOrGroupChat) && canChangeGroupChatProperties(channelOrGroupChat))
                         ) {
-                            <button class="action-button right btn btn-link btn-sm" (click)="openEditNameModal($event)">
-                                {{ 'artemisApp.dialogs.conversationDetail.infoTab.editName' | artemisTranslate }}
-                            </button>
+                            <button
+                                class="action-button right btn btn-link btn-sm"
+                                (click)="openEditNameModal($event)"
+                                jhiTranslate="artemisApp.dialogs.conversationDetail.infoTab.editName"
+                            ></button>
                         }
                     </div>
                 </div>
@@ -39,11 +41,13 @@
                             value="{{ channel.topic ?? ('artemisApp.dialogs.conversationDetail.infoTab.noTopic' | artemisTranslate) }}"
                         >
                         </textarea>
-                        <label for="topic">{{ 'artemisApp.dialogs.conversationDetail.infoTab.topic' | artemisTranslate }}</label>
+                        <label for="topic" jhiTranslate="artemisApp.dialogs.conversationDetail.infoTab.topic"></label>
                         @if (canChangeChannelProperties(channel)) {
-                            <button class="action-button right btn btn-link btn-sm" (click)="openEditTopicModal($event)">
-                                {{ 'artemisApp.dialogs.conversationDetail.infoTab.editTopic' | artemisTranslate }}
-                            </button>
+                            <button
+                                class="action-button right btn btn-link btn-sm"
+                                (click)="openEditTopicModal($event)"
+                                jhiTranslate="artemisApp.dialogs.conversationDetail.infoTab.editTopic"
+                            ></button>
                         }
                     </div>
                 </div>
@@ -61,11 +65,13 @@
                             value="{{ channel.description ?? ('artemisApp.dialogs.conversationDetail.infoTab.noDescription' | artemisTranslate) }}"
                         >
                         </textarea>
-                        <label for="description">{{ 'artemisApp.dialogs.conversationDetail.infoTab.description' | artemisTranslate }}</label>
+                        <label for="description" jhiTranslate="artemisApp.dialogs.conversationDetail.infoTab.description"></label>
                         @if (canChangeChannelProperties(channel)) {
-                            <button class="action-button right btn btn-link btn-sm" (click)="openDescriptionTopicModal($event)">
-                                {{ 'artemisApp.dialogs.conversationDetail.infoTab.editDescription' | artemisTranslate }}
-                            </button>
+                            <button
+                                class="action-button right btn btn-link btn-sm"
+                                (click)="openDescriptionTopicModal($event)"
+                                jhiTranslate="artemisApp.dialogs.conversationDetail.infoTab.editDescription"
+                            ></button>
                         }
                     </div>
                 </div>
@@ -73,7 +79,7 @@
             <!-- More Info -->
             <div id="moreinfo-section" class="col-12 info-section">
                 <div>
-                    <h6>{{ 'artemisApp.dialogs.conversationDetail.infoTab.moreInfo' | artemisTranslate }}</h6>
+                    <h6 jhiTranslate="artemisApp.dialogs.conversationDetail.infoTab.moreInfo"></h6>
                 </div>
                 <ul>
                     @if (activeConversation.creator) {
diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.html b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.html
index 53d064bb2901..a481df162d51 100644
--- a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.html
+++ b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.html
@@ -15,19 +15,28 @@
             }
             <div ngbDropdownMenu>
                 @if (canBeRemovedFromConversation) {
-                    <button ngbDropdownItem class="text-danger remove-member" (click)="openRemoveFromConversationDialog($event)">
-                        {{ 'artemisApp.dialogs.conversationDetail.memberTab.memberRow.removeUser' | artemisTranslate }}
-                    </button>
+                    <button
+                        ngbDropdownItem
+                        class="text-danger remove-member"
+                        (click)="openRemoveFromConversationDialog($event)"
+                        jhiTranslate="artemisApp.dialogs.conversationDetail.memberTab.memberRow.removeUser"
+                    ></button>
                 }
                 @if (canBeGrantedChannelModeratorRole) {
-                    <button ngbDropdownItem class="text-danger grant-moderator" (click)="openGrantChannelModeratorRoleDialog($event)">
-                        {{ 'artemisApp.dialogs.conversationDetail.memberTab.memberRow.grantModeratorRole' | artemisTranslate }}
-                    </button>
+                    <button
+                        ngbDropdownItem
+                        class="text-danger grant-moderator"
+                        (click)="openGrantChannelModeratorRoleDialog($event)"
+                        jhiTranslate="artemisApp.dialogs.conversationDetail.memberTab.memberRow.grantModeratorRole"
+                    ></button>
                 }
                 @if (canBeRevokedChannelModeratorRole) {
-                    <button ngbDropdownItem class="text-danger revoke-moderator" (click)="openRevokeChannelModeratorRoleDialog($event)">
-                        {{ 'artemisApp.dialogs.conversationDetail.memberTab.memberRow.revokeModeratorRole' | artemisTranslate }}
-                    </button>
+                    <button
+                        ngbDropdownItem
+                        class="text-danger revoke-moderator"
+                        (click)="openRevokeChannelModeratorRoleDialog($event)"
+                        jhiTranslate="artemisApp.dialogs.conversationDetail.memberTab.memberRow.revokeModeratorRole"
+                    ></button>
                 }
             </div>
         </div>
diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-members.component.html b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-members.component.html
index 91fd0d162bcf..c2184ede4a74 100644
--- a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-members.component.html
+++ b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-members.component.html
@@ -27,25 +27,21 @@
             </div>
             <div class="col-4">
                 <div class="input-group">
-                    <label class="input-group-text" for="searchFilter">{{ 'artemisApp.dialogs.conversationDetail.memberTab.filter' | artemisTranslate }}</label>
+                    <label class="input-group-text" for="searchFilter" jhiTranslate="artemisApp.dialogs.conversationDetail.memberTab.filter"></label>
                     <select (ngModelChange)="onFilterChange($event)" [ngModel]="selectedFilter" class="form-select form-select" id="searchFilter">
-                        <option id="allFilter" [value]="ALL">{{ 'artemisApp.dialogs.conversationDetail.memberTab.allFilter' | artemisTranslate }}</option>
-                        <option id="instructorFilter" [value]="INSTRUCTOR_FILTER_OPTION">
-                            {{ 'artemisApp.dialogs.conversationDetail.memberTab.instructorFilter' | artemisTranslate }}
-                        </option>
-                        <option id="tutorFilter" [value]="TUTOR_FILTER_OPTION">{{ 'artemisApp.dialogs.conversationDetail.memberTab.tutorFilter' | artemisTranslate }}</option>
-                        <option id="studentFilter" [value]="STUDENT_FILTER_OPTION">{{ 'artemisApp.dialogs.conversationDetail.memberTab.studentFilter' | artemisTranslate }}</option>
+                        <option id="allFilter" [value]="ALL" jhiTranslate="artemisApp.dialogs.conversationDetail.memberTab.allFilter"></option>
+                        <option id="instructorFilter" [value]="INSTRUCTOR_FILTER_OPTION" jhiTranslate="artemisApp.dialogs.conversationDetail.memberTab.instructorFilter"></option>
+                        <option id="tutorFilter" [value]="TUTOR_FILTER_OPTION" jhiTranslate="artemisApp.dialogs.conversationDetail.memberTab.tutorFilter"></option>
+                        <option id="studentFilter" [value]="STUDENT_FILTER_OPTION" jhiTranslate="artemisApp.dialogs.conversationDetail.memberTab.studentFilter"></option>
                         @if (isChannel(activeConversation)) {
-                            <option [value]="CHANNEL_MODERATOR_FILTER_OPTION">
-                                {{ 'artemisApp.dialogs.conversationDetail.memberTab.channelModeratorFilter' | artemisTranslate }}
-                            </option>
+                            <option [value]="CHANNEL_MODERATOR_FILTER_OPTION" jhiTranslate="artemisApp.dialogs.conversationDetail.memberTab.channelModeratorFilter"></option>
                         }
                     </select>
                 </div>
             </div>
             @if (isSearching) {
                 <div class="col-12">
-                    <small class="form-text text-body-secondary d-inline-block">{{ 'artemisApp.dialogs.conversationDetail.memberTab.searching' | artemisTranslate }}</small>
+                    <small class="form-text text-body-secondary d-inline-block" jhiTranslate="artemisApp.dialogs.conversationDetail.memberTab.searching"></small>
                 </div>
             }
         </div>
diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-settings/conversation-settings.component.html b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-settings/conversation-settings.component.html
index fb8898763af2..752c1e385261 100644
--- a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-settings/conversation-settings.component.html
+++ b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-settings/conversation-settings.component.html
@@ -4,24 +4,33 @@
             <div class="row settings-container">
                 <div class="col-12 settings-section text-center">
                     @if (canLeaveConversation) {
-                        <button type="button" class="btn btn-danger leave-conversation" (click)="leaveConversation($event)">
-                            {{ 'artemisApp.dialogs.conversationSettings.actions.leave' | artemisTranslate }}
-                        </button>
+                        <button
+                            type="button"
+                            class="btn btn-danger leave-conversation"
+                            (click)="leaveConversation($event)"
+                            jhiTranslate="artemisApp.dialogs.conversationSettings.actions.leave"
+                        ></button>
                     }
                 </div>
                 @if (conversationAsChannel; as channel) {
                     @if (!channel.isArchived && canChangeChannelArchivalState) {
                         <div class="col-12 settings-section text-center">
-                            <button type="button" class="btn btn-danger archive" (click)="openArchivalModal($event)">
-                                {{ 'artemisApp.dialogs.conversationSettings.actions.archiveChannel' | artemisTranslate }}
-                            </button>
+                            <button
+                                type="button"
+                                class="btn btn-danger archive"
+                                (click)="openArchivalModal($event)"
+                                jhiTranslate="artemisApp.dialogs.conversationSettings.actions.archiveChannel"
+                            ></button>
                         </div>
                     }
                     @if (channel.isArchived && canChangeChannelArchivalState) {
                         <div class="col-12 settings-section text-center">
-                            <button type="button" class="btn btn-danger unarchive" (click)="openUnArchivalModal($event)">
-                                {{ 'artemisApp.dialogs.conversationSettings.actions.unarchiveChannel' | artemisTranslate }}
-                            </button>
+                            <button
+                                type="button"
+                                class="btn btn-danger unarchive"
+                                (click)="openUnArchivalModal($event)"
+                                jhiTranslate="artemisApp.dialogs.conversationSettings.actions.unarchiveChannel"
+                            ></button>
                         </div>
                     }
                     @if (canDeleteChannel) {
diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/generic-confirmation-dialog/generic-confirmation-dialog.component.html b/src/main/webapp/app/overview/course-conversations/dialogs/generic-confirmation-dialog/generic-confirmation-dialog.component.html
index 6ff8585d7b43..b6e603c38de9 100644
--- a/src/main/webapp/app/overview/course-conversations/dialogs/generic-confirmation-dialog/generic-confirmation-dialog.component.html
+++ b/src/main/webapp/app/overview/course-conversations/dialogs/generic-confirmation-dialog/generic-confirmation-dialog.component.html
@@ -18,7 +18,7 @@ <h4 class="modal-title">{{ translationKeys.titleKey | artemisTranslate: translat
             }
         </div>
         <div class="modal-footer">
-            <button type="button" class="btn btn-outline-secondary cancel" (click)="clear()">{{ 'entity.action.cancel' | artemisTranslate }}</button>
+            <button type="button" class="btn btn-outline-secondary cancel" (click)="clear()" jhiTranslate="entity.action.cancel"></button>
             <button type="button" class="btn confirm" [class.btn-danger]="isDangerousAction" [class.btn-primary]="!isDangerousAction" (click)="confirm()">
                 {{ translationKeys.confirmButtonKey | artemisTranslate }}
             </button>
diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/generic-update-text-property-dialog/generic-update-text-property-dialog.component.html b/src/main/webapp/app/overview/course-conversations/dialogs/generic-update-text-property-dialog/generic-update-text-property-dialog.component.html
index d32db2260889..1ad09b261236 100644
--- a/src/main/webapp/app/overview/course-conversations/dialogs/generic-update-text-property-dialog/generic-update-text-property-dialog.component.html
+++ b/src/main/webapp/app/overview/course-conversations/dialogs/generic-update-text-property-dialog/generic-update-text-property-dialog.component.html
@@ -38,7 +38,7 @@ <h4 class="modal-title">
                             <div class="row">
                                 <div class="col-12 text-end">
                                     <button type="submit" id="submitButton" [disabled]="!isSubmitPossible" class="btn btn-primary">
-                                        <span>{{ 'entity.action.save' | artemisTranslate }}</span>
+                                        <span jhiTranslate="entity.action.save"></span>
                                     </button>
                                 </div>
                             </div>
diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/group-chat-create-dialog/group-chat-create-dialog.component.html b/src/main/webapp/app/overview/course-conversations/dialogs/group-chat-create-dialog/group-chat-create-dialog.component.html
index 8625d0cc8d3a..d8e0e8a5aa1a 100644
--- a/src/main/webapp/app/overview/course-conversations/dialogs/group-chat-create-dialog/group-chat-create-dialog.component.html
+++ b/src/main/webapp/app/overview/course-conversations/dialogs/group-chat-create-dialog/group-chat-create-dialog.component.html
@@ -2,7 +2,7 @@
     <div>
         <div class="modal-header">
             <h4 class="modal-title">
-                <span> {{ 'artemisApp.dialogs.createGroupChat.title' | artemisTranslate }} </span>
+                <span jhiTranslate="artemisApp.dialogs.createGroupChat.title"></span>
             </h4>
             <button type="button" class="btn-close dismiss" (click)="clear()"></button>
         </div>
@@ -16,21 +16,17 @@ <h4 class="modal-title">
                 @if (selectedUsersControl?.invalid && (selectedUsersControl?.dirty || selectedUsersControl?.touched)) {
                     <div class="alert alert-danger">
                         @if (selectedUsersControl?.errors?.required) {
-                            <div>
-                                {{ 'artemisApp.dialogs.createGroupChat.requiredError' | artemisTranslate }}
-                            </div>
+                            <div jhiTranslate="artemisApp.dialogs.createGroupChat.requiredError"></div>
                         }
                         @if (selectedUsersControl?.errors?.maxlength) {
-                            <div>
-                                {{ 'artemisApp.dialogs.createGroupChat.maxError' | artemisTranslate: { max: 9 } }}
-                            </div>
+                            <div jhiTranslate="artemisApp.dialogs.createGroupChat.maxError" [translateValues]="{ max: 9 }"></div>
                         }
                     </div>
                 }
                 <div class="row mt-3">
                     <div class="col-12 text-end">
                         <button type="submit" id="submitButton" [disabled]="!isSubmitPossible" class="btn btn-primary">
-                            <span>{{ 'artemisApp.dialogs.createGroupChat.confirmButton' | artemisTranslate }}</span>
+                            <span jhiTranslate="artemisApp.dialogs.createGroupChat.confirmButton"></span>
                         </button>
                     </div>
                 </div>
diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/one-to-one-chat-create-dialog/one-to-one-chat-create-dialog.component.html b/src/main/webapp/app/overview/course-conversations/dialogs/one-to-one-chat-create-dialog/one-to-one-chat-create-dialog.component.html
index 5f0b53b0a223..cbe9bcfbf6bb 100644
--- a/src/main/webapp/app/overview/course-conversations/dialogs/one-to-one-chat-create-dialog/one-to-one-chat-create-dialog.component.html
+++ b/src/main/webapp/app/overview/course-conversations/dialogs/one-to-one-chat-create-dialog/one-to-one-chat-create-dialog.component.html
@@ -2,7 +2,7 @@
     <div>
         <div class="modal-header">
             <h4 class="modal-title">
-                <span>{{ 'artemisApp.dialogs.createOneToOneChat.title' | artemisTranslate }}</span>
+                <span jhiTranslate="artemisApp.dialogs.createOneToOneChat.title"></span>
             </h4>
             <button type="button" class="btn-close dismiss" (click)="clear()"></button>
         </div>
diff --git a/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.html b/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.html
index ad47e0362fb6..77c54a91e20f 100644
--- a/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.html
+++ b/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.html
@@ -19,9 +19,13 @@ <h4 class="pointer d-inline-block rounded px-3 py-2 info" (click)="openConversat
             @if (activeConversationAsChannel) {
                 @if (activeConversationAsChannel.tutorialGroupId && activeConversationAsChannel.tutorialGroupTitle) {
                     <div class="p-2">
-                        <a class="btn btn-info" [routerLink]="['/courses', course.id, 'tutorial-groups', activeConversationAsChannel.tutorialGroupId]" role="button">{{
-                            'artemisApp.entities.tutorialGroup.channelReverse' | artemisTranslate: { title: activeConversationAsChannel.tutorialGroupTitle }
-                        }}</a>
+                        <a
+                            class="btn btn-info"
+                            [routerLink]="['/courses', course.id, 'tutorial-groups', activeConversationAsChannel.tutorialGroupId]"
+                            role="button"
+                            jhiTranslate="artemisApp.entities.tutorialGroup.channelReverse"
+                            [translateValues]="{ title: activeConversationAsChannel.tutorialGroupTitle }"
+                        ></a>
                     </div>
                 }
             }
diff --git a/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.html b/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.html
index 37468268ca6e..373d7b8d9694 100644
--- a/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.html
+++ b/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.html
@@ -7,7 +7,7 @@
                     <div class="input-group ps-0" [class.search-active]="!!searchText">
                         <span class="input-group-text">
                             <fa-icon [icon]="faSearch" size="sm" />
-                            <span [hidden]="true" id="inputLabel">{{ 'artemisApp.conversationsLayout.conversationMessages.searchLabel' | artemisTranslate }}</span>
+                            <span [hidden]="true" id="inputLabel" jhiTranslate="artemisApp.conversationsLayout.conversationMessages.searchLabel"></span>
                         </span>
                         <input
                             id="searchInput"
@@ -27,20 +27,23 @@
                                 aria-labelledby="clearSearchLabel"
                                 id="clearSearchButton"
                             >
-                                <span id="clearSearchLabel" [hidden]="true">{{ 'artemisApp.conversationsLayout.conversationMessages.clearSearch' | artemisTranslate }}</span>
+                                <span id="clearSearchLabel" [hidden]="true" jhiTranslate="artemisApp.conversationsLayout.conversationMessages.clearSearch"></span>
                                 <fa-icon [icon]="faTimes" size="xs" />
                             </button>
                         }
                         <span class="input-group-text" [hidden]="!searchText" id="searchResult">
                             @switch (totalNumberOfPosts) {
                                 @case (0) {
-                                    <span>{{ 'artemisApp.conversationsLayout.conversationMessages.searchResultsNone' | artemisTranslate }}</span>
+                                    <span jhiTranslate="artemisApp.conversationsLayout.conversationMessages.searchResultsNone"></span>
                                 }
                                 @case (1) {
-                                    <span>{{ 'artemisApp.conversationsLayout.conversationMessages.searchResultsSingle' | artemisTranslate }}</span>
+                                    <span jhiTranslate="artemisApp.conversationsLayout.conversationMessages.searchResultsSingle"></span>
                                 }
                                 @default {
-                                    <span>{{ 'artemisApp.conversationsLayout.conversationMessages.searchResultsMultiple' | artemisTranslate: { count: totalNumberOfPosts } }}</span>
+                                    <span
+                                        jhiTranslate="artemisApp.conversationsLayout.conversationMessages.searchResultsMultiple"
+                                        [translateValues]="{ count: totalNumberOfPosts }"
+                                    ></span>
                                 }
                             }
                         </span>
@@ -91,9 +94,7 @@
                     <div>
                         @if (getAsChannel(_activeConversation)?.isAnnouncementChannel) {
                             <div class="pt-2">
-                                <button class="btn btn-md btn-primary" (click)="createEditModal.open()">
-                                    {{ 'artemisApp.metis.newAnnouncement' | artemisTranslate }}
-                                </button>
+                                <button class="btn btn-md btn-primary" (click)="createEditModal.open()" jhiTranslate="artemisApp.metis.newAnnouncement"></button>
                                 <jhi-post-create-edit-modal
                                     #createEditModal
                                     [posting]="newPost!"
diff --git a/src/main/webapp/app/overview/course-dashboard/course-dashboard.component.html b/src/main/webapp/app/overview/course-dashboard/course-dashboard.component.html
index d876c82dd1ad..944ca25d2134 100644
--- a/src/main/webapp/app/overview/course-dashboard/course-dashboard.component.html
+++ b/src/main/webapp/app/overview/course-dashboard/course-dashboard.component.html
@@ -7,7 +7,7 @@
     @if (isLoading) {
         <div class="d-flex justify-content-center">
             <div class="spinner-border" role="status">
-                <span class="sr-only">{{ 'loading' | artemisTranslate }}</span>
+                <span class="sr-only" jhiTranslate="loading"></span>
             </div>
         </div>
     } @else {
diff --git a/src/main/webapp/app/overview/course-exercises/course-exercise-row.component.html b/src/main/webapp/app/overview/course-exercises/course-exercise-row.component.html
index edfb84460b84..1ae605ca2ad2 100644
--- a/src/main/webapp/app/overview/course-exercises/course-exercise-row.component.html
+++ b/src/main/webapp/app/overview/course-exercises/course-exercise-row.component.html
@@ -50,7 +50,7 @@ <h5 class="exercise-title">{{ exercise.title }}</h5>
                     {{ dueDate | artemisTimeAgo }}
                 </div>
             } @else {
-                <div class="col-auto mb-2">{{ 'artemisApp.courseOverview.exerciseList.noDueDate' | artemisTranslate }}</div>
+                <div class="col-auto mb-2" jhiTranslate="artemisApp.courseOverview.exerciseList.noDueDate"></div>
             }
         </div>
     </div>
diff --git a/src/main/webapp/app/overview/course-lectures/course-lecture-details.component.html b/src/main/webapp/app/overview/course-lectures/course-lecture-details.component.html
index 31e417b42160..3e27cd79cf9b 100644
--- a/src/main/webapp/app/overview/course-lectures/course-lecture-details.component.html
+++ b/src/main/webapp/app/overview/course-lectures/course-lecture-details.component.html
@@ -1,7 +1,7 @@
 @if (isLoading) {
     <div class="d-flex justify-content-center">
         <div class="spinner-border" role="status">
-            <span class="sr-only">{{ 'loading' | artemisTranslate }}</span>
+            <span class="sr-only" jhiTranslate="loading"></span>
         </div>
     </div>
 }
@@ -26,9 +26,12 @@ <h4>
                     </div>
                     @if (lecture?.course?.isAtLeastEditor) {
                         <div class="col-auto d-flex align-items-center">
-                            <button id="manageLectureButton" class="btn btn-secondary" (click)="redirectToLectureManagement()">
-                                {{ 'artemisApp.courseOverview.manage' | artemisTranslate }}
-                            </button>
+                            <button
+                                id="manageLectureButton"
+                                class="btn btn-secondary"
+                                (click)="redirectToLectureManagement()"
+                                jhiTranslate="artemisApp.courseOverview.manage"
+                            ></button>
                         </div>
                     }
                 </div>
@@ -40,7 +43,7 @@ <h4>
                     @if (lecture.description) {
                         <div class="row mb-2 mt-2 align-items-baseline">
                             <div class="col-auto">
-                                <h3>{{ 'artemisApp.courseOverview.lectureDetails.description' | artemisTranslate }}</h3>
+                                <h3 jhiTranslate="artemisApp.courseOverview.lectureDetails.description"></h3>
                             </div>
                         </div>
                         <div class="row mb-2 markdown-preview">
@@ -51,12 +54,15 @@ <h3>{{ 'artemisApp.courseOverview.lectureDetails.description' | artemisTranslate
                     @if (lecture.lectureUnits) {
                         <div class="row mb-2 mt-2 align-items-baseline">
                             <div class="col-auto">
-                                <h3>{{ 'artemisApp.courseOverview.lectureDetails.lectureUnits' | artemisTranslate }}</h3>
+                                <h3 jhiTranslate="artemisApp.courseOverview.lectureDetails.lectureUnits"></h3>
                             </div>
                             @if (hasPdfLectureUnit) {
-                                <button id="downloadButton" class="col-auto btn btn-primary btn-sm rounded-pill" (click)="downloadMergedFiles()">
-                                    {{ 'artemisApp.courseOverview.lectureDetails.downloadMergedPdf' | artemisTranslate }}
-                                </button>
+                                <button
+                                    id="downloadButton"
+                                    class="col-auto btn btn-primary btn-sm rounded-pill"
+                                    (click)="downloadMergedFiles()"
+                                    jhiTranslate="artemisApp.courseOverview.lectureDetails.downloadMergedPdf"
+                                ></button>
                             }
                         </div>
                     }
@@ -95,7 +101,7 @@ <h3>{{ 'artemisApp.courseOverview.lectureDetails.lectureUnits' | artemisTranslat
                     @if (lecture.attachments) {
                         <div class="row mb-2 mt-2 align-items-baseline">
                             <div class="col-auto">
-                                <h3>{{ 'artemisApp.courseOverview.lectureDetails.attachments' | artemisTranslate }}</h3>
+                                <h3 jhiTranslate="artemisApp.courseOverview.lectureDetails.attachments"></h3>
                             </div>
                         </div>
                     }
@@ -120,9 +126,7 @@ <h5 class="mb-1">
                                                 {{ attachmentExtension(attachment) | uppercase }}
                                             </span>
                                             @if (attachmentNotReleased(attachment)) {
-                                                <span class="ms-1 badge bg-warning">
-                                                    {{ 'artemisApp.courseOverview.lectureDetails.notReleased' | artemisTranslate }}
-                                                </span>
+                                                <span class="ms-1 badge bg-warning" jhiTranslate="artemisApp.courseOverview.lectureDetails.notReleased"></span>
                                             }
                                         </h5>
                                         <h6 class="text-secondary mb-0 lecture-attachment-details">
diff --git a/src/main/webapp/app/overview/course-lectures/course-lecture-row.component.html b/src/main/webapp/app/overview/course-lectures/course-lecture-row.component.html
index e3f6841c9e09..d26daae4d1c5 100644
--- a/src/main/webapp/app/overview/course-lectures/course-lecture-row.component.html
+++ b/src/main/webapp/app/overview/course-lectures/course-lecture-row.component.html
@@ -23,7 +23,7 @@ <h4>{{ lecture?.title }}</h4>
                     ({{ lecture.startDate | artemisTimeAgo }})
                 </div>
             } @else {
-                <div class="col-auto mb-2">{{ 'artemisApp.courseOverview.exerciseList.noDueDate' | artemisTranslate }}</div>
+                <div class="col-auto mb-2" jhiTranslate="artemisApp.courseOverview.exerciseList.noDueDate"></div>
             }
         </div>
     </div>
diff --git a/src/main/webapp/app/overview/course-overview.component.html b/src/main/webapp/app/overview/course-overview.component.html
index 1cd9605ef9ef..ee6f77d51b5a 100644
--- a/src/main/webapp/app/overview/course-overview.component.html
+++ b/src/main/webapp/app/overview/course-overview.component.html
@@ -158,9 +158,7 @@
                         <div class="d-flex">
                             @if (isNotManagementView && course.isAtLeastTutor) {
                                 <div id="manage-button">
-                                    <a class="btn btn-secondary" [routerLink]="['/course-management', course.id]">
-                                        {{ 'artemisApp.courseOverview.manage' | artemisTranslate }}
-                                    </a>
+                                    <a class="btn btn-secondary" [routerLink]="['/course-management', course.id]" jhiTranslate="artemisApp.courseOverview.manage"></a>
                                 </div>
                             }
                             @if (showRefreshButton) {
diff --git a/src/main/webapp/app/overview/course-registration/course-prerequisites-button/course-prerequisites-button.component.html b/src/main/webapp/app/overview/course-registration/course-prerequisites-button/course-prerequisites-button.component.html
index f60094d04581..530576179db6 100644
--- a/src/main/webapp/app/overview/course-registration/course-prerequisites-button/course-prerequisites-button.component.html
+++ b/src/main/webapp/app/overview/course-registration/course-prerequisites-button/course-prerequisites-button.component.html
@@ -1,5 +1,3 @@
 @if (course.prerequisites?.length) {
-    <button class="btn btn-secondary" (click)="showPrerequisites(course.id!)">
-        {{ 'artemisApp.studentDashboard.enroll.coursePrerequisites' | artemisTranslate }}
-    </button>
+    <button class="btn btn-secondary" (click)="showPrerequisites(course.id!)" jhiTranslate="artemisApp.studentDashboard.enroll.coursePrerequisites"></button>
 }
diff --git a/src/main/webapp/app/overview/course-registration/course-registration-button/course-registration-button.component.html b/src/main/webapp/app/overview/course-registration/course-registration-button/course-registration-button.component.html
index 6b40d0b02e0d..960a67b4c207 100644
--- a/src/main/webapp/app/overview/course-registration/course-registration-button/course-registration-button.component.html
+++ b/src/main/webapp/app/overview/course-registration/course-registration-button/course-registration-button.component.html
@@ -11,7 +11,5 @@
     />
 }
 @if (!course.enrollmentConfirmationMessage!) {
-    <button class="btn btn-primary" (click)="registerForCourse(course.id!)" [disabled]="loading">
-        {{ 'artemisApp.studentDashboard.enroll.enrollInCourse' | artemisTranslate }}
-    </button>
+    <button class="btn btn-primary" (click)="registerForCourse(course.id!)" [disabled]="loading" jhiTranslate="artemisApp.studentDashboard.enroll.enrollInCourse"></button>
 }
diff --git a/src/main/webapp/app/overview/course-registration/course-registration-detail/course-registration-detail.component.html b/src/main/webapp/app/overview/course-registration/course-registration-detail/course-registration-detail.component.html
index df46fef541bf..d03a7b1b8572 100644
--- a/src/main/webapp/app/overview/course-registration/course-registration-detail/course-registration-detail.component.html
+++ b/src/main/webapp/app/overview/course-registration/course-registration-detail/course-registration-detail.component.html
@@ -1,13 +1,11 @@
-<h3>{{ 'artemisApp.studentDashboard.enroll.title' | artemisTranslate }}</h3>
+<h3 jhiTranslate="artemisApp.studentDashboard.enroll.title"></h3>
 @if (loading) {
     <div>
-        <span>{{ 'artemisApp.studentDashboard.enroll.courseLoading' | artemisTranslate }}</span>
+        <span jhiTranslate="artemisApp.studentDashboard.enroll.courseLoading"></span>
     </div>
 } @else {
     <h4>{{ course?.title }}</h4>
-    <p>
-        {{ 'artemisApp.studentDashboard.enroll.notInCourseButCanEnroll' | artemisTranslate }}
-    </p>
+    <p jhiTranslate="artemisApp.studentDashboard.enroll.notInCourseButCanEnroll"></p>
     <jhi-course-prerequisites-button [course]="course!" />
     <jhi-course-registration-button [course]="course!" (onRegistration)="redirectToCoursePage()" />
 }
diff --git a/src/main/webapp/app/overview/course-registration/course-registration-prerequisites-modal/course-prerequisites-modal.component.html b/src/main/webapp/app/overview/course-registration/course-registration-prerequisites-modal/course-prerequisites-modal.component.html
index 076549012a21..3e4ef9383be6 100644
--- a/src/main/webapp/app/overview/course-registration/course-registration-prerequisites-modal/course-prerequisites-modal.component.html
+++ b/src/main/webapp/app/overview/course-registration/course-registration-prerequisites-modal/course-prerequisites-modal.component.html
@@ -7,7 +7,7 @@ <h4 class="modal-title" jhiTranslate="artemisApp.prerequisite.title"></h4>
         @if (isLoading) {
             <div class="d-flex justify-content-center">
                 <div class="spinner-border" role="status">
-                    <span class="sr-only">{{ 'loading' | artemisTranslate }}</span>
+                    <span class="sr-only" jhiTranslate="loading"></span>
                 </div>
             </div>
         } @else {
diff --git a/src/main/webapp/app/overview/course-registration/course-registration.component.html b/src/main/webapp/app/overview/course-registration/course-registration.component.html
index 487181793162..36da4167694c 100644
--- a/src/main/webapp/app/overview/course-registration/course-registration.component.html
+++ b/src/main/webapp/app/overview/course-registration/course-registration.component.html
@@ -1,5 +1,5 @@
 <div>
-    <h3>{{ 'artemisApp.studentDashboard.enroll.title' | artemisTranslate }}</h3>
+    <h3 jhiTranslate="artemisApp.studentDashboard.enroll.title"></h3>
     <div class="col-12 mb-3">
         <input type="text" class="form-control" [(ngModel)]="searchTermString" (input)="applySearch()" [placeholder]="'artemisApp.course.searchForCourse' | artemisTranslate" />
     </div>
@@ -46,14 +46,12 @@ <h3>{{ 'artemisApp.studentDashboard.enroll.title' | artemisTranslate }}</h3>
         </div>
     }
     @if (!loading && !coursesToSelect) {
-        <div class="col-12 col-sm-auto">
-            {{ 'artemisApp.studentDashboard.enroll.noCourse' | artemisTranslate }}
-        </div>
+        <div class="col-12 col-sm-auto" jhiTranslate="artemisApp.studentDashboard.enroll.noCourse"></div>
     }
     @if (loading && !coursesToSelect) {
         <div class="col-12 col-sm-auto d-flex justify-content-center">
             <div class="spinner-border" role="status">
-                <span class="sr-only">{{ 'artemisApp.studentDashboard.enroll.coursesLoading' | artemisTranslate }}</span>
+                <span class="sr-only" jhiTranslate="artemisApp.studentDashboard.enroll.coursesLoading"></span>
             </div>
         </div>
     }
diff --git a/src/main/webapp/app/overview/course-statistics/course-statistics.component.html b/src/main/webapp/app/overview/course-statistics/course-statistics.component.html
index 2bf923aec355..73dd416ef9d2 100644
--- a/src/main/webapp/app/overview/course-statistics/course-statistics.component.html
+++ b/src/main/webapp/app/overview/course-statistics/course-statistics.component.html
@@ -3,23 +3,23 @@
         <div class="col" aria-label="Filter Dropdown" ngbDropdown>
             <button class="btn" [class.btn-secondary]="!numberOfAppliedFilters" [class.btn-success]="!!numberOfAppliedFilters" ngbDropdownToggle id="filter-dropdown-button">
                 <fa-icon [icon]="faFilter" />
-                <span>{{ 'artemisApp.courseOverview.exerciseList.filter' | artemisTranslate: { num: numberOfAppliedFilters } }}</span>
+                <span jhiTranslate="artemisApp.courseOverview.exerciseList.filter" [translateValues]="{ num: numberOfAppliedFilters }"></span>
             </button>
             <ul ngbDropdownMenu class="checkbox-menu text-nowrap pe-2" aria-labelledby="filter-dropdown-button">
                 <li class="mb-1">
-                    <b class="ms-2">{{ 'artemisApp.courseOverview.statistics.includeStandardCategories' | artemisTranslate }}</b>
+                    <b class="ms-2" jhiTranslate="artemisApp.courseOverview.statistics.includeStandardCategories"></b>
                 </li>
                 <li>
                     <input class="ms-2 form-check-input" (change)="toggleNotIncludedInScoreExercises()" [checked]="currentlyHidingNotIncludedInScoreExercises" type="checkbox" />
                     <span class="ms-2" jhiTranslate="artemisApp.courseOverview.statistics.hideNotIncludedInScoreExercises"></span>
                 </li>
                 <li class="mt-1 mb-1">
-                    <b class="ms-2">{{ 'artemisApp.courseOverview.statistics.includeIndividualCategories' | artemisTranslate }}</b>
+                    <b class="ms-2" jhiTranslate="artemisApp.courseOverview.statistics.includeIndividualCategories"></b>
                 </li>
                 <li>
                     <label class="mb-1">
                         <input class="ms-2 form-check-input" (change)="toggleAllCategories()" [checked]="categoryFilter.allCategoriesSelected" type="checkbox" />
-                        <b class="ms-2">{{ 'artemisApp.courseOverview.statistics.includeAllCategories' | artemisTranslate }}</b>
+                        <b class="ms-2" jhiTranslate="artemisApp.courseOverview.statistics.includeAllCategories"></b>
                     </label>
                 </li>
                 @if (categoryFilter.exercisesWithoutCategoriesPresent) {
@@ -31,7 +31,7 @@
                                 [checked]="categoryFilter.includeExercisesWithNoCategory"
                                 type="checkbox"
                             />
-                            <span class="ms-2">{{ 'artemisApp.courseOverview.statistics.exercisesWithNoCategories' | artemisTranslate }}</span>
+                            <span class="ms-2" jhiTranslate="artemisApp.courseOverview.statistics.exercisesWithNoCategories"></span>
                         </label>
                     </li>
                 }
@@ -53,7 +53,7 @@
             <div class="row">
                 <div class="statistic-summary">
                     <div class="d-flex align-items-center">
-                        <h2>{{ 'artemisApp.courseOverview.statistics.totalScore' | artemisTranslate }}</h2>
+                        <h2 jhiTranslate="artemisApp.courseOverview.statistics.totalScore"></h2>
                         <jhi-documentation-button [type]="documentationType" />
                     </div>
                     <div class="row d-flex justify-content-center align-items-start">
@@ -80,13 +80,17 @@ <h5 class="fw-bolder">{{ exerciseType.name | artemisTranslate }}</h5>
                             }
                         </div>
                         <div class="col-md-3">
-                            <h5 class="fw-bolder" id="absolute-course-score">
-                                {{ 'artemisApp.courseOverview.statistics.yourPoints' | artemisTranslate: { number: overallPoints } }}
-                            </h5>
+                            <h5
+                                class="fw-bolder"
+                                id="absolute-course-score"
+                                jhiTranslate="artemisApp.courseOverview.statistics.yourPoints"
+                                [translateValues]="{ number: overallPoints }"
+                            ></h5>
                             <h5 class="fw-bolder" id="reachable-course-score">
-                                <span>
-                                    {{ 'artemisApp.courseOverview.statistics.reachablePoints' | artemisTranslate: { number: reachablePoints, relative: currentRelativeScore } }}
-                                </span>
+                                <span
+                                    jhiTranslate="artemisApp.courseOverview.statistics.reachablePoints"
+                                    [translateValues]="{ number: reachablePoints, relative: currentRelativeScore }"
+                                ></span>
                                 <fa-icon
                                     id="reachable-help"
                                     class="me-1"
@@ -95,9 +99,10 @@ <h5 class="fw-bolder" id="reachable-course-score">
                                 />
                             </h5>
                             <h5 class="mb-4 statistics-legend" id="max-course-score">
-                                <span>
-                                    {{ 'artemisApp.courseOverview.statistics.totalPoints' | artemisTranslate: { number: overallMaxPoints, relative: totalRelativeScore } }}
-                                </span>
+                                <span
+                                    jhiTranslate="artemisApp.courseOverview.statistics.totalPoints"
+                                    [translateValues]="{ number: overallMaxPoints, relative: totalRelativeScore }"
+                                ></span>
                                 <fa-icon
                                     id="total-help"
                                     class="me-1"
@@ -128,35 +133,39 @@ <h6>
                                     <div class="mt-3">
                                         <a class="btn btn-primary" [routerLink]="['grading-key']" [queryParams]="{ grade: gradeDTO?.gradeName }">
                                             <fa-icon [icon]="faClipboard" />
-                                            <span>
-                                                {{
-                                                    isBonus
-                                                        ? ('artemisApp.exam.examSummary.gradeKeyButtonBonus' | artemisTranslate)
-                                                        : ('artemisApp.exam.examSummary.gradeKeyButton' | artemisTranslate)
-                                                }}
-                                            </span>
+                                            <span
+                                                jhiTranslate="{{ isBonus ? 'artemisApp.exam.examSummary.gradeKeyButtonBonus' : 'artemisApp.exam.examSummary.gradeKeyButton' }}"
+                                            ></span>
                                         </a>
                                     </div>
                                 </div>
                             }
                             @if (course?.presentationScore) {
                                 <div>
-                                    <h5 class="fw-bolder">
-                                        {{ 'artemisApp.courseOverview.statistics.totalPresentationScore' | artemisTranslate: { number: overallPresentationScore } }}
-                                    </h5>
-                                    <h5 class="fw-bolder">
-                                        {{ 'artemisApp.courseOverview.statistics.presentationScoreBonus' | artemisTranslate: { number: course?.presentationScore } }}
-                                    </h5>
+                                    <h5
+                                        class="fw-bolder"
+                                        jhiTranslate="artemisApp.courseOverview.statistics.totalPresentationScore"
+                                        [translateValues]="{ number: overallPresentationScore }"
+                                    ></h5>
+                                    <h5
+                                        class="fw-bolder"
+                                        jhiTranslate="artemisApp.courseOverview.statistics.presentationScoreBonus"
+                                        [translateValues]="{ number: course?.presentationScore }"
+                                    ></h5>
                                 </div>
                             }
                             @if (reachablePresentationPoints) {
                                 <div>
-                                    <h5 class="fw-bolder">
-                                        {{ 'artemisApp.courseOverview.statistics.totalPresentationPoints' | artemisTranslate: { number: overallPresentationScore } }}
-                                    </h5>
-                                    <h5 class="fw-bolder">
-                                        {{ 'artemisApp.courseOverview.statistics.achievablePresentationPoints' | artemisTranslate: { number: reachablePresentationPoints } }}
-                                    </h5>
+                                    <h5
+                                        class="fw-bolder"
+                                        jhiTranslate="artemisApp.courseOverview.statistics.totalPresentationPoints"
+                                        [translateValues]="{ number: overallPresentationScore }"
+                                    ></h5>
+                                    <h5
+                                        class="fw-bolder"
+                                        jhiTranslate="artemisApp.courseOverview.statistics.achievablePresentationPoints"
+                                        [translateValues]="{ number: reachablePresentationPoints }"
+                                    ></h5>
                                     <h6>
                                         {{ 'artemisApp.courseOverview.statistics.gradeInfo' | artemisTranslate }}
                                         <fa-icon
@@ -175,16 +184,15 @@ <h6>
                 <jhi-exercise-scores-chart class="col-12" [filteredExerciseIDs]="filteredExerciseIDs" />
                 <hr />
                 <div class="col-12 mb-3">
-                    <h2>{{ 'artemisApp.courseOverview.statistics.pointsPerExercise' | artemisTranslate }}</h2>
+                    <h2 jhiTranslate="artemisApp.courseOverview.statistics.pointsPerExercise"></h2>
                     @for (exerciseGroup of ngxExerciseGroups | keyvalue; let index = $index; track index) {
                         @if (exerciseGroup.value[0]) {
                             <div class="row mt-3 d-flex justify-content-end" id="{{ exerciseGroup.value[0]?.type }}-wrapper">
                                 <div class="col-12 mb-1 d-flex align-items-center">
-                                    <h4>
-                                        {{
-                                            'artemisApp.courseOverview.statistics.exerciseCount' | artemisTranslate: { number: exerciseGroup.value.length, type: exerciseGroup.key }
-                                        }}
-                                    </h4>
+                                    <h4
+                                        jhiTranslate="artemisApp.courseOverview.statistics.exerciseCount"
+                                        [translateValues]="{ number: exerciseGroup.value.length, type: exerciseGroup.key }"
+                                    ></h4>
                                 </div>
                                 <div #containerRef class="col-12 col-md-8">
                                     <ngx-charts-bar-horizontal-stacked
@@ -203,22 +211,19 @@ <h4>
                                             @if ([barChartTitle.INCLUDED, barChartTitle.BONUS, barChartTitle.NOT_INCLUDED, barChartTitle.NO_DUE_DATE].includes(model.name)) {
                                                 <div>
                                                     @if (!model.isProgrammingExercise) {
-                                                        <span>
-                                                            {{
-                                                                'artemisApp.courseOverview.statistics.exerciseAchievedScore'
-                                                                    | artemisTranslate
-                                                                        : { points: model.absoluteValue, percentage: roundScoreSpecifiedByCourseSettings(model.value, course) }
-                                                            }}
-                                                        </span>
+                                                        <span
+                                                            jhiTranslate="artemisApp.courseOverview.statistics.exerciseAchievedScore"
+                                                            [translateValues]="{
+                                                                points: model.absoluteValue,
+                                                                percentage: roundScoreSpecifiedByCourseSettings(model.value, course),
+                                                            }"
+                                                        ></span>
                                                     }
                                                     @if (model.isProgrammingExercise) {
-                                                        <span>
-                                                            {{
-                                                                'artemisApp.courseOverview.statistics.programmingExercisePassedTests'
-                                                                    | artemisTranslate
-                                                                        : { tests: model.absoluteValue, percentage: roundScoreSpecifiedByCourseSettings(model.value, course) }
-                                                            }}
-                                                        </span>
+                                                        <span
+                                                            jhiTranslate="artemisApp.courseOverview.statistics.programmingExercisePassedTests"
+                                                            [translateValues]="{ tests: model.absoluteValue, percentage: roundScoreSpecifiedByCourseSettings(model.value, course) }"
+                                                        ></span>
                                                     }
                                                     @if (model.name === barChartTitle.BONUS) {
                                                         <span>
@@ -237,54 +242,43 @@ <h4>
                                                     @case (barChartTitle.MISSED) {
                                                         <div>
                                                             @if (!model.afterDueDate && !model.notParticipated && !model.isProgrammingExercise) {
-                                                                <span>
-                                                                    {{
-                                                                        'artemisApp.courseOverview.statistics.exerciseMissedScore'
-                                                                            | artemisTranslate
-                                                                                : {
-                                                                                      points: model.absoluteValue,
-                                                                                      percentage: roundScoreSpecifiedByCourseSettings(model.value, course),
-                                                                                  }
-                                                                    }}
-                                                                </span>
+                                                                <span
+                                                                    jhiTranslate="artemisApp.courseOverview.statistics.exerciseMissedScore"
+                                                                    [translateValues]="{
+                                                                        points: model.absoluteValue,
+                                                                        percentage: roundScoreSpecifiedByCourseSettings(model.value, course),
+                                                                    }"
+                                                                ></span>
                                                             }
                                                             @if (model.notParticipated) {
-                                                                <span>
-                                                                    {{
-                                                                        'artemisApp.courseOverview.statistics.exerciseNotParticipated'
-                                                                            | artemisTranslate: { exercise: model.exerciseTitle }
-                                                                    }}
-                                                                </span>
+                                                                <span
+                                                                    jhiTranslate="artemisApp.courseOverview.statistics.exerciseNotParticipated"
+                                                                    [translateValues]="{ exercise: model.exerciseTitle }"
+                                                                ></span>
                                                             }
                                                             @if (model.afterDueDate) {
-                                                                <span>
-                                                                    {{
-                                                                        'artemisApp.courseOverview.statistics.exerciseParticipatedAfterDueDate'
-                                                                            | artemisTranslate: { exercise: model.exerciseTitle }
-                                                                    }}
-                                                                </span>
+                                                                <span
+                                                                    jhiTranslate="artemisApp.courseOverview.statistics.exerciseParticipatedAfterDueDate"
+                                                                    [translateValues]="{ exercise: model.exerciseTitle }"
+                                                                ></span>
                                                             }
                                                             @if (model.isProgrammingExercise && !model.notParticipated) {
-                                                                <span>
-                                                                    {{
-                                                                        'artemisApp.courseOverview.statistics.programmingExerciseFailedTests'
-                                                                            | artemisTranslate
-                                                                                : {
-                                                                                      tests: model.absoluteValue,
-                                                                                      percentage: roundScoreSpecifiedByCourseSettings(model.value, course),
-                                                                                  }
-                                                                    }}
-                                                                </span>
+                                                                <span
+                                                                    jhiTranslate="artemisApp.courseOverview.statistics.programmingExerciseFailedTests"
+                                                                    [translateValues]="{
+                                                                        tests: model.absoluteValue,
+                                                                        percentage: roundScoreSpecifiedByCourseSettings(model.value, course),
+                                                                    }"
+                                                                ></span>
                                                             }
                                                         </div>
                                                     }
                                                     @case (barChartTitle.NOT_GRADED) {
                                                         <div>
-                                                            <span>
-                                                                {{
-                                                                    'artemisApp.courseOverview.statistics.exerciseNotGraded' | artemisTranslate: { exercise: model.exerciseTitle }
-                                                                }}</span
-                                                            >
+                                                            <span
+                                                                jhiTranslate="artemisApp.courseOverview.statistics.exerciseNotGraded"
+                                                                [translateValues]="{ exercise: model.exerciseTitle }"
+                                                            ></span>
                                                         </div>
                                                     }
                                                 }
@@ -294,17 +288,17 @@ <h4>
                                 </div>
                                 @if (exerciseGroup.value && exerciseGroup.value.length) {
                                     <div class="col-12 col-md-3 align-self-top mt-2">
-                                        <h5 class="fw-bolder" id="absolute-score">
-                                            {{ 'artemisApp.courseOverview.statistics.yourPoints' | artemisTranslate: { number: exerciseGroup.value[0].absoluteScore } }}
-                                        </h5>
+                                        <h5
+                                            class="fw-bolder"
+                                            id="absolute-score"
+                                            jhiTranslate="artemisApp.courseOverview.statistics.yourPoints"
+                                            [translateValues]="{ number: exerciseGroup.value[0].absoluteScore }"
+                                        ></h5>
                                         <h5 class="fw-bolder" id="reachable-score">
-                                            <span>
-                                                {{
-                                                    'artemisApp.courseOverview.statistics.reachablePoints'
-                                                        | artemisTranslate
-                                                            : { number: exerciseGroup.value[0].reachablePoints, relative: exerciseGroup.value[0].currentRelativeScore }
-                                                }}
-                                            </span>
+                                            <span
+                                                jhiTranslate="artemisApp.courseOverview.statistics.reachablePoints"
+                                                [translateValues]="{ number: exerciseGroup.value[0].reachablePoints, relative: exerciseGroup.value[0].currentRelativeScore }"
+                                            ></span>
                                             <fa-icon
                                                 id="reachable-help"
                                                 class="me-1"
@@ -313,12 +307,10 @@ <h5 class="fw-bolder" id="reachable-score">
                                             />
                                         </h5>
                                         <h5 class="fw-bolder" id="max-score">
-                                            <span>
-                                                {{
-                                                    'artemisApp.courseOverview.statistics.totalPoints'
-                                                        | artemisTranslate: { number: exerciseGroup.value[0].overallMaxPoints, relative: exerciseGroup.value[0].relativeScore }
-                                                }}
-                                            </span>
+                                            <span
+                                                jhiTranslate="artemisApp.courseOverview.statistics.totalPoints"
+                                                [translateValues]="{ number: exerciseGroup.value[0].overallMaxPoints, relative: exerciseGroup.value[0].relativeScore }"
+                                            ></span>
                                             <fa-icon
                                                 id="total-help"
                                                 class="me-1"
@@ -327,12 +319,12 @@ <h5 class="fw-bolder" id="max-score">
                                             />
                                         </h5>
                                         @if (exerciseGroup.value[0].presentationScoreEnabled && course?.presentationScore) {
-                                            <h5 class="fw-bolder" id="presentation-score">
-                                                {{
-                                                    'artemisApp.courseOverview.statistics.presentationScore'
-                                                        | artemisTranslate: { number: exerciseGroup.value[0].presentationScore }
-                                                }}
-                                            </h5>
+                                            <h5
+                                                class="fw-bolder"
+                                                id="presentation-score"
+                                                jhiTranslate="artemisApp.courseOverview.statistics.presentationScore"
+                                                [translateValues]="{ number: exerciseGroup.value[0].presentationScore }"
+                                            ></h5>
                                         }
                                     </div>
                                 }
@@ -343,9 +335,7 @@ <h5 class="fw-bolder" id="presentation-score">
             </div>
         } @else {
             <div class="row">
-                <div class="col mt-3">
-                    {{ 'artemisApp.courseOverview.statistics.noStatistics' | artemisTranslate }}
-                </div>
+                <div class="col mt-3" jhiTranslate="artemisApp.courseOverview.statistics.noStatistics"></div>
             </div>
         }
     </div>
diff --git a/src/main/webapp/app/overview/course-tutorial-groups/course-tutorial-group-card/course-tutorial-group-card.component.html b/src/main/webapp/app/overview/course-tutorial-groups/course-tutorial-group-card/course-tutorial-group-card.component.html
index fcdc854c1e4a..4add37514666 100644
--- a/src/main/webapp/app/overview/course-tutorial-groups/course-tutorial-group-card/course-tutorial-group-card.component.html
+++ b/src/main/webapp/app/overview/course-tutorial-groups/course-tutorial-group-card/course-tutorial-group-card.component.html
@@ -17,9 +17,7 @@ <h5 class="text-center text-white">{{ tutorialGroup?.title ?? '' }}</h5>
         </div>
         <div class="card-footer">
             @if (tutorialGroup.teachingAssistantName) {
-                <div>
-                    {{ 'artemisApp.tutorialGroupCard.teachingAssistant' | artemisTranslate: { name: tutorialGroup.teachingAssistantName } }}
-                </div>
+                <div jhiTranslate="artemisApp.tutorialGroupCard.teachingAssistant" [translateValues]="{ name: tutorialGroup.teachingAssistantName }"></div>
             }
             @if (showChannelLink && tutorialGroup.channel && isMessagingEnabled(course)) {
                 <div class="mt-2">
@@ -29,10 +27,11 @@ <h5 class="text-center text-white">{{ tutorialGroup?.title ?? '' }}</h5>
                             [routerLink]="['/courses', course.id!, 'communication']"
                             [queryParams]="{ conversationId: tutorialGroup.channel.id }"
                             class="btn btn-primary"
-                            >{{ 'artemisApp.entities.tutorialGroup.channelWithName' | artemisTranslate: { channel: tutorialGroup.channel.name } }}</a
-                        >
+                            jhiTranslate="artemisApp.entities.tutorialGroup.channelWithName"
+                            [translateValues]="{ channel: tutorialGroup.channel.name }"
+                        ></a>
                     } @else {
-                        <span>{{ 'artemisApp.entities.tutorialGroup.channelWithName' | artemisTranslate: { channel: tutorialGroup.channel.name } }}</span>
+                        <span jhiTranslate="artemisApp.entities.tutorialGroup.channelWithName" [translateValues]="{ channel: tutorialGroup.channel.name }"></span>
                     }
                 </div>
             }
diff --git a/src/main/webapp/app/overview/course-unenrollment-modal.component.html b/src/main/webapp/app/overview/course-unenrollment-modal.component.html
index 213dd615c852..31d17bde6bbc 100644
--- a/src/main/webapp/app/overview/course-unenrollment-modal.component.html
+++ b/src/main/webapp/app/overview/course-unenrollment-modal.component.html
@@ -1,7 +1,5 @@
 <div class="modal-header">
-    <h4 class="modal-title">
-        {{ 'artemisApp.courseOverview.exerciseList.details.unenrollmentModal.title' | artemisTranslate }}
-    </h4>
+    <h4 class="modal-title" jhiTranslate="artemisApp.courseOverview.exerciseList.details.unenrollmentModal.title"></h4>
 </div>
 <div class="modal-body">
     <div class="unenrollment-info">
@@ -10,9 +8,7 @@ <h4 class="modal-title">
             <b>{{ course?.title }}</b> ?
         </div>
         @if (!canEnrollAgain) {
-            <div>
-                {{ 'artemisApp.courseOverview.exerciseList.details.unenrollmentModal.reenrollmentNotPossible' | artemisTranslate }}
-            </div>
+            <div jhiTranslate="artemisApp.courseOverview.exerciseList.details.unenrollmentModal.reenrollmentNotPossible"></div>
         }
         @if (canEnrollAgain) {
             <div>
@@ -22,22 +18,16 @@ <h4 class="modal-title">
         }
     </div>
     <form class="unenrollment-confirmation" [formGroup]="confirmationForm" style="margin-top: 1rem">
-        <label class="form-control-label" for="field_confirmation_input">
-            {{ 'artemisApp.courseOverview.exerciseList.details.unenrollmentModal.confirmationInput' | artemisTranslate }}
-        </label>
+        <label class="form-control-label" for="field_confirmation_input" jhiTranslate="artemisApp.courseOverview.exerciseList.details.unenrollmentModal.confirmationInput"></label>
         <input type="text" class="form-control" name="confirmationInput" id="field_confirmation_input" formControlName="confirmationInput" required />
     </form>
 </div>
 <div class="modal-footer">
     <button class="btn btn-outline-secondary" id="course-unenrollment-cancel-button" (click)="onCancel()">
         <fa-icon [icon]="faXmark" />
-        <span class="d-sm-inline">
-            {{ 'artemisApp.courseOverview.exerciseList.details.unenrollmentModal.cancelButton' | artemisTranslate }}
-        </span>
+        <span class="d-sm-inline" jhiTranslate="artemisApp.courseOverview.exerciseList.details.unenrollmentModal.cancelButton"></span>
     </button>
     <button class="btn btn-danger" id="course-unenrollment-accept-button" [disabled]="!isValidInput" (click)="onUnenroll()">
-        <span class="d-sm-inline">
-            {{ 'artemisApp.courseOverview.exerciseList.details.unenrollmentModal.acceptButton' | artemisTranslate }}
-        </span>
+        <span class="d-sm-inline" jhiTranslate="artemisApp.courseOverview.exerciseList.details.unenrollmentModal.acceptButton"></span>
     </button>
 </div>
diff --git a/src/main/webapp/app/overview/courses.component.html b/src/main/webapp/app/overview/courses.component.html
index ebfd4deb06f6..92381c38c62b 100644
--- a/src/main/webapp/app/overview/courses.component.html
+++ b/src/main/webapp/app/overview/courses.component.html
@@ -1,8 +1,6 @@
 @if (nextRelevantExam && nextRelevantCourseForExam) {
     <div class="row">
-        <h3 class="col mb-3 fw-medium">
-            {{ 'artemisApp.studentDashboard.examTitle' | artemisTranslate: { course: nextRelevantCourseForExam.title } }}
-        </h3>
+        <h3 class="col mb-3 fw-medium" jhiTranslate="artemisApp.studentDashboard.examTitle" [translateValues]="{ course: nextRelevantCourseForExam.title }"></h3>
         <div class="col-12 mb-5">
             <div class="row justify-content-between align-items-center exam-container ps-3 pe-3" (click)="openExam()">
                 <div class="mb-4 mt-4 d-flex" style="width: unset">
@@ -11,10 +9,10 @@ <h4 class="ms-2 fw-medium">{{ nextRelevantExam.title }}</h4>
                 </div>
                 <div class="text-end mb-4 mt-4" style="width: unset">
                     @if (nextRelevantExam.startDate) {
-                        <div>{{ 'artemisApp.exam.overview.start' | artemisTranslate: { start: nextRelevantExam.startDate | artemisDate } }}</div>
+                        <div jhiTranslate="artemisApp.exam.overview.start" [translateValues]="{ start: nextRelevantExam.startDate | artemisDate }"></div>
                     }
                     @if (nextRelevantExam.examMaxPoints) {
-                        <div>{{ 'artemisApp.exam.overview.maxPoints' | artemisTranslate: { points: nextRelevantExam.examMaxPoints } }}</div>
+                        <div jhiTranslate="artemisApp.exam.overview.maxPoints" [translateValues]="{ points: nextRelevantExam.examMaxPoints }"></div>
                     }
                 </div>
             </div>
@@ -28,7 +26,7 @@ <h3 class="fw-medium" jhiTranslate="artemisApp.studentDashboard.title"></h3>
 
     @if (regularCourses.length) {
         <div class="col-sm-auto d-flex">
-            <a class="btn btn-primary" [routerLink]="['/courses/enroll']">{{ 'artemisApp.studentDashboard.enroll.title' | artemisTranslate }}</a>
+            <a class="btn btn-primary" [routerLink]="['/courses/enroll']" jhiTranslate="artemisApp.studentDashboard.enroll.title"></a>
         </div>
     }
 </div>
@@ -51,7 +49,7 @@ <h4 class="col mb-3 fw-medium" jhiTranslate="artemisApp.studentDashboard.otherCo
     <div class="mt-5 mb-5 d-flex flex-column gap-3">
         <h4 class="text-secondary text-center" jhiTranslate="artemisApp.studentDashboard.noCourses"></h4>
         <div class="col-sm-auto d-flex justify-content-center">
-            <a class="btn btn-primary" [routerLink]="['/courses/enroll']">{{ 'artemisApp.studentDashboard.enroll.title' | artemisTranslate }}</a>
+            <a class="btn btn-primary" [routerLink]="['/courses/enroll']" jhiTranslate="artemisApp.studentDashboard.enroll.title"></a>
         </div>
     </div>
 } @else {
diff --git a/src/main/webapp/app/overview/discussion-section/discussion-section.component.html b/src/main/webapp/app/overview/discussion-section/discussion-section.component.html
index c423a6c9ca5f..a1a4fc4d2944 100644
--- a/src/main/webapp/app/overview/discussion-section/discussion-section.component.html
+++ b/src/main/webapp/app/overview/discussion-section/discussion-section.component.html
@@ -20,15 +20,13 @@ <h5 class="mb-0 fw-medium" jhiTranslate="artemisApp.metis.communication.label"><
                     </div>
                     <!-- body -->
                     @if (noChannelAvailable) {
-                        <div class="card-body">
-                            {{ 'artemisApp.metis.channel.noChannel' | artemisTranslate }}
-                        </div>
+                        <div class="card-body" jhiTranslate="artemisApp.metis.channel.noChannel"></div>
                     } @else {
                         <div class="card-body pt-0">
                             @if (currentPost !== undefined) {
                                 <div class="my-2">
                                     <fa-icon [icon]="faArrowLeft" (click)="resetCurrentPost()" class="back-button me-2 clickable" />
-                                    <span class="back-instruction">{{ 'artemisApp.metis.post.showAllPosts' | artemisTranslate }}</span>
+                                    <span class="back-instruction" jhiTranslate="artemisApp.metis.post.showAllPosts"></span>
                                     <jhi-posting-thread [post]="currentPost" [showAnswers]="true" [id]="'item-' + currentPost?.id" [showChannelReference]="false" />
                                 </div>
                             } @else {
@@ -65,7 +63,7 @@ <h5 class="mb-0 fw-medium" jhiTranslate="artemisApp.metis.communication.label"><
                                                             id="filterToUnresolved"
                                                             (change)="onSelectContext()"
                                                         />
-                                                        <label for="filterToUnresolved" class="p-0">{{ 'artemisApp.metis.overview.filterToUnresolved' | artemisTranslate }}</label>
+                                                        <label for="filterToUnresolved" class="p-0" jhiTranslate="artemisApp.metis.overview.filterToUnresolved"></label>
                                                     </div>
                                                     <div class="form-group pe-2">
                                                         <input
@@ -76,7 +74,7 @@ <h5 class="mb-0 fw-medium" jhiTranslate="artemisApp.metis.communication.label"><
                                                             id="filterToOwn"
                                                             (change)="onSelectContext()"
                                                         />
-                                                        <label for="filterToOwn" class="p-0">{{ 'artemisApp.metis.overview.filterToOwn' | artemisTranslate }}</label>
+                                                        <label for="filterToOwn" class="p-0" jhiTranslate="artemisApp.metis.overview.filterToOwn"></label>
                                                     </div>
                                                     <div class="form-group pe-2">
                                                         <input
@@ -87,9 +85,11 @@ <h5 class="mb-0 fw-medium" jhiTranslate="artemisApp.metis.communication.label"><
                                                             id="filterToAnsweredOrReacted"
                                                             (change)="onSelectContext()"
                                                         />
-                                                        <label for="filterToAnsweredOrReacted" class="p-0">{{
-                                                            'artemisApp.metis.overview.filterToAnsweredOrReacted' | artemisTranslate
-                                                        }}</label>
+                                                        <label
+                                                            for="filterToAnsweredOrReacted"
+                                                            class="p-0"
+                                                            jhiTranslate="artemisApp.metis.overview.filterToAnsweredOrReacted"
+                                                        ></label>
                                                     </div>
                                                 </div>
                                             </div>
@@ -98,7 +98,7 @@ <h5 class="mb-0 fw-medium" jhiTranslate="artemisApp.metis.communication.label"><
                                         <div class="col-auto ps-0">
                                             <div class="row align-items-baseline">
                                                 <div class="col-auto pe-1">
-                                                    <span>{{ 'artemisApp.metis.discussionSection.sortByDate' | artemisTranslate }}</span>
+                                                    <span jhiTranslate="artemisApp.metis.discussionSection.sortByDate"></span>
                                                 </div>
                                                 @if (!currentSortDirection) {
                                                     <div class="col-auto p-0 clickable" (click)="onChangeSortDir()">
@@ -142,13 +142,13 @@ <h5 class="mb-0 fw-medium" jhiTranslate="artemisApp.metis.communication.label"><
                             <!-- loading posts -->
                             @if (isLoading) {
                                 <div class="post-result-information row mt-2">
-                                    <div class="col-12">{{ 'artemisApp.metis.discussionSection.loadingMessages' | artemisTranslate }}</div>
+                                    <div class="col-12" jhiTranslate="artemisApp.metis.discussionSection.loadingMessages"></div>
                                 </div>
                             }
                             <!-- no posts -->
                             @if (!isLoading && posts.length === 0) {
                                 <div class="post-result-information row mt-2">
-                                    <div class="col-12">{{ 'artemisApp.metis.discussionSection.noMessages' | artemisTranslate }}</div>
+                                    <div class="col-12" jhiTranslate="artemisApp.metis.discussionSection.noMessages"></div>
                                 </div>
                             }
                             <!-- new post button -->
@@ -163,10 +163,10 @@ <h5 class="mb-0 fw-medium" jhiTranslate="artemisApp.metis.communication.label"><
                                                 <fa-icon [icon]="faTimes" />
                                             }
                                             @if (!shouldSendMessage) {
-                                                <span class="d-none d-md-inline">{{ 'artemisApp.metis.newMessage' | artemisTranslate }}</span>
+                                                <span class="d-none d-md-inline" jhiTranslate="artemisApp.metis.newMessage"></span>
                                             }
                                             @if (shouldSendMessage) {
-                                                <span class="d-none d-md-inline">{{ 'artemisApp.metis.collapseNewMessage' | artemisTranslate }}</span>
+                                                <span class="d-none d-md-inline" jhiTranslate="artemisApp.metis.collapseNewMessage"></span>
                                             }
                                         </button>
                                         @if (shouldSendMessage) {
diff --git a/src/main/webapp/app/overview/exercise-details/course-exercise-details.component.html b/src/main/webapp/app/overview/exercise-details/course-exercise-details.component.html
index 07fbccb20ec1..0d8f889d1ed5 100644
--- a/src/main/webapp/app/overview/exercise-details/course-exercise-details.component.html
+++ b/src/main/webapp/app/overview/exercise-details/course-exercise-details.component.html
@@ -113,7 +113,7 @@
                     <div class="row">
                         <div class="row mb-2 mt-2 align-items-baseline d-none d-md-flex">
                             <div class="col-auto">
-                                <h3>{{ 'artemisApp.courseOverview.exerciseDetails.recentResults' | artemisTranslate }}</h3>
+                                <h3 jhiTranslate="artemisApp.courseOverview.exerciseDetails.recentResults"></h3>
                             </div>
                         </div>
                         <div class="row">
@@ -130,7 +130,7 @@ <h3>{{ 'artemisApp.courseOverview.exerciseDetails.recentResults' | artemisTransl
                         @if (showMoreResults) {
                             <div class="row mb-2 mt-2 align-items-baseline">
                                 <div class="col-auto">
-                                    <h3>{{ 'artemisApp.courseOverview.exerciseDetails.allResults' | artemisTranslate }}</h3>
+                                    <h3 jhiTranslate="artemisApp.courseOverview.exerciseDetails.allResults"></h3>
                                 </div>
                             </div>
                             <div class="row">
@@ -153,9 +153,7 @@ <h4 class="mt-2">
                                         </div>
                                     }
                                     @if (!sortedHistoryResults) {
-                                        <div class="no-results">
-                                            {{ 'artemisApp.courseOverview.exerciseDetails.noResults' | artemisTranslate }}
-                                        </div>
+                                        <div class="no-results" jhiTranslate="artemisApp.courseOverview.exerciseDetails.noResults"></div>
                                     }
                                 </div>
                             </div>
@@ -170,7 +168,7 @@ <h4 class="mt-2">
                 @if (exampleSolutionInfo?.exampleSolutionPublished) {
                     <div class="row mb-2 mt-2 align-items-baseline">
                         <div class="control-label" (click)="changeExampleSolution()">
-                            <span class="h3 pe-2">{{ 'artemisApp.exercise.exampleSolution' | artemisTranslate }}</span>
+                            <span class="h3 pe-2" jhiTranslate="artemisApp.exercise.exampleSolution"></span>
                             <fa-icon class="pe-3" [icon]="exampleSolutionCollapsed ? faAngleDown : faAngleUp" />
                         </div>
                     </div>
diff --git a/src/main/webapp/app/overview/exercise-details/problem-statement/problem-statement.component.html b/src/main/webapp/app/overview/exercise-details/problem-statement/problem-statement.component.html
index ebed5c03ce91..771aaf0cc970 100644
--- a/src/main/webapp/app/overview/exercise-details/problem-statement/problem-statement.component.html
+++ b/src/main/webapp/app/overview/exercise-details/problem-statement/problem-statement.component.html
@@ -6,7 +6,7 @@
     @if (exercise?.problemStatement) {
         <div class="row mb-2 align-items-baseline" id="problem-statement">
             <div class="col-12 col-md-12 markdown-preview problem-statement">
-                <h3>{{ 'artemisApp.courseOverview.exerciseDetails.problemStatement' | artemisTranslate }}</h3>
+                <h3 jhiTranslate="artemisApp.courseOverview.exerciseDetails.problemStatement"></h3>
                 <p [innerHTML]="exercise!.problemStatement! | htmlForMarkdown"></p>
             </div>
         </div>
diff --git a/src/main/webapp/app/overview/header-course.component.html b/src/main/webapp/app/overview/header-course.component.html
index df28e8ec031e..43a30615e2c8 100644
--- a/src/main/webapp/app/overview/header-course.component.html
+++ b/src/main/webapp/app/overview/header-course.component.html
@@ -17,9 +17,7 @@ <h6 id="course-header-description" class="fw-normal">{{ courseDescription }}</h6
                     }
                 </div>
                 <div class="d-flex align-items-center justify-content-center manage-button-container" id="student-view-button">
-                    <a class="btn btn-secondary manage-button" [routerLink]="['/courses', course.id]">
-                        {{ 'artemisApp.courseOverview.studentView' | artemisTranslate }}
-                    </a>
+                    <a class="btn btn-secondary manage-button" [routerLink]="['/courses', course.id]" jhiTranslate="artemisApp.courseOverview.studentView"></a>
                 </div>
             </div>
         </div>
diff --git a/src/main/webapp/app/overview/submission-result-status.component.html b/src/main/webapp/app/overview/submission-result-status.component.html
index 47a0b3e0b172..2cc0eaac36b4 100644
--- a/src/main/webapp/app/overview/submission-result-status.component.html
+++ b/src/main/webapp/app/overview/submission-result-status.component.html
@@ -18,25 +18,25 @@
     } @else {
         <div>
             @if (exercise.teamMode && exercise.studentAssignedTeamIdComputed && !exercise.studentAssignedTeamId) {
-                <span class="text-body-secondary">{{ 'artemisApp.courseOverview.exerciseList.userNotAssignedToTeamShort' | artemisTranslate }}</span>
+                <span class="text-body-secondary" jhiTranslate="artemisApp.courseOverview.exerciseList.userNotAssignedToTeamShort"></span>
             }
             @if (uninitialized) {
-                <span class="text-body-secondary">{{ 'artemisApp.courseOverview.exerciseList.userNotStartedExerciseShort' | artemisTranslate }}</span>
+                <span class="text-body-secondary" jhiTranslate="artemisApp.courseOverview.exerciseList.userNotStartedExerciseShort"></span>
             }
             @if (exerciseMissedDueDate) {
-                <span class="text-body-secondary">{{ 'artemisApp.courseOverview.exerciseList.exerciseMissedDueDateShort' | artemisTranslate }}</span>
+                <span class="text-body-secondary" jhiTranslate="artemisApp.courseOverview.exerciseList.exerciseMissedDueDateShort"></span>
             }
             @if (notSubmitted) {
-                <span class="text-body-secondary">{{ 'artemisApp.courseOverview.exerciseList.exerciseNotSubmittedShort' | artemisTranslate }}</span>
+                <span class="text-body-secondary" jhiTranslate="artemisApp.courseOverview.exerciseList.exerciseNotSubmittedShort"></span>
             }
             @if (!notSubmitted && studentParticipation?.initializationState === InitializationState.FINISHED) {
-                <span class="text-body-secondary">{{ 'artemisApp.courseOverview.exerciseList.userSubmittedShort' | artemisTranslate }}</span>
+                <span class="text-body-secondary" jhiTranslate="artemisApp.courseOverview.exerciseList.userSubmittedShort"></span>
             }
             @if (studentParticipation?.initializationState === InitializationState.INITIALIZED && exercise.type === ExerciseType.QUIZ) {
-                <span class="text-body-secondary">{{ 'artemisApp.courseOverview.exerciseList.userParticipatingShort' | artemisTranslate }}</span>
+                <span class="text-body-secondary" jhiTranslate="artemisApp.courseOverview.exerciseList.userParticipatingShort"></span>
             }
             @if (quizNotStarted) {
-                <span class="text-body-secondary">{{ 'artemisApp.courseOverview.exerciseList.quizNotStartedShort' | artemisTranslate }}</span>
+                <span class="text-body-secondary" jhiTranslate="artemisApp.courseOverview.exerciseList.quizNotStartedShort"></span>
             }
         </div>
     }
diff --git a/src/main/webapp/app/overview/visualizations/exercise-scores-chart/exercise-scores-chart.component.html b/src/main/webapp/app/overview/visualizations/exercise-scores-chart/exercise-scores-chart.component.html
index fa692113e2d2..c4918ffe1525 100644
--- a/src/main/webapp/app/overview/visualizations/exercise-scores-chart/exercise-scores-chart.component.html
+++ b/src/main/webapp/app/overview/visualizations/exercise-scores-chart/exercise-scores-chart.component.html
@@ -1,5 +1,5 @@
 <div class="d-flex">
-    <h2 class="col-9">{{ 'artemisApp.exercise-scores-chart.title' | artemisTranslate }}</h2>
+    <h2 class="col-9" jhiTranslate="artemisApp.exercise-scores-chart.title"></h2>
     @if (exerciseTypeFilter.typeSet.size > 0) {
         <div class="filter mb-2" aria-label="Filter Dropdown" ngbDropdown>
             <button
@@ -10,11 +10,11 @@ <h2 class="col-9">{{ 'artemisApp.exercise-scores-chart.title' | artemisTranslate
                 id="filter-dropdown-button"
             >
                 <fa-icon [icon]="faFilter" />
-                <span>{{ 'artemisApp.courseOverview.exerciseList.filter' | artemisTranslate: { num: exerciseTypeFilter.numberOfActiveFilters } }}</span>
+                <span jhiTranslate="artemisApp.courseOverview.exerciseList.filter" [translateValues]="{ num: exerciseTypeFilter.numberOfActiveFilters }"></span>
             </button>
             <ul ngbDropdownMenu class="checkbox-menu text-nowrap pe-2" aria-labelledby="filter-dropdown-button">
                 <li>
-                    <b class="ms-2">{{ 'artemisApp.exercise-scores-chart.includeType' | artemisTranslate }}</b>
+                    <b class="ms-2" jhiTranslate="artemisApp.exercise-scores-chart.includeType"></b>
                 </li>
                 @for (type of exerciseTypeFilter.typeSet; track type) {
                     <li>
diff --git a/src/main/webapp/app/shared/components/code-button/code-button.component.html b/src/main/webapp/app/shared/components/code-button/code-button.component.html
index 6cbcb0d59b52..89d1b5aa952f 100644
--- a/src/main/webapp/app/shared/components/code-button/code-button.component.html
+++ b/src/main/webapp/app/shared/components/code-button/code-button.component.html
@@ -20,9 +20,7 @@
         @if (participations && participations.length > 1) {
             <div class="form-check form-switch">
                 <input mdbCheckbox id="switch-practice" class="form-check-input" type="checkbox" [checked]="isPracticeMode" (click)="switchPracticeMode()" />
-                <label class="form-check-label" for="switch-practice">
-                    {{ 'artemisApp.exerciseActions.practiceMode.title' | artemisTranslate }}
-                </label>
+                <label class="form-check-label" for="switch-practice" jhiTranslate="artemisApp.exerciseActions.practiceMode.title"></label>
             </div>
         }
         <h5>{{ cloneHeadline | artemisTranslate }}</h5>
@@ -92,9 +90,8 @@ <h5>{{ cloneHeadline | artemisTranslate }}</h5>
             class="btn btn-primary btn-sm me-2"
             type="button"
             style="min-width: 100px"
-        >
-            {{ wasCopied ? ('artemisApp.exerciseActions.copiedUrl' | artemisTranslate) : ('artemisApp.exerciseActions.copyUrl' | artemisTranslate) }}
-        </button>
+            jhiTranslate="{{ wasCopied ? 'artemisApp.exerciseActions.copiedUrl' : 'artemisApp.exerciseActions.copyUrl' }}"
+        ></button>
         <a class="btn btn-primary btn-sm" [href]="buildVSCodeUrl() | safeUrl" jhiTranslate="artemisApp.exerciseActions.cloneVSCode.button"> </a>
         <jhi-help-icon placement="right auto" text="artemisApp.exerciseActions.cloneVSCode.helpIcon" />
         <a class="btn btn-primary btn-sm" target="hidden-iframe" [href]="buildJetbrainsUrl() | safeUrl" jhiTranslate="artemisApp.exerciseActions.cloneIntelliJ.button"> </a>
diff --git a/src/main/webapp/app/shared/components/not-released-tag.component.html b/src/main/webapp/app/shared/components/not-released-tag.component.html
index c9aca3c9a85e..3a2f4c880ba1 100644
--- a/src/main/webapp/app/shared/components/not-released-tag.component.html
+++ b/src/main/webapp/app/shared/components/not-released-tag.component.html
@@ -4,7 +4,6 @@
         [class.ms-1]="!noMargin"
         container="body"
         ngbTooltip="{{ 'artemisApp.courseOverview.exerciseList.notReleasedTooltip' | artemisTranslate }}{{ exercise.releaseDate | artemisDate }}"
-    >
-        {{ 'artemisApp.courseOverview.exerciseList.notReleased' | artemisTranslate }}
-    </span>
+        jhiTranslate="artemisApp.courseOverview.exerciseList.notReleased"
+    ></span>
 }
diff --git a/src/main/webapp/app/shared/components/open-code-editor-button/open-code-editor-button.component.html b/src/main/webapp/app/shared/components/open-code-editor-button/open-code-editor-button.component.html
index f588a174193f..ce94f86bca0c 100644
--- a/src/main/webapp/app/shared/components/open-code-editor-button/open-code-editor-button.component.html
+++ b/src/main/webapp/app/shared/components/open-code-editor-button/open-code-editor-button.component.html
@@ -32,9 +32,7 @@
         @if (participations && participations.length > 1) {
             <div class="form-check form-switch">
                 <input id="switchPracticeMode" mdbCheckbox class="form-check-input" type="checkbox" [checked]="isPracticeMode" (click)="switchPracticeMode()" />
-                <label for="switchPracticeMode" class="form-check-label">
-                    {{ 'artemisApp.exerciseActions.practiceMode.title' | artemisTranslate }}
-                </label>
+                <label for="switchPracticeMode" class="form-check-label" jhiTranslate="artemisApp.exerciseActions.practiceMode.title"></label>
             </div>
         }
         <button
diff --git a/src/main/webapp/app/shared/components/reset-repo-button/reset-repo-button.component.html b/src/main/webapp/app/shared/components/reset-repo-button/reset-repo-button.component.html
index f70e5158a5b2..2b3c74b73d7e 100644
--- a/src/main/webapp/app/shared/components/reset-repo-button/reset-repo-button.component.html
+++ b/src/main/webapp/app/shared/components/reset-repo-button/reset-repo-button.component.html
@@ -21,12 +21,12 @@
     <ng-template #popContent>
         <form style="max-width: 660px" #resetForm="ngForm">
             <h5>{{ 'artemisApp.exerciseActions.resetRepository.title' + (practiceParticipation ? 'Practice' : 'Graded') | artemisTranslate }}</h5>
-            <p>{{ 'artemisApp.exerciseActions.resetRepository.explanation' | artemisTranslate }}</p>
+            <p jhiTranslate="artemisApp.exerciseActions.resetRepository.explanation"></p>
             @if (exercise.allowOfflineIde) {
-                <p>{{ 'artemisApp.exerciseActions.resetRepository.offlineIDEExplanation' | artemisTranslate }}</p>
+                <p jhiTranslate="artemisApp.exerciseActions.resetRepository.offlineIDEExplanation"></p>
             }
             @if (gradedParticipation && practiceParticipation) {
-                <p>{{ 'artemisApp.exerciseActions.resetRepository.repositoryChoice' | artemisTranslate }}</p>
+                <p jhiTranslate="artemisApp.exerciseActions.resetRepository.repositoryChoice"></p>
             }
             <p
                 [jhiTranslate]="'artemisApp.exerciseActions.resetRepository.question' + (practiceParticipation ? 'Practice' : 'Graded')"
diff --git a/src/main/webapp/app/shared/components/start-practice-mode-button/start-practice-mode-button.component.html b/src/main/webapp/app/shared/components/start-practice-mode-button/start-practice-mode-button.component.html
index 0530c1d14972..928499601975 100644
--- a/src/main/webapp/app/shared/components/start-practice-mode-button/start-practice-mode-button.component.html
+++ b/src/main/webapp/app/shared/components/start-practice-mode-button/start-practice-mode-button.component.html
@@ -14,10 +14,10 @@
     ></button>
     <ng-template #popContent>
         <div class="start-practice-popover">
-            <h5>{{ 'artemisApp.exerciseActions.practiceMode.title' | artemisTranslate }}</h5>
-            <p>{{ 'artemisApp.exerciseActions.practiceMode.explanation' | artemisTranslate }}</p>
+            <h5 jhiTranslate="artemisApp.exerciseActions.practiceMode.title"></h5>
+            <p jhiTranslate="artemisApp.exerciseActions.practiceMode.explanation"></p>
             @if (gradedStudentParticipation) {
-                <p>{{ 'artemisApp.exerciseActions.practiceMode.repositoryChoice' | artemisTranslate }}</p>
+                <p jhiTranslate="artemisApp.exerciseActions.practiceMode.repositoryChoice"></p>
             }
             <div class="button-footer">
                 <button
diff --git a/src/main/webapp/app/shared/connection-warning/connection-warning.component.html b/src/main/webapp/app/shared/connection-warning/connection-warning.component.html
index ed662079efc4..bdb109ffdfc7 100644
--- a/src/main/webapp/app/shared/connection-warning/connection-warning.component.html
+++ b/src/main/webapp/app/shared/connection-warning/connection-warning.component.html
@@ -1,8 +1,6 @@
 <ng-template #popContent class="connection-warning-popover">
     <fa-icon [icon]="faExclamationCircle" size="2x" />
-    <div>
-        {{ 'artemisApp.disconnectedAlert' | artemisTranslate }}
-    </div>
+    <div jhiTranslate="artemisApp.disconnectedAlert"></div>
     <jhi-close-circle (click)="popover.close()" />
 </ng-template>
 <div
diff --git a/src/main/webapp/app/shared/consistency-check/consistency-check.component.html b/src/main/webapp/app/shared/consistency-check/consistency-check.component.html
index cda7d564e238..4db68ba0986e 100644
--- a/src/main/webapp/app/shared/consistency-check/consistency-check.component.html
+++ b/src/main/webapp/app/shared/consistency-check/consistency-check.component.html
@@ -11,7 +11,7 @@ <h4 class="modal-title" jhiTranslate="artemisApp.consistencyCheck.title"></h4>
             @if (isLoading) {
                 <div class="d-flex justify-content-center m-5">
                     <div class="spinner-border" role="status">
-                        <span class="sr-only">{{ 'loading' | artemisTranslate }}</span>
+                        <span class="sr-only" jhiTranslate="loading"></span>
                     </div>
                 </div>
             } @else {
diff --git a/src/main/webapp/app/shared/course-users-selector/course-users-selector.component.html b/src/main/webapp/app/shared/course-users-selector/course-users-selector.component.html
index ed2531800f65..78e11295962c 100644
--- a/src/main/webapp/app/shared/course-users-selector/course-users-selector.component.html
+++ b/src/main/webapp/app/shared/course-users-selector/course-users-selector.component.html
@@ -20,28 +20,28 @@
             #instance="ngbTypeahead"
         />
         @if (isSearching) {
-            <small class="form-text text-body-secondary">{{ 'artemisApp.userSelector.searchingText' | artemisTranslate }}</small>
+            <small class="form-text text-body-secondary" jhiTranslate="artemisApp.userSelector.searchingText"></small>
             <br />
         }
         @if (searchFailed) {
-            <small>{{ 'artemisApp.userSelector.searchFailedText' | artemisTranslate }}</small>
+            <small jhiTranslate="artemisApp.userSelector.searchFailedText"></small>
             <br />
         }
         @if (searchStudents) {
-            <small class="form-text text-body-secondary">{{ 'artemisApp.userSelector.helpText' | artemisTranslate }}</small>
+            <small class="form-text text-body-secondary" jhiTranslate="artemisApp.userSelector.helpText"></small>
         }
     </div>
     <div class="text-end">
         @if (rolesToAllowSearchingIn.includes('students')) {
             <div class="form-check form-check-inline">
                 <input type="checkbox" class="form-check-input" id="students" [checked]="searchStudents" (change)="searchStudents = !searchStudents; onFilterChange()" />
-                <label class="form-check-label" for="students">{{ 'artemisApp.course.students' | artemisTranslate }}</label>
+                <label class="form-check-label" for="students" jhiTranslate="artemisApp.course.students"></label>
             </div>
         }
         @if (rolesToAllowSearchingIn.includes('tutors')) {
             <div class="form-check form-check-inline">
                 <input type="checkbox" class="form-check-input" id="tutors" [checked]="searchTutors" (change)="searchTutors = !searchTutors; onFilterChange()" />
-                <label class="form-check-label" for="tutors">{{ 'artemisApp.course.tutors' | artemisTranslate }}</label>
+                <label class="form-check-label" for="tutors" jhiTranslate="artemisApp.course.tutors"></label>
             </div>
         }
         @if (rolesToAllowSearchingIn.includes('instructors')) {
@@ -53,7 +53,7 @@
                     [checked]="searchInstructors"
                     (change)="searchInstructors = !searchInstructors; onFilterChange()"
                 />
-                <label class="form-check-label" for="instructors">{{ 'artemisApp.course.instructors' | artemisTranslate }}</label>
+                <label class="form-check-label" for="instructors" jhiTranslate="artemisApp.course.instructors"></label>
             </div>
         }
     </div>
diff --git a/src/main/webapp/app/shared/dashboards/tutor-leaderboard/tutor-leaderboard.component.html b/src/main/webapp/app/shared/dashboards/tutor-leaderboard/tutor-leaderboard.component.html
index c914924f30b2..28b4b692e1e5 100644
--- a/src/main/webapp/app/shared/dashboards/tutor-leaderboard/tutor-leaderboard.component.html
+++ b/src/main/webapp/app/shared/dashboards/tutor-leaderboard/tutor-leaderboard.component.html
@@ -4,43 +4,43 @@
             <tr jhiSort [(predicate)]="sortPredicate" [(ascending)]="reverseOrder" (sortChange)="sortRows()">
                 <th>#</th>
                 <th jhiSortBy="name">
-                    <a class="th-link">{{ 'artemisApp.assessmentDashboard.tutorLeaderboard.name' | artemisTranslate }}</a>
+                    <a class="th-link" jhiTranslate="artemisApp.assessmentDashboard.tutorLeaderboard.name"></a>
                     <fa-icon [icon]="faSort" />
                 </th>
                 <th jhiSortBy="points">
-                    <a class="th-link">{{ 'artemisApp.assessmentDashboard.tutorLeaderboard.points' | artemisTranslate }}</a>
+                    <a class="th-link" jhiTranslate="artemisApp.assessmentDashboard.tutorLeaderboard.points"></a>
                     <fa-icon [icon]="faSort" />
                 </th>
                 <th jhiSortBy="numberOfAssessments">
-                    <a class="th-link">{{ 'artemisApp.assessmentDashboard.tutorLeaderboard.numberOfAssessments' | artemisTranslate }}</a>
+                    <a class="th-link" jhiTranslate="artemisApp.assessmentDashboard.tutorLeaderboard.numberOfAssessments"></a>
                     <fa-icon [icon]="faSort" />
                 </th>
                 <th jhiSortBy="numberOfAcceptedComplaints">
-                    <a class="th-link">{{ 'artemisApp.assessmentDashboard.tutorLeaderboard.numberOfAcceptedComplaints' | artemisTranslate }}</a>
+                    <a class="th-link" jhiTranslate="artemisApp.assessmentDashboard.tutorLeaderboard.numberOfAcceptedComplaints"></a>
                     <fa-icon [icon]="faSort" />
                 </th>
                 @if (!isExamMode) {
                     <th jhiSortBy="numberOfNotAnsweredMoreFeedbackRequests">
-                        <a class="th-link">{{ 'artemisApp.assessmentDashboard.tutorLeaderboard.numberOfNotAnsweredMoreFeedbackRequests' | artemisTranslate }}</a>
+                        <a class="th-link" jhiTranslate="artemisApp.assessmentDashboard.tutorLeaderboard.numberOfNotAnsweredMoreFeedbackRequests"></a>
                         <fa-icon [icon]="faSort" />
                     </th>
                 }
                 <th jhiSortBy="numberOfComplaintResponses">
-                    <a class="th-link">{{ 'artemisApp.assessmentDashboard.tutorLeaderboard.numberOfComplaintResponses' | artemisTranslate }}</a>
+                    <a class="th-link" jhiTranslate="artemisApp.assessmentDashboard.tutorLeaderboard.numberOfComplaintResponses"></a>
                     <fa-icon [icon]="faSort" />
                 </th>
                 @if (!isExamMode) {
                     <th jhiSortBy="numberOfAnsweredMoreFeedbackRequests">
-                        <a class="th-link">{{ 'artemisApp.assessmentDashboard.tutorLeaderboard.numberOfAnsweredMoreFeedbackRequests' | artemisTranslate }}</a>
+                        <a class="th-link" jhiTranslate="artemisApp.assessmentDashboard.tutorLeaderboard.numberOfAnsweredMoreFeedbackRequests"></a>
                         <fa-icon [icon]="faSort" />
                     </th>
                 }
                 <th jhiSortBy="averageScore">
-                    <a class="th-link">{{ 'artemisApp.assessmentDashboard.tutorLeaderboard.averageScore' | artemisTranslate }}</a>
+                    <a class="th-link" jhiTranslate="artemisApp.assessmentDashboard.tutorLeaderboard.averageScore"></a>
                     <fa-icon [icon]="faSort" />
                 </th>
                 <th jhiSortBy="averageRating">
-                    <a class="th-link">{{ 'artemisApp.assessmentDashboard.tutorLeaderboard.averageRating' | artemisTranslate }}</a>
+                    <a class="th-link" jhiTranslate="artemisApp.assessmentDashboard.tutorLeaderboard.averageRating"></a>
                     <fa-icon [icon]="faSort" />
                 </th>
             </tr>
diff --git a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html
index 075a103d96c8..b1983a2ef7d2 100644
--- a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html
+++ b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html
@@ -41,7 +41,7 @@
     <owl-date-time [startAt]="startDate" #dt />
 </div>
 @if (dateInput.invalid || (requiredField && !dateInput.value)) {
-    <div class="invalid-feedback">{{ 'entity.dateMissingOrNotValid' | artemisTranslate: { labelName: labelName } }}</div>
+    <div class="invalid-feedback" jhiTranslate="entity.dateMissingOrNotValid" [translateValues]="{ labelName: labelName }"></div>
 }
 @if (warning) {
     <div class="invalid-feedback">
diff --git a/src/main/webapp/app/shared/exercise-categories/exercise-categories.component.html b/src/main/webapp/app/shared/exercise-categories/exercise-categories.component.html
index b78d7f984ae9..dd757a2d5b36 100644
--- a/src/main/webapp/app/shared/exercise-categories/exercise-categories.component.html
+++ b/src/main/webapp/app/shared/exercise-categories/exercise-categories.component.html
@@ -7,7 +7,7 @@ <h4 class="fw-medium">
 }
 @if (asQuizExercise(exercise).isActiveQuiz && showTags.quizLive) {
     <h4 class="fw-medium">
-        <span class="badge bg-success">{{ 'artemisApp.courseOverview.exerciseList.live' | artemisTranslate }}</span>
+        <span class="badge bg-success" jhiTranslate="artemisApp.courseOverview.exerciseList.live"></span>
     </h4>
 }
 @for (category of exercise.categories; track category) {
diff --git a/src/main/webapp/app/shared/layouts/navbar/navbar.component.html b/src/main/webapp/app/shared/layouts/navbar/navbar.component.html
index af13f560659b..556aee6ce6bb 100644
--- a/src/main/webapp/app/shared/layouts/navbar/navbar.component.html
+++ b/src/main/webapp/app/shared/layouts/navbar/navbar.component.html
@@ -36,7 +36,7 @@
                     <li>
                         <a class="dropdown-item" [routerLink]="['/user-settings']" (click)="collapseNavbar()">
                             <fa-icon [icon]="faCog" [fixedWidth]="true" />
-                            <span>{{ 'global.menu.settings' | artemisTranslate }}</span>
+                            <span jhiTranslate="global.menu.settings"></span>
                         </a>
                     </li>
                     <div class="dropdown-divider"></div>
diff --git a/src/main/webapp/app/shared/loading-indicator-container/loading-indicator-container.component.html b/src/main/webapp/app/shared/loading-indicator-container/loading-indicator-container.component.html
index 785e34640ba0..46f976b39ec6 100644
--- a/src/main/webapp/app/shared/loading-indicator-container/loading-indicator-container.component.html
+++ b/src/main/webapp/app/shared/loading-indicator-container/loading-indicator-container.component.html
@@ -1,7 +1,7 @@
 @if (isLoading) {
     <div class="d-flex justify-content-center spinner">
         <div class="spinner-border" role="status">
-            <span class="sr-only">{{ 'loading' | artemisTranslate }}</span>
+            <span class="sr-only" jhiTranslate="loading"></span>
         </div>
     </div>
 } @else {
diff --git a/src/main/webapp/app/shared/markdown-editor/markdown-editor.component.html b/src/main/webapp/app/shared/markdown-editor/markdown-editor.component.html
index 441a919c35f5..9b9c93c7be41 100644
--- a/src/main/webapp/app/shared/markdown-editor/markdown-editor.component.html
+++ b/src/main/webapp/app/shared/markdown-editor/markdown-editor.component.html
@@ -3,7 +3,7 @@
         <!-- editor -->
         <ng-container ngbNavItem="editor_edit">
             @if (showEditButton) {
-                <a ngbNavLink class="btn-sm text-normal px-2 py-0 m-0">{{ 'entity.action.edit' | artemisTranslate }}</a>
+                <a ngbNavLink class="btn-sm text-normal px-2 py-0 m-0" jhiTranslate="entity.action.edit"></a>
             }
             <ng-template ngbNavContent>
                 <div [ngStyle]="{ 'minHeight.px': minHeightEditor }" class="height-100 markdown-editor d-flex flex-column" [id]="uniqueMarkdownEditorId">
@@ -32,7 +32,7 @@
                         />
                         <label [for]="'file-upload ' + uniqueMarkdownEditorId" class="markdown-editor__file-label d-inline">
                             <div class="row mx-0 align-items-baseline">
-                                <span class="col upload-subtitle">{{ 'artemisApp.markdownEditor.fileUpload' | artemisTranslate }}</span>
+                                <span class="col upload-subtitle" jhiTranslate="artemisApp.markdownEditor.fileUpload"></span>
                                 <a class="col-auto" href="http://demo.showdownjs.com">
                                     <fa-icon [icon]="faQuestionCircle" [ngbTooltip]="'artemisApp.markdownEditor.guide' | artemisTranslate" />
                                 </a>
@@ -49,7 +49,7 @@
         <!-- visual Mode -->
         <ng-container ngbNavItem="editor_visual">
             @if (showVisualModeButton) {
-                <a ngbNavLink class="btn-sm text-normal px-2 py-0 m-0">{{ 'entity.action.visual' | artemisTranslate }}</a>
+                <a ngbNavLink class="btn-sm text-normal px-2 py-0 m-0" jhiTranslate="entity.action.visual"></a>
             }
             <ng-template ngbNavContent>
                 <ng-content select="[#visual]" />
@@ -58,7 +58,7 @@
         <!-- preview -->
         <ng-container ngbNavItem="editor_preview">
             @if (showPreviewButton) {
-                <a ngbNavLink class="btn-sm text-normal px-2 py-0 m-0">{{ 'entity.action.preview' | artemisTranslate }}</a>
+                <a ngbNavLink class="btn-sm text-normal px-2 py-0 m-0" jhiTranslate="entity.action.preview"></a>
             }
             <ng-template ngbNavContent>
                 <ng-content select="[#preview]" />
@@ -81,9 +81,13 @@
                         <!--style command -->
                         @if (headerCommands.length > 0) {
                             <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
-                                <button class="btn btn-sm px-2 py-0" type="button" id="dropdownBasic1" ngbDropdownToggle>
-                                    {{ 'artemisApp.multipleChoiceQuestion.editor.style' | artemisTranslate }}
-                                </button>
+                                <button
+                                    class="btn btn-sm px-2 py-0"
+                                    type="button"
+                                    id="dropdownBasic1"
+                                    ngbDropdownToggle
+                                    jhiTranslate="artemisApp.multipleChoiceQuestion.editor.style"
+                                ></button>
                                 <div class="dropdown-menu" ngbDropdownMenu>
                                     @for (command of headerCommands; track command) {
                                         <button class="dropdown-item" (click)="command.execute()" type="button">
@@ -171,7 +175,7 @@
                         <!--color picker command -->
                         @if (colorCommands.length > 0) {
                             <div class="btn-group col-xs-6">
-                                <div class="color-preview btn btn-sm px-2 py-0" (click)="openColorSelector($event)">{{ 'artemisApp.markdownEditor.color' | artemisTranslate }}</div>
+                                <div class="color-preview btn btn-sm px-2 py-0" (click)="openColorSelector($event)" jhiTranslate="artemisApp.markdownEditor.color"></div>
                                 <jhi-color-selector [tagColors]="markdownColors" (selectedColor)="onSelectedColor($event)" />
                             </div>
                         }
diff --git a/src/main/webapp/app/shared/metis/message/message-inline-input/message-inline-input.component.html b/src/main/webapp/app/shared/metis/message/message-inline-input/message-inline-input.component.html
index 9233592719d3..2e2e9d8fa18f 100644
--- a/src/main/webapp/app/shared/metis/message/message-inline-input/message-inline-input.component.html
+++ b/src/main/webapp/app/shared/metis/message/message-inline-input/message-inline-input.component.html
@@ -11,10 +11,10 @@
             @if (!warningDismissed) {
                 <div class="alert alert-warning alert-dismissible text-start fade show" role="alert">
                     <button type="button" class="btn-close" (click)="closeAlert()" aria-label="Close"></button>
-                    <h4 class="alert-heading">{{ 'artemisApp.messageWarning.headerText' | artemisTranslate }}</h4>
-                    <p>{{ 'artemisApp.messageWarning.mainParagraph' | artemisTranslate }}</p>
+                    <h4 class="alert-heading" jhiTranslate="artemisApp.messageWarning.headerText"></h4>
+                    <p jhiTranslate="artemisApp.messageWarning.mainParagraph"></p>
                     <hr />
-                    <p class="mb-0">{{ 'artemisApp.messageWarning.lastParagraph' | artemisTranslate }}</p>
+                    <p class="mb-0" jhiTranslate="artemisApp.messageWarning.lastParagraph"></p>
                 </div>
             }
             @if (editType === EditType.UPDATE) {
diff --git a/src/main/webapp/app/shared/metis/message/message-reply-inline-input/message-reply-inline-input.component.html b/src/main/webapp/app/shared/metis/message/message-reply-inline-input/message-reply-inline-input.component.html
index 79fa12a7be05..6ae8fa99fa7b 100644
--- a/src/main/webapp/app/shared/metis/message/message-reply-inline-input/message-reply-inline-input.component.html
+++ b/src/main/webapp/app/shared/metis/message/message-reply-inline-input/message-reply-inline-input.component.html
@@ -12,10 +12,10 @@
             @if (!warningDismissed) {
                 <div class="alert alert-warning alert-dismissible text-start fade show" role="alert">
                     <button type="button" class="btn-close" (click)="closeAlert()" aria-label="Close"></button>
-                    <h4 class="alert-heading">{{ 'artemisApp.messageWarning.headerText' | artemisTranslate }}</h4>
-                    <p>{{ 'artemisApp.messageWarning.mainParagraph' | artemisTranslate }}</p>
+                    <h4 class="alert-heading" jhiTranslate="artemisApp.messageWarning.headerText"></h4>
+                    <p jhiTranslate="artemisApp.messageWarning.mainParagraph"></p>
                     <hr />
-                    <p class="mb-0">{{ 'artemisApp.messageWarning.lastParagraph' | artemisTranslate }}</p>
+                    <p class="mb-0" jhiTranslate="artemisApp.messageWarning.lastParagraph"></p>
                 </div>
             }
             @if (editType === EditType.UPDATE) {
diff --git a/src/main/webapp/app/shared/metis/posting-content/posting-content-part/posting-content-part.component.html b/src/main/webapp/app/shared/metis/posting-content/posting-content-part/posting-content-part.component.html
index dca01f77b208..d564239cc342 100644
--- a/src/main/webapp/app/shared/metis/posting-content/posting-content-part/posting-content-part.component.html
+++ b/src/main/webapp/app/shared/metis/posting-content/posting-content-part/posting-content-part.component.html
@@ -39,9 +39,7 @@
         </a>
         @if (imageNotFound) {
             <div class="card">
-                <h5 class="card-body">
-                    <fa-icon class="px-1" [icon]="faBan" /><span>{{ 'artemisApp.markdownEditor.preview.slideNotFound' | artemisTranslate }}</span>
-                </h5>
+                <h5 class="card-body"><fa-icon class="px-1" [icon]="faBan" /><span jhiTranslate="artemisApp.markdownEditor.preview.slideNotFound"></span></h5>
             </div>
         }
     </div>
diff --git a/src/main/webapp/app/shared/metis/posting-content/posting-content.component.html b/src/main/webapp/app/shared/metis/posting-content/posting-content.component.html
index 8ad661f40efd..6e952f156bcb 100644
--- a/src/main/webapp/app/shared/metis/posting-content/posting-content.component.html
+++ b/src/main/webapp/app/shared/metis/posting-content/posting-content.component.html
@@ -5,9 +5,7 @@
             <span class="clickable p-0">
                 <fa-icon [icon]="showContent ? faAngleUp : faAngleDown" [size]="'xs'" [ngStyle]="{ color: '#6a737d' }" (click)="showContent = !showContent" />
             </span>
-            <span class="toggle-content">
-                {{ showContent ? ('artemisApp.metis.post.collapseContent' | artemisTranslate) : ('artemisApp.metis.post.showContent' | artemisTranslate) }}
-            </span>
+            <span class="toggle-content" jhiTranslate="{{ showContent ? 'artemisApp.metis.post.collapseContent' : 'artemisApp.metis.post.showContent' }}"></span>
             @if (showContent) {
                 <div>
                     @for (postingContentPart of postingContentParts; track postingContentPart) {
@@ -18,7 +16,7 @@
                         />
                     }
                     @if (isEdited) {
-                        <span class="edited-text">{{ 'artemisApp.metis.edited' | artemisTranslate }}</span>
+                        <span class="edited-text" jhiTranslate="artemisApp.metis.edited"></span>
                     }
                 </div>
             }
@@ -35,7 +33,7 @@
                 />
             }
             @if (isEdited) {
-                <span class="edited-text">{{ 'artemisApp.metis.edited' | artemisTranslate }}</span>
+                <span class="edited-text" jhiTranslate="artemisApp.metis.edited"></span>
             }
             <jhi-link-preview-container [data]="content" [author]="author" [posting]="posting" [isEdited]="isEdited" [isReply]="isReply" />
         </div>
diff --git a/src/main/webapp/app/shared/metis/posting-create-edit-modal/post-create-edit-modal/post-create-edit-modal.component.html b/src/main/webapp/app/shared/metis/posting-create-edit-modal/post-create-edit-modal/post-create-edit-modal.component.html
index eb40b78344cd..cd2a9ff14182 100644
--- a/src/main/webapp/app/shared/metis/posting-create-edit-modal/post-create-edit-modal/post-create-edit-modal.component.html
+++ b/src/main/webapp/app/shared/metis/posting-create-edit-modal/post-create-edit-modal/post-create-edit-modal.component.html
@@ -7,9 +7,7 @@ <h4 class="modal-title">{{ modalTitle | artemisTranslate }}</h4>
         <div class="modal-body">
             <!-- info if announcement is created-->
             @if (this.editType === EditType.CREATE && isCommunicationPage && getAsChannel(posting.conversation)?.isAnnouncementChannel) {
-                <div class="alert alert-warning">
-                    {{ 'artemisApp.metis.post.announcementHint' | artemisTranslate }}
-                </div>
+                <div class="alert alert-warning" jhiTranslate="artemisApp.metis.post.announcementHint"></div>
             }
             <!-- title -->
             <div class="position-relative mb-3">
diff --git a/src/main/webapp/app/shared/notification/notification-sidebar/notification-sidebar.component.html b/src/main/webapp/app/shared/notification/notification-sidebar/notification-sidebar.component.html
index 7b3711efaa4e..87efecdeb42c 100644
--- a/src/main/webapp/app/shared/notification/notification-sidebar/notification-sidebar.component.html
+++ b/src/main/webapp/app/shared/notification/notification-sidebar/notification-sidebar.component.html
@@ -22,9 +22,7 @@
                         <fa-icon class="ng-fa-icon" [icon]="faCog" />
                     </a>
                 </div>
-                <h5 class="mb-3 text-center fw-medium">
-                    {{ 'artemisApp.notification.notifications' | artemisTranslate }}
-                </h5>
+                <h5 class="mb-3 text-center fw-medium" jhiTranslate="artemisApp.notification.notifications"></h5>
                 <button class="close header-icon border-0 bg-transparent pe-2" (click)="toggleSidebar()">
                     <fa-icon class="ng-fa-icon" [icon]="faTimes" />
                 </button>
@@ -37,16 +35,16 @@ <h5 class="mb-3 text-center fw-medium">
                         <fa-icon class="ng-fa-icon" [icon]="faEye" [ngbTooltip]="'artemisApp.notification.showAllSavedNotifications' | artemisTranslate" />
                     }
                 </button>
-                <small class="text-body-secondary">
-                    {{ 'artemisApp.notification.loadedNotificationCount' | artemisTranslate: { loaded: sortedNotifications?.length || '0', total: totalNotifications } }}
-                </small>
+                <small
+                    class="text-body-secondary"
+                    jhiTranslate="artemisApp.notification.loadedNotificationCount"
+                    [translateValues]="{ loaded: sortedNotifications?.length || '0', total: totalNotifications }"
+                ></small>
             </div>
         </div>
         <div id="notification-sidebar-container" (scroll)="onScroll()">
             @if (error) {
-                <div class="alert alert-danger mx-3" role="alert">
-                    {{ 'artemisApp.notification.unexpectedError' | artemisTranslate }}
-                </div>
+                <div class="alert alert-danger mx-3" role="alert" jhiTranslate="artemisApp.notification.unexpectedError"></div>
             }
             @for (notification of sortedNotifications; track notification) {
                 <div class="notification-item p-3" (click)="startNotification(notification)">
@@ -76,14 +74,10 @@ <h5 class="notification-title fw-medium">
                 </div>
             }
             @if (sortedNotifications.length > 0 && sortedNotifications.length >= totalNotifications) {
-                <small class="all-loaded text-center d-block mx-3 my-2">
-                    {{ 'artemisApp.notification.allLoaded' | artemisTranslate }}
-                </small>
+                <small class="all-loaded text-center d-block mx-3 my-2" jhiTranslate="artemisApp.notification.allLoaded"></small>
             }
             @if (sortedNotifications && sortedNotifications.length === 0) {
-                <span class="no-notifications">
-                    {{ 'artemisApp.notification.noNotifications' | artemisTranslate }}
-                </span>
+                <span class="no-notifications" jhiTranslate="artemisApp.notification.noNotifications"></span>
             }
         </div>
     </div>
diff --git a/src/main/webapp/app/shared/participant-scores/participant-scores-distribution/participant-scores-distribution.component.html b/src/main/webapp/app/shared/participant-scores/participant-scores-distribution/participant-scores-distribution.component.html
index a7b196bb2886..c5234a016536 100644
--- a/src/main/webapp/app/shared/participant-scores/participant-scores-distribution/participant-scores-distribution.component.html
+++ b/src/main/webapp/app/shared/participant-scores/participant-scores-distribution/participant-scores-distribution.component.html
@@ -28,17 +28,17 @@
         @if (gradingScaleExists && !isBonus) {
             <div class="d-flex justify-content-center align-items-center">
                 <div class="color-box insufficient-performance"></div>
-                <span class="ms-2">{{ 'artemisApp.examScores.insufficientPerformance' | artemisTranslate }}</span>
+                <span class="ms-2" jhiTranslate="artemisApp.examScores.insufficientPerformance"></span>
                 <div class="ms-4 color-box sufficient-performance"></div>
-                <span class="ms-2">{{ 'artemisApp.examScores.sufficientPerformance' | artemisTranslate }}</span>
+                <span class="ms-2" jhiTranslate="artemisApp.examScores.sufficientPerformance"></span>
             </div>
         }
         @if (!gradingScaleExists || isBonus) {
             <div class="d-flex justify-content-center align-items-center">
                 <div class="color-box critical-performance"></div>
-                <span class="ms-2">{{ 'artemisApp.examScores.criticalPerformance' | artemisTranslate }}</span>
+                <span class="ms-2" jhiTranslate="artemisApp.examScores.criticalPerformance"></span>
                 <div class="ms-4 color-box sufficient-performance"></div>
-                <span class="ms-2">{{ 'artemisApp.examScores.uncriticalPerformance' | artemisTranslate }}</span>
+                <span class="ms-2" jhiTranslate="artemisApp.examScores.uncriticalPerformance"></span>
             </div>
         }
         <jhi-help-icon class="ms-2" placement="right auto" text="{{ helpIconTooltip }}" />
diff --git a/src/main/webapp/app/shared/statistics-graph/statistics-average-score-graph.component.html b/src/main/webapp/app/shared/statistics-graph/statistics-average-score-graph.component.html
index 531278576856..961dc2547a02 100644
--- a/src/main/webapp/app/shared/statistics-graph/statistics-average-score-graph.component.html
+++ b/src/main/webapp/app/shared/statistics-graph/statistics-average-score-graph.component.html
@@ -1,6 +1,6 @@
 <div class="row mb-3 d-flex justify-content-center">
     <div class="col-xl-1 d-flex flex-column">
-        <h3>{{ 'artemisApp.course.averageScore' | artemisTranslate }}</h3>
+        <h3 jhiTranslate="artemisApp.course.averageScore"></h3>
         <h4>{{ 'artemisApp.courseStatistics.courseAverage' | artemisTranslate }}: {{ courseAverage }}%</h4>
     </div>
     <div class="row col-xl-11 chart-row">
@@ -58,15 +58,15 @@ <h4>{{ 'artemisApp.courseStatistics.courseAverage' | artemisTranslate }}: {{ cou
                         id="filter-dropdown-button"
                     >
                         <fa-icon [icon]="faFilter" />
-                        <span>{{
-                            'artemisApp.courseOverview.exerciseList.filter'
-                                | artemisTranslate: { num: exerciseTypeFilter.numberOfActiveFilters + chartCategoryFilter.numberOfActiveFilters }
-                        }}</span>
+                        <span
+                            jhiTranslate="artemisApp.courseOverview.exerciseList.filter"
+                            [translateValues]="{ num: exerciseTypeFilter.numberOfActiveFilters + chartCategoryFilter.numberOfActiveFilters }"
+                        ></span>
                     </button>
                     <ul ngbDropdownMenu class="checkbox-menu text-nowrap pe-2" aria-labelledby="filter-dropdown-button">
                         @if (exerciseTypeFilter.typeSet.size) {
                             <li>
-                                <b class="ms-2">{{ 'artemisApp.exercise-scores-chart.includeType' | artemisTranslate }}</b>
+                                <b class="ms-2" jhiTranslate="artemisApp.exercise-scores-chart.includeType"></b>
                             </li>
                         }
                         @for (type of exerciseTypeFilter.typeSet; track type) {
@@ -83,12 +83,12 @@ <h4>{{ 'artemisApp.courseStatistics.courseAverage' | artemisTranslate }}: {{ cou
                             </li>
                         }
                         <li class="mt-1 mb-1">
-                            <b class="ms-2">{{ 'artemisApp.courseOverview.statistics.includeIndividualCategories' | artemisTranslate }}</b>
+                            <b class="ms-2" jhiTranslate="artemisApp.courseOverview.statistics.includeIndividualCategories"></b>
                         </li>
                         <li>
                             <label class="mb-1">
                                 <input class="ms-2 form-check-input" (change)="toggleAllCategories()" [checked]="chartCategoryFilter.allCategoriesSelected" type="checkbox" />
-                                <b class="ms-2">{{ 'artemisApp.courseOverview.statistics.includeAllCategories' | artemisTranslate }}</b>
+                                <b class="ms-2" jhiTranslate="artemisApp.courseOverview.statistics.includeAllCategories"></b>
                             </label>
                         </li>
                         @if (chartCategoryFilter.exercisesWithoutCategoriesPresent) {
@@ -100,7 +100,7 @@ <h4>{{ 'artemisApp.courseStatistics.courseAverage' | artemisTranslate }}: {{ cou
                                         [checked]="chartCategoryFilter.includeExercisesWithNoCategory"
                                         type="checkbox"
                                     />
-                                    <span class="ms-2">{{ 'artemisApp.courseOverview.statistics.exercisesWithNoCategories' | artemisTranslate }}</span>
+                                    <span class="ms-2" jhiTranslate="artemisApp.courseOverview.statistics.exercisesWithNoCategories"></span>
                                 </label>
                             </li>
                         }
diff --git a/src/main/webapp/app/shared/statistics-graph/statistics-score-distribution-graph.component.html b/src/main/webapp/app/shared/statistics-graph/statistics-score-distribution-graph.component.html
index 2f15e2d4e415..88e1222da5fe 100644
--- a/src/main/webapp/app/shared/statistics-graph/statistics-score-distribution-graph.component.html
+++ b/src/main/webapp/app/shared/statistics-graph/statistics-score-distribution-graph.component.html
@@ -1,6 +1,6 @@
 <div class="row mb-3">
     <div class="col-xl-2">
-        <h3>{{ 'statistics.score_distribution' | artemisTranslate }}</h3>
+        <h3 jhiTranslate="statistics.score_distribution"></h3>
     </div>
     <div #containerRef class="col-xl-9">
         <ngx-charts-bar-vertical
diff --git a/src/main/webapp/app/shared/type-ahead-search-field/type-ahead-user-search-field.component.html b/src/main/webapp/app/shared/type-ahead-search-field/type-ahead-user-search-field.component.html
index 7dbc4fc19bd5..7b0bcf687577 100644
--- a/src/main/webapp/app/shared/type-ahead-search-field/type-ahead-user-search-field.component.html
+++ b/src/main/webapp/app/shared/type-ahead-search-field/type-ahead-user-search-field.component.html
@@ -1,4 +1,4 @@
-<label class="mb-1 form-check-label" for="typeahead-user-login">{{ 'artemisApp.dataExport.loginOrName' | artemisTranslate }}</label>
+<label class="mb-1 form-check-label" for="typeahead-user-login" jhiTranslate="artemisApp.dataExport.loginOrName"></label>
 <div class="search-container">
     <input
         id="typeahead-user-login"
diff --git a/src/main/webapp/app/shared/user-import/users-import-dialog.component.html b/src/main/webapp/app/shared/user-import/users-import-dialog.component.html
index 325865a635d8..8c9e6b6fd7a1 100644
--- a/src/main/webapp/app/shared/user-import/users-import-dialog.component.html
+++ b/src/main/webapp/app/shared/user-import/users-import-dialog.component.html
@@ -175,16 +175,16 @@ <h4 class="modal-title">
             <div class="flex-shrink-0 me-2 d-flex">
                 @if (!hasImported) {
                     <div>
-                        <strong>{{ 'artemisApp.importUsers.numberOfUsers' | artemisTranslate }}</strong>
+                        <strong jhiTranslate="artemisApp.importUsers.numberOfUsers"></strong>
                         <span>&nbsp;{{ usersToImport.length }}</span>
                     </div>
                 } @else {
                     <div>
-                        <strong>{{ 'artemisApp.importUsers.numberOfUsersImported' | artemisTranslate }}</strong>
+                        <strong jhiTranslate="artemisApp.importUsers.numberOfUsersImported"></strong>
                         <span>{{ numberOfUsersImported }}</span>
                     </div>
                     <div class="ms-2">
-                        <strong>{{ 'artemisApp.importUsers.numberOfUsersNotImported' | artemisTranslate }}</strong>
+                        <strong jhiTranslate="artemisApp.importUsers.numberOfUsersNotImported"></strong>
                         <span
                             ><b style="color: red">{{ numberOfUsersNotImported }}</b></span
                         >
@@ -196,16 +196,16 @@ <h4 class="modal-title">
             <div class="flex-shrink-0 me-2 d-flex">
                 @if (!hasImported) {
                     <div>
-                        <strong>{{ 'artemisApp.importUsers.numberOfUsers' | artemisTranslate }}</strong>
+                        <strong jhiTranslate="artemisApp.importUsers.numberOfUsers"></strong>
                         <span>&nbsp;{{ examUsersToImport.length }}</span>
                     </div>
                 } @else {
                     <div>
-                        <strong>{{ 'artemisApp.importUsers.numberOfUsersImported' | artemisTranslate }}</strong>
+                        <strong jhiTranslate="artemisApp.importUsers.numberOfUsersImported"></strong>
                         <span>{{ numberOfUsersImported }}</span>
                     </div>
                     <div class="ms-2">
-                        <strong>{{ 'artemisApp.importUsers.numberOfUsersNotImported' | artemisTranslate }}</strong>
+                        <strong jhiTranslate="artemisApp.importUsers.numberOfUsersNotImported"></strong>
                         <span
                             ><b style="color: red">{{ numberOfUsersNotImported }}</b></span
                         >
diff --git a/src/main/webapp/app/shared/user-settings/account-information/account-information.component.html b/src/main/webapp/app/shared/user-settings/account-information/account-information.component.html
index 42462ba6efce..3839e7313a50 100644
--- a/src/main/webapp/app/shared/user-settings/account-information/account-information.component.html
+++ b/src/main/webapp/app/shared/user-settings/account-information/account-information.component.html
@@ -1,51 +1,33 @@
-<h1>
-    <!--Account Information-->
-    {{ 'artemisApp.userSettings.accountInformation' | artemisTranslate }}
-</h1>
+<h1 jhiTranslate="artemisApp.userSettings.accountInformation"></h1>
 @if (currentUser) {
     <div class="list-group d-block">
         @if (currentUser.name) {
             <div class="list-group-item">
-                <dt>
-                    <!--Full Name-->
-                    {{ 'artemisApp.userSettings.accountInformationPage.fullName' | artemisTranslate }}
-                </dt>
+                <dt jhiTranslate="artemisApp.userSettings.accountInformationPage.fullName"></dt>
                 <dd>{{ currentUser.name }}</dd>
             </div>
         }
         @if (currentUser.login) {
             <div class="list-group-item">
-                <dt>
-                    <!--Login-->
-                    {{ 'artemisApp.userSettings.accountInformationPage.login' | artemisTranslate }}
-                </dt>
+                <dt jhiTranslate="artemisApp.userSettings.accountInformationPage.login"></dt>
                 <dd>{{ currentUser.login }}</dd>
             </div>
         }
         @if (currentUser.email) {
             <div class="list-group-item">
-                <dt>
-                    <!--Email-->
-                    {{ 'artemisApp.userSettings.accountInformationPage.email' | artemisTranslate }}
-                </dt>
+                <dt jhiTranslate="artemisApp.userSettings.accountInformationPage.email"></dt>
                 <dd>{{ currentUser.email }}</dd>
             </div>
         }
         @if (currentUser.visibleRegistrationNumber) {
             <div class="list-group-item">
-                <dt>
-                    <!--Registration Number-->
-                    {{ 'artemisApp.userSettings.accountInformationPage.registrationNumber' | artemisTranslate }}
-                </dt>
+                <dt jhiTranslate="artemisApp.userSettings.accountInformationPage.registrationNumber"></dt>
                 <dd>{{ currentUser.visibleRegistrationNumber }}</dd>
             </div>
         }
         @if (currentUser.createdDate) {
             <div class="list-group-item">
-                <dt>
-                    <!--Joined Artemis on-->
-                    {{ 'artemisApp.userSettings.accountInformationPage.joinedArtemis' | artemisTranslate }}
-                </dt>
+                <dt jhiTranslate="artemisApp.userSettings.accountInformationPage.joinedArtemis"></dt>
                 <dd>{{ currentUser.createdDate | artemisDate }}</dd>
             </div>
         }
diff --git a/src/main/webapp/app/shared/user-settings/notification-settings/notification-settings.component.html b/src/main/webapp/app/shared/user-settings/notification-settings/notification-settings.component.html
index 269661531970..acacf8e53e74 100644
--- a/src/main/webapp/app/shared/user-settings/notification-settings/notification-settings.component.html
+++ b/src/main/webapp/app/shared/user-settings/notification-settings/notification-settings.component.html
@@ -6,10 +6,7 @@ <h1>
         </h1>
         <div class="d-inline-flex userSettings-info">
             <fa-icon class="ng-fa-icon" [icon]="faInfoCircle" />
-            <span class="ps-1">
-                <!-- Info text explaining that these settings also filter the notification sidebar -->
-                {{ 'artemisApp.userSettings.notificationSettingsFilterInfo' | artemisTranslate }}
-            </span>
+            <span class="ps-1" jhiTranslate="artemisApp.userSettings.notificationSettingsFilterInfo"></span>
         </div>
     </div>
     @if (settingsChanged) {
diff --git a/src/main/webapp/app/shared/user-settings/science-settings/science-settings.component.html b/src/main/webapp/app/shared/user-settings/science-settings/science-settings.component.html
index 785898d7944e..5630d96781d8 100644
--- a/src/main/webapp/app/shared/user-settings/science-settings/science-settings.component.html
+++ b/src/main/webapp/app/shared/user-settings/science-settings/science-settings.component.html
@@ -6,16 +6,12 @@ <h1>
         </h1>
         <div class="d-flex userSettings-info">
             <fa-icon class="ng-fa-icon" [icon]="faInfoCircle" />
-            <span class="ps-1">
-                {{ 'artemisApp.userSettings.scienceSettingsInfo' | artemisTranslate }}
-            </span>
+            <span class="ps-1" jhiTranslate="artemisApp.userSettings.scienceSettingsInfo"></span>
         </div>
         @if (!featureToggleActive) {
             <div class="d-flex mt-2 userSettings-info">
                 <fa-icon class="ng-fa-icon" [icon]="faInfoCircle" />
-                <span class="ps-1">
-                    {{ 'artemisApp.userSettings.scienceSettingsFeatureDisabled' | artemisTranslate }}
-                </span>
+                <span class="ps-1" jhiTranslate="artemisApp.userSettings.scienceSettingsFeatureDisabled"></span>
             </div>
         }
     </div>
diff --git a/src/main/webapp/app/shared/user-settings/user-settings-container/user-settings-container.component.html b/src/main/webapp/app/shared/user-settings/user-settings-container/user-settings-container.component.html
index 7056c68a6534..87f9a29c5d01 100644
--- a/src/main/webapp/app/shared/user-settings/user-settings-container/user-settings-container.component.html
+++ b/src/main/webapp/app/shared/user-settings/user-settings-container/user-settings-container.component.html
@@ -16,27 +16,17 @@
             </div>
             <!-- links to the different settings -->
             <section id="navigation-bar" class="list-group d-block pt-2">
-                <span class="list-group-item disabled fw-bold">
-                    <!--User Settings Menu Title-->
-                    {{ 'artemisApp.userSettings.userSettings' | artemisTranslate }}
-                </span>
-                <a class="list-group-item btn btn-outline-primary" routerLink="account" routerLinkActive="active">
-                    <!--Account Information-->
-                    {{ 'artemisApp.userSettings.accountInformation' | artemisTranslate }}
-                </a>
-                <a class="list-group-item btn btn-outline-primary" routerLink="notifications" routerLinkActive="active">
-                    <!--Notification Settings-->
-                    {{ 'artemisApp.userSettings.notificationSettings' | artemisTranslate }}
-                </a>
-                <a class="list-group-item btn btn-outline-primary" routerLink="science" routerLinkActive="active">
-                    <!--Science Settings-->
-                    {{ 'artemisApp.userSettings.scienceSettings' | artemisTranslate }}
-                </a>
+                <span class="list-group-item disabled fw-bold" jhiTranslate="artemisApp.userSettings.userSettings"></span>
+                <a class="list-group-item btn btn-outline-primary" routerLink="account" routerLinkActive="active" jhiTranslate="artemisApp.userSettings.accountInformation"></a>
+                <a
+                    class="list-group-item btn btn-outline-primary"
+                    routerLink="notifications"
+                    routerLinkActive="active"
+                    jhiTranslate="artemisApp.userSettings.notificationSettings"
+                ></a>
+                <a class="list-group-item btn btn-outline-primary" routerLink="science" routerLinkActive="active" jhiTranslate="artemisApp.userSettings.scienceSettings"></a>
                 @if (localVCEnabled) {
-                    <a class="list-group-item btn btn-outline-primary" routerLink="sshSettings" routerLinkActive="active">
-                        <!--Account Information-->
-                        {{ 'artemisApp.userSettings.sshSettings' | artemisTranslate }}
-                    </a>
+                    <a class="list-group-item btn btn-outline-primary" routerLink="sshSettings" routerLinkActive="active" jhiTranslate="artemisApp.userSettings.sshSettings"></a>
                 }
             </section>
         </div>
diff --git a/src/test/javascript/spec/component/assessment-shared/assessment-complaint-alert.component.spec.ts b/src/test/javascript/spec/component/assessment-shared/assessment-complaint-alert.component.spec.ts
index 0bf67ea63b40..af84f8154c5f 100644
--- a/src/test/javascript/spec/component/assessment-shared/assessment-complaint-alert.component.spec.ts
+++ b/src/test/javascript/spec/component/assessment-shared/assessment-complaint-alert.component.spec.ts
@@ -3,6 +3,7 @@ import { AssessmentComplaintAlertComponent } from 'app/assessment/assessment-com
 import { ArtemisTestModule } from '../../test.module';
 import { Complaint, ComplaintType } from 'app/entities/complaint.model';
 import { TranslatePipeMock } from '../../helpers/mocks/service/mock-translate.service';
+import { By } from '@angular/platform-browser';
 
 describe('AssessmentComplaintAlertComponent', () => {
     let component: AssessmentComplaintAlertComponent;
@@ -42,16 +43,16 @@ describe('AssessmentComplaintAlertComponent', () => {
     it('should show complaint alert text for complaint', () => {
         setComplaintOfType(ComplaintType.COMPLAINT);
 
-        const alertNode = fixture.debugElement.children[0];
+        const alertNode = fixture.debugElement.query(By.css('.alert-info'));
         expect(alertNode).toBeTruthy();
-        expect(alertNode.nativeElement.textContent).toContain('artemisApp.complaint.hint');
+        expect(alertNode.attributes['jhiTranslate']).toBe('artemisApp.complaint.hint');
     });
 
     it('should show complaint alert text for more feedback request', () => {
         setComplaintOfType(ComplaintType.MORE_FEEDBACK);
 
-        const alertNode = fixture.debugElement.children[0];
+        const alertNode = fixture.debugElement.query(By.css('.alert-info'));
         expect(alertNode).toBeTruthy();
-        expect(alertNode.nativeElement.textContent).toContain('artemisApp.moreFeedback.hint');
+        expect(alertNode.attributes['jhiTranslate']).toBe('artemisApp.moreFeedback.hint');
     });
 });
diff --git a/src/test/javascript/spec/component/code-editor/code-editor-status.component.spec.ts b/src/test/javascript/spec/component/code-editor/code-editor-status.component.spec.ts
index 1f8d058725f9..f3837316e767 100644
--- a/src/test/javascript/spec/component/code-editor/code-editor-status.component.spec.ts
+++ b/src/test/javascript/spec/component/code-editor/code-editor-status.component.spec.ts
@@ -1,13 +1,13 @@
-import { DebugElement } from '@angular/core/';
+import { DebugElement } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AceEditorModule } from 'app/shared/markdown-editor/ace-editor/ace-editor.module';
 import { ArtemisTestModule } from '../../test.module';
 import { By } from '@angular/platform-browser';
 import { CodeEditorStatusComponent } from 'app/exercises/programming/shared/code-editor/status/code-editor-status.component';
 import { CommitState } from 'app/exercises/programming/shared/code-editor/model/code-editor.model';
-import { TranslatePipeMock } from '../../helpers/mocks/service/mock-translate.service';
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { MockModule } from 'ng-mocks';
+import { TranslatePipeMock } from '../../helpers/mocks/service/mock-translate.service';
 
 describe('CodeEditorStatusComponent', () => {
     let comp: CodeEditorStatusComponent;
@@ -22,29 +22,44 @@ describe('CodeEditorStatusComponent', () => {
             .then(() => {
                 fixture = TestBed.createComponent(CodeEditorStatusComponent);
                 comp = fixture.componentInstance;
+                fixture.detectChanges();
             });
     });
 
+    it('should create', () => {
+        expect(comp).toBeTruthy();
+    });
+
     it('should show an empty status segment for CommitState if no EditorState is given', () => {
+        fixture.detectChanges();
         const commitStateSegment = fixture.debugElement.query(By.css('#commit_state'));
-        expect(commitStateSegment.children).toBeEmpty();
+        expect(commitStateSegment.children).toHaveLength(0);
     });
 
-    Object.keys(CommitState).map((commitState) =>
-        it(`should show exactly one status segment for CommitState ${commitState} with an icon and a non empty description`, () => {
+    const commitStateToTranslationKey = {
+        UNDEFINED: 'artemisApp.editor.changesUndefined',
+        COULD_NOT_BE_RETRIEVED: 'artemisApp.editor.changesError',
+        CONFLICT: 'artemisApp.editor.changesConflict',
+        CLEAN: 'artemisApp.editor.changesSubmitted',
+        UNCOMMITTED_CHANGES: 'artemisApp.editor.unsubmittedChanges',
+        COMMITTING: 'artemisApp.editor.submittingChanges',
+    };
+
+    Object.keys(CommitState).forEach((commitState) =>
+        it(`should show exactly one status segment for CommitState ${commitState} with an icon and a non-empty description`, () => {
             comp.commitState = commitState as CommitState;
             fixture.detectChanges();
             const commitStateSegment = fixture.debugElement.query(By.css('#commit_state'));
-            showsExactlyOneStatusSegment(commitStateSegment);
+            showsExactlyOneStatusSegment(commitStateSegment, commitStateToTranslationKey[commitState as keyof typeof commitStateToTranslationKey]);
         }),
     );
 
-    const showsExactlyOneStatusSegment = (stateSegment: DebugElement) => {
+    const showsExactlyOneStatusSegment = (stateSegment: DebugElement, expectedKey: string) => {
         expect(stateSegment.children).toHaveLength(1);
         const icon = stateSegment.query(By.css('fa-icon'));
         expect(icon).not.toBeNull();
-        const text = stateSegment.query(By.css('span'));
+        const text = stateSegment.query(By.css('span[jhiTranslate]'));
         expect(text).not.toBeNull();
-        expect(text.nativeElement.textContent).not.toBe('');
+        expect(text.attributes['jhiTranslate']).toBe(expectedKey);
     };
 });
diff --git a/src/test/javascript/spec/component/complaints/complaints-for-tutor.component.spec.ts b/src/test/javascript/spec/component/complaints/complaints-for-tutor.component.spec.ts
index 0a6055063b27..c8fdeedcc452 100644
--- a/src/test/javascript/spec/component/complaints/complaints-for-tutor.component.spec.ts
+++ b/src/test/javascript/spec/component/complaints/complaints-for-tutor.component.spec.ts
@@ -4,7 +4,7 @@ import { ComplaintResponseService } from 'app/complaints/complaint-response.serv
 import { ComplaintsForTutorComponent } from 'app/complaints/complaints-for-tutor/complaints-for-tutor.component';
 import { ExerciseGroup } from 'app/entities/exercise-group.model';
 import { TextareaCounterComponent } from 'app/shared/textarea/textarea-counter.component';
-import { MockComponent, MockPipe, MockProvider } from 'ng-mocks';
+import { MockComponent, MockDirective, MockPipe, MockProvider } from 'ng-mocks';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AlertService } from 'app/core/util/alert.service';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
@@ -17,6 +17,7 @@ import { HttpResponse } from '@angular/common/http';
 import { of } from 'rxjs';
 import { Course } from 'app/entities/course.model';
 import { Exercise } from 'app/entities/exercise.model';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 describe('ComplaintsForTutorComponent', () => {
     let complaintsForTutorComponent: ComplaintsForTutorComponent;
@@ -29,7 +30,13 @@ describe('ComplaintsForTutorComponent', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [RouterTestingModule.withRoutes([]), FormsModule],
-            declarations: [ComplaintsForTutorComponent, MockPipe(ArtemisTranslatePipe), MockPipe(ArtemisDatePipe), MockComponent(TextareaCounterComponent)],
+            declarations: [
+                ComplaintsForTutorComponent,
+                MockPipe(ArtemisTranslatePipe),
+                MockPipe(ArtemisDatePipe),
+                MockComponent(TextareaCounterComponent),
+                MockDirective(TranslateDirective),
+            ],
             providers: [MockProvider(ComplaintResponseService), MockProvider(ComplaintService), MockProvider(AlertService)],
         })
             .compileComponents()
diff --git a/src/test/javascript/spec/component/exam/exam-scores/exam-scores-average-scores-graph.component.spec.ts b/src/test/javascript/spec/component/exam/exam-scores/exam-scores-average-scores-graph.component.spec.ts
index 80750ba8853b..5bf796d51879 100644
--- a/src/test/javascript/spec/component/exam/exam-scores/exam-scores-average-scores-graph.component.spec.ts
+++ b/src/test/javascript/spec/component/exam/exam-scores/exam-scores-average-scores-graph.component.spec.ts
@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateService } from '@ngx-translate/core';
-import { MockModule, MockPipe, MockProvider } from 'ng-mocks';
+import { MockDirective, MockModule, MockPipe, MockProvider } from 'ng-mocks';
 import { of } from 'rxjs';
 import { HttpResponse } from '@angular/common/http';
 import { ExamScoresAverageScoresGraphComponent } from 'app/exam/exam-scores/exam-scores-average-scores-graph.component';
@@ -15,6 +15,7 @@ import { GraphColors } from 'app/entities/statistics.model';
 import { NgxChartsSingleSeriesDataEntry } from 'app/shared/chart/ngx-charts-datatypes';
 import { ExerciseType } from 'app/entities/exercise.model';
 import { LocaleConversionService } from 'app/shared/service/locale-conversion.service';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 describe('ExamScoresAverageScoresGraphComponent', () => {
     let fixture: ComponentFixture<ExamScoresAverageScoresGraphComponent>;
@@ -55,7 +56,7 @@ describe('ExamScoresAverageScoresGraphComponent', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [ArtemisTestModule, RouterTestingModule.withRoutes([]), MockModule(BarChartModule)],
-            declarations: [ExamScoresAverageScoresGraphComponent, MockPipe(ArtemisTranslatePipe)],
+            declarations: [ExamScoresAverageScoresGraphComponent, MockPipe(ArtemisTranslatePipe), MockDirective(TranslateDirective)],
             providers: [
                 MockProvider(CourseManagementService, {
                     find: () => {
diff --git a/src/test/javascript/spec/component/exam/manage/exercise-groups/exercise-group-update.component.spec.ts b/src/test/javascript/spec/component/exam/manage/exercise-groups/exercise-group-update.component.spec.ts
index d20532d40dc7..8ca421927fb9 100644
--- a/src/test/javascript/spec/component/exam/manage/exercise-groups/exercise-group-update.component.spec.ts
+++ b/src/test/javascript/spec/component/exam/manage/exercise-groups/exercise-group-update.component.spec.ts
@@ -12,13 +12,14 @@ import { ExerciseGroupUpdateComponent } from 'app/exam/manage/exercise-groups/ex
 import { ExerciseGroupService } from 'app/exam/manage/exercise-groups/exercise-group.service';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { AlertService } from 'app/core/util/alert.service';
-import { MockComponent, MockPipe } from 'ng-mocks';
+import { MockComponent, MockDirective, MockPipe } from 'ng-mocks';
 import { LocalStorageService, SessionStorageService } from 'ngx-webstorage';
 import { of, throwError } from 'rxjs';
 import { MockRouter } from '../../../../helpers/mocks/mock-router';
 import { MockSyncStorage } from '../../../../helpers/mocks/service/mock-sync-storage.service';
 import { MockTranslateService } from '../../../../helpers/mocks/service/mock-translate.service';
 import { NgbAlertsMocksModule } from '../../../../helpers/mocks/directive/ngbAlertsMocks.module';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 describe('ExerciseGroupUpdateComponent', () => {
     const course = { id: 456 } as Course;
@@ -43,7 +44,7 @@ describe('ExerciseGroupUpdateComponent', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [HttpClientModule, FormsModule, NgbAlertsMocksModule],
-            declarations: [ExerciseGroupUpdateComponent, MockPipe(ArtemisTranslatePipe), MockComponent(FaIconComponent)],
+            declarations: [ExerciseGroupUpdateComponent, MockPipe(ArtemisTranslatePipe), MockComponent(FaIconComponent), MockDirective(TranslateDirective)],
             providers: [
                 { provide: SessionStorageService, useClass: MockSyncStorage },
                 { provide: LocalStorageService, useClass: MockSyncStorage },
diff --git a/src/test/javascript/spec/component/exam/participate/exam-navigation-bar.component.spec.ts b/src/test/javascript/spec/component/exam/participate/exam-navigation-bar.component.spec.ts
index 50389d445c46..fb8f91a5ba57 100644
--- a/src/test/javascript/spec/component/exam/participate/exam-navigation-bar.component.spec.ts
+++ b/src/test/javascript/spec/component/exam/participate/exam-navigation-bar.component.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import dayjs from 'dayjs/esm';
-import { MockComponent, MockModule } from 'ng-mocks';
+import { MockComponent, MockDirective, MockModule } from 'ng-mocks';
 import { Exercise, ExerciseType } from 'app/entities/exercise.model';
 import { ExamSession } from 'app/entities/exam-session.model';
 import { of } from 'rxjs';
@@ -21,6 +21,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { faCheck, faEdit } from '@fortawesome/free-solid-svg-icons';
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { ExamLiveEventsButtonComponent } from 'app/exam/participate/events/exam-live-events-button.component';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 describe('Exam Navigation Bar Component', () => {
     let fixture: ComponentFixture<ExamNavigationBarComponent>;
@@ -35,7 +36,7 @@ describe('Exam Navigation Bar Component', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [ArtemisTestModule, TranslateTestingModule, MockModule(NgbTooltipModule)],
-            declarations: [ExamNavigationBarComponent, MockComponent(ExamTimerComponent), MockComponent(ExamLiveEventsButtonComponent)],
+            declarations: [ExamNavigationBarComponent, MockComponent(ExamTimerComponent), MockComponent(ExamLiveEventsButtonComponent), MockDirective(TranslateDirective)],
             providers: [
                 ExamParticipationService,
                 { provide: ExamExerciseUpdateService, useValue: mockExamExerciseUpdateService },
diff --git a/src/test/javascript/spec/component/exam/participate/exercises/text-exam-submission.component.spec.ts b/src/test/javascript/spec/component/exam/participate/exercises/text-exam-submission.component.spec.ts
index 97f000ca0af1..6671fb12acf4 100644
--- a/src/test/javascript/spec/component/exam/participate/exercises/text-exam-submission.component.spec.ts
+++ b/src/test/javascript/spec/component/exam/participate/exercises/text-exam-submission.component.spec.ts
@@ -16,6 +16,7 @@ import { ExamExerciseUpdateHighlighterComponent } from 'app/exam/participate/exe
 import { ArtemisTestModule } from '../../../../test.module';
 import { ResizeableContainerComponent } from 'app/shared/resizeable-container/resizeable-container.component';
 import dayjs from 'dayjs/esm';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 describe('TextExamSubmissionComponent', () => {
     let fixture: ComponentFixture<TextExamSubmissionComponent>;
@@ -38,6 +39,7 @@ describe('TextExamSubmissionComponent', () => {
                 MockComponent(IncludedInScoreBadgeComponent),
                 MockComponent(ExamExerciseUpdateHighlighterComponent),
                 MockComponent(ResizeableContainerComponent),
+                MockDirective(TranslateDirective),
             ],
             providers: [MockProvider(TextEditorService), MockProvider(ArtemisMarkdownService)],
         })
diff --git a/src/test/javascript/spec/component/exam/shared/events/exam-live-event.component.spec.ts b/src/test/javascript/spec/component/exam/shared/events/exam-live-event.component.spec.ts
index f53027f7a24c..fe01da3df68d 100644
--- a/src/test/javascript/spec/component/exam/shared/events/exam-live-event.component.spec.ts
+++ b/src/test/javascript/spec/component/exam/shared/events/exam-live-event.component.spec.ts
@@ -16,6 +16,8 @@ import { TranslateService } from '@ngx-translate/core';
 import { HtmlForMarkdownPipe } from 'app/shared/pipes/html-for-markdown.pipe';
 import { ArtemisDurationFromSecondsPipe } from 'app/shared/pipes/artemis-duration-from-seconds.pipe';
 import { WorkingTimeChangeComponent } from 'app/exam/shared/working-time-change/working-time-change.component';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
+import { MockDirective } from 'ng-mocks';
 
 describe('ExamLiveEventComponent', () => {
     let component: ExamLiveEventComponent;
@@ -23,7 +25,15 @@ describe('ExamLiveEventComponent', () => {
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            declarations: [ExamLiveEventComponent, WorkingTimeChangeComponent, ArtemisTranslatePipe, ArtemisDatePipe, HtmlForMarkdownPipe, ArtemisDurationFromSecondsPipe],
+            declarations: [
+                ExamLiveEventComponent,
+                WorkingTimeChangeComponent,
+                ArtemisTranslatePipe,
+                ArtemisDatePipe,
+                HtmlForMarkdownPipe,
+                ArtemisDurationFromSecondsPipe,
+                MockDirective(TranslateDirective),
+            ],
             imports: [FontAwesomeModule],
             providers: [{ provide: TranslateService, useClass: MockTranslateService }],
         }).compileComponents();
diff --git a/src/test/javascript/spec/component/exam/test-run/test-run-management.component.spec.ts b/src/test/javascript/spec/component/exam/test-run/test-run-management.component.spec.ts
index 725a5b677390..70e64fbff5d8 100644
--- a/src/test/javascript/spec/component/exam/test-run/test-run-management.component.spec.ts
+++ b/src/test/javascript/spec/component/exam/test-run/test-run-management.component.spec.ts
@@ -58,6 +58,7 @@ describe('Test Run Management Component', () => {
                 MockPipe(ArtemisDatePipe),
                 MockDirective(SortDirective),
                 MockDirective(DeleteButtonDirective),
+                MockDirective(TranslateDirective),
             ],
             providers: [
                 { provide: LocalStorageService, useClass: MockSyncStorage },
diff --git a/src/test/javascript/spec/component/exercises/shared/result.spec.ts b/src/test/javascript/spec/component/exercises/shared/result.spec.ts
index 65d663a7dd12..3314be02465d 100644
--- a/src/test/javascript/spec/component/exercises/shared/result.spec.ts
+++ b/src/test/javascript/spec/component/exercises/shared/result.spec.ts
@@ -23,6 +23,7 @@ import { ResultTemplateStatus } from 'app/exercises/shared/result/result.utils';
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 import dayjs from 'dayjs/esm';
 import { MIN_SCORE_GREEN, MIN_SCORE_ORANGE } from 'app/app.constants';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 describe('ResultComponent', () => {
     let fixture: ComponentFixture<ResultComponent>;
@@ -50,7 +51,7 @@ describe('ResultComponent', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [ArtemisTestModule, MockDirective(NgbTooltip)],
-            declarations: [ResultComponent, MockPipe(ArtemisTranslatePipe), MockPipe(ArtemisTimeAgoPipe), MockPipe(ArtemisDatePipe)],
+            declarations: [ResultComponent, MockPipe(ArtemisTranslatePipe), MockPipe(ArtemisTimeAgoPipe), MockPipe(ArtemisDatePipe), MockDirective(TranslateDirective)],
             providers: [
                 { provide: LocalStorageService, useClass: MockSyncStorage },
                 { provide: SessionStorageService, useClass: MockSyncStorage },
diff --git a/src/test/javascript/spec/component/grading-system/detailed-grading-system.component.spec.ts b/src/test/javascript/spec/component/grading-system/detailed-grading-system.component.spec.ts
index c9fa23b97001..4e3b44045052 100644
--- a/src/test/javascript/spec/component/grading-system/detailed-grading-system.component.spec.ts
+++ b/src/test/javascript/spec/component/grading-system/detailed-grading-system.component.spec.ts
@@ -22,6 +22,7 @@ import { MockCourseManagementService } from '../../helpers/mocks/service/mock-co
 import { HelpIconComponent } from 'app/shared/components/help-icon.component';
 import { PresentationType } from 'app/grading-system/grading-system-presentations/grading-system-presentations.component';
 import { download, generateCsv, mkConfig } from 'export-to-csv';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 jest.mock('export-to-csv', () => {
     return {
@@ -86,6 +87,7 @@ describe('Detailed Grading System Component', () => {
                 MockComponent(HelpIconComponent),
                 MockDirective(DeleteButtonDirective),
                 MockPipe(ArtemisTranslatePipe),
+                MockDirective(TranslateDirective),
             ],
             providers: [
                 { provide: ActivatedRoute, useValue: route },
diff --git a/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-add-users-dialog/add-users-form/conversation-add-users-form.component.spec.ts b/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-add-users-dialog/add-users-form/conversation-add-users-form.component.spec.ts
index 61f94f5c2cfc..5dba62cd4934 100644
--- a/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-add-users-dialog/add-users-form/conversation-add-users-form.component.spec.ts
+++ b/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-add-users-dialog/add-users-form/conversation-add-users-form.component.spec.ts
@@ -5,7 +5,7 @@ import {
 } from 'app/overview/course-conversations/dialogs/conversation-add-users-dialog/add-users-form/conversation-add-users-form.component';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MockComponent, MockPipe } from 'ng-mocks';
+import { MockComponent, MockDirective, MockPipe } from 'ng-mocks';
 import { CourseUsersSelectorComponent } from 'app/shared/course-users-selector/course-users-selector.component';
 import { ConversationDTO } from 'app/entities/metis/conversation/conversation.model';
 import { generateExampleChannelDTO, generateExampleGroupChatDTO } from '../../../helpers/conversationExampleModels';
@@ -13,6 +13,7 @@ import { Course } from 'app/entities/course.model';
 import { isChannelDTO } from 'app/entities/metis/conversation/channel.model';
 import { By } from '@angular/platform-browser';
 import { UserPublicInfoDTO } from 'app/core/user/user.model';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 const examples: ConversationDTO[] = [generateExampleGroupChatDTO({}), generateExampleChannelDTO({})];
 examples.forEach((activeConversation) => {
@@ -24,7 +25,7 @@ examples.forEach((activeConversation) => {
         beforeEach(waitForAsync(() => {
             TestBed.configureTestingModule({
                 imports: [ReactiveFormsModule, FormsModule],
-                declarations: [ConversationAddUsersFormComponent, MockComponent(CourseUsersSelectorComponent), MockPipe(ArtemisTranslatePipe)],
+                declarations: [ConversationAddUsersFormComponent, MockComponent(CourseUsersSelectorComponent), MockPipe(ArtemisTranslatePipe), MockDirective(TranslateDirective)],
             }).compileComponents();
         }));
 
diff --git a/src/test/javascript/spec/component/overview/course-statistics/course-statistics.component.spec.ts b/src/test/javascript/spec/component/overview/course-statistics/course-statistics.component.spec.ts
index ea11d9ecd2a4..7631c4d81136 100644
--- a/src/test/javascript/spec/component/overview/course-statistics/course-statistics.component.spec.ts
+++ b/src/test/javascript/spec/component/overview/course-statistics/course-statistics.component.spec.ts
@@ -29,6 +29,7 @@ import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
 import { of } from 'rxjs';
 import { MockTranslateValuesDirective } from '../../../helpers/mocks/directive/mock-translate-values.directive';
 import { ArtemisTestModule } from '../../../test.module';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 describe('CourseStatisticsComponent', () => {
     let comp: CourseStatisticsComponent;
@@ -336,6 +337,7 @@ describe('CourseStatisticsComponent', () => {
                 MockComponent(DocumentationButtonComponent),
                 MockTranslateValuesDirective,
                 ArtemisTranslatePipe,
+                TranslateDirective,
             ],
             providers: [
                 MockProvider(ArtemisNavigationUtilService),
@@ -376,11 +378,11 @@ describe('CourseStatisticsComponent', () => {
         fixture.detectChanges();
         expect(comp.ngxExerciseGroups.size).toBe(4);
         const modelingWrapper = fixture.debugElement.query(By.css('#modeling-wrapper'));
-        expect(modelingWrapper.query(By.css('h4')).nativeElement.textContent).toBe(' artemisApp.courseOverview.statistics.exerciseCount ');
-        expect(modelingWrapper.query(By.css('#absolute-score')).nativeElement.textContent).toBe(' artemisApp.courseOverview.statistics.yourPoints ');
-        expect(modelingWrapper.query(By.css('#reachable-score')).nativeElement.textContent).toBe(' artemisApp.courseOverview.statistics.reachablePoints ');
-        expect(modelingWrapper.query(By.css('#max-score')).nativeElement.textContent).toBe(' artemisApp.courseOverview.statistics.totalPoints ');
-        expect(fixture.debugElement.query(By.css('#presentation-score')).nativeElement.textContent).toBe(' artemisApp.courseOverview.statistics.presentationScore ');
+        expect(modelingWrapper.query(By.css('h4')).nativeElement.textContent).toBe('artemisApp.courseOverview.statistics.exerciseCount');
+        expect(modelingWrapper.query(By.css('#absolute-score')).nativeElement.textContent).toBe('artemisApp.courseOverview.statistics.yourPoints');
+        expect(modelingWrapper.query(By.css('#reachable-score')).nativeElement.textContent).toBe('artemisApp.courseOverview.statistics.reachablePoints');
+        expect(modelingWrapper.query(By.css('#max-score')).nativeElement.textContent).toBe('artemisApp.courseOverview.statistics.totalPoints');
+        expect(fixture.debugElement.query(By.css('#presentation-score')).nativeElement.textContent).toBe('artemisApp.courseOverview.statistics.presentationScore');
 
         const programming: NgxExercise = comp.ngxExerciseGroups.get(ExerciseType.PROGRAMMING)![0];
         expect(programming.series).toHaveLength(6);
@@ -444,11 +446,11 @@ describe('CourseStatisticsComponent', () => {
 
         // check that html file displays the correct elements
         let debugElement = fixture.debugElement.query(By.css('#absolute-course-score'));
-        expect(debugElement.nativeElement.textContent).toBe(' artemisApp.courseOverview.statistics.yourPoints ');
+        expect(debugElement.nativeElement.textContent).toBe('artemisApp.courseOverview.statistics.yourPoints');
         debugElement = fixture.debugElement.query(By.css('#reachable-course-score'));
-        expect(debugElement.nativeElement.textContent).toBe(' artemisApp.courseOverview.statistics.reachablePoints ');
+        expect(debugElement.nativeElement.textContent).toBe('artemisApp.courseOverview.statistics.reachablePoints');
         debugElement = fixture.debugElement.query(By.css('#max-course-score'));
-        expect(debugElement.nativeElement.textContent).toBe(' artemisApp.courseOverview.statistics.totalPoints ');
+        expect(debugElement.nativeElement.textContent).toBe('artemisApp.courseOverview.statistics.totalPoints');
     });
 
     it('should set the course after being notified about a course update', () => {
diff --git a/src/test/javascript/spec/component/programming-exercise/update-components/programming-exercise-grading.component.spec.ts b/src/test/javascript/spec/component/programming-exercise/update-components/programming-exercise-grading.component.spec.ts
index 2f5ce3fb77d8..e59522cf01aa 100644
--- a/src/test/javascript/spec/component/programming-exercise/update-components/programming-exercise-grading.component.spec.ts
+++ b/src/test/javascript/spec/component/programming-exercise/update-components/programming-exercise-grading.component.spec.ts
@@ -22,6 +22,7 @@ import { CustomMaxDirective } from 'app/shared/validators/custom-max-validator.d
 import { NgbAlertsMocksModule } from '../../../helpers/mocks/directive/ngbAlertsMocks.module';
 import { NgbCollapse, NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 import { programmingExerciseCreationConfigMock } from './programming-exercise-creation-config-mock';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 describe('ProgrammingExerciseGradingComponent', () => {
     let fixture: ComponentFixture<ProgrammingExerciseGradingComponent>;
@@ -46,6 +47,7 @@ describe('ProgrammingExerciseGradingComponent', () => {
                 MockComponent(SubmissionPolicyUpdateComponent),
                 MockComponent(PresentationScoreComponent),
                 MockComponent(FaIconComponent),
+                MockDirective(TranslateDirective),
             ],
             providers: [
                 { provide: TranslateService, useClass: MockTranslateService },
diff --git a/src/test/javascript/spec/component/shared/code-button.component.spec.ts b/src/test/javascript/spec/component/shared/code-button.component.spec.ts
index f0fff85034ca..499a4e36dc9b 100644
--- a/src/test/javascript/spec/component/shared/code-button.component.spec.ts
+++ b/src/test/javascript/spec/component/shared/code-button.component.spec.ts
@@ -28,6 +28,7 @@ import { MockTranslateService } from '../../helpers/mocks/service/mock-translate
 import { ArtemisTestModule } from '../../test.module';
 import { RouterTestingModule } from '@angular/router/testing';
 import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 describe('CodeButtonComponent', () => {
     let component: CodeButtonComponent;
@@ -96,6 +97,7 @@ describe('CodeButtonComponent', () => {
                 MockPipe(SafeUrlPipe),
                 MockDirective(FeatureToggleDirective),
                 MockComponent(HelpIconComponent),
+                MockDirective(TranslateDirective),
             ],
             providers: [
                 MockProvider(AlertService),
diff --git a/src/test/javascript/spec/component/shared/course-users-selector/course-users-selector.component.spec.ts b/src/test/javascript/spec/component/shared/course-users-selector/course-users-selector.component.spec.ts
index 99a42141fbd2..ffb59f1825a3 100644
--- a/src/test/javascript/spec/component/shared/course-users-selector/course-users-selector.component.spec.ts
+++ b/src/test/javascript/spec/component/shared/course-users-selector/course-users-selector.component.spec.ts
@@ -1,18 +1,19 @@
 import { ComponentFixture, TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
-import { CourseUsersSelectorComponent, SearchRoleGroup } from 'app/shared/course-users-selector/course-users-selector.component';
-import { ArtemisSharedModule } from 'app/shared/shared.module';
-import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
+import { Component, DebugElement, ViewChild } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
-import { MockPipe, MockProvider } from 'ng-mocks';
 import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
+import { By } from '@angular/platform-browser';
+import { of } from 'rxjs';
+import { HttpResponse } from '@angular/common/http';
+import { MockPipe, MockProvider } from 'ng-mocks';
 import { CourseManagementService } from 'app/course/manage/course-management.service';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
-import { Component, DebugElement, ViewChild } from '@angular/core';
+import { CourseUsersSelectorComponent, SearchRoleGroup } from 'app/shared/course-users-selector/course-users-selector.component';
 import { UserPublicInfoDTO } from 'app/core/user/user.model';
-import { HttpResponse } from '@angular/common/http';
-import { of } from 'rxjs';
-import { By } from '@angular/platform-browser';
+import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
+import { ArtemisSharedModule } from 'app/shared/shared.module';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     template: `
@@ -32,11 +33,9 @@ class WrapperComponent {
 
     disabled = false;
     courseId = 1;
-    label = 'TestLabel';
     rolesToAllowSearchingIn: SearchRoleGroup[] = ['tutors', 'students', 'instructors'];
     multiSelect = true;
     showUserList = true;
-
     public selectedUsers: UserPublicInfoDTO[] | undefined | null = [];
 }
 
@@ -48,7 +47,7 @@ describe('CourseUsersSelectorComponent', () => {
 
     beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
-            imports: [CommonModule, FormsModule, ReactiveFormsModule, ArtemisSharedModule, ArtemisSharedComponentModule, NgbTypeaheadModule],
+            imports: [CommonModule, FormsModule, ReactiveFormsModule, NgbTypeaheadModule, ArtemisSharedModule, ArtemisSharedComponentModule, TranslateModule.forRoot()],
             declarations: [CourseUsersSelectorComponent, WrapperComponent, MockPipe(ArtemisTranslatePipe)],
             providers: [MockProvider(CourseManagementService)],
         }).compileComponents();
@@ -141,61 +140,63 @@ describe('CourseUsersSelectorComponent', () => {
             fixture.detectChanges();
             tick(1000);
             expect(userSelectorComponent.selectedUsers).toEqual([exampleUserPublicInfoDTO]);
-            expect(fixture.debugElement.query(By.css('input')).nativeElement.disabled).toBeTrue();
-            expect(fixture.debugElement.queryAll(By.css('.selected-user'))).toHaveLength(1);
             expect(fixture.debugElement.query(By.css('.delete-user'))).toBeFalsy();
         }));
     });
-});
 
-function getNativeInput(element: HTMLElement): HTMLInputElement {
-    return <HTMLInputElement>element.querySelector('input');
-}
+    function getNativeInput(element: HTMLElement): HTMLInputElement {
+        return <HTMLInputElement>element.querySelector('input');
+    }
 
-function changeInput(element: any, value: string) {
-    const input = getNativeInput(element);
-    input.value = value;
-    const evt = new Event('input', { bubbles: true, cancelable: false });
-    input.dispatchEvent(evt);
-}
+    function changeInput(element: any, value: string) {
+        const input = getNativeInput(element);
+        input.value = value;
+        const evt = new Event('input', { bubbles: true, cancelable: false });
+        input.dispatchEvent(evt);
+    }
 
-function getDropdownButtons(element: DebugElement): DebugElement[] {
-    return Array.from(element.queryAll(By.css('button.dropdown-item')));
-}
+    function getDropdownButtons(element: DebugElement): DebugElement[] {
+        return Array.from(element.queryAll(By.css('button.dropdown-item')));
+    }
 
-function expectDropdownItems(nativeEl: HTMLElement, dropdownEntries: string[]): void {
-    const pages = nativeEl.querySelectorAll('button.dropdown-item');
-    expect(pages).toHaveLength(dropdownEntries.length);
-    for (let i = 0; i < dropdownEntries.length; i++) {
-        const resultDef = dropdownEntries[i];
-        expect(normalizeText(pages[i].textContent)).toEqual(resultDef);
+    function expectDropdownItems(nativeEl: HTMLElement, dropdownEntries: string[]): void {
+        const pages = nativeEl.querySelectorAll('button.dropdown-item');
+        expect(pages).toHaveLength(dropdownEntries.length);
+        for (let i = 0; i < dropdownEntries.length; i++) {
+            const resultDef = dropdownEntries[i];
+            expect(normalizeText(pages[i].textContent)).toEqual(resultDef);
+        }
     }
-}
 
-function normalizeText(txt: string | null): string {
-    return txt ? txt.trim().replace(/\s+/g, ' ') : '';
-}
+    function normalizeText(txt: string | null): string {
+        return txt ? txt.trim().replace(/\s+/g, ' ') : '';
+    }
 
-function generateExampleUserPublicInfoDTO({
-    id = 3,
-    login = 'mort',
-    name = 'Mortimer of Sto Helit',
-    firstName = 'Mortimer',
-    lastName = 'of Sto Helit',
-    isInstructor = false,
-    isEditor = false,
-    isTeachingAssistant = false,
-    isStudent = true,
-}: UserPublicInfoDTO) {
-    const exampleUserPublicInfoDTO = new UserPublicInfoDTO();
-    exampleUserPublicInfoDTO.id = id;
-    exampleUserPublicInfoDTO.login = login;
-    exampleUserPublicInfoDTO.name = name;
-    exampleUserPublicInfoDTO.firstName = firstName;
-    exampleUserPublicInfoDTO.lastName = lastName;
-    exampleUserPublicInfoDTO.isInstructor = isInstructor;
-    exampleUserPublicInfoDTO.isEditor = isEditor;
-    exampleUserPublicInfoDTO.isTeachingAssistant = isTeachingAssistant;
-    exampleUserPublicInfoDTO.isStudent = isStudent;
-    return exampleUserPublicInfoDTO;
-}
+    function generateExampleUserPublicInfoDTO({
+        id = 3,
+        login = 'mort',
+        name = 'Mortimer of Sto Helit',
+        firstName = 'Mortimer',
+        lastName = 'of Sto Helit',
+        isInstructor = false,
+        isEditor = false,
+        isTeachingAssistant = false,
+        isStudent = true,
+    }: Partial<UserPublicInfoDTO> = {}): UserPublicInfoDTO {
+        const exampleUserPublicInfoDTO = new UserPublicInfoDTO();
+        exampleUserPublicInfoDTO.id = id;
+        exampleUserPublicInfoDTO.login = login;
+        exampleUserPublicInfoDTO.name = name;
+        exampleUserPublicInfoDTO.firstName = firstName;
+        exampleUserPublicInfoDTO.lastName = lastName;
+        exampleUserPublicInfoDTO.isInstructor = isInstructor;
+        exampleUserPublicInfoDTO.isEditor = isEditor;
+        exampleUserPublicInfoDTO.isTeachingAssistant = isTeachingAssistant;
+        exampleUserPublicInfoDTO.isStudent = isStudent;
+        return exampleUserPublicInfoDTO;
+    }
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+});
diff --git a/src/test/javascript/spec/component/shared/notification/notification-sidebar.component.spec.ts b/src/test/javascript/spec/component/shared/notification/notification-sidebar.component.spec.ts
index 8cf036109027..4d43f521b883 100644
--- a/src/test/javascript/spec/component/shared/notification/notification-sidebar.component.spec.ts
+++ b/src/test/javascript/spec/component/shared/notification/notification-sidebar.component.spec.ts
@@ -27,6 +27,7 @@ import { NotificationSettingsService } from 'app/shared/user-settings/notificati
 import { MockNotificationSettingsService } from '../../../helpers/mocks/service/mock-notification-settings.service';
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 import { DocumentationButtonComponent } from 'app/shared/components/documentation-button/documentation-button.component';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 describe('Notification Sidebar Component', () => {
     let notificationSidebarComponent: NotificationSidebarComponent;
@@ -60,7 +61,13 @@ describe('Notification Sidebar Component', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [ArtemisTestModule, MockDirective(NgbTooltip)],
-            declarations: [NotificationSidebarComponent, MockPipe(ArtemisTranslatePipe), MockRouterLinkDirective, MockComponent(DocumentationButtonComponent)],
+            declarations: [
+                NotificationSidebarComponent,
+                MockPipe(ArtemisTranslatePipe),
+                MockRouterLinkDirective,
+                MockComponent(DocumentationButtonComponent),
+                MockDirective(TranslateDirective),
+            ],
             providers: [
                 { provide: LocalStorageService, useClass: MockSyncStorage },
                 { provide: SessionStorageService, useClass: MockSyncStorage },
diff --git a/src/test/javascript/spec/component/shared/result.component.spec.ts b/src/test/javascript/spec/component/shared/result.component.spec.ts
index 14e8bea7a123..d72fdc5f3bd2 100644
--- a/src/test/javascript/spec/component/shared/result.component.spec.ts
+++ b/src/test/javascript/spec/component/shared/result.component.spec.ts
@@ -7,7 +7,7 @@ import { TranslatePipeMock } from '../../helpers/mocks/service/mock-translate.se
 import { StudentParticipation } from 'app/entities/participation/student-participation.model';
 import { Result } from 'app/entities/result.model';
 import { ArtemisDatePipe } from 'app/shared/pipes/artemis-date.pipe';
-import { MockPipe } from 'ng-mocks';
+import { MockDirective, MockPipe } from 'ng-mocks';
 import { ArtemisTimeAgoPipe } from 'app/shared/pipes/artemis-time-ago.pipe';
 import { Exercise, ExerciseType } from 'app/entities/exercise.model';
 import { AssessmentType } from 'app/entities/assessment-type.model';
@@ -25,6 +25,7 @@ import { faTimesCircle } from '@fortawesome/free-solid-svg-icons';
 import { ParticipationService } from 'app/exercises/shared/participation/participation.service';
 
 import { of } from 'rxjs';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 const mockExercise: Exercise = {
     id: 1,
@@ -84,7 +85,7 @@ describe('ResultComponent', () => {
 
         await TestBed.configureTestingModule({
             imports: [ArtemisTestModule, NgbTooltipMocksModule],
-            declarations: [ResultComponent, TranslatePipeMock, MockPipe(ArtemisDatePipe), MockPipe(ArtemisTimeAgoPipe)],
+            declarations: [ResultComponent, TranslatePipeMock, MockPipe(ArtemisDatePipe), MockPipe(ArtemisTimeAgoPipe), MockDirective(TranslateDirective)],
             providers: [
                 { provide: NgbModal, useClass: MockNgbModalService },
                 { provide: ParticipationService, useValue: participationServiceMock },
@@ -258,13 +259,22 @@ describe('ResultComponent', () => {
 
     it('should display the correct message for FAILED_PROGRAMMING_SUBMISSION_OFFLINE_IDE and FAILED_PROGRAMMING_SUBMISSION_ONLINE_IDE', () => {
         comp.templateStatus = ResultTemplateStatus.MISSING;
+
+        // Test for FAILED_PROGRAMMING_SUBMISSION_OFFLINE_IDE
         comp.missingResultInfo = MissingResultInformation.FAILED_PROGRAMMING_SUBMISSION_OFFLINE_IDE;
         fixture.detectChanges();
-        const compiled = fixture.nativeElement;
-        expect(compiled.textContent).toContain('artemisApp.result.missing.programmingFailedSubmission.message');
-        comp.missingResultInfo = MissingResultInformation.FAILED_PROGRAMMING_SUBMISSION_OFFLINE_IDE;
+        let compiled = fixture.nativeElement;
+        let spanElement = compiled.querySelector('span[jhiTranslate="artemisApp.result.missing.programmingFailedSubmission.message"]');
+        expect(spanElement).not.toBeNull();
+        expect(spanElement.getAttribute('jhiTranslate')).toBe('artemisApp.result.missing.programmingFailedSubmission.message');
+
+        // Test for FAILED_PROGRAMMING_SUBMISSION_ONLINE_IDE
+        comp.missingResultInfo = MissingResultInformation.FAILED_PROGRAMMING_SUBMISSION_ONLINE_IDE;
         fixture.detectChanges();
-        expect(compiled.textContent).toContain('artemisApp.result.missing.programmingFailedSubmission.message');
+        compiled = fixture.nativeElement;
+        spanElement = compiled.querySelector('span[jhiTranslate="artemisApp.result.missing.programmingFailedSubmission.message"]');
+        expect(spanElement).not.toBeNull();
+        expect(spanElement.getAttribute('jhiTranslate')).toBe('artemisApp.result.missing.programmingFailedSubmission.message');
     });
 
     it('should display the submitted text for SUBMITTED template status', () => {
diff --git a/src/test/javascript/spec/component/shared/sidebar/conversation-options.component.spec.ts b/src/test/javascript/spec/component/shared/sidebar/conversation-options.component.spec.ts
index f9f5326d2e3c..a89b2264612a 100644
--- a/src/test/javascript/spec/component/shared/sidebar/conversation-options.component.spec.ts
+++ b/src/test/javascript/spec/component/shared/sidebar/conversation-options.component.spec.ts
@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
-import { MockComponent, MockPipe, MockProvider } from 'ng-mocks';
+import { MockComponent, MockDirective, MockPipe, MockProvider } from 'ng-mocks';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { ConversationOptionsComponent } from 'app/shared/sidebar/conversation-options/conversation-options.component';
@@ -26,6 +26,7 @@ import { defaultFirstLayerDialogOptions } from 'app/overview/course-conversation
 import { ConversationDetailDialogComponent } from 'app/overview/course-conversations/dialogs/conversation-detail-dialog/conversation-detail-dialog.component';
 import { MetisConversationService } from 'app/shared/metis/metis-conversation.service';
 import { isOneToOneChatDTO } from 'app/entities/metis/conversation/one-to-one-chat.model';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 const examples: (() => ConversationDTO)[] = [
     () => generateOneToOneChatDTO({}),
@@ -59,7 +60,7 @@ examples.forEach((conversation) => {
                         { path: 'courses/:courseId/exams/:examId', component: ExamDetailComponent },
                     ]),
                 ],
-                declarations: [ConversationOptionsComponent, MockComponent(FaIconComponent), MockPipe(ArtemisTranslatePipe)],
+                declarations: [ConversationOptionsComponent, MockComponent(FaIconComponent), MockPipe(ArtemisTranslatePipe), MockDirective(TranslateDirective)],
                 providers: [
                     MockProvider(ConversationService),
                     MockProvider(MetisConversationService),
diff --git a/src/test/javascript/spec/component/statistics/statistics-average-score-graph.component.spec.ts b/src/test/javascript/spec/component/statistics/statistics-average-score-graph.component.spec.ts
index feb25f210d85..e850210ee35e 100644
--- a/src/test/javascript/spec/component/statistics/statistics-average-score-graph.component.spec.ts
+++ b/src/test/javascript/spec/component/statistics/statistics-average-score-graph.component.spec.ts
@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ArtemisTestModule } from '../../test.module';
 import { RouterTestingModule } from '@angular/router/testing';
-import { MockModule, MockPipe, MockProvider } from 'ng-mocks';
+import { MockDirective, MockModule, MockPipe, MockProvider } from 'ng-mocks';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { PerformanceInterval, StatisticsAverageScoreGraphComponent } from 'app/shared/statistics-graph/statistics-average-score-graph.component';
 import { BarChartModule } from '@swimlane/ngx-charts';
@@ -11,6 +11,7 @@ import { CourseManagementStatisticsModel } from 'app/entities/quiz/course-manage
 import { ArtemisNavigationUtilService } from 'app/utils/navigation.utils';
 import { ChartExerciseTypeFilter } from 'app/shared/chart/chart-exercise-type-filter';
 import { ChartCategoryFilter } from 'app/shared/chart/chart-category-filter';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 describe('StatisticsAverageScoreGraphComponent', () => {
     let fixture: ComponentFixture<StatisticsAverageScoreGraphComponent>;
@@ -77,7 +78,7 @@ describe('StatisticsAverageScoreGraphComponent', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [ArtemisTestModule, RouterTestingModule.withRoutes([]), MockModule(BarChartModule)],
-            declarations: [StatisticsAverageScoreGraphComponent, MockPipe(ArtemisTranslatePipe)],
+            declarations: [StatisticsAverageScoreGraphComponent, MockPipe(ArtemisTranslatePipe), MockDirective(TranslateDirective)],
             providers: [MockProvider(ArtemisNavigationUtilService), MockProvider(ChartExerciseTypeFilter), MockProvider(ChartCategoryFilter)],
         })
             .compileComponents()
diff --git a/src/test/javascript/spec/component/text-submission-assessment/text-assessment-area.component.spec.ts b/src/test/javascript/spec/component/text-submission-assessment/text-assessment-area.component.spec.ts
index 6c98166d5210..1ddc5bf27049 100644
--- a/src/test/javascript/spec/component/text-submission-assessment/text-assessment-area.component.spec.ts
+++ b/src/test/javascript/spec/component/text-submission-assessment/text-assessment-area.component.spec.ts
@@ -4,9 +4,10 @@ import { ArtemisTestModule } from '../../test.module';
 import { TextblockAssessmentCardComponent } from 'app/exercises/text/assess/textblock-assessment-card/textblock-assessment-card.component';
 import { TextBlockRef } from 'app/entities/text-block-ref.model';
 import { By } from '@angular/platform-browser';
-import { MockComponent } from 'ng-mocks';
+import { MockComponent, MockDirective } from 'ng-mocks';
 import { TranslatePipeMock } from '../../helpers/mocks/service/mock-translate.service';
 import { ManualTextblockSelectionComponent } from 'app/exercises/text/assess/manual-textblock-selection/manual-textblock-selection.component';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 describe('TextAssessmentAreaComponent', () => {
     let component: TextAssessmentAreaComponent;
@@ -15,7 +16,13 @@ describe('TextAssessmentAreaComponent', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [ArtemisTestModule],
-            declarations: [TextAssessmentAreaComponent, MockComponent(TextblockAssessmentCardComponent), MockComponent(ManualTextblockSelectionComponent), TranslatePipeMock],
+            declarations: [
+                TextAssessmentAreaComponent,
+                MockComponent(TextblockAssessmentCardComponent),
+                MockComponent(ManualTextblockSelectionComponent),
+                TranslatePipeMock,
+                MockDirective(TranslateDirective),
+            ],
         })
             .compileComponents()
             .then(() => {
diff --git a/src/test/javascript/spec/component/text-submission-assessment/text-submission-assessment.component.spec.ts b/src/test/javascript/spec/component/text-submission-assessment/text-submission-assessment.component.spec.ts
index 4cdcd197c837..e1027d236097 100644
--- a/src/test/javascript/spec/component/text-submission-assessment/text-submission-assessment.component.spec.ts
+++ b/src/test/javascript/spec/component/text-submission-assessment/text-submission-assessment.component.spec.ts
@@ -5,7 +5,7 @@ import { By } from '@angular/platform-browser';
 import { of, throwError } from 'rxjs';
 import { AssessmentLayoutComponent } from 'app/assessment/assessment-layout/assessment-layout.component';
 import { TextAssessmentAreaComponent } from 'app/exercises/text/assess/text-assessment-area/text-assessment-area.component';
-import { MockComponent, MockPipe, MockProvider } from 'ng-mocks';
+import { MockComponent, MockDirective, MockPipe, MockProvider } from 'ng-mocks';
 import { TextblockAssessmentCardComponent } from 'app/exercises/text/assess/textblock-assessment-card/textblock-assessment-card.component';
 import { TextblockFeedbackEditorComponent } from 'app/exercises/text/assess/textblock-feedback-editor/textblock-feedback-editor.component';
 import { ExerciseType } from 'app/entities/exercise.model';
@@ -46,6 +46,7 @@ import { TextAssessmentBaseComponent } from 'app/exercises/text/assess/text-asse
 import { AthenaService } from 'app/assessment/athena.service';
 import { MockAthenaService } from '../../helpers/mocks/service/mock-athena-service';
 import { TextBlockRef } from 'app/entities/text-block-ref.model';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 describe('TextSubmissionAssessmentComponent', () => {
     let component: TextSubmissionAssessmentComponent;
@@ -160,6 +161,7 @@ describe('TextSubmissionAssessmentComponent', () => {
                 MockComponent(ResizeableContainerComponent),
                 MockComponent(UnreferencedFeedbackComponent),
                 MockPipe(ArtemisTranslatePipe),
+                MockDirective(TranslateDirective),
             ],
             providers: [
                 { provide: ActivatedRoute, useValue: mockActivatedRoute },
diff --git a/src/test/javascript/spec/component/tutorial-groups/course-tutorial-groups/course-tutorial-group-card.component.spec.ts b/src/test/javascript/spec/component/tutorial-groups/course-tutorial-groups/course-tutorial-group-card.component.spec.ts
index 1f8fa36ce3c9..de181aa7add3 100644
--- a/src/test/javascript/spec/component/tutorial-groups/course-tutorial-groups/course-tutorial-group-card.component.spec.ts
+++ b/src/test/javascript/spec/component/tutorial-groups/course-tutorial-groups/course-tutorial-group-card.component.spec.ts
@@ -1,13 +1,15 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { CourseTutorialGroupCardComponent } from 'app/overview/course-tutorial-groups/course-tutorial-group-card/course-tutorial-group-card.component';
-import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
-import { MockComponent, MockPipe } from 'ng-mocks';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { TranslateService } from '@ngx-translate/core';
 import { generateExampleTutorialGroup } from '../helpers/tutorialGroupExampleModels';
 import { User } from 'app/core/user/user.model';
 import { TutorialGroup } from 'app/entities/tutorial-group/tutorial-group.model';
 import { Course } from 'app/entities/course.model';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
+import { MockComponent, MockDirective } from 'ng-mocks';
+import { TranslatePipeMock } from '../../../helpers/mocks/service/mock-translate.service';
 
 describe('CourseTutorialGroupCardComponent', () => {
     let component: CourseTutorialGroupCardComponent;
@@ -18,7 +20,16 @@ describe('CourseTutorialGroupCardComponent', () => {
     beforeEach(async () => {
         await TestBed.configureTestingModule({
             imports: [RouterTestingModule.withRoutes([])],
-            declarations: [CourseTutorialGroupCardComponent, MockComponent(FaIconComponent), MockPipe(ArtemisTranslatePipe)],
+            declarations: [CourseTutorialGroupCardComponent, MockComponent(FaIconComponent), TranslatePipeMock, MockDirective(TranslateDirective)],
+            providers: [
+                {
+                    provide: TranslateService,
+                    useValue: {
+                        instant: (key: string) => key,
+                        get: (key: string) => key,
+                    },
+                },
+            ],
         }).compileComponents();
 
         fixture = TestBed.createComponent(CourseTutorialGroupCardComponent);
diff --git a/src/test/javascript/spec/component/tutorial-groups/shared/tutorial-group-sessions-table.component.spec.ts b/src/test/javascript/spec/component/tutorial-groups/shared/tutorial-group-sessions-table.component.spec.ts
index 4580f627bbe5..8f630c5f5fe9 100644
--- a/src/test/javascript/spec/component/tutorial-groups/shared/tutorial-group-sessions-table.component.spec.ts
+++ b/src/test/javascript/spec/component/tutorial-groups/shared/tutorial-group-sessions-table.component.spec.ts
@@ -3,7 +3,7 @@ import { TutorialGroupSessionsTableComponent } from 'app/course/tutorial-groups/
 import { TutorialGroupSession } from 'app/entities/tutorial-group/tutorial-group-session.model';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { TutorialGroupSessionRowStubComponent } from '../stubs/tutorial-group-sessions-table-stub.component';
-import { MockPipe } from 'ng-mocks';
+import { MockDirective, MockPipe } from 'ng-mocks';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { generateExampleTutorialGroupSession } from '../helpers/tutorialGroupSessionExampleModels';
 import dayjs from 'dayjs/esm';
@@ -11,6 +11,7 @@ import { TutorialGroup } from 'app/entities/tutorial-group/tutorial-group.model'
 import { generateExampleTutorialGroup } from '../helpers/tutorialGroupExampleModels';
 import { ArtemisDatePipe } from 'app/shared/pipes/artemis-date.pipe';
 import { NgbCollapseMocksModule } from '../../../helpers/mocks/directive/ngbCollapseMocks.module';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 @Component({ selector: 'jhi-mock-extra-column', template: '' })
 class MockExtraColumnComponent {
@@ -63,6 +64,7 @@ describe('TutorialGroupSessionsTableWrapperTest', () => {
                 MockExtraColumnComponent,
                 MockPipe(ArtemisTranslatePipe),
                 MockPipe(ArtemisDatePipe),
+                MockDirective(TranslateDirective),
             ],
         })
             .compileComponents()
@@ -112,7 +114,13 @@ describe('TutorialGroupSessionTableComponent', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [NgbCollapseMocksModule],
-            declarations: [TutorialGroupSessionsTableComponent, TutorialGroupSessionRowStubComponent, MockPipe(ArtemisTranslatePipe), MockPipe(ArtemisDatePipe)],
+            declarations: [
+                TutorialGroupSessionsTableComponent,
+                TutorialGroupSessionRowStubComponent,
+                MockPipe(ArtemisTranslatePipe),
+                MockPipe(ArtemisDatePipe),
+                MockDirective(TranslateDirective),
+            ],
         })
             .compileComponents()
             .then(() => {
diff --git a/src/test/javascript/spec/component/tutorial-groups/shared/tutorial-groups-table.component.spec.ts b/src/test/javascript/spec/component/tutorial-groups/shared/tutorial-groups-table.component.spec.ts
index 120203545f35..d01aa3af255b 100644
--- a/src/test/javascript/spec/component/tutorial-groups/shared/tutorial-groups-table.component.spec.ts
+++ b/src/test/javascript/spec/component/tutorial-groups/shared/tutorial-groups-table.component.spec.ts
@@ -16,6 +16,7 @@ import { ArtemisDatePipe } from 'app/shared/pipes/artemis-date.pipe';
 import { runOnPushChangeDetection } from '../../../helpers/on-push-change-detection.helper';
 import { NgbTooltipMocksModule } from '../../../helpers/mocks/directive/ngbTooltipMocks.module';
 import { TutorialGroupUtilizationIndicatorComponent } from 'app/course/tutorial-groups/shared/tutorial-group-utilization-indicator/tutorial-group-utilization-indicator.component';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 @Component({ selector: 'jhi-mock-extra-column', template: '' })
 class MockExtraColumnComponent {
@@ -74,6 +75,7 @@ describe('TutorialGroupTableWrapperTest', () => {
                 MockDirective(SortByDirective),
                 MockComponent(FaIconComponent),
                 MockComponent(TutorialGroupUtilizationIndicatorComponent),
+                MockDirective(TranslateDirective),
             ],
             providers: [MockProvider(SortService)],
         })
@@ -131,6 +133,7 @@ describe('TutorialGroupsTableComponent', () => {
                 MockDirective(SortByDirective),
                 MockComponent(TutorialGroupUtilizationIndicatorComponent),
                 MockComponent(FaIconComponent),
+                MockDirective(TranslateDirective),
             ],
             providers: [MockProvider(SortService)],
         })
diff --git a/src/test/javascript/spec/component/tutorial-groups/tutorial-groups-management/tutorial-free-periods/crud/tutorial-group-free-period-form.component.spec.ts b/src/test/javascript/spec/component/tutorial-groups/tutorial-groups-management/tutorial-free-periods/crud/tutorial-group-free-period-form.component.spec.ts
index d14fa5f1cc77..3c718f75bc2c 100644
--- a/src/test/javascript/spec/component/tutorial-groups/tutorial-groups-management/tutorial-free-periods/crud/tutorial-group-free-period-form.component.spec.ts
+++ b/src/test/javascript/spec/component/tutorial-groups/tutorial-groups-management/tutorial-free-periods/crud/tutorial-group-free-period-form.component.spec.ts
@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
-import { MockComponent, MockPipe } from 'ng-mocks';
+import { MockComponent, MockDirective, MockPipe } from 'ng-mocks';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
 import {
@@ -13,6 +13,7 @@ import { generateClickSubmitButton, generateTestFormIsInvalidOnMissingRequiredPr
 import { ArtemisDatePipe } from 'app/shared/pipes/artemis-date.pipe';
 import { runOnPushChangeDetection } from '../../../../../helpers/on-push-change-detection.helper';
 import dayjs from 'dayjs/esm';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 describe('TutorialFreePeriodFormComponent', () => {
     let fixture: ComponentFixture<TutorialGroupFreePeriodFormComponent>;
@@ -35,7 +36,13 @@ describe('TutorialFreePeriodFormComponent', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [ReactiveFormsModule, FormsModule, OwlDateTimeModule, OwlNativeDateTimeModule],
-            declarations: [TutorialGroupFreePeriodFormComponent, MockPipe(ArtemisTranslatePipe), MockComponent(FaIconComponent), MockPipe(ArtemisDatePipe)],
+            declarations: [
+                TutorialGroupFreePeriodFormComponent,
+                MockPipe(ArtemisTranslatePipe),
+                MockComponent(FaIconComponent),
+                MockPipe(ArtemisDatePipe),
+                MockDirective(TranslateDirective),
+            ],
         })
             .compileComponents()
             .then(() => {
diff --git a/src/test/javascript/spec/component/tutorial-groups/tutorial-groups-management/tutorial-free-periods/tutorial-free-periods-management/tutorial-group-free-periods-management.component.spec.ts b/src/test/javascript/spec/component/tutorial-groups/tutorial-groups-management/tutorial-free-periods/tutorial-free-periods-management/tutorial-group-free-periods-management.component.spec.ts
index 1de186d73aae..f47763db3b2e 100644
--- a/src/test/javascript/spec/component/tutorial-groups/tutorial-groups-management/tutorial-free-periods/tutorial-free-periods-management/tutorial-group-free-periods-management.component.spec.ts
+++ b/src/test/javascript/spec/component/tutorial-groups/tutorial-groups-management/tutorial-free-periods/tutorial-free-periods-management/tutorial-group-free-periods-management.component.spec.ts
@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing';
-import { MockComponent, MockPipe, MockProvider } from 'ng-mocks';
+import { MockComponent, MockDirective, MockPipe, MockProvider } from 'ng-mocks';
 import { AlertService } from 'app/core/util/alert.service';
 import { MockRouter } from '../../../../../helpers/mocks/mock-router';
 import { of } from 'rxjs';
@@ -25,6 +25,7 @@ import { Course } from 'app/entities/course.model';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { CreateTutorialGroupFreePeriodComponent } from 'app/course/tutorial-groups/tutorial-groups-management/tutorial-free-periods/crud/create-tutorial-group-free-period/create-tutorial-group-free-period.component';
 import { TutorialGroupFreePeriodsTableComponent } from 'app/course/tutorial-groups/tutorial-groups-management/tutorial-free-periods/tutorial-free-periods-management/tutorial-group-free-periods-table/tutorial-group-free-periods-table.component';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 @Component({ selector: 'jhi-tutorial-group-free-period-row-buttons', template: '' })
 class TutorialGroupRowButtonsStubComponent {
@@ -61,6 +62,7 @@ describe('TutorialGroupFreePeriodsManagementComponent', () => {
                 MockComponent(FaIconComponent),
                 MockRouterLinkDirective,
                 TutorialGroupFreePeriodsTableComponent,
+                MockDirective(TranslateDirective),
             ],
             providers: [
                 MockProvider(TutorialGroupsConfigurationService),
diff --git a/src/test/javascript/spec/component/tutorial-groups/tutorial-groups-management/tutorial-group-sessions/crud/tutorial-group-session-form.component.spec.ts b/src/test/javascript/spec/component/tutorial-groups/tutorial-groups-management/tutorial-group-sessions/crud/tutorial-group-session-form.component.spec.ts
index c1139fec76c6..b4f3aa70133a 100644
--- a/src/test/javascript/spec/component/tutorial-groups/tutorial-groups-management/tutorial-group-sessions/crud/tutorial-group-session-form.component.spec.ts
+++ b/src/test/javascript/spec/component/tutorial-groups/tutorial-groups-management/tutorial-group-sessions/crud/tutorial-group-session-form.component.spec.ts
@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
-import { MockComponent, MockPipe } from 'ng-mocks';
+import { MockComponent, MockDirective, MockPipe } from 'ng-mocks';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import {
     TutorialGroupSessionFormComponent,
@@ -13,6 +13,7 @@ import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angul
 import { generateClickSubmitButton, generateTestFormIsInvalidOnMissingRequiredProperty } from '../../../helpers/tutorialGroupFormsUtils';
 import { ArtemisDatePipe } from 'app/shared/pipes/artemis-date.pipe';
 import { runOnPushChangeDetection } from '../../../../../helpers/on-push-change-detection.helper';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 describe('TutorialGroupSessionForm', () => {
     let fixture: ComponentFixture<TutorialGroupSessionFormComponent>;
@@ -28,7 +29,13 @@ describe('TutorialGroupSessionForm', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [ReactiveFormsModule, FormsModule, NgbTimepickerModule, OwlDateTimeModule, OwlNativeDateTimeModule],
-            declarations: [TutorialGroupSessionFormComponent, MockPipe(ArtemisTranslatePipe), MockComponent(FaIconComponent), MockPipe(ArtemisDatePipe)],
+            declarations: [
+                TutorialGroupSessionFormComponent,
+                MockPipe(ArtemisTranslatePipe),
+                MockComponent(FaIconComponent),
+                MockPipe(ArtemisDatePipe),
+                MockDirective(TranslateDirective),
+            ],
         })
             .compileComponents()
             .then(() => {
diff --git a/src/test/javascript/spec/component/tutorial-groups/tutorial-groups-management/tutorial-groups-configuration/crud/tutorial-groups-configuration-form.component.spec.ts b/src/test/javascript/spec/component/tutorial-groups/tutorial-groups-management/tutorial-groups-configuration/crud/tutorial-groups-configuration-form.component.spec.ts
index 8deb6bc1350b..9393704774ea 100644
--- a/src/test/javascript/spec/component/tutorial-groups/tutorial-groups-management/tutorial-groups-configuration/crud/tutorial-groups-configuration-form.component.spec.ts
+++ b/src/test/javascript/spec/component/tutorial-groups/tutorial-groups-management/tutorial-groups-configuration/crud/tutorial-groups-configuration-form.component.spec.ts
@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
-import { MockComponent, MockPipe } from 'ng-mocks';
+import { MockComponent, MockDirective, MockPipe } from 'ng-mocks';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
 import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
@@ -13,6 +13,7 @@ import { generateClickSubmitButton, generateTestFormIsInvalidOnMissingRequiredPr
 import { ArtemisDateRangePipe } from 'app/shared/pipes/artemis-date-range.pipe';
 import { runOnPushChangeDetection } from '../../../../../helpers/on-push-change-detection.helper';
 import { Course } from 'app/entities/course.model';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 describe('TutorialGroupsConfigurationFormComponent', () => {
     let fixture: ComponentFixture<TutorialGroupsConfigurationFormComponent>;
@@ -28,7 +29,13 @@ describe('TutorialGroupsConfigurationFormComponent', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [ReactiveFormsModule, FormsModule, NgbTypeaheadModule, OwlDateTimeModule, OwlNativeDateTimeModule],
-            declarations: [TutorialGroupsConfigurationFormComponent, MockPipe(ArtemisTranslatePipe), MockPipe(ArtemisDateRangePipe), MockComponent(FaIconComponent)],
+            declarations: [
+                TutorialGroupsConfigurationFormComponent,
+                MockPipe(ArtemisTranslatePipe),
+                MockPipe(ArtemisDateRangePipe),
+                MockComponent(FaIconComponent),
+                MockDirective(TranslateDirective),
+            ],
         })
             .compileComponents()
             .then(() => {
diff --git a/src/test/javascript/spec/component/tutorial-groups/tutorial-groups-management/tutorial-groups/tutorial-groups-management/tutorial-groups-registration-import-dialog.component.spec.ts b/src/test/javascript/spec/component/tutorial-groups/tutorial-groups-management/tutorial-groups/tutorial-groups-management/tutorial-groups-registration-import-dialog.component.spec.ts
index ccd0f11f74b5..f896954754a3 100644
--- a/src/test/javascript/spec/component/tutorial-groups/tutorial-groups-management/tutorial-groups/tutorial-groups-management/tutorial-groups-registration-import-dialog.component.spec.ts
+++ b/src/test/javascript/spec/component/tutorial-groups/tutorial-groups-management/tutorial-groups/tutorial-groups-management/tutorial-groups-registration-import-dialog.component.spec.ts
@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { TutorialGroupsRegistrationImportDialogComponent } from 'app/course/tutorial-groups/tutorial-groups-management/tutorial-groups/tutorial-groups-management/tutorial-groups-import-dialog/tutorial-groups-registration-import-dialog.component';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
-import { MockComponent, MockPipe, MockProvider } from 'ng-mocks';
+import { MockComponent, MockDirective, MockPipe, MockProvider } from 'ng-mocks';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { TutorialGroupsService } from 'app/course/tutorial-groups/services/tutorial-groups.service';
@@ -14,6 +14,7 @@ import { StudentDTO } from 'app/entities/student-dto.model';
 import { ParseError, ParseResult, ParseWorkerConfig, parse } from 'papaparse';
 import { of } from 'rxjs';
 import { HttpResponse } from '@angular/common/http';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 jest.mock('papaparse', () => {
     const original = jest.requireActual('papaparse');
     return {
@@ -30,7 +31,7 @@ describe('TutorialGroupsRegistrationImportDialog', () => {
     beforeEach(async () => {
         await TestBed.configureTestingModule({
             imports: [FormsModule, ReactiveFormsModule],
-            declarations: [TutorialGroupsRegistrationImportDialogComponent, MockPipe(ArtemisTranslatePipe), MockComponent(FaIconComponent)],
+            declarations: [TutorialGroupsRegistrationImportDialogComponent, MockPipe(ArtemisTranslatePipe), MockComponent(FaIconComponent), MockDirective(TranslateDirective)],
             providers: [MockProvider(TranslateService), MockProvider(AlertService), MockProvider(TutorialGroupsService), MockProvider(NgbActiveModal)],
         }).compileComponents();
 

From f055750031b04d95ae89d8c964bc5011822f02fc Mon Sep 17 00:00:00 2001
From: Marcel Gaupp <m.gaupp@tum.de>
Date: Mon, 26 Aug 2024 20:44:23 +0200
Subject: [PATCH 07/15] Programming exercises: Add Rust programming template
 (#8802)

---
 .../programming-exercise-features.inc         |   4 +
 .../enumeration/ProgrammingLanguage.java      |   3 +-
 .../ci/ContinuousIntegrationService.java      |   8 +-
 ...abCIProgrammingLanguageFeatureService.java |   2 +
 ...kinsProgrammingLanguageFeatureService.java |   2 +
 .../build_plan/JenkinsBuildPlanService.java   |   4 +-
 ...alCIProgrammingLanguageFeatureService.java |   2 +
 .../TemplateUpgradePolicyService.java         |   4 +-
 src/main/resources/config/application.yml     |   2 +
 .../templates/aeolus/rust/default.sh          |  26 ++
 .../templates/aeolus/rust/default.yaml        |  14 +
 .../gitlabci/rust/regularRuns/.gitlab-ci.yml  |  47 +++
 .../jenkins/rust/regularRuns/pipeline.groovy  |  56 +++
 .../templates/rust/exercise/.gitattributes    |   5 +
 .../templates/rust/exercise/.gitignore        |   1 +
 .../templates/rust/exercise/Cargo.lock        | 100 +++++
 .../templates/rust/exercise/Cargo.toml        |   8 +
 .../rust/exercise/src/bubble_sort.rs          |  14 +
 .../templates/rust/exercise/src/context.rs    |   1 +
 .../templates/rust/exercise/src/lib.rs        |   5 +
 .../templates/rust/exercise/src/main.rs       |  53 +++
 .../templates/rust/exercise/src/merge_sort.rs |  14 +
 .../templates/rust/exercise/src/policy.rs     |   1 +
 .../rust/exercise/src/sort_strategy.rs        |   2 +
 src/main/resources/templates/rust/readme      |  91 +++++
 .../templates/rust/solution/.gitattributes    |   5 +
 .../templates/rust/solution/.gitignore        |   1 +
 .../templates/rust/solution/Cargo.lock        | 100 +++++
 .../templates/rust/solution/Cargo.toml        |   8 +
 .../rust/solution/src/bubble_sort.rs          |  23 ++
 .../templates/rust/solution/src/context.rs    |  36 ++
 .../templates/rust/solution/src/lib.rs        |   5 +
 .../templates/rust/solution/src/main.rs       |  59 +++
 .../templates/rust/solution/src/merge_sort.rs |  59 +++
 .../templates/rust/solution/src/policy.rs     |  28 ++
 .../rust/solution/src/sort_strategy.rs        |  10 +
 .../templates/rust/test/.config/nextest.toml  |   5 +
 .../templates/rust/test/.gitattributes        |   5 +
 .../resources/templates/rust/test/.gitignore  |   2 +
 .../resources/templates/rust/test/Cargo.lock  | 183 +++++++++
 .../resources/templates/rust/test/Cargo.toml  |  13 +
 .../resources/templates/rust/test/build.rs    | 204 +++++++++++
 .../test/rust_template_test_macros/.gitignore |   1 +
 .../test/rust_template_test_macros/Cargo.lock |  46 +++
 .../test/rust_template_test_macros/Cargo.toml |  11 +
 .../test/rust_template_test_macros/src/lib.rs | 346 ++++++++++++++++++
 .../templates/rust/test/tests/behavior.rs     |  90 +++++
 .../templates/rust/test/tests/structural.rs   |  79 ++++
 .../rust/test/tests/structural_helpers/mod.rs | 207 +++++++++++
 .../entities/programming-exercise.model.ts    |   1 +
 src/test/resources/config/application.yml     |   2 +
 51 files changed, 1989 insertions(+), 9 deletions(-)
 create mode 100644 src/main/resources/templates/aeolus/rust/default.sh
 create mode 100644 src/main/resources/templates/aeolus/rust/default.yaml
 create mode 100644 src/main/resources/templates/gitlabci/rust/regularRuns/.gitlab-ci.yml
 create mode 100644 src/main/resources/templates/jenkins/rust/regularRuns/pipeline.groovy
 create mode 100644 src/main/resources/templates/rust/exercise/.gitattributes
 create mode 100644 src/main/resources/templates/rust/exercise/.gitignore
 create mode 100644 src/main/resources/templates/rust/exercise/Cargo.lock
 create mode 100644 src/main/resources/templates/rust/exercise/Cargo.toml
 create mode 100644 src/main/resources/templates/rust/exercise/src/bubble_sort.rs
 create mode 100644 src/main/resources/templates/rust/exercise/src/context.rs
 create mode 100644 src/main/resources/templates/rust/exercise/src/lib.rs
 create mode 100644 src/main/resources/templates/rust/exercise/src/main.rs
 create mode 100644 src/main/resources/templates/rust/exercise/src/merge_sort.rs
 create mode 100644 src/main/resources/templates/rust/exercise/src/policy.rs
 create mode 100644 src/main/resources/templates/rust/exercise/src/sort_strategy.rs
 create mode 100755 src/main/resources/templates/rust/readme
 create mode 100644 src/main/resources/templates/rust/solution/.gitattributes
 create mode 100644 src/main/resources/templates/rust/solution/.gitignore
 create mode 100644 src/main/resources/templates/rust/solution/Cargo.lock
 create mode 100644 src/main/resources/templates/rust/solution/Cargo.toml
 create mode 100644 src/main/resources/templates/rust/solution/src/bubble_sort.rs
 create mode 100644 src/main/resources/templates/rust/solution/src/context.rs
 create mode 100644 src/main/resources/templates/rust/solution/src/lib.rs
 create mode 100644 src/main/resources/templates/rust/solution/src/main.rs
 create mode 100644 src/main/resources/templates/rust/solution/src/merge_sort.rs
 create mode 100644 src/main/resources/templates/rust/solution/src/policy.rs
 create mode 100644 src/main/resources/templates/rust/solution/src/sort_strategy.rs
 create mode 100644 src/main/resources/templates/rust/test/.config/nextest.toml
 create mode 100644 src/main/resources/templates/rust/test/.gitattributes
 create mode 100644 src/main/resources/templates/rust/test/.gitignore
 create mode 100644 src/main/resources/templates/rust/test/Cargo.lock
 create mode 100644 src/main/resources/templates/rust/test/Cargo.toml
 create mode 100644 src/main/resources/templates/rust/test/build.rs
 create mode 100644 src/main/resources/templates/rust/test/rust_template_test_macros/.gitignore
 create mode 100644 src/main/resources/templates/rust/test/rust_template_test_macros/Cargo.lock
 create mode 100644 src/main/resources/templates/rust/test/rust_template_test_macros/Cargo.toml
 create mode 100644 src/main/resources/templates/rust/test/rust_template_test_macros/src/lib.rs
 create mode 100644 src/main/resources/templates/rust/test/tests/behavior.rs
 create mode 100644 src/main/resources/templates/rust/test/tests/structural.rs
 create mode 100644 src/main/resources/templates/rust/test/tests/structural_helpers/mod.rs

diff --git a/docs/user/exercises/programming-exercise-features.inc b/docs/user/exercises/programming-exercise-features.inc
index e73c16088efe..3675a9e4c2b0 100644
--- a/docs/user/exercises/programming-exercise-features.inc
+++ b/docs/user/exercises/programming-exercise-features.inc
@@ -33,6 +33,8 @@ Instructors can still use those templates to generate programming exercises and
   +----------------------+----------+---------+
   | OCaml                | yes      | no      |
   +----------------------+----------+---------+
+  | Rust                 | yes      | yes     |
+  +----------------------+----------+---------+
 
 - Not all ``templates`` support the same feature set and supported features can also change depending on the continuous integration system setup.
   Depending on the feature set, some options might not be available during the creation of the programming exercise.
@@ -63,6 +65,8 @@ Instructors can still use those templates to generate programming exercises and
   +----------------------+----------------------+----------------------+---------------------+--------------+------------------------------------------+------------------------------+----------------------------+------------------------+
   | OCaml                | no                   | no                   | no                  | no           | n/a                                      | yes                          | no                         | L: yes, J: no          |
   +----------------------+----------------------+----------------------+---------------------+--------------+------------------------------------------+------------------------------+----------------------------+------------------------+
+  | Rust                 | no                   | no                   | no                  | no           | n/a                                      | no                           | no                         | L: yes, J: no          |
+  +----------------------+----------------------+----------------------+---------------------+--------------+------------------------------------------+------------------------------+----------------------------+------------------------+
 
   - *Sequential Test Runs*: ``Artemis`` can generate a build plan which first executes structural and then behavioral tests. This feature can help students to better concentrate on the immediate challenge at hand.
   - *Static Code Analysis*: ``Artemis`` can generate a build plan which additionally executes static code analysis tools.
diff --git a/src/main/java/de/tum/in/www1/artemis/domain/enumeration/ProgrammingLanguage.java b/src/main/java/de/tum/in/www1/artemis/domain/enumeration/ProgrammingLanguage.java
index 3d43ae71fc93..60da52e071f2 100644
--- a/src/main/java/de/tum/in/www1/artemis/domain/enumeration/ProgrammingLanguage.java
+++ b/src/main/java/de/tum/in/www1/artemis/domain/enumeration/ProgrammingLanguage.java
@@ -47,7 +47,8 @@ public enum ProgrammingLanguage {
         VHDL,
         ASSEMBLER,
         SWIFT,
-        OCAML
+        OCAML,
+        RUST
     );
     // @formatter:on
 
diff --git a/src/main/java/de/tum/in/www1/artemis/service/connectors/ci/ContinuousIntegrationService.java b/src/main/java/de/tum/in/www1/artemis/service/connectors/ci/ContinuousIntegrationService.java
index f22eebc954bf..2cb70653b3d4 100644
--- a/src/main/java/de/tum/in/www1/artemis/service/connectors/ci/ContinuousIntegrationService.java
+++ b/src/main/java/de/tum/in/www1/artemis/service/connectors/ci/ContinuousIntegrationService.java
@@ -219,8 +219,8 @@ enum RepositoryCheckoutPath implements CustomizableCheckoutPath {
             @Override
             public String forProgrammingLanguage(ProgrammingLanguage language) {
                 return switch (language) {
-                    case JAVA, PYTHON, C, HASKELL, KOTLIN, VHDL, ASSEMBLER, SWIFT, OCAML, EMPTY -> "assignment";
-                    case JAVASCRIPT, C_SHARP, C_PLUS_PLUS, SQL, R, TYPESCRIPT, RUST, GO, MATLAB, BASH, RUBY, POWERSHELL, ADA, DART, PHP ->
+                    case JAVA, PYTHON, C, HASKELL, KOTLIN, VHDL, ASSEMBLER, SWIFT, OCAML, EMPTY, RUST -> "assignment";
+                    case JAVASCRIPT, C_SHARP, C_PLUS_PLUS, SQL, R, TYPESCRIPT, GO, MATLAB, BASH, RUBY, POWERSHELL, ADA, DART, PHP ->
                         throw new UnsupportedOperationException("Unsupported programming language: " + language);
                 };
             }
@@ -230,9 +230,9 @@ public String forProgrammingLanguage(ProgrammingLanguage language) {
             @Override
             public String forProgrammingLanguage(ProgrammingLanguage language) {
                 return switch (language) {
-                    case JAVA, PYTHON, HASKELL, KOTLIN, SWIFT, EMPTY -> "";
+                    case JAVA, PYTHON, HASKELL, KOTLIN, SWIFT, EMPTY, RUST -> "";
                     case C, VHDL, ASSEMBLER, OCAML -> "tests";
-                    case JAVASCRIPT, C_SHARP, C_PLUS_PLUS, SQL, R, TYPESCRIPT, RUST, GO, MATLAB, BASH, RUBY, POWERSHELL, ADA, DART, PHP ->
+                    case JAVASCRIPT, C_SHARP, C_PLUS_PLUS, SQL, R, TYPESCRIPT, GO, MATLAB, BASH, RUBY, POWERSHELL, ADA, DART, PHP ->
                         throw new UnsupportedOperationException("Unsupported programming language: " + language);
                 };
             }
diff --git a/src/main/java/de/tum/in/www1/artemis/service/connectors/gitlabci/GitLabCIProgrammingLanguageFeatureService.java b/src/main/java/de/tum/in/www1/artemis/service/connectors/gitlabci/GitLabCIProgrammingLanguageFeatureService.java
index 55ecbb0e447c..52b10ee2c9be 100644
--- a/src/main/java/de/tum/in/www1/artemis/service/connectors/gitlabci/GitLabCIProgrammingLanguageFeatureService.java
+++ b/src/main/java/de/tum/in/www1/artemis/service/connectors/gitlabci/GitLabCIProgrammingLanguageFeatureService.java
@@ -2,6 +2,7 @@
 
 import static de.tum.in.www1.artemis.domain.enumeration.ProgrammingLanguage.EMPTY;
 import static de.tum.in.www1.artemis.domain.enumeration.ProgrammingLanguage.JAVA;
+import static de.tum.in.www1.artemis.domain.enumeration.ProgrammingLanguage.RUST;
 import static de.tum.in.www1.artemis.domain.enumeration.ProjectType.MAVEN_MAVEN;
 import static de.tum.in.www1.artemis.domain.enumeration.ProjectType.PLAIN_MAVEN;
 
@@ -20,5 +21,6 @@ public class GitLabCIProgrammingLanguageFeatureService extends ProgrammingLangua
     public GitLabCIProgrammingLanguageFeatureService() {
         programmingLanguageFeatures.put(EMPTY, new ProgrammingLanguageFeature(EMPTY, false, false, false, false, false, List.of(), false, false));
         programmingLanguageFeatures.put(JAVA, new ProgrammingLanguageFeature(JAVA, false, false, false, true, false, List.of(PLAIN_MAVEN, MAVEN_MAVEN), false, false));
+        programmingLanguageFeatures.put(RUST, new ProgrammingLanguageFeature(RUST, false, false, false, false, false, List.of(), false, false));
     }
 }
diff --git a/src/main/java/de/tum/in/www1/artemis/service/connectors/jenkins/JenkinsProgrammingLanguageFeatureService.java b/src/main/java/de/tum/in/www1/artemis/service/connectors/jenkins/JenkinsProgrammingLanguageFeatureService.java
index 533e4c709005..d8a4abd0fea3 100644
--- a/src/main/java/de/tum/in/www1/artemis/service/connectors/jenkins/JenkinsProgrammingLanguageFeatureService.java
+++ b/src/main/java/de/tum/in/www1/artemis/service/connectors/jenkins/JenkinsProgrammingLanguageFeatureService.java
@@ -6,6 +6,7 @@
 import static de.tum.in.www1.artemis.domain.enumeration.ProgrammingLanguage.JAVA;
 import static de.tum.in.www1.artemis.domain.enumeration.ProgrammingLanguage.KOTLIN;
 import static de.tum.in.www1.artemis.domain.enumeration.ProgrammingLanguage.PYTHON;
+import static de.tum.in.www1.artemis.domain.enumeration.ProgrammingLanguage.RUST;
 import static de.tum.in.www1.artemis.domain.enumeration.ProgrammingLanguage.SWIFT;
 import static de.tum.in.www1.artemis.domain.enumeration.ProjectType.FACT;
 import static de.tum.in.www1.artemis.domain.enumeration.ProjectType.GCC;
@@ -39,5 +40,6 @@ public JenkinsProgrammingLanguageFeatureService() {
         programmingLanguageFeatures.put(SWIFT, new ProgrammingLanguageFeature(SWIFT, false, true, true, true, false, List.of(PLAIN), false, false));
         programmingLanguageFeatures.put(C, new ProgrammingLanguageFeature(C, false, false, true, false, false, List.of(FACT, GCC), false, false));
         programmingLanguageFeatures.put(HASKELL, new ProgrammingLanguageFeature(HASKELL, false, false, false, false, true, List.of(), false, false));
+        programmingLanguageFeatures.put(RUST, new ProgrammingLanguageFeature(RUST, false, false, false, false, false, List.of(), false, false));
     }
 }
diff --git a/src/main/java/de/tum/in/www1/artemis/service/connectors/jenkins/build_plan/JenkinsBuildPlanService.java b/src/main/java/de/tum/in/www1/artemis/service/connectors/jenkins/build_plan/JenkinsBuildPlanService.java
index a97f293e1b53..929a9e1e5750 100644
--- a/src/main/java/de/tum/in/www1/artemis/service/connectors/jenkins/build_plan/JenkinsBuildPlanService.java
+++ b/src/main/java/de/tum/in/www1/artemis/service/connectors/jenkins/build_plan/JenkinsBuildPlanService.java
@@ -184,8 +184,8 @@ private JenkinsXmlConfigBuilder builderFor(ProgrammingLanguage programmingLangua
             throw new UnsupportedOperationException("Xcode templates are not available for Jenkins.");
         }
         return switch (programmingLanguage) {
-            case JAVA, KOTLIN, PYTHON, C, HASKELL, SWIFT, EMPTY -> jenkinsBuildPlanCreator;
-            case VHDL, ASSEMBLER, OCAML, JAVASCRIPT, C_SHARP, C_PLUS_PLUS, SQL, R, TYPESCRIPT, RUST, GO, MATLAB, BASH, RUBY, POWERSHELL, ADA, DART, PHP ->
+            case JAVA, KOTLIN, PYTHON, C, HASKELL, SWIFT, EMPTY, RUST -> jenkinsBuildPlanCreator;
+            case VHDL, ASSEMBLER, OCAML, JAVASCRIPT, C_SHARP, C_PLUS_PLUS, SQL, R, TYPESCRIPT, GO, MATLAB, BASH, RUBY, POWERSHELL, ADA, DART, PHP ->
                 throw new UnsupportedOperationException(programmingLanguage + " templates are not available for Jenkins.");
         };
     }
diff --git a/src/main/java/de/tum/in/www1/artemis/service/connectors/localci/LocalCIProgrammingLanguageFeatureService.java b/src/main/java/de/tum/in/www1/artemis/service/connectors/localci/LocalCIProgrammingLanguageFeatureService.java
index 276ab23671fa..101e0540521f 100644
--- a/src/main/java/de/tum/in/www1/artemis/service/connectors/localci/LocalCIProgrammingLanguageFeatureService.java
+++ b/src/main/java/de/tum/in/www1/artemis/service/connectors/localci/LocalCIProgrammingLanguageFeatureService.java
@@ -8,6 +8,7 @@
 import static de.tum.in.www1.artemis.domain.enumeration.ProgrammingLanguage.KOTLIN;
 import static de.tum.in.www1.artemis.domain.enumeration.ProgrammingLanguage.OCAML;
 import static de.tum.in.www1.artemis.domain.enumeration.ProgrammingLanguage.PYTHON;
+import static de.tum.in.www1.artemis.domain.enumeration.ProgrammingLanguage.RUST;
 import static de.tum.in.www1.artemis.domain.enumeration.ProgrammingLanguage.SWIFT;
 import static de.tum.in.www1.artemis.domain.enumeration.ProgrammingLanguage.VHDL;
 import static de.tum.in.www1.artemis.domain.enumeration.ProjectType.FACT;
@@ -46,5 +47,6 @@ public LocalCIProgrammingLanguageFeatureService() {
         programmingLanguageFeatures.put(HASKELL, new ProgrammingLanguageFeature(HASKELL, true, false, false, false, true, List.of(), false, true));
         programmingLanguageFeatures.put(OCAML, new ProgrammingLanguageFeature(OCAML, false, false, false, false, true, List.of(), false, true));
         programmingLanguageFeatures.put(SWIFT, new ProgrammingLanguageFeature(SWIFT, false, false, true, true, false, List.of(PLAIN), false, true));
+        programmingLanguageFeatures.put(RUST, new ProgrammingLanguageFeature(RUST, false, false, false, false, false, List.of(), false, true));
     }
 }
diff --git a/src/main/java/de/tum/in/www1/artemis/service/programming/TemplateUpgradePolicyService.java b/src/main/java/de/tum/in/www1/artemis/service/programming/TemplateUpgradePolicyService.java
index ad6ae2ab5744..a836f81a4982 100644
--- a/src/main/java/de/tum/in/www1/artemis/service/programming/TemplateUpgradePolicyService.java
+++ b/src/main/java/de/tum/in/www1/artemis/service/programming/TemplateUpgradePolicyService.java
@@ -32,8 +32,8 @@ public TemplateUpgradePolicyService(JavaTemplateUpgradeService javaRepositoryUpg
     public TemplateUpgradeService getUpgradeService(ProgrammingLanguage programmingLanguage) {
         return switch (programmingLanguage) {
             case JAVA -> javaRepositoryUpgradeService;
-            case KOTLIN, PYTHON, C, HASKELL, VHDL, ASSEMBLER, SWIFT, OCAML, EMPTY -> defaultRepositoryUpgradeService;
-            case JAVASCRIPT, C_SHARP, C_PLUS_PLUS, SQL, R, TYPESCRIPT, RUST, GO, MATLAB, BASH, RUBY, POWERSHELL, ADA, DART, PHP ->
+            case KOTLIN, PYTHON, C, HASKELL, VHDL, ASSEMBLER, SWIFT, OCAML, EMPTY, RUST -> defaultRepositoryUpgradeService;
+            case JAVASCRIPT, C_SHARP, C_PLUS_PLUS, SQL, R, TYPESCRIPT, GO, MATLAB, BASH, RUBY, POWERSHELL, ADA, DART, PHP ->
                 throw new UnsupportedOperationException("Unsupported programming language: " + programmingLanguage);
         };
     }
diff --git a/src/main/resources/config/application.yml b/src/main/resources/config/application.yml
index b216a43a2bf6..8c391da0b7a9 100644
--- a/src/main/resources/config/application.yml
+++ b/src/main/resources/config/application.yml
@@ -87,6 +87,8 @@ artemis:
                     default: "ls1tum/artemis-swift-swiftlint-docker:latest"
                 ocaml:
                     default: "ls1tum/artemis-ocaml-docker:v1"
+                rust:
+                    default: "ghcr.io/ls1intum/artemis-rust-docker:v0.9.70"
 
 management:
     endpoints:
diff --git a/src/main/resources/templates/aeolus/rust/default.sh b/src/main/resources/templates/aeolus/rust/default.sh
new file mode 100644
index 000000000000..d1ba23293a58
--- /dev/null
+++ b/src/main/resources/templates/aeolus/rust/default.sh
@@ -0,0 +1,26 @@
+#!/usr/bin/env bash
+set -e
+export AEOLUS_INITIAL_DIRECTORY=${PWD}
+build () {
+  echo '⚙️ executing build'
+  cargo build --verbose
+}
+
+run_all_tests () {
+  echo '⚙️ executing run_all_tests'
+  cargo nextest run --profile ci
+}
+
+main () {
+  if [[ "${1}" == "aeolus_sourcing" ]]; then
+    return 0 # just source to use the methods in the subshell, no execution
+  fi
+  local _script_name
+  _script_name=${BASH_SOURCE[0]:-$0}
+  cd "${AEOLUS_INITIAL_DIRECTORY}"
+  bash -c "source ${_script_name} aeolus_sourcing; build"
+  cd "${AEOLUS_INITIAL_DIRECTORY}"
+  bash -c "source ${_script_name} aeolus_sourcing; run_all_tests"
+}
+
+main "${@}"
diff --git a/src/main/resources/templates/aeolus/rust/default.yaml b/src/main/resources/templates/aeolus/rust/default.yaml
new file mode 100644
index 000000000000..4cd44c110048
--- /dev/null
+++ b/src/main/resources/templates/aeolus/rust/default.yaml
@@ -0,0 +1,14 @@
+api: v0.0.1
+metadata:
+  name: Rust
+  id: rust
+  description: Test crate using cargo
+actions:
+  - name: build
+    script: cargo build --verbose
+  - name: run_all_tests
+    script: cargo nextest run --profile ci
+    results:
+      - name: junit_target/nextest/ci/junit.xml
+        path: target/nextest/ci/junit.xml
+        type: junit
diff --git a/src/main/resources/templates/gitlabci/rust/regularRuns/.gitlab-ci.yml b/src/main/resources/templates/gitlabci/rust/regularRuns/.gitlab-ci.yml
new file mode 100644
index 000000000000..39e416158a9c
--- /dev/null
+++ b/src/main/resources/templates/gitlabci/rust/regularRuns/.gitlab-ci.yml
@@ -0,0 +1,47 @@
+stages:
+    - test
+    - upload
+
+
+test-job:
+    image: ${ARTEMIS_BUILD_DOCKER_IMAGE}
+    stage: test
+    only:
+        variables:
+            - $CI_COMMIT_BRANCH == $ARTEMIS_SUBMISSION_GIT_BRANCH
+    allow_failure: true
+    variables:
+        GIT_STRATEGY: none
+    script:
+        - git clone --branch ${ARTEMIS_TEST_GIT_BRANCH} ${CI_SERVER_PROTOCOL}://${ARTEMIS_TEST_GIT_USER}:${ARTEMIS_TEST_GIT_TOKEN}@${CI_SERVER_HOST}:${CI_SERVER_PORT}/${CI_PROJECT_NAMESPACE}/${ARTEMIS_TEST_GIT_REPOSITORY_SLUG} .
+        - git clone --branch ${ARTEMIS_SUBMISSION_GIT_BRANCH} ${CI_SERVER_PROTOCOL}://${ARTEMIS_TEST_GIT_USER}:${ARTEMIS_TEST_GIT_TOKEN}@${CI_SERVER_HOST}:${CI_SERVER_PORT}/${CI_PROJECT_NAMESPACE}/${CI_PROJECT_NAME} assignment
+        - export ARTEMIS_NOTIFICATION_SECRET=[hidden] # Workaround for overwriting the secret
+        - export ARTEMIS_TEST_GIT_TOKEN=[hidden]
+        - cargo nextest run --profile ci | tee -a "${ARTEMIS_BUILD_LOGS_FILE}" && echo "ARTEMIS_BUILD_STATUS=success" > .env || echo "ARTEMIS_BUILD_STATUS=failed" > .env
+        - test -e target/nextest/ci/junit.xml && sed -i 's/<testsuites[^>]*>/<testsuite>/g ; s/<\/testsuites>/<\/testsuite>/g' target/nextest/ci/junit.xml  # <testsuites> not supported by notification plugin
+    after_script:
+        - echo "ARTEMIS_TEST_GIT_HASH=$(git rev-parse HEAD)" >> .env
+        - echo "ARTEMIS_SUBMISSION_GIT_HASH=${CI_COMMIT_SHA}" >> .env
+        - echo "ARTEMIS_SUBMISSION_GIT_REPOSITORY_SLUG=${CI_PROJECT_NAME}" >> .env
+    artifacts:
+        paths:
+            - ${ARTEMIS_BUILD_LOGS_FILE}
+            - target/nextest/ci/*.xml
+        reports:
+            dotenv: .env
+
+
+upload-job:
+    image: ${ARTEMIS_NOTIFICATION_PLUGIN_DOCKER_IMAGE}
+    stage: upload
+    dependencies:
+        - test-job
+    only:
+        variables:
+            - $CI_COMMIT_BRANCH == $ARTEMIS_SUBMISSION_GIT_BRANCH
+    variables:
+        GIT_STRATEGY: none
+    script:
+        - cp -r /notification-plugin/* .
+        - export ARTEMIS_TEST_RESULTS_DIR="target/nextest/ci"  # override project variable
+        - gradle run
diff --git a/src/main/resources/templates/jenkins/rust/regularRuns/pipeline.groovy b/src/main/resources/templates/jenkins/rust/regularRuns/pipeline.groovy
new file mode 100644
index 000000000000..965d7423ce7c
--- /dev/null
+++ b/src/main/resources/templates/jenkins/rust/regularRuns/pipeline.groovy
@@ -0,0 +1,56 @@
+/*
+ * This file configures the actual build steps for the automatic grading.
+ *
+ * !!!
+ * For regular exercises, there is no need to make changes to this file.
+ * Only this base configuration is actively supported by the Artemis maintainers
+ * and/or your Artemis instance administrators.
+ * !!!
+ */
+
+dockerImage = '#dockerImage'
+dockerFlags = '#dockerArgs'
+
+/**
+ * Main function called by Jenkins.
+ */
+void testRunner() {
+    docker.image(dockerImage).inside(dockerFlags) { c ->
+        runTestSteps()
+    }
+}
+
+private void runTestSteps() {
+    test()
+}
+
+/**
+ * Run unit tests
+ */
+private void test() {
+    stage('Test') {
+        sh 'cargo nextest run --profile ci'
+    }
+}
+
+/**
+ * Script of the post build tasks aggregating all JUnit files in $WORKSPACE/results.
+ *
+ * Called by Jenkins.
+ */
+void postBuildTasks() {
+    sh '''
+    rm -rf results
+    mkdir results
+    if [ -e target/nextest/ci/junit.xml ]
+    then
+        sed -i 's/<testsuites[^>]*>/<testsuite>/g ; s/<\\/testsuites>/<\\/testsuite>/g' target/nextest/ci/junit.xml
+    fi
+    cp target/nextest/ci/junit.xml $WORKSPACE/results/ || true
+    sed -i 's/[^[:print:]\t]/�/g' $WORKSPACE/results/*.xml || true
+    '''
+}
+
+// very important, do not remove
+// required so that Jenkins finds the methods defined in this script
+return this
diff --git a/src/main/resources/templates/rust/exercise/.gitattributes b/src/main/resources/templates/rust/exercise/.gitattributes
new file mode 100644
index 000000000000..2677732ca2e9
--- /dev/null
+++ b/src/main/resources/templates/rust/exercise/.gitattributes
@@ -0,0 +1,5 @@
+* text=auto eol=lf
+
+*.rs       text eol=lf diff=rust
+Cargo.toml text eol=lf
+Cargo.lock text eol=lf
diff --git a/src/main/resources/templates/rust/exercise/.gitignore b/src/main/resources/templates/rust/exercise/.gitignore
new file mode 100644
index 000000000000..ea8c4bf7f35f
--- /dev/null
+++ b/src/main/resources/templates/rust/exercise/.gitignore
@@ -0,0 +1 @@
+/target
diff --git a/src/main/resources/templates/rust/exercise/Cargo.lock b/src/main/resources/templates/rust/exercise/Cargo.lock
new file mode 100644
index 000000000000..2f5f96ba7454
--- /dev/null
+++ b/src/main/resources/templates/rust/exercise/Cargo.lock
@@ -0,0 +1,100 @@
+# This file is automatically @generated by Cargo.
+# It is not intended for manual editing.
+version = 3
+
+[[package]]
+name = "autocfg"
+version = "1.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0c4b4d0bd25bd0b74681c0ad21497610ce1b7c91b1022cd21c80c6fbdd9476b0"
+
+[[package]]
+name = "cfg-if"
+version = "1.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd"
+
+[[package]]
+name = "chrono"
+version = "0.4.38"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a21f936df1771bf62b77f047b726c4625ff2e8aa607c01ec06e5a05bd8463401"
+dependencies = [
+ "num-traits",
+]
+
+[[package]]
+name = "getrandom"
+version = "0.2.15"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c4567c8db10ae91089c99af84c68c38da3ec2f087c3f82960bcdbf3656b6f4d7"
+dependencies = [
+ "cfg-if",
+ "libc",
+ "wasi",
+]
+
+[[package]]
+name = "libc"
+version = "0.2.155"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "97b3888a4aecf77e811145cadf6eef5901f4782c53886191b2f693f24761847c"
+
+[[package]]
+name = "num-traits"
+version = "0.2.19"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "071dfc062690e90b734c0b2273ce72ad0ffa95f0c74596bc250dcfd960262841"
+dependencies = [
+ "autocfg",
+]
+
+[[package]]
+name = "ppv-lite86"
+version = "0.2.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5b40af805b3121feab8a3c29f04d8ad262fa8e0561883e7653e024ae4479e6de"
+
+[[package]]
+name = "rand"
+version = "0.8.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "34af8d1a0e25924bc5b7c43c079c942339d8f0a8b57c39049bef581b46327404"
+dependencies = [
+ "libc",
+ "rand_chacha",
+ "rand_core",
+]
+
+[[package]]
+name = "rand_chacha"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e6c10a63a0fa32252be49d21e7709d4d4baf8d231c2dbce1eaa8141b9b127d88"
+dependencies = [
+ "ppv-lite86",
+ "rand_core",
+]
+
+[[package]]
+name = "rand_core"
+version = "0.6.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ec0be4795e2f6a28069bec0b5ff3e2ac9bafc99e6a9a7dc3547996c5c816922c"
+dependencies = [
+ "getrandom",
+]
+
+[[package]]
+name = "rust-template-exercise"
+version = "0.1.0"
+dependencies = [
+ "chrono",
+ "rand",
+]
+
+[[package]]
+name = "wasi"
+version = "0.11.0+wasi-snapshot-preview1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9c8d87e72b64a3b4db28d11ce29237c246188f4f51057d65a7eab63b7987e423"
diff --git a/src/main/resources/templates/rust/exercise/Cargo.toml b/src/main/resources/templates/rust/exercise/Cargo.toml
new file mode 100644
index 000000000000..34b160c5368d
--- /dev/null
+++ b/src/main/resources/templates/rust/exercise/Cargo.toml
@@ -0,0 +1,8 @@
+[package]
+name = "rust-template-exercise"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+chrono = { version = "0.4.38", default-features = false }
+rand = "0.8.5"
diff --git a/src/main/resources/templates/rust/exercise/src/bubble_sort.rs b/src/main/resources/templates/rust/exercise/src/bubble_sort.rs
new file mode 100644
index 000000000000..0587d2852dcf
--- /dev/null
+++ b/src/main/resources/templates/rust/exercise/src/bubble_sort.rs
@@ -0,0 +1,14 @@
+use chrono::NaiveDate;
+
+pub struct BubbleSort;
+
+impl BubbleSort {
+    /// Sorts items with the Bubble Sort algorithm.
+    ///
+    /// Arguments:
+    ///
+    /// * `input`: slice of items to be sorted
+    pub fn perform_sort(&self, input: &mut [NaiveDate]) {
+        todo!("implement");
+    }
+}
diff --git a/src/main/resources/templates/rust/exercise/src/context.rs b/src/main/resources/templates/rust/exercise/src/context.rs
new file mode 100644
index 000000000000..30940f4db7a7
--- /dev/null
+++ b/src/main/resources/templates/rust/exercise/src/context.rs
@@ -0,0 +1 @@
+// TODO: Create and implement a Context struct according to the UML class diagram
diff --git a/src/main/resources/templates/rust/exercise/src/lib.rs b/src/main/resources/templates/rust/exercise/src/lib.rs
new file mode 100644
index 000000000000..930d9899389d
--- /dev/null
+++ b/src/main/resources/templates/rust/exercise/src/lib.rs
@@ -0,0 +1,5 @@
+pub mod bubble_sort;
+pub mod context;
+pub mod merge_sort;
+pub mod policy;
+pub mod sort_strategy;
diff --git a/src/main/resources/templates/rust/exercise/src/main.rs b/src/main/resources/templates/rust/exercise/src/main.rs
new file mode 100644
index 000000000000..9263a66a267e
--- /dev/null
+++ b/src/main/resources/templates/rust/exercise/src/main.rs
@@ -0,0 +1,53 @@
+use std::ops::RangeInclusive;
+use std::time::Duration;
+
+use chrono::{NaiveDate, TimeDelta};
+use rand::{thread_rng, Rng};
+
+const ITERATIONS: usize = 10;
+const LENGTH_MIN: usize = 5;
+const LENGTH_MAX: usize = 15;
+
+/// Main function.
+/// Add code to demonstrate your implementation here.
+fn main() {
+    todo!("Init Context and Policy");
+
+    // Run multiple times to simulate different sorting strategies
+    for _ in 0..ITERATIONS {
+        let mut dates = create_random_dates();
+        todo!("Configure context");
+        println!("Unsorted Array of course dates = {dates:#?}");
+
+        todo!("Sort dates");
+
+        println!("Sorted Array of course dates = {dates:#?}");
+    }
+}
+
+/// Generates a [Vec] of random [NaiveDate] objects with a random length
+/// between [LENGTH_MIN] and [LENGTH_MAX].
+fn create_random_dates() -> Vec<NaiveDate> {
+    let length = thread_rng().gen_range(LENGTH_MIN..=LENGTH_MAX);
+
+    let date_format = "%Y-%m-%d";
+    let low_date = NaiveDate::parse_from_str("2024-09-15", date_format).unwrap();
+    let high_date = NaiveDate::parse_from_str("2025-01-15", date_format).unwrap();
+
+    let mut dates = Vec::new();
+    dates.resize_with(length, || random_date_within(low_date..=high_date));
+    dates
+}
+
+/// Creates a random Date within the given range.
+fn random_date_within(range: RangeInclusive<NaiveDate>) -> NaiveDate {
+    let (start, end) = range.into_inner();
+
+    let max_delta = end - start;
+    let max_duration = max_delta.to_std().unwrap();
+
+    let random_duration = thread_rng().gen_range(Duration::ZERO..=max_duration);
+    let random_delta = TimeDelta::from_std(random_duration).unwrap();
+
+    start + random_delta
+}
diff --git a/src/main/resources/templates/rust/exercise/src/merge_sort.rs b/src/main/resources/templates/rust/exercise/src/merge_sort.rs
new file mode 100644
index 000000000000..78fbb6b6dd33
--- /dev/null
+++ b/src/main/resources/templates/rust/exercise/src/merge_sort.rs
@@ -0,0 +1,14 @@
+use chrono::NaiveDate;
+
+pub struct MergeSort;
+
+impl MergeSort {
+    /// Sorts items with the Merge Sort algorithm.
+    ///
+    /// Arguments:
+    ///
+    /// * `input`: slice of items to be sorted
+    pub fn perform_sort(&self, input: &mut [NaiveDate]) {
+        todo!("implement");
+    }
+}
diff --git a/src/main/resources/templates/rust/exercise/src/policy.rs b/src/main/resources/templates/rust/exercise/src/policy.rs
new file mode 100644
index 000000000000..ebaa1dfd92d3
--- /dev/null
+++ b/src/main/resources/templates/rust/exercise/src/policy.rs
@@ -0,0 +1 @@
+// TODO: Create and implement a Policy class as described in the problem statement
diff --git a/src/main/resources/templates/rust/exercise/src/sort_strategy.rs b/src/main/resources/templates/rust/exercise/src/sort_strategy.rs
new file mode 100644
index 000000000000..ccd9a65d5246
--- /dev/null
+++ b/src/main/resources/templates/rust/exercise/src/sort_strategy.rs
@@ -0,0 +1,2 @@
+// TODO: Create a SortStrategy interface according to the UML class diagram
+// TODO: Make the sorting algorithms implement this trait.
diff --git a/src/main/resources/templates/rust/readme b/src/main/resources/templates/rust/readme
new file mode 100755
index 000000000000..9510a4ca0428
--- /dev/null
+++ b/src/main/resources/templates/rust/readme
@@ -0,0 +1,91 @@
+# Sorting with the Strategy Pattern
+
+In this exercise, we want to implement sorting algorithms and choose them based on runtime specific variables.
+
+### Part 1: Sorting
+
+First, we need to implement two sorting algorithms, in this case `MergeSort` and `BubbleSort`.
+
+**You have the following tasks:**
+
+1. [task][Implement Bubble Sort](test_bubble_sort)
+Implement the method `perform_sort(&mut [NaiveDate])` in the struct `BubbleSort`. Make sure to follow the Bubble Sort algorithm exactly.
+
+2. [task][Implement Merge Sort](test_merge_sort)
+Implement the method `perform_sort(&mut [NaiveDate])` in the struct `MergeSort`. Make sure to follow the Merge Sort algorithm exactly.
+
+### Part 2: Strategy Pattern
+
+We want the application to apply different algorithms for sorting a slice of `NaiveDate` objects.
+Use the strategy pattern to select the right sorting algorithm at runtime.
+
+**You have the following tasks:**
+
+1. [task][SortStrategy Interface](test_sort_strategy_trait,test_sort_strategy_methods,test_sort_strategy_supertrait,test_merge_sort_struct,test_bubble_sort_struct)
+Create a `SortStrategy` trait and adjust the sorting algorithms so that they implement this interface.
+Also make sure to declare `std::any::Any` as a supertrait.
+
+2. [task][Context Class](test_context_fields,test_context_methods)
+Create and implement a `Context` struct following the below class diagram.
+Also add a getter for `sort_algorithm` with the signature `sort_algorithm(&self) -> &dyn SortStrategy`.
+
+3. [task][Context Policy](test_policy_fields,test_policy_methods)
+Create and implement a `Policy` struct following the below class diagram with a simple configuration mechanism:
+
+    1. [task][Select MergeSort](test_merge_sort_struct,test_use_merge_sort_for_big_list)
+    Select `MergeSort` when the List has more than 10 dates.
+
+    2. [task][Select BubbleSort](test_bubble_sort_struct,test_use_bubble_sort_for_small_list)
+    Select `BubbleSort` when the List has less or equal 10 dates.
+
+4. Complete the `main()` function which demonstrates switching between two strategies at runtime.
+
+@startuml
+
+class Policy {
+  <color:testsColor(test_policy_methods)>+new(&RefCell<Context>)</color>
+  <color:testsColor(test_policy_methods)>+configure(&[NaiveDate])</color>
+}
+
+class Context {
+  <color:testsColor(test_context_methods)>+new()</color>
+  <color:testsColor(test_context_methods)>+sort(&mut [NaiveDate])</color>
+}
+
+interface Any {
+}
+
+interface SortStrategy {
+  <color:testsColor(test_sort_strategy_methods)>+perform_sort(&mut [NaiveDate])</color>
+}
+
+class BubbleSort {
+  <color:testsColor(test_bubble_sort)>+perform_sort(&mut [NaiveDate])</color>
+}
+
+class MergeSort {
+  <color:testsColor(test_merge_sort)>+perform_sort(&mut [NaiveDate])</color>
+}
+
+MergeSort -up-|> SortStrategy #testsColor(test_merge_sort_struct)
+BubbleSort -up-|> SortStrategy #testsColor(test_bubble_sort_struct)
+SortStrategy -up-|> Any #testsColor(test_sort_strategy_supertrait)
+Policy -right-> Context #testsColor(test_policy_fields): context
+Context -right-> SortStrategy #testsColor(test_context_fields): sort_algorithm
+
+hide empty fields
+hide empty methods
+
+@enduml
+
+
+### Part 3: Optional Challenges
+
+(These are not tested)
+
+1. Create a new struct `QuickSort` that implements `SortStrategy` and implement the Quick Sort algorithm.
+
+2. Make the method `perform_sort(&mut [NaiveDate])` generic, so that other types can also be sorted by the same method.
+**Hint:** Have a look at Rust Generics and the trait `Ord`.
+
+3. Think about a useful decision in `Policy` when to use the new `QuickSort` algorithm.
diff --git a/src/main/resources/templates/rust/solution/.gitattributes b/src/main/resources/templates/rust/solution/.gitattributes
new file mode 100644
index 000000000000..2677732ca2e9
--- /dev/null
+++ b/src/main/resources/templates/rust/solution/.gitattributes
@@ -0,0 +1,5 @@
+* text=auto eol=lf
+
+*.rs       text eol=lf diff=rust
+Cargo.toml text eol=lf
+Cargo.lock text eol=lf
diff --git a/src/main/resources/templates/rust/solution/.gitignore b/src/main/resources/templates/rust/solution/.gitignore
new file mode 100644
index 000000000000..ea8c4bf7f35f
--- /dev/null
+++ b/src/main/resources/templates/rust/solution/.gitignore
@@ -0,0 +1 @@
+/target
diff --git a/src/main/resources/templates/rust/solution/Cargo.lock b/src/main/resources/templates/rust/solution/Cargo.lock
new file mode 100644
index 000000000000..2f5f96ba7454
--- /dev/null
+++ b/src/main/resources/templates/rust/solution/Cargo.lock
@@ -0,0 +1,100 @@
+# This file is automatically @generated by Cargo.
+# It is not intended for manual editing.
+version = 3
+
+[[package]]
+name = "autocfg"
+version = "1.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0c4b4d0bd25bd0b74681c0ad21497610ce1b7c91b1022cd21c80c6fbdd9476b0"
+
+[[package]]
+name = "cfg-if"
+version = "1.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd"
+
+[[package]]
+name = "chrono"
+version = "0.4.38"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a21f936df1771bf62b77f047b726c4625ff2e8aa607c01ec06e5a05bd8463401"
+dependencies = [
+ "num-traits",
+]
+
+[[package]]
+name = "getrandom"
+version = "0.2.15"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c4567c8db10ae91089c99af84c68c38da3ec2f087c3f82960bcdbf3656b6f4d7"
+dependencies = [
+ "cfg-if",
+ "libc",
+ "wasi",
+]
+
+[[package]]
+name = "libc"
+version = "0.2.155"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "97b3888a4aecf77e811145cadf6eef5901f4782c53886191b2f693f24761847c"
+
+[[package]]
+name = "num-traits"
+version = "0.2.19"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "071dfc062690e90b734c0b2273ce72ad0ffa95f0c74596bc250dcfd960262841"
+dependencies = [
+ "autocfg",
+]
+
+[[package]]
+name = "ppv-lite86"
+version = "0.2.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5b40af805b3121feab8a3c29f04d8ad262fa8e0561883e7653e024ae4479e6de"
+
+[[package]]
+name = "rand"
+version = "0.8.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "34af8d1a0e25924bc5b7c43c079c942339d8f0a8b57c39049bef581b46327404"
+dependencies = [
+ "libc",
+ "rand_chacha",
+ "rand_core",
+]
+
+[[package]]
+name = "rand_chacha"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e6c10a63a0fa32252be49d21e7709d4d4baf8d231c2dbce1eaa8141b9b127d88"
+dependencies = [
+ "ppv-lite86",
+ "rand_core",
+]
+
+[[package]]
+name = "rand_core"
+version = "0.6.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ec0be4795e2f6a28069bec0b5ff3e2ac9bafc99e6a9a7dc3547996c5c816922c"
+dependencies = [
+ "getrandom",
+]
+
+[[package]]
+name = "rust-template-exercise"
+version = "0.1.0"
+dependencies = [
+ "chrono",
+ "rand",
+]
+
+[[package]]
+name = "wasi"
+version = "0.11.0+wasi-snapshot-preview1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9c8d87e72b64a3b4db28d11ce29237c246188f4f51057d65a7eab63b7987e423"
diff --git a/src/main/resources/templates/rust/solution/Cargo.toml b/src/main/resources/templates/rust/solution/Cargo.toml
new file mode 100644
index 000000000000..34b160c5368d
--- /dev/null
+++ b/src/main/resources/templates/rust/solution/Cargo.toml
@@ -0,0 +1,8 @@
+[package]
+name = "rust-template-exercise"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+chrono = { version = "0.4.38", default-features = false }
+rand = "0.8.5"
diff --git a/src/main/resources/templates/rust/solution/src/bubble_sort.rs b/src/main/resources/templates/rust/solution/src/bubble_sort.rs
new file mode 100644
index 000000000000..82c751842786
--- /dev/null
+++ b/src/main/resources/templates/rust/solution/src/bubble_sort.rs
@@ -0,0 +1,23 @@
+use std::cmp::Ord;
+
+use crate::sort_strategy::SortStrategy;
+
+pub struct BubbleSort;
+
+impl<T: Ord> SortStrategy<T> for BubbleSort {
+    /// Sorts items with the Bubble Sort algorithm.
+    ///
+    /// Arguments:
+    ///
+    /// * `input`: slice of items to be sorted
+    fn perform_sort(&self, input: &mut [T]) {
+        let len = input.len();
+        for i in (0..len).rev() {
+            for j in 0..i {
+                if input[j] > input[j + 1] {
+                    input.swap(j, j + 1);
+                }
+            }
+        }
+    }
+}
diff --git a/src/main/resources/templates/rust/solution/src/context.rs b/src/main/resources/templates/rust/solution/src/context.rs
new file mode 100644
index 000000000000..71cd0d711753
--- /dev/null
+++ b/src/main/resources/templates/rust/solution/src/context.rs
@@ -0,0 +1,36 @@
+use crate::sort_strategy::SortStrategy;
+use chrono::NaiveDate;
+use std::ops::Deref;
+
+pub struct Context {
+    sort_algorithm: Option<Box<dyn SortStrategy<NaiveDate>>>,
+}
+
+impl Context {
+    pub fn new() -> Context {
+        Context {
+            sort_algorithm: None,
+        }
+    }
+
+    /// Runs the configured sorting algorithm.
+    pub fn sort(&self, data: &mut [NaiveDate]) {
+        let sort_algorithm = self
+            .sort_algorithm
+            .as_ref()
+            .expect("sort_algorithm has to be set before sort() is called");
+
+        sort_algorithm.perform_sort(data);
+    }
+
+    pub fn set_sort_algorithm(&mut self, sort_algorithm: Box<dyn SortStrategy<NaiveDate>>) {
+        self.sort_algorithm = Some(sort_algorithm);
+    }
+
+    pub fn sort_algorithm(&self) -> &dyn SortStrategy<NaiveDate> {
+        self.sort_algorithm
+            .as_ref()
+            .expect("sort_algorithm has to be set")
+            .deref()
+    }
+}
diff --git a/src/main/resources/templates/rust/solution/src/lib.rs b/src/main/resources/templates/rust/solution/src/lib.rs
new file mode 100644
index 000000000000..930d9899389d
--- /dev/null
+++ b/src/main/resources/templates/rust/solution/src/lib.rs
@@ -0,0 +1,5 @@
+pub mod bubble_sort;
+pub mod context;
+pub mod merge_sort;
+pub mod policy;
+pub mod sort_strategy;
diff --git a/src/main/resources/templates/rust/solution/src/main.rs b/src/main/resources/templates/rust/solution/src/main.rs
new file mode 100644
index 000000000000..0d8d362fafc9
--- /dev/null
+++ b/src/main/resources/templates/rust/solution/src/main.rs
@@ -0,0 +1,59 @@
+use std::time::Duration;
+use std::{cell::RefCell, ops::RangeInclusive};
+
+use chrono::{NaiveDate, TimeDelta};
+use rand::{thread_rng, Rng};
+
+use rust_template_exercise::{context::Context, policy::Policy};
+
+const ITERATIONS: usize = 10;
+const LENGTH_MIN: usize = 5;
+const LENGTH_MAX: usize = 15;
+
+/// Main function.
+/// Add code to demonstrate your implementation here.
+fn main() {
+    // Init Context and Policy
+    let context = RefCell::new(Context::new());
+    let mut policy = Policy::new(&context);
+
+    // Run multiple times to simulate different sorting strategies
+    for _ in 0..ITERATIONS {
+        let mut dates = create_random_dates();
+        // Configure context
+        policy.configure(&dates);
+        println!("Unsorted Array of course dates = {dates:#?}");
+
+        // Sort dates
+        context.borrow().sort(&mut dates);
+
+        println!("Sorted Array of course dates = {dates:#?}");
+    }
+}
+
+/// Generates a [Vec] of random [NaiveDate] objects with a random length
+/// between [LENGTH_MIN] and [LENGTH_MAX].
+fn create_random_dates() -> Vec<NaiveDate> {
+    let length = thread_rng().gen_range(LENGTH_MIN..=LENGTH_MAX);
+
+    let date_format = "%Y-%m-%d";
+    let low_date = NaiveDate::parse_from_str("2024-09-15", date_format).unwrap();
+    let high_date = NaiveDate::parse_from_str("2025-01-15", date_format).unwrap();
+
+    let mut dates = Vec::new();
+    dates.resize_with(length, || random_date_within(low_date..=high_date));
+    dates
+}
+
+/// Creates a random Date within the given range.
+fn random_date_within(range: RangeInclusive<NaiveDate>) -> NaiveDate {
+    let (start, end) = range.into_inner();
+
+    let max_delta = end - start;
+    let max_duration = max_delta.to_std().unwrap();
+
+    let random_duration = thread_rng().gen_range(Duration::ZERO..=max_duration);
+    let random_delta = TimeDelta::from_std(random_duration).unwrap();
+
+    start + random_delta
+}
diff --git a/src/main/resources/templates/rust/solution/src/merge_sort.rs b/src/main/resources/templates/rust/solution/src/merge_sort.rs
new file mode 100644
index 000000000000..a1887c6d38f8
--- /dev/null
+++ b/src/main/resources/templates/rust/solution/src/merge_sort.rs
@@ -0,0 +1,59 @@
+use std::cmp::Ord;
+
+use crate::sort_strategy::SortStrategy;
+
+pub struct MergeSort;
+
+impl<T: Ord + Copy> SortStrategy<T> for MergeSort {
+    /// Sorts items with the Merge Sort algorithm.
+    ///
+    /// Arguments:
+    ///
+    /// * `input`: slice of items to be sorted
+    fn perform_sort(&self, input: &mut [T]) {
+        mergesort(input);
+    }
+}
+
+fn mergesort<T: Ord + Copy>(input: &mut [T]) {
+    if input.len() < 2 {
+        return;
+    }
+
+    let middle = input.len() / 2;
+    let (left, right) = input.split_at_mut(middle);
+    mergesort(left);
+    mergesort(right);
+    merge(input, middle);
+}
+
+fn merge<T: Ord + Copy>(input: &mut [T], middle: usize) {
+    let mut result = Vec::with_capacity(input.len());
+
+    let mut left_index = 0;
+    let mut right_index = middle;
+
+    while left_index < middle && right_index < input.len() {
+        if input[left_index] <= input[right_index] {
+            result.push(input[left_index]);
+            left_index += 1;
+        } else {
+            result.push(input[right_index]);
+            right_index += 1;
+        }
+    }
+
+    if left_index < middle {
+        while left_index < middle {
+            result.push(input[left_index]);
+            left_index += 1;
+        }
+    } else {
+        while right_index < input.len() {
+            result.push(input[right_index]);
+            right_index += 1;
+        }
+    }
+
+    input.copy_from_slice(&result);
+}
diff --git a/src/main/resources/templates/rust/solution/src/policy.rs b/src/main/resources/templates/rust/solution/src/policy.rs
new file mode 100644
index 000000000000..a8e7e5203162
--- /dev/null
+++ b/src/main/resources/templates/rust/solution/src/policy.rs
@@ -0,0 +1,28 @@
+use crate::{
+    bubble_sort::BubbleSort, context::Context, merge_sort::MergeSort, sort_strategy::SortStrategy,
+};
+use chrono::NaiveDate;
+use std::cell::RefCell;
+
+const SIZE_THRESHOLD: usize = 10;
+
+pub struct Policy<'a> {
+    context: &'a RefCell<Context>,
+}
+
+impl<'a> Policy<'a> {
+    pub fn new(context: &'a RefCell<Context>) -> Policy<'a> {
+        Policy { context }
+    }
+
+    /// Chooses a strategy depending on the number of items.
+    pub fn configure(&mut self, data: &[NaiveDate]) {
+        let sort_algorithm: Box<dyn SortStrategy<NaiveDate>> = if data.len() > SIZE_THRESHOLD {
+            Box::new(MergeSort)
+        } else {
+            Box::new(BubbleSort)
+        };
+
+        self.context.borrow_mut().set_sort_algorithm(sort_algorithm);
+    }
+}
diff --git a/src/main/resources/templates/rust/solution/src/sort_strategy.rs b/src/main/resources/templates/rust/solution/src/sort_strategy.rs
new file mode 100644
index 000000000000..b924206e39ba
--- /dev/null
+++ b/src/main/resources/templates/rust/solution/src/sort_strategy.rs
@@ -0,0 +1,10 @@
+use std::any::Any;
+
+pub trait SortStrategy<T: Ord>: Any {
+    /// Sorts a slice of `T`s.
+    ///
+    /// Arguments:
+    ///
+    /// * `input`: slice of items to be sorted
+    fn perform_sort(&self, input: &mut [T]);
+}
diff --git a/src/main/resources/templates/rust/test/.config/nextest.toml b/src/main/resources/templates/rust/test/.config/nextest.toml
new file mode 100644
index 000000000000..6a109e171680
--- /dev/null
+++ b/src/main/resources/templates/rust/test/.config/nextest.toml
@@ -0,0 +1,5 @@
+[profile.ci]
+fail-fast = false
+
+[profile.ci.junit]
+path = "junit.xml"
diff --git a/src/main/resources/templates/rust/test/.gitattributes b/src/main/resources/templates/rust/test/.gitattributes
new file mode 100644
index 000000000000..2677732ca2e9
--- /dev/null
+++ b/src/main/resources/templates/rust/test/.gitattributes
@@ -0,0 +1,5 @@
+* text=auto eol=lf
+
+*.rs       text eol=lf diff=rust
+Cargo.toml text eol=lf
+Cargo.lock text eol=lf
diff --git a/src/main/resources/templates/rust/test/.gitignore b/src/main/resources/templates/rust/test/.gitignore
new file mode 100644
index 000000000000..a37c5236a444
--- /dev/null
+++ b/src/main/resources/templates/rust/test/.gitignore
@@ -0,0 +1,2 @@
+/target
+/assignment
diff --git a/src/main/resources/templates/rust/test/Cargo.lock b/src/main/resources/templates/rust/test/Cargo.lock
new file mode 100644
index 000000000000..bb5595575a1a
--- /dev/null
+++ b/src/main/resources/templates/rust/test/Cargo.lock
@@ -0,0 +1,183 @@
+# This file is automatically @generated by Cargo.
+# It is not intended for manual editing.
+version = 3
+
+[[package]]
+name = "autocfg"
+version = "1.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0c4b4d0bd25bd0b74681c0ad21497610ce1b7c91b1022cd21c80c6fbdd9476b0"
+
+[[package]]
+name = "byteorder"
+version = "1.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1fd0f2584146f6f2ef48085050886acf353beff7305ebd1ae69500e27c67f64b"
+
+[[package]]
+name = "cfg-if"
+version = "1.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd"
+
+[[package]]
+name = "chrono"
+version = "0.4.38"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a21f936df1771bf62b77f047b726c4625ff2e8aa607c01ec06e5a05bd8463401"
+dependencies = [
+ "num-traits",
+]
+
+[[package]]
+name = "getrandom"
+version = "0.2.15"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c4567c8db10ae91089c99af84c68c38da3ec2f087c3f82960bcdbf3656b6f4d7"
+dependencies = [
+ "cfg-if",
+ "libc",
+ "wasi",
+]
+
+[[package]]
+name = "libc"
+version = "0.2.155"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "97b3888a4aecf77e811145cadf6eef5901f4782c53886191b2f693f24761847c"
+
+[[package]]
+name = "num-traits"
+version = "0.2.19"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "071dfc062690e90b734c0b2273ce72ad0ffa95f0c74596bc250dcfd960262841"
+dependencies = [
+ "autocfg",
+]
+
+[[package]]
+name = "ppv-lite86"
+version = "0.2.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dee4364d9f3b902ef14fab8a1ddffb783a1cb6b4bba3bfc1fa3922732c7de97f"
+dependencies = [
+ "zerocopy",
+]
+
+[[package]]
+name = "proc-macro2"
+version = "1.0.86"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5e719e8df665df0d1c8fbfd238015744736151d4445ec0836b8e628aae103b77"
+dependencies = [
+ "unicode-ident",
+]
+
+[[package]]
+name = "quote"
+version = "1.0.36"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0fa76aaf39101c457836aec0ce2316dbdc3ab723cdda1c6bd4e6ad4208acaca7"
+dependencies = [
+ "proc-macro2",
+]
+
+[[package]]
+name = "rand"
+version = "0.8.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "34af8d1a0e25924bc5b7c43c079c942339d8f0a8b57c39049bef581b46327404"
+dependencies = [
+ "libc",
+ "rand_chacha",
+ "rand_core",
+]
+
+[[package]]
+name = "rand_chacha"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e6c10a63a0fa32252be49d21e7709d4d4baf8d231c2dbce1eaa8141b9b127d88"
+dependencies = [
+ "ppv-lite86",
+ "rand_core",
+]
+
+[[package]]
+name = "rand_core"
+version = "0.6.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ec0be4795e2f6a28069bec0b5ff3e2ac9bafc99e6a9a7dc3547996c5c816922c"
+dependencies = [
+ "getrandom",
+]
+
+[[package]]
+name = "rust-template-exercise"
+version = "0.1.0"
+dependencies = [
+ "chrono",
+ "rand",
+]
+
+[[package]]
+name = "rust-template-test"
+version = "0.1.0"
+dependencies = [
+ "chrono",
+ "rust-template-exercise",
+ "rust_template_test_macros",
+ "syn",
+]
+
+[[package]]
+name = "rust_template_test_macros"
+version = "0.1.0"
+dependencies = [
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "syn"
+version = "2.0.72"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dc4b9b9bf2add8093d3f2c0204471e951b2285580335de42f9d2534f3ae7a8af"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "unicode-ident",
+]
+
+[[package]]
+name = "unicode-ident"
+version = "1.0.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3354b9ac3fae1ff6755cb6db53683adb661634f67557942dea4facebec0fee4b"
+
+[[package]]
+name = "wasi"
+version = "0.11.0+wasi-snapshot-preview1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9c8d87e72b64a3b4db28d11ce29237c246188f4f51057d65a7eab63b7987e423"
+
+[[package]]
+name = "zerocopy"
+version = "0.6.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "854e949ac82d619ee9a14c66a1b674ac730422372ccb759ce0c39cabcf2bf8e6"
+dependencies = [
+ "byteorder",
+ "zerocopy-derive",
+]
+
+[[package]]
+name = "zerocopy-derive"
+version = "0.6.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "125139de3f6b9d625c39e2efdd73d41bdac468ccd556556440e322be0e1bbd91"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
diff --git a/src/main/resources/templates/rust/test/Cargo.toml b/src/main/resources/templates/rust/test/Cargo.toml
new file mode 100644
index 000000000000..07f82b3f09f0
--- /dev/null
+++ b/src/main/resources/templates/rust/test/Cargo.toml
@@ -0,0 +1,13 @@
+[package]
+name = "rust-template-test"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+chrono = { version = "0.4.38", default-features = false }
+rust-template-exercise = { path = "assignment" }
+syn = { version = "2.0.72", features = ["full"] }
+rust_template_test_macros = { path = "./rust_template_test_macros" }
+
+[build-dependencies]
+syn = { version = "2.0.72", features = ["full"] }
diff --git a/src/main/resources/templates/rust/test/build.rs b/src/main/resources/templates/rust/test/build.rs
new file mode 100644
index 000000000000..850fcb846cce
--- /dev/null
+++ b/src/main/resources/templates/rust/test/build.rs
@@ -0,0 +1,204 @@
+use std::error::Error;
+use std::ffi::OsStr;
+use std::fs::read_to_string;
+use std::path::{Component, Path};
+use std::{fs, io};
+
+use syn::{parse_file, FnArg, ImplItem, Item, TraitItem, Type, TypeParamBound};
+
+const SRC_DIR: &str = "assignment/src";
+
+fn main() {
+    println!("cargo::rerun-if-changed={SRC_DIR}");
+    if let Err(err) = visit_dirs(Path::new(SRC_DIR), &process_file) {
+        eprintln!("Failed to analyze submission: {err}");
+    }
+}
+
+fn visit_dirs<F: Fn(&Path) -> Result<(), Box<dyn Error>>>(
+    dir: &Path,
+    cb: &F,
+) -> Result<(), Box<dyn Error>> {
+    for entry in fs::read_dir(dir).map_err(|e| {
+        io::Error::new(
+            e.kind(),
+            format!("Failed to read directory {}: {}", dir.display(), e),
+        )
+    })? {
+        let entry = entry?;
+        let path = entry.path();
+        if path.is_dir() {
+            visit_dirs(&path, cb)?;
+        } else {
+            cb(&entry.path())?;
+        }
+    }
+    Ok(())
+}
+
+fn process_file(path: &Path) -> Result<(), Box<dyn Error>> {
+    if path.extension() != Some(OsStr::new("rs")) {
+        return Ok(());
+    }
+
+    let file_content = read_to_string(path)?;
+
+    let ast = parse_file(&file_content)?;
+
+    let module = path
+        .strip_prefix(SRC_DIR)?
+        .with_extension("")
+        .components()
+        .map(Component::as_os_str)
+        .collect::<Vec<_>>()
+        .join(OsStr::new("_"));
+    let module = module.to_str().ok_or("invalid UTF-8 in path")?;
+
+    for item in ast.items {
+        match item {
+            Item::Enum(e) => {
+                println!("cargo::rustc-cfg=structure_{module}_enum_{}", e.ident);
+
+                for v in e.variants {
+                    println!(
+                        "cargo::rustc-cfg=structure_{module}_enum_{}_variant_{}",
+                        e.ident, v.ident
+                    );
+                }
+            }
+            Item::Fn(f) => println!("cargo::rustc-cfg=structure_{module}_fn_{}", f.sig.ident),
+            Item::Impl(impl_) => {
+                let self_path = if let Type::Path(p) = *impl_.self_ty {
+                    p
+                } else {
+                    continue;
+                };
+
+                let self_ident = if let Some(i) = self_path.path.segments.last().map(|s| &s.ident) {
+                    i
+                } else {
+                    continue;
+                };
+
+                if impl_.trait_.is_some() {
+                    let trait_ident = if let Some(i) = impl_
+                        .trait_
+                        .as_ref()
+                        .unwrap()
+                        .1
+                        .segments
+                        .last()
+                        .map(|s| &s.ident)
+                    {
+                        i
+                    } else {
+                        continue;
+                    };
+                    println!(
+                        "cargo::rustc-cfg=structure_{module}_impl_{trait_ident}_for_{self_ident}"
+                    );
+                    continue;
+                }
+
+                for item in impl_.items {
+                    match item {
+                        ImplItem::Const(c) => println!(
+                            "cargo::rustc-cfg=structure_{module}_impl_{self_ident}_const_{}",
+                            c.ident
+                        ),
+                        ImplItem::Fn(f) => {
+                            println!(
+                                "cargo::rustc-cfg=structure_{module}_impl_{self_ident}_fn_{}",
+                                f.sig.ident
+                            );
+
+                            if matches!(f.sig.inputs.first(), Some(&FnArg::Receiver(_))) {
+                                println!(
+                                    "cargo::rustc-cfg=structure_{module}_impl_{self_ident}_method_{}",
+                                    f.sig.ident
+                                );
+                            }
+                        }
+                        ImplItem::Type(t) => println!(
+                            "cargo::rustc-cfg=structure_{module}_impl_{self_ident}_type_{}",
+                            t.ident
+                        ),
+                        _ => continue,
+                    }
+                }
+            }
+            Item::Struct(struct_) => {
+                println!(
+                    "cargo::rustc-cfg=structure_{module}_struct_{}",
+                    struct_.ident
+                );
+
+                for field in struct_.fields {
+                    if let Some(field_ident) = field.ident {
+                        println!(
+                            "cargo::rustc-cfg=structure_{module}_struct_{}_field_{field_ident}",
+                            struct_.ident
+                        );
+                    }
+                }
+            }
+            Item::Trait(trait_) => {
+                println!("cargo::rustc-cfg=structure_{module}_trait_{}", trait_.ident);
+
+                for supertrait in trait_.supertraits {
+                    let supertrait = match supertrait {
+                        TypeParamBound::Trait(supertrait) => supertrait,
+                        _ => continue,
+                    };
+                    let supertrait = &supertrait.path.segments.last().unwrap().ident;
+                    println!(
+                        "cargo::rustc-cfg=structure_{module}_trait_{}_supertrait_{supertrait}",
+                        trait_.ident
+                    );
+                }
+
+                for item in trait_.items {
+                    match item {
+                        TraitItem::Const(c) => println!(
+                            "cargo::rustc-cfg=structure_{module}_trait_{}_const_{}",
+                            trait_.ident, c.ident
+                        ),
+                        TraitItem::Fn(f) => {
+                            println!(
+                                "cargo::rustc-cfg=structure_{module}_trait_{}_fn_{}",
+                                trait_.ident, f.sig.ident
+                            );
+
+                            if matches!(f.sig.inputs.first(), Some(&FnArg::Receiver(_))) {
+                                println!(
+                                    "cargo::rustc-cfg=structure_{module}_trait_{}_method_{}",
+                                    trait_.ident, f.sig.ident
+                                );
+                            }
+                        }
+                        TraitItem::Type(t) => println!(
+                            "cargo::rustc-cfg=structure_{module}_trait_{}_type_{}",
+                            trait_.ident, t.ident
+                        ),
+                        _ => continue,
+                    }
+                }
+            }
+            Item::Union(union_) => {
+                println!("cargo::rustc-cfg=structure_{module}_union_{}", union_.ident);
+
+                for field in union_.fields.named {
+                    if let Some(field_ident) = field.ident {
+                        println!(
+                            "cargo::rustc-cfg=structure_{module}_union_{}_field_{field_ident}",
+                            union_.ident
+                        );
+                    }
+                }
+            }
+            _ => continue,
+        }
+    }
+
+    Ok(())
+}
diff --git a/src/main/resources/templates/rust/test/rust_template_test_macros/.gitignore b/src/main/resources/templates/rust/test/rust_template_test_macros/.gitignore
new file mode 100644
index 000000000000..ea8c4bf7f35f
--- /dev/null
+++ b/src/main/resources/templates/rust/test/rust_template_test_macros/.gitignore
@@ -0,0 +1 @@
+/target
diff --git a/src/main/resources/templates/rust/test/rust_template_test_macros/Cargo.lock b/src/main/resources/templates/rust/test/rust_template_test_macros/Cargo.lock
new file mode 100644
index 000000000000..a1259e414852
--- /dev/null
+++ b/src/main/resources/templates/rust/test/rust_template_test_macros/Cargo.lock
@@ -0,0 +1,46 @@
+# This file is automatically @generated by Cargo.
+# It is not intended for manual editing.
+version = 3
+
+[[package]]
+name = "proc-macro2"
+version = "1.0.86"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5e719e8df665df0d1c8fbfd238015744736151d4445ec0836b8e628aae103b77"
+dependencies = [
+ "unicode-ident",
+]
+
+[[package]]
+name = "quote"
+version = "1.0.36"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0fa76aaf39101c457836aec0ce2316dbdc3ab723cdda1c6bd4e6ad4208acaca7"
+dependencies = [
+ "proc-macro2",
+]
+
+[[package]]
+name = "rust_template_test_macros"
+version = "0.1.0"
+dependencies = [
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "syn"
+version = "2.0.72"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dc4b9b9bf2add8093d3f2c0204471e951b2285580335de42f9d2534f3ae7a8af"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "unicode-ident",
+]
+
+[[package]]
+name = "unicode-ident"
+version = "1.0.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3354b9ac3fae1ff6755cb6db53683adb661634f67557942dea4facebec0fee4b"
diff --git a/src/main/resources/templates/rust/test/rust_template_test_macros/Cargo.toml b/src/main/resources/templates/rust/test/rust_template_test_macros/Cargo.toml
new file mode 100644
index 000000000000..625dee26344d
--- /dev/null
+++ b/src/main/resources/templates/rust/test/rust_template_test_macros/Cargo.toml
@@ -0,0 +1,11 @@
+[package]
+name = "rust_template_test_macros"
+version = "0.1.0"
+edition = "2021"
+
+[lib]
+proc-macro = true
+
+[dependencies]
+quote = "1.0.36"
+syn = { version = "2.0.72", features = ["full"] }
diff --git a/src/main/resources/templates/rust/test/rust_template_test_macros/src/lib.rs b/src/main/resources/templates/rust/test/rust_template_test_macros/src/lib.rs
new file mode 100644
index 000000000000..498fa14d54a1
--- /dev/null
+++ b/src/main/resources/templates/rust/test/rust_template_test_macros/src/lib.rs
@@ -0,0 +1,346 @@
+//! Compile-time source code reflection
+//!
+//! Use this for conditional compilation.
+
+use proc_macro::TokenStream;
+
+use quote::{format_ident, quote};
+use syn::parse::Parse;
+use syn::{parse_macro_input, Ident, Item, ItemFn, Path, Token};
+
+trait ToStringLocal {
+    fn to_string(&self) -> String;
+}
+
+impl ToStringLocal for Path {
+    fn to_string(&self) -> String {
+        let segments: Vec<_> = self.segments.iter().map(|s| s.ident.to_string()).collect();
+        segments.join("::")
+    }
+}
+
+#[proc_macro_attribute]
+pub fn require_struct(attr: TokenStream, item: TokenStream) -> TokenStream {
+    require_for_item(attr, item, make_cfg_struct)
+}
+
+#[proc_macro_attribute]
+pub fn require_struct_or_fail(attr: TokenStream, item: TokenStream) -> TokenStream {
+    require_for_function(attr, item, make_cfg_struct)
+}
+
+#[proc_macro_attribute]
+pub fn require_trait(attr: TokenStream, item: TokenStream) -> TokenStream {
+    require_for_item(attr, item, make_cfg_trait)
+}
+
+#[proc_macro_attribute]
+pub fn require_trait_or_fail(attr: TokenStream, item: TokenStream) -> TokenStream {
+    require_for_function(attr, item, make_cfg_trait)
+}
+
+#[proc_macro_attribute]
+pub fn require_enum(attr: TokenStream, item: TokenStream) -> TokenStream {
+    require_for_item(attr, item, make_cfg_enum)
+}
+
+#[proc_macro_attribute]
+pub fn require_enum_or_fail(attr: TokenStream, item: TokenStream) -> TokenStream {
+    require_for_function(attr, item, make_cfg_enum)
+}
+
+#[proc_macro_attribute]
+pub fn require_function(attr: TokenStream, item: TokenStream) -> TokenStream {
+    require_for_item(attr, item, make_cfg_function)
+}
+
+#[proc_macro_attribute]
+pub fn require_function_or_fail(attr: TokenStream, item: TokenStream) -> TokenStream {
+    require_for_function(attr, item, make_cfg_function)
+}
+
+#[proc_macro_attribute]
+pub fn require_impl_for_trait(attr: TokenStream, item: TokenStream) -> TokenStream {
+    require_for_item(attr, item, make_cfg_impl_for_trait)
+}
+
+#[proc_macro_attribute]
+pub fn require_impl_for_trait_or_fail(attr: TokenStream, item: TokenStream) -> TokenStream {
+    require_for_function(attr, item, make_cfg_impl_for_trait)
+}
+
+#[proc_macro_attribute]
+pub fn require_impl_function(attr: TokenStream, item: TokenStream) -> TokenStream {
+    require_for_item(attr, item, make_cfg_impl_function)
+}
+
+#[proc_macro_attribute]
+pub fn require_impl_function_or_fail(attr: TokenStream, item: TokenStream) -> TokenStream {
+    require_for_function(attr, item, make_cfg_impl_function)
+}
+
+#[proc_macro_attribute]
+pub fn require_impl_method(attr: TokenStream, item: TokenStream) -> TokenStream {
+    require_for_item(attr, item, make_cfg_impl_method)
+}
+
+#[proc_macro_attribute]
+pub fn require_impl_method_or_fail(attr: TokenStream, item: TokenStream) -> TokenStream {
+    require_for_function(attr, item, make_cfg_impl_method)
+}
+
+#[proc_macro_attribute]
+pub fn require_impl_const(attr: TokenStream, item: TokenStream) -> TokenStream {
+    require_for_item(attr, item, make_cfg_impl_const)
+}
+
+#[proc_macro_attribute]
+pub fn require_impl_const_or_fail(attr: TokenStream, item: TokenStream) -> TokenStream {
+    require_for_function(attr, item, make_cfg_impl_const)
+}
+
+#[proc_macro_attribute]
+pub fn require_impl_type(attr: TokenStream, item: TokenStream) -> TokenStream {
+    require_for_item(attr, item, make_cfg_impl_type)
+}
+
+#[proc_macro_attribute]
+pub fn require_impl_type_or_fail(attr: TokenStream, item: TokenStream) -> TokenStream {
+    require_for_function(attr, item, make_cfg_impl_type)
+}
+
+#[proc_macro_attribute]
+pub fn require_trait_function(attr: TokenStream, item: TokenStream) -> TokenStream {
+    require_for_item(attr, item, make_cfg_trait_function)
+}
+
+#[proc_macro_attribute]
+pub fn require_trait_function_or_fail(attr: TokenStream, item: TokenStream) -> TokenStream {
+    require_for_function(attr, item, make_cfg_trait_function)
+}
+
+#[proc_macro_attribute]
+pub fn require_trait_method(attr: TokenStream, item: TokenStream) -> TokenStream {
+    require_for_item(attr, item, make_cfg_trait_method)
+}
+
+#[proc_macro_attribute]
+pub fn require_trait_method_or_fail(attr: TokenStream, item: TokenStream) -> TokenStream {
+    require_for_function(attr, item, make_cfg_trait_method)
+}
+
+#[proc_macro_attribute]
+pub fn require_trait_const(attr: TokenStream, item: TokenStream) -> TokenStream {
+    require_for_item(attr, item, make_cfg_trait_const)
+}
+
+#[proc_macro_attribute]
+pub fn require_trait_const_or_fail(attr: TokenStream, item: TokenStream) -> TokenStream {
+    require_for_function(attr, item, make_cfg_trait_const)
+}
+
+#[proc_macro_attribute]
+pub fn require_trait_type(attr: TokenStream, item: TokenStream) -> TokenStream {
+    require_for_item(attr, item, make_cfg_trait_type)
+}
+
+#[proc_macro_attribute]
+pub fn require_trait_type_or_fail(attr: TokenStream, item: TokenStream) -> TokenStream {
+    require_for_function(attr, item, make_cfg_trait_type)
+}
+
+#[proc_macro_attribute]
+pub fn require_trait_supertrait(attr: TokenStream, item: TokenStream) -> TokenStream {
+    require_for_item(attr, item, make_cfg_trait_supertrait)
+}
+
+#[proc_macro_attribute]
+pub fn require_trait_supertrait_or_fail(attr: TokenStream, item: TokenStream) -> TokenStream {
+    require_for_function(attr, item, make_cfg_trait_supertrait)
+}
+
+struct SuperTraitSpec {
+    module_path: String,
+    trait_name: String,
+    supertrait: String,
+}
+
+impl Parse for SuperTraitSpec {
+    fn parse(input: syn::parse::ParseStream) -> syn::Result<Self> {
+        let path: Path = input.parse()?;
+        input.parse::<Token![:]>()?;
+        let supertrait: Path = input.parse()?;
+
+        let (module_path, trait_name) = split_path(path);
+        let supertrait = supertrait.segments.last().unwrap().ident.to_string();
+
+        Ok(SuperTraitSpec {
+            module_path,
+            trait_name,
+            supertrait,
+        })
+    }
+}
+
+impl ToStringLocal for SuperTraitSpec {
+    fn to_string(&self) -> String {
+        format!(
+            "supertrait {} of {}::{}",
+            self.supertrait, self.module_path, self.trait_name
+        )
+    }
+}
+
+fn require_for_item<A: Parse, F: FnOnce(A) -> Ident>(
+    attr: TokenStream,
+    item: TokenStream,
+    make_cfg: F,
+) -> TokenStream {
+    let attribute = parse_macro_input!(attr as A);
+    let original_item = parse_macro_input!(item as Item);
+
+    let cfg = make_cfg(attribute);
+
+    quote! (
+        #[cfg(#cfg)]
+        #original_item
+    )
+    .into()
+}
+
+fn require_for_function<A: Parse + ToStringLocal, F: FnOnce(A) -> Ident>(
+    attr: TokenStream,
+    item: TokenStream,
+    make_cfg: F,
+) -> TokenStream {
+    let attribute = parse_macro_input!(attr as A);
+    let original_fn = parse_macro_input!(item as ItemFn);
+
+    let failure_message = format!("missing {}", attribute.to_string());
+
+    let cfg = make_cfg(attribute);
+
+    let ItemFn {
+        attrs,
+        vis,
+        sig,
+        block,
+    } = original_fn;
+
+    quote!(
+        #(#attrs)*
+        #vis #sig {
+            #[cfg(not(#cfg))]
+            panic!(#failure_message);
+            #[cfg(#cfg)]
+            #block
+        }
+    )
+    .into()
+}
+
+fn make_cfg_struct(path: Path) -> Ident {
+    let (module_path, struct_name) = split_path(path);
+    format_ident!("structure_{module_path}_struct_{struct_name}")
+}
+
+fn make_cfg_trait(path: Path) -> Ident {
+    let (module_path, trait_name) = split_path(path);
+    format_ident!("structure_{module_path}_trait_{trait_name}")
+}
+
+fn make_cfg_enum(path: Path) -> Ident {
+    let (module_path, enum_name) = split_path(path);
+    format_ident!("structure_{module_path}_enum_{enum_name}")
+}
+
+fn make_cfg_function(path: Path) -> Ident {
+    let (module_path, function_name) = split_path(path);
+    format_ident!("structure_{module_path}_fn_{function_name}")
+}
+
+fn make_cfg_impl_for_trait(path: Path) -> Ident {
+    let (module_path, self_type, trait_name) = split_path2(path);
+    format_ident!("structure_{module_path}_impl_{trait_name}_for_{self_type}")
+}
+
+fn make_cfg_impl_function(path: Path) -> Ident {
+    let (module_path, self_type, function) = split_path2(path);
+    format_ident!("structure_{module_path}_impl_{self_type}_fn_{function}")
+}
+
+fn make_cfg_impl_method(path: Path) -> Ident {
+    let (module_path, self_type, function) = split_path2(path);
+    format_ident!("structure_{module_path}_impl_{self_type}_method_{function}")
+}
+
+fn make_cfg_impl_const(path: Path) -> Ident {
+    let (module_path, self_type, const_name) = split_path2(path);
+    format_ident!("structure_{module_path}_impl_{self_type}_const_{const_name}")
+}
+
+fn make_cfg_impl_type(path: Path) -> Ident {
+    let (module_path, self_type, type_name) = split_path2(path);
+    format_ident!("structure_{module_path}_impl_{self_type}_type_{type_name}")
+}
+
+fn make_cfg_trait_function(path: Path) -> Ident {
+    let (module_path, trait_type, function) = split_path2(path);
+    format_ident!("structure_{module_path}_trait_{trait_type}_fn_{function}")
+}
+
+fn make_cfg_trait_method(path: Path) -> Ident {
+    let (module_path, trait_type, function) = split_path2(path);
+    format_ident!("structure_{module_path}_trait_{trait_type}_method_{function}")
+}
+
+fn make_cfg_trait_const(path: Path) -> Ident {
+    let (module_path, trait_type, const_name) = split_path2(path);
+    format_ident!("structure_{module_path}_trait_{trait_type}_const_{const_name}")
+}
+
+fn make_cfg_trait_type(path: Path) -> Ident {
+    let (module_path, trait_type, type_name) = split_path2(path);
+    format_ident!("structure_{module_path}_trait_{trait_type}_type_{type_name}")
+}
+
+fn make_cfg_trait_supertrait(spec: SuperTraitSpec) -> Ident {
+    format_ident!(
+        "structure_{}_trait_{}_supertrait_{}",
+        spec.module_path,
+        spec.trait_name,
+        spec.supertrait
+    )
+}
+
+fn split_path(path: Path) -> (String, String) {
+    let path_segments: Vec<_> = path.segments.iter().map(|s| &s.ident).collect();
+    let (item_name, path_segments) = path_segments.split_last().unwrap();
+
+    let item_name = item_name.to_string();
+    let module_path = path_segments
+        .iter()
+        .copied()
+        .map(Ident::to_string)
+        .collect::<Vec<_>>()
+        .join("_");
+
+    (module_path, item_name)
+}
+
+fn split_path2(path: Path) -> (String, String, String) {
+    let path_segments: Vec<_> = path.segments.iter().map(|s| &s.ident).collect();
+    let (item2_name, path_segments) = path_segments.split_last().unwrap();
+    let (item1_name, path_segments) = path_segments.split_last().unwrap();
+
+    let item1_name = item1_name.to_string();
+    let item2_name = item2_name.to_string();
+    let module_path = path_segments
+        .iter()
+        .copied()
+        .map(Ident::to_string)
+        .collect::<Vec<_>>()
+        .join("_");
+
+    (module_path, item1_name, item2_name)
+}
diff --git a/src/main/resources/templates/rust/test/tests/behavior.rs b/src/main/resources/templates/rust/test/tests/behavior.rs
new file mode 100644
index 000000000000..7efd38c20de5
--- /dev/null
+++ b/src/main/resources/templates/rust/test/tests/behavior.rs
@@ -0,0 +1,90 @@
+use chrono::NaiveDate;
+use rust_template_exercise::{bubble_sort::BubbleSort, merge_sort::MergeSort};
+
+use rust_template_test_macros::{
+    require_impl_function_or_fail, require_impl_method_or_fail, require_struct_or_fail,
+    require_trait, require_trait_supertrait_or_fail,
+};
+
+#[require_trait(sort_strategy::SortStrategy)]
+use rust_template_exercise::sort_strategy::SortStrategy;
+
+// We can't use the opt variants because the Option methods aren't const yet
+#[allow(deprecated)]
+const DATES_UNORDERED: [NaiveDate; 4] = [
+    NaiveDate::from_ymd(2018, 11, 8),
+    NaiveDate::from_ymd(2017, 4, 15),
+    NaiveDate::from_ymd(2016, 2, 15),
+    NaiveDate::from_ymd(2017, 9, 15),
+];
+#[allow(deprecated)]
+const DATES_ORDERED: [NaiveDate; 4] = [
+    NaiveDate::from_ymd(2016, 2, 15),
+    NaiveDate::from_ymd(2017, 4, 15),
+    NaiveDate::from_ymd(2017, 9, 15),
+    NaiveDate::from_ymd(2018, 11, 8),
+];
+
+#[test]
+fn test_bubble_sort() {
+    let bubble_sort = BubbleSort;
+    let mut dates = DATES_UNORDERED;
+    bubble_sort.perform_sort(&mut dates);
+    assert_eq!(dates, DATES_ORDERED, "BubbleSort does not sort correctly");
+}
+
+#[test]
+fn test_merge_sort() {
+    let merge_sort = MergeSort;
+    let mut dates = DATES_UNORDERED;
+    merge_sort.perform_sort(&mut dates);
+    assert_eq!(dates, DATES_ORDERED, "MergeSort does not sort correctly");
+}
+
+#[test]
+#[require_struct_or_fail(context::Context)]
+#[require_struct_or_fail(policy::Policy)]
+#[require_trait_supertrait_or_fail(sort_strategy::SortStrategy : Any)]
+#[require_impl_method_or_fail(context::Context::sort_algorithm)]
+#[require_impl_function_or_fail(context::Context::new)]
+#[require_impl_function_or_fail(policy::Policy::new)]
+fn test_use_merge_sort_for_big_list() {
+    let context = std::cell::RefCell::new(rust_template_exercise::context::Context::new());
+    let mut policy = rust_template_exercise::policy::Policy::new(&context);
+
+    let data = [NaiveDate::default(); 20];
+    policy.configure(&data);
+
+    let context = context.borrow();
+    let sort_strategy = context.sort_algorithm();
+
+    assert_eq!(
+        sort_strategy.type_id(),
+        std::any::TypeId::of::<MergeSort>(),
+        "The sort algorithm of Context was not MergeSort for a list with more than 10 dates."
+    );
+}
+
+#[test]
+#[require_struct_or_fail(context::Context)]
+#[require_struct_or_fail(policy::Policy)]
+#[require_trait_supertrait_or_fail(sort_strategy::SortStrategy : Any)]
+#[require_impl_method_or_fail(context::Context::sort_algorithm)]
+#[require_impl_function_or_fail(context::Context::new)]
+#[require_impl_function_or_fail(policy::Policy::new)]
+fn test_use_bubble_sort_for_small_list() {
+    let context = std::cell::RefCell::new(rust_template_exercise::context::Context::new());
+    let mut policy = rust_template_exercise::policy::Policy::new(&context);
+
+    let data = [NaiveDate::default(); 10];
+    policy.configure(&data);
+
+    let context = context.borrow();
+    let sort_strategy = context.sort_algorithm();
+
+    assert_eq!(
+        sort_strategy.type_id(),
+        std::any::TypeId::of::<BubbleSort>(),
+        "The sort algorithm of Context was not BubbleSort for a list with less or equal than 10 dates."
+    );
+}
diff --git a/src/main/resources/templates/rust/test/tests/structural.rs b/src/main/resources/templates/rust/test/tests/structural.rs
new file mode 100644
index 000000000000..70b0d19c9131
--- /dev/null
+++ b/src/main/resources/templates/rust/test/tests/structural.rs
@@ -0,0 +1,79 @@
+mod structural_helpers;
+
+use structural_helpers::*;
+
+#[test]
+fn test_sort_strategy_trait() {
+    let ast = parse_file("./assignment/src/sort_strategy.rs");
+    check_trait_names(&ast.items, ["SortStrategy"])
+        .unwrap_or_else(|name| panic!("A trait named \"{name}\" should be defined"));
+}
+
+#[test]
+fn test_sort_strategy_supertrait() {
+    let ast = parse_file("./assignment/src/sort_strategy.rs");
+    let sort_strategy = find_trait(&ast.items, "SortStrategy")
+        .expect("A trait named \"SortStrategy\" should be defined");
+    check_trait_supertrait(sort_strategy, "Any")
+        .unwrap_or_else(|_| panic!("SortStrategy should have \"Any\" as a supertrait"));
+}
+
+#[test]
+fn test_sort_strategy_methods() {
+    let ast = parse_file("./assignment/src/sort_strategy.rs");
+    let sort_strategy = find_trait(&ast.items, "SortStrategy")
+        .expect("A trait named \"SortStrategy\" should be defined");
+    check_trait_function_names(&sort_strategy.items, ["perform_sort"])
+        .unwrap_or_else(|name| panic!("SortStrategy should define the function \"{name}\""));
+}
+
+#[test]
+fn test_context_fields() {
+    let ast = parse_file("./assignment/src/context.rs");
+    let context =
+        find_struct(&ast.items, "Context").expect("A struct named \"Context\" should be defined");
+    check_struct_field_names(&context.fields, ["sort_algorithm"])
+        .unwrap_or_else(|name| panic!("Context should define the field \"{name}\""));
+}
+
+#[test]
+fn test_context_methods() {
+    let ast = parse_file("./assignment/src/context.rs");
+    let context_impl =
+        find_impl(&ast.items, "Context").expect("SortStrategy should implement functions");
+    check_impl_function_names(&context_impl.items, ["new", "sort", "sort_algorithm"])
+        .unwrap_or_else(|name| panic!("Context should implement the function \"{name}\""));
+}
+
+#[test]
+fn test_policy_fields() {
+    let ast = parse_file("./assignment/src/policy.rs");
+    let policy =
+        find_struct(&ast.items, "Policy").expect("A struct named \"Policy\" should be defined");
+    check_struct_field_names(&policy.fields, ["context"])
+        .unwrap_or_else(|name| panic!("Policy should define the field \"{name}\""));
+}
+
+#[test]
+fn test_policy_methods() {
+    let ast = parse_file("./assignment/src/policy.rs");
+    let policy_impl = find_impl(&ast.items, "Policy").expect("Policy should implement functions");
+    check_impl_function_names(&policy_impl.items, ["new", "configure"])
+        .unwrap_or_else(|name| panic!("Policy should implement the function \"{name}\""));
+}
+
+#[test]
+fn test_bubble_sort_struct() {
+    let ast = parse_file("./assignment/src/bubble_sort.rs");
+    find_struct(&ast.items, "BubbleSort").expect("A struct named \"BubbleSort\" should be defined");
+    find_impl_for(&ast.items, "BubbleSort", "SortStrategy")
+        .expect("BubbleSort should implement the trait \"SortStrategy\"");
+}
+
+#[test]
+fn test_merge_sort_struct() {
+    let ast = parse_file("./assignment/src/merge_sort.rs");
+    find_struct(&ast.items, "MergeSort").expect("A struct named \"MergeSort\" should be defined");
+    find_impl_for(&ast.items, "MergeSort", "SortStrategy")
+        .expect("MergeSort should implement the trait \"SortStrategy\"");
+}
diff --git a/src/main/resources/templates/rust/test/tests/structural_helpers/mod.rs b/src/main/resources/templates/rust/test/tests/structural_helpers/mod.rs
new file mode 100644
index 000000000000..493d043f6d5c
--- /dev/null
+++ b/src/main/resources/templates/rust/test/tests/structural_helpers/mod.rs
@@ -0,0 +1,207 @@
+//! Run-time source code reflection
+//!
+//! Use this for flexible parsing and computed names.
+#![allow(dead_code)]
+
+use std::io::Read;
+
+use syn::{
+    Fields, ImplItem, ImplItemFn,
+    Item::{self, Impl, Struct, Trait},
+    ItemImpl, ItemStruct, ItemTrait, TraitItem, TraitItemFn, TypeParamBound,
+};
+
+pub fn check_struct_names<'a, I: IntoIterator<Item = &'a str>>(
+    items: &[Item],
+    names: I,
+) -> Result<(), &'a str> {
+    for name in names {
+        find_struct(items, name).ok_or(name)?;
+    }
+    Ok(())
+}
+
+pub fn find_struct<'a>(items: &'a [Item], name: &str) -> Option<&'a ItemStruct> {
+    find_by_name(
+        items,
+        name,
+        |i| match i {
+            Struct(s) => Some(s),
+            _ => None,
+        },
+        |s| &s.ident,
+    )
+}
+
+pub fn check_struct_field_names<'a, I: IntoIterator<Item = &'a str>>(
+    fields: &Fields,
+    names: I,
+) -> Result<(), &'a str> {
+    let p = match fields {
+        Fields::Named(f) => &f.named,
+        _ => panic!("The struct should have named fields"),
+    };
+
+    let field_names: Vec<_> = p.iter().map(|f| f.ident.as_ref().unwrap()).collect();
+
+    for name in names {
+        field_names
+            .iter()
+            .copied()
+            .find(|&n| n == name)
+            .ok_or(name)?;
+    }
+    Ok(())
+}
+
+pub fn find_impl<'a>(items: &'a [Item], name: &str) -> Option<&'a ItemImpl> {
+    items.iter().find_map(|i| {
+        let im = match i {
+            Impl(im) => im,
+            _ => return None,
+        };
+        let self_name = match im.self_ty.as_ref() {
+            syn::Type::Path(p) => &p.path.segments.last().unwrap().ident,
+            _ => return None,
+        };
+        if im.trait_.is_some() {
+            return None;
+        }
+
+        if self_name != name {
+            return None;
+        }
+
+        Some(im)
+    })
+}
+
+pub fn find_impl_for<'a>(items: &'a [Item], name: &str, for_trait: &str) -> Option<&'a ItemImpl> {
+    items.iter().find_map(|i| {
+        let im = match i {
+            Impl(im) => im,
+            _ => return None,
+        };
+        let self_name = match im.self_ty.as_ref() {
+            syn::Type::Path(p) => &p.path.segments.last().unwrap().ident,
+            _ => return None,
+        };
+        let trait_name = match im.trait_.as_ref() {
+            Some((_, path, _)) => &path.segments.last().unwrap().ident,
+            _ => return None,
+        };
+
+        if self_name != name || trait_name != for_trait {
+            return None;
+        }
+
+        Some(im)
+    })
+}
+
+pub fn check_impl_function_names<'a, I: IntoIterator<Item = &'a str>>(
+    items: &[ImplItem],
+    names: I,
+) -> Result<(), &'a str> {
+    for name in names {
+        find_impl_function(items, name).ok_or(name)?;
+    }
+    Ok(())
+}
+
+pub fn find_impl_function<'a>(items: &'a [ImplItem], name: &str) -> Option<&'a ImplItemFn> {
+    find_by_name(
+        items,
+        name,
+        |i| match i {
+            ImplItem::Fn(f) => Some(f),
+            _ => None,
+        },
+        |f| &f.sig.ident,
+    )
+}
+
+pub fn check_trait_names<'a, I: IntoIterator<Item = &'a str>>(
+    items: &[Item],
+    names: I,
+) -> Result<(), &'a str> {
+    for name in names {
+        find_trait(items, name).ok_or(name)?;
+    }
+    Ok(())
+}
+
+pub fn find_trait<'a>(items: &'a [Item], name: &str) -> Option<&'a ItemTrait> {
+    find_by_name(
+        items,
+        name,
+        |i| match i {
+            Trait(t) => Some(t),
+            _ => None,
+        },
+        |t| &t.ident,
+    )
+}
+
+pub fn check_trait_function_names<'a, I: IntoIterator<Item = &'a str>>(
+    items: &[TraitItem],
+    names: I,
+) -> Result<(), &'a str> {
+    for name in names {
+        find_trait_function(items, name).ok_or(name)?;
+    }
+    Ok(())
+}
+
+pub fn find_trait_function<'a>(items: &'a [TraitItem], name: &str) -> Option<&'a TraitItemFn> {
+    find_by_name(
+        items,
+        name,
+        |i| match i {
+            TraitItem::Fn(f) => Some(f),
+            _ => None,
+        },
+        |f| &f.sig.ident,
+    )
+}
+
+pub fn check_trait_supertrait(trait_: &ItemTrait, supertrait_name: &str) -> Result<(), ()> {
+    find_by_name(
+        &trait_.supertraits,
+        supertrait_name,
+        |s| match s {
+            TypeParamBound::Trait(t) => Some(t),
+            _ => None,
+        },
+        |t| &t.path.segments.last().unwrap().ident,
+    )
+    .ok_or(())?;
+    Ok(())
+}
+
+fn find_by_name<
+    'a,
+    Item,
+    I: IntoIterator<Item = Item>,
+    M: FnMut(Item) -> Option<R>,
+    R,
+    N: FnMut(&R) -> C,
+    C: PartialEq<&'a str>,
+>(
+    items: I,
+    name: &'a str,
+    item_matcher: M,
+    mut name_getter: N,
+) -> Option<R> {
+    items
+        .into_iter()
+        .filter_map(item_matcher)
+        .find(|i| name_getter(i) == name)
+}
+
+pub fn parse_file<P: AsRef<std::path::Path>>(path: P) -> syn::File {
+    let mut file = std::fs::File::open(path).unwrap();
+    let mut content = String::new();
+    file.read_to_string(&mut content).unwrap();
+    syn::parse_file(&content).unwrap()
+}
diff --git a/src/main/webapp/app/entities/programming-exercise.model.ts b/src/main/webapp/app/entities/programming-exercise.model.ts
index f8a37efc1b6e..a2e6a093f9a1 100644
--- a/src/main/webapp/app/entities/programming-exercise.model.ts
+++ b/src/main/webapp/app/entities/programming-exercise.model.ts
@@ -86,6 +86,7 @@ export enum ProgrammingLanguage {
     SWIFT = 'SWIFT',
     OCAML = 'OCAML',
     EMPTY = 'EMPTY',
+    RUST = 'RUST',
 }
 
 export enum ProjectType {
diff --git a/src/test/resources/config/application.yml b/src/test/resources/config/application.yml
index bba3939e92f3..ba0acb609f26 100644
--- a/src/test/resources/config/application.yml
+++ b/src/test/resources/config/application.yml
@@ -66,6 +66,8 @@ artemis:
                     default: "~~invalid~~"
                 ocaml:
                     default: "~~invalid~~"
+                rust:
+                    default: "~~invalid~~"
 
 spring:
     application:

From 31fca80a81de20d1ce4a68850cbb1f23ec8b0a9f Mon Sep 17 00:00:00 2001
From: Michael Dyer <59163924+MichaelOwenDyer@users.noreply.github.com>
Date: Tue, 27 Aug 2024 13:41:55 +0200
Subject: [PATCH 08/15] Iris: Fix Competency Generation (#9190)

---
 .../IrisCompetencyGenerationSession.java      |  51 ------
 ...CompetencyGenerationSessionRepository.java |  20 ---
 .../connectors/pyris/PyrisJobService.java     |  29 +++-
 .../pyris/PyrisPipelineService.java           | 130 ++++++++-------
 .../pyris/PyrisStatusUpdateService.java       |  41 +++--
 .../pyris/dto/PyrisPipelineExecutionDTO.java  |  11 ++
 .../PyrisCompetencyExtractionInputDTO.java    |   7 +
 ...petencyExtractionPipelineExecutionDTO.java |  20 +++
 .../PyrisCompetencyRecommendationDTO.java     |  17 ++
 .../PyrisCompetencyStatusUpdateDTO.java       |  19 +++
 .../pyris/dto/status/PyrisStageDTO.java       |  21 +++
 .../pyris/dto/status/PyrisStageState.java     |  10 +-
 .../pyris/job/CompetencyExtractionJob.java    |  22 +++
 .../iris/IrisCompetencyGenerationService.java |  71 ++++++++
 .../service/iris/IrisSessionService.java      |  12 +-
 .../IrisChatWebsocketDTO.java}                |   8 +-
 .../dto/IrisCombinedChatSubSettingsDTO.java   |   2 +-
 ...nedCompetencyGenerationSubSettingsDTO.java |   5 +-
 .../dto/IrisCombinedHestiaSubSettingsDTO.java |   3 +-
 .../dto/IrisCombinedSubSettingsInterface.java |  16 --
 .../IrisChatBasedFeatureInterface.java        |   3 +-
 ...risCompetencyGenerationSessionService.java | 154 ------------------
 .../session/IrisCourseChatSessionService.java |   6 +-
 .../IrisExerciseChatSessionService.java       |   6 +-
 .../websocket/IrisChatWebsocketService.java   |  55 +++----
 .../iris/websocket/IrisWebsocketService.java  |  31 +++-
 .../competency/CourseCompetencyResource.java  |  31 ++--
 .../open/PublicPyrisStatusUpdateResource.java |  44 +++--
 .../competencies/course-competency.service.ts |  11 +-
 .../course-description-form.component.ts      |   7 +-
 .../generate-competencies.component.ts        |  97 ++++++++---
 src/main/webapp/i18n/de/competency.json       |   4 +-
 src/main/webapp/i18n/en/competency.json       |   4 +-
 .../connector/IrisRequestMockProvider.java    |  15 ++
 .../iris/AbstractIrisIntegrationTest.java     |  17 +-
 .../iris/IrisChatMessageIntegrationTest.java  |  29 ++--
 .../artemis/iris/IrisChatWebsocketTest.java   |   6 +-
 ...isCompetencyGenerationIntegrationTest.java |  81 +++++----
 .../competencies/competency.service.spec.ts   |   2 +-
 .../course-description-form.component.spec.ts |  10 ++
 .../generate-competencies.component.spec.ts   |  75 +++++++--
 .../competencies/prerequisite.service.spec.ts |   2 +-
 42 files changed, 692 insertions(+), 513 deletions(-)
 delete mode 100644 src/main/java/de/tum/in/www1/artemis/domain/iris/session/IrisCompetencyGenerationSession.java
 delete mode 100644 src/main/java/de/tum/in/www1/artemis/repository/iris/IrisCompetencyGenerationSessionRepository.java
 create mode 100644 src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/dto/PyrisPipelineExecutionDTO.java
 create mode 100644 src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/dto/competency/PyrisCompetencyExtractionInputDTO.java
 create mode 100644 src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/dto/competency/PyrisCompetencyExtractionPipelineExecutionDTO.java
 create mode 100644 src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/dto/competency/PyrisCompetencyRecommendationDTO.java
 create mode 100644 src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/dto/competency/PyrisCompetencyStatusUpdateDTO.java
 create mode 100644 src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/job/CompetencyExtractionJob.java
 create mode 100644 src/main/java/de/tum/in/www1/artemis/service/iris/IrisCompetencyGenerationService.java
 rename src/main/java/de/tum/in/www1/artemis/service/iris/{websocket/IrisWebsocketDTO.java => dto/IrisChatWebsocketDTO.java} (84%)
 delete mode 100644 src/main/java/de/tum/in/www1/artemis/service/iris/dto/IrisCombinedSubSettingsInterface.java
 delete mode 100644 src/main/java/de/tum/in/www1/artemis/service/iris/session/IrisCompetencyGenerationSessionService.java

diff --git a/src/main/java/de/tum/in/www1/artemis/domain/iris/session/IrisCompetencyGenerationSession.java b/src/main/java/de/tum/in/www1/artemis/domain/iris/session/IrisCompetencyGenerationSession.java
deleted file mode 100644
index 4353f30a63c1..000000000000
--- a/src/main/java/de/tum/in/www1/artemis/domain/iris/session/IrisCompetencyGenerationSession.java
+++ /dev/null
@@ -1,51 +0,0 @@
-package de.tum.in.www1.artemis.domain.iris.session;
-
-import jakarta.persistence.DiscriminatorValue;
-import jakarta.persistence.Entity;
-import jakarta.persistence.ManyToOne;
-
-import com.fasterxml.jackson.annotation.JsonIgnore;
-import com.fasterxml.jackson.annotation.JsonInclude;
-
-import de.tum.in.www1.artemis.domain.Course;
-import de.tum.in.www1.artemis.domain.User;
-
-/**
- * A IrisCompetencyGenerationSession is a session specific to a course and user.
- * This is used for course editors to generate competency recommendations.
- */
-@Entity
-@DiscriminatorValue("COMPETENCY_GENERATION")
-@JsonInclude(JsonInclude.Include.NON_EMPTY)
-public class IrisCompetencyGenerationSession extends IrisSession {
-
-    @ManyToOne
-    @JsonIgnore
-    private Course course;
-
-    @ManyToOne
-    @JsonIgnore
-    private User user;
-
-    public Course getCourse() {
-        return course;
-    }
-
-    public void setCourse(Course course) {
-        this.course = course;
-    }
-
-    public User getUser() {
-        return user;
-    }
-
-    public void setUser(User user) {
-        this.user = user;
-    }
-
-    @Override
-    public String toString() {
-        return "IrisCompetencyGenerationSession{" + "id=" + getId() + ", course=" + (course == null ? "null" : course.getId()) + ", user="
-                + (user == null ? "null" : user.getName()) + '}';
-    }
-}
diff --git a/src/main/java/de/tum/in/www1/artemis/repository/iris/IrisCompetencyGenerationSessionRepository.java b/src/main/java/de/tum/in/www1/artemis/repository/iris/IrisCompetencyGenerationSessionRepository.java
deleted file mode 100644
index 978749785907..000000000000
--- a/src/main/java/de/tum/in/www1/artemis/repository/iris/IrisCompetencyGenerationSessionRepository.java
+++ /dev/null
@@ -1,20 +0,0 @@
-package de.tum.in.www1.artemis.repository.iris;
-
-import de.tum.in.www1.artemis.domain.iris.session.IrisCompetencyGenerationSession;
-import de.tum.in.www1.artemis.repository.base.ArtemisJpaRepository;
-
-/**
- * Repository interface for managing {@link IrisCompetencyGenerationSession} entities.
- */
-public interface IrisCompetencyGenerationSessionRepository extends ArtemisJpaRepository<IrisCompetencyGenerationSession, Long> {
-
-    /**
-     * Finds the latest {@link IrisCompetencyGenerationSession} based on its course and user.
-     *
-     * @param courseId The ID of the course.
-     * @param userId   The ID of the user.
-     *
-     * @return The latest competency generation session
-     */
-    IrisCompetencyGenerationSession findFirstByCourseIdAndUserIdOrderByCreationDateDesc(long courseId, long userId);
-}
diff --git a/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/PyrisJobService.java b/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/PyrisJobService.java
index 1c9320aed1d0..24dc20bffa65 100644
--- a/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/PyrisJobService.java
+++ b/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/PyrisJobService.java
@@ -2,6 +2,7 @@
 
 import java.security.SecureRandom;
 import java.util.concurrent.TimeUnit;
+import java.util.function.Function;
 
 import jakarta.annotation.PostConstruct;
 import jakarta.servlet.http.HttpServletRequest;
@@ -19,6 +20,7 @@
 import de.tum.in.www1.artemis.service.connectors.pyris.job.IngestionWebhookJob;
 import de.tum.in.www1.artemis.service.connectors.pyris.job.PyrisJob;
 import de.tum.in.www1.artemis.web.rest.errors.AccessForbiddenException;
+import de.tum.in.www1.artemis.web.rest.errors.ConflictException;
 
 /**
  * The PyrisJobService class is responsible for managing Pyris jobs in the Artemis system.
@@ -58,6 +60,20 @@ public void init() {
         jobMap = hazelcastInstance.getMap("pyris-job-map");
     }
 
+    /**
+     * Creates a token for an arbitrary job, runs the provided function with the token as an argument,
+     * and stores the job in the job map.
+     *
+     * @param tokenToJobFunction the function to run with the token
+     * @return the generated token
+     */
+    public String createTokenForJob(Function<String, PyrisJob> tokenToJobFunction) {
+        var token = generateJobIdToken();
+        var job = tokenToJobFunction.apply(token);
+        jobMap.put(token, job);
+        return token;
+    }
+
     public String addExerciseChatJob(Long courseId, Long exerciseId, Long sessionId) {
         var token = generateJobIdToken();
         var job = new ExerciseChatJob(token, courseId, exerciseId, sessionId);
@@ -111,13 +127,15 @@ public PyrisJob getJob(String token) {
      * 2. Retrieves the PyrisJob object associated with the provided token.
      * 3. Throws an AccessForbiddenException if the token is invalid or not provided.
      * <p>
-     * The token was previously generated via {@link #addJob(Long, Long, Long)}
+     * The token was previously generated via {@link #createTokenForJob(Function)}
      *
-     * @param request the HttpServletRequest object representing the incoming request
+     * @param request  the HttpServletRequest object representing the incoming request
+     * @param jobClass the class of the PyrisJob object to cast the retrieved job to
+     * @param <Job>    the type of the PyrisJob object
      * @return the PyrisJob object associated with the token
      * @throws AccessForbiddenException if the token is invalid or not provided
      */
-    public PyrisJob getAndAuthenticateJobFromHeaderElseThrow(HttpServletRequest request) {
+    public <Job extends PyrisJob> Job getAndAuthenticateJobFromHeaderElseThrow(HttpServletRequest request, Class<Job> jobClass) {
         var authHeader = request.getHeader("Authorization");
         if (!authHeader.startsWith("Bearer ")) {
             throw new AccessForbiddenException("No valid token provided");
@@ -127,7 +145,10 @@ public PyrisJob getAndAuthenticateJobFromHeaderElseThrow(HttpServletRequest requ
         if (job == null) {
             throw new AccessForbiddenException("No valid token provided");
         }
-        return job;
+        if (!jobClass.isInstance(job)) {
+            throw new ConflictException("Run ID is not a " + jobClass.getSimpleName(), "Job", "invalidRunId");
+        }
+        return jobClass.cast(job);
     }
 
     /**
diff --git a/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/PyrisPipelineService.java b/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/PyrisPipelineService.java
index 54c8d2daf5f3..a2fc3f1c3ce4 100644
--- a/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/PyrisPipelineService.java
+++ b/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/PyrisPipelineService.java
@@ -6,8 +6,8 @@
 import java.util.Map;
 import java.util.Optional;
 import java.util.Set;
+import java.util.function.Consumer;
 import java.util.function.Function;
-import java.util.function.Supplier;
 
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
@@ -19,21 +19,19 @@
 import de.tum.in.www1.artemis.domain.ProgrammingExercise;
 import de.tum.in.www1.artemis.domain.ProgrammingSubmission;
 import de.tum.in.www1.artemis.domain.competency.CompetencyJol;
-import de.tum.in.www1.artemis.domain.iris.session.IrisChatSession;
 import de.tum.in.www1.artemis.domain.iris.session.IrisCourseChatSession;
 import de.tum.in.www1.artemis.domain.iris.session.IrisExerciseChatSession;
 import de.tum.in.www1.artemis.domain.participation.StudentParticipation;
 import de.tum.in.www1.artemis.repository.CourseRepository;
 import de.tum.in.www1.artemis.repository.StudentParticipationRepository;
+import de.tum.in.www1.artemis.service.connectors.pyris.dto.PyrisPipelineExecutionDTO;
 import de.tum.in.www1.artemis.service.connectors.pyris.dto.PyrisPipelineExecutionSettingsDTO;
-import de.tum.in.www1.artemis.service.connectors.pyris.dto.chat.PyrisChatPipelineExecutionBaseDataDTO;
 import de.tum.in.www1.artemis.service.connectors.pyris.dto.chat.course.PyrisCourseChatPipelineExecutionDTO;
 import de.tum.in.www1.artemis.service.connectors.pyris.dto.chat.exercise.PyrisExerciseChatPipelineExecutionDTO;
 import de.tum.in.www1.artemis.service.connectors.pyris.dto.data.PyrisCourseDTO;
 import de.tum.in.www1.artemis.service.connectors.pyris.dto.data.PyrisExtendedCourseDTO;
 import de.tum.in.www1.artemis.service.connectors.pyris.dto.data.PyrisUserDTO;
 import de.tum.in.www1.artemis.service.connectors.pyris.dto.status.PyrisStageDTO;
-import de.tum.in.www1.artemis.service.connectors.pyris.dto.status.PyrisStageState;
 import de.tum.in.www1.artemis.service.iris.exception.IrisException;
 import de.tum.in.www1.artemis.service.iris.websocket.IrisChatWebsocketService;
 import de.tum.in.www1.artemis.service.metrics.LearningMetricsService;
@@ -79,69 +77,48 @@ public PyrisPipelineService(PyrisConnectorService pyrisConnectorService, PyrisJo
     }
 
     /**
-     * Executes a chat pipeline for a given chat session subtype.
-     * This method prepares the execution data, executes the specified pipeline, and handles the state updates.
+     * Executes a pipeline on Pyris, identified by the given name and variant.
+     * The pipeline execution is tracked by a unique job token, which must be provided by the caller.
+     * The caller must additionally provide a mapper function to create the concrete DTO type for this pipeline from the base DTO.
+     * The status of the pipeline execution is updated via a consumer that accepts a list of stages. This method will
+     * call the consumer with the initial stages of the pipeline execution. Later stages will be sent back from Pyris,
+     * and need to be handled in the endpoint that receives the status updates.
      * <p>
-     * The general idea of this being generic is that the pipeline execution is the same for all chat sessions,
-     * but the specific data required for the pipeline execution is different for each session / pipeline type.
-     * Therefore, the specific data is provided by a function that accepts the basic chat data and returns the more specific data.
      *
-     * @param variant              the variant of the pipeline
-     * @param session              the active chat session, must inherit from {@link IrisChatSession}
-     * @param pipelineName         the name of the pipeline to be executed
-     * @param executionDtoSupplier a function that accepts basic chat data and returns an execution DTO specific to the pipeline being executed
-     * @param jobTokenSupplier     a supplier that provides a unique job token for tracking the pipeline execution
-     * @param <T>                  the type of the chat session
-     * @param <U>                  the type of the execution DTO
+     * @param name          the name of the pipeline to be executed
+     * @param variant       the variant of the pipeline
+     * @param jobToken      a unique job token for tracking the pipeline execution
+     * @param dtoMapper     a function to create the concrete DTO type for this pipeline from the base DTO
+     * @param statusUpdater a consumer to update the status of the pipeline execution
      */
-    private <T extends IrisChatSession, U> void executeChatPipeline(String variant, T session, String pipelineName,
-            Function<PyrisChatPipelineExecutionBaseDataDTO, U> executionDtoSupplier, Supplier<String> jobTokenSupplier) {
-
-        // Retrieve the unique job token for this pipeline execution
-        var jobToken = jobTokenSupplier.get();
-
-        // Set up initial pipeline execution settings with the server base URL
-        var settingsDTO = new PyrisPipelineExecutionSettingsDTO(jobToken, List.of(), artemisBaseUrl);
-
+    public void executePipeline(String name, String variant, String jobToken, Function<PyrisPipelineExecutionDTO, Object> dtoMapper, Consumer<List<PyrisStageDTO>> statusUpdater) {
         // Define the preparation stages of pipeline execution with their initial states
         // There will be more stages added in Pyris later
-        var preparingRequestStageInProgress = new PyrisStageDTO("Preparing", 10, PyrisStageState.IN_PROGRESS, null);
-        var preparingRequestStageDone = new PyrisStageDTO("Preparing", 10, PyrisStageState.DONE, null);
-        var executingPipelineStageNotStarted = new PyrisStageDTO("Executing pipeline", 30, PyrisStageState.NOT_STARTED, null);
+        var preparing = new PyrisStageDTO("Preparing", 10, null, null);
+        var executing = new PyrisStageDTO("Executing pipeline", 30, null, null);
 
         // Send initial status update indicating that the preparation stage is in progress
-        irisChatWebsocketService.sendStatusUpdate(session, List.of(preparingRequestStageInProgress, executingPipelineStageNotStarted));
+        statusUpdater.accept(List.of(preparing.inProgress(), executing.notStarted()));
 
-        try {
-            // Prepare the base execution data for the pipeline.
-            // It is shared among chat pipelines and included as field "base" in the specific execution DTOs.
-            var base = new PyrisChatPipelineExecutionBaseDataDTO(pyrisDTOService.toPyrisMessageDTOList(session.getMessages()), new PyrisUserDTO(session.getUser()), settingsDTO,
-                    List.of(preparingRequestStageDone) // The initial stage is done when the request arrives at Pyris
-            );
-
-            // Prepare the specific execution data for the pipeline
-            // This is implementation-specific and includes additional data required for the pipeline
-            // Implementations must deliver the base data, too
-            U executionDTO = executionDtoSupplier.apply(base);
+        var baseDto = new PyrisPipelineExecutionDTO(new PyrisPipelineExecutionSettingsDTO(jobToken, List.of(), artemisBaseUrl), List.of(preparing.done()));
+        var pipelineDto = dtoMapper.apply(baseDto);
 
+        try {
             // Send a status update that preparation is done and pipeline execution is starting
-            var executingPipelineStageInProgress = new PyrisStageDTO("Executing pipeline", 30, PyrisStageState.IN_PROGRESS, null);
-            irisChatWebsocketService.sendStatusUpdate(session, List.of(preparingRequestStageDone, executingPipelineStageInProgress));
+            statusUpdater.accept(List.of(preparing.done(), executing.inProgress()));
 
             try {
                 // Execute the pipeline using the connector service
-                pyrisConnectorService.executePipeline(pipelineName, variant, executionDTO);
+                pyrisConnectorService.executePipeline(name, variant, pipelineDto);
             }
             catch (PyrisConnectorException | IrisException e) {
-                log.error("Failed to execute " + pipelineName + " pipeline", e);
-                var executingPipelineStageFailed = new PyrisStageDTO("Executing pipeline", 30, PyrisStageState.ERROR, "An internal error occurred");
-                irisChatWebsocketService.sendStatusUpdate(session, List.of(preparingRequestStageDone, executingPipelineStageFailed));
+                log.error("Failed to execute {} pipeline", name, e);
+                statusUpdater.accept(List.of(preparing.done(), executing.error("An internal error occurred")));
             }
         }
         catch (Exception e) {
-            log.error("Failed to prepare " + pipelineName + " pipeline execution", e);
-            var preparingRequestStageFailed = new PyrisStageDTO("Preparing request", 10, PyrisStageState.ERROR, "An internal error occurred");
-            irisChatWebsocketService.sendStatusUpdate(session, List.of(preparingRequestStageFailed, executingPipelineStageNotStarted));
+            log.error("Failed to prepare {} pipeline execution", name, e);
+            statusUpdater.accept(List.of(preparing.error("An internal error occurred"), executing.notStarted()));
         }
     }
 
@@ -157,14 +134,29 @@ private <T extends IrisChatSession, U> void executeChatPipeline(String variant,
      * @param latestSubmission the latest submission of the student
      * @param exercise         the programming exercise
      * @param session          the chat session
-     * @see PyrisPipelineService#executeChatPipeline for more details on the pipeline execution process.
+     * @see PyrisPipelineService#executePipeline for more details on the pipeline execution process.
      */
     public void executeExerciseChatPipeline(String variant, Optional<ProgrammingSubmission> latestSubmission, ProgrammingExercise exercise, IrisExerciseChatSession session) {
-        executeChatPipeline(variant, session, "tutor-chat", // TODO: Rename this to 'exercise-chat' with next breaking Pyris version
-                base -> new PyrisExerciseChatPipelineExecutionDTO(latestSubmission.map(pyrisDTOService::toPyrisSubmissionDTO).orElse(null),
-                        pyrisDTOService.toPyrisProgrammingExerciseDTO(exercise), new PyrisCourseDTO(exercise.getCourseViaExerciseGroupOrCourseMember()), base.chatHistory(),
-                        base.user(), base.settings(), base.initialStages()),
-                () -> pyrisJobService.addExerciseChatJob(exercise.getCourseViaExerciseGroupOrCourseMember().getId(), exercise.getId(), session.getId()));
+        // @formatter:off
+        executePipeline(
+                "tutor-chat", // TODO: Rename this to 'exercise-chat' with next breaking Pyris version
+                variant,
+                pyrisJobService.addExerciseChatJob(exercise.getCourseViaExerciseGroupOrCourseMember().getId(), exercise.getId(), session.getId()),
+                executionDto -> {
+                    var course = exercise.getCourseViaExerciseGroupOrCourseMember();
+                    return new PyrisExerciseChatPipelineExecutionDTO(
+                            latestSubmission.map(pyrisDTOService::toPyrisSubmissionDTO).orElse(null),
+                            pyrisDTOService.toPyrisProgrammingExerciseDTO(exercise),
+                            new PyrisCourseDTO(course),
+                            pyrisDTOService.toPyrisMessageDTOList(session.getMessages()),
+                            new PyrisUserDTO(session.getUser()),
+                            executionDto.settings(),
+                            executionDto.initialStages()
+                    );
+                },
+                stages -> irisChatWebsocketService.sendStatusUpdate(session, stages)
+        );
+        // @formatter:on
     }
 
     /**
@@ -178,17 +170,31 @@ public void executeExerciseChatPipeline(String variant, Optional<ProgrammingSubm
      * @param variant       the variant of the pipeline
      * @param session       the chat session
      * @param competencyJol if this is due to a JoL set event, this must be the newly created competencyJoL
-     * @see PyrisPipelineService#executeChatPipeline for more details on the pipeline execution process.
+     * @see PyrisPipelineService#executePipeline for more details on the pipeline execution process.
      */
     public void executeCourseChatPipeline(String variant, IrisCourseChatSession session, CompetencyJol competencyJol) {
+        // @formatter:off
         var courseId = session.getCourse().getId();
         var studentId = session.getUser().getId();
-        executeChatPipeline(variant, session, "course-chat", base -> {
-            var fullCourse = loadCourseWithParticipationOfStudent(courseId, studentId);
-            return new PyrisCourseChatPipelineExecutionDTO(PyrisExtendedCourseDTO.of(fullCourse),
-                    learningMetricsService.getStudentCourseMetrics(session.getUser().getId(), courseId), competencyJol == null ? null : CompetencyJolDTO.of(competencyJol),
-                    base.chatHistory(), base.user(), base.settings(), base.initialStages());
-        }, () -> pyrisJobService.addCourseChatJob(courseId, session.getId()));
+        executePipeline(
+                "course-chat",
+                variant,
+                pyrisJobService.addCourseChatJob(courseId, session.getId()),
+                executionDto -> {
+                    var fullCourse = loadCourseWithParticipationOfStudent(courseId, studentId);
+                    return new PyrisCourseChatPipelineExecutionDTO(
+                            PyrisExtendedCourseDTO.of(fullCourse),
+                            learningMetricsService.getStudentCourseMetrics(session.getUser().getId(), courseId),
+                            competencyJol == null ? null : CompetencyJolDTO.of(competencyJol),
+                            pyrisDTOService.toPyrisMessageDTOList(session.getMessages()),
+                            new PyrisUserDTO(session.getUser()),
+                            executionDto.settings(), // flatten the execution dto here
+                            executionDto.initialStages()
+                    );
+                },
+                stages -> irisChatWebsocketService.sendStatusUpdate(session, stages)
+        );
+        // @formatter:on
     }
 
     /**
diff --git a/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/PyrisStatusUpdateService.java b/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/PyrisStatusUpdateService.java
index 759e62ca9e35..0966455b3533 100644
--- a/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/PyrisStatusUpdateService.java
+++ b/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/PyrisStatusUpdateService.java
@@ -1,17 +1,22 @@
 package de.tum.in.www1.artemis.service.connectors.pyris;
 
+import java.util.List;
+
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.context.annotation.Profile;
 import org.springframework.stereotype.Service;
 
 import de.tum.in.www1.artemis.service.connectors.pyris.dto.chat.PyrisChatStatusUpdateDTO;
+import de.tum.in.www1.artemis.service.connectors.pyris.dto.competency.PyrisCompetencyStatusUpdateDTO;
 import de.tum.in.www1.artemis.service.connectors.pyris.dto.lectureingestionwebhook.PyrisLectureIngestionStatusUpdateDTO;
 import de.tum.in.www1.artemis.service.connectors.pyris.dto.status.PyrisStageDTO;
 import de.tum.in.www1.artemis.service.connectors.pyris.dto.status.PyrisStageState;
+import de.tum.in.www1.artemis.service.connectors.pyris.job.CompetencyExtractionJob;
 import de.tum.in.www1.artemis.service.connectors.pyris.job.CourseChatJob;
 import de.tum.in.www1.artemis.service.connectors.pyris.job.ExerciseChatJob;
 import de.tum.in.www1.artemis.service.connectors.pyris.job.IngestionWebhookJob;
+import de.tum.in.www1.artemis.service.iris.IrisCompetencyGenerationService;
 import de.tum.in.www1.artemis.service.iris.session.IrisCourseChatSessionService;
 import de.tum.in.www1.artemis.service.iris.session.IrisExerciseChatSessionService;
 
@@ -25,13 +30,16 @@ public class PyrisStatusUpdateService {
 
     private final IrisCourseChatSessionService courseChatSessionService;
 
+    private final IrisCompetencyGenerationService competencyGenerationService;
+
     private static final Logger log = LoggerFactory.getLogger(PyrisStatusUpdateService.class);
 
     public PyrisStatusUpdateService(PyrisJobService pyrisJobService, IrisExerciseChatSessionService irisExerciseChatSessionService,
-            IrisCourseChatSessionService courseChatSessionService) {
+            IrisCourseChatSessionService courseChatSessionService, IrisCompetencyGenerationService competencyGenerationService) {
         this.pyrisJobService = pyrisJobService;
         this.irisExerciseChatSessionService = irisExerciseChatSessionService;
         this.courseChatSessionService = courseChatSessionService;
+        this.competencyGenerationService = competencyGenerationService;
     }
 
     /**
@@ -43,7 +51,7 @@ public PyrisStatusUpdateService(PyrisJobService pyrisJobService, IrisExerciseCha
     public void handleStatusUpdate(ExerciseChatJob job, PyrisChatStatusUpdateDTO statusUpdate) {
         irisExerciseChatSessionService.handleStatusUpdate(job, statusUpdate);
 
-        removeJobIfTerminated(statusUpdate, job.jobId());
+        removeJobIfTerminated(statusUpdate.stages(), job.jobId());
     }
 
     /**
@@ -56,7 +64,20 @@ public void handleStatusUpdate(ExerciseChatJob job, PyrisChatStatusUpdateDTO sta
     public void handleStatusUpdate(CourseChatJob job, PyrisChatStatusUpdateDTO statusUpdate) {
         courseChatSessionService.handleStatusUpdate(job, statusUpdate);
 
-        removeJobIfTerminated(statusUpdate, job.jobId());
+        removeJobIfTerminated(statusUpdate.stages(), job.jobId());
+    }
+
+    /**
+     * Handles the status update of a competency extraction job and forwards it to
+     * {@link de.tum.in.www1.artemis.service.iris.IrisCompetencyGenerationService#handleStatusUpdate(String, long, PyrisCompetencyStatusUpdateDTO)}
+     *
+     * @param job          the job that is updated
+     * @param statusUpdate the status update
+     */
+    public void handleStatusUpdate(CompetencyExtractionJob job, PyrisCompetencyStatusUpdateDTO statusUpdate) {
+        competencyGenerationService.handleStatusUpdate(job.userLogin(), job.courseId(), statusUpdate);
+
+        removeJobIfTerminated(statusUpdate.stages(), job.jobId());
     }
 
     /**
@@ -66,11 +87,11 @@ public void handleStatusUpdate(CourseChatJob job, PyrisChatStatusUpdateDTO statu
      *
      * @see PyrisStageState#isTerminal()
      *
-     * @param statusUpdate the status update
-     * @param job          the job to remove
+     * @param stages the stages of the status update
+     * @param job    the job to remove
      */
-    private void removeJobIfTerminated(PyrisChatStatusUpdateDTO statusUpdate, String job) {
-        var isDone = statusUpdate.stages().stream().map(PyrisStageDTO::state).allMatch(PyrisStageState::isTerminal);
+    private void removeJobIfTerminated(List<PyrisStageDTO> stages, String job) {
+        var isDone = stages.stream().map(PyrisStageDTO::state).allMatch(PyrisStageState::isTerminal);
         if (isDone) {
             pyrisJobService.removeJob(job);
         }
@@ -85,10 +106,6 @@ private void removeJobIfTerminated(PyrisChatStatusUpdateDTO statusUpdate, String
      */
     public void handleStatusUpdate(IngestionWebhookJob job, PyrisLectureIngestionStatusUpdateDTO statusUpdate) {
         statusUpdate.stages().forEach(stage -> log.info(stage.name() + ":" + stage.message()));
-        boolean isDone = statusUpdate.stages().stream().map(PyrisStageDTO::state)
-                .allMatch(state -> state == PyrisStageState.DONE || state == PyrisStageState.ERROR || state == PyrisStageState.SKIPPED);
-        if (isDone) {
-            pyrisJobService.removeJob(job.jobId());
-        }
+        removeJobIfTerminated(statusUpdate.stages(), job.jobId());
     }
 }
diff --git a/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/dto/PyrisPipelineExecutionDTO.java b/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/dto/PyrisPipelineExecutionDTO.java
new file mode 100644
index 000000000000..86c5f01c0479
--- /dev/null
+++ b/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/dto/PyrisPipelineExecutionDTO.java
@@ -0,0 +1,11 @@
+package de.tum.in.www1.artemis.service.connectors.pyris.dto;
+
+import java.util.List;
+
+import com.fasterxml.jackson.annotation.JsonInclude;
+
+import de.tum.in.www1.artemis.service.connectors.pyris.dto.status.PyrisStageDTO;
+
+@JsonInclude(JsonInclude.Include.NON_EMPTY)
+public record PyrisPipelineExecutionDTO(PyrisPipelineExecutionSettingsDTO settings, List<PyrisStageDTO> initialStages) {
+}
diff --git a/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/dto/competency/PyrisCompetencyExtractionInputDTO.java b/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/dto/competency/PyrisCompetencyExtractionInputDTO.java
new file mode 100644
index 000000000000..504fe8aa92fa
--- /dev/null
+++ b/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/dto/competency/PyrisCompetencyExtractionInputDTO.java
@@ -0,0 +1,7 @@
+package de.tum.in.www1.artemis.service.connectors.pyris.dto.competency;
+
+import com.fasterxml.jackson.annotation.JsonInclude;
+
+@JsonInclude(JsonInclude.Include.NON_EMPTY)
+public record PyrisCompetencyExtractionInputDTO(String courseDescription, PyrisCompetencyRecommendationDTO[] currentCompetencies) {
+}
diff --git a/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/dto/competency/PyrisCompetencyExtractionPipelineExecutionDTO.java b/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/dto/competency/PyrisCompetencyExtractionPipelineExecutionDTO.java
new file mode 100644
index 000000000000..64979fa9125d
--- /dev/null
+++ b/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/dto/competency/PyrisCompetencyExtractionPipelineExecutionDTO.java
@@ -0,0 +1,20 @@
+package de.tum.in.www1.artemis.service.connectors.pyris.dto.competency;
+
+import com.fasterxml.jackson.annotation.JsonInclude;
+
+import de.tum.in.www1.artemis.domain.competency.CompetencyTaxonomy;
+import de.tum.in.www1.artemis.service.connectors.pyris.dto.PyrisPipelineExecutionDTO;
+
+/**
+ * DTO to execute the Iris competency extraction pipeline on Pyris
+ *
+ * @param execution           The pipeline execution details
+ * @param courseDescription   The description of the course
+ * @param currentCompetencies The current competencies of the course (to avoid re-extraction)
+ * @param taxonomyOptions     The taxonomy options to use
+ * @param maxN                The maximum number of competencies to extract
+ */
+@JsonInclude(JsonInclude.Include.NON_EMPTY)
+public record PyrisCompetencyExtractionPipelineExecutionDTO(PyrisPipelineExecutionDTO execution, String courseDescription, PyrisCompetencyRecommendationDTO[] currentCompetencies,
+        CompetencyTaxonomy[] taxonomyOptions, int maxN) {
+}
diff --git a/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/dto/competency/PyrisCompetencyRecommendationDTO.java b/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/dto/competency/PyrisCompetencyRecommendationDTO.java
new file mode 100644
index 000000000000..897b9b7ca3ce
--- /dev/null
+++ b/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/dto/competency/PyrisCompetencyRecommendationDTO.java
@@ -0,0 +1,17 @@
+package de.tum.in.www1.artemis.service.connectors.pyris.dto.competency;
+
+import com.fasterxml.jackson.annotation.JsonInclude;
+
+import de.tum.in.www1.artemis.domain.competency.CompetencyTaxonomy;
+
+/**
+ * DTO for the Iris competency generation feature.
+ * A competency recommendation is just a title, description and taxonomy generated by Iris.
+ *
+ * @param title       The title of the competency
+ * @param description The description of the competency
+ * @param taxonomy    The taxonomy of the competency
+ */
+@JsonInclude(JsonInclude.Include.NON_EMPTY)
+public record PyrisCompetencyRecommendationDTO(String title, String description, CompetencyTaxonomy taxonomy) {
+}
diff --git a/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/dto/competency/PyrisCompetencyStatusUpdateDTO.java b/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/dto/competency/PyrisCompetencyStatusUpdateDTO.java
new file mode 100644
index 000000000000..967dfcd51906
--- /dev/null
+++ b/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/dto/competency/PyrisCompetencyStatusUpdateDTO.java
@@ -0,0 +1,19 @@
+package de.tum.in.www1.artemis.service.connectors.pyris.dto.competency;
+
+import java.util.List;
+
+import com.fasterxml.jackson.annotation.JsonInclude;
+
+import de.tum.in.www1.artemis.service.connectors.pyris.dto.status.PyrisStageDTO;
+
+/**
+ * DTO for the Iris competency generation feature.
+ * Pyris sends callback updates back to Artemis during generation of competencies,
+ * which are then forwarded to the user via Websockets.
+ *
+ * @param stages List of stages of the generation process
+ * @param result List of competencies recommendations that have been generated so far
+ */
+@JsonInclude(JsonInclude.Include.NON_EMPTY)
+public record PyrisCompetencyStatusUpdateDTO(List<PyrisStageDTO> stages, List<PyrisCompetencyRecommendationDTO> result) {
+}
diff --git a/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/dto/status/PyrisStageDTO.java b/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/dto/status/PyrisStageDTO.java
index 39728eceb4a1..3bc3b2f9758a 100644
--- a/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/dto/status/PyrisStageDTO.java
+++ b/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/dto/status/PyrisStageDTO.java
@@ -4,4 +4,25 @@
 
 @JsonInclude(JsonInclude.Include.NON_EMPTY)
 public record PyrisStageDTO(String name, int weight, PyrisStageState state, String message) {
+
+    public PyrisStageDTO notStarted() {
+        return new PyrisStageDTO(name, weight, PyrisStageState.NOT_STARTED, message);
+    }
+
+    public PyrisStageDTO inProgress() {
+        return new PyrisStageDTO(name, weight, PyrisStageState.IN_PROGRESS, message);
+    }
+
+    public PyrisStageDTO error(String message) {
+        return new PyrisStageDTO(name, weight, PyrisStageState.ERROR, message);
+    }
+
+    public PyrisStageDTO done() {
+        return new PyrisStageDTO(name, weight, PyrisStageState.DONE, message);
+    }
+
+    public PyrisStageDTO with(PyrisStageState state, String message) {
+        return new PyrisStageDTO(name, weight, state, message);
+    }
+
 }
diff --git a/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/dto/status/PyrisStageState.java b/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/dto/status/PyrisStageState.java
index 10648687f7f2..0f2ace2f7e40 100644
--- a/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/dto/status/PyrisStageState.java
+++ b/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/dto/status/PyrisStageState.java
@@ -5,15 +5,9 @@
 @JsonInclude(JsonInclude.Include.NON_EMPTY)
 public enum PyrisStageState {
 
-    NOT_STARTED(false), IN_PROGRESS(false), DONE(true), SKIPPED(true), ERROR(true);
-
-    private final boolean isTerminal;
-
-    PyrisStageState(boolean isTerminal) {
-        this.isTerminal = isTerminal;
-    }
+    NOT_STARTED, IN_PROGRESS, DONE, SKIPPED, ERROR;
 
     public boolean isTerminal() {
-        return isTerminal;
+        return this == DONE || this == SKIPPED || this == ERROR;
     }
 }
diff --git a/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/job/CompetencyExtractionJob.java b/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/job/CompetencyExtractionJob.java
new file mode 100644
index 000000000000..2a76f5a3b072
--- /dev/null
+++ b/src/main/java/de/tum/in/www1/artemis/service/connectors/pyris/job/CompetencyExtractionJob.java
@@ -0,0 +1,22 @@
+package de.tum.in.www1.artemis.service.connectors.pyris.job;
+
+import com.fasterxml.jackson.annotation.JsonInclude;
+
+import de.tum.in.www1.artemis.domain.Course;
+
+/**
+ * A pyris job that extracts competencies from a course description.
+ *
+ * @param jobId     the job id
+ * @param courseId  the course in which the competencies are being extracted
+ * @param userLogin the user login of the user who started the job
+ */
+@JsonInclude(JsonInclude.Include.NON_EMPTY)
+public record CompetencyExtractionJob(String jobId, long courseId, String userLogin) implements PyrisJob {
+
+    @Override
+    public boolean canAccess(Course course) {
+        return course.getId().equals(courseId);
+    }
+
+}
diff --git a/src/main/java/de/tum/in/www1/artemis/service/iris/IrisCompetencyGenerationService.java b/src/main/java/de/tum/in/www1/artemis/service/iris/IrisCompetencyGenerationService.java
new file mode 100644
index 000000000000..07be63259336
--- /dev/null
+++ b/src/main/java/de/tum/in/www1/artemis/service/iris/IrisCompetencyGenerationService.java
@@ -0,0 +1,71 @@
+package de.tum.in.www1.artemis.service.iris;
+
+import org.springframework.context.annotation.Profile;
+import org.springframework.stereotype.Service;
+
+import de.tum.in.www1.artemis.domain.Course;
+import de.tum.in.www1.artemis.domain.User;
+import de.tum.in.www1.artemis.domain.competency.CompetencyTaxonomy;
+import de.tum.in.www1.artemis.service.connectors.pyris.PyrisJobService;
+import de.tum.in.www1.artemis.service.connectors.pyris.PyrisPipelineService;
+import de.tum.in.www1.artemis.service.connectors.pyris.dto.competency.PyrisCompetencyExtractionPipelineExecutionDTO;
+import de.tum.in.www1.artemis.service.connectors.pyris.dto.competency.PyrisCompetencyRecommendationDTO;
+import de.tum.in.www1.artemis.service.connectors.pyris.dto.competency.PyrisCompetencyStatusUpdateDTO;
+import de.tum.in.www1.artemis.service.connectors.pyris.job.CompetencyExtractionJob;
+import de.tum.in.www1.artemis.service.iris.websocket.IrisWebsocketService;
+
+/**
+ * Service to handle the Competency generation subsytem of Iris.
+ */
+@Service
+@Profile("iris")
+public class IrisCompetencyGenerationService {
+
+    private final PyrisPipelineService pyrisPipelineService;
+
+    private final IrisWebsocketService websocketService;
+
+    private final PyrisJobService pyrisJobService;
+
+    public IrisCompetencyGenerationService(PyrisPipelineService pyrisPipelineService, IrisWebsocketService websocketService, PyrisJobService pyrisJobService) {
+        this.pyrisPipelineService = pyrisPipelineService;
+        this.websocketService = websocketService;
+        this.pyrisJobService = pyrisJobService;
+    }
+
+    /**
+     * Executes the competency extraction pipeline on Pyris for a given course, user and course description
+     *
+     * @param user                the user for which the pipeline should be executed
+     * @param course              the course for which the pipeline should be executed
+     * @param courseDescription   the description of the course
+     * @param currentCompetencies the current competencies of the course (to avoid re-extraction)
+     */
+    public void executeCompetencyExtractionPipeline(User user, Course course, String courseDescription, PyrisCompetencyRecommendationDTO[] currentCompetencies) {
+        // @formatter:off
+        pyrisPipelineService.executePipeline(
+                "competency-extraction",
+                "default",
+                pyrisJobService.createTokenForJob(token -> new CompetencyExtractionJob(token, course.getId(), user.getLogin())),
+                executionDto -> new PyrisCompetencyExtractionPipelineExecutionDTO(executionDto, courseDescription, currentCompetencies, CompetencyTaxonomy.values(), 5),
+                stages -> websocketService.send(user.getLogin(), websocketTopic(course.getId()), new PyrisCompetencyStatusUpdateDTO(stages, null))
+        );
+        // @formatter:on
+    }
+
+    /**
+     * Takes a status update from Pyris containing a new competency extraction result and sends it to the client via websocket
+     *
+     * @param userLogin    the login of the user
+     * @param courseId     the id of the course
+     * @param statusUpdate the status update containing the new competency recommendations
+     */
+    public void handleStatusUpdate(String userLogin, long courseId, PyrisCompetencyStatusUpdateDTO statusUpdate) {
+        websocketService.send(userLogin, websocketTopic(courseId), statusUpdate);
+    }
+
+    private static String websocketTopic(long courseId) {
+        return "competencies/" + courseId;
+    }
+
+}
diff --git a/src/main/java/de/tum/in/www1/artemis/service/iris/IrisSessionService.java b/src/main/java/de/tum/in/www1/artemis/service/iris/IrisSessionService.java
index dded30f4e42e..f455b13979fe 100644
--- a/src/main/java/de/tum/in/www1/artemis/service/iris/IrisSessionService.java
+++ b/src/main/java/de/tum/in/www1/artemis/service/iris/IrisSessionService.java
@@ -8,14 +8,12 @@
 
 import de.tum.in.www1.artemis.domain.User;
 import de.tum.in.www1.artemis.domain.iris.message.IrisMessage;
-import de.tum.in.www1.artemis.domain.iris.session.IrisCompetencyGenerationSession;
 import de.tum.in.www1.artemis.domain.iris.session.IrisCourseChatSession;
 import de.tum.in.www1.artemis.domain.iris.session.IrisExerciseChatSession;
 import de.tum.in.www1.artemis.domain.iris.session.IrisHestiaSession;
 import de.tum.in.www1.artemis.domain.iris.session.IrisSession;
 import de.tum.in.www1.artemis.repository.UserRepository;
 import de.tum.in.www1.artemis.service.iris.session.IrisChatBasedFeatureInterface;
-import de.tum.in.www1.artemis.service.iris.session.IrisCompetencyGenerationSessionService;
 import de.tum.in.www1.artemis.service.iris.session.IrisCourseChatSessionService;
 import de.tum.in.www1.artemis.service.iris.session.IrisExerciseChatSessionService;
 import de.tum.in.www1.artemis.service.iris.session.IrisHestiaSessionService;
@@ -38,16 +36,12 @@ public class IrisSessionService {
 
     private final IrisHestiaSessionService irisHestiaSessionService;
 
-    private final IrisCompetencyGenerationSessionService irisCompetencyGenerationSessionService;
-
     public IrisSessionService(UserRepository userRepository, IrisExerciseChatSessionService irisExerciseChatSessionService,
-            IrisCourseChatSessionService irisCourseChatSessionService, IrisHestiaSessionService irisHestiaSessionService,
-            IrisCompetencyGenerationSessionService irisCompetencyGenerationSessionService) {
+            IrisCourseChatSessionService irisCourseChatSessionService, IrisHestiaSessionService irisHestiaSessionService) {
         this.userRepository = userRepository;
         this.irisExerciseChatSessionService = irisExerciseChatSessionService;
         this.irisCourseChatSessionService = irisCourseChatSessionService;
         this.irisHestiaSessionService = irisHestiaSessionService;
-        this.irisCompetencyGenerationSessionService = irisCompetencyGenerationSessionService;
     }
 
     /**
@@ -107,7 +101,7 @@ public <S extends IrisSession> void requestMessageFromIris(S session) {
     public <S extends IrisSession> void sendOverWebsocket(IrisMessage message, S session) {
         var wrapper = getIrisSessionSubService(session);
         if (wrapper.irisSubFeatureInterface instanceof IrisChatBasedFeatureInterface<S> chatWrapper) {
-            chatWrapper.sendOverWebsocket(message);
+            chatWrapper.sendOverWebsocket(session, message);
         }
         else {
             throw new BadRequestException("Invalid Iris session type " + message.getSession().getClass().getSimpleName());
@@ -143,8 +137,6 @@ private <S extends IrisSession> IrisSubFeatureWrapper<S> getIrisSessionSubServic
             case IrisExerciseChatSession chatSession -> (IrisSubFeatureWrapper<S>) new IrisSubFeatureWrapper<>(irisExerciseChatSessionService, chatSession);
             case IrisCourseChatSession courseChatSession -> (IrisSubFeatureWrapper<S>) new IrisSubFeatureWrapper<>(irisCourseChatSessionService, courseChatSession);
             case IrisHestiaSession hestiaSession -> (IrisSubFeatureWrapper<S>) new IrisSubFeatureWrapper<>(irisHestiaSessionService, hestiaSession);
-            case IrisCompetencyGenerationSession irisCompetencyGenerationSession ->
-                (IrisSubFeatureWrapper<S>) new IrisSubFeatureWrapper<>(irisCompetencyGenerationSessionService, irisCompetencyGenerationSession);
             case null, default -> throw new BadRequestException("Unknown Iris session type " + session.getClass().getSimpleName());
         };
     }
diff --git a/src/main/java/de/tum/in/www1/artemis/service/iris/websocket/IrisWebsocketDTO.java b/src/main/java/de/tum/in/www1/artemis/service/iris/dto/IrisChatWebsocketDTO.java
similarity index 84%
rename from src/main/java/de/tum/in/www1/artemis/service/iris/websocket/IrisWebsocketDTO.java
rename to src/main/java/de/tum/in/www1/artemis/service/iris/dto/IrisChatWebsocketDTO.java
index 4c5067bde279..12fa282a3012 100644
--- a/src/main/java/de/tum/in/www1/artemis/service/iris/websocket/IrisWebsocketDTO.java
+++ b/src/main/java/de/tum/in/www1/artemis/service/iris/dto/IrisChatWebsocketDTO.java
@@ -1,4 +1,4 @@
-package de.tum.in.www1.artemis.service.iris.websocket;
+package de.tum.in.www1.artemis.service.iris.dto;
 
 import java.util.List;
 import java.util.Objects;
@@ -20,7 +20,7 @@
  * @param stages        the stages of the Pyris pipeline
  */
 @JsonInclude(JsonInclude.Include.NON_EMPTY)
-public record IrisWebsocketDTO(IrisWebsocketMessageType type, IrisMessage message, IrisRateLimitService.IrisRateLimitInformation rateLimitInfo, List<PyrisStageDTO> stages,
+public record IrisChatWebsocketDTO(IrisWebsocketMessageType type, IrisMessage message, IrisRateLimitService.IrisRateLimitInformation rateLimitInfo, List<PyrisStageDTO> stages,
         List<String> suggestions) {
 
     /**
@@ -31,7 +31,7 @@ public record IrisWebsocketDTO(IrisWebsocketMessageType type, IrisMessage messag
      * @param rateLimitInfo the rate limit information
      * @param stages        the stages of the Pyris pipeline
      */
-    public IrisWebsocketDTO(@Nullable IrisMessage message, IrisRateLimitService.IrisRateLimitInformation rateLimitInfo, List<PyrisStageDTO> stages, List<String> suggestions) {
+    public IrisChatWebsocketDTO(@Nullable IrisMessage message, IrisRateLimitService.IrisRateLimitInformation rateLimitInfo, List<PyrisStageDTO> stages, List<String> suggestions) {
         this(determineType(message), message, rateLimitInfo, stages, suggestions);
     }
 
@@ -62,7 +62,7 @@ public boolean equals(Object o) {
         if (o == null || getClass() != o.getClass()) {
             return false;
         }
-        IrisWebsocketDTO that = (IrisWebsocketDTO) o;
+        IrisChatWebsocketDTO that = (IrisChatWebsocketDTO) o;
         return type == that.type && Objects.equals(message, that.message) && Objects.equals(rateLimitInfo, that.rateLimitInfo) && Objects.equals(stages, that.stages);
     }
 
diff --git a/src/main/java/de/tum/in/www1/artemis/service/iris/dto/IrisCombinedChatSubSettingsDTO.java b/src/main/java/de/tum/in/www1/artemis/service/iris/dto/IrisCombinedChatSubSettingsDTO.java
index 2bef37bda870..c98fdb1663a0 100644
--- a/src/main/java/de/tum/in/www1/artemis/service/iris/dto/IrisCombinedChatSubSettingsDTO.java
+++ b/src/main/java/de/tum/in/www1/artemis/service/iris/dto/IrisCombinedChatSubSettingsDTO.java
@@ -10,6 +10,6 @@
 
 @JsonInclude(JsonInclude.Include.NON_EMPTY)
 public record IrisCombinedChatSubSettingsDTO(boolean enabled, Integer rateLimit, Integer rateLimitTimeframeHours, @Nullable Set<String> allowedModels,
-        @Nullable String preferredModel, @Nullable IrisTemplate template) implements IrisCombinedSubSettingsInterface {
+        @Nullable String preferredModel, @Nullable IrisTemplate template) {
 
 }
diff --git a/src/main/java/de/tum/in/www1/artemis/service/iris/dto/IrisCombinedCompetencyGenerationSubSettingsDTO.java b/src/main/java/de/tum/in/www1/artemis/service/iris/dto/IrisCombinedCompetencyGenerationSubSettingsDTO.java
index 7e2e399e530e..e924be92e773 100644
--- a/src/main/java/de/tum/in/www1/artemis/service/iris/dto/IrisCombinedCompetencyGenerationSubSettingsDTO.java
+++ b/src/main/java/de/tum/in/www1/artemis/service/iris/dto/IrisCombinedCompetencyGenerationSubSettingsDTO.java
@@ -9,7 +9,6 @@
 import de.tum.in.www1.artemis.domain.iris.IrisTemplate;
 
 @JsonInclude(JsonInclude.Include.NON_EMPTY)
-public record IrisCombinedCompetencyGenerationSubSettingsDTO(boolean enabled, @Nullable Set<String> allowedModels, @Nullable String preferredModel, @Nullable IrisTemplate template)
-        implements IrisCombinedSubSettingsInterface {
-
+public record IrisCombinedCompetencyGenerationSubSettingsDTO(boolean enabled, @Nullable Set<String> allowedModels, @Nullable String preferredModel,
+        @Nullable IrisTemplate template) {
 }
diff --git a/src/main/java/de/tum/in/www1/artemis/service/iris/dto/IrisCombinedHestiaSubSettingsDTO.java b/src/main/java/de/tum/in/www1/artemis/service/iris/dto/IrisCombinedHestiaSubSettingsDTO.java
index 47861b16ebbb..315fb572194c 100644
--- a/src/main/java/de/tum/in/www1/artemis/service/iris/dto/IrisCombinedHestiaSubSettingsDTO.java
+++ b/src/main/java/de/tum/in/www1/artemis/service/iris/dto/IrisCombinedHestiaSubSettingsDTO.java
@@ -9,6 +9,5 @@
 import de.tum.in.www1.artemis.domain.iris.IrisTemplate;
 
 @JsonInclude(JsonInclude.Include.NON_EMPTY)
-public record IrisCombinedHestiaSubSettingsDTO(boolean enabled, @Nullable Set<String> allowedModels, @Nullable String preferredModel, @Nullable IrisTemplate template)
-        implements IrisCombinedSubSettingsInterface {
+public record IrisCombinedHestiaSubSettingsDTO(boolean enabled, @Nullable Set<String> allowedModels, @Nullable String preferredModel, @Nullable IrisTemplate template) {
 }
diff --git a/src/main/java/de/tum/in/www1/artemis/service/iris/dto/IrisCombinedSubSettingsInterface.java b/src/main/java/de/tum/in/www1/artemis/service/iris/dto/IrisCombinedSubSettingsInterface.java
deleted file mode 100644
index 79d23120b4fc..000000000000
--- a/src/main/java/de/tum/in/www1/artemis/service/iris/dto/IrisCombinedSubSettingsInterface.java
+++ /dev/null
@@ -1,16 +0,0 @@
-package de.tum.in.www1.artemis.service.iris.dto;
-
-import java.util.Set;
-
-import jakarta.annotation.Nullable;
-
-public interface IrisCombinedSubSettingsInterface {
-
-    boolean enabled();
-
-    @Nullable
-    Set<String> allowedModels();
-
-    @Nullable
-    String preferredModel();
-}
diff --git a/src/main/java/de/tum/in/www1/artemis/service/iris/session/IrisChatBasedFeatureInterface.java b/src/main/java/de/tum/in/www1/artemis/service/iris/session/IrisChatBasedFeatureInterface.java
index db345e973fdb..2001cb7077b8 100644
--- a/src/main/java/de/tum/in/www1/artemis/service/iris/session/IrisChatBasedFeatureInterface.java
+++ b/src/main/java/de/tum/in/www1/artemis/service/iris/session/IrisChatBasedFeatureInterface.java
@@ -8,9 +8,10 @@ public interface IrisChatBasedFeatureInterface<S extends IrisSession> extends Ir
     /**
      * Sends a message over the websocket to a specific user
      *
+     * @param session that the message belongs to
      * @param message that should be sent over the websocket
      */
-    void sendOverWebsocket(IrisMessage message);
+    void sendOverWebsocket(S session, IrisMessage message);
 
     /**
      * Sends a request to Iris to get a message for the given session.
diff --git a/src/main/java/de/tum/in/www1/artemis/service/iris/session/IrisCompetencyGenerationSessionService.java b/src/main/java/de/tum/in/www1/artemis/service/iris/session/IrisCompetencyGenerationSessionService.java
deleted file mode 100644
index d8ec1f901123..000000000000
--- a/src/main/java/de/tum/in/www1/artemis/service/iris/session/IrisCompetencyGenerationSessionService.java
+++ /dev/null
@@ -1,154 +0,0 @@
-package de.tum.in.www1.artemis.service.iris.session;
-
-import java.time.ZonedDateTime;
-import java.util.ArrayList;
-import java.util.List;
-
-import org.slf4j.Logger;
-import org.slf4j.LoggerFactory;
-import org.springframework.context.annotation.Profile;
-import org.springframework.stereotype.Service;
-
-import com.fasterxml.jackson.annotation.JsonInclude;
-import com.fasterxml.jackson.databind.JsonNode;
-
-import de.tum.in.www1.artemis.domain.Course;
-import de.tum.in.www1.artemis.domain.User;
-import de.tum.in.www1.artemis.domain.competency.Competency;
-import de.tum.in.www1.artemis.domain.competency.CompetencyTaxonomy;
-import de.tum.in.www1.artemis.domain.competency.CourseCompetency;
-import de.tum.in.www1.artemis.domain.iris.message.IrisMessage;
-import de.tum.in.www1.artemis.domain.iris.message.IrisMessageSender;
-import de.tum.in.www1.artemis.domain.iris.message.IrisTextMessageContent;
-import de.tum.in.www1.artemis.domain.iris.session.IrisCompetencyGenerationSession;
-import de.tum.in.www1.artemis.domain.iris.settings.IrisSubSettingsType;
-import de.tum.in.www1.artemis.repository.iris.IrisCompetencyGenerationSessionRepository;
-import de.tum.in.www1.artemis.repository.iris.IrisMessageRepository;
-import de.tum.in.www1.artemis.repository.iris.IrisSessionRepository;
-import de.tum.in.www1.artemis.security.Role;
-import de.tum.in.www1.artemis.service.AuthorizationCheckService;
-import de.tum.in.www1.artemis.service.connectors.pyris.PyrisConnectorService;
-import de.tum.in.www1.artemis.service.iris.IrisMessageService;
-import de.tum.in.www1.artemis.service.iris.settings.IrisSettingsService;
-
-/**
- * Service to handle the Competency generation subsytem of Iris.
- */
-@Service
-@Profile("iris")
-public class IrisCompetencyGenerationSessionService implements IrisButtonBasedFeatureInterface<IrisCompetencyGenerationSession, List<CourseCompetency>> {
-
-    private static final Logger log = LoggerFactory.getLogger(IrisCompetencyGenerationSessionService.class);
-
-    private final PyrisConnectorService pyrisConnectorService;
-
-    private final IrisSettingsService irisSettingsService;
-
-    private final IrisSessionRepository irisSessionRepository;
-
-    private final AuthorizationCheckService authCheckService;
-
-    private final IrisCompetencyGenerationSessionRepository irisCompetencyGenerationSessionRepository;
-
-    private final IrisMessageService irisMessageService;
-
-    private final IrisMessageRepository irisMessageRepository;
-
-    public IrisCompetencyGenerationSessionService(PyrisConnectorService pyrisConnectorService, IrisSettingsService irisSettingsService, IrisSessionRepository irisSessionRepository,
-            AuthorizationCheckService authCheckService, IrisCompetencyGenerationSessionRepository irisCompetencyGenerationSessionRepository, IrisMessageService irisMessageService,
-            IrisMessageRepository irisMessageRepository) {
-        this.pyrisConnectorService = pyrisConnectorService;
-        this.irisSettingsService = irisSettingsService;
-        this.irisSessionRepository = irisSessionRepository;
-        this.authCheckService = authCheckService;
-        this.irisCompetencyGenerationSessionRepository = irisCompetencyGenerationSessionRepository;
-        this.irisMessageService = irisMessageService;
-        this.irisMessageRepository = irisMessageRepository;
-    }
-
-    /**
-     * Creates a new Iris session for the given course and user or gets an existing one from the last hour.
-     *
-     * @param course The course to create the session for
-     * @param user   The user to create the session for
-     * @return The Iris session for the course
-     */
-    public IrisCompetencyGenerationSession getOrCreateSession(Course course, User user) {
-        var existingSession = irisCompetencyGenerationSessionRepository.findFirstByCourseIdAndUserIdOrderByCreationDateDesc(course.getId(), user.getId());
-        // Return the newest session if there is one and it is not older than 1 hour
-        if (existingSession != null && existingSession.getCreationDate().plusHours(1).isAfter(ZonedDateTime.now())) {
-            checkHasAccessTo(user, existingSession);
-            checkIsFeatureActivatedFor(existingSession);
-            return existingSession;
-        }
-
-        var irisSession = new IrisCompetencyGenerationSession();
-        irisSession.setCourse(course);
-        irisSession.setUser(user);
-        checkHasAccessTo(user, irisSession);
-        checkIsFeatureActivatedFor(irisSession);
-        irisSession = irisSessionRepository.save(irisSession);
-        return irisSession;
-    }
-
-    /**
-     * Adds a user text message to a given IRIS session
-     *
-     * @param session the IRIS session
-     * @param message the message to add
-     */
-    public void addUserTextMessageToSession(IrisCompetencyGenerationSession session, String message) {
-        var userMessage = new IrisMessage();
-        userMessage.setSender(IrisMessageSender.USER);
-        userMessage.addContent(new IrisTextMessageContent(message));
-        irisMessageService.saveMessage(userMessage, session, IrisMessageSender.USER);
-    }
-
-    // @formatter:off
-    @JsonInclude(JsonInclude.Include.NON_EMPTY)
-    record CompetencyGenerationDTO(
-            String courseDescription,
-            CompetencyTaxonomy[] taxonomyOptions
-    ) {}
-    // @formatter:on
-
-    @Override
-    public List<CourseCompetency> executeRequest(IrisCompetencyGenerationSession session) {
-        // TODO: Re-add in a future PR. Remember to reenable the test cases!
-        return null;
-    }
-
-    @Override
-    public void checkHasAccessTo(User user, IrisCompetencyGenerationSession irisSession) {
-        authCheckService.checkHasAtLeastRoleInCourseElseThrow(Role.EDITOR, irisSession.getCourse(), user);
-    }
-
-    @Override
-    public void checkIsFeatureActivatedFor(IrisCompetencyGenerationSession irisSession) {
-        irisSettingsService.isEnabledForElseThrow(IrisSubSettingsType.COMPETENCY_GENERATION, irisSession.getCourse());
-    }
-
-    private List<Competency> toCompetencies(JsonNode content) {
-        List<Competency> competencies = new ArrayList<>();
-        for (JsonNode node : content.get("competencies")) {
-            try {
-                Competency competency = new Competency();
-                competency.setTitle(node.required("title").asText());
-
-                // skip competency if IRIS only replied with a title containing the special response "!done!"
-                if (node.get("description") == null && node.get("title").asText().equals("!done!")) {
-                    log.info("Received special response \"!done!\", skipping parsing of competency.");
-                    continue;
-                }
-                competency.setDescription(node.required("description").asText());
-                competency.setTaxonomy(CompetencyTaxonomy.valueOf(node.required("taxonomy").asText()));
-
-                competencies.add(competency);
-            }
-            catch (IllegalArgumentException e) {
-                log.error("Missing fields, could not parse Competency: " + node.toPrettyString(), e);
-            }
-        }
-        return competencies;
-    }
-}
diff --git a/src/main/java/de/tum/in/www1/artemis/service/iris/session/IrisCourseChatSessionService.java b/src/main/java/de/tum/in/www1/artemis/service/iris/session/IrisCourseChatSessionService.java
index 134e47b2abc4..bd5a4c25887b 100644
--- a/src/main/java/de/tum/in/www1/artemis/service/iris/session/IrisCourseChatSessionService.java
+++ b/src/main/java/de/tum/in/www1/artemis/service/iris/session/IrisCourseChatSessionService.java
@@ -97,8 +97,8 @@ public void checkIsFeatureActivatedFor(IrisCourseChatSession session) {
     }
 
     @Override
-    public void sendOverWebsocket(IrisMessage message) {
-        irisChatWebsocketService.sendMessage(message);
+    public void sendOverWebsocket(IrisCourseChatSession session, IrisMessage message) {
+        irisChatWebsocketService.sendMessage(session, message, null);
     }
 
     @Override
@@ -135,7 +135,7 @@ public void handleStatusUpdate(CourseChatJob job, PyrisChatStatusUpdateDTO statu
             var message = new IrisMessage();
             message.addContent(new IrisTextMessageContent(statusUpdate.result()));
             var savedMessage = irisMessageService.saveMessage(message, session, IrisMessageSender.LLM);
-            irisChatWebsocketService.sendMessage(savedMessage, statusUpdate.stages());
+            irisChatWebsocketService.sendMessage(session, savedMessage, statusUpdate.stages());
         }
         else {
             irisChatWebsocketService.sendStatusUpdate(session, statusUpdate.stages(), statusUpdate.suggestions());
diff --git a/src/main/java/de/tum/in/www1/artemis/service/iris/session/IrisExerciseChatSessionService.java b/src/main/java/de/tum/in/www1/artemis/service/iris/session/IrisExerciseChatSessionService.java
index 2916a34171ab..36508d8b0934 100644
--- a/src/main/java/de/tum/in/www1/artemis/service/iris/session/IrisExerciseChatSessionService.java
+++ b/src/main/java/de/tum/in/www1/artemis/service/iris/session/IrisExerciseChatSessionService.java
@@ -119,8 +119,8 @@ public void checkIsFeatureActivatedFor(IrisExerciseChatSession session) {
     }
 
     @Override
-    public void sendOverWebsocket(IrisMessage message) {
-        irisChatWebsocketService.sendMessage(message);
+    public void sendOverWebsocket(IrisExerciseChatSession session, IrisMessage message) {
+        irisChatWebsocketService.sendMessage(session, message, null);
     }
 
     @Override
@@ -170,7 +170,7 @@ public void handleStatusUpdate(ExerciseChatJob job, PyrisChatStatusUpdateDTO sta
             var message = new IrisMessage();
             message.addContent(new IrisTextMessageContent(statusUpdate.result()));
             var savedMessage = irisMessageService.saveMessage(message, session, IrisMessageSender.LLM);
-            irisChatWebsocketService.sendMessage(savedMessage, statusUpdate.stages());
+            irisChatWebsocketService.sendMessage(session, savedMessage, statusUpdate.stages());
         }
         else {
             irisChatWebsocketService.sendStatusUpdate(session, statusUpdate.stages(), statusUpdate.suggestions());
diff --git a/src/main/java/de/tum/in/www1/artemis/service/iris/websocket/IrisChatWebsocketService.java b/src/main/java/de/tum/in/www1/artemis/service/iris/websocket/IrisChatWebsocketService.java
index 253ba0df1e45..21bfc4449228 100644
--- a/src/main/java/de/tum/in/www1/artemis/service/iris/websocket/IrisChatWebsocketService.java
+++ b/src/main/java/de/tum/in/www1/artemis/service/iris/websocket/IrisChatWebsocketService.java
@@ -5,52 +5,42 @@
 import org.springframework.context.annotation.Profile;
 import org.springframework.stereotype.Service;
 
-import de.tum.in.www1.artemis.domain.User;
 import de.tum.in.www1.artemis.domain.iris.message.IrisMessage;
 import de.tum.in.www1.artemis.domain.iris.session.IrisChatSession;
-import de.tum.in.www1.artemis.domain.iris.session.IrisSession;
-import de.tum.in.www1.artemis.service.WebsocketMessagingService;
 import de.tum.in.www1.artemis.service.connectors.pyris.dto.status.PyrisStageDTO;
 import de.tum.in.www1.artemis.service.iris.IrisRateLimitService;
+import de.tum.in.www1.artemis.service.iris.dto.IrisChatWebsocketDTO;
 
 @Service
 @Profile("iris")
-public class IrisChatWebsocketService extends IrisWebsocketService {
+public class IrisChatWebsocketService {
+
+    private final IrisWebsocketService websocketService;
 
     private final IrisRateLimitService rateLimitService;
 
-    public IrisChatWebsocketService(WebsocketMessagingService websocketMessagingService, IrisRateLimitService rateLimitService) {
-        super(websocketMessagingService);
+    public IrisChatWebsocketService(IrisWebsocketService websocketService, IrisRateLimitService rateLimitService) {
+        this.websocketService = websocketService;
         this.rateLimitService = rateLimitService;
     }
 
-    private User checkSessionTypeAndGetUser(IrisSession irisSession) {
-        if (!(irisSession instanceof IrisChatSession chatSession)) {
-            throw new UnsupportedOperationException("Only IrisChatSessions are supported");
-        }
-        return chatSession.getUser();
-    }
-
     /**
-     * Sends a message over the websocket to a specific user
+     * Sends a message and/or a status update over the websocket to the user
+     * involved in the session. At least one of the message or the stages must be
+     * non-null, otherwise there is no need to send a message.
+     * This is currently used for both the exercise and course chat sessions, but
+     * this could be split up in the future.
      *
+     * @param session     the session to send the message to
      * @param irisMessage that should be sent over the websocket
      * @param stages      that should be sent over the websocket
      */
-    public void sendMessage(IrisMessage irisMessage, List<PyrisStageDTO> stages) {
-        var session = irisMessage.getSession();
-        var user = checkSessionTypeAndGetUser(session);
+    public void sendMessage(IrisChatSession session, IrisMessage irisMessage, List<PyrisStageDTO> stages) {
+        var user = session.getUser();
         var rateLimitInfo = rateLimitService.getRateLimitInformation(user);
-        super.send(user, session.getId(), new IrisWebsocketDTO(irisMessage, rateLimitInfo, stages, null));
-    }
-
-    /**
-     * Sends a message over the websocket to a specific user without stages and suggestions
-     *
-     * @param message that should be sent over the websocket
-     */
-    public void sendMessage(IrisMessage message) {
-        sendMessage(message, null);
+        var topic = "" + session.getId(); // Todo: add more specific topic
+        var payload = new IrisChatWebsocketDTO(irisMessage, rateLimitInfo, stages, null);
+        websocketService.send(user.getLogin(), topic, payload);
     }
 
     /**
@@ -59,7 +49,7 @@ public void sendMessage(IrisMessage message) {
      * @param session the session to send the status update to
      * @param stages  the stages to send
      */
-    public void sendStatusUpdate(IrisSession session, List<PyrisStageDTO> stages) {
+    public void sendStatusUpdate(IrisChatSession session, List<PyrisStageDTO> stages) {
         this.sendStatusUpdate(session, stages, null);
     }
 
@@ -70,8 +60,11 @@ public void sendStatusUpdate(IrisSession session, List<PyrisStageDTO> stages) {
      * @param stages      the stages to send
      * @param suggestions the suggestions to send
      */
-    public void sendStatusUpdate(IrisSession session, List<PyrisStageDTO> stages, List<String> suggestions) {
-        var user = checkSessionTypeAndGetUser(session);
-        super.send(user, session.getId(), new IrisWebsocketDTO(null, rateLimitService.getRateLimitInformation(user), stages, suggestions));
+    public void sendStatusUpdate(IrisChatSession session, List<PyrisStageDTO> stages, List<String> suggestions) {
+        var user = session.getUser();
+        var rateLimitInfo = rateLimitService.getRateLimitInformation(user);
+        var topic = "" + session.getId(); // Todo: add more specific topic
+        var payload = new IrisChatWebsocketDTO(null, rateLimitInfo, stages, suggestions);
+        websocketService.send(user.getLogin(), topic, payload);
     }
 }
diff --git a/src/main/java/de/tum/in/www1/artemis/service/iris/websocket/IrisWebsocketService.java b/src/main/java/de/tum/in/www1/artemis/service/iris/websocket/IrisWebsocketService.java
index 537d9f31ec76..3fcd949be7b8 100644
--- a/src/main/java/de/tum/in/www1/artemis/service/iris/websocket/IrisWebsocketService.java
+++ b/src/main/java/de/tum/in/www1/artemis/service/iris/websocket/IrisWebsocketService.java
@@ -1,19 +1,24 @@
 package de.tum.in.www1.artemis.service.iris.websocket;
 
+import java.util.concurrent.ExecutionException;
+
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
+import org.springframework.context.annotation.Profile;
+import org.springframework.stereotype.Service;
 
-import de.tum.in.www1.artemis.domain.User;
 import de.tum.in.www1.artemis.service.WebsocketMessagingService;
 
 /**
  * A service to send a message over the websocket to a specific user
  */
-public abstract class IrisWebsocketService {
+@Service
+@Profile("iris")
+public class IrisWebsocketService {
 
     private static final Logger log = LoggerFactory.getLogger(IrisWebsocketService.class);
 
-    private static final String IRIS_WEBSOCKET_TOPIC_PREFIX = "/topic/iris";
+    private static final String TOPIC_PREFIX = "/topic/iris/";
 
     private final WebsocketMessagingService websocketMessagingService;
 
@@ -21,10 +26,22 @@ public IrisWebsocketService(WebsocketMessagingService websocketMessagingService)
         this.websocketMessagingService = websocketMessagingService;
     }
 
-    protected void send(User user, Long sessionId, Object payload) {
-        String irisWebsocketTopic = String.format("%s/%s", IRIS_WEBSOCKET_TOPIC_PREFIX, sessionId);
-        log.debug("Sending message to user {} on topic {}: {}", user.getLogin(), irisWebsocketTopic, payload);
-        websocketMessagingService.sendMessageToUser(user.getLogin(), irisWebsocketTopic, payload);
+    /**
+     * Sends a message over the websocket to a specific user
+     *
+     * @param userLogin   the login of the user
+     * @param topicSuffix the suffix of the topic, which will be appended to "/topic/iris/"
+     * @param payload     the DTO to send, which will be serialized to JSON
+     */
+    public void send(String userLogin, String topicSuffix, Object payload) {
+        String topic = TOPIC_PREFIX + topicSuffix;
+        try {
+            websocketMessagingService.sendMessageToUser(userLogin, topic, payload).get();
+            log.debug("Sent message to Iris user {} on topic {}: {}", userLogin, topic, payload);
+        }
+        catch (InterruptedException | ExecutionException e) {
+            log.error("Error while sending message to Iris user {} on topic {}: {}", userLogin, topic, payload, e);
+        }
     }
 
 }
diff --git a/src/main/java/de/tum/in/www1/artemis/web/rest/competency/CourseCompetencyResource.java b/src/main/java/de/tum/in/www1/artemis/web/rest/competency/CourseCompetencyResource.java
index a3fdf0875c31..036b673d1674 100644
--- a/src/main/java/de/tum/in/www1/artemis/web/rest/competency/CourseCompetencyResource.java
+++ b/src/main/java/de/tum/in/www1/artemis/web/rest/competency/CourseCompetencyResource.java
@@ -46,9 +46,10 @@
 import de.tum.in.www1.artemis.service.competency.CompetencyProgressService;
 import de.tum.in.www1.artemis.service.competency.CompetencyRelationService;
 import de.tum.in.www1.artemis.service.competency.CourseCompetencyService;
+import de.tum.in.www1.artemis.service.connectors.pyris.dto.competency.PyrisCompetencyExtractionInputDTO;
 import de.tum.in.www1.artemis.service.feature.Feature;
 import de.tum.in.www1.artemis.service.feature.FeatureToggle;
-import de.tum.in.www1.artemis.service.iris.session.IrisCompetencyGenerationSessionService;
+import de.tum.in.www1.artemis.service.iris.IrisCompetencyGenerationService;
 import de.tum.in.www1.artemis.web.rest.dto.CourseCompetencyProgressDTO;
 import de.tum.in.www1.artemis.web.rest.dto.SearchResultPageDTO;
 import de.tum.in.www1.artemis.web.rest.dto.competency.CompetencyJolPairDTO;
@@ -80,7 +81,7 @@ public class CourseCompetencyResource {
 
     private final CompetencyRelationService competencyRelationService;
 
-    private final Optional<IrisCompetencyGenerationSessionService> irisCompetencyGenerationSessionService;
+    private final Optional<IrisCompetencyGenerationService> irisCompetencyGenerationService;
 
     private final CompetencyJolService competencyJolService;
 
@@ -91,7 +92,7 @@ public class CourseCompetencyResource {
     public CourseCompetencyResource(UserRepository userRepository, CourseCompetencyService courseCompetencyService, CourseCompetencyRepository courseCompetencyRepository,
             CourseRepository courseRepository, CompetencyProgressService competencyProgressService, CompetencyProgressRepository competencyProgressRepository,
             CompetencyRelationRepository competencyRelationRepository, CompetencyRelationService competencyRelationService,
-            Optional<IrisCompetencyGenerationSessionService> irisCompetencyGenerationSessionService, CompetencyJolService competencyJolService,
+            Optional<IrisCompetencyGenerationService> irisCompetencyGenerationService, CompetencyJolService competencyJolService,
             AuthorizationCheckService authorizationCheckService) {
         this.userRepository = userRepository;
         this.courseCompetencyService = courseCompetencyService;
@@ -101,7 +102,7 @@ public CourseCompetencyResource(UserRepository userRepository, CourseCompetencyS
         this.competencyProgressRepository = competencyProgressRepository;
         this.competencyRelationRepository = competencyRelationRepository;
         this.competencyRelationService = competencyRelationService;
-        this.irisCompetencyGenerationSessionService = irisCompetencyGenerationSessionService;
+        this.irisCompetencyGenerationService = irisCompetencyGenerationService;
         this.competencyJolService = competencyJolService;
         this.authorizationCheckService = authorizationCheckService;
     }
@@ -332,25 +333,25 @@ public ResponseEntity<Void> removeCompetencyRelation(@PathVariable long courseId
     }
 
     /**
-     * POST courses/:courseId/course-competencies/generate-from-description : Generates a list of course competencies from a given course description by using
-     * IRIS.
+     * POST courses/:courseId/course-competencies/:competencyId/competencies/generate-from-description
+     * Generates a list of competencies from a given course description with IRIS.
      *
-     * @param courseId          the id of the current course
-     * @param courseDescription the text description of the course
-     * @return the ResponseEntity with status 200 (OK) and body the generated competencies
+     * @param courseId the id of the current course
+     * @param input    the course description and current competencies
+     * @return the ResponseEntity with status 202 (Accepted)
      */
     @PostMapping("courses/{courseId}/course-competencies/generate-from-description")
     @EnforceAtLeastEditorInCourse
-    public ResponseEntity<List<CourseCompetency>> generateCompetenciesFromCourseDescription(@PathVariable Long courseId, @RequestBody String courseDescription) {
-        var irisService = irisCompetencyGenerationSessionService.orElseThrow();
+    public ResponseEntity<Void> generateCompetenciesFromCourseDescription(@PathVariable Long courseId, @RequestBody PyrisCompetencyExtractionInputDTO input) {
+        var competencyGenerationService = irisCompetencyGenerationService.orElseThrow();
         var user = userRepository.getUserWithGroupsAndAuthorities();
         var course = courseRepository.findByIdElseThrow(courseId);
 
-        var session = irisService.getOrCreateSession(course, user);
-        irisService.addUserTextMessageToSession(session, courseDescription);
-        var competencies = irisService.executeRequest(session);
+        // Start the Iris competency generation pipeline for the given course.
+        // The generated competencies will be sent async over the websocket on the topic /topic/iris/competencies/{courseId}
+        competencyGenerationService.executeCompetencyExtractionPipeline(user, course, input.courseDescription(), input.currentCompetencies());
 
-        return ResponseEntity.ok(competencies);
+        return ResponseEntity.accepted().build();
     }
 
     /**
diff --git a/src/main/java/de/tum/in/www1/artemis/web/rest/open/PublicPyrisStatusUpdateResource.java b/src/main/java/de/tum/in/www1/artemis/web/rest/open/PublicPyrisStatusUpdateResource.java
index d2bf76e78491..f843fb729484 100644
--- a/src/main/java/de/tum/in/www1/artemis/web/rest/open/PublicPyrisStatusUpdateResource.java
+++ b/src/main/java/de/tum/in/www1/artemis/web/rest/open/PublicPyrisStatusUpdateResource.java
@@ -16,7 +16,9 @@
 import de.tum.in.www1.artemis.service.connectors.pyris.PyrisJobService;
 import de.tum.in.www1.artemis.service.connectors.pyris.PyrisStatusUpdateService;
 import de.tum.in.www1.artemis.service.connectors.pyris.dto.chat.PyrisChatStatusUpdateDTO;
+import de.tum.in.www1.artemis.service.connectors.pyris.dto.competency.PyrisCompetencyStatusUpdateDTO;
 import de.tum.in.www1.artemis.service.connectors.pyris.dto.lectureingestionwebhook.PyrisLectureIngestionStatusUpdateDTO;
+import de.tum.in.www1.artemis.service.connectors.pyris.job.CompetencyExtractionJob;
 import de.tum.in.www1.artemis.service.connectors.pyris.job.CourseChatJob;
 import de.tum.in.www1.artemis.service.connectors.pyris.job.ExerciseChatJob;
 import de.tum.in.www1.artemis.service.connectors.pyris.job.IngestionWebhookJob;
@@ -27,7 +29,7 @@
 /**
  * REST controller for providing Pyris access to Artemis internal data and status updates.
  * All endpoints in this controller use custom token based authentication.
- * See {@link PyrisJobService#getAndAuthenticateJobFromHeaderElseThrow(HttpServletRequest)} for more information.
+ * See {@link PyrisJobService#getAndAuthenticateJobFromHeaderElseThrow(HttpServletRequest, Class)} for more information.
  */
 @RestController
 @Profile("iris")
@@ -58,15 +60,12 @@ public PublicPyrisStatusUpdateResource(PyrisJobService pyrisJobService, PyrisSta
     @PostMapping("pipelines/tutor-chat/runs/{runId}/status") // TODO: Rename this to 'exercise-chat' with next breaking Pyris version
     @EnforceNothing
     public ResponseEntity<Void> setStatusOfJob(@PathVariable String runId, @RequestBody PyrisChatStatusUpdateDTO statusUpdateDTO, HttpServletRequest request) {
-        var job = pyrisJobService.getAndAuthenticateJobFromHeaderElseThrow(request);
+        var job = pyrisJobService.getAndAuthenticateJobFromHeaderElseThrow(request, ExerciseChatJob.class);
         if (!Objects.equals(job.jobId(), runId)) {
             throw new ConflictException("Run ID in URL does not match run ID in request body", "Job", "runIdMismatch");
         }
-        if (!(job instanceof ExerciseChatJob exerciseChatJob)) {
-            throw new ConflictException("Run ID is not a exercise chat job", "Job", "invalidRunId");
-        }
 
-        pyrisStatusUpdateService.handleStatusUpdate(exerciseChatJob, statusUpdateDTO);
+        pyrisStatusUpdateService.handleStatusUpdate(job, statusUpdateDTO);
 
         return ResponseEntity.ok().build();
     }
@@ -86,15 +85,38 @@ public ResponseEntity<Void> setStatusOfJob(@PathVariable String runId, @RequestB
     @PostMapping("pipelines/course-chat/runs/{runId}/status")
     @EnforceNothing
     public ResponseEntity<Void> setStatusOfCourseChatJob(@PathVariable String runId, @RequestBody PyrisChatStatusUpdateDTO statusUpdateDTO, HttpServletRequest request) {
-        var job = pyrisJobService.getAndAuthenticateJobFromHeaderElseThrow(request);
+        var job = pyrisJobService.getAndAuthenticateJobFromHeaderElseThrow(request, CourseChatJob.class);
         if (!Objects.equals(job.jobId(), runId)) {
             throw new ConflictException("Run ID in URL does not match run ID in request body", "Job", "runIdMismatch");
         }
-        if (!(job instanceof CourseChatJob courseChatJob)) {
-            throw new ConflictException("Run ID is not a course chat job", "Job", "invalidRunId");
+
+        pyrisStatusUpdateService.handleStatusUpdate(job, statusUpdateDTO);
+
+        return ResponseEntity.ok().build();
+    }
+
+    /**
+     * POST public/pyris/pipelines/competency-extraction/runs/:runId/status : Send the competencies extracted from a course description in a status update
+     * <p>
+     * Uses custom token based authentication.
+     *
+     * @param runId           the ID of the job
+     * @param statusUpdateDTO the status update
+     * @param request         the HTTP request
+     * @throws ConflictException        if the run ID in the URL does not match the run ID in the request body
+     * @throws AccessForbiddenException if the token is invalid
+     * @return a {@link ResponseEntity} with status {@code 200 (OK)}
+     */
+    @PostMapping("pipelines/competency-extraction/runs/{runId}/status")
+    @EnforceNothing
+    public ResponseEntity<Void> setCompetencyExtractionJobStatus(@PathVariable String runId, @RequestBody PyrisCompetencyStatusUpdateDTO statusUpdateDTO,
+            HttpServletRequest request) {
+        var job = pyrisJobService.getAndAuthenticateJobFromHeaderElseThrow(request, CompetencyExtractionJob.class);
+        if (!Objects.equals(job.jobId(), runId)) {
+            throw new ConflictException("Run ID in URL does not match run ID in request body", "Job", "runIdMismatch");
         }
 
-        pyrisStatusUpdateService.handleStatusUpdate(courseChatJob, statusUpdateDTO);
+        pyrisStatusUpdateService.handleStatusUpdate(job, statusUpdateDTO);
 
         return ResponseEntity.ok().build();
     }
@@ -112,7 +134,7 @@ public ResponseEntity<Void> setStatusOfCourseChatJob(@PathVariable String runId,
     @PostMapping("webhooks/ingestion/runs/{runId}/status")
     @EnforceNothing
     public ResponseEntity<Void> setStatusOfIngestionJob(@PathVariable String runId, @RequestBody PyrisLectureIngestionStatusUpdateDTO statusUpdateDTO, HttpServletRequest request) {
-        PyrisJob job = pyrisJobService.getAndAuthenticateJobFromHeaderElseThrow(request);
+        PyrisJob job = pyrisJobService.getAndAuthenticateJobFromHeaderElseThrow(request, PyrisJob.class);
         if (!job.jobId().equals(runId)) {
             throw new ConflictException("Run ID in URL does not match run ID in request body", "Job", "runIdMismatch");
         }
diff --git a/src/main/webapp/app/course/competencies/course-competency.service.ts b/src/main/webapp/app/course/competencies/course-competency.service.ts
index 65094f9d1a90..04403d48db93 100644
--- a/src/main/webapp/app/course/competencies/course-competency.service.ts
+++ b/src/main/webapp/app/course/competencies/course-competency.service.ts
@@ -20,6 +20,7 @@ import { ExerciseService } from 'app/exercises/shared/exercise/exercise.service'
 import { Prerequisite } from 'app/entities/prerequisite.model';
 import { LectureUnitService } from 'app/lecture/lecture-unit/lecture-unit-management/lectureUnit.service';
 import { AccountService } from 'app/core/auth/account.service';
+import { CompetencyRecommendation } from 'app/course/competencies/generate-competencies/generate-competencies.component';
 
 type EntityResponseType = HttpResponse<CourseCompetency>;
 type EntityArrayResponseType = HttpResponse<CourseCompetency[]>;
@@ -105,8 +106,14 @@ export class CourseCompetencyService {
         );
     }
 
-    generateCompetenciesFromCourseDescription(courseDescription: string, courseId: number): Observable<EntityArrayResponseType> {
-        return this.httpClient.post<CourseCompetency[]>(`${this.resourceURL}/courses/${courseId}/course-competencies/generate-from-description`, courseDescription, {
+    // triggers the generation of competencies from the given course description
+    // the generated competencies are returned asynchronously over the websocket on the topic /topic/iris/competencies/{courseId}
+    generateCompetenciesFromCourseDescription(courseId: number, courseDescription: string, currentCompetencies: CompetencyRecommendation[]): Observable<HttpResponse<void>> {
+        const params = {
+            courseDescription: courseDescription,
+            currentCompetencies: currentCompetencies,
+        };
+        return this.httpClient.post<void>(`${this.resourceURL}/courses/${courseId}/course-competencies/generate-from-description`, params, {
             observe: 'response',
         });
     }
diff --git a/src/main/webapp/app/course/competencies/generate-competencies/course-description-form.component.ts b/src/main/webapp/app/course/competencies/generate-competencies/course-description-form.component.ts
index b6cec6cdec66..a466747c670b 100644
--- a/src/main/webapp/app/course/competencies/generate-competencies/course-description-form.component.ts
+++ b/src/main/webapp/app/course/competencies/generate-competencies/course-description-form.component.ts
@@ -9,6 +9,7 @@ import { ButtonType } from 'app/shared/components/button.component';
 })
 export class CourseDescriptionFormComponent implements OnInit {
     @Input() isLoading = false;
+    @Input() placeholder = '';
     @Output() formSubmitted: EventEmitter<string> = new EventEmitter<string>();
 
     form: FormGroup<{ courseDescription: FormControl<string | null> }>;
@@ -26,10 +27,14 @@ export class CourseDescriptionFormComponent implements OnInit {
 
     ngOnInit(): void {
         this.form = this.formBuilder.group({
-            courseDescription: ['', [Validators.required, Validators.minLength(this.DESCRIPTION_MIN), Validators.maxLength(this.DESCRIPTION_MAX)]],
+            courseDescription: [this.placeholder, [Validators.required, Validators.minLength(this.DESCRIPTION_MIN), Validators.maxLength(this.DESCRIPTION_MAX)]],
         });
     }
 
+    setCourseDescription(description: string) {
+        this.form.controls.courseDescription.setValue(description);
+    }
+
     /**
      * Sends event to parent to handle submission
      */
diff --git a/src/main/webapp/app/course/competencies/generate-competencies/generate-competencies.component.ts b/src/main/webapp/app/course/competencies/generate-competencies/generate-competencies.component.ts
index 74c6d6891d3f..9501484fe9b5 100644
--- a/src/main/webapp/app/course/competencies/generate-competencies/generate-competencies.component.ts
+++ b/src/main/webapp/app/course/competencies/generate-competencies/generate-competencies.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostListener, OnInit } from '@angular/core';
+import { Component, HostListener, OnInit, ViewChild } from '@angular/core';
 import { CompetencyService } from 'app/course/competencies/competency.service';
 import { AlertService } from 'app/core/util/alert.service';
 import { onError } from 'app/shared/util/global.utils';
@@ -8,17 +8,21 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { faBan, faSave, faTimes } from '@fortawesome/free-solid-svg-icons';
 import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { ButtonType } from 'app/shared/components/button.component';
-import { finalize } from 'rxjs/operators';
 import { ComponentCanDeactivate } from 'app/shared/guard/can-deactivate.model';
 import { ConfirmAutofocusModalComponent } from 'app/shared/components/confirm-autofocus-modal.component';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { Observable, firstValueFrom, map } from 'rxjs';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { TranslateService } from '@ngx-translate/core';
 import { DocumentationType } from 'app/shared/components/documentation-button/documentation-button.component';
+import { JhiWebsocketService } from 'app/core/websocket/websocket.service';
+import { IrisStageDTO, IrisStageStateDTO } from 'app/entities/iris/iris-stage-dto.model';
 import { CourseCompetencyService } from 'app/course/competencies/course-competency.service';
 import { ArtemisSharedCommonModule } from 'app/shared/shared-common.module';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
 import { ArtemisCompetenciesModule } from 'app/course/competencies/competency.module';
+import { CourseManagementService } from 'app/course/manage/course-management.service';
+import { CourseDescriptionFormComponent } from 'app/course/competencies/generate-competencies/course-description-form.component';
 
 export type CompetencyFormControlsWithViewed = {
     competency: FormGroup<CompetencyFormControls>;
@@ -31,6 +35,17 @@ export type CompetencyFormControls = {
     taxonomy: FormControl<CompetencyTaxonomy | undefined>;
 };
 
+export type CompetencyRecommendation = {
+    title?: string;
+    description?: string;
+    taxonomy?: CompetencyTaxonomy;
+};
+
+type CompetencyGenerationStatusUpdate = {
+    stages: IrisStageDTO[];
+    result?: CompetencyRecommendation[];
+};
+
 @Component({
     selector: 'jhi-generate-competencies',
     templateUrl: './generate-competencies.component.html',
@@ -38,6 +53,8 @@ export type CompetencyFormControls = {
     imports: [ArtemisSharedCommonModule, ArtemisSharedComponentModule, ArtemisCompetenciesModule],
 })
 export class GenerateCompetenciesComponent implements OnInit, ComponentCanDeactivate {
+    @ViewChild(CourseDescriptionFormComponent) courseDescriptionForm: CourseDescriptionFormComponent;
+
     courseId: number;
     isLoading = false;
     submitted: boolean = false;
@@ -53,6 +70,7 @@ export class GenerateCompetenciesComponent implements OnInit, ComponentCanDeacti
     readonly documentationType: DocumentationType = 'GenerateCompetencies';
 
     constructor(
+        private courseManagementService: CourseManagementService,
         private courseCompetencyService: CourseCompetencyService,
         private competencyService: CompetencyService,
         private alertService: AlertService,
@@ -62,11 +80,15 @@ export class GenerateCompetenciesComponent implements OnInit, ComponentCanDeacti
         private modalService: NgbModal,
         private artemisTranslatePipe: ArtemisTranslatePipe,
         private translateService: TranslateService,
+        private jhiWebsocketService: JhiWebsocketService,
     ) {}
 
     ngOnInit(): void {
         this.activatedRoute.params.subscribe((params) => {
             this.courseId = Number(params['courseId']);
+            firstValueFrom(this.courseManagementService.find(this.courseId))
+                .then((course) => this.courseDescriptionForm.setCourseDescription(course.body?.description ?? ''))
+                .catch((res: HttpErrorResponse) => onError(this.alertService, res));
         });
     }
 
@@ -76,24 +98,61 @@ export class GenerateCompetenciesComponent implements OnInit, ComponentCanDeacti
      */
     getCompetencyRecommendations(courseDescription: string) {
         this.isLoading = true;
-        this.courseCompetencyService
-            .generateCompetenciesFromCourseDescription(courseDescription, this.courseId)
-            .pipe(
-                finalize(() => {
+        this.getCurrentCompetencies().subscribe((currentCompetencies) => {
+            this.courseCompetencyService.generateCompetenciesFromCourseDescription(this.courseId, courseDescription, currentCompetencies).subscribe({
+                next: () => {
+                    const websocketTopic = `/user/topic/iris/competencies/${this.courseId}`;
+                    this.jhiWebsocketService.subscribe(websocketTopic);
+                    this.jhiWebsocketService.receive(websocketTopic).subscribe({
+                        next: (update: CompetencyGenerationStatusUpdate) => {
+                            if (update.result) {
+                                for (const competency of update.result) {
+                                    this.addCompetencyToForm(competency);
+                                }
+                            }
+                            if (update.stages.every((stage) => stage.state === IrisStageStateDTO.DONE)) {
+                                this.alertService.success('artemisApp.competency.generate.courseDescription.success', { noOfCompetencies: update.result?.length });
+                            } else if (update.stages.some((stage) => stage.state === IrisStageStateDTO.ERROR)) {
+                                this.alertService.warning('artemisApp.competency.generate.courseDescription.warning');
+                            }
+                            if (update.stages.every((stage) => stage.state !== IrisStageStateDTO.NOT_STARTED && stage.state !== IrisStageStateDTO.IN_PROGRESS)) {
+                                this.jhiWebsocketService.unsubscribe(websocketTopic);
+                                this.isLoading = false;
+                            }
+                        },
+                        error: (res: HttpErrorResponse) => {
+                            onError(this.alertService, res);
+                            this.jhiWebsocketService.unsubscribe(websocketTopic);
+                            this.isLoading = false;
+                        },
+                    });
+                },
+                error: (res: HttpErrorResponse) => {
+                    onError(this.alertService, res);
                     this.isLoading = false;
-                }),
-            )
-            .subscribe({
-                next: (res) => {
-                    if (res.body?.length && res.body.length > 0) {
-                        this.alertService.success('artemisApp.competency.generate.courseDescription.success', { noOfCompetencies: res.body.length });
-                        res.body?.forEach((competency) => this.addCompetencyToForm(competency));
-                    } else {
-                        this.alertService.warning('artemisApp.competency.generate.courseDescription.warning');
-                    }
                 },
-                error: (res: HttpErrorResponse) => onError(this.alertService, res),
             });
+        });
+    }
+
+    /**
+     * Returns the title, description, and taxonomy of all current competencies saved in this course,
+     * and the competency recommendations that are currently in the form.
+     * @private
+     */
+    private getCurrentCompetencies(): Observable<CompetencyRecommendation[]> {
+        const currentCompetencySuggestions = this.competencies.getRawValue().map((c) => c.competency);
+        const courseCompetenciesObservable = this.courseCompetencyService.getAllForCourse(this.courseId);
+        if (courseCompetenciesObservable) {
+            return courseCompetenciesObservable.pipe(
+                map((competencies) => competencies.body?.map((c) => ({ title: c.title, description: c.description, taxonomy: c.taxonomy }))),
+                map((competencies) => currentCompetencySuggestions.concat(competencies ?? [])),
+            );
+        }
+        return new Observable<CompetencyRecommendation[]>((subscriber) => {
+            subscriber.next(currentCompetencySuggestions);
+            subscriber.complete();
+        });
     }
 
     /**
@@ -101,7 +160,7 @@ export class GenerateCompetenciesComponent implements OnInit, ComponentCanDeacti
      * @param competency
      * @private
      */
-    private addCompetencyToForm(competency: Competency) {
+    private addCompetencyToForm(competency: CompetencyRecommendation) {
         const formGroup: FormGroup<CompetencyFormControlsWithViewed> = this.formBuilder.nonNullable.group({
             competency: this.formBuilder.nonNullable.group({
                 title: [competency.title],
@@ -150,7 +209,7 @@ export class GenerateCompetenciesComponent implements OnInit, ComponentCanDeacti
      * Saves the competency recommendations as competencies and navigates back
      */
     save() {
-        const competenciesToSave = this.competencies.getRawValue().map((c) => c.competency as Competency);
+        const competenciesToSave = this.competencies.getRawValue().map((c) => Object.assign(new Competency(), c.competency));
         this.competencyService.createBulk(competenciesToSave, this.courseId).subscribe({
             next: () => {
                 this.submitted = true;
diff --git a/src/main/webapp/i18n/de/competency.json b/src/main/webapp/i18n/de/competency.json
index d6bdd4167ef2..f8c8630389e2 100644
--- a/src/main/webapp/i18n/de/competency.json
+++ b/src/main/webapp/i18n/de/competency.json
@@ -75,7 +75,7 @@
                 "saveModalTitle": "Speichern bestätigen",
                 "saveModalText": "Du hast nicht alle Empfehlungen angesehen, möchtest du trotzdem fortfahren?",
                 "errorWarning": "Speichern nicht möglich, weil fehlerhafte Kompetenzen vorliegen",
-                "loading": "Generiere Kompetenzvorschläge... Das kann eine Weile dauern.",
+                "loading": "Generiere Kompetenzvorschläge...",
                 "courseDescription": {
                     "title": "Kursbeschreibung eingeben",
                     "placeholder": "Bitte gib eine Kursbeschreibung ein",
@@ -86,7 +86,7 @@
                     "regenerateTooltip": "Zusätzliche Kompetenzvorschläge generieren",
                     "infoTooltip": "Gib eine Beschreibung ein, die sich auf den theoretischen/praktischen Inhalt und Lernziele des Kurses fokussiert. Iris generiert daraus Vorschläge für Kompetenzen, die du in deinen Kurs einfügen könntest.",
                     "success": "{{ noOfCompetencies }} Kompetenzvorschläge generiert.",
-                    "warning": "Keine Kompetenzvorschläge generiert. Versuche, eine ausführlichere Kursbeschreibung zu verwenden. Wenn das Problem weiterhin besteht, wende dich an die Administratoren."
+                    "warning": "Keine Kompetenzvorschläge generiert. Wenn das Problem weiterhin besteht, wende dich an die Administratoren."
                 }
             },
             "importAll": {
diff --git a/src/main/webapp/i18n/en/competency.json b/src/main/webapp/i18n/en/competency.json
index 908b59d271dd..54e4cd928076 100644
--- a/src/main/webapp/i18n/en/competency.json
+++ b/src/main/webapp/i18n/en/competency.json
@@ -75,7 +75,7 @@
                 "saveModalTitle": "Confirm Save",
                 "saveModalText": "You have not viewed all recommendations, do you still want to continue?",
                 "errorWarning": "You may not save because some competencies are invalid",
-                "loading": "Generating competency recommendations... This might take a while.",
+                "loading": "Generating competency recommendations...",
                 "courseDescription": {
                     "title": "Enter a Course Description",
                     "placeholder": "Please enter a course description",
@@ -86,7 +86,7 @@
                     "regenerateTooltip": "Generate additional Competency Recommendations",
                     "infoTooltip": "Enter a course description, focusing on the theoretical/practical content and learning objectives. Iris will then use it to generate recommendations for competencies you could add to your course.",
                     "success": "Generated {{ noOfCompetencies }} competency recommendations.",
-                    "warning": "No competency recommendations could be generated. Try using a more detailed course description. If the issue persists, contact the administrators."
+                    "warning": "No competency recommendations could be generated. If the issue persists, contact the administrators."
                 }
             },
             "importAll": {
diff --git a/src/test/java/de/tum/in/www1/artemis/connector/IrisRequestMockProvider.java b/src/test/java/de/tum/in/www1/artemis/connector/IrisRequestMockProvider.java
index 98f3ad4db3eb..3f248a9e598c 100644
--- a/src/test/java/de/tum/in/www1/artemis/connector/IrisRequestMockProvider.java
+++ b/src/test/java/de/tum/in/www1/artemis/connector/IrisRequestMockProvider.java
@@ -30,6 +30,7 @@
 import de.tum.in.www1.artemis.service.connectors.pyris.dto.PyrisHealthStatusDTO;
 import de.tum.in.www1.artemis.service.connectors.pyris.dto.PyrisModelDTO;
 import de.tum.in.www1.artemis.service.connectors.pyris.dto.chat.exercise.PyrisExerciseChatPipelineExecutionDTO;
+import de.tum.in.www1.artemis.service.connectors.pyris.dto.competency.PyrisCompetencyExtractionPipelineExecutionDTO;
 import de.tum.in.www1.artemis.service.connectors.pyris.dto.lectureingestionwebhook.PyrisWebhookLectureIngestionExecutionDTO;
 
 @Component
@@ -96,6 +97,20 @@ public void mockRunResponse(Consumer<PyrisExerciseChatPipelineExecutionDTO> resp
         // @formatter:on
     }
 
+    public void mockRunCompetencyExtractionResponseAnd(Consumer<PyrisCompetencyExtractionPipelineExecutionDTO> executionDTOConsumer) {
+        // @formatter:off
+        mockServer
+            .expect(ExpectedCount.once(), requestTo(pipelinesApiURL + "/competency-extraction/default/run"))
+            .andExpect(method(HttpMethod.POST))
+            .andRespond(request -> {
+                var mockRequest = (MockClientHttpRequest) request;
+                var dto = mapper.readValue(mockRequest.getBodyAsString(), PyrisCompetencyExtractionPipelineExecutionDTO.class);
+                executionDTOConsumer.accept(dto);
+                return MockRestResponseCreators.withRawStatus(HttpStatus.ACCEPTED.value()).createResponse(request);
+            });
+        // @formatter:on
+    }
+
     public void mockIngestionWebhookRunResponse(Consumer<PyrisWebhookLectureIngestionExecutionDTO> responseConsumer) {
         mockServer.expect(ExpectedCount.once(), requestTo(webhooksApiURL + "/lectures/fullIngestion")).andExpect(method(HttpMethod.POST)).andRespond(request -> {
             var mockRequest = (MockClientHttpRequest) request;
diff --git a/src/test/java/de/tum/in/www1/artemis/iris/AbstractIrisIntegrationTest.java b/src/test/java/de/tum/in/www1/artemis/iris/AbstractIrisIntegrationTest.java
index e7910012719e..dba05fa055cd 100644
--- a/src/test/java/de/tum/in/www1/artemis/iris/AbstractIrisIntegrationTest.java
+++ b/src/test/java/de/tum/in/www1/artemis/iris/AbstractIrisIntegrationTest.java
@@ -21,7 +21,6 @@
 import de.tum.in.www1.artemis.domain.Course;
 import de.tum.in.www1.artemis.domain.ProgrammingExercise;
 import de.tum.in.www1.artemis.domain.iris.IrisTemplate;
-import de.tum.in.www1.artemis.domain.iris.session.IrisExerciseChatSession;
 import de.tum.in.www1.artemis.domain.iris.settings.IrisSubSettings;
 import de.tum.in.www1.artemis.exercise.programming.ProgrammingExerciseUtilService;
 import de.tum.in.www1.artemis.repository.ProgrammingExerciseRepository;
@@ -111,15 +110,13 @@ protected IrisTemplate createDummyTemplate() {
     }
 
     /**
-     * Verify that the given messages were sent through the websocket for the given chat session,
-     * and that there were exactly `matchers.length` messages sent.
+     * Verify that the given messages were sent through the websocket for the given user and topic.
      *
-     * @param session  The chat session
-     * @param matchers Argument matchers which describe the messages that should have been sent
+     * @param userLogin   The user login
+     * @param topicSuffix The chat session
+     * @param matchers    Argument matchers which describe the messages that should have been sent
      */
-    protected void verifyWebsocketActivityWasExactly(IrisExerciseChatSession session, ArgumentMatcher<?>... matchers) {
-        var userLogin = session.getUser().getLogin();
-        var topicSuffix = "" + session.getId();
+    protected void verifyWebsocketActivityWasExactly(String userLogin, String topicSuffix, ArgumentMatcher<?>... matchers) {
         for (ArgumentMatcher<?> callDescriptor : matchers) {
             verifyMessageWasSentOverWebsocket(userLogin, topicSuffix, callDescriptor);
         }
@@ -133,7 +130,7 @@ protected void verifyWebsocketActivityWasExactly(IrisExerciseChatSession session
      * @param topicSuffix The topic suffix, e.g. "sessions/123"
      * @param matcher     Argument matcher which describes the message that should have been sent
      */
-    private void verifyMessageWasSentOverWebsocket(String userLogin, String topicSuffix, ArgumentMatcher<?> matcher) {
+    protected void verifyMessageWasSentOverWebsocket(String userLogin, String topicSuffix, ArgumentMatcher<?> matcher) {
         // @formatter:off
         verify(websocketMessagingService, timeout(TIMEOUT_MS).times(1))
                 .sendMessageToUser(
@@ -147,7 +144,7 @@ private void verifyMessageWasSentOverWebsocket(String userLogin, String topicSuf
     /**
      * Verify that exactly `numberOfCalls` messages were sent through the websocket for the given user and topic.
      */
-    private void verifyNumberOfCallsToWebsocket(String userLogin, String topicSuffix, int numberOfCalls) {
+    protected void verifyNumberOfCallsToWebsocket(String userLogin, String topicSuffix, int numberOfCalls) {
         // @formatter:off
         verify(websocketMessagingService, times(numberOfCalls))
                 .sendMessageToUser(
diff --git a/src/test/java/de/tum/in/www1/artemis/iris/IrisChatMessageIntegrationTest.java b/src/test/java/de/tum/in/www1/artemis/iris/IrisChatMessageIntegrationTest.java
index 13297c1f2cb1..aefc058fee7f 100644
--- a/src/test/java/de/tum/in/www1/artemis/iris/IrisChatMessageIntegrationTest.java
+++ b/src/test/java/de/tum/in/www1/artemis/iris/IrisChatMessageIntegrationTest.java
@@ -48,8 +48,8 @@
 import de.tum.in.www1.artemis.service.connectors.pyris.dto.status.PyrisStageDTO;
 import de.tum.in.www1.artemis.service.connectors.pyris.dto.status.PyrisStageState;
 import de.tum.in.www1.artemis.service.iris.IrisMessageService;
+import de.tum.in.www1.artemis.service.iris.dto.IrisChatWebsocketDTO;
 import de.tum.in.www1.artemis.service.iris.session.IrisExerciseChatSessionService;
-import de.tum.in.www1.artemis.service.iris.websocket.IrisWebsocketDTO;
 
 class IrisChatMessageIntegrationTest extends AbstractIrisIntegrationTest {
 
@@ -139,8 +139,8 @@ void sendOneMessage() throws Exception {
 
         await().until(pipelineDone::get);
 
-        verifyWebsocketActivityWasExactly(irisSession, messageDTO(messageToSend.getContent()), statusDTO(IN_PROGRESS, NOT_STARTED), statusDTO(DONE, IN_PROGRESS),
-                messageDTO("Hello World"));
+        verifyWebsocketActivityWasExactly(irisSession.getUser().getLogin(), String.valueOf(irisSession.getId()), messageDTO(messageToSend.getContent()),
+                statusDTO(IN_PROGRESS, NOT_STARTED), statusDTO(DONE, IN_PROGRESS), messageDTO("Hello World"));
     }
 
     @Test
@@ -164,8 +164,8 @@ void sendSuggestions() throws Exception {
 
         await().until(pipelineDone::get);
 
-        verifyWebsocketActivityWasExactly(irisSession, messageDTO(messageToSend.getContent()), statusDTO(IN_PROGRESS, NOT_STARTED), statusDTO(DONE, IN_PROGRESS),
-                suggestionsDTO("suggestion1", "suggestion2", "suggestion3"));
+        verifyWebsocketActivityWasExactly(irisSession.getUser().getLogin(), String.valueOf(irisSession.getId()), messageDTO(messageToSend.getContent()),
+                statusDTO(IN_PROGRESS, NOT_STARTED), statusDTO(DONE, IN_PROGRESS), suggestionsDTO("suggestion1", "suggestion2", "suggestion3"));
     }
 
     @Test
@@ -306,7 +306,8 @@ void resendMessage() throws Exception {
         var irisMessage = irisMessageService.saveMessage(messageToSend, irisSession, IrisMessageSender.USER);
         request.postWithoutResponseBody("/api/iris/sessions/" + irisSession.getId() + "/messages/" + irisMessage.getId() + "/resend", null, HttpStatus.OK);
         await().until(() -> irisSessionRepository.findByIdWithMessagesElseThrow(irisSession.getId()).getMessages().size() == 2);
-        verifyWebsocketActivityWasExactly(irisSession, statusDTO(IN_PROGRESS, NOT_STARTED), statusDTO(DONE, IN_PROGRESS), messageDTO("Hello World"));
+        verifyWebsocketActivityWasExactly(irisSession.getUser().getLogin(), String.valueOf(irisSession.getId()), statusDTO(IN_PROGRESS, NOT_STARTED), statusDTO(DONE, IN_PROGRESS),
+                messageDTO("Hello World"));
     }
 
     // User needs to be Admin to change settings
@@ -337,8 +338,8 @@ void sendMessageRateLimitReached() throws Exception {
             var irisMessage = irisMessageService.saveMessage(messageToSend2, irisSession, IrisMessageSender.USER);
             request.postWithoutResponseBody("/api/iris/sessions/" + irisSession.getId() + "/messages/" + irisMessage.getId() + "/resend", null, HttpStatus.TOO_MANY_REQUESTS);
 
-            verifyWebsocketActivityWasExactly(irisSession, messageDTO(messageToSend1.getContent()), statusDTO(IN_PROGRESS, NOT_STARTED), statusDTO(DONE, IN_PROGRESS),
-                    messageDTO("Hello World"));
+            verifyWebsocketActivityWasExactly(irisSession.getUser().getLogin(), String.valueOf(irisSession.getId()), messageDTO(messageToSend1.getContent()),
+                    statusDTO(IN_PROGRESS, NOT_STARTED), statusDTO(DONE, IN_PROGRESS), messageDTO("Hello World"));
         }
         finally {
             // Reset to not interfere with other tests
@@ -375,10 +376,10 @@ private ArgumentMatcher<Object> messageDTO(List<IrisMessageContent> content) {
 
             @Override
             public boolean matches(Object argument) {
-                if (!(argument instanceof IrisWebsocketDTO websocketDTO)) {
+                if (!(argument instanceof IrisChatWebsocketDTO websocketDTO)) {
                     return false;
                 }
-                if (websocketDTO.type() != IrisWebsocketDTO.IrisWebsocketMessageType.MESSAGE) {
+                if (websocketDTO.type() != IrisChatWebsocketDTO.IrisWebsocketMessageType.MESSAGE) {
                     return false;
                 }
                 return Objects.equals(websocketDTO.message().getContent().stream().map(IrisMessageContent::getContentAsString).toList(),
@@ -397,10 +398,10 @@ private ArgumentMatcher<Object> statusDTO(PyrisStageState... stageStates) {
 
             @Override
             public boolean matches(Object argument) {
-                if (!(argument instanceof IrisWebsocketDTO websocketDTO)) {
+                if (!(argument instanceof IrisChatWebsocketDTO websocketDTO)) {
                     return false;
                 }
-                if (websocketDTO.type() != IrisWebsocketDTO.IrisWebsocketMessageType.STATUS) {
+                if (websocketDTO.type() != IrisChatWebsocketDTO.IrisWebsocketMessageType.STATUS) {
                     return false;
                 }
                 if (websocketDTO.stages() == null) {
@@ -424,10 +425,10 @@ private ArgumentMatcher<Object> suggestionsDTO(String... suggestions) {
 
             @Override
             public boolean matches(Object argument) {
-                if (!(argument instanceof IrisWebsocketDTO websocketDTO)) {
+                if (!(argument instanceof IrisChatWebsocketDTO websocketDTO)) {
                     return false;
                 }
-                if (websocketDTO.type() != IrisWebsocketDTO.IrisWebsocketMessageType.STATUS) {
+                if (websocketDTO.type() != IrisChatWebsocketDTO.IrisWebsocketMessageType.STATUS) {
                     return false;
                 }
                 if (websocketDTO.suggestions() == null) {
diff --git a/src/test/java/de/tum/in/www1/artemis/iris/IrisChatWebsocketTest.java b/src/test/java/de/tum/in/www1/artemis/iris/IrisChatWebsocketTest.java
index 0a1bb785ab2d..4ce540f175c8 100644
--- a/src/test/java/de/tum/in/www1/artemis/iris/IrisChatWebsocketTest.java
+++ b/src/test/java/de/tum/in/www1/artemis/iris/IrisChatWebsocketTest.java
@@ -18,9 +18,9 @@
 import de.tum.in.www1.artemis.domain.iris.message.IrisTextMessageContent;
 import de.tum.in.www1.artemis.service.WebsocketMessagingService;
 import de.tum.in.www1.artemis.service.iris.IrisRateLimitService;
+import de.tum.in.www1.artemis.service.iris.dto.IrisChatWebsocketDTO;
 import de.tum.in.www1.artemis.service.iris.session.IrisExerciseChatSessionService;
 import de.tum.in.www1.artemis.service.iris.websocket.IrisChatWebsocketService;
-import de.tum.in.www1.artemis.service.iris.websocket.IrisWebsocketDTO;
 
 @ActiveProfiles("iris")
 class IrisChatWebsocketTest extends AbstractIrisIntegrationTest {
@@ -53,9 +53,9 @@ void sendMessage() {
         var message = irisSession.newMessage();
         message.addContent(createMockContent(), createMockContent());
         message.setMessageDifferentiator(101010);
-        irisChatWebsocketService.sendMessage(message, List.of());
+        irisChatWebsocketService.sendMessage(irisSession, message, List.of());
         verify(websocketMessagingService, times(1)).sendMessageToUser(eq(TEST_PREFIX + "student1"), eq("/topic/iris/" + irisSession.getId()),
-                eq(new IrisWebsocketDTO(message, new IrisRateLimitService.IrisRateLimitInformation(0, -1, 0), List.of(), List.of())));
+                eq(new IrisChatWebsocketDTO(message, new IrisRateLimitService.IrisRateLimitInformation(0, -1, 0), List.of(), List.of())));
     }
 
     private IrisTextMessageContent createMockContent() {
diff --git a/src/test/java/de/tum/in/www1/artemis/iris/IrisCompetencyGenerationIntegrationTest.java b/src/test/java/de/tum/in/www1/artemis/iris/IrisCompetencyGenerationIntegrationTest.java
index 613b35f5d08f..e67f52342bfc 100644
--- a/src/test/java/de/tum/in/www1/artemis/iris/IrisCompetencyGenerationIntegrationTest.java
+++ b/src/test/java/de/tum/in/www1/artemis/iris/IrisCompetencyGenerationIntegrationTest.java
@@ -1,24 +1,35 @@
 package de.tum.in.www1.artemis.iris;
 
 import static org.assertj.core.api.Assertions.assertThat;
-import static org.assertj.core.api.Assertions.fail;
+import static org.mockito.ArgumentMatchers.eq;
+import static org.mockito.Mockito.timeout;
+import static org.mockito.Mockito.verify;
 
 import java.util.List;
 
 import org.junit.jupiter.api.BeforeEach;
-import org.junit.jupiter.api.Disabled;
 import org.junit.jupiter.api.Test;
+import org.mockito.ArgumentCaptor;
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.http.HttpStatus;
 import org.springframework.security.test.context.support.WithMockUser;
 
 import de.tum.in.www1.artemis.domain.Course;
-import de.tum.in.www1.artemis.domain.competency.Competency;
 import de.tum.in.www1.artemis.domain.competency.CompetencyTaxonomy;
+import de.tum.in.www1.artemis.service.connectors.pyris.dto.competency.PyrisCompetencyExtractionInputDTO;
+import de.tum.in.www1.artemis.service.connectors.pyris.dto.competency.PyrisCompetencyRecommendationDTO;
+import de.tum.in.www1.artemis.service.connectors.pyris.dto.competency.PyrisCompetencyStatusUpdateDTO;
+import de.tum.in.www1.artemis.service.connectors.pyris.dto.status.PyrisStageDTO;
+import de.tum.in.www1.artemis.service.connectors.pyris.dto.status.PyrisStageState;
+import de.tum.in.www1.artemis.service.iris.IrisCompetencyGenerationService;
 
 class IrisCompetencyGenerationIntegrationTest extends AbstractIrisIntegrationTest {
 
     private static final String TEST_PREFIX = "iriscompetencyintegration";
 
+    @Autowired
+    IrisCompetencyGenerationService irisCompetencyGenerationService;
+
     private Course course;
 
     @BeforeEach
@@ -31,34 +42,43 @@ void initTestCase() {
     }
 
     @Test
-    @Disabled // TODO: Enable this test again!
     @WithMockUser(username = TEST_PREFIX + "editor1", roles = "EDITOR")
     void generateCompetencies_asEditor_shouldSucceed() throws Exception {
-        final String courseDescription = "Any description";
-        Competency expected = new Competency();
-        expected.setTitle("title");
-        expected.setDescription("description");
-        expected.setTaxonomy(CompetencyTaxonomy.ANALYZE);
-        // var competencyMap1 = Map.of("title", expected.getTitle(), "description", expected.getDescription(), "taxonomy", expected.getTaxonomy());
-        // // empty or malformed competencies are ignored
-        // var competencyMap2 = Map.of("title", "!done");
-        // var competencyMap3 = Map.of("malformed", "any content");
-        // var responseMap = Map.of("competencies", List.of(competencyMap1, competencyMap2, competencyMap3));
-
-        /*
-         * irisRequestMockProvider.mockRunResponse(dto -> {
-         * assertThat(dto.settings().authenticationToken()).isNotNull();
-         * pipelineDone.set(true);
-         * });
-         */
-        fail("This test is not yet implemented. Implement it and remove the fail call.");
-
-        List<Competency> competencies = request.postListWithResponseBody("/api/courses/" + course.getId() + "/course-competencies/generate-from-description", courseDescription,
-                Competency.class, HttpStatus.OK);
-        Competency actualCompetency = competencies.getFirst();
-
-        assertThat(competencies.size()).isEqualTo(1);
-        assertThat(actualCompetency).usingRecursiveComparison().comparingOnlyFields("title", "description", "taxonomy").isEqualTo(expected);
+        String courseDescription = "Cool course description";
+        var currentCompetencies = new PyrisCompetencyRecommendationDTO[] { new PyrisCompetencyRecommendationDTO("test title", "test description", CompetencyTaxonomy.UNDERSTAND), };
+
+        // Expect that a request is sent to Pyris having the following characteristics
+        irisRequestMockProvider.mockRunCompetencyExtractionResponseAnd(dto -> {
+            var token = dto.execution().settings().authenticationToken();
+            assertThat(token).isNotNull();
+            assertThat(dto.courseDescription()).contains(courseDescription);
+            assertThat(dto.currentCompetencies()).containsExactly(currentCompetencies);
+            assertThat(dto.taxonomyOptions()).isNotEmpty();
+            assertThat(dto.maxN()).isPositive();
+        });
+
+        // Send a request to the Artemis server as if the user had clicked the button in the UI
+        request.postWithoutResponseBody("/api/courses/" + course.getId() + "/course-competencies/generate-from-description",
+                new PyrisCompetencyExtractionInputDTO(courseDescription, currentCompetencies), HttpStatus.ACCEPTED);
+
+        PyrisCompetencyRecommendationDTO expected = new PyrisCompetencyRecommendationDTO("test title", "test description", CompetencyTaxonomy.UNDERSTAND);
+        List<PyrisCompetencyRecommendationDTO> recommendations = List.of(expected, expected, expected);
+        List<PyrisStageDTO> stages = List.of(new PyrisStageDTO("Generating Competencies", 10, PyrisStageState.DONE, null));
+
+        // In the real system, this would be triggered by Pyris via a REST call to the Artemis server
+        irisCompetencyGenerationService.handleStatusUpdate(TEST_PREFIX + "editor1", course.getId(), new PyrisCompetencyStatusUpdateDTO(stages, recommendations));
+
+        ArgumentCaptor<PyrisCompetencyStatusUpdateDTO> argumentCaptor = ArgumentCaptor.forClass(PyrisCompetencyStatusUpdateDTO.class);
+        verify(websocketMessagingService, timeout(200).times(3)).sendMessageToUser(eq(TEST_PREFIX + "editor1"), eq("/topic/iris/competencies/" + course.getId()),
+                argumentCaptor.capture());
+
+        List<PyrisCompetencyStatusUpdateDTO> allValues = argumentCaptor.getAllValues();
+        assertThat(allValues.get(0).stages()).hasSize(2);
+        assertThat(allValues.get(0).result()).isNull();
+        assertThat(allValues.get(1).stages()).hasSize(2);
+        assertThat(allValues.get(1).result()).isNull();
+        assertThat(allValues.get(2).stages()).hasSize(1);
+        assertThat(allValues.get(2).result()).isEqualTo(recommendations);
     }
 
     @Test
@@ -74,6 +94,7 @@ void testAll_asTutor_shouldReturnForbidden() throws Exception {
     }
 
     void testAllPreAuthorize() throws Exception {
-        request.post("/api/courses/" + course.getId() + "/course-competencies/generate-from-description", "a", HttpStatus.FORBIDDEN);
+        request.post("/api/courses/" + course.getId() + "/course-competencies/generate-from-description",
+                new PyrisCompetencyExtractionInputDTO("a", new PyrisCompetencyRecommendationDTO[] {}), HttpStatus.FORBIDDEN);
     }
 }
diff --git a/src/test/javascript/spec/component/competencies/competency.service.spec.ts b/src/test/javascript/spec/component/competencies/competency.service.spec.ts
index 2b8a4c46813a..2d0bc277e85b 100644
--- a/src/test/javascript/spec/component/competencies/competency.service.spec.ts
+++ b/src/test/javascript/spec/component/competencies/competency.service.spec.ts
@@ -197,7 +197,7 @@ describe('CompetencyService', () => {
         const expected = defaultCompetencies;
         let response: any;
 
-        competencyService.generateCompetenciesFromCourseDescription(description, 1).subscribe((resp) => (response = resp));
+        competencyService.generateCompetenciesFromCourseDescription(1, description, []).subscribe((resp) => (response = resp));
         const req = httpTestingController.expectOne({ method: 'POST' });
         req.flush(returnedFromService);
         tick();
diff --git a/src/test/javascript/spec/component/competencies/generate-competencies/course-description-form.component.spec.ts b/src/test/javascript/spec/component/competencies/generate-competencies/course-description-form.component.spec.ts
index 20cfba29cac7..86f602263226 100644
--- a/src/test/javascript/spec/component/competencies/generate-competencies/course-description-form.component.spec.ts
+++ b/src/test/javascript/spec/component/competencies/generate-competencies/course-description-form.component.spec.ts
@@ -70,4 +70,14 @@ describe('CourseDescriptionFormComponent', () => {
         courseDescriptionComponent.courseDescriptionControl.setValue(descriptionTooLong);
         expect(courseDescriptionComponent.isSubmitPossible).toBeFalse();
     });
+
+    it('should update the description', () => {
+        courseDescriptionComponentFixture.detectChanges();
+
+        expect(courseDescriptionComponent.courseDescriptionControl.value).toEqual(courseDescriptionComponent.placeholder);
+
+        const description = 'I'.repeat(courseDescriptionComponent['DESCRIPTION_MIN'] + 1);
+        courseDescriptionComponent.setCourseDescription(description);
+        expect(courseDescriptionComponent.courseDescriptionControl.value).toEqual(description);
+    });
 });
diff --git a/src/test/javascript/spec/component/competencies/generate-competencies/generate-competencies.component.spec.ts b/src/test/javascript/spec/component/competencies/generate-competencies/generate-competencies.component.spec.ts
index f1dc252ada53..6888c6d994ea 100644
--- a/src/test/javascript/spec/component/competencies/generate-competencies/generate-competencies.component.spec.ts
+++ b/src/test/javascript/spec/component/competencies/generate-competencies/generate-competencies.component.spec.ts
@@ -1,4 +1,4 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { MockComponent, MockDirective, MockPipe, MockProvider } from 'ng-mocks';
 import { ArtemisTestModule } from '../../../test.module';
@@ -12,7 +12,7 @@ import { CompetencyService } from 'app/course/competencies/competency.service';
 import { AlertService } from 'app/core/util/alert.service';
 import { MockNgbModalService } from '../../../helpers/mocks/service/mock-ngb-modal.service';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { of } from 'rxjs';
+import { Subject, of } from 'rxjs';
 import { MockRouter } from '../../../helpers/mocks/mock-router';
 import { CourseDescriptionFormStubComponent } from './course-description-form-stub.component';
 import { MockActivatedRoute } from '../../../helpers/mocks/activated-route/mock-activated-route';
@@ -21,17 +21,23 @@ import { HttpResponse } from '@angular/common/http';
 import { By } from '@angular/platform-browser';
 import { CompetencyRecommendationDetailComponent } from 'app/course/competencies/generate-competencies/competency-recommendation-detail.component';
 import { DocumentationButtonComponent } from 'app/shared/components/documentation-button/documentation-button.component';
+import { JhiWebsocketService } from 'app/core/websocket/websocket.service';
+import { IrisStageStateDTO } from 'app/entities/iris/iris-stage-dto.model';
 import { CourseDescriptionFormComponent } from 'app/course/competencies/generate-competencies/course-description-form.component';
 import { CourseCompetencyService } from 'app/course/competencies/course-competency.service';
 import { ArtemisSharedCommonModule } from 'app/shared/shared-common.module';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
 import { ArtemisCompetenciesModule } from 'app/course/competencies/competency.module';
+import { CourseManagementService } from 'app/course/manage/course-management.service';
 
 describe('GenerateCompetenciesComponent', () => {
     let generateCompetenciesComponentFixture: ComponentFixture<GenerateCompetenciesComponent>;
     let generateCompetenciesComponent: GenerateCompetenciesComponent;
+    let mockWebSocketSubject: Subject<any>;
 
     beforeEach(() => {
+        mockWebSocketSubject = new Subject<any>();
+
         TestBed.configureTestingModule({
             imports: [ArtemisTestModule, GenerateCompetenciesComponent, ArtemisSharedCommonModule, ArtemisSharedComponentModule, ArtemisCompetenciesModule],
             declarations: [
@@ -50,6 +56,16 @@ describe('GenerateCompetenciesComponent', () => {
                     useValue: new MockActivatedRoute({ courseId: 1 }),
                 },
                 { provide: Router, useClass: MockRouter },
+                {
+                    provide: JhiWebsocketService,
+                    useValue: {
+                        subscribe: jest.fn(),
+                        receive: jest.fn(() => mockWebSocketSubject.asObservable()),
+                        unsubscribe: jest.fn(),
+                    },
+                },
+                MockProvider(CourseDescriptionFormComponent),
+                MockProvider(CourseManagementService),
                 MockProvider(CourseCompetencyService),
                 MockProvider(CompetencyService),
                 MockProvider(AlertService),
@@ -85,11 +101,32 @@ describe('GenerateCompetenciesComponent', () => {
         expect(getCompetencyRecommendationsSpy).toHaveBeenCalledOnce();
     });
 
+    it('should initialize the form with the course description', fakeAsync(() => {
+        generateCompetenciesComponentFixture.detectChanges();
+        const courseDescription = 'Course Description';
+
+        const courseDescriptionComponent: CourseDescriptionFormComponent = generateCompetenciesComponentFixture.debugElement.query(
+            By.directive(CourseDescriptionFormComponent),
+        ).componentInstance;
+        const setCourseDescriptionSpy = jest.spyOn(courseDescriptionComponent, 'setCourseDescription');
+
+        // mock the course returned by CourseManagementService
+        const course = { description: courseDescription };
+        const courseManagementService = TestBed.inject(CourseManagementService);
+        const getCourseSpy = jest.spyOn(courseManagementService, 'find').mockReturnValue(of(new HttpResponse({ body: course })));
+
+        generateCompetenciesComponent.ngOnInit();
+        tick();
+
+        expect(getCourseSpy).toHaveBeenCalledOnce();
+        expect(setCourseDescriptionSpy).toHaveBeenCalledWith(courseDescription);
+    }));
+
     it('should add competency recommendations', () => {
         generateCompetenciesComponentFixture.detectChanges();
         const courseDescription = 'Course Description';
         const response = new HttpResponse({
-            body: [{}, {}],
+            body: null,
             status: 200,
         });
         const courseCompetencyService = TestBed.inject(CourseCompetencyService);
@@ -100,10 +137,15 @@ describe('GenerateCompetenciesComponent', () => {
         expect(generateCompetenciesComponent.competencies.value).toHaveLength(0);
 
         generateCompetenciesComponent.getCompetencyRecommendations(courseDescription);
+        const websocketMessage = {
+            stages: [{ state: IrisStageStateDTO.DONE }],
+            result: [{ title: 'Title', description: 'Description', taxonomy: CompetencyTaxonomy.ANALYZE }],
+        };
+        mockWebSocketSubject.next(websocketMessage);
         generateCompetenciesComponentFixture.detectChanges();
 
-        expect(generateCompetenciesComponentFixture.debugElement.queryAll(By.directive(CompetencyRecommendationDetailComponent))).toHaveLength(2);
-        expect(generateCompetenciesComponent.competencies.value).toHaveLength(2);
+        expect(generateCompetenciesComponentFixture.debugElement.queryAll(By.directive(CompetencyRecommendationDetailComponent))).toHaveLength(1);
+        expect(generateCompetenciesComponent.competencies.value).toHaveLength(1);
         expect(getSpy).toHaveBeenCalledOnce();
     });
 
@@ -190,17 +232,30 @@ describe('GenerateCompetenciesComponent', () => {
 
     it('should display alerts after generating', () => {
         const alertService = TestBed.inject(AlertService);
+        const response = new HttpResponse({
+            body: null,
+            status: 200,
+        });
         const courseCompetencyService = TestBed.inject(CourseCompetencyService);
-        const generateCompetenciesMock = jest.spyOn(courseCompetencyService, 'generateCompetenciesFromCourseDescription');
+        const generateCompetenciesMock = jest.spyOn(courseCompetencyService, 'generateCompetenciesFromCourseDescription').mockReturnValue(of(response));
 
-        generateCompetenciesMock.mockReturnValue(of({ body: [{ id: 1 }] } as HttpResponse<Competency[]>));
         const successMock = jest.spyOn(alertService, 'success');
-        generateCompetenciesComponent.getCompetencyRecommendations('');
+        generateCompetenciesComponent.getCompetencyRecommendations('Cool course description');
+        const websocketMessage = {
+            stages: [{ state: IrisStageStateDTO.DONE }],
+            result: [{ title: 'Title', description: 'Description', taxonomy: CompetencyTaxonomy.ANALYZE }],
+        };
+        mockWebSocketSubject.next(websocketMessage);
         expect(successMock).toHaveBeenCalledOnce();
+        expect(generateCompetenciesMock).toHaveBeenCalledOnce();
 
-        generateCompetenciesMock.mockReturnValue(of({} as HttpResponse<Competency[]>));
         const warnMock = jest.spyOn(alertService, 'warning');
-        generateCompetenciesComponent.getCompetencyRecommendations('');
+        generateCompetenciesComponent.getCompetencyRecommendations('Cool course description');
+        const errorMessage = {
+            stages: [{ state: IrisStageStateDTO.ERROR }],
+            result: [{ title: 'Title', description: 'Description', taxonomy: CompetencyTaxonomy.ANALYZE }],
+        };
+        mockWebSocketSubject.next(errorMessage);
         expect(warnMock).toHaveBeenCalled();
     });
 
diff --git a/src/test/javascript/spec/component/competencies/prerequisite.service.spec.ts b/src/test/javascript/spec/component/competencies/prerequisite.service.spec.ts
index 23ceabf755ac..3911a601d7df 100644
--- a/src/test/javascript/spec/component/competencies/prerequisite.service.spec.ts
+++ b/src/test/javascript/spec/component/competencies/prerequisite.service.spec.ts
@@ -198,7 +198,7 @@ describe('PrerequisiteService', () => {
         const expected = defaultPrerequisites;
         let response: any;
 
-        prerequisiteService.generateCompetenciesFromCourseDescription(description, 1).subscribe((resp) => (response = resp));
+        prerequisiteService.generateCompetenciesFromCourseDescription(1, description, []).subscribe((resp) => (response = resp));
         const req = httpTestingController.expectOne({ method: 'POST' });
         req.flush(returnedFromService);
         tick();

From edbc5bdea1314739e1cdc575dc696bc86d16a0f3 Mon Sep 17 00:00:00 2001
From: Patrik Zander <38403547+pzdr7@users.noreply.github.com>
Date: Wed, 28 Aug 2024 07:26:30 +0200
Subject: [PATCH 09/15] Development: Remove the unused Ace code editor
 dependency (#9246)

---
 angular.json                                  |   2 -
 package-lock.json                             |  14 -
 package.json                                  |   2 -
 .../legal/legal-document-update.component.ts  |   3 +-
 .../webapp/app/core/theme/theme.service.ts    |  10 +-
 .../file-upload-exercise-update.component.ts  |   2 -
 .../modeling-assessment-editor.component.ts   |   3 +-
 .../modeling-exercise-update.component.ts     |   2 -
 .../git-diff-report/git-diff-report.module.ts |   3 +-
 ...exercise-editable-instruction.component.ts |  15 +-
 .../programming-exercise-management.module.ts |   2 -
 .../programming-exercise-update.component.ts  |   2 -
 .../programming-exercise-update.module.ts     |   2 -
 ...ng-exercise-custom-build-plan.component.ts |   2 +-
 .../programming-exercise-problem.component.ts |   3 +-
 .../shared/code-editor/code-editor.module.ts  |   2 -
 .../header/code-editor-header.component.ts    |   2 +-
 .../monaco/code-editor-monaco.component.ts    |  10 +-
 .../drag-and-drop-question-edit.component.ts  |   2 -
 ...multiple-choice-question-edit.component.ts |   3 -
 .../quiz/manage/quiz-management.module.ts     |   2 -
 ...uate-multiple-choice-question.component.ts |  19 +-
 .../short-answer-question-edit.component.ts   |   3 +-
 .../manage/exercise-hint-update.component.ts  |   2 +-
 .../grading-instructions-details.component.ts |   9 +-
 .../guided-tour/guided-tour.component.html    |   4 +-
 .../app/guided-tour/guided-tour.constants.ts  |   2 +-
 .../app/guided-tour/guided-tour.service.ts    |   6 +-
 .../app/guided-tour/tours/code-editor-tour.ts |   6 +-
 ...or-and-editor-orion-container.component.ts |   3 +-
 .../ace-editor/ace-editor.component.ts        | 247 ---------
 .../ace-editor/ace-editor.module.ts           |   8 -
 .../markdown-editor/command-constants.ts      |  16 -
 .../commands/attachmentCommand.ts             |  30 -
 .../markdown-editor/commands/bold.command.ts  |  30 -
 .../markdown-editor/commands/code.command.ts  |  29 -
 .../commands/codeblock.command.ts             |  21 -
 .../commands/colorPicker.command.ts           |  80 ---
 .../markdown-editor/commands/command.ts       | 120 ----
 .../channelMentionCommand.ts                  |  46 --
 .../exerciseReferenceCommand.ts               |  36 --
 .../lectureAttachmentReferenceCommand.ts      | 129 -----
 .../userMentionCommand.ts                     |  30 -
 .../commands/fullscreen.command.ts            |  24 -
 .../commands/headingOne.command.ts            |  34 --
 .../commands/headingThree.command.ts          |  34 --
 .../commands/headingTwo.command.ts            |  34 --
 .../commands/interactiveSearchCommand.ts      |  97 ----
 .../commands/italic.command.ts                |  30 -
 .../markdown-editor/commands/katex.command.ts |  25 -
 .../markdown-editor/commands/link.command.ts  |  30 -
 .../commands/multiOptionCommand.ts            |  14 -
 .../commands/orderedListCommand.ts            |  72 ---
 .../commands/reference.command.ts             |  34 --
 .../commands/underline.command.ts             |  28 -
 .../commands/unorderedListCommand.ts          |  68 ---
 .../domainCommands/correctOptionCommand.ts    |  32 --
 .../domainCommands/credits.command.ts         |  36 --
 .../domain-multi-option-list.command.ts       | 103 ----
 .../domainCommands/domainCommand.ts           |  62 ---
 .../domainMultiOptionCommand.ts               |  15 -
 .../domainCommands/domainTag.command.ts       |   6 -
 .../domainCommands/explanation.command.ts     |  35 --
 .../domainCommands/feedback.command.ts        |  35 --
 .../domainCommands/gradingCriterionCommand.ts |  37 --
 .../gradingInstruction.command.ts             |  71 ---
 .../domainCommands/gradingScaleCommand.ts     |  35 --
 .../domainCommands/hint.command.ts            |  35 --
 .../domainCommands/incorrectOptionCommand.ts  |  32 --
 .../instructionDescription.command.ts         |  35 --
 .../programming-exercise/task.command.ts      |  65 ---
 .../programming-exercise/testCase.command.ts  |  25 -
 .../domainCommands/usageCount.command.ts      |  37 --
 .../markdown-editor.component.html            | 224 --------
 .../markdown-editor.component.scss            | 132 -----
 .../markdown-editor.component.ts              | 519 ------------------
 .../markdown-editor/markdown-editor.module.ts |   9 +-
 .../markdown-editor-monaco.component.scss     |  41 ++
 .../markdown-editor-monaco.component.ts       |  11 +-
 .../select-with-search.component.html         |  11 -
 .../select-with-search.component.scss         |   9 -
 .../select-with-search.component.ts           | 115 ----
 .../markdown-editor/value-item.model.ts       |   7 +
 src/main/webapp/app/shared/markdown.module.ts |   3 +-
 .../metis/posting-create-edit.directive.ts    |   3 +-
 .../posting-markdown-editor.component.ts      |   3 +-
 .../monaco-exercise-reference.action.ts       |   2 +-
 ...editor-domain-action-with-options.model.ts |   2 +-
 .../model/actions/monaco-task.action.ts       |   5 +-
 .../monaco-editor-overlay-widget.model.ts     |   2 +-
 .../monaco-editor/monaco-editor.component.ts  |  10 +-
 .../webapp/app/shared/util/markdown.util.ts   |  56 +-
 .../virtual-scroll.component.ts               |   4 +-
 .../de/guidedTourProgrammingExercise.json     |   2 +-
 .../en/guidedTourProgrammingExercise.json     |   2 +-
 .../code-editor-actions.component.spec.ts     |   3 +-
 ...code-editor-build-output.component.spec.ts |   3 +-
 .../code-editor-header.component.spec.ts      |   3 +-
 .../code-editor-monaco.component.spec.ts      |  38 +-
 .../code-editor-status.component.spec.ts      |   3 +-
 .../drag-and-drop-question.component.spec.ts  |   2 -
 .../attachment-command.spec.ts                |  42 --
 .../markdown-editor/bold-command.spec.ts      |  42 --
 .../channelMentionCommand.spec.ts             | 120 ----
 .../markdown-editor/code-command.spec.ts      |  42 --
 .../markdown-editor/codeblock-command.spec.ts |  34 --
 .../color-picker-command.spec.ts              |  61 --
 .../fullscreen-command.spec.ts                |  56 --
 ...adingInstruction-command.component.spec.ts |  76 ---
 .../markdown-editor/headingCommands.spec.ts   |  94 ----
 .../markdown-editor/italic-command.spec.ts    |  42 --
 .../markdown-editor/katex-command.spec.ts     |  33 --
 .../markdown-editor/link-command.spec.ts      |  42 --
 .../markdown-editor-monaco.component.spec.ts  |   3 +-
 .../markdown-editor.component.spec.ts         |  76 ---
 .../metisReference-commands.spec.ts           | 240 --------
 .../ordered-list-command.spec.ts              | 102 ----
 .../markdown-editor/reference-command.spec.ts |  56 --
 .../markdown-editor/underline-command.spec.ts |  50 --
 .../unordered-list-command.spec.ts            | 112 ----
 .../userMentionCommand.spec.ts                | 174 ------
 ...modeling-submission-team.component.spec.ts |   3 -
 .../modeling-submission.component.spec.ts     |   3 -
 ...tor-assessment-container.component.spec.ts |   5 +-
 ...ise-instruction-analysis.component.spec.ts |   5 +-
 .../select-with-search.component.spec.ts      | 148 -----
 .../team/team-update-dialog.component.spec.ts |   3 -
 .../component/team/teams.component.spec.ts    |   4 -
 .../text-editor/text-editor.component.spec.ts |   4 -
 .../spec/service/guided-tour.service.spec.ts  |   4 +-
 .../ProgrammingExerciseAssessmentPage.ts      |   2 +-
 131 files changed, 169 insertions(+), 4917 deletions(-)
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/ace-editor/ace-editor.component.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/ace-editor/ace-editor.module.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/command-constants.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/commands/attachmentCommand.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/commands/bold.command.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/commands/code.command.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/commands/codeblock.command.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/commands/colorPicker.command.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/commands/command.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/commands/courseArtifactReferenceCommands/channelMentionCommand.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/commands/courseArtifactReferenceCommands/exerciseReferenceCommand.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/commands/courseArtifactReferenceCommands/lectureAttachmentReferenceCommand.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/commands/courseArtifactReferenceCommands/userMentionCommand.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/commands/fullscreen.command.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/commands/headingOne.command.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/commands/headingThree.command.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/commands/headingTwo.command.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/commands/interactiveSearchCommand.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/commands/italic.command.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/commands/katex.command.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/commands/link.command.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/commands/multiOptionCommand.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/commands/orderedListCommand.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/commands/reference.command.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/commands/underline.command.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/commands/unorderedListCommand.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/domainCommands/correctOptionCommand.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/domainCommands/credits.command.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/domainCommands/domain-multi-option-list.command.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/domainCommands/domainCommand.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/domainCommands/domainMultiOptionCommand.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/domainCommands/domainTag.command.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/domainCommands/explanation.command.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/domainCommands/feedback.command.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/domainCommands/gradingCriterionCommand.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/domainCommands/gradingInstruction.command.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/domainCommands/gradingScaleCommand.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/domainCommands/hint.command.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/domainCommands/incorrectOptionCommand.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/domainCommands/instructionDescription.command.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/domainCommands/programming-exercise/task.command.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/domainCommands/programming-exercise/testCase.command.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/domainCommands/usageCount.command.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/markdown-editor.component.html
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/markdown-editor.component.scss
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/markdown-editor.component.ts
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/select-with-search/select-with-search.component.html
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/select-with-search/select-with-search.component.scss
 delete mode 100644 src/main/webapp/app/shared/markdown-editor/select-with-search/select-with-search.component.ts
 create mode 100644 src/main/webapp/app/shared/markdown-editor/value-item.model.ts
 delete mode 100644 src/test/javascript/spec/component/markdown-editor/attachment-command.spec.ts
 delete mode 100644 src/test/javascript/spec/component/markdown-editor/bold-command.spec.ts
 delete mode 100644 src/test/javascript/spec/component/markdown-editor/channelMentionCommand.spec.ts
 delete mode 100644 src/test/javascript/spec/component/markdown-editor/code-command.spec.ts
 delete mode 100644 src/test/javascript/spec/component/markdown-editor/codeblock-command.spec.ts
 delete mode 100644 src/test/javascript/spec/component/markdown-editor/color-picker-command.spec.ts
 delete mode 100644 src/test/javascript/spec/component/markdown-editor/fullscreen-command.spec.ts
 delete mode 100644 src/test/javascript/spec/component/markdown-editor/gradingInstruction-command.component.spec.ts
 delete mode 100644 src/test/javascript/spec/component/markdown-editor/headingCommands.spec.ts
 delete mode 100644 src/test/javascript/spec/component/markdown-editor/italic-command.spec.ts
 delete mode 100644 src/test/javascript/spec/component/markdown-editor/katex-command.spec.ts
 delete mode 100644 src/test/javascript/spec/component/markdown-editor/link-command.spec.ts
 delete mode 100644 src/test/javascript/spec/component/markdown-editor/markdown-editor.component.spec.ts
 delete mode 100644 src/test/javascript/spec/component/markdown-editor/metisReference-commands.spec.ts
 delete mode 100644 src/test/javascript/spec/component/markdown-editor/ordered-list-command.spec.ts
 delete mode 100644 src/test/javascript/spec/component/markdown-editor/reference-command.spec.ts
 delete mode 100644 src/test/javascript/spec/component/markdown-editor/underline-command.spec.ts
 delete mode 100644 src/test/javascript/spec/component/markdown-editor/unordered-list-command.spec.ts
 delete mode 100644 src/test/javascript/spec/component/markdown-editor/userMentionCommand.spec.ts
 delete mode 100644 src/test/javascript/spec/component/shared/metis/postings-markdown-editor/select-with-search.component.spec.ts

diff --git a/angular.json b/angular.json
index a2c893ff59f6..e5543ff2ce60 100644
--- a/angular.json
+++ b/angular.json
@@ -21,8 +21,6 @@
           "builder": "@angular-devkit/build-angular:application",
           "options": {
             "allowedCommonJsDependencies": [
-              "brace",
-              "brace/mode/java",
               "clone-deep",
               "crypto-js",
               "crypto",
diff --git a/package-lock.json b/package-lock.json
index 4ac4c8f4a4b4..f619a609c426 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,9 +38,7 @@
                 "@swimlane/ngx-charts": "20.5.0",
                 "@swimlane/ngx-graph": "8.4.0",
                 "@vscode/codicons": "0.0.36",
-                "ace-builds": "1.36.0",
                 "bootstrap": "5.3.3",
-                "brace": "0.11.1",
                 "compare-versions": "6.1.1",
                 "core-js": "3.38.1",
                 "crypto-js": "4.2.0",
@@ -7076,12 +7074,6 @@
                 "node": ">= 0.6"
             }
         },
-        "node_modules/ace-builds": {
-            "version": "1.36.0",
-            "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.36.0.tgz",
-            "integrity": "sha512-7to4F86V5N13EY4M9LWaGo2Wmr9iWe5CrYpc28F+/OyYCf7yd+xBV5x9v/GB73EBGGoYd89m6JjeIUjkL6Yw+w==",
-            "license": "BSD-3-Clause"
-        },
         "node_modules/acorn": {
             "version": "8.12.1",
             "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
@@ -7856,12 +7848,6 @@
                 "@popperjs/core": "^2.11.8"
             }
         },
-        "node_modules/brace": {
-            "version": "0.11.1",
-            "resolved": "https://registry.npmjs.org/brace/-/brace-0.11.1.tgz",
-            "integrity": "sha512-Fc8Ne62jJlKHiG/ajlonC4Sd66Pq68fFwK4ihJGNZpGqboc324SQk+lRvMzpPRuJOmfrJefdG8/7JdWX4bzJ2Q==",
-            "license": "MIT"
-        },
         "node_modules/brace-expansion": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
diff --git a/package.json b/package.json
index da3d4a60a893..f19185aadfb5 100644
--- a/package.json
+++ b/package.json
@@ -41,9 +41,7 @@
         "@swimlane/ngx-charts": "20.5.0",
         "@swimlane/ngx-graph": "8.4.0",
         "@vscode/codicons": "0.0.36",
-        "ace-builds": "1.36.0",
         "bootstrap": "5.3.3",
-        "brace": "0.11.1",
         "compare-versions": "6.1.1",
         "core-js": "3.38.1",
         "crypto-js": "4.2.0",
diff --git a/src/main/webapp/app/admin/legal/legal-document-update.component.ts b/src/main/webapp/app/admin/legal/legal-document-update.component.ts
index cbe5aafc7cd5..63541a0c97dc 100644
--- a/src/main/webapp/app/admin/legal/legal-document-update.component.ts
+++ b/src/main/webapp/app/admin/legal/legal-document-update.component.ts
@@ -1,14 +1,13 @@
 import { AfterContentChecked, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
 import { faBan, faCheckCircle, faCircleNotch, faExclamationTriangle, faSave } from '@fortawesome/free-solid-svg-icons';
 import { LegalDocumentService } from 'app/shared/service/legal-document.service';
-import { MarkdownEditorHeight } from 'app/shared/markdown-editor/markdown-editor.component';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { UnsavedChangesWarningComponent } from 'app/admin/legal/unsaved-changes-warning/unsaved-changes-warning.component';
 import { LegalDocument, LegalDocumentLanguage, LegalDocumentType } from 'app/entities/legal-document.model';
 import { ActivatedRoute } from '@angular/router';
 import { Observable, tap } from 'rxjs';
 import { JhiLanguageHelper } from 'app/core/language/language.helper';
-import { MarkdownEditorMonacoComponent } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
+import { MarkdownEditorHeight, MarkdownEditorMonacoComponent } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
 
 @Component({
     selector: 'jhi-privacy-statement-update-component',
diff --git a/src/main/webapp/app/core/theme/theme.service.ts b/src/main/webapp/app/core/theme/theme.service.ts
index a6fa87c0c01a..507b355b11fe 100644
--- a/src/main/webapp/app/core/theme/theme.service.ts
+++ b/src/main/webapp/app/core/theme/theme.service.ts
@@ -11,24 +11,20 @@ export const THEME_OVERRIDE_ID = 'artemis-theme-override';
  * If you add new themes, make sure to adapt the theme switch component which currently only supports two themes.
  */
 export class Theme {
-    public static readonly LIGHT = new Theme('LIGHT', true, undefined, faSun, 'chrome', 'dreamweaver');
-    public static readonly DARK = new Theme('DARK', false, 'theme-dark.css', faMoon, 'dracula', 'dracula');
+    public static readonly LIGHT = new Theme('LIGHT', true, undefined, faSun);
+    public static readonly DARK = new Theme('DARK', false, 'theme-dark.css', faMoon);
 
-    private constructor(identifier: string, isDefault: boolean, fileName: string | undefined, icon: IconDefinition, markdownAceTheme: string, codeAceTheme: string) {
+    private constructor(identifier: string, isDefault: boolean, fileName: string | undefined, icon: IconDefinition) {
         this.identifier = identifier;
         this.isDefault = isDefault;
         this.fileName = fileName;
         this.icon = icon;
-        this.markdownAceTheme = markdownAceTheme;
-        this.codeAceTheme = codeAceTheme;
     }
 
     public readonly identifier: string;
     public readonly isDefault: boolean;
     public readonly fileName: string | undefined;
     public readonly icon: IconDefinition;
-    public readonly markdownAceTheme: string;
-    public readonly codeAceTheme: string;
 
     /**
      * Returns an array with all available themes.
diff --git a/src/main/webapp/app/exercises/file-upload/manage/file-upload-exercise-update.component.ts b/src/main/webapp/app/exercises/file-upload/manage/file-upload-exercise-update.component.ts
index abd489160baa..8cf0fe19dcb1 100644
--- a/src/main/webapp/app/exercises/file-upload/manage/file-upload-exercise-update.component.ts
+++ b/src/main/webapp/app/exercises/file-upload/manage/file-upload-exercise-update.component.ts
@@ -7,7 +7,6 @@ import { FileUploadExercise } from 'app/entities/file-upload-exercise.model';
 import { CourseManagementService } from 'app/course/manage/course-management.service';
 import { ExerciseService } from 'app/exercises/shared/exercise/exercise.service';
 import { Exercise, ExerciseMode, IncludedInOverallScore, getCourseId, resetForImport } from 'app/entities/exercise.model';
-import { EditorMode } from 'app/shared/markdown-editor/markdown-editor.component';
 import { ArtemisNavigationUtilService } from 'app/utils/navigation.utils';
 import { ExerciseCategory } from 'app/entities/exercise-category.model';
 import { cloneDeep } from 'lodash-es';
@@ -54,7 +53,6 @@ export class FileUploadExerciseUpdateComponent implements AfterViewInit, OnDestr
     goBackAfterSaving = false;
     exerciseCategories: ExerciseCategory[];
     existingCategories: ExerciseCategory[];
-    EditorMode = EditorMode;
     notificationText?: string;
     domainActionsProblemStatement = [new MonacoFormulaAction()];
     domainActionsExampleSolution = [new MonacoFormulaAction()];
diff --git a/src/main/webapp/app/exercises/modeling/assess/modeling-assessment-editor/modeling-assessment-editor.component.ts b/src/main/webapp/app/exercises/modeling/assess/modeling-assessment-editor/modeling-assessment-editor.component.ts
index 53bac3581010..e6610b4edaf0 100644
--- a/src/main/webapp/app/exercises/modeling/assess/modeling-assessment-editor/modeling-assessment-editor.component.ts
+++ b/src/main/webapp/app/exercises/modeling/assess/modeling-assessment-editor/modeling-assessment-editor.component.ts
@@ -354,8 +354,7 @@ export class ModelingAssessmentEditorComponent implements OnInit {
 
     /**
      * Remove a feedback suggestion because it was accepted or discarded.
-     * The actual feedback creation when accepting happens in code-editor-ace-component/unreferenced-feedback because they have full control over the suggestion cards.
-     * @param feedback Feedback suggestion that is removed
+     * @param feedback Feedback suggestion to remove
      */
     removeSuggestion(feedback: Feedback) {
         this.feedbackSuggestions = this.feedbackSuggestions.filter((feedbackSuggestion) => feedbackSuggestion !== feedback);
diff --git a/src/main/webapp/app/exercises/modeling/manage/modeling-exercise-update.component.ts b/src/main/webapp/app/exercises/modeling/manage/modeling-exercise-update.component.ts
index 1da174b17a01..4a4488812450 100644
--- a/src/main/webapp/app/exercises/modeling/manage/modeling-exercise-update.component.ts
+++ b/src/main/webapp/app/exercises/modeling/manage/modeling-exercise-update.component.ts
@@ -6,7 +6,6 @@ import { ModelingExerciseService } from './modeling-exercise.service';
 import { CourseManagementService } from 'app/course/manage/course-management.service';
 import { ExerciseService } from 'app/exercises/shared/exercise/exercise.service';
 import { ExerciseMode, IncludedInOverallScore, resetForImport } from 'app/entities/exercise.model';
-import { EditorMode } from 'app/shared/markdown-editor/markdown-editor.component';
 import { AssessmentType } from 'app/entities/assessment-type.model';
 import { switchMap, tap } from 'rxjs/operators';
 import { ExerciseGroupService } from 'app/exam/manage/exercise-groups/exercise-group.service';
@@ -55,7 +54,6 @@ export class ModelingExerciseUpdateComponent implements AfterViewInit, OnDestroy
     readonly IncludedInOverallScore = IncludedInOverallScore;
     readonly documentationType: DocumentationType = 'Model';
 
-    EditorMode = EditorMode;
     AssessmentType = AssessmentType;
     UMLDiagramType = UMLDiagramType;
 
diff --git a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.module.ts b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.module.ts
index b134a0c17ad2..d72ed6f72de0 100644
--- a/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.module.ts
+++ b/src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.module.ts
@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { ArtemisSharedModule } from 'app/shared/shared.module';
-import { AceEditorModule } from 'app/shared/markdown-editor/ace-editor/ace-editor.module';
 import { GitDiffLineStatComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-line-stat.component';
 import { GitDiffReportComponent } from './git-diff-report.component';
 import { GitDiffFileComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-file.component';
@@ -12,7 +11,7 @@ import { GitDiffFilePanelTitleComponent } from 'app/exercises/programming/hestia
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
 
 @NgModule({
-    imports: [ArtemisSharedModule, AceEditorModule, NgbAccordionModule, MonacoEditorModule, ArtemisSharedComponentModule],
+    imports: [ArtemisSharedModule, NgbAccordionModule, MonacoEditorModule, ArtemisSharedComponentModule],
     declarations: [GitDiffFilePanelComponent, GitDiffFilePanelTitleComponent, GitDiffReportComponent, GitDiffFileComponent, GitDiffReportModalComponent, GitDiffLineStatComponent],
     exports: [GitDiffReportComponent, GitDiffReportModalComponent, GitDiffLineStatComponent],
 })
diff --git a/src/main/webapp/app/exercises/programming/manage/instructions-editor/programming-exercise-editable-instruction.component.ts b/src/main/webapp/app/exercises/programming/manage/instructions-editor/programming-exercise-editable-instruction.component.ts
index 3dcd5d42efa3..b20fb2d6e149 100644
--- a/src/main/webapp/app/exercises/programming/manage/instructions-editor/programming-exercise-editable-instruction.component.ts
+++ b/src/main/webapp/app/exercises/programming/manage/instructions-editor/programming-exercise-editable-instruction.component.ts
@@ -2,22 +2,17 @@ import { AfterViewInit, Component, EventEmitter, HostListener, Input, OnChanges,
 import { AlertService } from 'app/core/util/alert.service';
 import { Observable, Subject, Subscription, of, throwError } from 'rxjs';
 import { catchError, map as rxMap, switchMap, tap } from 'rxjs/operators';
-import { TaskCommand } from 'app/shared/markdown-editor/domainCommands/programming-exercise/task.command';
-import { TestCaseCommand } from 'app/shared/markdown-editor/domainCommands/programming-exercise/testCase.command';
 import { ProgrammingExerciseTestCase } from 'app/entities/programming-exercise-test-case.model';
 import { ProblemStatementAnalysis } from 'app/exercises/programming/manage/instructions-editor/analysis/programming-exercise-instruction-analysis.model';
 import { Participation } from 'app/entities/participation/participation.model';
 import { ProgrammingExerciseService } from 'app/exercises/programming/manage/services/programming-exercise.service';
 import { ProgrammingExercise } from 'app/entities/programming-exercise.model';
 import { hasExerciseChanged } from 'app/exercises/shared/exercise/exercise.utils';
-import { MarkdownEditorHeight } from 'app/shared/markdown-editor/markdown-editor.component';
 import { ProgrammingExerciseParticipationService } from 'app/exercises/programming/manage/services/programming-exercise-participation.service';
-import { DomainCommand } from 'app/shared/markdown-editor/domainCommands/domainCommand';
 import { ProgrammingExerciseGradingService } from 'app/exercises/programming/manage/services/programming-exercise-grading.service';
-import { KatexCommand } from 'app/shared/markdown-editor/commands/katex.command';
 import { Result } from 'app/entities/result.model';
 import { faCheckCircle, faCircleNotch, faExclamationTriangle, faGripLines, faSave } from '@fortawesome/free-solid-svg-icons';
-import { MarkdownEditorMonacoComponent } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
+import { MarkdownEditorHeight, MarkdownEditorMonacoComponent } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
 import { Annotation } from 'app/exercises/programming/shared/code-editor/monaco/code-editor-monaco.component';
 import { MonacoFormulaAction } from 'app/shared/monaco-editor/model/actions/monaco-formula.action';
 import { MonacoTaskAction } from 'app/shared/monaco-editor/model/actions/monaco-task.action';
@@ -36,11 +31,7 @@ export class ProgrammingExerciseEditableInstructionComponent implements AfterVie
 
     exerciseTestCases: string[] = [];
 
-    taskCommand = new TaskCommand();
-    taskRegex = this.taskCommand.getTagRegex('g');
-    testCaseCommand = new TestCaseCommand();
-    katexCommand = new KatexCommand();
-    domainCommands: DomainCommand[] = [this.katexCommand, this.taskCommand, this.testCaseCommand];
+    taskRegex = MonacoTaskAction.GLOBAL_TASK_REGEX;
     testCaseAction = new MonacoTestCaseAction();
     domainActions: MonacoEditorDomainAction[] = [new MonacoFormulaAction(), new MonacoTaskAction(), this.testCaseAction];
 
@@ -85,7 +76,6 @@ export class ProgrammingExerciseEditableInstructionComponent implements AfterVie
             this.unsavedChanges = true;
         }
         this.programmingExercise = exercise;
-        this.domainCommands = [this.katexCommand, this.taskCommand, this.testCaseCommand];
         this.exerciseChange.emit(this.programmingExercise);
     }
 
@@ -215,7 +205,6 @@ export class ProgrammingExerciseEditableInstructionComponent implements AfterVie
                     tap((testCaseNames: string[]) => {
                         this.exerciseTestCases = testCaseNames;
                         const cases = this.exerciseTestCases.map((value) => ({ value, id: value }));
-                        this.testCaseCommand.setValues(cases);
                         this.testCaseAction.setValues(cases);
                     }),
                     catchError(() => of()),
diff --git a/src/main/webapp/app/exercises/programming/manage/programming-exercise-management.module.ts b/src/main/webapp/app/exercises/programming/manage/programming-exercise-management.module.ts
index 2ccadafe3cc1..1cb726111a17 100644
--- a/src/main/webapp/app/exercises/programming/manage/programming-exercise-management.module.ts
+++ b/src/main/webapp/app/exercises/programming/manage/programming-exercise-management.module.ts
@@ -24,7 +24,6 @@ import { ProgrammingExerciseExampleSolutionRepoDownloadComponent } from 'app/exe
 import { TestwiseCoverageReportModule } from 'app/exercises/programming/hestia/testwise-coverage-report/testwise-coverage-report.module';
 import { ArtemisCodeHintGenerationOverviewModule } from 'app/exercises/programming/hestia/generation-overview/code-hint-generation-overview/code-hint-generation-overview.module';
 import { BuildPlanEditorComponent } from 'app/exercises/programming/manage/build-plan-editor.component';
-import { AceEditorModule } from 'app/shared/markdown-editor/ace-editor/ace-editor.module';
 import { ArtemisCodeEditorModule } from 'app/exercises/programming/shared/code-editor/code-editor.module';
 import { DetailModule } from 'app/detail-overview-list/detail.module';
 import { IrisModule } from 'app/iris/iris.module';
@@ -53,7 +52,6 @@ import { MonacoEditorModule } from 'app/shared/monaco-editor/monaco-editor.modul
         GitDiffReportModule,
         TestwiseCoverageReportModule,
         ArtemisCodeHintGenerationOverviewModule,
-        AceEditorModule,
         ArtemisCodeEditorModule,
         ArtemisExerciseModule,
         DetailModule,
diff --git a/src/main/webapp/app/exercises/programming/manage/update/programming-exercise-update.component.ts b/src/main/webapp/app/exercises/programming/manage/update/programming-exercise-update.component.ts
index 755a6241cfca..e48803fc9c81 100644
--- a/src/main/webapp/app/exercises/programming/manage/update/programming-exercise-update.component.ts
+++ b/src/main/webapp/app/exercises/programming/manage/update/programming-exercise-update.component.ts
@@ -13,7 +13,6 @@ import { FeatureToggle } from 'app/shared/feature-toggle/feature-toggle.service'
 import { ExerciseService } from 'app/exercises/shared/exercise/exercise.service';
 import { AssessmentType } from 'app/entities/assessment-type.model';
 import { Exercise, IncludedInOverallScore, ValidationReason } from 'app/entities/exercise.model';
-import { EditorMode } from 'app/shared/markdown-editor/markdown-editor.component';
 import { ProfileService } from 'app/shared/layouts/profiles/profile.service';
 import { ExerciseGroupService } from 'app/exam/manage/exercise-groups/exercise-group.service';
 import { ProgrammingLanguageFeatureService } from 'app/exercises/programming/shared/service/programming-language-feature/programming-language-feature.service';
@@ -85,7 +84,6 @@ export class ProgrammingExerciseUpdateComponent implements AfterViewInit, OnDest
     notificationText?: string;
     courseId: number;
 
-    EditorMode = EditorMode;
     AssessmentType = AssessmentType;
     rerenderSubject = new Subject<void>();
     // This is used to revert the select if the user cancels to override the new selected programming language.
diff --git a/src/main/webapp/app/exercises/programming/manage/update/programming-exercise-update.module.ts b/src/main/webapp/app/exercises/programming/manage/update/programming-exercise-update.module.ts
index 29c6704e6d08..8c5fa972cd92 100644
--- a/src/main/webapp/app/exercises/programming/manage/update/programming-exercise-update.module.ts
+++ b/src/main/webapp/app/exercises/programming/manage/update/programming-exercise-update.module.ts
@@ -26,7 +26,6 @@ import { ExerciseTitleChannelNameModule } from 'app/exercises/shared/exercise-ti
 import { ExerciseUpdateNotificationModule } from 'app/exercises/shared/exercise-update-notification/exercise-update-notification.module';
 import { ExerciseUpdatePlagiarismModule } from 'app/exercises/shared/plagiarism/exercise-update-plagiarism/exercise-update-plagiarism.module';
 import { ProgrammingExerciseCustomAeolusBuildPlanComponent } from 'app/exercises/programming/manage/update/update-components/custom-build-plans/programming-exercise-custom-aeolus-build-plan.component';
-import { AceEditorModule } from 'app/shared/markdown-editor/ace-editor/ace-editor.module';
 import { ProgrammingExerciseCustomBuildPlanComponent } from 'app/exercises/programming/manage/update/update-components/custom-build-plans/programming-exercise-custom-build-plan.component';
 import { ProgrammingExerciseDockerImageComponent } from 'app/exercises/programming/manage/update/update-components/custom-build-plans/programming-exercise-docker-image/programming-exercise-docker-image.component';
 import { FormsModule } from 'app/forms/forms.module';
@@ -54,7 +53,6 @@ import { MonacoEditorModule } from 'app/shared/monaco-editor/monaco-editor.modul
         ExerciseTitleChannelNameModule,
         ExerciseUpdateNotificationModule,
         ExerciseUpdatePlagiarismModule,
-        AceEditorModule,
         FormsModule,
         ProgrammingExerciseBuildPlanCheckoutDirectoriesComponent,
         ProgrammingExerciseRepositoryAndBuildPlanDetailsComponent,
diff --git a/src/main/webapp/app/exercises/programming/manage/update/update-components/custom-build-plans/programming-exercise-custom-build-plan.component.ts b/src/main/webapp/app/exercises/programming/manage/update/update-components/custom-build-plans/programming-exercise-custom-build-plan.component.ts
index 437d2f56d57e..1a314af06cfd 100644
--- a/src/main/webapp/app/exercises/programming/manage/update/update-components/custom-build-plans/programming-exercise-custom-build-plan.component.ts
+++ b/src/main/webapp/app/exercises/programming/manage/update/update-components/custom-build-plans/programming-exercise-custom-build-plan.component.ts
@@ -132,7 +132,7 @@ export class ProgrammingExerciseCustomBuildPlanComponent implements OnChanges {
     }
 
     /**
-     * Sets up an ace editor for the build plan script
+     * Sets up the Monaco editor for the build plan script
      */
     setupEditor(): void {
         if (!this._editor) {
diff --git a/src/main/webapp/app/exercises/programming/manage/update/update-components/programming-exercise-problem.component.ts b/src/main/webapp/app/exercises/programming/manage/update/update-components/programming-exercise-problem.component.ts
index f6625d0f56fe..74eba35715a5 100644
--- a/src/main/webapp/app/exercises/programming/manage/update/update-components/programming-exercise-problem.component.ts
+++ b/src/main/webapp/app/exercises/programming/manage/update/update-components/programming-exercise-problem.component.ts
@@ -3,7 +3,8 @@ import { ProgrammingExercise, ProgrammingLanguage, ProjectType } from 'app/entit
 import { AssessmentType } from 'app/entities/assessment-type.model';
 import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
 import { ProgrammingExerciseCreationConfig } from 'app/exercises/programming/manage/update/programming-exercise-creation-config';
-import { MarkdownEditorHeight } from 'app/shared/markdown-editor/markdown-editor.component';
+
+import { MarkdownEditorHeight } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
 
 @Component({
     selector: 'jhi-programming-exercise-problem',
diff --git a/src/main/webapp/app/exercises/programming/shared/code-editor/code-editor.module.ts b/src/main/webapp/app/exercises/programming/shared/code-editor/code-editor.module.ts
index d403afbfa572..7b23b4959793 100644
--- a/src/main/webapp/app/exercises/programming/shared/code-editor/code-editor.module.ts
+++ b/src/main/webapp/app/exercises/programming/shared/code-editor/code-editor.module.ts
@@ -1,5 +1,4 @@
 import { NgModule } from '@angular/core';
-import { AceEditorModule } from 'app/shared/markdown-editor/ace-editor/ace-editor.module';
 import { CodeEditorBuildOutputComponent } from 'app/exercises/programming/shared/code-editor/build-output/code-editor-build-output.component';
 import { CodeEditorGridComponent } from 'app/exercises/programming/shared/code-editor/layout/code-editor-grid.component';
 import { CodeEditorActionsComponent } from 'app/exercises/programming/shared/code-editor/actions/code-editor-actions.component';
@@ -28,7 +27,6 @@ import { ArtemisSharedComponentModule } from 'app/shared/components/shared-compo
 
 @NgModule({
     imports: [
-        AceEditorModule,
         NgbModule,
         ArtemisSharedModule,
         FeatureToggleModule,
diff --git a/src/main/webapp/app/exercises/programming/shared/code-editor/header/code-editor-header.component.ts b/src/main/webapp/app/exercises/programming/shared/code-editor/header/code-editor-header.component.ts
index 2a509207248b..e340a1dcb4f2 100644
--- a/src/main/webapp/app/exercises/programming/shared/code-editor/header/code-editor-header.component.ts
+++ b/src/main/webapp/app/exercises/programming/shared/code-editor/header/code-editor-header.component.ts
@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { MAX_TAB_SIZE } from 'app/shared/markdown-editor/ace-editor/ace-editor.component';
 import { faFileAlt } from '@fortawesome/free-regular-svg-icons';
 import { faCircleNotch, faGear } from '@fortawesome/free-solid-svg-icons';
+import { MAX_TAB_SIZE } from 'app/shared/monaco-editor/monaco-editor.component';
 
 @Component({
     selector: 'jhi-code-editor-header',
diff --git a/src/main/webapp/app/exercises/programming/shared/code-editor/monaco/code-editor-monaco.component.ts b/src/main/webapp/app/exercises/programming/shared/code-editor/monaco/code-editor-monaco.component.ts
index 5ea72401832e..b16d76dc66a4 100644
--- a/src/main/webapp/app/exercises/programming/shared/code-editor/monaco/code-editor-monaco.component.ts
+++ b/src/main/webapp/app/exercises/programming/shared/code-editor/monaco/code-editor-monaco.component.ts
@@ -3,7 +3,7 @@ import { RepositoryFileService } from 'app/exercises/shared/result/repository.se
 import { CodeEditorRepositoryFileService, ConnectionError } from 'app/exercises/programming/shared/code-editor/service/code-editor-repository.service';
 import { CodeEditorFileService } from 'app/exercises/programming/shared/code-editor/service/code-editor-file.service';
 import { LocalStorageService } from 'ngx-webstorage';
-import { MonacoEditorComponent } from 'app/shared/monaco-editor/monaco-editor.component';
+import { EditorPosition, MonacoEditorComponent } from 'app/shared/monaco-editor/monaco-editor.component';
 import { firstValueFrom, timeout } from 'rxjs';
 import { FEEDBACK_SUGGESTION_ACCEPTED_IDENTIFIER, FEEDBACK_SUGGESTION_IDENTIFIER, Feedback } from 'app/entities/feedback.model';
 import { Course } from 'app/entities/course.model';
@@ -22,7 +22,7 @@ import { CodeEditorTutorAssessmentInlineFeedbackSuggestionComponent } from 'app/
 import { MonacoEditorLineHighlight } from 'app/shared/monaco-editor/model/monaco-editor-line-highlight.model';
 import { FileTypeService } from 'app/exercises/programming/shared/service/file-type.service';
 
-type FileSession = { [fileName: string]: { code: string; cursor: { column: number; row: number }; loadingError: boolean } };
+type FileSession = { [fileName: string]: { code: string; cursor: EditorPosition; loadingError: boolean } };
 export type Annotation = { fileName: string; row: number; column: number; text: string; type: string; timestamp: number; hash?: string };
 @Component({
     selector: 'jhi-code-editor-monaco',
@@ -159,7 +159,7 @@ export class CodeEditorMonacoComponent implements OnChanges {
                     this.onError.emit('loadingFailed');
                 }
             }
-            this.fileSession[fileName] = { code: fileContent, loadingError, cursor: { column: 0, row: 0 } };
+            this.fileSession[fileName] = { code: fileContent, loadingError, cursor: { column: 0, lineNumber: 0 } };
         }
 
         const code = this.fileSession[fileName].code;
@@ -329,7 +329,7 @@ export class CodeEditorMonacoComponent implements OnChanges {
         }
         // In the future, there may be more than one feedback node per line.
         const feedbackNode = this.getInlineFeedbackNodeOrElseThrow(line);
-        // The lines are 0-based for Ace, but 1-based for Monaco -> increase by 1 to ensure it works in both editors.
+        // Feedback is stored with 0-based lines, but the lines of the Monaco editor used in Artemis are 1-based. We add 1 to correct this
         this.editor.addLineWidget(line + 1, 'feedback-' + feedback.id, feedbackNode);
     }
 
@@ -365,7 +365,7 @@ export class CodeEditorMonacoComponent implements OnChanges {
             this.fileSession = this.fileService.updateFileReferences(this.fileSession, fileChange);
             this.storeAnnotations([fileChange.fileName]);
         } else if (fileChange instanceof CreateFileChange && fileChange.fileType === FileType.FILE) {
-            this.fileSession = { ...this.fileSession, [fileChange.fileName]: { code: '', cursor: { row: 0, column: 0 }, loadingError: false } };
+            this.fileSession = { ...this.fileSession, [fileChange.fileName]: { code: '', cursor: { lineNumber: 0, column: 0 }, loadingError: false } };
         }
         this.setBuildAnnotations(this.annotationsArray);
     }
diff --git a/src/main/webapp/app/exercises/quiz/manage/drag-and-drop-question/drag-and-drop-question-edit.component.ts b/src/main/webapp/app/exercises/quiz/manage/drag-and-drop-question/drag-and-drop-question-edit.component.ts
index 784a16bcffcb..49e6017a3f2f 100644
--- a/src/main/webapp/app/exercises/quiz/manage/drag-and-drop-question/drag-and-drop-question-edit.component.ts
+++ b/src/main/webapp/app/exercises/quiz/manage/drag-and-drop-question/drag-and-drop-question-edit.component.ts
@@ -77,9 +77,7 @@ export class DragAndDropQuestionEditComponent implements OnInit, OnChanges, Afte
     @Output() addNewFile = new EventEmitter<{ fileName: string; path?: string; file: File }>();
     @Output() removeFile = new EventEmitter<string>();
 
-    /** Ace Editor configuration constants **/
     questionEditorText = '';
-
     backupQuestion: DragAndDropQuestion;
     filePreviewPaths: Map<string, string> = new Map<string, string>();
     dropAllowed = false;
diff --git a/src/main/webapp/app/exercises/quiz/manage/multiple-choice-question/multiple-choice-question-edit.component.ts b/src/main/webapp/app/exercises/quiz/manage/multiple-choice-question/multiple-choice-question-edit.component.ts
index 014af02dd3b4..be36aaedd0e7 100644
--- a/src/main/webapp/app/exercises/quiz/manage/multiple-choice-question/multiple-choice-question-edit.component.ts
+++ b/src/main/webapp/app/exercises/quiz/manage/multiple-choice-question/multiple-choice-question-edit.component.ts
@@ -39,10 +39,7 @@ export class MultipleChoiceQuestionEditComponent implements OnInit, QuizQuestion
     @Output()
     questionDeleted = new EventEmitter();
 
-    /** Ace Editor configuration constants **/
     questionEditorText = '';
-
-    /** Status boolean for collapse status **/
     isQuestionCollapsed: boolean;
 
     /** Set default preview of the markdown editor as preview for the multiple choice question **/
diff --git a/src/main/webapp/app/exercises/quiz/manage/quiz-management.module.ts b/src/main/webapp/app/exercises/quiz/manage/quiz-management.module.ts
index 2140ad695252..829eae9fbb76 100644
--- a/src/main/webapp/app/exercises/quiz/manage/quiz-management.module.ts
+++ b/src/main/webapp/app/exercises/quiz/manage/quiz-management.module.ts
@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
 import { MultipleChoiceQuestionEditComponent } from './multiple-choice-question/multiple-choice-question-edit.component';
 import { DragAndDropQuestionEditComponent } from './drag-and-drop-question/drag-and-drop-question-edit.component';
 import { ShortAnswerQuestionEditComponent } from './short-answer-question/short-answer-question-edit.component';
-import { AceEditorModule } from 'app/shared/markdown-editor/ace-editor/ace-editor.module';
 import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown-editor.module';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { QuizScoringInfoModalComponent } from './quiz-scoring-info-modal/quiz-scoring-info-modal.component';
@@ -50,7 +49,6 @@ const ENTITY_STATES = [...quizManagementRoute];
         ArtemisSharedModule,
         RouterModule.forChild(ENTITY_STATES),
         DragDropModule,
-        AceEditorModule,
         FormDateTimePickerModule,
         ArtemisQuizQuestionTypesModule,
         ArtemisMarkdownEditorModule,
diff --git a/src/main/webapp/app/exercises/quiz/manage/re-evaluate/multiple-choice-question/re-evaluate-multiple-choice-question.component.ts b/src/main/webapp/app/exercises/quiz/manage/re-evaluate/multiple-choice-question/re-evaluate-multiple-choice-question.component.ts
index acf8aea5f8d2..142869ee1ce8 100644
--- a/src/main/webapp/app/exercises/quiz/manage/re-evaluate/multiple-choice-question/re-evaluate-multiple-choice-question.component.ts
+++ b/src/main/webapp/app/exercises/quiz/manage/re-evaluate/multiple-choice-question/re-evaluate-multiple-choice-question.component.ts
@@ -1,14 +1,13 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { AnswerOption } from 'app/entities/quiz/answer-option.model';
 import { MultipleChoiceQuestion } from 'app/entities/quiz/multiple-choice-question.model';
-import { CorrectOptionCommand } from 'app/shared/markdown-editor/domainCommands/correctOptionCommand';
-import { IncorrectOptionCommand } from 'app/shared/markdown-editor/domainCommands/incorrectOptionCommand';
 import { escapeStringForUseInRegex } from 'app/shared/util/global.utils';
 import { cloneDeep } from 'lodash-es';
-import { EditorMode } from 'app/shared/markdown-editor/markdown-editor.component';
 import { generateExerciseHintExplanation, parseExerciseHintExplanation } from 'app/shared/util/markdown.util';
 import { faAngleDown, faAngleRight, faArrowsAltV, faChevronDown, faChevronUp, faTrash, faUndo } from '@fortawesome/free-solid-svg-icons';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { MonacoCorrectMultipleChoiceAnswerAction } from 'app/shared/monaco-editor/model/actions/quiz/monaco-correct-multiple-choice-answer.action';
+import { MonacoWrongMultipleChoiceAnswerAction } from 'app/shared/monaco-editor/model/actions/quiz/monaco-wrong-multiple-choice-answer.action';
 
 @Component({
     selector: 'jhi-re-evaluate-multiple-choice-question',
@@ -24,7 +23,6 @@ export class ReEvaluateMultipleChoiceQuestionComponent implements OnInit {
     @Output() questionMoveUp = new EventEmitter<object>();
     @Output() questionMoveDown = new EventEmitter<object>();
 
-    editorMode = EditorMode.NONE;
     markdownMap: Map<number, string>;
     questionText: string;
 
@@ -47,7 +45,9 @@ export class ReEvaluateMultipleChoiceQuestionComponent implements OnInit {
         for (const answer of this.question.answerOptions!) {
             this.markdownMap.set(
                 answer.id!,
-                (answer.isCorrect ? CorrectOptionCommand.IDENTIFIER : IncorrectOptionCommand.IDENTIFIER) + ' ' + generateExerciseHintExplanation(answer),
+                (answer.isCorrect ? MonacoCorrectMultipleChoiceAnswerAction.IDENTIFIER : MonacoWrongMultipleChoiceAnswerAction.IDENTIFIER) +
+                    ' ' +
+                    generateExerciseHintExplanation(answer),
             );
         }
         this.questionText = this.getQuestionText(this.question);
@@ -104,9 +104,9 @@ export class ReEvaluateMultipleChoiceQuestionComponent implements OnInit {
         const startOfThisPart = text.indexOf(answerOptionText);
         const box = text.substring(0, startOfThisPart);
         // Check if box says this answer option is correct or not
-        if (box === CorrectOptionCommand.IDENTIFIER) {
+        if (box === MonacoCorrectMultipleChoiceAnswerAction.IDENTIFIER) {
             answer.isCorrect = true;
-        } else if (box === IncorrectOptionCommand.IDENTIFIER) {
+        } else if (box === MonacoWrongMultipleChoiceAnswerAction.IDENTIFIER) {
             answer.isCorrect = false;
         } else {
             answer.isCorrect = undefined;
@@ -119,7 +119,10 @@ export class ReEvaluateMultipleChoiceQuestionComponent implements OnInit {
      * @param text
      */
     private static splitByCorrectIncorrectTag(text: string): string[] {
-        const stringForSplit = escapeStringForUseInRegex(`${CorrectOptionCommand.IDENTIFIER}`) + '|' + escapeStringForUseInRegex(`${IncorrectOptionCommand.IDENTIFIER}`);
+        const stringForSplit =
+            escapeStringForUseInRegex(`${MonacoCorrectMultipleChoiceAnswerAction.IDENTIFIER}`) +
+            '|' +
+            escapeStringForUseInRegex(`${MonacoWrongMultipleChoiceAnswerAction.IDENTIFIER}`);
         const splitRegExp = new RegExp(stringForSplit, 'g');
         return text.split(splitRegExp);
     }
diff --git a/src/main/webapp/app/exercises/quiz/manage/short-answer-question/short-answer-question-edit.component.ts b/src/main/webapp/app/exercises/quiz/manage/short-answer-question/short-answer-question-edit.component.ts
index 538966d0c15f..86264112bb2d 100644
--- a/src/main/webapp/app/exercises/quiz/manage/short-answer-question/short-answer-question-edit.component.ts
+++ b/src/main/webapp/app/exercises/quiz/manage/short-answer-question/short-answer-question-edit.component.ts
@@ -25,8 +25,7 @@ import { markdownForHtml } from 'app/shared/util/markdown.conversion.util';
 import { generateExerciseHintExplanation, parseExerciseHintExplanation } from 'app/shared/util/markdown.util';
 import { faAngleDown, faAngleRight, faBan, faBars, faChevronDown, faChevronUp, faTrash, faUndo, faUnlink } from '@fortawesome/free-solid-svg-icons';
 import { MAX_QUIZ_QUESTION_POINTS, MAX_QUIZ_SHORT_ANSWER_TEXT_LENGTH } from 'app/shared/constants/input.constants';
-import { MarkdownEditorMonacoComponent } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
-import { MarkdownEditorHeight } from 'app/shared/markdown-editor/markdown-editor.component';
+import { MarkdownEditorHeight, MarkdownEditorMonacoComponent } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
 import { MonacoBoldAction } from 'app/shared/monaco-editor/model/actions/monaco-bold.action';
 import { MonacoItalicAction } from 'app/shared/monaco-editor/model/actions/monaco-italic.action';
 import { MonacoUnderlineAction } from 'app/shared/monaco-editor/model/actions/monaco-underline.action';
diff --git a/src/main/webapp/app/exercises/shared/exercise-hint/manage/exercise-hint-update.component.ts b/src/main/webapp/app/exercises/shared/exercise-hint/manage/exercise-hint-update.component.ts
index c4c7b78f0496..b734c1c628df 100644
--- a/src/main/webapp/app/exercises/shared/exercise-hint/manage/exercise-hint-update.component.ts
+++ b/src/main/webapp/app/exercises/shared/exercise-hint/manage/exercise-hint-update.component.ts
@@ -4,7 +4,6 @@ import { ActivatedRoute } from '@angular/router';
 import { Observable, Subscription, filter, switchMap } from 'rxjs';
 import { AlertService } from 'app/core/util/alert.service';
 import { ExerciseHintService } from '../shared/exercise-hint.service';
-import { MarkdownEditorHeight } from 'app/shared/markdown-editor/markdown-editor.component';
 import { ArtemisNavigationUtilService } from 'app/utils/navigation.utils';
 import { faBan, faCircleNotch, faSave } from '@fortawesome/free-solid-svg-icons';
 import { ExerciseHint, HintType } from 'app/entities/hestia/exercise-hint.model';
@@ -23,6 +22,7 @@ import { ProfileService } from 'app/shared/layouts/profiles/profile.service';
 import { ButtonType } from 'app/shared/components/button.component';
 import { PROFILE_IRIS } from 'app/app.constants';
 import { MonacoFormulaAction } from 'app/shared/monaco-editor/model/actions/monaco-formula.action';
+import { MarkdownEditorHeight } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
 
 const DEFAULT_DISPLAY_THRESHOLD = 3;
 
diff --git a/src/main/webapp/app/exercises/shared/structured-grading-criterion/grading-instructions-details/grading-instructions-details.component.ts b/src/main/webapp/app/exercises/shared/structured-grading-criterion/grading-instructions-details/grading-instructions-details.component.ts
index 64448a6f4569..7f6fa6f89ccd 100644
--- a/src/main/webapp/app/exercises/shared/structured-grading-criterion/grading-instructions-details/grading-instructions-details.component.ts
+++ b/src/main/webapp/app/exercises/shared/structured-grading-criterion/grading-instructions-details/grading-instructions-details.component.ts
@@ -1,6 +1,5 @@
 import { AfterContentInit, ChangeDetectorRef, Component, Input, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
 import { GradingCriterion } from 'app/exercises/shared/structured-grading-criterion/grading-criterion.model';
-import { MarkdownEditorHeight } from 'app/shared/markdown-editor/markdown-editor.component';
 import { GradingInstruction } from 'app/exercises/shared/structured-grading-criterion/grading-instruction.model';
 import { Exercise } from 'app/entities/exercise.model';
 import { cloneDeep } from 'lodash-es';
@@ -11,7 +10,7 @@ import { MonacoGradingScaleAction } from 'app/shared/monaco-editor/model/actions
 import { MonacoGradingDescriptionAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-description.action';
 import { MonacoGradingFeedbackAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-feedback.action';
 import { MonacoGradingUsageCountAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-usage-count.action';
-import { MarkdownEditorMonacoComponent, TextWithDomainAction } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
+import { MarkdownEditorHeight, MarkdownEditorMonacoComponent, TextWithDomainAction } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
 import { MonacoGradingCriterionAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-criterion.action';
 import { MonacoGradingInstructionAction } from 'app/shared/monaco-editor/model/actions/grading-criteria/monaco-grading-instruction.action';
 
@@ -21,8 +20,6 @@ import { MonacoGradingInstructionAction } from 'app/shared/monaco-editor/model/a
     styleUrls: ['./grading-instructions-details.component.scss'],
 })
 export class GradingInstructionsDetailsComponent implements OnInit, AfterContentInit {
-    /** Ace Editor configuration constants **/
-    markdownEditorText = '';
     @ViewChildren('markdownEditors')
     private markdownEditors: QueryList<MarkdownEditorMonacoComponent>;
     @ViewChild('markdownEditor', { static: false })
@@ -33,6 +30,8 @@ export class GradingInstructionsDetailsComponent implements OnInit, AfterContent
     private criteria: GradingCriterion[];
 
     backupExercise: Exercise;
+    markdownEditorText = '';
+    showEditMode: boolean;
 
     creditsAction = new MonacoGradingCreditsAction();
     gradingScaleAction = new MonacoGradingScaleAction();
@@ -52,8 +51,6 @@ export class GradingInstructionsDetailsComponent implements OnInit, AfterContent
         this.gradingCriterionAction,
     ];
 
-    showEditMode: boolean;
-
     domainActionsForGradingInstructionParsing: MonacoEditorDomainAction[] = [
         this.creditsAction,
         this.gradingScaleAction,
diff --git a/src/main/webapp/app/guided-tour/guided-tour.component.html b/src/main/webapp/app/guided-tour/guided-tour.component.html
index 573b73a72161..b970883717e9 100644
--- a/src/main/webapp/app/guided-tour/guided-tour.component.html
+++ b/src/main/webapp/app/guided-tour/guided-tour.component.html
@@ -92,7 +92,7 @@ <h5 jhiTranslate="{{ currentTourStep.subHeadlineTranslateKey }}" class="sub-head
                                         @if (currentTourStep.userInteractionEvent === UserInteractionEvent.CLICK) {
                                             <fa-icon [icon]="faHandPointUp" />
                                         }
-                                        @if (currentTourStep.userInteractionEvent === UserInteractionEvent.ACE_EDITOR) {
+                                        @if (currentTourStep.userInteractionEvent === UserInteractionEvent.MONACO_EDITOR) {
                                             <fa-icon [icon]="faICursor" />
                                         }
                                         @if (currentTourStep.userInteractionEvent === UserInteractionEvent.WAIT_FOR_SELECTOR) {
@@ -110,7 +110,7 @@ <h5 jhiTranslate="{{ currentTourStep.subHeadlineTranslateKey }}" class="sub-head
                                     @if (currentTourStep.userInteractionEvent === UserInteractionEvent.CLICK) {
                                         <span [jhiTranslate]="'tour.clickHint.text'"></span>
                                     }
-                                    @if (currentTourStep.userInteractionEvent === UserInteractionEvent.ACE_EDITOR) {
+                                    @if (currentTourStep.userInteractionEvent === UserInteractionEvent.MONACO_EDITOR) {
                                         <span [jhiTranslate]="'tour.typeHint.text'"></span>
                                     }
                                     @if (currentTourStep.userInteractionEvent === UserInteractionEvent.WAIT_FOR_SELECTOR) {
diff --git a/src/main/webapp/app/guided-tour/guided-tour.constants.ts b/src/main/webapp/app/guided-tour/guided-tour.constants.ts
index 58605d5f213c..5c2e08c5a322 100644
--- a/src/main/webapp/app/guided-tour/guided-tour.constants.ts
+++ b/src/main/webapp/app/guided-tour/guided-tour.constants.ts
@@ -34,7 +34,7 @@ export enum UserInteractionEvent {
     /** Listen for click events */
     CLICK = 'click',
     /** Observe added or removed lines in the code editor */
-    ACE_EDITOR = 'ace-editor',
+    MONACO_EDITOR = 'monaco-editor',
     /** Wait for the highlight element of the next tour step to be shown in the DOM */
     WAIT_FOR_SELECTOR = 'wait-for-selector',
     /** Observe and assess the given modeling task in the Apollon editor */
diff --git a/src/main/webapp/app/guided-tour/guided-tour.service.ts b/src/main/webapp/app/guided-tour/guided-tour.service.ts
index 71865327a9cc..dcf2872f1f98 100644
--- a/src/main/webapp/app/guided-tour/guided-tour.service.ts
+++ b/src/main/webapp/app/guided-tour/guided-tour.service.ts
@@ -641,9 +641,9 @@ export class GuidedTourService {
                     },
                     false,
                 );
-            } else if (userInteraction === UserInteractionEvent.ACE_EDITOR) {
-                /** We observe any added or removed lines in the .ace_text-layer node and trigger enableNextStepClick() */
-                targetNode = document.querySelector('.ace_text-layer') as HTMLElement;
+            } else if (userInteraction === UserInteractionEvent.MONACO_EDITOR) {
+                /** We observe any added or removed lines in the Monaco editor's .view-lines node and trigger enableNextStepClick() */
+                targetNode = document.querySelector('.monaco-editor .view-lines') as HTMLElement;
                 this.observeMutations(targetNode, options)
                     .pipe(
                         filter(
diff --git a/src/main/webapp/app/guided-tour/tours/code-editor-tour.ts b/src/main/webapp/app/guided-tour/tours/code-editor-tour.ts
index a213c1f0dcb0..19c2067ff031 100644
--- a/src/main/webapp/app/guided-tour/tours/code-editor-tour.ts
+++ b/src/main/webapp/app/guided-tour/tours/code-editor-tour.ts
@@ -24,11 +24,11 @@ export const codeEditorTour: GuidedTour = {
         }),
         new UserInterActionTourStep({
             highlightSelector: '.guided-tour-editor',
-            headlineTranslateKey: 'tour.programmingExercise.codeEditor.aceEditor.headline',
-            contentTranslateKey: 'tour.programmingExercise.codeEditor.aceEditor.content',
+            headlineTranslateKey: 'tour.programmingExercise.codeEditor.monacoEditor.headline',
+            contentTranslateKey: 'tour.programmingExercise.codeEditor.monacoEditor.content',
             highlightPadding: 5,
             orientation: Orientation.RIGHT,
-            userInteractionEvent: UserInteractionEvent.ACE_EDITOR,
+            userInteractionEvent: UserInteractionEvent.MONACO_EDITOR,
         }),
         new UserInterActionTourStep({
             highlightSelector: '.guided-tour-save-button',
diff --git a/src/main/webapp/app/orion/management/code-editor-instructor-and-editor-orion-container.component.ts b/src/main/webapp/app/orion/management/code-editor-instructor-and-editor-orion-container.component.ts
index dabe5aac4009..fece685811c2 100644
--- a/src/main/webapp/app/orion/management/code-editor-instructor-and-editor-orion-container.component.ts
+++ b/src/main/webapp/app/orion/management/code-editor-instructor-and-editor-orion-container.component.ts
@@ -13,7 +13,8 @@ import { OrionBuildAndTestService } from 'app/shared/orion/orion-build-and-test.
 import { OrionState } from 'app/shared/orion/orion';
 import { faCircleNotch, faTimesCircle } from '@fortawesome/free-solid-svg-icons';
 import { CourseExerciseService } from 'app/exercises/shared/course-exercises/course-exercise.service';
-import { MarkdownEditorHeight } from 'app/shared/markdown-editor/markdown-editor.component';
+
+import { MarkdownEditorHeight } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
 
 @Component({
     selector: 'jhi-code-editor-instructor-orion',
diff --git a/src/main/webapp/app/shared/markdown-editor/ace-editor/ace-editor.component.ts b/src/main/webapp/app/shared/markdown-editor/ace-editor/ace-editor.component.ts
deleted file mode 100644
index d0ddebb5007b..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/ace-editor/ace-editor.component.ts
+++ /dev/null
@@ -1,247 +0,0 @@
-import { Component, ElementRef, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output, forwardRef } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import 'brace';
-import 'brace/theme/monokai';
-import 'brace/theme/chrome';
-import 'brace/theme/dreamweaver';
-import 'brace/theme/dracula';
-import 'brace/ext/language_tools';
-import 'brace/ext/modelist';
-import 'brace/mode/java';
-import 'brace/mode/sh';
-import 'brace/mode/markdown';
-import 'brace/mode/haskell';
-import 'brace/mode/ocaml';
-import 'brace/mode/c_cpp';
-import 'brace/mode/python';
-import 'brace/mode/swift';
-import 'brace/mode/yaml';
-import 'brace/mode/makefile';
-import 'brace/mode/kotlin';
-import 'brace/mode/assembly_x86';
-import 'brace/mode/vhdl';
-import { ThemeService } from 'app/core/theme/theme.service';
-import { Subscription } from 'rxjs';
-
-declare let ace: any;
-
-export const MAX_TAB_SIZE = 8;
-
-@Component({
-    selector: 'jhi-ace-editor',
-    template: '',
-    styles: [':host { display:block;width:100%; }'],
-    providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => AceEditorComponent),
-            multi: true,
-        },
-    ],
-})
-export class AceEditorComponent implements ControlValueAccessor, OnInit, OnDestroy {
-    @Output() textChanged = new EventEmitter();
-    @Output() textChange = new EventEmitter();
-    @Input() style: any = {};
-
-    /**
-     * Sets the size in spaces of newly inserted tabs and the display size of existing true tabs.
-     *
-     * @param value The display width between 1 and {@link MAX_TAB_SIZE} (both inclusive).
-     */
-    @Input()
-    public set tabSize(value: number) {
-        if (value > 0 && value <= MAX_TAB_SIZE) {
-            this._editor.session.setTabSize(value);
-        }
-    }
-
-    oldText: string;
-    timeoutSaving: any;
-
-    private _options: any = {};
-    private _readOnly = false;
-    private _theme = 'dreamweaver';
-    private _mode = 'java';
-    private _autoUpdateContent = true;
-    private _editor: any; // TODO: use Editor (defined in brace) or Editor (defined in ace-builds) and make sure to use typings consistently
-    private _durationBeforeCallback = 0;
-    private _text = '';
-
-    private themeSubscription: Subscription;
-
-    constructor(
-        elementRef: ElementRef,
-        private zone: NgZone,
-        private themeService: ThemeService,
-    ) {
-        const el = elementRef.nativeElement;
-        this.zone.runOutsideAngular(() => {
-            this._editor = ace['edit'](el);
-        });
-        this._editor.$blockScrolling = Infinity;
-    }
-
-    ngOnInit() {
-        this.init();
-        this.initEvents();
-    }
-
-    ngOnDestroy() {
-        this._editor.destroy();
-        this.themeSubscription?.unsubscribe();
-    }
-
-    init() {
-        this.setOptions(this._options || {});
-        this.setMode(this._mode);
-        this.setReadOnly(this._readOnly);
-    }
-
-    initEvents() {
-        this._editor.on('change', () => this.updateText());
-        this._editor.on('paste', () => this.updateText());
-
-        this.themeSubscription = this.themeService.getCurrentThemeObservable().subscribe(() => this.setThemeFromMode());
-    }
-
-    updateText() {
-        const newVal = this._editor.getValue();
-        if (newVal === this.oldText) {
-            return;
-        }
-        if (!this._durationBeforeCallback) {
-            this._text = newVal;
-            this.zone.run(() => {
-                this.textChange.emit(newVal);
-                this.textChanged.emit(newVal);
-            });
-            this._onChange(newVal);
-        } else {
-            if (this.timeoutSaving) {
-                clearTimeout(this.timeoutSaving);
-            }
-
-            this.timeoutSaving = setTimeout(() => {
-                this._text = newVal;
-                this.zone.run(() => {
-                    this.textChange.emit(newVal);
-                    this.textChanged.emit(newVal);
-                });
-                this.timeoutSaving = null;
-            }, this._durationBeforeCallback);
-        }
-        this.oldText = newVal;
-    }
-
-    @Input()
-    set options(options: any) {
-        this.setOptions(options);
-    }
-
-    setOptions(options: any) {
-        this._options = options;
-        this._editor.setOptions(options || {});
-    }
-
-    @Input()
-    set readOnly(readOnly: boolean) {
-        this.setReadOnly(readOnly);
-    }
-
-    setReadOnly(readOnly: boolean) {
-        this._readOnly = readOnly;
-        this._editor.setReadOnly(readOnly);
-    }
-
-    @Input()
-    set mode(mode: string) {
-        this.setMode(mode);
-    }
-
-    setMode(mode: string) {
-        this._mode = mode;
-        if (typeof this._mode === 'object') {
-            this._editor.getSession().setMode(this._mode);
-        } else {
-            this._editor.getSession().setMode(`ace/mode/${this._mode}`);
-        }
-
-        this.setThemeFromMode();
-    }
-
-    private setThemeFromMode() {
-        const currentApplicationTheme = this.themeService.getCurrentTheme();
-        this._theme = this._mode.toLowerCase() === 'markdown' ? currentApplicationTheme.markdownAceTheme : currentApplicationTheme.codeAceTheme;
-        this._editor.setTheme(`ace/theme/${this._theme}`);
-    }
-
-    get value() {
-        return this.text;
-    }
-
-    @Input()
-    set value(value: string) {
-        this.setText(value);
-    }
-
-    writeValue(value: string) {
-        this.setText(value);
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    private _onChange = (_: any) => {};
-
-    registerOnChange(fn: any) {
-        this._onChange = fn;
-    }
-
-    private _onTouched = () => {};
-
-    registerOnTouched(fn: any) {
-        this._onTouched = fn;
-    }
-
-    get text() {
-        return this._text;
-    }
-
-    @Input()
-    set text(text: string) {
-        this.setText(text);
-    }
-
-    setText(text: string) {
-        if (text == undefined) {
-            text = '';
-        }
-        if (this._text !== text && this._autoUpdateContent) {
-            this._text = text;
-            this._editor.setValue(text);
-            this._onChange(text);
-            this._editor.clearSelection();
-        }
-    }
-
-    @Input()
-    set autoUpdateContent(status: boolean) {
-        this.setAutoUpdateContent(status);
-    }
-
-    setAutoUpdateContent(status: boolean) {
-        this._autoUpdateContent = status;
-    }
-
-    @Input()
-    set durationBeforeCallback(num: number) {
-        this.setDurationBeforeCallback(num);
-    }
-
-    setDurationBeforeCallback(num: number) {
-        this._durationBeforeCallback = num;
-    }
-
-    getEditor() {
-        return this._editor;
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/ace-editor/ace-editor.module.ts b/src/main/webapp/app/shared/markdown-editor/ace-editor/ace-editor.module.ts
deleted file mode 100644
index 4962eeb93346..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/ace-editor/ace-editor.module.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { NgModule } from '@angular/core';
-import { AceEditorComponent } from 'app/shared/markdown-editor/ace-editor/ace-editor.component';
-
-@NgModule({
-    declarations: [AceEditorComponent],
-    exports: [AceEditorComponent],
-})
-export class AceEditorModule {}
diff --git a/src/main/webapp/app/shared/markdown-editor/command-constants.ts b/src/main/webapp/app/shared/markdown-editor/command-constants.ts
deleted file mode 100644
index a65e67529016..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/command-constants.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { ReferenceType } from 'app/shared/metis/metis.util';
-
-export type ValueItem = {
-    id: string;
-    value: string;
-    type?: string;
-    elements?: ValueItem[];
-    attachmentUnits?: ValueItem[];
-};
-
-export type SlideItem = {
-    id: string;
-    slideImagePath: string;
-    slideNumber: number;
-    courseArtifactType: ReferenceType;
-};
diff --git a/src/main/webapp/app/shared/markdown-editor/commands/attachmentCommand.ts b/src/main/webapp/app/shared/markdown-editor/commands/attachmentCommand.ts
deleted file mode 100644
index 19dcfaa8d522..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/commands/attachmentCommand.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { faImage } from '@fortawesome/free-solid-svg-icons';
-import { Command } from './command';
-
-export class AttachmentCommand extends Command {
-    buttonIcon = faImage as IconProp;
-    buttonTranslationString = 'artemisApp.multipleChoiceQuestion.editor.imageUpload';
-
-    /**
-     * @function execute
-     * @desc insert/remove the markdown command for uploading an attachment
-     *       1. Check if the selected text includes ('![](http://)')
-     *       2. If included reduce the selected text by this elements and replace the selected text by textToAdd
-     *       3. If not included add ('![](http://)') at the cursor position in the editor
-     *       4. Attachment in Markdown language appears
-     */
-    execute(): void {
-        let selectedText = this.getSelectedText();
-
-        if (selectedText.includes('![](http://)')) {
-            const textToAdd = selectedText.slice(12);
-            this.insertText(textToAdd);
-        } else {
-            const range = this.getRange();
-            selectedText = `![](http://)`;
-            this.replace(range, selectedText);
-            this.focus();
-        }
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/commands/bold.command.ts b/src/main/webapp/app/shared/markdown-editor/commands/bold.command.ts
deleted file mode 100644
index 3ebf66c361a6..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/commands/bold.command.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { faBold } from '@fortawesome/free-solid-svg-icons';
-import { Command } from './command';
-
-export class BoldCommand extends Command {
-    buttonIcon = faBold as IconProp;
-    buttonTranslationString = 'artemisApp.multipleChoiceQuestion.editor.bold';
-
-    /**
-     * @function execute
-     * @desc Make/Remove bold text
-     *       1. Check if the selected text includes (**)
-     *       2. If included reduce the selected text by these elements and replace the selected text by textToAdd
-     *       3. If not included, add (**) before and after the selected text and insert them into the editor
-     *       4. Bold markdown appears
-     */
-    execute(): void {
-        const selectedText = this.getSelectedText();
-        let textToAdd = '';
-
-        if (selectedText.slice(0, 2) === '**' && selectedText.slice(selectedText.length - 2, selectedText.length) === '**') {
-            textToAdd = selectedText.slice(2, -2);
-            this.insertText(textToAdd);
-        } else {
-            const trimmedText = this.deleteWhiteSpace(selectedText);
-            textToAdd = `**${trimmedText}**`;
-            this.addRefinedText(selectedText, textToAdd);
-        }
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/commands/code.command.ts b/src/main/webapp/app/shared/markdown-editor/commands/code.command.ts
deleted file mode 100644
index 37382b93d663..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/commands/code.command.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { faCode } from '@fortawesome/free-solid-svg-icons';
-import { Command } from './command';
-
-export class CodeCommand extends Command {
-    buttonIcon = faCode as IconProp;
-    buttonTranslationString = 'artemisApp.multipleChoiceQuestion.editor.code';
-
-    /**
-     * @function execute
-     * @desc 1. check if the selected text starts with '`' and ends with '`'
-     *       2. if it does include those elements reduce the selected text by this elements and add replace the selected text by the reduced text
-     *       3. if it does not include those add (`) before and after the selected text and add them to the text editor
-     *       4. code markdown appears
-     */
-    execute(): void {
-        let selectedText = this.getSelectedText();
-
-        if (selectedText.startsWith('`') && selectedText.endsWith('`')) {
-            const textToAdd = selectedText.slice(1, -1);
-            this.insertText(textToAdd);
-        } else {
-            const range = this.getRange();
-            selectedText = '`' + selectedText + '`';
-            this.replace(range, selectedText);
-            this.focus();
-        }
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/commands/codeblock.command.ts b/src/main/webapp/app/shared/markdown-editor/commands/codeblock.command.ts
deleted file mode 100644
index 7adeb548b581..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/commands/codeblock.command.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { faFileCode } from '@fortawesome/free-solid-svg-icons';
-import { Command } from './command';
-
-export class CodeBlockCommand extends Command {
-    buttonIcon = faFileCode as IconProp;
-    buttonTranslationString = 'artemisApp.multipleChoiceQuestion.editor.codeBlock';
-
-    /**
-     * @function execute
-     * @desc add (```java) before and (```) after the selected text
-     */
-    execute(): void {
-        let selectedText = this.getSelectedText();
-        const range = this.getRange();
-        const initText = 'Source Code';
-        selectedText = '```java\n' + (selectedText || initText) + '\n```';
-        this.replace(range, selectedText);
-        this.focus();
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/commands/colorPicker.command.ts b/src/main/webapp/app/shared/markdown-editor/commands/colorPicker.command.ts
deleted file mode 100644
index a311650ac3bb..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/commands/colorPicker.command.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { Command } from './command';
-
-export class ColorPickerCommand extends Command {
-    buttonIcon = '' as IconProp;
-    buttonTranslationString = 'artemisApp.multipleChoiceQuestion.editor.color';
-
-    /**
-     * @function execute
-     * @desc Set/ Remove color
-     *       1. Check if the selected text includes (<span)
-     *       2. If included reduce the selected text by the html elements for setting the color and replace the selected text by textToAdd
-     *       3. If not included insert the html element that change the style of the selectedText by setting the chosen color
-     *       4. Color changes occur
-     */
-    execute(color: string): void {
-        const selectedText = this.getSelectedText();
-
-        if (selectedText.includes('class="green"') || selectedText.includes('class="white"')) {
-            const textToAdd = selectedText.slice(20, -7);
-            this.insertText(textToAdd);
-        } else if (selectedText.includes('class="yellow"') || selectedText.includes('class="orange"')) {
-            const textToAdd = selectedText.slice(21, -7);
-            this.insertText(textToAdd);
-        } else if (selectedText.includes('class="red"')) {
-            const textToAdd = selectedText.slice(18, -7);
-            this.insertText(textToAdd);
-        } else if (selectedText.includes('class="blue"') || selectedText.includes('class="lila"')) {
-            const textToAdd = selectedText.slice(19, -7);
-            this.insertText(textToAdd);
-        } else {
-            this.insertHTMLForColorChange(selectedText, color);
-        }
-    }
-
-    /**
-     * @function insertHTMLForColorChange
-     * @desc Insert a html span with the color changes
-     * Note: Markdown does not support color changes - this is why html injection is used
-     */
-    insertHTMLForColorChange(selectedText: string, color: string) {
-        let textToAdd = '';
-        switch (color) {
-            case '#ca2024':
-                textToAdd = `<span class="red">` + `${selectedText}` + `</span>`;
-                this.insertText(textToAdd);
-                break;
-            case '#3ea119':
-                textToAdd = `<span class="green">` + `${selectedText}` + `</span>`;
-                this.insertText(textToAdd);
-                break;
-            case '#ffffff':
-                textToAdd = `<span class="white">` + `${selectedText}` + `</span>`;
-                this.insertText(textToAdd);
-                break;
-            case '#000000':
-                textToAdd = `${selectedText}`;
-                // this.execute('#000000');
-                // textToAdd = `<span class="black">` + `${selectedText}` + `</span>`;
-                this.insertText(textToAdd);
-                break;
-            case '#fffa5c':
-                textToAdd = `<span class="yellow">` + `${selectedText}` + `</span>`;
-                this.insertText(textToAdd);
-                break;
-            case '#0d3cc2':
-                textToAdd = `<span class="blue">` + `${selectedText}` + `</span>`;
-                this.insertText(textToAdd);
-                break;
-            case '#b05db8':
-                textToAdd = `<span class="lila">` + `${selectedText}` + `</span>`;
-                this.insertText(textToAdd);
-                break;
-            case '#d86b1f':
-                textToAdd = `<span class="orange">` + `${selectedText}` + `</span>`;
-                this.insertText(textToAdd);
-                break;
-        }
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/commands/command.ts b/src/main/webapp/app/shared/markdown-editor/commands/command.ts
deleted file mode 100644
index af44c39a9136..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/commands/command.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-import { ElementRef } from '@angular/core';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { Range, acequire } from 'brace';
-
-// Work around to update the range
-const RangeCtor = acequire('ace/range').Range as typeof Range;
-
-/**
- * abstract class for all commands - default and domain commands of Artemis
- * default commands: markdown commands e.g. bold, italic
- * domain commands: Artemis customized commands
- */
-export abstract class Command {
-    buttonIcon: IconProp;
-    buttonTranslationString: string;
-    protected aceEditor: any;
-    protected markdownWrapper: ElementRef;
-
-    public setEditor(aceEditor: any): void {
-        this.aceEditor = aceEditor;
-    }
-
-    public setMarkdownWrapper(ref: ElementRef) {
-        this.markdownWrapper = ref;
-    }
-
-    protected getSelectedText(): string {
-        return this.aceEditor.getSelectedText();
-    }
-
-    /**
-     * Extends the current selection to full lines.
-     *
-     * @return The complete lines of the selected text.
-     */
-    protected getExtendedSelectedText(): string[] {
-        const text = this.getText();
-
-        // Split text by line breaks
-        const lines = text.split('\n');
-
-        const range = this.getRange();
-
-        // Update the range
-        this.aceEditor.selection.setRange(new RangeCtor(range.start.row, 0, range.end.row, lines[range.end.row].length));
-
-        // Return extended selection as array
-        return lines.slice(range.start.row, range.end.row + 1);
-    }
-
-    protected getText(): string {
-        return this.aceEditor.getValue();
-    }
-
-    protected insertText(text: string) {
-        this.aceEditor.insert(text);
-    }
-
-    protected focus() {
-        this.aceEditor.focus();
-    }
-
-    protected getRange(): Range {
-        return this.aceEditor.selection.getRange();
-    }
-
-    protected replace(range: Range, text: string) {
-        this.aceEditor.session.replace(range, text);
-    }
-
-    protected clearSelection() {
-        this.aceEditor.clearSelection();
-    }
-
-    protected moveCursorTo(row: number, column: number) {
-        this.aceEditor.moveCursorTo(row, column);
-    }
-
-    protected getCursorPosition() {
-        return this.aceEditor.getCursorPosition();
-    }
-
-    protected getLine(row: number) {
-        return this.aceEditor.getSession().getLine(row);
-    }
-
-    protected getCurrentLine() {
-        const cursor = this.getCursorPosition();
-        return this.getLine(cursor.row);
-    }
-
-    protected moveCursorToEndOfRow() {
-        const cursor = this.getCursorPosition();
-        const currentLine = this.aceEditor.getSession().getLine(cursor.row);
-        this.clearSelection();
-        this.moveCursorTo(cursor.row, currentLine.length);
-    }
-
-    protected addCompleter(completer: any) {
-        this.aceEditor.completers = [...(this.aceEditor.completers || []), completer];
-    }
-
-    abstract execute(input?: string): void;
-
-    protected deleteWhiteSpace(text: string) {
-        return text.trim();
-    }
-
-    protected addRefinedText(selectedText: string, textToAdd: string) {
-        if (selectedText.charAt(0) === ' ' && selectedText.charAt(selectedText.length - 1) === ' ') {
-            return this.insertText(' ' + textToAdd + ' ');
-        } else if (selectedText.charAt(0) === ' ') {
-            return this.insertText(' ' + textToAdd);
-        } else if (selectedText.charAt(selectedText.length - 1) === ' ') {
-            return this.insertText(textToAdd + ' ');
-        } else {
-            return this.insertText(textToAdd);
-        }
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/commands/courseArtifactReferenceCommands/channelMentionCommand.ts b/src/main/webapp/app/shared/markdown-editor/commands/courseArtifactReferenceCommands/channelMentionCommand.ts
deleted file mode 100644
index 58241d8b73de..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/commands/courseArtifactReferenceCommands/channelMentionCommand.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { InteractiveSearchCommand } from 'app/shared/markdown-editor/commands/interactiveSearchCommand';
-import { faHashtag } from '@fortawesome/free-solid-svg-icons';
-import { HttpResponse } from '@angular/common/http';
-import { Observable, map, of } from 'rxjs';
-import { MetisService } from 'app/shared/metis/metis.service';
-import { ChannelIdAndNameDTO } from 'app/entities/metis/conversation/channel.model';
-import { ChannelService } from 'app/shared/metis/conversations/channel.service';
-
-export class ChannelMentionCommand extends InteractiveSearchCommand {
-    buttonIcon = faHashtag;
-
-    private cachedResponse: HttpResponse<ChannelIdAndNameDTO[]>;
-
-    constructor(
-        private readonly channelService: ChannelService,
-        private readonly metisService: MetisService,
-    ) {
-        super();
-    }
-
-    protected getAssociatedInputCharacter(): string {
-        return '#';
-    }
-
-    performSearch(searchTerm: string): Observable<HttpResponse<ChannelIdAndNameDTO[]>> {
-        // all channels are returned within a response. Therefore, the command can cache it
-        if (this.cachedResponse) {
-            return of(this.filterCachedResponse(searchTerm));
-        }
-        return this.channelService.getPublicChannelsOfCourse(this.metisService.getCourse().id!).pipe(
-            map((response) => {
-                this.cachedResponse = response;
-                return this.filterCachedResponse(searchTerm);
-            }),
-        );
-    }
-
-    protected selectionToText(selected: ChannelIdAndNameDTO): string {
-        return `[channel]${selected['name'] ?? 'empty'}(${selected.id})[/channel]`;
-    }
-
-    private filterCachedResponse(searchTerm: string): HttpResponse<ChannelIdAndNameDTO[]> {
-        const channels = this.cachedResponse.body!.filter((dto) => dto.name?.toLowerCase().includes(searchTerm.toLowerCase()));
-        return new HttpResponse({ body: channels });
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/commands/courseArtifactReferenceCommands/exerciseReferenceCommand.ts b/src/main/webapp/app/shared/markdown-editor/commands/courseArtifactReferenceCommands/exerciseReferenceCommand.ts
deleted file mode 100644
index ba955b868eb9..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/commands/courseArtifactReferenceCommands/exerciseReferenceCommand.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { MultiOptionCommand } from 'app/shared/markdown-editor/commands/multiOptionCommand';
-import { MetisService } from 'app/shared/metis/metis.service';
-
-export class ExerciseReferenceCommand extends MultiOptionCommand {
-    metisService: MetisService;
-
-    buttonTranslationString = 'artemisApp.metis.editor.exercise';
-
-    constructor(metisService: MetisService) {
-        super();
-        this.metisService = metisService;
-
-        this.setValues(
-            // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
-            this.metisService.getCourse().exercises?.map((exercise) => ({
-                id: exercise.id!.toString(),
-                value: exercise.title!,
-                type: exercise.type,
-            }))!,
-        );
-    }
-
-    /**
-     * @function execute
-     * @param {string} selectedExerciseId   ID of the exercise to be referenced
-     * @desc                                Add an exercise reference link in markdown language
-     *                                      1. Add '[{exercise-title}](/courses/{courseId}/exercises/{exerciseId}})' at the cursor in the editor
-     *                                      2. Link in markdown language appears which when clicked navigates to the exercise page
-     */
-    execute(selectedExerciseId: string): void {
-        const selectedExercise = this.getValues().find((value) => value.id.toString() === selectedExerciseId)!;
-        const referenceLink = `[${selectedExercise.type}]${selectedExercise.value}(${this.metisService.getLinkForExercise(selectedExercise.id)})[/${selectedExercise.type}]`;
-        this.insertText(referenceLink);
-        this.focus();
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/commands/courseArtifactReferenceCommands/lectureAttachmentReferenceCommand.ts b/src/main/webapp/app/shared/markdown-editor/commands/courseArtifactReferenceCommands/lectureAttachmentReferenceCommand.ts
deleted file mode 100644
index 8a1cce16bd2e..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/commands/courseArtifactReferenceCommands/lectureAttachmentReferenceCommand.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-import { MultiOptionCommand } from 'app/shared/markdown-editor/commands/multiOptionCommand';
-import { MetisService } from 'app/shared/metis/metis.service';
-import { ReferenceType } from 'app/shared/metis/metis.util';
-import { LectureService } from 'app/lecture/lecture.service';
-import { Lecture } from 'app/entities/lecture.model';
-import { map } from 'rxjs/operators';
-import { HttpResponse } from '@angular/common/http';
-import { AttachmentUnit } from 'app/entities/lecture-unit/attachmentUnit.model';
-import { Slide } from 'app/entities/lecture-unit/slide.model';
-import { Attachment } from 'app/entities/attachment.model';
-import { SlideItem, ValueItem } from 'app/shared/markdown-editor/command-constants';
-import { LectureUnit } from 'app/entities/lecture-unit/lectureUnit.model';
-
-export class LectureAttachmentReferenceCommand extends MultiOptionCommand {
-    metisService: MetisService;
-
-    lectureService: LectureService;
-
-    buttonTranslationString = 'artemisApp.metis.editor.lecture';
-
-    constructor(metisService: MetisService, lectureService: LectureService) {
-        super();
-        this.metisService = metisService;
-        this.lectureService = lectureService;
-
-        lectureService
-            .findAllByCourseIdWithSlides(this.metisService.getCourse().id!)
-            .pipe(map((response: HttpResponse<Lecture[]>) => response.body!))
-            .subscribe((lectures: Lecture[]) => {
-                lectures.map((lecture) => {
-                    this.setValues([
-                        ...this.values,
-                        {
-                            id: lecture.id!.toString(),
-                            value: lecture.title!,
-                            type: ReferenceType.LECTURE,
-                            elements: this.lectureAttachments(lecture.attachments!),
-                            attachmentUnits: this.attachmentUnitsWithSlides(lecture.lectureUnits!),
-                        },
-                    ]);
-                });
-            });
-    }
-
-    /**
-     * @function execute
-     * @param {string} selectedLectureId   ID of the lecture to be referenced
-     * @param type
-     * @param selectedElementId
-     * @param selectedUnitId
-     * @param selectedSlideId
-     * @desc                                Add a lecture reference link in markdown language
-     *                                      1. Add '[{lecture-title}](/courses/{courseId}/lectures/{lectureId}})' at the cursor in the editor
-     *                                      2. Link in markdown language appears which when clicked navigates to the lecture page
-     */
-    execute(selectedLectureId: string, type?: ReferenceType, selectedElementId?: string, selectedUnitId?: string, selectedSlideId?: string): void {
-        const selectedLecture = this.metisService.getCourse().lectures!.find((value) => value.id!.toString() === selectedLectureId)!;
-        this.lectureService
-            .findWithDetailsWithSlides(selectedLecture.id!)
-            .pipe(map((response: HttpResponse<Lecture>) => response.body!))
-            .subscribe({
-                next: (lecture: Lecture) => {
-                    if (selectedUnitId) {
-                        if (!selectedSlideId) {
-                            // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
-                            const selectedUnit: AttachmentUnit = lecture.lectureUnits?.find((value: AttachmentUnit) => value.id!.toString() === selectedUnitId)!;
-                            const shortLink = selectedUnit.attachment?.link!.split('attachments/')[1];
-                            const referenceLink = `[lecture-unit]${selectedUnit.name}(${shortLink})[/lecture-unit]`;
-                            this.insertText(referenceLink);
-                            this.focus();
-                        } else {
-                            // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
-                            const selectedUnit: AttachmentUnit = lecture.lectureUnits?.find((value: AttachmentUnit) => value.id!.toString() === selectedUnitId)!;
-                            // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
-                            const selectedSlide: Slide = selectedUnit.slides?.find((value: Slide) => value.id!.toString() === selectedSlideId)!;
-                            const shortLink = selectedSlide.slideImagePath!.split('attachments/')[1];
-                            // Use a regular expression and the replace() method to remove the file name and last slash
-                            const shortLinkWithoutFileName: string = shortLink.replace(new RegExp(`[^/]*${'.png'}`), '').replace(/\/$/, '');
-                            const referenceLink = `[slide]${selectedUnit.name} Slide ${selectedSlide.slideNumber}(${shortLinkWithoutFileName})[/slide]`;
-                            this.insertText(referenceLink);
-                            this.focus();
-                        }
-                    } else {
-                        // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
-                        const selectedAttachment = selectedLecture.attachments?.find((value) => value.id!.toString() === selectedElementId)!;
-                        const shortLink = selectedAttachment ? selectedAttachment.link!.split('attachments/')[1] : '';
-                        const referenceLink =
-                            ReferenceType.LECTURE === type
-                                ? `[lecture]${selectedLecture.title}(${this.metisService.getLinkForLecture(selectedLecture.id!.toString())})[/lecture]`
-                                : `[attachment]${selectedAttachment.name}(${shortLink})[/attachment]`;
-                        this.insertText(referenceLink);
-                        this.focus();
-                    }
-                },
-            });
-    }
-
-    private lectureAttachments(attachments: Attachment[]): ValueItem[] {
-        return attachments?.map((attachment: any) => ({
-            id: attachment.id!.toString(),
-            value: attachment.name!,
-            courseArtifactType: ReferenceType.ATTACHMENT,
-        }));
-    }
-
-    private attachmentUnitsWithSlides(lectureUnits: LectureUnit[]): ValueItem[] {
-        return lectureUnits?.map((unit: any) => {
-            return {
-                id: unit.id!.toString(),
-                value: unit.name!,
-                slides: this.attachmentUnitSlides(unit.slides!),
-                courseArtifactType: ReferenceType.ATTACHMENT_UNITS,
-            };
-        });
-    }
-
-    private attachmentUnitSlides(slides: Slide[]): SlideItem[] {
-        return slides
-            ?.map((slide: Slide) => {
-                return {
-                    id: slide.id!.toString(),
-                    slideNumber: slide.slideNumber!,
-                    slideImagePath: slide.slideImagePath!,
-                    courseArtifactType: ReferenceType.SLIDE,
-                };
-            })
-            .sort((a: SlideItem, b: SlideItem) => a.slideNumber - b.slideNumber);
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/commands/courseArtifactReferenceCommands/userMentionCommand.ts b/src/main/webapp/app/shared/markdown-editor/commands/courseArtifactReferenceCommands/userMentionCommand.ts
deleted file mode 100644
index 16dfcbbf7f2f..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/commands/courseArtifactReferenceCommands/userMentionCommand.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { InteractiveSearchCommand } from 'app/shared/markdown-editor/commands/interactiveSearchCommand';
-import { faAt } from '@fortawesome/free-solid-svg-icons';
-import { MetisService } from 'app/shared/metis/metis.service';
-import { ConversationUserDTO } from 'app/entities/metis/conversation/conversation-user-dto.model';
-import { HttpResponse } from '@angular/common/http';
-import { Observable } from 'rxjs';
-import { CourseManagementService } from 'app/course/manage/course-management.service';
-
-export class UserMentionCommand extends InteractiveSearchCommand {
-    buttonIcon = faAt;
-
-    constructor(
-        private readonly courseManagementService: CourseManagementService,
-        private readonly metisService: MetisService,
-    ) {
-        super();
-    }
-
-    protected getAssociatedInputCharacter(): string {
-        return '@';
-    }
-
-    performSearch(searchTerm: string): Observable<HttpResponse<ConversationUserDTO[]>> {
-        return this.courseManagementService.searchMembersForUserMentions(this.metisService.getCourse().id!, searchTerm);
-    }
-
-    protected selectionToText(selected: ConversationUserDTO): string {
-        return `[user]${selected.name}(${selected.login})[/user]`;
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/commands/fullscreen.command.ts b/src/main/webapp/app/shared/markdown-editor/commands/fullscreen.command.ts
deleted file mode 100644
index a331a1c07479..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/commands/fullscreen.command.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { faCompress } from '@fortawesome/free-solid-svg-icons';
-import { Command } from 'app/shared/markdown-editor/commands/command';
-import { enterFullscreen, exitFullscreen, isFullScreen } from 'app/shared/util/fullscreen.util';
-
-/**
- * Toggles fullscreen on button press.
- * Uses the markdown editor wrapper including tabs as element for fullscreen.
- *
- * The command needs to check different browser implementations of the fullscreen mode so it is handled correctly.
- */
-export class FullscreenCommand extends Command {
-    buttonIcon = faCompress as IconProp;
-    buttonTranslationString = 'artemisApp.markdownEditor.commands.fullscreen';
-
-    execute(): void {
-        if (isFullScreen()) {
-            exitFullscreen();
-        } else {
-            const element = this.markdownWrapper.nativeElement;
-            enterFullscreen(element);
-        }
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/commands/headingOne.command.ts b/src/main/webapp/app/shared/markdown-editor/commands/headingOne.command.ts
deleted file mode 100644
index b37e8dce1c20..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/commands/headingOne.command.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { faHeading } from '@fortawesome/free-solid-svg-icons';
-import { Command } from 'app/shared/markdown-editor/commands/command';
-
-export class HeadingOneCommand extends Command {
-    buttonIcon = faHeading as IconProp;
-    buttonTranslationString = 'artemisApp.multipleChoiceQuestion.editor.headingOne';
-
-    /**
-     * @function execute
-     * @desc Create/remove heading one in markdown language
-     *       1. Check if the selected text includes (#) and/or ('Heading 1')
-     *       2. If included  reduce the selected text by this elements and add replace the selected text by textToAdd
-     *       3. If not included add (#) before the selected text and insert them into the editor
-     *       4. Heading one in markdown language appears
-     */
-    execute(): void {
-        let selectedText = this.getSelectedText();
-
-        if (selectedText.includes('#') && !selectedText.includes('Heading 1')) {
-            const textToAdd = selectedText.slice(2);
-            this.insertText(textToAdd);
-        } else if (selectedText.includes('#') && selectedText.includes('Heading 1')) {
-            const textToAdd = selectedText.slice(2, -9);
-            this.insertText(textToAdd);
-        } else {
-            const initText = 'Heading 1';
-            const range = this.getRange();
-            selectedText = `# ${selectedText || initText}`;
-            this.replace(range, selectedText);
-            this.focus();
-        }
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/commands/headingThree.command.ts b/src/main/webapp/app/shared/markdown-editor/commands/headingThree.command.ts
deleted file mode 100644
index 0d9e3ac9185d..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/commands/headingThree.command.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { faHeading } from '@fortawesome/free-solid-svg-icons';
-import { Command } from 'app/shared/markdown-editor/commands/command';
-
-export class HeadingThreeCommand extends Command {
-    buttonIcon = faHeading as IconProp;
-    buttonTranslationString = 'artemisApp.multipleChoiceQuestion.editor.headingThree';
-
-    /**
-     * @function execute
-     * @desc Create/Remove heading three language
-     *       1. check if the selected text includes (###) and/or ('Heading 3')
-     *       2. If included reduce the selected text by this elements and add replace the selected text by textToAdd
-     *       3. If not included  add (###) before the selected text and insert them into the editor
-     *       4. Heading three in markdown language appears
-     */
-    execute(): void {
-        let selectedText = this.getSelectedText();
-
-        if (selectedText.includes('###') && !selectedText.includes('Heading 3')) {
-            const textToAdd = selectedText.slice(4);
-            this.insertText(textToAdd);
-        } else if (selectedText.includes('###') && selectedText.includes('Heading 3')) {
-            const textToAdd = selectedText.slice(4, -9);
-            this.insertText(textToAdd);
-        } else {
-            const initText = 'Heading 3';
-            const range = this.getRange();
-            selectedText = `### ${selectedText || initText}`;
-            this.replace(range, selectedText);
-            this.focus();
-        }
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/commands/headingTwo.command.ts b/src/main/webapp/app/shared/markdown-editor/commands/headingTwo.command.ts
deleted file mode 100644
index 4f14cafd8e0b..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/commands/headingTwo.command.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { faHeading } from '@fortawesome/free-solid-svg-icons';
-import { Command } from 'app/shared/markdown-editor/commands/command';
-
-export class HeadingTwoCommand extends Command {
-    buttonIcon = faHeading as IconProp;
-    buttonTranslationString = 'artemisApp.multipleChoiceQuestion.editor.headingTwo';
-
-    /**
-     * @function execute
-     * @desc Create/Remove heading two language
-     *       1. Check if the selected text includes (##) and/or ('Heading 2')
-     *       2. If included  reduce the selected text by this elements and add replace the selected text by textToAdd
-     *       3. If not included add (##) before the selected text and insert them into the editor
-     *       4. Heading two in markdown language appears
-     */
-    execute(): void {
-        let selectedText = this.getSelectedText();
-
-        if (selectedText.includes('##') && !selectedText.includes('Heading 2')) {
-            const textToAdd = selectedText.slice(3);
-            this.insertText(textToAdd);
-        } else if (selectedText.includes('##') && selectedText.includes('Heading 2')) {
-            const textToAdd = selectedText.slice(3, -9);
-            this.insertText(textToAdd);
-        } else {
-            const initText = 'Heading 2';
-            const range = this.getRange();
-            selectedText = `## ${selectedText || initText}`;
-            this.replace(range, selectedText);
-            this.focus();
-        }
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/commands/interactiveSearchCommand.ts b/src/main/webapp/app/shared/markdown-editor/commands/interactiveSearchCommand.ts
deleted file mode 100644
index a6024ed958b1..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/commands/interactiveSearchCommand.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import { HttpResponse } from '@angular/common/http';
-import { MultiOptionCommand } from 'app/shared/markdown-editor/commands/multiOptionCommand';
-import { Observable } from 'rxjs';
-import { SelectWithSearchComponent } from 'app/shared/markdown-editor/select-with-search/select-with-search.component';
-
-export interface SelectableItem {
-    name?: string;
-}
-
-export abstract class InteractiveSearchCommand extends MultiOptionCommand {
-    private selectWithSearchComponent: SelectWithSearchComponent;
-    execute(): void {
-        this.aceEditor.execCommand(this.getAssociatedInputCharacter());
-    }
-
-    private searchPositionStart: { row: number; column: number } | undefined;
-
-    setEditor(aceEditor: any) {
-        super.setEditor(aceEditor);
-
-        this.aceEditor.commands.addCommand({
-            name: this.getAssociatedInputCharacter(),
-            bindKey: { win: this.getAssociatedInputCharacter(), mac: this.getAssociatedInputCharacter() },
-            exec: (editor: any) => {
-                if (this.searchPositionStart) {
-                    return;
-                }
-
-                const cursorPosition = this.getCursorPosition();
-                const lineContent = editor.session.getLine(cursorPosition.row).substring(0, cursorPosition.column);
-
-                editor.insert(this.getAssociatedInputCharacter());
-                if (cursorPosition.column === 0 || lineContent.slice(-1).match(/\s/)) {
-                    this.searchPositionStart = cursorPosition;
-                    this.selectWithSearchComponent?.open();
-                    this.aceEditor.focus();
-                }
-            },
-        } as any);
-    }
-
-    setSelectWithSearchComponent(component: SelectWithSearchComponent) {
-        this.selectWithSearchComponent = component;
-    }
-
-    insertSelection(selected: SelectableItem | undefined) {
-        if (selected !== undefined) {
-            const cursorPosition = this.aceEditor.getCursorPosition() as { row: number; column: number };
-
-            this.aceEditor.session
-                .getDocument()
-                .removeInLine(cursorPosition.row, this.searchPositionStart?.row === cursorPosition.row ? this.searchPositionStart.column : 0, cursorPosition.column);
-
-            this.searchPositionStart = undefined;
-
-            this.insertText(this.selectionToText(selected));
-        }
-
-        this.searchPositionStart = undefined;
-        this.aceEditor.focus();
-    }
-
-    abstract performSearch(searchTerm: string): Observable<HttpResponse<SelectableItem[]>>;
-
-    protected abstract selectionToText(selected: any): string;
-
-    protected abstract getAssociatedInputCharacter(): string;
-
-    getCursorScreenPosition(): any {
-        const cursorPosition = super.getCursorPosition();
-        return this.aceEditor.renderer.textToScreenCoordinates(cursorPosition.row, cursorPosition.column);
-    }
-
-    updateSearchTerm() {
-        if (!this.searchPositionStart) {
-            return;
-        }
-
-        const cursorPosition = this.aceEditor.getCursorPosition();
-        const lineContent = this.aceEditor.session.getLine(cursorPosition.row);
-
-        const lastAtIndex = lineContent
-            .substring(cursorPosition.row === this.searchPositionStart.row ? this.searchPositionStart.column : 0, cursorPosition.column + 1)
-            .lastIndexOf(this.getAssociatedInputCharacter());
-
-        if (lastAtIndex >= 0) {
-            const searchTerm = lineContent
-                .substring(0, cursorPosition.column + 1)
-                .split(this.getAssociatedInputCharacter())
-                .pop();
-
-            this.selectWithSearchComponent.updateSearchTerm(searchTerm);
-        } else {
-            this.selectWithSearchComponent.close();
-        }
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/commands/italic.command.ts b/src/main/webapp/app/shared/markdown-editor/commands/italic.command.ts
deleted file mode 100644
index 48d2ac7f4248..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/commands/italic.command.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { faItalic } from '@fortawesome/free-solid-svg-icons';
-import { Command } from './command';
-
-export class ItalicCommand extends Command {
-    buttonIcon = faItalic as IconProp;
-    buttonTranslationString = 'artemisApp.multipleChoiceQuestion.editor.italic';
-
-    /**
-     * @function execute
-     * @desc Make/Remove italic text
-     *       1. Check if the selected text includes (*)
-     *       2. If included reduce the selected text by this elements and replace the selected text by textToAdd
-     *       3. If not included add (*) before and after the selected text and insert them into the editor
-     *       4. Italic in markdown language appears
-     */
-    execute(): void {
-        const selectedText = this.getSelectedText();
-        let textToAdd = '';
-
-        if (selectedText.charAt(0) === '*' && selectedText.charAt(selectedText.length - 1) === '*') {
-            textToAdd = selectedText.slice(1, -1);
-            this.insertText(textToAdd);
-        } else {
-            const trimmedText = this.deleteWhiteSpace(selectedText);
-            textToAdd = `*${trimmedText}*`;
-            this.addRefinedText(selectedText, textToAdd);
-        }
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/commands/katex.command.ts b/src/main/webapp/app/shared/markdown-editor/commands/katex.command.ts
deleted file mode 100644
index 893ca18141e7..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/commands/katex.command.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { faEquals } from '@fortawesome/free-solid-svg-icons';
-import { DomainTagCommand } from 'app/shared/markdown-editor/domainCommands/domainTag.command';
-import { addTextAtCursor } from 'app/shared/util/markdown.util';
-
-/**
- * Insert a katex compatible formula.
- * Uses an e-function as the example.
- */
-export class KatexCommand extends DomainTagCommand {
-    buttonIcon = faEquals as IconProp;
-    buttonTranslationString = 'artemisApp.markdownEditor.commands.katex';
-    execute(): void {
-        const text = `${this.getOpeningIdentifier()}e^{\\frac{1}{4} y^2}${this.getClosingIdentifier()}`;
-        addTextAtCursor(text, this.aceEditor);
-    }
-
-    getOpeningIdentifier(): string {
-        return '$$ ';
-    }
-
-    getClosingIdentifier(): string {
-        return ' $$';
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/commands/link.command.ts b/src/main/webapp/app/shared/markdown-editor/commands/link.command.ts
deleted file mode 100644
index ef16cdfe80b7..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/commands/link.command.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { faLink } from '@fortawesome/free-solid-svg-icons';
-import { Command } from './command';
-
-export class LinkCommand extends Command {
-    buttonIcon = faLink as IconProp;
-    buttonTranslationString = 'artemisApp.multipleChoiceQuestion.editor.link';
-
-    /**
-     * @function execute
-     * @desc Add/Remove a link in markdown language
-     *       1. check if the selected text includes ('[](http://)')
-     *       2. If included reduce the selected text by this elements and replace the selected text by textToAdd
-     *       3. If not included add ('[](http://)') at the cursor in the editor
-     *       4. Link in markdown language appears
-     */
-    execute(): void {
-        let selectedText = this.getSelectedText();
-
-        if (selectedText.includes('[](http://)')) {
-            const textToAdd = selectedText.slice(11);
-            this.insertText(textToAdd);
-        } else {
-            const range = this.getRange();
-            selectedText = `[](http://)`;
-            this.replace(range, selectedText);
-            this.focus();
-        }
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/commands/multiOptionCommand.ts b/src/main/webapp/app/shared/markdown-editor/commands/multiOptionCommand.ts
deleted file mode 100644
index bc6bdfcb419f..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/commands/multiOptionCommand.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Command } from 'app/shared/markdown-editor/commands/command';
-import { ValueItem } from 'app/shared/markdown-editor/command-constants';
-
-export abstract class MultiOptionCommand extends Command {
-    protected values: ValueItem[] = [];
-
-    getValues() {
-        return this.values;
-    }
-
-    setValues(values: ValueItem[]) {
-        this.values = values;
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/commands/orderedListCommand.ts b/src/main/webapp/app/shared/markdown-editor/commands/orderedListCommand.ts
deleted file mode 100644
index 015656f337ab..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/commands/orderedListCommand.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { faListOl } from '@fortawesome/free-solid-svg-icons';
-import { Command } from './command';
-
-export class OrderedListCommand extends Command {
-    buttonIcon = faListOl as IconProp;
-    buttonTranslationString = 'artemisApp.multipleChoiceQuestion.editor.orderedList';
-
-    /**
-     * @function execute
-     * @desc Use the Markdown language for creating/removing an ordered list
-     */
-    execute(): void {
-        const extendedText = this.getExtendedSelectedText();
-        this.handleManipulation(extendedText);
-    }
-
-    /**
-     * Performs the necessary manipulations.
-     * @param extendedText the extended text
-     */
-    handleManipulation(extendedText: string[]): void {
-        let manipulatedText = '';
-        let position = 1;
-
-        extendedText.forEach((line, index) => {
-            // Special case: Single empty line
-            if (line === '') {
-                if (extendedText.length === 1) {
-                    manipulatedText = '1. ';
-                    return;
-                }
-            } else {
-                // Manipulate the line, e.g. remove the number or add the number.
-                manipulatedText += this.manipulateLine(line, position);
-                position++;
-            }
-
-            if (index !== extendedText.length - 1) {
-                manipulatedText += '\n';
-            }
-        });
-        this.replace(this.getRange(), manipulatedText);
-    }
-
-    /**
-     * Manipulates a given line and adds or removes the numbers at the beginning.
-     * @param line to manipulate
-     * @param position of the line in the ordered list
-     * @return manipulated line
-     */
-    manipulateLine(line: string, position: number): string {
-        const index = line.indexOf('.');
-
-        // Calc leading whitespaces
-        const whitespaces = line.search(/\S|$/);
-
-        // There is a dot in this line
-        if (index !== -1) {
-            const elements = [line.slice(whitespaces, index), line.slice(index + 1)];
-
-            // Check if this is really a number
-            if (elements[0] !== '' && !isNaN(Number(elements[0]))) {
-                // Add whitespaces and remove first whitespace after the dot
-                return ' '.repeat(whitespaces) + elements[1].substring(1);
-            }
-        }
-
-        // Add the position of the list element
-        return ' '.repeat(whitespaces) + `${position}. ${line.substring(whitespaces)}`;
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/commands/reference.command.ts b/src/main/webapp/app/shared/markdown-editor/commands/reference.command.ts
deleted file mode 100644
index 7da9c5bcd44a..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/commands/reference.command.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { faQuoteLeft } from '@fortawesome/free-solid-svg-icons';
-import { Command } from './command';
-
-export class ReferenceCommand extends Command {
-    buttonIcon = faQuoteLeft as IconProp;
-    buttonTranslationString = 'artemisApp.multipleChoiceQuestion.editor.quote';
-
-    /**
-     * @function execute
-     * @desc Add/Remove a reference in markdown language
-     *       1. Check if the selected text includes ('>') and/or ('Reference')
-     *       2. If included reduce the selected text by this elements and add replace the selected text by textToAdd
-     *       3. If not included add ('>') before the selected text and insert into editor
-     *       4. Reference in markdown appears
-     */
-    execute(): void {
-        let selectedText = this.getSelectedText();
-
-        if (selectedText.includes('>') && !selectedText.includes('Reference')) {
-            const textToAdd = selectedText.slice(2);
-            this.insertText(textToAdd);
-        } else if (selectedText.includes('>') && selectedText.includes('Reference')) {
-            const textToAdd = selectedText.slice(2, -9);
-            this.insertText(textToAdd);
-        } else {
-            const range = this.getRange();
-            const initText = 'Reference';
-            selectedText = `> ${selectedText || initText}`;
-            this.replace(range, selectedText);
-            this.focus();
-        }
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/commands/underline.command.ts b/src/main/webapp/app/shared/markdown-editor/commands/underline.command.ts
deleted file mode 100644
index b7a88c662249..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/commands/underline.command.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { faUnderline } from '@fortawesome/free-solid-svg-icons';
-import { Command } from './command';
-
-export class UnderlineCommand extends Command {
-    buttonIcon = faUnderline as IconProp;
-    buttonTranslationString = 'artemisApp.multipleChoiceQuestion.editor.underline';
-
-    /**
-     * @function execute
-     * @desc Add/Remove underline text
-     *       1. Check if the selected text includes (<ins>)
-     *       2. If included (ins) reduce the selected text by these elements and replace the selected text by textToAdd
-     *       3. If not included, add (<ins>) before and after the selected text and insert them into the editor
-     *       4. Underline in markdown language appears
-     */
-    execute(): void {
-        const chosenText = this.getSelectedText();
-
-        if (chosenText.includes('<ins>')) {
-            const textToAdd = chosenText.slice(5, -6);
-            this.insertText(textToAdd);
-        } else {
-            const textToAdd = `<ins>${chosenText}</ins>`;
-            this.insertText(textToAdd);
-        }
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/commands/unorderedListCommand.ts b/src/main/webapp/app/shared/markdown-editor/commands/unorderedListCommand.ts
deleted file mode 100644
index 257ea83e77ee..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/commands/unorderedListCommand.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { faListUl } from '@fortawesome/free-solid-svg-icons';
-import { Command } from './command';
-
-export class UnorderedListCommand extends Command {
-    buttonIcon = faListUl as IconProp;
-    buttonTranslationString = 'artemisApp.multipleChoiceQuestion.editor.unorderedList';
-
-    /**
-     * @function execute
-     * @desc Use the Markdown language for creating an unordered list
-     */
-    execute(): void {
-        const extendedText = this.getExtendedSelectedText();
-        this.handleManipulation(extendedText);
-    }
-
-    /**
-     * Performs the necessary manipulations.
-     * @param extendedText the extended text
-     */
-    handleManipulation(extendedText: string[]): void {
-        let manipulatedText = '';
-
-        extendedText.forEach((line, index) => {
-            // Special case: Single empty line
-            if (line === '') {
-                if (extendedText.length === 1) {
-                    manipulatedText = '- ';
-                    return;
-                }
-            } else {
-                manipulatedText += this.manipulateLine(line);
-            }
-
-            if (index !== extendedText.length - 1) {
-                manipulatedText += '\n';
-            }
-        });
-        this.replace(this.getRange(), manipulatedText);
-    }
-
-    /**
-     * Manipulates a given line and adds or removes the - at the beginning.
-     * @param line to manipulate
-     * @return manipulated line
-     */
-    manipulateLine(line: string): string {
-        const index = line.indexOf('-');
-
-        // Calc leading whitespaces
-        const whitespaces = line.search(/\S|$/);
-
-        // There is - in this line
-        if (index !== -1) {
-            const elements = [line.slice(whitespaces, index), line.slice(index + 1)];
-
-            // Check if this is the first -
-            if (elements[0] === '' && elements[1].length >= 1 && elements[1].startsWith(' ')) {
-                // Add whitespaces and remove first whitespace after the dot
-                return ' '.repeat(whitespaces) + elements[1].substring(1);
-            }
-        }
-
-        // Add the -
-        return ' '.repeat(whitespaces) + `- ${line.substring(whitespaces)}`;
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/domainCommands/correctOptionCommand.ts b/src/main/webapp/app/shared/markdown-editor/domainCommands/correctOptionCommand.ts
deleted file mode 100644
index 4a9764fc02a2..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/domainCommands/correctOptionCommand.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { addTextAtCursor } from 'app/shared/util/markdown.util';
-import { DomainTagCommand } from 'app/shared/markdown-editor/domainCommands/domainTag.command';
-
-export class CorrectOptionCommand extends DomainTagCommand {
-    public static readonly IDENTIFIER = '[correct]';
-    buttonTranslationString = 'artemisApp.multipleChoiceQuestion.editor.addCorrectAnswerOption';
-
-    /**
-     * @function execute
-     * @desc Add a new correct answer option to the text editor at the location of the cursor
-     */
-    execute(): void {
-        const text = '\n' + this.getOpeningIdentifier() + ' Enter a correct answer option here';
-        addTextAtCursor(text, this.aceEditor);
-    }
-
-    /**
-     * @function getOpeningIdentifier
-     * @desc identify the start of the correct option
-     */
-    getOpeningIdentifier(): string {
-        return CorrectOptionCommand.IDENTIFIER;
-    }
-
-    /**
-     * @function getClosingIdentifier
-     * @desc identify the end of the correct option
-     */
-    getClosingIdentifier(): string {
-        return '[/correct]';
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/domainCommands/credits.command.ts b/src/main/webapp/app/shared/markdown-editor/domainCommands/credits.command.ts
deleted file mode 100644
index b7070571e62d..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/domainCommands/credits.command.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { DomainTagCommand } from 'app/shared/markdown-editor/domainCommands/domainTag.command';
-import { addTextAtCursor } from 'app/shared/util/markdown.util';
-
-export class CreditsCommand extends DomainTagCommand {
-    public static readonly IDENTIFIER = '[credits]';
-    public static readonly TEXT = '0';
-    // ' Add points students should get for this instruction here';
-    displayCommandButton = false;
-
-    buttonTranslationString = 'artemisApp.assessmentInstructions.instructions.editor.addCredits';
-
-    /**
-     * @function execute
-     * @desc Add a credits for the corresponding instruction in the editor at the location of the cursor
-     */
-    execute(): void {
-        const text = '\n' + this.getOpeningIdentifier() + CreditsCommand.TEXT;
-        addTextAtCursor(text, this.aceEditor);
-    }
-
-    /**
-     * @function getOpeningIdentifier
-     * @desc identify the start of the credits
-     */
-    getOpeningIdentifier(): string {
-        return CreditsCommand.IDENTIFIER;
-    }
-
-    /**
-     * @function getClosingIdentifier
-     * @desc identify the end of the credits
-     */
-    getClosingIdentifier(): string {
-        return '[/credits]';
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/domainCommands/domain-multi-option-list.command.ts b/src/main/webapp/app/shared/markdown-editor/domainCommands/domain-multi-option-list.command.ts
deleted file mode 100644
index fb2ce14041c3..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/domainCommands/domain-multi-option-list.command.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { DomainMultiOptionCommand } from 'app/shared/markdown-editor/domainCommands/domainMultiOptionCommand';
-import { getStringSegmentPositions } from 'app/shared/util/global.utils';
-import { removeTextRange } from 'app/shared/util/markdown.util';
-
-/**
- * Allows the insertion of values within a comma separated list.
- * Will e.g. remove duplicates and append new items to the list.
- */
-export abstract class DomainMultiOptionListCommand extends DomainMultiOptionCommand {
-    protected abstract getValueMeta(): string;
-
-    setEditor(aceEditor: any) {
-        super.setEditor(aceEditor);
-
-        const autoCompleter = {
-            getCompletions: (editor: any, session: any, pos: any, prefix: any, callback: any) => {
-                callback(
-                    null,
-                    this.getValues().map(({ value, id }) => {
-                        return {
-                            caption: value,
-                            value: id,
-                            meta: this.getValueMeta(),
-                        };
-                    }),
-                );
-            },
-        };
-
-        this.addCompleter(autoCompleter);
-    }
-
-    /**
-     * Update the list of values in the multi option list. Makes sure to not add duplicates into the brackets.
-     *
-     * @function execute
-     * @desc insert selected value into text
-     */
-    execute(valueToAdd: string): void {
-        const cursorPosition = this.getCursorPosition();
-        const matchInTag = this.isCursorWithinTag();
-
-        this.clearSelection();
-
-        const newValuesList = this.generateValueList(matchInTag, valueToAdd, cursorPosition);
-        const newValuesStringified = `${this.getOpeningIdentifier()}${newValuesList.join(',')}${this.getClosingIdentifier()}`;
-        if (matchInTag) {
-            removeTextRange(
-                { col: matchInTag.matchStart, row: cursorPosition.row },
-                {
-                    col: matchInTag.matchEnd,
-                    row: cursorPosition.row,
-                },
-                this.aceEditor,
-            );
-        }
-        this.insertText(newValuesStringified);
-        this.focus();
-    }
-
-    /**
-     * Given a match, the new value to add and the cursor position, determine and return the updated value list.
-     * a) The cursor is within the brackets -> add/replace value in list.
-     * b) The cursor is NOT within the brackets -> just paste in a new value.
-     *
-     * @param match
-     * @param valueToAdd
-     * @param cursorPosition
-     */
-    private generateValueList = (
-        match: { matchStart: number; matchEnd: number; innerTagContent: string } | null,
-        valueToAdd: string,
-        cursorPosition: { row: number; column: number },
-    ): string[] => {
-        const { column } = cursorPosition;
-        // Check if the cursor is within the tag - if so, add the value to the list.
-        // Also don't add a value again that is already included.
-        if (match && !match.innerTagContent.includes(valueToAdd)) {
-            const currentValues = match.innerTagContent.split(',');
-            const stringPositions = getStringSegmentPositions(match.innerTagContent, ',');
-            const wordUnderCursor = stringPositions.find(({ start, end }) => column - 1 - match.matchStart > start && column - 1 - match.matchStart < end);
-            if (wordUnderCursor) {
-                // Case 1: Replace value.
-                return currentValues.map((val) => (val === wordUnderCursor.word ? valueToAdd : val));
-            } else if (column >= match.matchEnd - 1) {
-                // Case 2: Add value on left side.
-                return [...currentValues, valueToAdd];
-            } else if (column <= match.matchStart + 1) {
-                // Case 3: Add value on right side.
-                return [valueToAdd, ...currentValues];
-            } else {
-                // Case 4: Fallback - replace current.
-                return [valueToAdd];
-            }
-        } else if (match && match.innerTagContent.includes(valueToAdd)) {
-            // Case 5: The value is already included, do nothing.
-            return match.innerTagContent.split(',');
-        } else {
-            // Case 6: There is no content yet, just paste the current value in.
-            return [valueToAdd];
-        }
-    };
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/domainCommands/domainCommand.ts b/src/main/webapp/app/shared/markdown-editor/domainCommands/domainCommand.ts
deleted file mode 100644
index b5922fb35e3c..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/domainCommands/domainCommand.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Command } from 'app/shared/markdown-editor/commands/command';
-import { escapeStringForUseInRegex } from 'app/shared/util/global.utils';
-
-/** abstract class for all domainCommands - customized commands for Artemis specific use cases
- * e.g. multiple choice questions, drag and drop questions
- * Each domain command has its own logic and a unique identifier**/
-export abstract class DomainCommand extends Command {
-    abstract getOpeningIdentifier(): string; // e.g. [exp]
-    abstract getClosingIdentifier(): string; // e.g. [/exp]
-    displayCommandButton = true;
-
-    /**
-     * Generate a regex that can be used to get the content alone or including the tags.
-     * index 0: Get content with tags around it.
-     * index 1: Get content without the tags.
-     */
-    getTagRegex(flags = ''): RegExp {
-        const escapedOpeningIdentifier = escapeStringForUseInRegex(this.getOpeningIdentifier()),
-            escapedClosingIdentifier = escapeStringForUseInRegex(this.getClosingIdentifier());
-        return new RegExp(`${escapedOpeningIdentifier}(.*)${escapedClosingIdentifier}`, flags);
-    }
-
-    /**
-     * Checks if the cursor is placed within the identifiers of a domain command.
-     * Returns the content between the identifiers if there is match, otherwise returns null.
-     */
-    isCursorWithinTag(): { matchStart: number; matchEnd: number; innerTagContent: string } | null {
-        const { row, column } = this.aceEditor.getCursorPosition(),
-            line = this.aceEditor.getSession().getLine(row),
-            regex = this.getTagRegex('g');
-
-        const indexes: Array<{ matchStart: number; matchEnd: number; innerTagContent: string }> = [];
-
-        // A line can have multiple tags in it, so we need to check for multiple matches.
-        let match = regex.exec(line);
-        while (match != undefined) {
-            indexes.push({ matchStart: match.index, matchEnd: match.index + match[0].length, innerTagContent: match[1] });
-            match = regex.exec(line);
-        }
-        const matchOnCursor = indexes.find(({ matchStart, matchEnd }) => column > matchStart && column <= matchEnd);
-        return matchOnCursor || null;
-    }
-
-    /**
-     * Checks if there is a tag in the line of the cursor.
-     * Returns the content between the identifiers if there is match, otherwise returns null.
-     */
-    isTagInRow(row: number): { matchStart: number; matchEnd: number; innerTagContent: string } | null {
-        const line = this.aceEditor.getSession().getLine(row),
-            regex = this.getTagRegex();
-
-        if (!line) {
-            return null;
-        }
-
-        const match = line.match(regex);
-        if (!match) {
-            return null;
-        }
-        return { matchStart: match.index, matchEnd: match.index + match[0].length, innerTagContent: match[1] };
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/domainCommands/domainMultiOptionCommand.ts b/src/main/webapp/app/shared/markdown-editor/domainCommands/domainMultiOptionCommand.ts
deleted file mode 100644
index 6918dd1adf80..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/domainCommands/domainMultiOptionCommand.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { DomainCommand } from 'app/shared/markdown-editor/domainCommands/domainCommand';
-import { ValueItem } from 'app/shared/markdown-editor/command-constants';
-
-/**
- * This domain command will be used as a dropdown in the markdown editor.
- */
-export abstract class DomainMultiOptionCommand extends DomainCommand {
-    protected values: ValueItem[] = [];
-    setValues(values: ValueItem[]) {
-        this.values = values;
-    }
-    getValues() {
-        return this.values;
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/domainCommands/domainTag.command.ts b/src/main/webapp/app/shared/markdown-editor/domainCommands/domainTag.command.ts
deleted file mode 100644
index ff2c857c2558..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/domainCommands/domainTag.command.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { DomainCommand } from 'app/shared/markdown-editor/domainCommands/domainCommand';
-
-/**
- * This domain command will be used as a button in the markdown editor.
- */
-export abstract class DomainTagCommand extends DomainCommand {}
diff --git a/src/main/webapp/app/shared/markdown-editor/domainCommands/explanation.command.ts b/src/main/webapp/app/shared/markdown-editor/domainCommands/explanation.command.ts
deleted file mode 100644
index e8e0ccbb7efd..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/domainCommands/explanation.command.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { addTextAtCursor } from 'app/shared/util/markdown.util';
-import { DomainTagCommand } from 'app/shared/markdown-editor/domainCommands/domainTag.command';
-
-export const explanationCommandIdentifier = '[exp]';
-
-export class ExplanationCommand extends DomainTagCommand {
-    public static readonly TEXT = ' Add an explanation here (only visible in feedback after quiz has ended)';
-
-    buttonTranslationString = 'artemisApp.multipleChoiceQuestion.editor.addExplanation';
-
-    /**
-     * @function execute
-     * @desc Add a new explanation to answer option or question title in the text editor at the location of the cursor
-     */
-    execute(): void {
-        const text = '\n\t' + this.getOpeningIdentifier() + ExplanationCommand.TEXT;
-        addTextAtCursor(text, this.aceEditor);
-    }
-
-    /**
-     * @function getOpeningIdentifier
-     * @desc identify the start of the explanation
-     */
-    getOpeningIdentifier(): string {
-        return explanationCommandIdentifier;
-    }
-
-    /**
-     * @function getClosingIdentifier
-     * @desc identify the end of the explanation
-     */
-    getClosingIdentifier(): string {
-        return '[/exp]';
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/domainCommands/feedback.command.ts b/src/main/webapp/app/shared/markdown-editor/domainCommands/feedback.command.ts
deleted file mode 100644
index 739b531dbff5..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/domainCommands/feedback.command.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { DomainTagCommand } from 'app/shared/markdown-editor/domainCommands/domainTag.command';
-import { addTextAtCursor } from 'app/shared/util/markdown.util';
-
-export class FeedbackCommand extends DomainTagCommand {
-    public static readonly IDENTIFIER = '[feedback]';
-    public static readonly TEXT = 'Add feedback for students here (visible for students)';
-
-    buttonTranslationString = 'artemisApp.assessmentInstructions.instructions.editor.addFeedback';
-    displayCommandButton = false;
-
-    /**
-     * @function execute
-     * @desc Add a new feedback for the corresponding instruction in the editor at the location of the cursor
-     */
-    execute(): void {
-        const text = '\n' + this.getOpeningIdentifier() + FeedbackCommand.TEXT;
-        addTextAtCursor(text, this.aceEditor);
-    }
-
-    /**
-     * @function getOpeningIdentifier
-     * @desc identify the start of the feedback
-     */
-    getOpeningIdentifier(): string {
-        return FeedbackCommand.IDENTIFIER;
-    }
-
-    /**
-     * @function getClosingIdentifier
-     * @desc identify the end of the feedback
-     */
-    getClosingIdentifier(): string {
-        return '[/feedback]';
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/domainCommands/gradingCriterionCommand.ts b/src/main/webapp/app/shared/markdown-editor/domainCommands/gradingCriterionCommand.ts
deleted file mode 100644
index 372842e7dbf7..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/domainCommands/gradingCriterionCommand.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { DomainTagCommand } from 'app/shared/markdown-editor/domainCommands/domainTag.command';
-import { addTextAtCursor } from 'app/shared/util/markdown.util';
-import { GradingInstructionCommand } from 'app/shared/markdown-editor/domainCommands/gradingInstruction.command';
-
-export class GradingCriterionCommand extends DomainTagCommand {
-    public static readonly IDENTIFIER = '[criterion]';
-    public static readonly TEXT = ' Add criteria title (only visible for tutors)';
-
-    buttonTranslationString = 'artemisApp.assessmentInstructions.instructions.editor.addCriterion';
-    displayCommandButton = true;
-    gradingInstructionCommand = new GradingInstructionCommand();
-
-    /**
-     * @function execute
-     * @desc Add a new criterion for the corresponding exercise in the editor at the location of the cursor
-     */
-    execute(): void {
-        const text = '\n' + this.getOpeningIdentifier() + GradingCriterionCommand.TEXT + '\n' + this.gradingInstructionCommand.instructionText();
-        addTextAtCursor(text, this.aceEditor);
-    }
-
-    /**
-     * @function getOpeningIdentifier
-     * @desc identify the start of the criterion
-     */
-    getOpeningIdentifier(): string {
-        return GradingCriterionCommand.IDENTIFIER;
-    }
-
-    /**
-     * @function getClosingIdentifier
-     * @desc identify the end of the criterion
-     */
-    getClosingIdentifier(): string {
-        return '[/criterion]';
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/domainCommands/gradingInstruction.command.ts b/src/main/webapp/app/shared/markdown-editor/domainCommands/gradingInstruction.command.ts
deleted file mode 100644
index 31d3179aacc3..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/domainCommands/gradingInstruction.command.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { DomainTagCommand } from 'app/shared/markdown-editor/domainCommands/domainTag.command';
-import { UsageCountCommand } from 'app/shared/markdown-editor/domainCommands/usageCount.command';
-import { FeedbackCommand } from 'app/shared/markdown-editor/domainCommands/feedback.command';
-import { CreditsCommand } from 'app/shared/markdown-editor/domainCommands/credits.command';
-import { addTextAtCursor } from 'app/shared/util/markdown.util';
-import { GradingScaleCommand } from 'app/shared/markdown-editor/domainCommands/gradingScaleCommand';
-import { InstructionDescriptionCommand } from 'app/shared/markdown-editor/domainCommands/instructionDescription.command';
-
-export class GradingInstructionCommand extends DomainTagCommand {
-    creditsCommand = new CreditsCommand();
-    gradingScaleCommand = new GradingScaleCommand();
-    instructionCommand = new InstructionDescriptionCommand();
-    feedbackCommand = new FeedbackCommand();
-    usageCountCommand = new UsageCountCommand();
-
-    public static readonly IDENTIFIER = '[instruction]';
-
-    buttonTranslationString = 'artemisApp.assessmentInstructions.instructions.editor.addInstruction';
-
-    instructionText(): string {
-        return (
-            this.getOpeningIdentifier() +
-            '\n' +
-            '\t' +
-            (this.creditsCommand.getOpeningIdentifier() +
-                CreditsCommand.TEXT +
-                '\n' +
-                '\t' +
-                this.gradingScaleCommand.getOpeningIdentifier() +
-                GradingScaleCommand.TEXT +
-                '\n' +
-                '\t' +
-                this.instructionCommand.getOpeningIdentifier() +
-                InstructionDescriptionCommand.TEXT +
-                '\n' +
-                '\t' +
-                this.feedbackCommand.getOpeningIdentifier() +
-                FeedbackCommand.TEXT +
-                '\n' +
-                '\t' +
-                this.usageCountCommand.getOpeningIdentifier() +
-                UsageCountCommand.TEXT) +
-            '\n'
-        );
-    }
-    /**
-     * @function execute
-     * @desc Add a new grading instruction in the editor at the location of the cursor
-     */
-    execute(): void {
-        const text = this.instructionText();
-
-        addTextAtCursor(text, this.aceEditor);
-    }
-
-    /**
-     * @function getOpeningIdentifier
-     * @desc identify the start of the grading instruction
-     */
-    getOpeningIdentifier(): string {
-        return GradingInstructionCommand.IDENTIFIER;
-    }
-
-    /**
-     * @function getClosingIdentifier
-     * @desc identify the end of the grading instruction
-     */
-    getClosingIdentifier(): string {
-        return '[/instruction]';
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/domainCommands/gradingScaleCommand.ts b/src/main/webapp/app/shared/markdown-editor/domainCommands/gradingScaleCommand.ts
deleted file mode 100644
index df7834baf6b3..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/domainCommands/gradingScaleCommand.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { DomainTagCommand } from 'app/shared/markdown-editor/domainCommands/domainTag.command';
-import { addTextAtCursor } from 'app/shared/util/markdown.util';
-
-export class GradingScaleCommand extends DomainTagCommand {
-    public static readonly IDENTIFIER = '[gradingScale]';
-    public static readonly TEXT = 'Add instruction grading scale here (only visible for tutors)';
-    displayCommandButton = false;
-
-    buttonTranslationString = 'artemisApp.assessmentInstructions.instructions.editor.addGradingScale';
-
-    /**
-     * @function execute
-     * @desc Add a new gradingScale to the instruction in the editor at the location of the cursor
-     */
-    execute(): void {
-        const text = '\n' + this.getOpeningIdentifier() + GradingScaleCommand.TEXT;
-        addTextAtCursor(text, this.aceEditor);
-    }
-
-    /**
-     * @function getOpeningIdentifier
-     * @desc identify the start of the gradingScale
-     */
-    getOpeningIdentifier(): string {
-        return GradingScaleCommand.IDENTIFIER;
-    }
-
-    /**
-     * @function getClosingIdentifier
-     * @desc identify the end of the gradingScale
-     */
-    getClosingIdentifier(): string {
-        return '[/gradingScale]';
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/domainCommands/hint.command.ts b/src/main/webapp/app/shared/markdown-editor/domainCommands/hint.command.ts
deleted file mode 100644
index 380bd4efa65e..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/domainCommands/hint.command.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { addTextAtCursor } from 'app/shared/util/markdown.util';
-import { DomainTagCommand } from 'app/shared/markdown-editor/domainCommands/domainTag.command';
-
-export const hintCommentIdentifier = '[hint]';
-
-export class HintCommand extends DomainTagCommand {
-    public static readonly TEXT = ' Add a hint here (visible during the quiz via ?-Button)';
-
-    buttonTranslationString = 'artemisApp.multipleChoiceQuestion.editor.addHint';
-
-    /**
-     * @function execute
-     * @desc Add a new hint to the answer option or question title in the editor at the location of the cursor
-     */
-    execute(): void {
-        const text = '\n\t' + this.getOpeningIdentifier() + HintCommand.TEXT;
-        addTextAtCursor(text, this.aceEditor);
-    }
-
-    /**
-     * @function getOpeningIdentifier
-     * @desc identify the start of the hint
-     */
-    getOpeningIdentifier(): string {
-        return hintCommentIdentifier;
-    }
-
-    /**
-     * @function getClosingIdentifier
-     * @desc identify the end of the hint
-     */
-    getClosingIdentifier(): string {
-        return '[/hint]';
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/domainCommands/incorrectOptionCommand.ts b/src/main/webapp/app/shared/markdown-editor/domainCommands/incorrectOptionCommand.ts
deleted file mode 100644
index 02891d0d345f..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/domainCommands/incorrectOptionCommand.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { addTextAtCursor } from 'app/shared/util/markdown.util';
-import { DomainTagCommand } from 'app/shared/markdown-editor/domainCommands/domainTag.command';
-
-export class IncorrectOptionCommand extends DomainTagCommand {
-    public static readonly IDENTIFIER = '[wrong]';
-    buttonTranslationString = 'artemisApp.multipleChoiceQuestion.editor.addInCorrectAnswerOption';
-
-    /**
-     * @function execute
-     * @desc Add a new incorrect answer option to the text editor at the location of the cursor
-     */
-    execute(): void {
-        const text = '\n' + this.getOpeningIdentifier() + ' Enter a wrong answer option here';
-        addTextAtCursor(text, this.aceEditor);
-    }
-
-    /**
-     * @function getOpeningIdentifier
-     * @desc identify the start of the correct option
-     */
-    getOpeningIdentifier(): string {
-        return IncorrectOptionCommand.IDENTIFIER;
-    }
-
-    /**
-     * @function getClosingIdentifier
-     * @desc identify the end of the correct option
-     */
-    getClosingIdentifier(): string {
-        return '[/wrong]';
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/domainCommands/instructionDescription.command.ts b/src/main/webapp/app/shared/markdown-editor/domainCommands/instructionDescription.command.ts
deleted file mode 100644
index 00e10e7d10b4..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/domainCommands/instructionDescription.command.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { DomainTagCommand } from 'app/shared/markdown-editor/domainCommands/domainTag.command';
-import { addTextAtCursor } from 'app/shared/util/markdown.util';
-
-export class InstructionDescriptionCommand extends DomainTagCommand {
-    public static readonly IDENTIFIER = '[description]';
-    public static readonly TEXT = 'Add grading instruction here (only visible for tutors)';
-    displayCommandButton = false;
-
-    buttonTranslationString = 'artemisApp.assessmentInstructions.instructions.editor.addInstruction';
-
-    /**
-     * @function execute
-     * @desc Add a new description of the instruction in the editor at the location of the cursor
-     */
-    execute(): void {
-        const text = '\n' + this.getOpeningIdentifier() + InstructionDescriptionCommand.TEXT;
-        addTextAtCursor(text, this.aceEditor);
-    }
-
-    /**
-     * @function getOpeningIdentifier
-     * @desc identify the start of the instruction description
-     */
-    getOpeningIdentifier(): string {
-        return InstructionDescriptionCommand.IDENTIFIER;
-    }
-
-    /**
-     * @function getClosingIdentifier
-     * @desc identify the end of the instruction description
-     */
-    getClosingIdentifier(): string {
-        return '[/description]';
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/domainCommands/programming-exercise/task.command.ts b/src/main/webapp/app/shared/markdown-editor/domainCommands/programming-exercise/task.command.ts
deleted file mode 100644
index 721785b5d4fd..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/domainCommands/programming-exercise/task.command.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { DomainTagCommand } from 'app/shared/markdown-editor/domainCommands/domainTag.command';
-import { escapeStringForUseInRegex } from 'app/shared/util/global.utils';
-
-export class TaskCommand extends DomainTagCommand {
-    public static readonly IDENTIFIER = '[task]';
-    public static readonly TASK_PLACE_HOLDER = 'Task Short Description';
-    public static readonly TEST_CASE_PLACEHOLDER = 'testCaseName';
-
-    buttonTranslationString = 'artemisApp.programmingExercise.problemStatement.taskCommand';
-
-    setEditor(aceEditor: any) {
-        super.setEditor(aceEditor);
-
-        const taskCommandCompleter = {
-            getCompletions: (editor: any, session: any, pos: any, prefix: any, callback: any) => {
-                callback(null, { caption: 'task', value: this.getTask(), meta: 'insert task' });
-            },
-        };
-        this.addCompleter(taskCommandCompleter);
-    }
-
-    /**
-     * The task structure is coupled to the value used in `ProgrammingExerciseTaskService` in the server and
-     * `ProgrammingExerciseTaskExtensionWrapper` in the client
-     * If you change the template, make sure to change it in all places!
-     */
-    private getTask() {
-        return `${this.getOpeningIdentifier()}[${TaskCommand.TASK_PLACE_HOLDER}](${TaskCommand.TEST_CASE_PLACEHOLDER})`;
-    }
-
-    public getTagRegex(flags = ''): RegExp {
-        const escapedOpeningIdentifier = escapeStringForUseInRegex(this.getOpeningIdentifier());
-        return new RegExp(`${escapedOpeningIdentifier}(.*)`, flags);
-    }
-
-    /**
-     * @function execute
-     * @desc add a new task. doesn't use the closing identifier for legacy reasons.
-     */
-    execute(): void {
-        const currentLine = this.getCurrentLine();
-        const startingNumber = currentLine.match(/(\d+)\..*/);
-        const thisLineNumber = startingNumber && startingNumber.length > 1 ? `\n${Number(startingNumber[1]) + 1}.` : '1.';
-        const taskText = `${thisLineNumber} ${this.getTask()}`;
-        this.moveCursorToEndOfRow();
-        this.insertText(taskText);
-        this.focus();
-    }
-
-    /**
-     * @function getOpeningIdentifier
-     * @desc identify the start of the task
-     */
-    getOpeningIdentifier(): string {
-        return TaskCommand.IDENTIFIER;
-    }
-
-    /**
-     * @function getClosingIdentifier
-     * @desc identify the end of the explanation
-     */
-    getClosingIdentifier(): string {
-        return '[/task]';
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/domainCommands/programming-exercise/testCase.command.ts b/src/main/webapp/app/shared/markdown-editor/domainCommands/programming-exercise/testCase.command.ts
deleted file mode 100644
index 6380c73c3234..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/domainCommands/programming-exercise/testCase.command.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { DomainMultiOptionListCommand } from 'app/shared/markdown-editor/domainCommands/domain-multi-option-list.command';
-
-export class TestCaseCommand extends DomainMultiOptionListCommand {
-    buttonTranslationString = 'artemisApp.programmingExercise.problemStatement.testCaseCommand';
-
-    protected getValueMeta(): string {
-        return 'testCase';
-    }
-
-    /**
-     * @function getOpeningIdentifier
-     * @desc identify the start of the task
-     */
-    getOpeningIdentifier(): string {
-        return '(';
-    }
-
-    /**
-     * @function getClosingIdentifier
-     * @desc identify the end of the explanation
-     */
-    getClosingIdentifier(): string {
-        return ')';
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/domainCommands/usageCount.command.ts b/src/main/webapp/app/shared/markdown-editor/domainCommands/usageCount.command.ts
deleted file mode 100644
index 9fd37ec38da3..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/domainCommands/usageCount.command.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { DomainTagCommand } from 'app/shared/markdown-editor/domainCommands/domainTag.command';
-import { addTextAtCursor } from 'app/shared/util/markdown.util';
-
-export class UsageCountCommand extends DomainTagCommand {
-    public static readonly IDENTIFIER = '[maxCountInScore]';
-    public static readonly TEXT = '0';
-    // 'Add how often the credits should be taken into consideration for this instruction: 0 -> the credits should be added as often as the instruction occurs' +
-    // ' x of type int -> credits will be added x times only, if instruction occurs more than x times it will not be counted and instead marked as subsequent fault';
-
-    buttonTranslationString = 'artemisApp.assessmentInstructions.instructions.editor.addCountUsage';
-    displayCommandButton = false;
-
-    /**
-     * @function execute
-     * @desc Add a new usage count for the corresponding instruction in the editor at the location of the cursor
-     */
-    execute(): void {
-        const text = '\n' + this.getOpeningIdentifier() + UsageCountCommand.TEXT;
-        addTextAtCursor(text, this.aceEditor);
-    }
-
-    /**
-     * @function getOpeningIdentifier
-     * @desc identify the start of the usage count
-     */
-    getOpeningIdentifier(): string {
-        return UsageCountCommand.IDENTIFIER;
-    }
-
-    /**
-     * @function getClosingIdentifier
-     * @desc identify the end of the usage count
-     */
-    getClosingIdentifier(): string {
-        return '[/maxCountInScore]';
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/markdown-editor.component.html b/src/main/webapp/app/shared/markdown-editor/markdown-editor.component.html
deleted file mode 100644
index 9b9c93c7be41..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/markdown-editor.component.html
+++ /dev/null
@@ -1,224 +0,0 @@
-<div #wrapper class="markdown-editor-wrapper">
-    <nav ngbNav #nav="ngbNav" class="nav-tabs" [destroyOnHide]="false" (navChange)="changeNavigation($event)">
-        <!-- editor -->
-        <ng-container ngbNavItem="editor_edit">
-            @if (showEditButton) {
-                <a ngbNavLink class="btn-sm text-normal px-2 py-0 m-0" jhiTranslate="entity.action.edit"></a>
-            }
-            <ng-template ngbNavContent>
-                <div [ngStyle]="{ 'minHeight.px': minHeightEditor }" class="height-100 markdown-editor d-flex flex-column" [id]="uniqueMarkdownEditorId">
-                    <jhi-ace-editor
-                        #aceEditor
-                        [mode]="aceEditorOptions.mode"
-                        [autoUpdateContent]="aceEditorOptions.autoUpdateContent"
-                        [text]="markdown || ''"
-                        (textChange)="markdownTextChange($event)"
-                        class="form-control markdown-editor__content"
-                        (textChanged)="editorContentString = $event"
-                        [class.file-input]="enableFileUpload"
-                        (dragover)="enableFileUpload ? $event.preventDefault() : ''"
-                        (drop)="enableFileUpload ? onFileDrop($event) : ''"
-                        (paste)="enableFileUpload ? onFilePaste($event) : ''"
-                    />
-                    <!-- manual input for file upload -->
-                    @if (enableFileUpload) {
-                        <input
-                            [id]="'file-upload ' + uniqueMarkdownEditorId"
-                            class="markdown-editor__file-input"
-                            type="file"
-                            accept="image/*"
-                            [multiple]="true"
-                            (change)="onFileUpload($event)"
-                        />
-                        <label [for]="'file-upload ' + uniqueMarkdownEditorId" class="markdown-editor__file-label d-inline">
-                            <div class="row mx-0 align-items-baseline">
-                                <span class="col upload-subtitle" jhiTranslate="artemisApp.markdownEditor.fileUpload"></span>
-                                <a class="col-auto" href="http://demo.showdownjs.com">
-                                    <fa-icon [icon]="faQuestionCircle" [ngbTooltip]="'artemisApp.markdownEditor.guide' | artemisTranslate" />
-                                </a>
-                            </div>
-                        </label>
-                    }
-                    <!-- Required for resizing; don't remove empty span -->
-                    @if (enableResize) {
-                        <fa-icon [icon]="faGripLines" class="rg-bottom md-resize-icon"><span></span></fa-icon>
-                    }
-                </div>
-            </ng-template>
-        </ng-container>
-        <!-- visual Mode -->
-        <ng-container ngbNavItem="editor_visual">
-            @if (showVisualModeButton) {
-                <a ngbNavLink class="btn-sm text-normal px-2 py-0 m-0" jhiTranslate="entity.action.visual"></a>
-            }
-            <ng-template ngbNavContent>
-                <ng-content select="[#visual]" />
-            </ng-template>
-        </ng-container>
-        <!-- preview -->
-        <ng-container ngbNavItem="editor_preview">
-            @if (showPreviewButton) {
-                <a ngbNavLink class="btn-sm text-normal px-2 py-0 m-0" jhiTranslate="entity.action.preview"></a>
-            }
-            <ng-template ngbNavContent>
-                <ng-content select="[#preview]" />
-                @if (showDefaultPreview) {
-                    <div class="pt-1 background-editor-high markdown-preview" [innerHTML]="previewTextAsHtml" [ngStyle]="{ 'minHeight.px': 0.75 * minHeightEditor }">Preview</div>
-                }
-            </ng-template>
-        </ng-container>
-        <!-- commands -->
-        @if (!previewMode && !visualMode) {
-            <ng-container ngbNavItem>
-                <div class="markdown-editor__commands">
-                    <div class="markdown-editor__commands-default">
-                        <!--default commands (e.g. bold)-->
-                        @for (command of defaultCommands | negatedTypeCheck: MultiOptionCommand; track defaultCommands.indexOf(command)) {
-                            <button type="button" class="btn btn-sm py-0" (click)="command.execute()" [ngbTooltip]="command.buttonTranslationString | artemisTranslate">
-                                <fa-icon [icon]="command.buttonIcon" />
-                            </button>
-                        }
-                        <!--style command -->
-                        @if (headerCommands.length > 0) {
-                            <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
-                                <button
-                                    class="btn btn-sm px-2 py-0"
-                                    type="button"
-                                    id="dropdownBasic1"
-                                    ngbDropdownToggle
-                                    jhiTranslate="artemisApp.multipleChoiceQuestion.editor.style"
-                                ></button>
-                                <div class="dropdown-menu" ngbDropdownMenu>
-                                    @for (command of headerCommands; track command) {
-                                        <button class="dropdown-item" (click)="command.execute()" type="button">
-                                            {{ command.buttonTranslationString | artemisTranslate }}
-                                        </button>
-                                    }
-                                </div>
-                            </div>
-                        }
-                        @for (command of defaultCommands | typeCheck: InteractiveSearchCommand; track defaultCommands.indexOf(command)) {
-                            <jhi-select-with-search [command]="command" [editorContentString]="editorContentString" />
-                        }
-                        @for (command of defaultCommands | typeCheck: MultiOptionCommand | negatedTypeCheck: InteractiveSearchCommand; track defaultCommands.indexOf(command)) {
-                            <div>
-                                <button
-                                    mat-button
-                                    [matMenuTriggerFor]="isTypeOfExerciseReferenceCommand(command) ? subMenuExercise : subMenuLecture"
-                                    type="button"
-                                    class="btn btn-sm m-0 ml-1 py-0"
-                                >
-                                    <span class="default-font-size">{{ command.buttonTranslationString | artemisTranslate }}</span>
-                                    <fa-icon [icon]="faAngleDown" class="ms-1" />
-                                </button>
-                                <mat-menu #subMenuExercise="matMenu" type="button">
-                                    @if (!command.getValues() || command.getValues().length === 0) {
-                                        <button mat-button [disabled]="true" jhiTranslate="global.generic.emptyList" type="button"></button>
-                                    }
-                                    @for (item of command.getValues(); track item) {
-                                        @if (item.type !== 'LECTURE') {
-                                            <button mat-menu-item (click)="command.execute(item.id, item.type)" type="button">{{ item.value }}</button>
-                                        }
-                                    }
-                                </mat-menu>
-                                <mat-menu #subMenuLecture="matMenu" type="button">
-                                    @if (!command.getValues() || command.getValues().length === 0) {
-                                        <button mat-button [disabled]="true" jhiTranslate="global.generic.emptyList" type="button"></button>
-                                    }
-                                    @for (lecture of command.getValues(); track lecture.id) {
-                                        @if (lecture.type === 'LECTURE') {
-                                            <button mat-menu-item [matMenuTriggerFor]="lectureMenuUnits" type="button">
-                                                {{ lecture.value }}
-                                            </button>
-                                        }
-                                        <mat-menu #lectureMenuUnits="matMenu" type="button">
-                                            @if (lecture.type === 'LECTURE') {
-                                                <button mat-menu-item (click)="command.execute(lecture.id, lecture.type)" type="button" class="border-bottom">
-                                                    {{ lecture.value }}
-                                                </button>
-                                            }
-                                            @for (unit of lecture.attachmentUnits; track unit.id) {
-                                                @if (unit.courseArtifactType === 'ATTACHMENT_UNITS') {
-                                                    <button mat-menu-item [matMenuTriggerFor]="lectureMenuUnitsSlide" type="button">
-                                                        <span>{{ unit.value }}</span>
-                                                    </button>
-                                                }
-                                                <mat-menu #lectureMenuUnitsSlide="matMenu" type="button">
-                                                    <button
-                                                        mat-menu-item
-                                                        (click)="command.execute(lecture.id, lecture.type, undefined, unit.id)"
-                                                        type="button"
-                                                        class="border-bottom"
-                                                    >
-                                                        {{ unit.value }}
-                                                    </button>
-                                                    @if (!unit.slides || unit.slides.length === 0) {
-                                                        <button mat-button [disabled]="true" jhiTranslate="global.generic.emptyList" type="button"></button>
-                                                    }
-                                                    @for (slide of unit.slides; track slide.id) {
-                                                        <button mat-menu-item (click)="command.execute(lecture.id, lecture.type, undefined, unit.id, slide.id)" type="button">
-                                                            <span>Slide {{ slide.slideNumber }}</span>
-                                                        </button>
-                                                    }
-                                                </mat-menu>
-                                            }
-                                            @for (attachment of lecture.elements; track attachment.id) {
-                                                <button mat-menu-item type="button" (click)="command.execute(lecture.id, attachment.type, attachment.id)">
-                                                    <span>{{ attachment.value }}</span>
-                                                </button>
-                                            }
-                                        </mat-menu>
-                                    }
-                                </mat-menu>
-                            </div>
-                        }
-                        <!--color picker command -->
-                        @if (colorCommands.length > 0) {
-                            <div class="btn-group col-xs-6">
-                                <div class="color-preview btn btn-sm px-2 py-0" (click)="openColorSelector($event)" jhiTranslate="artemisApp.markdownEditor.color"></div>
-                                <jhi-color-selector [tagColors]="markdownColors" (selectedColor)="onSelectedColor($event)" />
-                            </div>
-                        }
-                        <!-- domain commands -->
-                        @if (domainCommands && domainCommands.length !== 0) {
-                            <div class="markdown-editor__commands-domain">
-                                @for (command of domainCommands | typeCheck: DomainTagCommand; track domainCommands.indexOf(command)) {
-                                    @if (command.displayCommandButton) {
-                                        <div class="btn btn-sm px-2 py-0" (click)="command.execute()">
-                                            {{ command.buttonTranslationString | artemisTranslate }}
-                                        </div>
-                                    }
-                                }
-                                @for (command of domainCommands | typeCheck: DomainMultiOptionCommand; track domainCommands.indexOf(command)) {
-                                    <div ngbDropdown class="btn-group">
-                                        <button class="btn btn-sm px-2 py-0" type="button" ngbDropdownToggle>
-                                            {{ command.buttonTranslationString | artemisTranslate }}
-                                        </button>
-                                        <div ngbDropdownMenu>
-                                            @for (item of command.getValues(); track item) {
-                                                <button class="btn-sm" type="button" (click)="command.execute(item.id)" ngbDropdownItem>
-                                                    {{ item.value }}
-                                                </button>
-                                            }
-                                            @if (!command.getValues().length) {
-                                                <button [disabled]="true" ngbDropdownItem jhiTranslate="global.generic.emptyList"></button>
-                                            }
-                                        </div>
-                                    </div>
-                                }
-                            </div>
-                        }
-                        <div class="ms-auto">
-                            @for (command of metaCommands; track metaCommands.indexOf(command)) {
-                                <button type="button" class="btn btn-sm px-2 py-0" (click)="command.execute()" [ngbTooltip]="command.buttonTranslationString | artemisTranslate">
-                                    <fa-icon [icon]="command.buttonIcon" />
-                                </button>
-                            }
-                        </div>
-                    </div>
-                </div>
-            </ng-container>
-        }
-    </nav>
-    <div [ngbNavOutlet]="nav"></div>
-</div>
diff --git a/src/main/webapp/app/shared/markdown-editor/markdown-editor.component.scss b/src/main/webapp/app/shared/markdown-editor/markdown-editor.component.scss
deleted file mode 100644
index 935730fc5c81..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/markdown-editor.component.scss
+++ /dev/null
@@ -1,132 +0,0 @@
-.markdown-editor-wrapper {
-    display: flex;
-    flex-flow: column nowrap;
-    flex: 1 1 auto;
-    height: inherit;
-    color: var(--md-wrapper-color);
-
-    // This is a fix for using the fullscreen mode on Safari.
-    &:-webkit-full-screen {
-        width: 100%;
-        height: 100%;
-    }
-
-    .md-resize-icon {
-        color: var(--md-resize-icon-color);
-    }
-
-    .tab-list {
-        background: var(--md-tab-list-bg);
-    }
-    .tab-content,
-    .tab-content > .active {
-        display: flex;
-        flex-flow: column nowrap;
-        flex: 1 1 auto;
-        height: 100%;
-    }
-
-    .no-dropdown-indicator::after {
-        display: none;
-    }
-
-    .markdown-editor {
-        display: flex;
-        flex-flow: column nowrap;
-        flex: 1 1 auto;
-        touch-action: none;
-
-        // Fix for full screen mode, otherwise the color is black.
-        background-color: var(--md-editor-background);
-
-        &__content {
-            height: 100% !important;
-            width: 100%;
-            flex: 1 1 auto;
-            overflow: auto;
-        }
-
-        .file-input {
-            border-bottom: 1px dotted var(--md-file-input-border-color);
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
-        }
-
-        &__file-input {
-            // cannot be set to 'display: false' or similar
-            // input value would not be sent
-            width: 0.1px;
-            height: 0.1px;
-            opacity: 0;
-            overflow: hidden;
-            position: absolute;
-            z-index: -1;
-        }
-
-        &__file-input:focus,
-        &__file-label:focus {
-            outline: 1px dotted #000;
-            outline: -webkit-focus-ring-color auto 5px;
-        }
-
-        &__file-label {
-            cursor: pointer;
-            width: 100%;
-            border: 1px solid var(--border-color);
-            border-top: none;
-            border-radius: 0 0.15em 0.15em 0;
-
-            .upload-subtitle {
-                font-size: 12px;
-                color: var(--bs-secondary);
-            }
-        }
-
-        &__markdown {
-            height: inherit;
-            overflow: auto;
-            padding: 1rem;
-        }
-
-        &__commands {
-            &-default,
-            &-domain {
-                display: flex;
-                flex-flow: row wrap;
-                align-items: center;
-            }
-
-            .mat-mdc-button {
-                height: fit-content;
-            }
-        }
-
-        .rg-bottom {
-            align-self: center;
-        }
-    }
-}
-
-.background-editor-high {
-    overflow: auto;
-}
-
-.dropdown-menu {
-    max-height: 300px;
-    overflow-y: auto;
-
-    li {
-        position: relative;
-    }
-}
-
-.nested {
-    padding-left: 30px;
-}
-.nested-slide {
-    padding-left: 50px;
-}
-
-.default-font-size {
-    font-size: var(--bs-body-font-size);
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/markdown-editor.component.ts b/src/main/webapp/app/shared/markdown-editor/markdown-editor.component.ts
deleted file mode 100644
index 77910b630a20..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/markdown-editor.component.ts
+++ /dev/null
@@ -1,519 +0,0 @@
-import { AfterViewInit, Component, ContentChild, ElementRef, EventEmitter, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core';
-import { SafeHtml } from '@angular/platform-browser';
-// Note: this import has to be before the 'brace' imports
-import { AceEditorComponent } from 'app/shared/markdown-editor/ace-editor/ace-editor.component';
-import 'brace/theme/chrome';
-import 'brace/mode/markdown';
-import 'brace/mode/latex';
-import 'brace/ext/language_tools';
-import { Interactable } from '@interactjs/core/Interactable';
-import interact from 'interactjs';
-import { ArtemisMarkdownService } from 'app/shared/markdown.service';
-import { FileUploaderService } from 'app/shared/http/file-uploader.service';
-import { AlertService, AlertType } from 'app/core/util/alert.service';
-import { ColorSelectorComponent } from 'app/shared/color-selector/color-selector.component';
-import { DomainTagCommand } from './domainCommands/domainTag.command';
-import { escapeStringForUseInRegex } from 'app/shared/util/global.utils';
-import { UnderlineCommand } from 'app/shared/markdown-editor/commands/underline.command';
-import { ColorPickerCommand } from 'app/shared/markdown-editor/commands/colorPicker.command';
-import { BoldCommand } from 'app/shared/markdown-editor/commands/bold.command';
-import { AttachmentCommand } from 'app/shared/markdown-editor/commands/attachmentCommand';
-import { ReferenceCommand } from 'app/shared/markdown-editor/commands/reference.command';
-import { DomainMultiOptionCommand } from 'app/shared/markdown-editor/domainCommands/domainMultiOptionCommand';
-import { FullscreenCommand } from 'app/shared/markdown-editor/commands/fullscreen.command';
-import { HeadingOneCommand } from 'app/shared/markdown-editor/commands/headingOne.command';
-import { Command } from 'app/shared/markdown-editor/commands/command';
-import { ItalicCommand } from 'app/shared/markdown-editor/commands/italic.command';
-import { OrderedListCommand } from 'app/shared/markdown-editor/commands/orderedListCommand';
-import { HeadingTwoCommand } from 'app/shared/markdown-editor/commands/headingTwo.command';
-import { LinkCommand } from 'app/shared/markdown-editor/commands/link.command';
-import { CodeCommand } from 'app/shared/markdown-editor/commands/code.command';
-import { DomainCommand } from 'app/shared/markdown-editor/domainCommands/domainCommand';
-import { UnorderedListCommand } from 'app/shared/markdown-editor/commands/unorderedListCommand';
-import { HeadingThreeCommand } from 'app/shared/markdown-editor/commands/headingThree.command';
-import { CodeBlockCommand } from 'app/shared/markdown-editor/commands/codeblock.command';
-import { faAngleDown, faAngleRight, faGripLines, faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
-import { MultiOptionCommand } from 'app/shared/markdown-editor/commands/multiOptionCommand';
-import { v4 as uuid } from 'uuid';
-import { MultipleChoiceVisualQuestionComponent } from 'app/exercises/quiz/shared/questions/multiple-choice-question/multiple-choice-visual-question.component';
-import { ExerciseReferenceCommand } from 'app/shared/markdown-editor/commands/courseArtifactReferenceCommands/exerciseReferenceCommand';
-import { InteractiveSearchCommand } from 'app/shared/markdown-editor/commands/interactiveSearchCommand';
-
-export enum MarkdownEditorHeight {
-    INLINE = 100,
-    SMALL = 300,
-    MEDIUM = 500,
-    LARGE = 1000,
-    EXTRA_LARGE = 1500,
-}
-
-export enum EditorMode {
-    NONE = 'none',
-    LATEX = 'latex',
-}
-
-const getAceMode = (mode: EditorMode) => {
-    switch (mode) {
-        case EditorMode.LATEX:
-            return 'ace/mode/latex';
-        case EditorMode.NONE:
-            return null;
-        default:
-            return null;
-    }
-};
-
-@Component({
-    selector: 'jhi-markdown-editor',
-    templateUrl: './markdown-editor.component.html',
-    styleUrls: ['./markdown-editor.component.scss'],
-    encapsulation: ViewEncapsulation.None,
-})
-export class MarkdownEditorComponent implements AfterViewInit {
-    public MultiOptionCommand = MultiOptionCommand;
-    public DomainMultiOptionCommand = DomainMultiOptionCommand;
-    public DomainTagCommand = DomainTagCommand;
-    public InteractiveSearchCommand = InteractiveSearchCommand;
-    // This ref is used for entering the fullscreen mode.
-    @ViewChild('wrapper', { read: ElementRef, static: false }) wrapper: ElementRef;
-    @ViewChild('aceEditor', { static: false })
-    aceEditorContainer: AceEditorComponent;
-    aceEditorOptions = {
-        autoUpdateContent: true,
-        mode: 'markdown',
-    };
-    @ViewChild(ColorSelectorComponent, { static: false }) colorSelector: ColorSelectorComponent;
-
-    /** {string} which is initially displayed in the editor generated and passed on from the parent component*/
-    @Input() markdown?: string;
-    @Input() editorMode = EditorMode.NONE;
-    @Input() showLineNumbers = false;
-    @Output() markdownChange = new EventEmitter<string>();
-    @Output() html = new EventEmitter<SafeHtml | null>();
-
-    /** default colors for the markdown editor*/
-    markdownColors = ['#ca2024', '#3ea119', '#ffffff', '#000000', '#fffa5c', '#0d3cc2', '#b05db8', '#d86b1f'];
-    selectedColor = '#000000';
-    /** {array} containing all colorPickerCommands
-     * IMPORTANT: If you want to use the colorpicker you have to implement <div class="markdown-preview"></div>
-     * because the class definitions are saved within that method*/
-    @Input() colorCommands: Command[] = [new ColorPickerCommand()];
-
-    /**
-     * Use this array for commands that are not related to the markdown but to the editor (e.g. fullscreen mode).
-     * These elements will be displayed on the right side of the command bar.
-     */
-    @Input() metaCommands: Command[] = [new FullscreenCommand()];
-
-    /** {array} containing all default commands accessible for the editor per default */
-    @Input() defaultCommands: Command[] = [
-        new BoldCommand(),
-        new ItalicCommand(),
-        new UnderlineCommand(),
-        new ReferenceCommand(),
-        new CodeCommand(),
-        new CodeBlockCommand(),
-        new LinkCommand(),
-        new AttachmentCommand(),
-        new OrderedListCommand(),
-        new UnorderedListCommand(),
-    ];
-
-    /** {array} containing all header commands accessible for the markdown editor per default*/
-    @Input() headerCommands: Command[] = [new HeadingOneCommand(), new HeadingTwoCommand(), new HeadingThreeCommand()];
-
-    /** {domainCommands} containing all domain commands which need to be set by the parent component which contains the markdown editor */
-    @Input() domainCommands: Array<DomainCommand>;
-
-    /** {textWithDomainCommandsFound} emits an {array} of text lines with the corresponding domain command to the parent component which contains the markdown editor */
-    @Output() textWithDomainCommandsFound = new EventEmitter<[string, DomainCommand | null][]>();
-
-    @Output() onPreviewSelect = new EventEmitter();
-    @Output() onEditSelect = new EventEmitter();
-
-    /** {showPreviewButton}
-     * 1. true -> the preview of the editor is used
-     * 2. false -> the preview of the parent component is used, parent has to set this value to false with an input */
-    @Input() showPreviewButton = true;
-
-    /**
-     * true -> the markdown content will be rendered and shown, used when there are no special additions (e.g. text exercises)
-     * false -> the parent component adds its own preview content with id=preview. Used e.g. for programming exercises
-     */
-    @Input() showDefaultPreview = true;
-
-    @Input() showEditButton = true;
-
-    @Input() showVisualModeButton = false;
-
-    /** {previewTextAsHtml} text that is emitted to the parent component if the parent does not use any domain commands */
-    previewTextAsHtml: SafeHtml | null;
-
-    /** {previewMode} when editor is created the preview is set to false, since the edit mode is set active */
-    previewMode = false;
-
-    /** {visualMode} when editor is created the visual mode is set to false, since the edit mode is set active */
-    visualMode = false;
-    @Input()
-    minHeightEditor = MarkdownEditorHeight.SMALL.valueOf();
-
-    @ContentChild(MultipleChoiceVisualQuestionComponent, { static: false }) visualChild: MultipleChoiceVisualQuestionComponent;
-
-    /** Resizable constants **/
-    @Input()
-    enableResize = true;
-    @Input()
-    resizableMaxHeight = MarkdownEditorHeight.LARGE;
-    @Input()
-    resizableMinHeight = MarkdownEditorHeight.SMALL;
-    interactResizable: Interactable;
-
-    /** {enableFileUpload}
-     * whether to show the file upload field and enable the drag and drop functionality
-     * enabled by default
-     */
-    @Input()
-    enableFileUpload = true;
-
-    // Icons
-    faQuestionCircle = faQuestionCircle;
-    faGripLines = faGripLines;
-    faAngleRight = faAngleRight;
-    faAngleDown = faAngleDown;
-
-    uniqueMarkdownEditorId: string;
-
-    editorContentString: string;
-
-    constructor(
-        private artemisMarkdown: ArtemisMarkdownService,
-        private fileUploaderService: FileUploaderService,
-        private alertService: AlertService,
-    ) {
-        this.uniqueMarkdownEditorId = 'markdown-editor-' + uuid();
-    }
-
-    /** opens the button for selecting the color */
-    openColorSelector(event: MouseEvent) {
-        const marginTop = 35;
-        const height = 110;
-        this.colorSelector.openColorSelector(event, marginTop, height);
-    }
-
-    /** selected text is changed into the chosen color */
-    onSelectedColor(selectedColor: string) {
-        this.selectedColor = selectedColor;
-        this.colorCommands[0].execute(selectedColor);
-    }
-
-    /**
-     * @function addCommand
-     * @param command
-     * @desc customize the user interface of the markdown editor by adding a command
-     */
-    addCommand(command: Command) {
-        this.defaultCommands.push(command);
-    }
-
-    /**
-     * @function removeCommand
-     * @param classRef Command
-     * @desc customize the user interface of the markdown editor by removing a command
-     */
-    removeCommand(classRef: typeof Command) {
-        setTimeout(() => (this.defaultCommands = this.defaultCommands.filter((element) => !(element instanceof classRef))));
-    }
-
-    isTypeOfExerciseReferenceCommand(commandToCheck: MultiOptionCommand) {
-        return commandToCheck instanceof ExerciseReferenceCommand;
-    }
-
-    ngAfterViewInit(): void {
-        // Commands may want to add custom completers - remove standard completers of the ace editor.
-        this.aceEditorContainer.getEditor().setOptions({
-            enableBasicAutocompletion: true,
-            enableLiveAutocompletion: true,
-        });
-        this.aceEditorContainer.getEditor().completers = [];
-
-        if (this.domainCommands == undefined || this.domainCommands.length === 0) {
-            [...this.defaultCommands, ...this.colorCommands, ...(this.headerCommands || []), ...this.metaCommands].forEach((command) => {
-                command.setEditor(this.aceEditorContainer.getEditor());
-                command.setMarkdownWrapper(this.wrapper);
-            });
-        } else {
-            [...this.defaultCommands, ...this.domainCommands, ...this.colorCommands, ...(this.headerCommands || []), ...this.metaCommands].forEach((command) => {
-                command.setEditor(this.aceEditorContainer.getEditor());
-                command.setMarkdownWrapper(this.wrapper);
-            });
-        }
-        this.setupMarkdownEditor();
-        const selectedAceMode = getAceMode(this.editorMode);
-        if (selectedAceMode) {
-            this.aceEditorContainer.getEditor().getSession().setMode(selectedAceMode);
-        }
-
-        if (this.enableResize) {
-            this.setupResizable();
-        }
-    }
-
-    /**
-     * @function setupQuestionEditor
-     * @desc Initializes the ace editor
-     */
-    setupMarkdownEditor(): void {
-        this.aceEditorContainer.getEditor().renderer.setShowGutter(this.showLineNumbers);
-        this.aceEditorContainer.getEditor().renderer.setPadding(10);
-        this.aceEditorContainer.getEditor().renderer.setScrollMargin(8, 8);
-        this.aceEditorContainer.getEditor().setHighlightActiveLine(false);
-        this.aceEditorContainer.getEditor().setShowPrintMargin(false);
-        this.aceEditorContainer.getEditor().clearSelection();
-        this.aceEditorContainer.getEditor().setAutoScrollEditorIntoView(true);
-        this.aceEditorContainer.getEditor().setOptions({ wrap: true });
-    }
-
-    /**
-     * @function setupResizable
-     * @desc Sets up resizable to enable resizing for the user
-     */
-    setupResizable(): void {
-        // Use a unique, random ID to select the editor
-        // This is required to select the correct one in case multiple editors are used at the same time
-        const selector = '#' + this.uniqueMarkdownEditorId;
-
-        // unregister previously set event listeners for class elements
-        interact(selector).unset();
-
-        this.interactResizable = interact(selector)
-            .resizable({
-                // Enable resize from top edge; triggered by class rg-top
-                edges: { left: false, right: false, bottom: '.rg-bottom', top: false },
-                // Set min and max height
-                modifiers: [
-                    interact.modifiers!.restrictSize({
-                        min: { width: 0, height: this.resizableMinHeight },
-                        max: { width: 2000, height: this.resizableMaxHeight },
-                    }),
-                ],
-                inertia: true,
-            })
-            .on('resizestart', function (event: any) {
-                event.target.classList.add('card-resizable');
-            })
-            .on('resizeend', (event: any) => {
-                event.target.classList.remove('card-resizable');
-            })
-            .on('resizemove', (event: any) => {
-                const target = event.target;
-                // Update element height
-                target.style.height = event.rect.height + 'px';
-                this.aceEditorContainer.getEditor().resize();
-            });
-    }
-
-    /**
-     * Parses markdown to generate a preview if the standard preview is used and/or searches for domain command identifiers.
-     * Will emit events for both the generated preview and domain commands.
-     *
-     */
-    parse(): void {
-        if (this.showDefaultPreview) {
-            this.previewTextAsHtml = this.artemisMarkdown.safeHtmlForMarkdown(this.markdown);
-            this.html.emit(this.previewTextAsHtml);
-        }
-        if (this.domainCommands && this.domainCommands.length && this.markdown) {
-            /** create array with domain command identifier */
-            const domainCommandIdentifiersToParse = this.domainCommands.map((command) => command.getOpeningIdentifier());
-            /** create empty array which
-             * will contain the splitted text with the corresponding domainCommandIdentifier which
-             * will be emitted to the parent component */
-            const commandTextsMappedToCommandIdentifiers: [string, DomainCommand | null][] = [];
-            /** create a remainingMarkdownText of the markdown text to loop through it and find the domainCommandIdentifier */
-            let remainingMarkdownText = this.markdown.slice(0);
-
-            /** create string with the identifiers to use for RegEx by deleting the [] of the domainCommandIdentifiers */
-            const commandIdentifiersString = domainCommandIdentifiersToParse
-                .map((tag) => tag.replace('[', '').replace(']', ''))
-                .map(escapeStringForUseInRegex)
-                .join('|');
-
-            /** create a new regex expression which searches for the domainCommands identifiers
-             * (?=   If a command is found, add the command identifier to the result of the split
-             * \\[  look for the character '[' to determine the beginning of the command identifier
-             * (${commandIdentifiersString}) look if after the '[' one of the element of commandIdentifiersString is contained
-             * \\] look for the character ']' to determine the end of the command identifier
-             * )  close the bracket
-             *  g: search in the whole string
-             *  i: case insensitive, neglecting capital letters
-             *  m: match the regex over multiple lines*/
-            const regex = new RegExp(`(?=\\[(${commandIdentifiersString})\\])`, 'gmi');
-
-            /** iterating loop as long as the remainingMarkdownText of the markdown text exists and split the remainingMarkdownText when a domainCommand identifier is found */
-            while (remainingMarkdownText.length) {
-                /** As soon as an identifier is with regEx the remainingMarkdownText of the markdown text is split and saved into {array} textWithCommandIdentifier
-                 *  split: saves its values into an {array}
-                 *  limit 1: indicated that as soon as an identifier is found remainingMarkdownText is split */
-                const [textWithCommandIdentifier] = remainingMarkdownText.split(regex, 1);
-                /** substring: reduces the {string} by the length in the brackets
-                 *  Split the remainingMarkdownText by the length of {array} textWithCommandIdentifier to get the remaining array
-                 *  and save it into remainingMarkdownText to start the loop again and search for further domainCommandIdentifiers
-                 *  when remainingMarkdownText is empty the while loop will terminate*/
-                remainingMarkdownText = remainingMarkdownText.substring(textWithCommandIdentifier.length);
-                /** call the parseLineForDomainCommand for each extracted textWithCommandIdentifier
-                 *   trim: reduced the whitespacing linebreaks */
-                const commandTextWithCommandIdentifier = this.parseLineForDomainCommand(textWithCommandIdentifier.trim());
-                /** push the commandTextWithCommandIdentifier into the commandTextsMappedToCommandIdentifiers*/
-                commandTextsMappedToCommandIdentifiers.push(commandTextWithCommandIdentifier);
-            }
-            /** emit the {array} commandTextsMappedToCommandIdentifiers to the client*/
-            this.textWithDomainCommandsFound.emit(commandTextsMappedToCommandIdentifiers);
-        }
-    }
-
-    /**
-     * @function parseLineForDomainCommand
-     * @desc Couple each text with the domainCommandIdentifier to emit that to the parent component for the value assignment
-     *       1. Check which domainCommand identifier is contained within the text
-     *       2. Remove the domainCommand identifier from the text
-     *       3. Create an array with first element text and second element the domainCommand identifier
-     * @param text {string} from the parse function
-     * @return array of the text with the domainCommand identifier
-     */
-    private parseLineForDomainCommand = (text: string): [string, DomainCommand | null] => {
-        for (const domainCommand of this.domainCommands) {
-            const possibleOpeningCommandIdentifier = [
-                domainCommand.getOpeningIdentifier(),
-                domainCommand.getOpeningIdentifier().toLowerCase(),
-                domainCommand.getOpeningIdentifier().toUpperCase(),
-            ];
-            if (possibleOpeningCommandIdentifier.some((identifier) => text.indexOf(identifier) !== -1)) {
-                // TODO when closingIdentifiers are used write a method to extract them from the text
-                const trimmedLineWithoutIdentifier = possibleOpeningCommandIdentifier.reduce((line, identifier) => line.replace(identifier, ''), text).trim();
-                return [trimmedLineWithoutIdentifier, domainCommand];
-            }
-        }
-        return [text.trim(), null];
-    };
-
-    /**
-     * @function togglePreview
-     * @desc Toggle the preview in the template and parse the text
-     */
-    changeNavigation(event: any): void {
-        this.previewMode = event.nextId === 'editor_preview';
-        this.visualMode = event.nextId === 'editor_visual';
-
-        if (this.previewMode) {
-            this.onPreviewSelect.emit();
-        } else {
-            this.onEditSelect.emit();
-        }
-
-        if (event.activeId === 'editor_visual' && this.visualChild) {
-            this.markdown = this.visualChild.parseQuestion();
-
-            if (this.previewMode) {
-                this.parse();
-            }
-        }
-
-        // The text must only be parsed when the active tab before event was edit, otherwise the text can't have changed.
-        if (event.activeId === 'editor_edit') {
-            this.parse();
-        }
-    }
-
-    /**
-     * @function onFileUpload
-     * @desc handle file upload for input
-     * @param event
-     */
-    onFileUpload(event: any): void {
-        if (event.target.files.length >= 1) {
-            this.embedFiles(Array.from(event.target.files));
-        }
-    }
-
-    /**
-     * @function onFileDrop
-     * @desc handle drop of files
-     * @param {DragEvent} event
-     */
-    onFileDrop(event: DragEvent): void {
-        event.preventDefault();
-        if (event.dataTransfer?.items) {
-            // Use DataTransferItemList interface to access the file(s)
-            const files = new Array<File>();
-            for (let i = 0; i < event.dataTransfer.items.length; i++) {
-                // If dropped items aren't files, reject them
-                if (event.dataTransfer.items[i].kind === 'file') {
-                    const file = event.dataTransfer.items[i].getAsFile();
-                    if (file) {
-                        files.push(file);
-                    }
-                }
-            }
-            this.embedFiles(files);
-        } else if (event.dataTransfer?.files) {
-            // Use DataTransfer interface to access the file(s)
-            this.embedFiles(Array.from(event.dataTransfer.files));
-        }
-    }
-
-    /**
-     * @function onFilePaste
-     * @desc handle paste of files
-     * @param {ClipboardEvent} event
-     */
-    onFilePaste(event: ClipboardEvent): void {
-        if (event.clipboardData?.items) {
-            const images = new Array<File>();
-            for (let i = 0; i < event.clipboardData.items.length; i++) {
-                if (event.clipboardData.items[i].kind === 'file') {
-                    const file = event.clipboardData.items[i].getAsFile();
-                    if (file) {
-                        images.push(file);
-                    }
-                }
-            }
-            this.embedFiles(images);
-        }
-    }
-
-    /**
-     * @function embedFiles
-     * @desc generate and embed markdown code for files
-     * @param {FileList} files
-     */
-    embedFiles(files: File[]): void {
-        const aceEditor = this.aceEditorContainer.getEditor();
-        files.forEach((file: File) => {
-            this.fileUploaderService.uploadMarkdownFile(file).then(
-                (res) => {
-                    const extension = file.name.split('.').pop()!.toLocaleLowerCase();
-
-                    let textToAdd = `[${file.name}](${res.path})\n`;
-                    if (extension !== 'pdf') {
-                        // Show file as embedded image
-                        textToAdd = '!' + textToAdd;
-                    }
-
-                    aceEditor.insert(textToAdd);
-                },
-                (error: Error) => {
-                    this.alertService.addAlert({
-                        type: AlertType.DANGER,
-                        message: error.message,
-                        disableTranslation: true,
-                    });
-                },
-            );
-        });
-    }
-
-    markdownTextChange(value: any) {
-        this.markdown = value;
-        this.markdownChange.emit(value as string);
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/markdown-editor.module.ts b/src/main/webapp/app/shared/markdown-editor/markdown-editor.module.ts
index cb04a2cbab90..198dad328789 100644
--- a/src/main/webapp/app/shared/markdown-editor/markdown-editor.module.ts
+++ b/src/main/webapp/app/shared/markdown-editor/markdown-editor.module.ts
@@ -1,19 +1,16 @@
-import { MarkdownEditorComponent } from './markdown-editor.component';
 import { NgModule } from '@angular/core';
-import { AceEditorModule } from 'app/shared/markdown-editor/ace-editor/ace-editor.module';
 import { FormsModule } from '@angular/forms';
 import { ArtemisColorSelectorModule } from 'app/shared/color-selector/color-selector.module';
 import { ArtemisSharedModule } from 'app/shared/shared.module';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatButtonModule } from '@angular/material/button';
-import { SelectWithSearchComponent } from './select-with-search/select-with-search.component';
 import { MarkdownEditorMonacoComponent } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
 import { MonacoEditorModule } from 'app/shared/monaco-editor/monaco-editor.module';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 
 @NgModule({
-    imports: [ArtemisSharedModule, AceEditorModule, MonacoEditorModule, FormsModule, ArtemisColorSelectorModule, MatMenuModule, MatButtonModule, DragDropModule],
-    declarations: [MarkdownEditorComponent, MarkdownEditorMonacoComponent, SelectWithSearchComponent],
-    exports: [MarkdownEditorComponent, MarkdownEditorMonacoComponent],
+    imports: [ArtemisSharedModule, MonacoEditorModule, FormsModule, ArtemisColorSelectorModule, MatMenuModule, MatButtonModule, DragDropModule],
+    declarations: [MarkdownEditorMonacoComponent],
+    exports: [MarkdownEditorMonacoComponent],
 })
 export class ArtemisMarkdownEditorModule {}
diff --git a/src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.scss b/src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.scss
index 77fb21831f07..4b06f7427978 100644
--- a/src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.scss
+++ b/src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.scss
@@ -1,8 +1,32 @@
 .markdown-editor-wrapper {
+    display: flex;
+    flex-flow: column nowrap;
+    flex: 1 1 auto;
+    height: inherit;
+    color: var(--md-wrapper-color);
     background-color: var(--md-editor-background);
+
+    // This is a fix for using the fullscreen mode on Safari.
+    &:-webkit-full-screen {
+        width: 100%;
+        height: 100%;
+    }
+
     .markdown-editor {
         border: 1px solid var(--border-color);
     }
+
+    .md-resize-icon {
+        color: var(--md-resize-icon-color);
+    }
+
+    .tab-list {
+        background: var(--md-tab-list-bg);
+    }
+
+    .no-dropdown-indicator::after {
+        display: none;
+    }
 }
 
 .resize-placeholder {
@@ -32,3 +56,20 @@
         color: var(--bs-secondary);
     }
 }
+
+.background-editor-high {
+    overflow: auto;
+}
+
+.dropdown-menu {
+    max-height: 300px;
+    overflow-y: auto;
+
+    li {
+        position: relative;
+    }
+}
+
+.default-font-size {
+    font-size: var(--bs-body-font-size);
+}
diff --git a/src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.ts b/src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.ts
index a3f9c027a8db..7f9fe5ee75d4 100644
--- a/src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.ts
+++ b/src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.ts
@@ -13,7 +13,6 @@ import {
     computed,
 } from '@angular/core';
 import { MonacoEditorComponent } from 'app/shared/monaco-editor/monaco-editor.component';
-import { MarkdownEditorHeight } from 'app/shared/markdown-editor/markdown-editor.component';
 import { NgbNavChangeEvent } from '@ng-bootstrap/ng-bootstrap';
 import { MonacoEditorAction } from 'app/shared/monaco-editor/model/actions/monaco-editor-action.model';
 import { MonacoBoldAction } from 'app/shared/monaco-editor/model/actions/monaco-bold.action';
@@ -47,6 +46,14 @@ import { ArtemisMarkdownService } from 'app/shared/markdown.service';
 import { parseMarkdownForDomainActions } from 'app/shared/markdown-editor/monaco/markdown-editor-parsing.helper';
 import { COMMUNICATION_MARKDOWN_EDITOR_OPTIONS, DEFAULT_MARKDOWN_EDITOR_OPTIONS } from 'app/shared/monaco-editor/monaco-editor-option.helper';
 
+export enum MarkdownEditorHeight {
+    INLINE = 100,
+    SMALL = 300,
+    MEDIUM = 500,
+    LARGE = 1000,
+    EXTRA_LARGE = 1500,
+}
+
 interface MarkdownActionsByGroup {
     standard: MonacoEditorAction[];
     header: MonacoHeadingAction[];
@@ -76,7 +83,7 @@ const BORDER_HEIGHT_OFFSET = 2;
 @Component({
     selector: 'jhi-markdown-editor-monaco',
     templateUrl: './markdown-editor-monaco.component.html',
-    styleUrls: ['./markdown-editor-monaco.component.scss', '../markdown-editor.component.scss'],
+    styleUrls: ['./markdown-editor-monaco.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MarkdownEditorMonacoComponent implements AfterContentInit, AfterViewInit, OnDestroy {
diff --git a/src/main/webapp/app/shared/markdown-editor/select-with-search/select-with-search.component.html b/src/main/webapp/app/shared/markdown-editor/select-with-search/select-with-search.component.html
deleted file mode 100644
index f35d33d0558f..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/select-with-search/select-with-search.component.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<div #dropdown ngbDropdown class="d-inline-block" (openChange)="$event ? handleMenuOpen() : handleMenuClosed()" autoClose="inside" [placement]="['top-start']">
-    <button type="button" class="btn btn-sm py-0" (click)="handleToggle()">
-        <fa-icon [icon]="command.buttonIcon" />
-    </button>
-    <div ngbDropdownAnchor id="anchor" class="invisible-anchor" [style.top]="offsetY" [style.left]="offsetX"></div>
-    <div ngbDropdownMenu>
-        @for (value of values; track value) {
-            <button ngbDropdownItem type="button" (click)="setSelection(value)">{{ value.name }}</button>
-        }
-    </div>
-</div>
diff --git a/src/main/webapp/app/shared/markdown-editor/select-with-search/select-with-search.component.scss b/src/main/webapp/app/shared/markdown-editor/select-with-search/select-with-search.component.scss
deleted file mode 100644
index 1b28bd67c7fd..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/select-with-search/select-with-search.component.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.invisible-anchor {
-    position: absolute;
-    width: 0;
-    height: 0;
-}
-
-#anchor::after {
-    display: none;
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/select-with-search/select-with-search.component.ts b/src/main/webapp/app/shared/markdown-editor/select-with-search/select-with-search.component.ts
deleted file mode 100644
index af415a2ab1ec..000000000000
--- a/src/main/webapp/app/shared/markdown-editor/select-with-search/select-with-search.component.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import { ChangeDetectorRef, Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild } from '@angular/core';
-import { InteractiveSearchCommand, SelectableItem } from 'app/shared/markdown-editor/commands/interactiveSearchCommand';
-import { AlertService } from 'app/core/util/alert.service';
-import { onError } from 'app/shared/util/global.utils';
-import { Subject, debounce, distinctUntilChanged, switchMap, takeUntil, timer } from 'rxjs';
-import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
-import { NgbDropdown, NgbDropdownConfig } from '@ng-bootstrap/ng-bootstrap';
-
-interface SearchQuery {
-    searchTerm: string;
-    noDebounce: boolean;
-}
-
-@Component({
-    selector: 'jhi-select-with-search',
-    templateUrl: './select-with-search.component.html',
-    styleUrls: ['./select-with-search.component.scss'],
-    providers: [NgbDropdownConfig],
-})
-export class SelectWithSearchComponent implements OnInit, OnChanges, OnDestroy {
-    @Input() command: InteractiveSearchCommand;
-    @Input() editorContentString: string;
-
-    @ViewChild(NgbDropdown) dropdown: NgbDropdown;
-    @ViewChild('dropdown') dropdownRef: ElementRef;
-
-    private ngUnsubscribe = new Subject<void>();
-    private readonly search$ = new Subject<SearchQuery>();
-
-    values: SelectableItem[] = [];
-    selectedValue: SelectableItem | undefined;
-    offsetX: string;
-    offsetY: string;
-
-    constructor(
-        private readonly alertService: AlertService,
-        private readonly cdr: ChangeDetectorRef,
-    ) {}
-
-    ngOnInit(): void {
-        this.command.setSelectWithSearchComponent(this);
-
-        this.search$
-            .pipe(
-                debounce((searchQuery) => {
-                    return timer(searchQuery.noDebounce ? 0 : 200);
-                }),
-                distinctUntilChanged((prev, curr) => {
-                    return prev === curr;
-                }),
-                switchMap((searchQuery) => this.command.performSearch(searchQuery.searchTerm)),
-                takeUntil(this.ngUnsubscribe),
-            )
-            .subscribe({
-                next: (res: HttpResponse<SelectableItem[]>) => {
-                    this.values = res.body!;
-                    this.cdr.detectChanges();
-                },
-                error: (errorResponse: HttpErrorResponse) => {
-                    onError(this.alertService, errorResponse);
-                },
-            });
-    }
-
-    ngOnChanges(changes: SimpleChanges): void {
-        if (changes.editorContentString) {
-            this.command.updateSearchTerm();
-        }
-    }
-
-    ngOnDestroy(): void {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
-    }
-
-    open() {
-        this.dropdown.open();
-    }
-
-    close() {
-        this.dropdown.close();
-    }
-
-    updateSearchTerm(searchInput: string | undefined, noDebounce = false) {
-        const searchTerm = searchInput?.trim().toLowerCase() ?? '';
-        this.search$.next({ searchTerm, noDebounce });
-    }
-
-    handleMenuOpen() {
-        const cursorPosition = this.command.getCursorScreenPosition();
-        const dropdownPosition = this.dropdownRef.nativeElement.getBoundingClientRect();
-        this.offsetX = cursorPosition.pageX - dropdownPosition.left + 'px';
-        this.offsetY = cursorPosition.pageY - dropdownPosition.top + 'px';
-        this.updateSearchTerm('', true);
-        this.cdr.detectChanges();
-    }
-
-    handleMenuClosed() {
-        this.command.insertSelection(this.selectedValue);
-        this.selectedValue = undefined;
-    }
-
-    setSelection(value: any) {
-        this.selectedValue = value;
-        this.dropdown.close();
-    }
-
-    handleToggle() {
-        if (this.dropdown.isOpen()) {
-            this.close();
-        } else {
-            this.command.execute();
-        }
-    }
-}
diff --git a/src/main/webapp/app/shared/markdown-editor/value-item.model.ts b/src/main/webapp/app/shared/markdown-editor/value-item.model.ts
new file mode 100644
index 000000000000..dbeacebf118a
--- /dev/null
+++ b/src/main/webapp/app/shared/markdown-editor/value-item.model.ts
@@ -0,0 +1,7 @@
+export type ValueItem = {
+    id: string;
+    value: string;
+    type?: string;
+    elements?: ValueItem[];
+    attachmentUnits?: ValueItem[];
+};
diff --git a/src/main/webapp/app/shared/markdown.module.ts b/src/main/webapp/app/shared/markdown.module.ts
index 00df892f1be2..1d10d89b3045 100644
--- a/src/main/webapp/app/shared/markdown.module.ts
+++ b/src/main/webapp/app/shared/markdown.module.ts
@@ -1,13 +1,12 @@
 import { NgModule } from '@angular/core';
 import { ArtemisMarkdownService } from 'app/shared/markdown.service';
 import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown-editor.module';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
 import { HtmlForMarkdownPipe } from 'app/shared/pipes/html-for-markdown.pipe';
 
 @NgModule({
     imports: [ArtemisMarkdownEditorModule],
     declarations: [HtmlForMarkdownPipe],
     providers: [ArtemisMarkdownService],
-    exports: [MarkdownEditorComponent, HtmlForMarkdownPipe],
+    exports: [HtmlForMarkdownPipe],
 })
 export class ArtemisMarkdownModule {}
diff --git a/src/main/webapp/app/shared/metis/posting-create-edit.directive.ts b/src/main/webapp/app/shared/metis/posting-create-edit.directive.ts
index 1c8abc2d4b55..5d327cbe390e 100644
--- a/src/main/webapp/app/shared/metis/posting-create-edit.directive.ts
+++ b/src/main/webapp/app/shared/metis/posting-create-edit.directive.ts
@@ -4,7 +4,8 @@ import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { Posting } from 'app/entities/metis/posting.model';
 import { MetisService } from 'app/shared/metis/metis.service';
 import { PostingEditType } from 'app/shared/metis/metis.util';
-import { MarkdownEditorHeight } from 'app/shared/markdown-editor/markdown-editor.component';
+
+import { MarkdownEditorHeight } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
 
 // Note: this number should be the same as in Posting.java
 const MAX_CONTENT_LENGTH = 5000;
diff --git a/src/main/webapp/app/shared/metis/posting-markdown-editor/posting-markdown-editor.component.ts b/src/main/webapp/app/shared/metis/posting-markdown-editor/posting-markdown-editor.component.ts
index decd36d41b61..567846a81e3b 100644
--- a/src/main/webapp/app/shared/metis/posting-markdown-editor/posting-markdown-editor.component.ts
+++ b/src/main/webapp/app/shared/metis/posting-markdown-editor/posting-markdown-editor.component.ts
@@ -13,7 +13,6 @@ import {
     forwardRef,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { MarkdownEditorHeight } from 'app/shared/markdown-editor/markdown-editor.component';
 import { MetisService } from 'app/shared/metis/metis.service';
 import { LectureService } from 'app/lecture/lecture.service';
 import { CourseManagementService } from 'app/course/manage/course-management.service';
@@ -26,7 +25,7 @@ import { MonacoUnderlineAction } from 'app/shared/monaco-editor/model/actions/mo
 import { MonacoQuoteAction } from 'app/shared/monaco-editor/model/actions/monaco-quote.action';
 import { MonacoCodeAction } from 'app/shared/monaco-editor/model/actions/monaco-code.action';
 import { MonacoCodeBlockAction } from 'app/shared/monaco-editor/model/actions/monaco-code-block.action';
-import { MarkdownEditorMonacoComponent } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
+import { MarkdownEditorHeight, MarkdownEditorMonacoComponent } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
 import { MonacoChannelReferenceAction } from 'app/shared/monaco-editor/model/actions/communication/monaco-channel-reference.action';
 import { MonacoUserMentionAction } from 'app/shared/monaco-editor/model/actions/communication/monaco-user-mention.action';
 import { MonacoExerciseReferenceAction } from 'app/shared/monaco-editor/model/actions/communication/monaco-exercise-reference.action';
diff --git a/src/main/webapp/app/shared/monaco-editor/model/actions/communication/monaco-exercise-reference.action.ts b/src/main/webapp/app/shared/monaco-editor/model/actions/communication/monaco-exercise-reference.action.ts
index 014894dedd42..846241c6dd94 100644
--- a/src/main/webapp/app/shared/monaco-editor/model/actions/communication/monaco-exercise-reference.action.ts
+++ b/src/main/webapp/app/shared/monaco-editor/model/actions/communication/monaco-exercise-reference.action.ts
@@ -2,7 +2,7 @@ import { TranslateService } from '@ngx-translate/core';
 import * as monaco from 'monaco-editor';
 import { MetisService } from 'app/shared/metis/metis.service';
 import { MonacoEditorDomainActionWithOptions } from 'app/shared/monaco-editor/model/actions/monaco-editor-domain-action-with-options.model';
-import { ValueItem } from 'app/shared/markdown-editor/command-constants';
+import { ValueItem } from 'app/shared/markdown-editor/value-item.model';
 
 /**
  * Action to insert a reference to an exercise into the editor. Users that type a / will see a list of available exercises to reference.
diff --git a/src/main/webapp/app/shared/monaco-editor/model/actions/monaco-editor-domain-action-with-options.model.ts b/src/main/webapp/app/shared/monaco-editor/model/actions/monaco-editor-domain-action-with-options.model.ts
index f5723fef6394..83969d07626d 100644
--- a/src/main/webapp/app/shared/monaco-editor/model/actions/monaco-editor-domain-action-with-options.model.ts
+++ b/src/main/webapp/app/shared/monaco-editor/model/actions/monaco-editor-domain-action-with-options.model.ts
@@ -1,5 +1,5 @@
 import { MonacoEditorDomainAction } from './monaco-editor-domain-action.model';
-import { ValueItem } from 'app/shared/markdown-editor/command-constants';
+import { ValueItem } from 'app/shared/markdown-editor/value-item.model';
 
 export interface DomainActionWithOptionsArguments {
     selectedItem: ValueItem;
diff --git a/src/main/webapp/app/shared/monaco-editor/model/actions/monaco-task.action.ts b/src/main/webapp/app/shared/monaco-editor/model/actions/monaco-task.action.ts
index e1fe3f87b53e..a55f00bd9d1d 100644
--- a/src/main/webapp/app/shared/monaco-editor/model/actions/monaco-task.action.ts
+++ b/src/main/webapp/app/shared/monaco-editor/model/actions/monaco-task.action.ts
@@ -1,5 +1,6 @@
 import * as monaco from 'monaco-editor';
 import { MonacoEditorDomainAction } from 'app/shared/monaco-editor/model/actions/monaco-editor-domain-action.model';
+import { escapeStringForUseInRegex } from 'app/shared/util/global.utils';
 
 /**
  * Action to insert a task into the editor. They follow the format [task][Task Short Description](testCaseName).
@@ -7,6 +8,8 @@ import { MonacoEditorDomainAction } from 'app/shared/monaco-editor/model/actions
 export class MonacoTaskAction extends MonacoEditorDomainAction {
     static readonly ID = 'monaco-task.action';
     static readonly TEXT = '[Task Short Description](testCaseName)\n';
+    static readonly IDENTIFIER = '[task]';
+    static readonly GLOBAL_TASK_REGEX = new RegExp(`${escapeStringForUseInRegex(MonacoTaskAction.IDENTIFIER)}(.*)`, 'g');
 
     constructor() {
         super(MonacoTaskAction.ID, 'artemisApp.programmingExercise.problemStatement.taskCommand', undefined, undefined);
@@ -22,6 +25,6 @@ export class MonacoTaskAction extends MonacoEditorDomainAction {
     }
 
     getOpeningIdentifier(): string {
-        return '[task]';
+        return MonacoTaskAction.IDENTIFIER;
     }
 }
diff --git a/src/main/webapp/app/shared/monaco-editor/model/monaco-editor-overlay-widget.model.ts b/src/main/webapp/app/shared/monaco-editor/model/monaco-editor-overlay-widget.model.ts
index d138ae87df1c..8ea50ee8898d 100644
--- a/src/main/webapp/app/shared/monaco-editor/model/monaco-editor-overlay-widget.model.ts
+++ b/src/main/webapp/app/shared/monaco-editor/model/monaco-editor-overlay-widget.model.ts
@@ -20,7 +20,7 @@ export class MonacoEditorOverlayWidget extends MonacoCodeEditorElement implement
     constructor(editor: monaco.editor.ICodeEditor, id: string, domNode: HTMLElement, position: OverlayWidgetPosition) {
         super(editor, id);
         this.domNode = domNode;
-        // At the moment, the inline feedback nodes will only reach their maximum width with the following line. This workaround can be removed as soon as the Ace editor has been replaced.
+        // Ensure that the widget reaches its maximum width.
         this.domNode.style.width = '100%';
         this.position = position;
     }
diff --git a/src/main/webapp/app/shared/monaco-editor/monaco-editor.component.ts b/src/main/webapp/app/shared/monaco-editor/monaco-editor.component.ts
index 1f28308ecb11..0e63c2081074 100644
--- a/src/main/webapp/app/shared/monaco-editor/monaco-editor.component.ts
+++ b/src/main/webapp/app/shared/monaco-editor/monaco-editor.component.ts
@@ -11,7 +11,9 @@ import { MonacoEditorAction } from 'app/shared/monaco-editor/model/actions/monac
 import { TranslateService } from '@ngx-translate/core';
 import { MonacoEditorOptionPreset } from 'app/shared/monaco-editor/model/monaco-editor-option-preset.model';
 
-type EditorPosition = { row: number; column: number };
+export const MAX_TAB_SIZE = 8;
+export type EditorPosition = { lineNumber: number; column: number };
+
 @Component({
     selector: 'jhi-monaco-editor',
     template: '',
@@ -155,14 +157,12 @@ export class MonacoEditorComponent implements OnInit, OnDestroy {
         }
     }
 
-    // Workaround: The rest of the code expects { row, column } - we have { lineNumber, column }. Can be removed when Ace is removed.
     getPosition(): EditorPosition {
-        const position = this._editor.getPosition() ?? new monaco.Position(0, 0);
-        return { row: position.lineNumber, column: position.column };
+        return this._editor.getPosition() ?? { column: 0, lineNumber: 0 };
     }
 
     setPosition(position: EditorPosition) {
-        this._editor.setPosition({ lineNumber: position.row, column: position.column });
+        this._editor.setPosition(position);
     }
 
     setSelection(range: monaco.IRange): void {
diff --git a/src/main/webapp/app/shared/util/markdown.util.ts b/src/main/webapp/app/shared/util/markdown.util.ts
index 973a0ad2c66e..69de712ce3f8 100644
--- a/src/main/webapp/app/shared/util/markdown.util.ts
+++ b/src/main/webapp/app/shared/util/markdown.util.ts
@@ -1,46 +1,18 @@
 import { ExerciseHintExplanationInterface } from 'app/entities/quiz/quiz-question.model';
-import { hintCommentIdentifier } from 'app/shared/markdown-editor/domainCommands/hint.command';
-import { explanationCommandIdentifier } from 'app/shared/markdown-editor/domainCommands/explanation.command';
 import { escapeStringForUseInRegex } from 'app/shared/util/global.utils';
+import { MonacoQuizExplanationAction } from 'app/shared/monaco-editor/model/actions/quiz/monaco-quiz-explanation.action';
+import { MonacoQuizHintAction } from 'app/shared/monaco-editor/model/actions/quiz/monaco-quiz-hint.action';
 
-const hintOrExpRegex = new RegExp(escapeStringForUseInRegex(`${explanationCommandIdentifier}`) + '|' + escapeStringForUseInRegex(`${hintCommentIdentifier}`), 'g');
-
-/**
- * adds the passed text into the editor of the passed ace editor component at the current curser by focusing, clearing a selection,
- * moving the cursor to the end of the line, and finally inserting the given text.
- * After that the new test will be selected
- *
- * @param text the text that will be added into the editor of the passed ace editor component
- * @param aceEditor the editor in which the text will be added at the current curser position
- */
-export function addTextAtCursor(text: string, aceEditor: any) {
-    aceEditor.focus();
-    aceEditor.clearSelection();
-    aceEditor.moveCursorTo(aceEditor.getCursorPosition().row, Number.POSITIVE_INFINITY);
-    aceEditor.insert(text);
-    const range = aceEditor.selection.getRange();
-    const commandIdentifier = text.split(']');
-    const offsetRange = commandIdentifier[0].length + 1;
-    range.setStart(range.start.row, offsetRange);
-    aceEditor.selection.setRange(range);
-}
-
-/**
- * Remove the text at the specified range.
- * @param from = col & row from which to start
- * @param to = col & row at which to end
- * @param aceEditor the editor in which text should be removed
- */
-export function removeTextRange(from: { col: number; row: number }, to: { col: number; row: number }, aceEditor: any) {
-    aceEditor.focus();
-    aceEditor.getSession().remove({ startRow: from.row, startColumn: from.col, endRow: to.row, endColumn: to.col });
-}
+const hintOrExpRegex = new RegExp(
+    escapeStringForUseInRegex(`${MonacoQuizExplanationAction.IDENTIFIER}`) + '|' + escapeStringForUseInRegex(`${MonacoQuizHintAction.IDENTIFIER}`),
+    'g',
+);
 
 /**
  * Parse the markdown text and apply the result to the target object's data
  *
- * The markdown text is split at hintCommentIdentifier and explanationCommandIdentifier tags.
- *  => First part is text. Everything after hintCommentIdentifier is Hint, anything after explanationCommandIdentifier is explanation
+ * The markdown text is split at MonacoQuizHintAction.IDENTIFIER and MonacoQuizExplanationAction.IDENTIFIER tags.
+ *  => First part is text. Everything after MonacoQuizHintAction.IDENTIFIER is Hint, anything after MonacoQuizExplanationAction.IDENTIFIER is explanation
  *
  * @param markdownText {string} the markdown text to parse
  * @param targetObject {object} the object that the result will be saved in. Fields modified are 'text', 'hint' and 'explanation'.
@@ -52,18 +24,18 @@ export function parseExerciseHintExplanation(markdownText: string, targetObject:
     // split markdownText into main text, hint and explanation
     const markdownTextParts = markdownText.split(hintOrExpRegex);
     targetObject.text = markdownTextParts[0].trim();
-    if (markdownText.indexOf(hintCommentIdentifier) !== -1 && markdownText.indexOf(explanationCommandIdentifier) !== -1) {
-        if (markdownText.indexOf(hintCommentIdentifier) < markdownText.indexOf(explanationCommandIdentifier)) {
+    if (markdownText.indexOf(MonacoQuizHintAction.IDENTIFIER) !== -1 && markdownText.indexOf(MonacoQuizExplanationAction.IDENTIFIER) !== -1) {
+        if (markdownText.indexOf(MonacoQuizHintAction.IDENTIFIER) < markdownText.indexOf(MonacoQuizExplanationAction.IDENTIFIER)) {
             targetObject.hint = markdownTextParts[1].trim();
             targetObject.explanation = markdownTextParts[2].trim();
         } else {
             targetObject.hint = markdownTextParts[2].trim();
             targetObject.explanation = markdownTextParts[1].trim();
         }
-    } else if (markdownText.indexOf(hintCommentIdentifier) !== -1) {
+    } else if (markdownText.indexOf(MonacoQuizHintAction.IDENTIFIER) !== -1) {
         targetObject.hint = markdownTextParts[1].trim();
         targetObject.explanation = undefined;
-    } else if (markdownText.indexOf(explanationCommandIdentifier) !== -1) {
+    } else if (markdownText.indexOf(MonacoQuizExplanationAction.IDENTIFIER) !== -1) {
         targetObject.hint = undefined;
         targetObject.explanation = markdownTextParts[1].trim();
     } else {
@@ -88,6 +60,6 @@ export function generateExerciseHintExplanation(sourceObject: ExerciseHintExplan
     return !sourceObject.text
         ? ''
         : sourceObject.text +
-              (sourceObject.hint ? '\n\t' + hintCommentIdentifier + ' ' + sourceObject.hint : '') +
-              (sourceObject.explanation ? '\n\t' + explanationCommandIdentifier + ' ' + sourceObject.explanation : '');
+              (sourceObject.hint ? '\n\t' + MonacoQuizHintAction.IDENTIFIER + ' ' + sourceObject.hint : '') +
+              (sourceObject.explanation ? '\n\t' + MonacoQuizExplanationAction.IDENTIFIER + ' ' + sourceObject.explanation : '');
 }
diff --git a/src/main/webapp/app/shared/virtual-scroll/virtual-scroll.component.ts b/src/main/webapp/app/shared/virtual-scroll/virtual-scroll.component.ts
index 48b52e4c9376..89ce35fb3766 100644
--- a/src/main/webapp/app/shared/virtual-scroll/virtual-scroll.component.ts
+++ b/src/main/webapp/app/shared/virtual-scroll/virtual-scroll.component.ts
@@ -114,7 +114,7 @@ export class VirtualScrollComponent<T extends { id?: number }> implements OnInit
     }
 
     /**
-     * start listening to focusin events on initialization to prevent unintentional scrolling when the user focuses into the text area of ace editor component
+     * start listening to focusin events on initialization to prevent unintentional scrolling when the user focuses into the text area of code editor component
      * start listening to scroll events on initialization to perform virtual scrolling when the user scrolls through the item container
      * start listening to navigationStart events of router and enable forceReloadChange to scroll to the top of the updated item list
      */
@@ -172,7 +172,7 @@ export class VirtualScrollComponent<T extends { id?: number }> implements OnInit
     }
 
     /**
-     * prevents automatic scrolling to other items when user clicks the text area of ace editor component
+     * prevents automatic scrolling to other items when user clicks the text area of code editor component
      */
     onFocusIn() {
         window.scrollTo(0, this.windowScrollTop);
diff --git a/src/main/webapp/i18n/de/guidedTourProgrammingExercise.json b/src/main/webapp/i18n/de/guidedTourProgrammingExercise.json
index 8baa5f33ad99..8cfd6706e6b3 100644
--- a/src/main/webapp/i18n/de/guidedTourProgrammingExercise.json
+++ b/src/main/webapp/i18n/de/guidedTourProgrammingExercise.json
@@ -10,7 +10,7 @@
                     "headline": "Klassendatei",
                     "content": "Klick hier auf die Klassendatei, damit sie sich im Programmiereditor öffnet."
                 },
-                "aceEditor": {
+                "monacoEditor": {
                     "headline": "Programmiereditor",
                     "content": "Nun wird dir der Quellcode im Programmiereditor angezeigt. Du kannst dir das <tt>TODO</tt> durchlesen und bereits versuchen, dieses zu lösen. Alternativ kannst du auch in dieser Demo schon beliebigen Code einfügen. Wenn du damit fertig bist, dann klicke auf weiter."
                 },
diff --git a/src/main/webapp/i18n/en/guidedTourProgrammingExercise.json b/src/main/webapp/i18n/en/guidedTourProgrammingExercise.json
index 645864117bf9..9e23b5f35836 100644
--- a/src/main/webapp/i18n/en/guidedTourProgrammingExercise.json
+++ b/src/main/webapp/i18n/en/guidedTourProgrammingExercise.json
@@ -10,7 +10,7 @@
                     "headline": "Class file",
                     "content": "Click on the class file to display its source code in the editor."
                 },
-                "aceEditor": {
+                "monacoEditor": {
                     "headline": "Code editor",
                     "content": "The source code is now displayed in the code editor. You can read through the <tt>TODO</tt> and try to solve it. Alternatively, you can enter any code for this test round. If you are done with your implementation, just click on the <tt>Next</tt> button to proceed."
                 },
diff --git a/src/test/javascript/spec/component/code-editor/code-editor-actions.component.spec.ts b/src/test/javascript/spec/component/code-editor/code-editor-actions.component.spec.ts
index 9b11c3e3948d..99c170f5720d 100644
--- a/src/test/javascript/spec/component/code-editor/code-editor-actions.component.spec.ts
+++ b/src/test/javascript/spec/component/code-editor/code-editor-actions.component.spec.ts
@@ -16,7 +16,6 @@ import { CommitState, EditorState } from 'app/exercises/programming/shared/code-
 import { MockModule } from 'ng-mocks';
 import { TranslatePipeMock } from '../../helpers/mocks/service/mock-translate.service';
 import { FeatureToggleDirective } from 'app/shared/feature-toggle/feature-toggle.directive';
-import { AceEditorModule } from 'app/shared/markdown-editor/ace-editor/ace-editor.module';
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 
 // Cartesian product helper function
@@ -50,7 +49,7 @@ describe('CodeEditorActionsComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ArtemisTestModule, MockModule(AceEditorModule), MockModule(NgbTooltipModule)],
+            imports: [ArtemisTestModule, MockModule(NgbTooltipModule)],
             declarations: [CodeEditorActionsComponent, TranslatePipeMock, FeatureToggleDirective],
             providers: [
                 { provide: CodeEditorRepositoryService, useClass: MockCodeEditorRepositoryService },
diff --git a/src/test/javascript/spec/component/code-editor/code-editor-build-output.component.spec.ts b/src/test/javascript/spec/component/code-editor/code-editor-build-output.component.spec.ts
index 3092d1c466ac..cca5d65fc88d 100644
--- a/src/test/javascript/spec/component/code-editor/code-editor-build-output.component.spec.ts
+++ b/src/test/javascript/spec/component/code-editor/code-editor-build-output.component.spec.ts
@@ -1,7 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
-import { AceEditorModule } from 'app/shared/markdown-editor/ace-editor/ace-editor.module';
 import { of } from 'rxjs';
 import { ArtemisTestModule } from '../../test.module';
 import { ParticipationWebsocketService } from 'app/overview/participation-websocket.service';
@@ -82,7 +81,7 @@ describe('CodeEditorBuildOutputComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ArtemisTestModule, AceEditorModule],
+            imports: [ArtemisTestModule],
             declarations: [CodeEditorBuildOutputComponent, MockPipe(ArtemisDatePipe)],
             providers: [
                 { provide: ResultService, useClass: MockResultService },
diff --git a/src/test/javascript/spec/component/code-editor/code-editor-header.component.spec.ts b/src/test/javascript/spec/component/code-editor/code-editor-header.component.spec.ts
index 6e221deca2fb..d77f3e5fb3cd 100644
--- a/src/test/javascript/spec/component/code-editor/code-editor-header.component.spec.ts
+++ b/src/test/javascript/spec/component/code-editor/code-editor-header.component.spec.ts
@@ -2,7 +2,8 @@ import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testin
 import { CodeEditorHeaderComponent } from 'app/exercises/programming/shared/code-editor/header/code-editor-header.component';
 import { ArtemisTestModule } from '../../test.module';
 import { NgbDropdownMocksModule } from '../../helpers/mocks/directive/ngbDropdownMocks.module';
-import { MAX_TAB_SIZE } from 'app/shared/markdown-editor/ace-editor/ace-editor.component';
+
+import { MAX_TAB_SIZE } from 'app/shared/monaco-editor/monaco-editor.component';
 
 describe('CodeEditorHeaderComponent', () => {
     let fixture: ComponentFixture<CodeEditorHeaderComponent>;
diff --git a/src/test/javascript/spec/component/code-editor/code-editor-monaco.component.spec.ts b/src/test/javascript/spec/component/code-editor/code-editor-monaco.component.spec.ts
index 1acb8bc88d43..e6a35ac15468 100644
--- a/src/test/javascript/spec/component/code-editor/code-editor-monaco.component.spec.ts
+++ b/src/test/javascript/spec/component/code-editor/code-editor-monaco.component.spec.ts
@@ -127,7 +127,7 @@ describe('CodeEditorMonacoComponent', () => {
     ])('should correctly lock the editor on changes', (setup: () => void, shouldLock: boolean) => {
         comp.selectedFile = 'file';
         comp.fileSession = {
-            [comp.selectedFile]: { code: 'some code', cursor: { row: 0, column: 0 }, loadingError: false },
+            [comp.selectedFile]: { code: 'some code', cursor: { lineNumber: 0, column: 0 }, loadingError: false },
         };
         fixture.detectChanges();
         setup();
@@ -138,7 +138,7 @@ describe('CodeEditorMonacoComponent', () => {
     it('should update the file session and notify when the file content changes', () => {
         const selectedFile = 'file';
         const fileSession = {
-            [selectedFile]: { code: 'some unchanged code', cursor: { row: 0, column: 0 }, loadingError: false },
+            [selectedFile]: { code: 'some unchanged code', cursor: { lineNumber: 0, column: 0 }, loadingError: false },
         };
         const newCode = 'some new code';
         const valueCallbackStub = jest.fn();
@@ -161,7 +161,7 @@ describe('CodeEditorMonacoComponent', () => {
         const changeModelStub = jest.spyOn(comp.editor, 'changeModel').mockImplementation();
         const presentFileName = 'present-file';
         const presentFileSession = {
-            [presentFileName]: { code: 'code\ncode', cursor: { row: 1, column: 2 }, loadingError: false },
+            [presentFileName]: { code: 'code\ncode', cursor: { lineNumber: 1, column: 2 }, loadingError: false },
         };
         fixture.detectChanges();
         comp.fileSession = presentFileSession;
@@ -172,7 +172,7 @@ describe('CodeEditorMonacoComponent', () => {
         expect(loadFileFromRepositoryStub).toHaveBeenCalledExactlyOnceWith(fileToLoad.fileName);
         expect(comp.fileSession).toEqual({
             ...presentFileSession,
-            [fileToLoad.fileName]: { code: fileToLoad.fileContent, cursor: { column: 0, row: 0 }, loadingError: false },
+            [fileToLoad.fileName]: { code: fileToLoad.fileContent, cursor: { column: 0, lineNumber: 0 }, loadingError: false },
         });
         expect(setPositionStub).toHaveBeenCalledTimes(2);
         expect(changeModelStub).toHaveBeenCalledTimes(2);
@@ -181,7 +181,7 @@ describe('CodeEditorMonacoComponent', () => {
     it('should load a selected file after a loading error', async () => {
         const fileToLoad = { fileName: 'file-to-load', fileContent: 'some code' };
         // File session after loading fails
-        const fileSession = { [fileToLoad.fileName]: { code: '', loadingError: true, cursor: { row: 0, column: 0 } } };
+        const fileSession = { [fileToLoad.fileName]: { code: '', loadingError: true, cursor: { lineNumber: 0, column: 0 } } };
         const loadedFileSubject = new BehaviorSubject(fileToLoad);
         loadFileFromRepositoryStub.mockReturnValue(loadedFileSubject);
         comp.fileSession = fileSession;
@@ -189,14 +189,14 @@ describe('CodeEditorMonacoComponent', () => {
         fixture.detectChanges();
         await comp.ngOnChanges({ selectedFile: new SimpleChange(undefined, fileToLoad, false) });
         expect(loadFileFromRepositoryStub).toHaveBeenCalledOnce();
-        expect(comp.fileSession).toEqual({ [fileToLoad.fileName]: { code: fileToLoad.fileContent, loadingError: false, cursor: { row: 0, column: 0 } } });
+        expect(comp.fileSession).toEqual({ [fileToLoad.fileName]: { code: fileToLoad.fileContent, loadingError: false, cursor: { lineNumber: 0, column: 0 } } });
     });
 
     it('should not load binaries into the editor', async () => {
         const changeModelSpy = jest.spyOn(comp.editor, 'changeModel');
         const fileName = 'file-to-load';
         comp.fileSession = {
-            [fileName]: { code: '\0\0\0\0 (binary content)', loadingError: false, cursor: { row: 0, column: 0 } },
+            [fileName]: { code: '\0\0\0\0 (binary content)', loadingError: false, cursor: { lineNumber: 0, column: 0 } },
         };
         fixture.detectChanges();
         comp.selectedFile = fileName;
@@ -221,7 +221,7 @@ describe('CodeEditorMonacoComponent', () => {
         await comp.ngOnChanges({ selectedFile: new SimpleChange(undefined, fileToLoad.fileName, false) });
         expect(loadFileFromRepositoryStub).toHaveBeenCalledOnce();
         expect(errorCallbackStub).toHaveBeenCalledExactlyOnceWith(errorCode);
-        expect(comp.fileSession).toEqual({ [fileToLoad.fileName]: { code: '', loadingError: true, cursor: { row: 0, column: 0 } } });
+        expect(comp.fileSession).toEqual({ [fileToLoad.fileName]: { code: '', loadingError: true, cursor: { lineNumber: 0, column: 0 } } });
     });
 
     it('should discard local changes when the editor is refreshed', async () => {
@@ -231,14 +231,14 @@ describe('CodeEditorMonacoComponent', () => {
         loadFileFromRepositoryStub.mockReturnValue(reloadedFileSubject);
         comp.selectedFile = fileToReload.fileName;
         comp.fileSession = {
-            [fileToReload.fileName]: { code: 'some local undiscarded changes', cursor: { row: 0, column: 0 }, loadingError: false },
+            [fileToReload.fileName]: { code: 'some local undiscarded changes', cursor: { lineNumber: 0, column: 0 }, loadingError: false },
         };
         comp.editorState = EditorState.CLEAN;
         fixture.detectChanges();
         // Simulate a refresh of the editor.
         await comp.ngOnChanges({ editorState: new SimpleChange(EditorState.REFRESHING, EditorState.CLEAN, false) });
         expect(comp.fileSession).toEqual({
-            [fileToReload.fileName]: { code: fileToReload.fileContent, cursor: { row: 0, column: 0 }, loadingError: false },
+            [fileToReload.fileName]: { code: fileToReload.fileContent, cursor: { lineNumber: 0, column: 0 }, loadingError: false },
         });
         expect(editorResetStub).toHaveBeenCalledOnce();
     });
@@ -246,7 +246,7 @@ describe('CodeEditorMonacoComponent', () => {
     it('should only load the currently selected file', async () => {
         const changeModelSpy = jest.spyOn(comp.editor, 'changeModel');
         // Occurs when the first file load takes a while, but the user has already selected another file.
-        comp.fileSession = { ['file2']: { code: 'code2', cursor: { row: 0, column: 0 }, loadingError: false } };
+        comp.fileSession = { ['file2']: { code: 'code2', cursor: { lineNumber: 0, column: 0 }, loadingError: false } };
         fixture.detectChanges();
         comp.selectedFile = 'file1';
         const longLoadingFileSubject = new Subject();
@@ -266,7 +266,7 @@ describe('CodeEditorMonacoComponent', () => {
         fixture.detectChanges();
         const selectedFile = 'file1';
         const fileSession = {
-            [selectedFile]: { code: 'code\ncode', cursor: { row: 1, column: 2 }, loadingError: false },
+            [selectedFile]: { code: 'code\ncode', cursor: { lineNumber: 1, column: 2 }, loadingError: false },
         };
         comp.fileSession = fileSession;
         comp.selectedFile = selectedFile;
@@ -331,8 +331,8 @@ describe('CodeEditorMonacoComponent', () => {
     }));
 
     it('should add a new feedback widget', fakeAsync(() => {
+        // Feedback is stored as 0-based line numbers, but the editor requires 1-based line numbers.
         const feedbackLineOneBased = 3;
-        // Will be removed once Ace is gone.
         const feedbackLineZeroBased = feedbackLineOneBased - 1;
         const addLineWidgetStub = jest.spyOn(comp.editor, 'addLineWidget').mockImplementation();
         const element = document.createElement('div');
@@ -427,8 +427,8 @@ describe('CodeEditorMonacoComponent', () => {
         const newFileName = 'new-file-name';
         const otherFileName = 'other-file';
         const fileSession = {
-            [oldFileName]: { code: 'renamed', cursor: { row: 0, column: 0 }, loadingError: false },
-            [otherFileName]: { code: 'unrelated', cursor: { row: 0, column: 0 }, loadingError: false },
+            [oldFileName]: { code: 'renamed', cursor: { lineNumber: 0, column: 0 }, loadingError: false },
+            [otherFileName]: { code: 'unrelated', cursor: { lineNumber: 0, column: 0 }, loadingError: false },
         };
         fixture.detectChanges();
         comp.fileSession = { ...fileSession };
@@ -444,8 +444,8 @@ describe('CodeEditorMonacoComponent', () => {
         const fileToDeleteName = 'file-to-delete';
         const otherFileName = 'other-file';
         const fileSession = {
-            [fileToDeleteName]: { code: 'will be deleted', cursor: { row: 0, column: 0 }, loadingError: false },
-            [otherFileName]: { code: 'unrelated', cursor: { row: 0, column: 0 }, loadingError: false },
+            [fileToDeleteName]: { code: 'will be deleted', cursor: { lineNumber: 0, column: 0 }, loadingError: false },
+            [otherFileName]: { code: 'unrelated', cursor: { lineNumber: 0, column: 0 }, loadingError: false },
         };
         fixture.detectChanges();
         comp.fileSession = { ...fileSession };
@@ -460,7 +460,7 @@ describe('CodeEditorMonacoComponent', () => {
         const fileToCreateName = 'file-to-create';
         const otherFileName = 'other-file';
         const fileSession = {
-            [otherFileName]: { code: 'unrelated', cursor: { row: 0, column: 0 }, loadingError: false },
+            [otherFileName]: { code: 'unrelated', cursor: { lineNumber: 0, column: 0 }, loadingError: false },
         };
         fixture.detectChanges();
         comp.fileSession = { ...fileSession };
@@ -468,7 +468,7 @@ describe('CodeEditorMonacoComponent', () => {
         await comp.onFileChange(createFileChange);
         expect(comp.fileSession).toEqual({
             [otherFileName]: fileSession[otherFileName],
-            [fileToCreateName]: { code: '', cursor: { row: 0, column: 0 }, loadingError: false },
+            [fileToCreateName]: { code: '', cursor: { lineNumber: 0, column: 0 }, loadingError: false },
         });
     });
 
diff --git a/src/test/javascript/spec/component/code-editor/code-editor-status.component.spec.ts b/src/test/javascript/spec/component/code-editor/code-editor-status.component.spec.ts
index f3837316e767..d39be7e531e3 100644
--- a/src/test/javascript/spec/component/code-editor/code-editor-status.component.spec.ts
+++ b/src/test/javascript/spec/component/code-editor/code-editor-status.component.spec.ts
@@ -1,6 +1,5 @@
 import { DebugElement } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { AceEditorModule } from 'app/shared/markdown-editor/ace-editor/ace-editor.module';
 import { ArtemisTestModule } from '../../test.module';
 import { By } from '@angular/platform-browser';
 import { CodeEditorStatusComponent } from 'app/exercises/programming/shared/code-editor/status/code-editor-status.component';
@@ -15,7 +14,7 @@ describe('CodeEditorStatusComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ArtemisTestModule, AceEditorModule, MockModule(NgbTooltipModule)],
+            imports: [ArtemisTestModule, MockModule(NgbTooltipModule)],
             declarations: [CodeEditorStatusComponent, TranslatePipeMock],
         })
             .compileComponents()
diff --git a/src/test/javascript/spec/component/drag-and-drop-question/drag-and-drop-question.component.spec.ts b/src/test/javascript/spec/component/drag-and-drop-question/drag-and-drop-question.component.spec.ts
index 9d8afe5529f9..4b11c8785650 100644
--- a/src/test/javascript/spec/component/drag-and-drop-question/drag-and-drop-question.component.spec.ts
+++ b/src/test/javascript/spec/component/drag-and-drop-question/drag-and-drop-question.component.spec.ts
@@ -8,7 +8,6 @@ import { DragAndDropQuestionComponent } from 'app/exercises/quiz/shared/question
 import { DragItemComponent } from 'app/exercises/quiz/shared/questions/drag-and-drop-question/drag-item.component';
 import { QuizScoringInfoStudentModalComponent } from 'app/exercises/quiz/shared/questions/quiz-scoring-infostudent-modal/quiz-scoring-info-student-modal.component';
 import { SecuredImageComponent } from 'app/shared/image/secured-image.component';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
 import { ArtemisMarkdownService } from 'app/shared/markdown.service';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { MockComponent, MockPipe, MockProvider } from 'ng-mocks';
@@ -34,7 +33,6 @@ describe('DragAndDropQuestionComponent', () => {
             declarations: [
                 DragAndDropQuestionComponent,
                 MockPipe(ArtemisTranslatePipe),
-                MockComponent(MarkdownEditorComponent),
                 MockComponent(SecuredImageComponent),
                 MockComponent(DragAndDropQuestionComponent),
                 MockComponent(QuizScoringInfoStudentModalComponent),
diff --git a/src/test/javascript/spec/component/markdown-editor/attachment-command.spec.ts b/src/test/javascript/spec/component/markdown-editor/attachment-command.spec.ts
deleted file mode 100644
index 8e32773497dd..000000000000
--- a/src/test/javascript/spec/component/markdown-editor/attachment-command.spec.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AceEditorModule } from 'app/shared/markdown-editor/ace-editor/ace-editor.module';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
-import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown-editor.module';
-import { ArtemisTestModule } from '../../test.module';
-import { AttachmentCommand } from 'app/shared/markdown-editor/commands/attachmentCommand';
-import { Command } from 'app/shared/markdown-editor/commands/command';
-
-describe('AttachmentCommand', () => {
-    let comp: MarkdownEditorComponent;
-    let fixture: ComponentFixture<MarkdownEditorComponent>;
-    let command: Command;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [ArtemisTestModule, AceEditorModule, ArtemisMarkdownEditorModule],
-        })
-            .compileComponents()
-            .then(() => {
-                fixture = TestBed.createComponent(MarkdownEditorComponent);
-                comp = fixture.componentInstance;
-
-                command = new AttachmentCommand();
-                comp.defaultCommands = [command];
-                fixture.detectChanges();
-                comp.ngAfterViewInit();
-            });
-    });
-
-    it('should add ![](http://) on execute', () => {
-        comp.aceEditorContainer.getEditor().setValue('');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('![](http://)');
-    });
-
-    it('should remove ![](http://) on execute', () => {
-        comp.aceEditorContainer.getEditor().setValue('![](http://)test');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('test');
-    });
-});
diff --git a/src/test/javascript/spec/component/markdown-editor/bold-command.spec.ts b/src/test/javascript/spec/component/markdown-editor/bold-command.spec.ts
deleted file mode 100644
index c80e43eb0eed..000000000000
--- a/src/test/javascript/spec/component/markdown-editor/bold-command.spec.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AceEditorModule } from 'app/shared/markdown-editor/ace-editor/ace-editor.module';
-import { BoldCommand } from 'app/shared/markdown-editor/commands/bold.command';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
-import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown-editor.module';
-import { ArtemisTestModule } from '../../test.module';
-import { Command } from 'app/shared/markdown-editor/commands/command';
-
-describe('BoldCommand', () => {
-    let comp: MarkdownEditorComponent;
-    let fixture: ComponentFixture<MarkdownEditorComponent>;
-    let command: Command;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [ArtemisTestModule, AceEditorModule, ArtemisMarkdownEditorModule],
-        })
-            .compileComponents()
-            .then(() => {
-                fixture = TestBed.createComponent(MarkdownEditorComponent);
-                comp = fixture.componentInstance;
-
-                command = new BoldCommand();
-                comp.defaultCommands = [command];
-                fixture.detectChanges();
-                comp.ngAfterViewInit();
-            });
-    });
-
-    it('should add **** on execute', () => {
-        comp.aceEditorContainer.getEditor().setValue('bold');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('**bold**');
-    });
-
-    it('should remove **** on execute', () => {
-        comp.aceEditorContainer.getEditor().setValue('**bold**');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('bold');
-    });
-});
diff --git a/src/test/javascript/spec/component/markdown-editor/channelMentionCommand.spec.ts b/src/test/javascript/spec/component/markdown-editor/channelMentionCommand.spec.ts
deleted file mode 100644
index 1f461eab4b56..000000000000
--- a/src/test/javascript/spec/component/markdown-editor/channelMentionCommand.spec.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-import { MetisService } from 'app/shared/metis/metis.service';
-import { HttpResponse } from '@angular/common/http';
-import { of } from 'rxjs';
-import { SelectableItem } from 'app/shared/markdown-editor/commands/interactiveSearchCommand';
-import { ChannelMentionCommand } from 'app/shared/markdown-editor/commands/courseArtifactReferenceCommands/channelMentionCommand';
-import { ChannelService } from 'app/shared/metis/conversations/channel.service';
-import { ChannelIdAndNameDTO } from 'app/entities/metis/conversation/channel.model';
-import { CourseInformationSharingConfiguration } from 'app/entities/course.model';
-
-describe('ChannelMentionCommand', () => {
-    let channelMentionCommand: ChannelMentionCommand;
-    let channelServiceMock: Partial<ChannelService>;
-    let metisServiceMock: Partial<MetisService>;
-    let aceEditorMock: any;
-    let selectWithSearchComponent: any;
-
-    beforeEach(() => {
-        selectWithSearchComponent = {
-            open: () => {},
-            updateSearchTerm: () => {},
-            close: () => {},
-        };
-
-        channelServiceMock = {
-            getPublicChannelsOfCourse: () =>
-                of(
-                    new HttpResponse<ChannelIdAndNameDTO[]>({
-                        body: [
-                            { name: 'Channel 1', id: 1 },
-                            { name: 'Channel 2', id: 2 },
-                        ],
-                    }),
-                ),
-        };
-
-        metisServiceMock = {
-            getCourse: () => ({ id: 1, courseInformationSharingConfiguration: CourseInformationSharingConfiguration.COMMUNICATION_AND_MESSAGING }),
-        };
-
-        aceEditorMock = {
-            command: undefined,
-            commands: {
-                addCommand: (obj: any) => {
-                    aceEditorMock.command = obj;
-                },
-            },
-            execCommand: () => {},
-            getCursorPosition: () => ({ row: 0, column: 0 }),
-            focus: () => {},
-            session: {
-                getDocument: () => ({
-                    removeInLine: () => {},
-                }),
-                getLine: () => '',
-            },
-            insert: () => {},
-        };
-
-        // Create an instance of ChannelMentionCommand with mock services
-        channelMentionCommand = new ChannelMentionCommand(channelServiceMock as ChannelService, metisServiceMock as MetisService);
-        channelMentionCommand.setSelectWithSearchComponent(selectWithSearchComponent);
-    });
-
-    it('should create an instance of ChannelMentionCommand', () => {
-        expect(channelMentionCommand).toBeTruthy();
-    });
-
-    it('should perform a channel search and cache result', () => {
-        const getChannelsOfCourseSpy = jest.spyOn(channelServiceMock, 'getPublicChannelsOfCourse');
-
-        channelMentionCommand.performSearch('channel').subscribe((response) => {
-            expect(response.body).toEqual([
-                { name: 'Channel 1', id: 1 },
-                { name: 'Channel 2', id: 2 },
-            ]);
-        });
-
-        channelMentionCommand.performSearch('channel').subscribe();
-
-        expect(getChannelsOfCourseSpy).toHaveBeenCalledExactlyOnceWith(1);
-    });
-
-    it('should filter channels based on searchTerm', () => {
-        const getChannelsOfCourseSpy = jest.spyOn(channelServiceMock, 'getPublicChannelsOfCourse');
-
-        channelMentionCommand.performSearch('1').subscribe((response) => {
-            expect(response.body).toEqual([{ name: 'Channel 1', id: 1 }]);
-        });
-
-        channelMentionCommand.performSearch('2').subscribe((response) => {
-            expect(response.body).toEqual([{ name: 'Channel 2', id: 2 }]);
-        });
-
-        expect(getChannelsOfCourseSpy).toHaveBeenCalledExactlyOnceWith(1);
-    });
-
-    it('should insert selection', () => {
-        channelMentionCommand.setEditor(aceEditorMock);
-
-        const focusSpy = jest.spyOn(aceEditorMock, 'focus');
-
-        // Simulate open selection menu via triggering command
-        aceEditorMock.command.exec(aceEditorMock);
-
-        channelMentionCommand.insertSelection({ name: 'Channel 1', id: 1 } as SelectableItem);
-
-        // The editor is focused twice: Once for the execution of the command, once after the text insertion
-        expect(focusSpy).toHaveBeenCalledTimes(2);
-    });
-
-    it('should execute the command', () => {
-        channelMentionCommand.setEditor(aceEditorMock);
-
-        const execCommandSpy = jest.spyOn(aceEditorMock, 'execCommand');
-
-        channelMentionCommand.execute();
-
-        expect(execCommandSpy).toHaveBeenCalledExactlyOnceWith('#');
-    });
-});
diff --git a/src/test/javascript/spec/component/markdown-editor/code-command.spec.ts b/src/test/javascript/spec/component/markdown-editor/code-command.spec.ts
deleted file mode 100644
index eeca9ece8100..000000000000
--- a/src/test/javascript/spec/component/markdown-editor/code-command.spec.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AceEditorModule } from 'app/shared/markdown-editor/ace-editor/ace-editor.module';
-import { CodeCommand } from 'app/shared/markdown-editor/commands/code.command';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
-import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown-editor.module';
-import { ArtemisTestModule } from '../../test.module';
-import { Command } from 'app/shared/markdown-editor/commands/command';
-
-describe('CodeCommand', () => {
-    let comp: MarkdownEditorComponent;
-    let fixture: ComponentFixture<MarkdownEditorComponent>;
-    let command: Command;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [ArtemisTestModule, AceEditorModule, ArtemisMarkdownEditorModule],
-        })
-            .compileComponents()
-            .then(() => {
-                fixture = TestBed.createComponent(MarkdownEditorComponent);
-                comp = fixture.componentInstance;
-
-                command = new CodeCommand();
-                comp.defaultCommands = [command];
-                fixture.detectChanges();
-                comp.ngAfterViewInit();
-            });
-    });
-
-    it('should add `` on execute', () => {
-        comp.aceEditorContainer.getEditor().setValue('code');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('`code`');
-    });
-
-    it('should remove `` on execute', () => {
-        comp.aceEditorContainer.getEditor().setValue('`code`');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('code');
-    });
-});
diff --git a/src/test/javascript/spec/component/markdown-editor/codeblock-command.spec.ts b/src/test/javascript/spec/component/markdown-editor/codeblock-command.spec.ts
deleted file mode 100644
index 60cd66efa68c..000000000000
--- a/src/test/javascript/spec/component/markdown-editor/codeblock-command.spec.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AceEditorModule } from 'app/shared/markdown-editor/ace-editor/ace-editor.module';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
-import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown-editor.module';
-import { ArtemisTestModule } from '../../test.module';
-import { CodeBlockCommand } from 'app/shared/markdown-editor/commands/codeblock.command';
-
-describe('CodeBlockCommand', () => {
-    let comp: MarkdownEditorComponent;
-    let fixture: ComponentFixture<MarkdownEditorComponent>;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [ArtemisTestModule, AceEditorModule, ArtemisMarkdownEditorModule],
-        })
-            .compileComponents()
-            .then(() => {
-                fixture = TestBed.createComponent(MarkdownEditorComponent);
-                comp = fixture.componentInstance;
-            });
-    });
-
-    it('should add ```java\n``` on execute', () => {
-        const command = new CodeBlockCommand();
-        comp.defaultCommands = [command];
-        fixture.detectChanges();
-        comp.ngAfterViewInit();
-        comp.aceEditorContainer.getEditor().setValue('code');
-
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('```java\ncode\n```');
-    });
-});
diff --git a/src/test/javascript/spec/component/markdown-editor/color-picker-command.spec.ts b/src/test/javascript/spec/component/markdown-editor/color-picker-command.spec.ts
deleted file mode 100644
index ffcf3b04ce5e..000000000000
--- a/src/test/javascript/spec/component/markdown-editor/color-picker-command.spec.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AceEditorModule } from 'app/shared/markdown-editor/ace-editor/ace-editor.module';
-import { MockComponent } from 'ng-mocks';
-import { FaLayersComponent } from '@fortawesome/angular-fontawesome';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
-import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown-editor.module';
-import { ArtemisTestModule } from '../../test.module';
-import { ColorPickerCommand } from 'app/shared/markdown-editor/commands/colorPicker.command';
-import { Command } from 'app/shared/markdown-editor/commands/command';
-
-describe('ColorPickerCommand', () => {
-    let comp: MarkdownEditorComponent;
-    let fixture: ComponentFixture<MarkdownEditorComponent>;
-    let command: Command;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [ArtemisTestModule, AceEditorModule, ArtemisMarkdownEditorModule],
-            declarations: [MockComponent(FaLayersComponent)],
-        })
-            .compileComponents()
-            .then(() => {
-                fixture = TestBed.createComponent(MarkdownEditorComponent);
-                comp = fixture.componentInstance;
-
-                command = new ColorPickerCommand();
-                comp.colorCommands = [command];
-                fixture.detectChanges();
-                comp.ngAfterViewInit();
-            });
-    });
-
-    const colorTable = [
-        ['#ca2024', 'red'],
-        ['#3ea119', 'green'],
-        ['#ffffff', 'white'],
-        ['#fffa5c', 'yellow'],
-        ['#0d3cc2', 'blue'],
-        ['#b05db8', 'lila'],
-        ['#d86b1f', 'orange'],
-    ];
-
-    it.each(colorTable)('should add color %s on execute', (hex, color) => {
-        comp.aceEditorContainer.getEditor().setValue('test');
-        command.execute(hex);
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('<span class="' + color + '">test</span>');
-    });
-
-    it('should add color black on execute', () => {
-        comp.aceEditorContainer.getEditor().setValue('test');
-        command.execute('#000000');
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('test');
-    });
-
-    it.each(colorTable)('should remove color %s on execute', (hex, color) => {
-        comp.aceEditorContainer.getEditor().setValue('<span class="' + color + '">test</span>');
-        command.execute('#ffffff');
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('test');
-    });
-});
diff --git a/src/test/javascript/spec/component/markdown-editor/fullscreen-command.spec.ts b/src/test/javascript/spec/component/markdown-editor/fullscreen-command.spec.ts
deleted file mode 100644
index a11404b80e20..000000000000
--- a/src/test/javascript/spec/component/markdown-editor/fullscreen-command.spec.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AceEditorModule } from 'app/shared/markdown-editor/ace-editor/ace-editor.module';
-import { FullscreenCommand } from 'app/shared/markdown-editor/commands/fullscreen.command';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
-import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown-editor.module';
-import { ArtemisTestModule } from '../../test.module';
-import * as FullscreenUtil from 'app/shared/util/fullscreen.util';
-
-describe('FullscreenCommand', () => {
-    let comp: MarkdownEditorComponent;
-    let fixture: ComponentFixture<MarkdownEditorComponent>;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [ArtemisTestModule, AceEditorModule, ArtemisMarkdownEditorModule],
-        })
-            .compileComponents()
-            .then(() => {
-                fixture = TestBed.createComponent(MarkdownEditorComponent);
-                comp = fixture.componentInstance;
-            });
-    });
-
-    afterEach(() => {
-        jest.restoreAllMocks();
-    });
-
-    it('should enable fullscreen on execute', () => {
-        jest.spyOn(FullscreenUtil, 'enterFullscreen');
-        jest.spyOn(FullscreenUtil, 'isFullScreen').mockReturnValue(false);
-
-        const command = new FullscreenCommand();
-        comp.defaultCommands = [command];
-        fixture.detectChanges();
-        comp.ngAfterViewInit();
-
-        command.execute();
-        expect(FullscreenUtil.isFullScreen).toHaveBeenCalledOnce();
-        expect(FullscreenUtil.enterFullscreen).toHaveBeenCalledOnce();
-    });
-
-    it('should disable fullscreen on execute', () => {
-        jest.spyOn(FullscreenUtil, 'exitFullscreen');
-        jest.spyOn(FullscreenUtil, 'isFullScreen').mockReturnValue(true);
-
-        const command = new FullscreenCommand();
-        comp.defaultCommands = [command];
-        fixture.detectChanges();
-        comp.ngAfterViewInit();
-
-        command.execute();
-        expect(FullscreenUtil.isFullScreen).toHaveBeenCalledOnce();
-        expect(FullscreenUtil.exitFullscreen).toHaveBeenCalledOnce();
-    });
-});
diff --git a/src/test/javascript/spec/component/markdown-editor/gradingInstruction-command.component.spec.ts b/src/test/javascript/spec/component/markdown-editor/gradingInstruction-command.component.spec.ts
deleted file mode 100644
index 5b99e057c7bf..000000000000
--- a/src/test/javascript/spec/component/markdown-editor/gradingInstruction-command.component.spec.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { AceEditorModule } from 'app/shared/markdown-editor/ace-editor/ace-editor.module';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
-import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown-editor.module';
-import { ArtemisTestModule } from '../../test.module';
-import { GradingInstructionCommand } from 'app/shared/markdown-editor/domainCommands/gradingInstruction.command';
-import { CreditsCommand } from 'app/shared/markdown-editor/domainCommands/credits.command';
-import { GradingScaleCommand } from 'app/shared/markdown-editor/domainCommands/gradingScaleCommand';
-import { InstructionDescriptionCommand } from 'app/shared/markdown-editor/domainCommands/instructionDescription.command';
-import { FeedbackCommand } from 'app/shared/markdown-editor/domainCommands/feedback.command';
-import { UsageCountCommand } from 'app/shared/markdown-editor/domainCommands/usageCount.command';
-import { GradingCriterionCommand } from 'app/shared/markdown-editor/domainCommands/gradingCriterionCommand';
-import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
-import { MockDirective, MockPipe } from 'ng-mocks';
-import { NgModel } from '@angular/forms';
-
-describe('Grading Instruction Command', () => {
-    let comp: MarkdownEditorComponent;
-    let fixture: ComponentFixture<MarkdownEditorComponent>;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [ArtemisTestModule, AceEditorModule, ArtemisMarkdownEditorModule],
-            declarations: [MockPipe(ArtemisTranslatePipe), MockDirective(NgModel)],
-        })
-            .compileComponents()
-            .then(() => {
-                fixture = TestBed.createComponent(MarkdownEditorComponent);
-                comp = fixture.componentInstance;
-            });
-    });
-
-    it('should add instruction identifiers and parameters on execute', () => {
-        const gradingInstructionCommand = new GradingInstructionCommand();
-        comp.domainCommands = [gradingInstructionCommand];
-        fixture.detectChanges();
-        comp.ngAfterViewInit();
-
-        gradingInstructionCommand.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe(
-            '[instruction]' +
-                '\n' +
-                '\t' +
-                ('[credits]' +
-                    CreditsCommand.TEXT +
-                    '\n' +
-                    '\t' +
-                    '[gradingScale]' +
-                    GradingScaleCommand.TEXT +
-                    '\n' +
-                    '\t' +
-                    '[description]' +
-                    InstructionDescriptionCommand.TEXT +
-                    '\n' +
-                    '\t' +
-                    '[feedback]' +
-                    FeedbackCommand.TEXT +
-                    '\n' +
-                    '\t' +
-                    '[maxCountInScore]' +
-                    UsageCountCommand.TEXT) +
-                '\n',
-        );
-    });
-
-    it('should add CriteriaCommand identifier on execute', () => {
-        const criterionCommand = new GradingCriterionCommand();
-        const gradingInstructionCommand = new GradingInstructionCommand();
-        comp.domainCommands = [criterionCommand, gradingInstructionCommand];
-        fixture.detectChanges();
-        comp.ngAfterViewInit();
-
-        criterionCommand.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('\n' + '[criterion]' + GradingCriterionCommand.TEXT + '\n' + gradingInstructionCommand.instructionText());
-    });
-});
diff --git a/src/test/javascript/spec/component/markdown-editor/headingCommands.spec.ts b/src/test/javascript/spec/component/markdown-editor/headingCommands.spec.ts
deleted file mode 100644
index 1e842133b7fe..000000000000
--- a/src/test/javascript/spec/component/markdown-editor/headingCommands.spec.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AceEditorModule } from 'app/shared/markdown-editor/ace-editor/ace-editor.module';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
-import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown-editor.module';
-import { ArtemisTestModule } from '../../test.module';
-import { HeadingOneCommand } from 'app/shared/markdown-editor/commands/headingOne.command';
-import { HeadingTwoCommand } from 'app/shared/markdown-editor/commands/headingTwo.command';
-import { HeadingThreeCommand } from 'app/shared/markdown-editor/commands/headingThree.command';
-
-describe('HeadingOneCommand', () => {
-    let comp: MarkdownEditorComponent;
-    let fixture: ComponentFixture<MarkdownEditorComponent>;
-    let headingOneCommand = new HeadingOneCommand();
-    let headingTwoCommand = new HeadingTwoCommand();
-    let headingThreeCommand = new HeadingThreeCommand();
-
-    afterEach(() => {
-        jest.restoreAllMocks();
-    });
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [ArtemisTestModule, AceEditorModule, ArtemisMarkdownEditorModule],
-        })
-            .compileComponents()
-            .then(() => {
-                fixture = TestBed.createComponent(MarkdownEditorComponent);
-                comp = fixture.componentInstance;
-                headingOneCommand = new HeadingOneCommand();
-                headingTwoCommand = new HeadingTwoCommand();
-                headingThreeCommand = new HeadingThreeCommand();
-                comp.defaultCommands = [headingOneCommand, headingTwoCommand, headingThreeCommand];
-                fixture.detectChanges();
-                comp.ngAfterViewInit();
-            });
-    });
-
-    it('should add # Heading 1,2,3 on execute when no text is selected', () => {
-        headingOneCommand.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('# Heading 1');
-        comp.aceEditorContainer.getEditor().setValue('');
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('');
-        headingTwoCommand.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('## Heading 2');
-        comp.aceEditorContainer.getEditor().setValue('');
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('');
-        headingThreeCommand.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('### Heading 3');
-    });
-
-    it('should add #, ##, ### on execute when text is selected', () => {
-        jest.spyOn(comp.aceEditorContainer.getEditor(), 'getSelectedText').mockReturnValue('lorem');
-
-        headingOneCommand.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('# lorem');
-        comp.aceEditorContainer.getEditor().setValue('lorem');
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('lorem');
-        headingTwoCommand.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('## lorem');
-        comp.aceEditorContainer.getEditor().setValue('lorem');
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('lorem');
-        headingThreeCommand.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('### lorem');
-    });
-
-    it('should remove #, ##, ### on execute when text of header selected', () => {
-        comp.aceEditorContainer.getEditor().setValue('# lorem');
-        headingOneCommand.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('lorem');
-        comp.aceEditorContainer.getEditor().setValue('## lorem');
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('## lorem');
-        headingTwoCommand.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('lorem');
-        comp.aceEditorContainer.getEditor().setValue('### lorem');
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('### lorem');
-        headingThreeCommand.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('lorem');
-    });
-
-    it('should remove #, ##, ### with Heading text on execute when text of header selected', () => {
-        comp.aceEditorContainer.getEditor().setValue('# Heading 1');
-        headingOneCommand.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('');
-        comp.aceEditorContainer.getEditor().setValue('## Heading 2');
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('## Heading 2');
-        headingTwoCommand.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('');
-        comp.aceEditorContainer.getEditor().setValue('### Heading 3');
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('### Heading 3');
-        headingThreeCommand.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('');
-    });
-});
diff --git a/src/test/javascript/spec/component/markdown-editor/italic-command.spec.ts b/src/test/javascript/spec/component/markdown-editor/italic-command.spec.ts
deleted file mode 100644
index a39dfd15ef90..000000000000
--- a/src/test/javascript/spec/component/markdown-editor/italic-command.spec.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AceEditorModule } from 'app/shared/markdown-editor/ace-editor/ace-editor.module';
-import { ItalicCommand } from 'app/shared/markdown-editor/commands/italic.command';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
-import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown-editor.module';
-import { ArtemisTestModule } from '../../test.module';
-import { Command } from 'app/shared/markdown-editor/commands/command';
-
-describe('ItalicCommand', () => {
-    let comp: MarkdownEditorComponent;
-    let fixture: ComponentFixture<MarkdownEditorComponent>;
-    let command: Command;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [ArtemisTestModule, AceEditorModule, ArtemisMarkdownEditorModule],
-        })
-            .compileComponents()
-            .then(() => {
-                fixture = TestBed.createComponent(MarkdownEditorComponent);
-                comp = fixture.componentInstance;
-
-                command = new ItalicCommand();
-                comp.defaultCommands = [command];
-                fixture.detectChanges();
-                comp.ngAfterViewInit();
-            });
-    });
-
-    it('should add ** on execute', () => {
-        comp.aceEditorContainer.getEditor().setValue('italic');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('*italic*');
-    });
-
-    it('should remove ** on execute', () => {
-        comp.aceEditorContainer.getEditor().setValue('*italic*');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('italic');
-    });
-});
diff --git a/src/test/javascript/spec/component/markdown-editor/katex-command.spec.ts b/src/test/javascript/spec/component/markdown-editor/katex-command.spec.ts
deleted file mode 100644
index 16d34e2a462e..000000000000
--- a/src/test/javascript/spec/component/markdown-editor/katex-command.spec.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AceEditorModule } from 'app/shared/markdown-editor/ace-editor/ace-editor.module';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
-import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown-editor.module';
-import { KatexCommand } from 'app/shared/markdown-editor/commands/katex.command';
-import { ArtemisTestModule } from '../../test.module';
-
-describe('KatexCommand', () => {
-    let comp: MarkdownEditorComponent;
-    let fixture: ComponentFixture<MarkdownEditorComponent>;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [ArtemisTestModule, AceEditorModule, ArtemisMarkdownEditorModule],
-        })
-            .compileComponents()
-            .then(() => {
-                fixture = TestBed.createComponent(MarkdownEditorComponent);
-                comp = fixture.componentInstance;
-            });
-    });
-
-    it('should add insert the sample e-function into the editor on execute', () => {
-        const katexCommand = new KatexCommand();
-        comp.domainCommands = [katexCommand];
-        fixture.detectChanges();
-        comp.ngAfterViewInit();
-
-        katexCommand.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('$$ e^{\\frac{1}{4} y^2} $$');
-    });
-});
diff --git a/src/test/javascript/spec/component/markdown-editor/link-command.spec.ts b/src/test/javascript/spec/component/markdown-editor/link-command.spec.ts
deleted file mode 100644
index 442cfe7212d8..000000000000
--- a/src/test/javascript/spec/component/markdown-editor/link-command.spec.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AceEditorModule } from 'app/shared/markdown-editor/ace-editor/ace-editor.module';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
-import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown-editor.module';
-import { ArtemisTestModule } from '../../test.module';
-import { LinkCommand } from 'app/shared/markdown-editor/commands/link.command';
-import { Command } from 'app/shared/markdown-editor/commands/command';
-
-describe('LinkCommand', () => {
-    let comp: MarkdownEditorComponent;
-    let fixture: ComponentFixture<MarkdownEditorComponent>;
-    let command: Command;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [ArtemisTestModule, AceEditorModule, ArtemisMarkdownEditorModule],
-        })
-            .compileComponents()
-            .then(() => {
-                fixture = TestBed.createComponent(MarkdownEditorComponent);
-                comp = fixture.componentInstance;
-
-                command = new LinkCommand();
-                comp.defaultCommands = [command];
-                fixture.detectChanges();
-                comp.ngAfterViewInit();
-            });
-    });
-
-    it('should add [](http://) on execute', () => {
-        comp.aceEditorContainer.getEditor().setValue('');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('[](http://)');
-    });
-
-    it('should remove [](http://) on execute', () => {
-        comp.aceEditorContainer.getEditor().setValue('[](http://)test');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('test');
-    });
-});
diff --git a/src/test/javascript/spec/component/markdown-editor/markdown-editor-monaco.component.spec.ts b/src/test/javascript/spec/component/markdown-editor/markdown-editor-monaco.component.spec.ts
index 6e9ec8921a96..3d1c671dab9a 100644
--- a/src/test/javascript/spec/component/markdown-editor/markdown-editor-monaco.component.spec.ts
+++ b/src/test/javascript/spec/component/markdown-editor/markdown-editor-monaco.component.spec.ts
@@ -7,7 +7,7 @@ import { ComponentFixture, TestBed, fakeAsync, flush } from '@angular/core/testi
 import { FormsModule } from '@angular/forms';
 import { NgbNavModule, NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 import { MockComponent, MockDirective, MockPipe, MockProvider } from 'ng-mocks';
-import { MarkdownEditorMonacoComponent } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
+import { MarkdownEditorHeight, MarkdownEditorMonacoComponent } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
 import { MonacoEditorComponent } from 'app/shared/monaco-editor/monaco-editor.component';
 import { MonacoColorAction } from 'app/shared/monaco-editor/model/actions/monaco-color.action';
 import { MockResizeObserver } from '../../helpers/mocks/service/mock-resize-observer';
@@ -15,7 +15,6 @@ import { CdkDragMove, DragDropModule } from '@angular/cdk/drag-drop';
 import { ArtemisSharedModule } from 'app/shared/shared.module';
 import { MonacoUrlAction } from 'app/shared/monaco-editor/model/actions/monaco-url.action';
 import { MonacoAttachmentAction } from 'app/shared/monaco-editor/model/actions/monaco-attachment.action';
-import { MarkdownEditorHeight } from 'app/shared/markdown-editor/markdown-editor.component';
 import { MonacoFormulaAction } from 'app/shared/monaco-editor/model/actions/monaco-formula.action';
 import { MonacoTestCaseAction } from 'app/shared/monaco-editor/model/actions/monaco-test-case.action';
 import { MonacoTaskAction } from 'app/shared/monaco-editor/model/actions/monaco-task.action';
diff --git a/src/test/javascript/spec/component/markdown-editor/markdown-editor.component.spec.ts b/src/test/javascript/spec/component/markdown-editor/markdown-editor.component.spec.ts
deleted file mode 100644
index b89259161e85..000000000000
--- a/src/test/javascript/spec/component/markdown-editor/markdown-editor.component.spec.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormsModule } from '@angular/forms';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
-import { MockComponent, MockDirective, MockPipe, MockProvider } from 'ng-mocks';
-import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
-import { AceEditorComponent } from 'app/shared/markdown-editor/ace-editor/ace-editor.component';
-import { ColorSelectorComponent } from 'app/shared/color-selector/color-selector.component';
-import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
-import { FileUploaderService } from 'app/shared/http/file-uploader.service';
-import { AlertService } from 'app/core/util/alert.service';
-import { NgbNav } from '@ng-bootstrap/ng-bootstrap';
-import { ArtemisTestModule } from '../../test.module';
-import { NegatedTypeCheckPipe } from 'app/shared/pipes/negated-type-check.pipe';
-import { TypeCheckPipe } from 'app/shared/pipes/type-check.pipe';
-
-describe('MarkdownEditorComponent', () => {
-    let fixture: ComponentFixture<MarkdownEditorComponent>;
-    let component: MarkdownEditorComponent;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            providers: [MockProvider(FileUploaderService), MockProvider(AlertService)],
-            imports: [FormsModule, NgbNav, ArtemisTestModule, MockDirective(NgbTooltip)],
-            declarations: [
-                MarkdownEditorComponent,
-                MockComponent(AceEditorComponent),
-                MockComponent(ColorSelectorComponent),
-                MockDirective(NgbTooltip),
-                MockPipe(ArtemisTranslatePipe),
-                MockPipe(NegatedTypeCheckPipe),
-                MockPipe(TypeCheckPipe),
-            ],
-        }).compileComponents();
-        fixture = TestBed.createComponent(MarkdownEditorComponent);
-        component = fixture.componentInstance;
-    });
-
-    afterEach(() => {
-        jest.restoreAllMocks();
-    });
-
-    it('should embed files when at least one file is uploaded', () => {
-        // Arrange
-        const files = [new File([], 'file1.png')];
-        const event = {
-            target: {
-                files: files,
-            },
-        };
-
-        const embedFilesSpy = jest.spyOn(component, 'embedFiles').mockImplementation();
-
-        // Act
-        component.onFileUpload(event as any);
-
-        // Assert
-        expect(embedFilesSpy).toHaveBeenCalledWith(files);
-    });
-
-    it('should not embed files when no file is uploaded', () => {
-        // Arrange
-        const event = {
-            target: {
-                files: [],
-            },
-        };
-
-        const embedFilesSpy = jest.spyOn(component, 'embedFiles');
-
-        // Act
-        component.onFileUpload(event as any);
-
-        // Assert
-        expect(embedFilesSpy).not.toHaveBeenCalled();
-    });
-});
diff --git a/src/test/javascript/spec/component/markdown-editor/metisReference-commands.spec.ts b/src/test/javascript/spec/component/markdown-editor/metisReference-commands.spec.ts
deleted file mode 100644
index 73f8446acc67..000000000000
--- a/src/test/javascript/spec/component/markdown-editor/metisReference-commands.spec.ts
+++ /dev/null
@@ -1,240 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AceEditorModule } from 'app/shared/markdown-editor/ace-editor/ace-editor.module';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
-import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown-editor.module';
-import { ArtemisTestModule } from '../../test.module';
-import { MetisService } from 'app/shared/metis/metis.service';
-import { MockMetisService } from '../../helpers/mocks/service/mock-metis-service.service';
-import { ExerciseReferenceCommand } from 'app/shared/markdown-editor/commands/courseArtifactReferenceCommands/exerciseReferenceCommand';
-import { metisExercise, metisLecture, metisLecture2, metisLecture3 } from '../../helpers/sample/metis-sample-data';
-import { LectureAttachmentReferenceCommand } from 'app/shared/markdown-editor/commands/courseArtifactReferenceCommands/lectureAttachmentReferenceCommand';
-import { ReferenceType } from 'app/shared/metis/metis.util';
-import { LectureService } from 'app/lecture/lecture.service';
-import { MockProvider } from 'ng-mocks';
-import { HttpResponse } from '@angular/common/http';
-import { of } from 'rxjs';
-import { Slide } from 'app/entities/lecture-unit/slide.model';
-import { AttachmentUnit } from 'app/entities/lecture-unit/attachmentUnit.model';
-
-describe('Exercise Lecture Attachment Reference Commands', () => {
-    let comp: MarkdownEditorComponent;
-    let fixture: ComponentFixture<MarkdownEditorComponent>;
-    let exerciseReferenceCommand: ExerciseReferenceCommand;
-    let lectureReferenceCommand: LectureAttachmentReferenceCommand;
-
-    let metisService: MetisService;
-    let lectureService: LectureService;
-    let findLectureWithDetailsSpy: jest.SpyInstance;
-    let findAllLecturesWithDetailsSpy: jest.SpyInstance;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [ArtemisTestModule, AceEditorModule, ArtemisMarkdownEditorModule],
-            providers: [{ provide: MetisService, useClass: MockMetisService }, MockProvider(LectureService)],
-        })
-            .compileComponents()
-            .then(() => {
-                fixture = TestBed.createComponent(MarkdownEditorComponent);
-                comp = fixture.componentInstance;
-                metisService = TestBed.inject(MetisService);
-                lectureService = TestBed.inject(LectureService);
-                findLectureWithDetailsSpy = jest.spyOn(lectureService, 'findWithDetailsWithSlides');
-                findAllLecturesWithDetailsSpy = jest.spyOn(lectureService, 'findAllByCourseIdWithSlides');
-            });
-    });
-
-    afterEach(() => {
-        jest.restoreAllMocks();
-    });
-
-    it('should initialize exercise reference command correctly', () => {
-        exerciseReferenceCommand = new ExerciseReferenceCommand(metisService);
-        expect(exerciseReferenceCommand.getValues()).toEqual(
-            metisService.getCourse().exercises!.map((exercise) => ({ id: exercise.id!.toString(), value: exercise.title!, type: exercise.type })),
-        );
-    });
-
-    it('should initialize lecture attachment reference command correctly', () => {
-        const attachmentUnit = new AttachmentUnit();
-        attachmentUnit.id = 3;
-        const slide = new Slide();
-        slide.id = 3;
-        slide.slideNumber = 3;
-        slide.slideImagePath = 'directory/attachments/slides/Metis-Slide-3.png';
-        attachmentUnit.slides?.push(slide);
-        metisLecture3.lectureUnits?.push(attachmentUnit);
-        const returnValue = of(new HttpResponse({ body: [metisLecture, metisLecture2, metisLecture3], status: 200 }));
-
-        findAllLecturesWithDetailsSpy.mockReturnValue(returnValue);
-        lectureReferenceCommand = new LectureAttachmentReferenceCommand(metisService, lectureService);
-        expect(findAllLecturesWithDetailsSpy).toHaveBeenCalledOnce();
-
-        expect(lectureReferenceCommand.getValues()).toEqual([
-            {
-                id: metisLecture.id!.toString(),
-                value: metisLecture.title!,
-                type: ReferenceType.LECTURE,
-                elements: metisLecture.attachments?.map((attachment: any) => ({
-                    id: attachment.id!.toString(),
-                    value: attachment.name!,
-                    courseArtifactType: ReferenceType.ATTACHMENT,
-                })),
-            },
-            {
-                id: metisLecture2.id!.toString(),
-                value: metisLecture2.title!,
-                type: ReferenceType.LECTURE,
-                elements: metisLecture2.attachments?.map((attachment: any) => ({
-                    id: attachment.id!.toString(),
-                    value: attachment.name!,
-                    courseArtifactType: ReferenceType.ATTACHMENT,
-                })),
-                attachmentUnits: metisLecture2.lectureUnits?.map((unit: any) => {
-                    return {
-                        id: unit.id!.toString(),
-                        value: unit.name!,
-                        slides: unit.slides
-                            ?.map((slide: Slide) => {
-                                return {
-                                    id: slide.id!.toString(),
-                                    slideNumber: slide.slideNumber!,
-                                    slideImagePath: slide.slideImagePath!,
-                                    courseArtifactType: ReferenceType.SLIDE,
-                                };
-                            })
-                            .sort((a: Slide, b: Slide) => a.slideNumber! - b.slideNumber!),
-                        courseArtifactType: ReferenceType.ATTACHMENT_UNITS,
-                    };
-                }),
-            },
-            {
-                id: metisLecture3.id!.toString(),
-                value: metisLecture3.title!,
-                type: ReferenceType.LECTURE,
-                elements: metisLecture3.attachments?.map((attachment: any) => ({
-                    id: attachment.id!.toString(),
-                    value: attachment.name!,
-                    courseArtifactType: ReferenceType.ATTACHMENT,
-                })),
-                attachmentUnits: metisLecture3.lectureUnits?.map((unit: any) => {
-                    return {
-                        id: unit.id!.toString(),
-                        value: unit.name!,
-                        slides: unit.slides
-                            ?.map((slide: Slide) => {
-                                return {
-                                    id: slide.id!.toString(),
-                                    slideNumber: slide.slideNumber!,
-                                    slideImagePath: slide.slideImagePath!,
-                                    courseArtifactType: ReferenceType.SLIDE,
-                                };
-                            })
-                            .sort((a: Slide, b: Slide) => a.slideNumber! - b.slideNumber!),
-                        courseArtifactType: ReferenceType.ATTACHMENT_UNITS,
-                    };
-                }),
-            },
-        ]);
-    });
-
-    it('should insert correct reference link for exercise to markdown editor on execute', () => {
-        exerciseReferenceCommand = new ExerciseReferenceCommand(metisService);
-
-        comp.defaultCommands = [exerciseReferenceCommand];
-        fixture.detectChanges();
-
-        comp.aceEditorContainer.getEditor().setValue('');
-
-        const referenceRouterLinkToExercise = `[${metisExercise.type}]${metisExercise.title}(${metisService.getLinkForExercise(metisExercise.id!.toString())})[/${
-            metisExercise.type
-        }]`;
-        exerciseReferenceCommand.execute(metisExercise.id!.toString());
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe(referenceRouterLinkToExercise);
-    });
-
-    it('should insert correct reference link for lecture to markdown editor on execute', () => {
-        const returnValue = of(new HttpResponse({ body: [metisLecture], status: 200 }));
-        findAllLecturesWithDetailsSpy.mockReturnValue(returnValue);
-        lectureReferenceCommand = new LectureAttachmentReferenceCommand(metisService, lectureService);
-        expect(findAllLecturesWithDetailsSpy).toHaveBeenCalledOnce();
-
-        const returnValueDetail = of(new HttpResponse({ body: metisLecture, status: 200 }));
-        findLectureWithDetailsSpy.mockReturnValue(returnValueDetail);
-
-        comp.defaultCommands = [lectureReferenceCommand];
-        fixture.detectChanges();
-
-        comp.aceEditorContainer.getEditor().setValue('');
-
-        const referenceRouterLinkToLecture = `[lecture]${metisLecture.title}(${metisService.getLinkForLecture(metisLecture.id!.toString())})[/lecture]`;
-        lectureReferenceCommand.execute(metisLecture.id!.toString(), ReferenceType.LECTURE);
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe(referenceRouterLinkToLecture);
-    });
-
-    it('should insert correct reference link for attachment to markdown editor on execute', () => {
-        const returnValue = of(new HttpResponse({ body: [], status: 200 }));
-        findAllLecturesWithDetailsSpy.mockReturnValue(returnValue);
-        lectureReferenceCommand = new LectureAttachmentReferenceCommand(metisService, lectureService);
-        expect(findAllLecturesWithDetailsSpy).toHaveBeenCalledOnce();
-
-        const returnValueDetail = of(new HttpResponse({ body: {}, status: 200 }));
-        findLectureWithDetailsSpy.mockReturnValue(returnValueDetail);
-
-        comp.defaultCommands = [lectureReferenceCommand];
-        fixture.detectChanges();
-
-        comp.aceEditorContainer.getEditor().setValue('');
-
-        const shortLink = metisLecture.attachments?.first() ? metisLecture.attachments?.first()?.link!.split('attachments/')[1] : '';
-        const referenceRouterLinkToLecture = `[attachment]${metisLecture.attachments?.first()?.name}(${shortLink})[/attachment]`;
-        lectureReferenceCommand.execute(metisLecture.id!.toString(), ReferenceType.ATTACHMENT, metisLecture.attachments?.first()?.id!.toString());
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe(referenceRouterLinkToLecture);
-    });
-
-    it('should insert correct reference link for attachment unit to markdown editor on execute', () => {
-        const returnValue = of(new HttpResponse({ body: [metisLecture3], status: 200 }));
-        findAllLecturesWithDetailsSpy.mockReturnValue(returnValue);
-        lectureReferenceCommand = new LectureAttachmentReferenceCommand(metisService, lectureService);
-        expect(findAllLecturesWithDetailsSpy).toHaveBeenCalledOnce();
-
-        const returnValueDetail = of(new HttpResponse({ body: metisLecture3, status: 200 }));
-        findLectureWithDetailsSpy.mockReturnValue(returnValueDetail);
-
-        comp.defaultCommands = [lectureReferenceCommand];
-        fixture.detectChanges();
-
-        comp.aceEditorContainer.getEditor().setValue('');
-
-        const selectedUnit: AttachmentUnit = metisLecture3.lectureUnits?.first() as AttachmentUnit;
-        const shortLink = selectedUnit?.attachment ? selectedUnit?.attachment?.link!.split('attachments/')[1] : '';
-        const referenceRouterLinkToLectureUnit = `[lecture-unit]${metisLecture3.lectureUnits?.first()?.name}(${shortLink})[/lecture-unit]`;
-        lectureReferenceCommand.execute(metisLecture3.id!.toString(), ReferenceType.ATTACHMENT_UNITS, undefined, selectedUnit?.id!.toString());
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe(referenceRouterLinkToLectureUnit);
-    });
-
-    it('should insert correct reference link for attachment unit SLIDE to markdown editor on execute', () => {
-        const returnValue = of(new HttpResponse({ body: [metisLecture3], status: 200 }));
-        findAllLecturesWithDetailsSpy.mockReturnValue(returnValue);
-        lectureReferenceCommand = new LectureAttachmentReferenceCommand(metisService, lectureService);
-        expect(findAllLecturesWithDetailsSpy).toHaveBeenCalledOnce();
-
-        const returnValueDetail = of(new HttpResponse({ body: metisLecture3, status: 200 }));
-        findLectureWithDetailsSpy.mockReturnValue(returnValueDetail);
-        lectureReferenceCommand = new LectureAttachmentReferenceCommand(metisService, lectureService);
-
-        comp.defaultCommands = [lectureReferenceCommand];
-        fixture.detectChanges();
-
-        comp.aceEditorContainer.getEditor().setValue('');
-
-        const selectedUnit: AttachmentUnit = metisLecture3.lectureUnits?.first() as AttachmentUnit;
-        const selectedSlide: Slide = selectedUnit.slides?.first() as Slide;
-        const shortLink = selectedSlide.slideImagePath!.split('attachments/')[1];
-        // Use a regular expression and the replace() method to remove the file name and last slash
-        const shortLinkWithoutFileName: string = shortLink.replace(new RegExp(`[^/]*${'.png'}`), '').replace(/\/$/, '');
-        const referenceRouterLinkToSlide = `[slide]${metisLecture3.lectureUnits?.first()?.name} Slide ${selectedSlide.slideNumber}(${shortLinkWithoutFileName})[/slide]`;
-        lectureReferenceCommand.execute(metisLecture3.id!.toString(), ReferenceType.ATTACHMENT_UNITS, undefined, selectedUnit?.id!.toString(), selectedSlide?.id!.toString());
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe(referenceRouterLinkToSlide);
-    });
-});
diff --git a/src/test/javascript/spec/component/markdown-editor/ordered-list-command.spec.ts b/src/test/javascript/spec/component/markdown-editor/ordered-list-command.spec.ts
deleted file mode 100644
index f42c65cba12c..000000000000
--- a/src/test/javascript/spec/component/markdown-editor/ordered-list-command.spec.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AceEditorModule } from 'app/shared/markdown-editor/ace-editor/ace-editor.module';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
-import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown-editor.module';
-import { ArtemisTestModule } from '../../test.module';
-import { OrderedListCommand } from 'app/shared/markdown-editor/commands/orderedListCommand';
-import { Command } from 'app/shared/markdown-editor/commands/command';
-
-describe('OrderedListCommand', () => {
-    let comp: MarkdownEditorComponent;
-    let fixture: ComponentFixture<MarkdownEditorComponent>;
-    let command: Command;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [ArtemisTestModule, AceEditorModule, ArtemisMarkdownEditorModule],
-        })
-            .compileComponents()
-            .then(() => {
-                fixture = TestBed.createComponent(MarkdownEditorComponent);
-                comp = fixture.componentInstance;
-
-                command = new OrderedListCommand();
-                comp.defaultCommands = [command];
-                fixture.detectChanges();
-                comp.ngAfterViewInit();
-            });
-    });
-
-    it('should add ordered list to lines on execute', () => {
-        comp.aceEditorContainer.getEditor().setValue('line 1\nline 2');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('1. line 1\n2. line 2');
-    });
-
-    it('should add new ordered list on execute', () => {
-        comp.aceEditorContainer.getEditor().setValue('');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('1. ');
-    });
-
-    it('should remove ordered list on execute', () => {
-        comp.aceEditorContainer.getEditor().setValue('1. line 1\n2. line 2');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('line 1\nline 2');
-    });
-
-    it('should handle empty lines and create new list', () => {
-        comp.aceEditorContainer.getEditor().setValue('Test\n\nTest');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('1. Test\n\n2. Test');
-    });
-
-    it('should handle empty lines and remove lists', () => {
-        comp.aceEditorContainer.getEditor().setValue('1. Test\n2.\n3. Test');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('Test\n\nTest');
-    });
-
-    it('should handle multiple sequential empty lines and remove lists', () => {
-        comp.aceEditorContainer.getEditor().setValue('1. Test\n\n3. Test');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('Test\n\nTest');
-    });
-
-    it('should handle dots in sentences and remove lists', () => {
-        comp.aceEditorContainer.getEditor().setValue('1. Test with dot at the end.\n2. Test with dot. in the center\n3. .Test with dot at the start');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('Test with dot at the end.\nTest with dot. in the center\n.Test with dot at the start');
-    });
-
-    it('should handle dots in sentences and create lists', () => {
-        comp.aceEditorContainer.getEditor().setValue('Test with dot at the end.\nTest with dot. in the center\n.Test with dot at the start');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('1. Test with dot at the end.\n2. Test with dot. in the center\n3. .Test with dot at the start');
-    });
-
-    it('should handle single empty lines and create list', () => {
-        comp.aceEditorContainer.getEditor().setValue('');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('1. ');
-    });
-
-    it('should handle single empty lines and remove list', () => {
-        comp.aceEditorContainer.getEditor().setValue('1. ');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('');
-    });
-
-    it('should keep whitespaces at the beginning and create list', () => {
-        comp.aceEditorContainer.getEditor().setValue('Test\n   Test');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('1. Test\n   2. Test');
-    });
-
-    it('should keep whitespaces at the beginning and remove list', () => {
-        comp.aceEditorContainer.getEditor().setValue('1. Test\n   2. Test');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('Test\n   Test');
-    });
-});
diff --git a/src/test/javascript/spec/component/markdown-editor/reference-command.spec.ts b/src/test/javascript/spec/component/markdown-editor/reference-command.spec.ts
deleted file mode 100644
index 2cfc5ed19ed6..000000000000
--- a/src/test/javascript/spec/component/markdown-editor/reference-command.spec.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AceEditorModule } from 'app/shared/markdown-editor/ace-editor/ace-editor.module';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
-import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown-editor.module';
-import { ArtemisTestModule } from '../../test.module';
-import { ReferenceCommand } from 'app/shared/markdown-editor/commands/reference.command';
-
-describe('ReferenceCommand', () => {
-    let comp: MarkdownEditorComponent;
-    let fixture: ComponentFixture<MarkdownEditorComponent>;
-    let referenceCommand: ReferenceCommand;
-
-    afterEach(() => {
-        jest.restoreAllMocks();
-    });
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [ArtemisTestModule, AceEditorModule, ArtemisMarkdownEditorModule],
-        })
-            .compileComponents()
-            .then(() => {
-                fixture = TestBed.createComponent(MarkdownEditorComponent);
-                comp = fixture.componentInstance;
-
-                referenceCommand = new ReferenceCommand();
-                comp.defaultCommands = [referenceCommand];
-                fixture.detectChanges();
-                comp.ngAfterViewInit();
-            });
-    });
-
-    it('should add > Reference on execute when no text is selected', () => {
-        referenceCommand.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('> Reference');
-    });
-
-    it('should remove > lorem on execute when reference is selected', () => {
-        comp.aceEditorContainer.getEditor().setValue('> lorem');
-        referenceCommand.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('lorem');
-    });
-
-    it('should remove > Reference on execute when reference is selected', () => {
-        comp.aceEditorContainer.getEditor().setValue('> Reference');
-        referenceCommand.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('');
-    });
-
-    it('should add > on execute when text is selected', () => {
-        comp.aceEditorContainer.getEditor().setValue('lorem');
-        referenceCommand.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('> lorem');
-    });
-});
diff --git a/src/test/javascript/spec/component/markdown-editor/underline-command.spec.ts b/src/test/javascript/spec/component/markdown-editor/underline-command.spec.ts
deleted file mode 100644
index ef851a0a03d3..000000000000
--- a/src/test/javascript/spec/component/markdown-editor/underline-command.spec.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AceEditorModule } from 'app/shared/markdown-editor/ace-editor/ace-editor.module';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
-import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown-editor.module';
-import { ArtemisTestModule } from '../../test.module';
-import { UnderlineCommand } from 'app/shared/markdown-editor/commands/underline.command';
-
-describe('Underline Command', () => {
-    let comp: MarkdownEditorComponent;
-    let fixture: ComponentFixture<MarkdownEditorComponent>;
-    let underlineCommand: UnderlineCommand;
-
-    afterEach(() => {
-        jest.restoreAllMocks();
-    });
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [ArtemisTestModule, AceEditorModule, ArtemisMarkdownEditorModule],
-        })
-            .compileComponents()
-            .then(() => {
-                fixture = TestBed.createComponent(MarkdownEditorComponent);
-                comp = fixture.componentInstance;
-
-                underlineCommand = new UnderlineCommand();
-                comp.defaultCommands = [underlineCommand];
-                fixture.detectChanges();
-                comp.ngAfterViewInit();
-            });
-    });
-
-    it('should add <ins></ins> brackets on execute when no text is selected', () => {
-        underlineCommand.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('<ins></ins>');
-    });
-
-    it('should add <ins></ins> around selected text on execute when text is selected', () => {
-        comp.aceEditorContainer.getEditor().setValue('lorem');
-        underlineCommand.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('<ins>lorem</ins>');
-    });
-
-    it('should remove <ins></ins> around selected text on execute when text is selected', () => {
-        comp.aceEditorContainer.getEditor().setValue('<ins>lorem</ins>');
-        underlineCommand.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('lorem');
-    });
-});
diff --git a/src/test/javascript/spec/component/markdown-editor/unordered-list-command.spec.ts b/src/test/javascript/spec/component/markdown-editor/unordered-list-command.spec.ts
deleted file mode 100644
index e3fade1b6863..000000000000
--- a/src/test/javascript/spec/component/markdown-editor/unordered-list-command.spec.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AceEditorModule } from 'app/shared/markdown-editor/ace-editor/ace-editor.module';
-import { MarkdownEditorComponent } from 'app/shared/markdown-editor/markdown-editor.component';
-import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown-editor.module';
-import { ArtemisTestModule } from '../../test.module';
-import { UnorderedListCommand } from 'app/shared/markdown-editor/commands/unorderedListCommand';
-import { Command } from 'app/shared/markdown-editor/commands/command';
-
-describe('UnorderedListCommand', () => {
-    let comp: MarkdownEditorComponent;
-    let fixture: ComponentFixture<MarkdownEditorComponent>;
-    let command: Command;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [ArtemisTestModule, AceEditorModule, ArtemisMarkdownEditorModule],
-        })
-            .compileComponents()
-            .then(() => {
-                fixture = TestBed.createComponent(MarkdownEditorComponent);
-                comp = fixture.componentInstance;
-
-                command = new UnorderedListCommand();
-                comp.defaultCommands = [command];
-                fixture.detectChanges();
-                comp.ngAfterViewInit();
-            });
-    });
-
-    afterEach(() => {
-        jest.restoreAllMocks();
-    });
-
-    it('should add ordered list to lines on execute', () => {
-        comp.aceEditorContainer.getEditor().setValue('line 1\nline 2');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('- line 1\n- line 2');
-    });
-
-    it('should add new ordered list on execute', () => {
-        comp.aceEditorContainer.getEditor().setValue('');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('- ');
-    });
-
-    it('should remove ordered list on execute', () => {
-        comp.aceEditorContainer.getEditor().setValue('- line 1\n- line 2');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('line 1\nline 2');
-    });
-
-    it('should handle empty lines and create new list', () => {
-        comp.aceEditorContainer.getEditor().setValue('Test\n\nTest');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('- Test\n\n- Test');
-    });
-
-    it('should handle empty lines and remove lists', () => {
-        comp.aceEditorContainer.getEditor().setValue('- Test\n- \n- Test');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('Test\n\nTest');
-    });
-
-    it('should handle multiple sequential empty lines and remove lists', () => {
-        comp.aceEditorContainer.getEditor().setValue('- Test\n\n- Test');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('Test\n\nTest');
-    });
-
-    it('should handle dots in sentences and remove lists', () => {
-        comp.aceEditorContainer.getEditor().setValue('- Test with dash at the end-\n- Test with dash- in the center\n- -Test with dash at the start');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('Test with dash at the end-\nTest with dash- in the center\n-Test with dash at the start');
-    });
-
-    it('should handle dots in sentences and create lists', () => {
-        comp.aceEditorContainer.getEditor().setValue('Test with dash at the end-\nTest with dash- in the center\n-Test with dash at the start');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('- Test with dash at the end-\n- Test with dash- in the center\n- -Test with dash at the start');
-    });
-
-    it('should handle single empty lines and remove list', () => {
-        comp.aceEditorContainer.getEditor().setValue('- ');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('');
-    });
-
-    it('should keep whitespaces at the beginning and create list', () => {
-        comp.aceEditorContainer.getEditor().setValue('Test\n   Test');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('- Test\n   - Test');
-    });
-
-    it('should keep whitespaces at the beginning and remove list', () => {
-        comp.aceEditorContainer.getEditor().setValue('- Test\n  - Test');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('Test\n  Test');
-    });
-
-    it('should handle single dash and remove list', () => {
-        comp.aceEditorContainer.getEditor().setValue('- -');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('-');
-    });
-
-    it('should handle single dash and create list', () => {
-        comp.aceEditorContainer.getEditor().setValue('-');
-        command.execute();
-        expect(comp.aceEditorContainer.getEditor().getValue()).toBe('- -');
-    });
-});
diff --git a/src/test/javascript/spec/component/markdown-editor/userMentionCommand.spec.ts b/src/test/javascript/spec/component/markdown-editor/userMentionCommand.spec.ts
deleted file mode 100644
index 853013fdb62c..000000000000
--- a/src/test/javascript/spec/component/markdown-editor/userMentionCommand.spec.ts
+++ /dev/null
@@ -1,174 +0,0 @@
-import { MetisService } from 'app/shared/metis/metis.service';
-import { ConversationUserDTO } from 'app/entities/metis/conversation/conversation-user-dto.model';
-import { HttpResponse } from '@angular/common/http';
-import { of } from 'rxjs';
-import { UserMentionCommand } from 'app/shared/markdown-editor/commands/courseArtifactReferenceCommands/userMentionCommand';
-import { CourseManagementService } from 'app/course/manage/course-management.service';
-import { SelectableItem } from 'app/shared/markdown-editor/commands/interactiveSearchCommand';
-
-describe('UserMentionCommand', () => {
-    let userMentionCommand: UserMentionCommand;
-    let courseManagementServiceMock: Partial<CourseManagementService>;
-    let metisServiceMock: Partial<MetisService>;
-    let aceEditorMock: any;
-    let selectWithSearchComponent: any;
-
-    beforeEach(() => {
-        selectWithSearchComponent = {
-            open: () => {},
-            updateSearchTerm: () => {},
-            close: () => {},
-        };
-
-        courseManagementServiceMock = {
-            searchMembersForUserMentions: () =>
-                of(
-                    new HttpResponse<ConversationUserDTO[]>({
-                        body: [
-                            { name: 'User 1', login: 'user1' },
-                            { name: 'User 2', login: 'user2' },
-                        ],
-                    }),
-                ),
-        };
-
-        metisServiceMock = {
-            getCourse: () => ({ id: 123 }),
-        };
-
-        aceEditorMock = {
-            command: undefined,
-            commands: {
-                addCommand: (obj: any) => {
-                    aceEditorMock.command = obj;
-                },
-            },
-            execCommand: () => {},
-            getCursorPosition: () => ({ row: 0, column: 0 }),
-            focus: () => {},
-            session: {
-                getDocument: () => ({
-                    removeInLine: () => {},
-                }),
-                getLine: () => '',
-            },
-            insert: () => {},
-            renderer: {
-                textToScreenCoordinates: () => {},
-            },
-        };
-
-        // Create an instance of UserMentionCommand with mock services
-        userMentionCommand = new UserMentionCommand(courseManagementServiceMock as CourseManagementService, metisServiceMock as MetisService);
-        userMentionCommand.setSelectWithSearchComponent(selectWithSearchComponent);
-    });
-
-    it('should create an instance of UserMentionCommand', () => {
-        expect(userMentionCommand).toBeTruthy();
-    });
-
-    it('should perform a user search', () => {
-        const searchTerm = 'user';
-
-        const searchMembersForUserMentionsSpy = jest.spyOn(courseManagementServiceMock, 'searchMembersForUserMentions');
-
-        userMentionCommand.performSearch(searchTerm).subscribe((response) => {
-            expect(response.body).toEqual([
-                { name: 'User 1', login: 'user1' },
-                { name: 'User 2', login: 'user2' },
-            ]);
-        });
-
-        expect(searchMembersForUserMentionsSpy).toHaveBeenCalledExactlyOnceWith(123, searchTerm);
-    });
-
-    it('should insert selection', () => {
-        userMentionCommand.setEditor(aceEditorMock);
-
-        const focusSpy = jest.spyOn(aceEditorMock, 'focus');
-
-        // Simulate open selection menu via triggering command
-        aceEditorMock.command.exec(aceEditorMock);
-
-        userMentionCommand.insertSelection({ name: 'User 1', login: 'user1' } as SelectableItem);
-
-        // the editor is focues twice: Once for the execution of the command, once after the text insertion
-        expect(focusSpy).toHaveBeenCalledTimes(2);
-    });
-
-    it('should not be able to call command twice while active', () => {
-        userMentionCommand.setEditor(aceEditorMock);
-
-        const openSpy = jest.spyOn(selectWithSearchComponent, 'open');
-
-        // Simulate open selection menu via triggering command
-        aceEditorMock.command.exec(aceEditorMock);
-        aceEditorMock.command.exec(aceEditorMock);
-
-        expect(openSpy).toHaveBeenCalledOnce();
-    });
-
-    it('should add command when setting editor', () => {
-        const addCommandSpy = jest.spyOn(aceEditorMock.commands, 'addCommand');
-
-        userMentionCommand.setEditor(aceEditorMock);
-
-        expect(addCommandSpy).toHaveBeenCalledOnce();
-    });
-
-    it('should execute the command', () => {
-        userMentionCommand.setEditor(aceEditorMock);
-
-        const execCommandSpy = jest.spyOn(aceEditorMock, 'execCommand');
-
-        userMentionCommand.execute();
-
-        expect(execCommandSpy).toHaveBeenCalledExactlyOnceWith('@');
-    });
-
-    it('should calculate screen coordinates', () => {
-        userMentionCommand.setEditor(aceEditorMock);
-
-        const textToScreenCoordinatesSpy = jest.spyOn(aceEditorMock.renderer, 'textToScreenCoordinates');
-
-        userMentionCommand.getCursorScreenPosition();
-
-        expect(textToScreenCoordinatesSpy).toHaveBeenCalledOnce();
-    });
-
-    it('should update search term correctly based on cursor position', () => {
-        userMentionCommand.setEditor(aceEditorMock);
-        aceEditorMock.command.exec(aceEditorMock);
-        aceEditorMock.getCursorPosition = jest.fn(() => ({ row: 0, column: 10 }));
-        aceEditorMock.session.getLine = jest.fn(() => 'Hello @user');
-
-        const updateSearchTermSpy = jest.spyOn(selectWithSearchComponent, 'updateSearchTerm');
-
-        userMentionCommand.updateSearchTerm();
-
-        expect(updateSearchTermSpy).toHaveBeenCalledExactlyOnceWith('user');
-    });
-
-    it('should not update search term if menu not open', () => {
-        userMentionCommand.setEditor(aceEditorMock);
-
-        const updateSearchTermSpy = jest.spyOn(selectWithSearchComponent, 'updateSearchTerm');
-
-        userMentionCommand.updateSearchTerm();
-
-        expect(updateSearchTermSpy).not.toHaveBeenCalled();
-    });
-
-    it('should close selectWithSearchComponent if there is no "@" sign', () => {
-        userMentionCommand.setEditor(aceEditorMock);
-        aceEditorMock.command.exec(aceEditorMock);
-        aceEditorMock.getCursorPosition = jest.fn(() => ({ row: 0, column: 6 }));
-        aceEditorMock.session.getLine = jest.fn(() => 'Hello ');
-
-        const closeSpy = jest.spyOn(selectWithSearchComponent, 'close');
-
-        userMentionCommand.updateSearchTerm();
-
-        expect(closeSpy).toHaveBeenCalledOnce();
-    });
-});
diff --git a/src/test/javascript/spec/component/modeling-submission/modeling-submission-team.component.spec.ts b/src/test/javascript/spec/component/modeling-submission/modeling-submission-team.component.spec.ts
index c6019160c79c..0f44f1b0e6fd 100644
--- a/src/test/javascript/spec/component/modeling-submission/modeling-submission-team.component.spec.ts
+++ b/src/test/javascript/spec/component/modeling-submission/modeling-submission-team.component.spec.ts
@@ -1,4 +1,3 @@
-import * as ace from 'brace';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BehaviorSubject, of, throwError } from 'rxjs';
 import { ArtemisTestModule } from '../../test.module';
@@ -47,8 +46,6 @@ import { ExerciseMode } from 'app/entities/exercise.model';
 import { SubmissionPatch } from 'app/entities/submission-patch.model';
 
 describe('ModelingSubmissionComponent', () => {
-    // needed to make sure ace is defined
-    ace.acequire('ace/ext/modelist.js');
     let comp: ModelingSubmissionComponent;
     let fixture: ComponentFixture<ModelingSubmissionComponent>;
     let debugElement: DebugElement;
diff --git a/src/test/javascript/spec/component/modeling-submission/modeling-submission.component.spec.ts b/src/test/javascript/spec/component/modeling-submission/modeling-submission.component.spec.ts
index 7ab3c3b3d2fa..439db7c5dcb9 100644
--- a/src/test/javascript/spec/component/modeling-submission/modeling-submission.component.spec.ts
+++ b/src/test/javascript/spec/component/modeling-submission/modeling-submission.component.spec.ts
@@ -1,4 +1,3 @@
-import * as ace from 'brace';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BehaviorSubject, of, throwError } from 'rxjs';
 import { ArtemisTestModule } from '../../test.module';
@@ -45,8 +44,6 @@ import { GradingInstruction } from 'app/exercises/shared/structured-grading-crit
 import { AlertService } from 'app/core/util/alert.service';
 
 describe('ModelingSubmissionComponent', () => {
-    // needed to make sure ace is defined
-    ace.acequire('ace/ext/modelist.js');
     let comp: ModelingSubmissionComponent;
     let fixture: ComponentFixture<ModelingSubmissionComponent>;
     let debugElement: DebugElement;
diff --git a/src/test/javascript/spec/component/programming-assessment/code-editor-tutor-assessment-container.component.spec.ts b/src/test/javascript/spec/component/programming-assessment/code-editor-tutor-assessment-container.component.spec.ts
index 417004d212de..059cbe0252d6 100644
--- a/src/test/javascript/spec/component/programming-assessment/code-editor-tutor-assessment-container.component.spec.ts
+++ b/src/test/javascript/spec/component/programming-assessment/code-editor-tutor-assessment-container.component.spec.ts
@@ -1,4 +1,3 @@
-import * as ace from 'brace';
 import { ComponentFixture, TestBed, fakeAsync, flush, tick } from '@angular/core/testing';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { DebugElement } from '@angular/core';
@@ -86,8 +85,6 @@ function addFeedbackAndValidateScore(comp: CodeEditorTutorAssessmentContainerCom
 }
 
 describe('CodeEditorTutorAssessmentContainerComponent', () => {
-    // needed to make sure ace is defined
-    ace.acequire('ace/ext/modelist.js');
     let comp: CodeEditorTutorAssessmentContainerComponent;
     let fixture: ComponentFixture<CodeEditorTutorAssessmentContainerComponent>;
     let debugElement: DebugElement;
@@ -267,7 +264,7 @@ describe('CodeEditorTutorAssessmentContainerComponent', () => {
         // Stub
         const getFilesWithContentStub = jest.spyOn(repositoryFileService, 'getFilesWithContent');
         getFilesWithContentStub.mockReturnValue(of(templateFileSessionReturn));
-        // Stub for ace editor
+        // Stub for code editor
         const getFileStub = jest.spyOn(repositoryFileService, 'getFile');
         const fileSubject = new BehaviorSubject({ fileContent: 'new file text' });
         getFileStub.mockReturnValue(fileSubject);
diff --git a/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction-analysis.component.spec.ts b/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction-analysis.component.spec.ts
index f20ccd999489..32b0e6a0922f 100644
--- a/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction-analysis.component.spec.ts
+++ b/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction-analysis.component.spec.ts
@@ -1,7 +1,6 @@
 import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
-import { TaskCommand } from 'app/shared/markdown-editor/domainCommands/programming-exercise/task.command';
 import { triggerChanges } from '../../helpers/utils/general.utils';
 import { TaskCountWarningComponent } from 'app/exercises/programming/manage/instructions-editor/analysis/task-count-warning/task-count-warning.component';
 import { ProgrammingExerciseInstructionAnalysisComponent } from 'app/exercises/programming/manage/instructions-editor/analysis/programming-exercise-instruction-analysis.component';
@@ -11,6 +10,7 @@ import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { MockProgrammingExerciseInstructionAnalysisService } from '../../helpers/mocks/service/mock-programming-exericse-instruction-analysis.service';
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
+import { MonacoTaskAction } from 'app/shared/monaco-editor/model/actions/monaco-task.action';
 
 describe('ProgrammingExerciseInstructionInstructorAnalysis', () => {
     let comp: ProgrammingExerciseInstructionAnalysisComponent;
@@ -20,8 +20,7 @@ describe('ProgrammingExerciseInstructionInstructorAnalysis', () => {
     const testCaseOkId = 'instruction_analysis_test-case-ok';
     const testCaseIssuesId = 'instruction_analysis_test-case-issues';
 
-    const taskCommand = new TaskCommand();
-    const taskRegex = taskCommand.getTagRegex('g');
+    const taskRegex = MonacoTaskAction.GLOBAL_TASK_REGEX;
     const exerciseTestCases = ['test1', 'test2', 'test6', 'test7'];
     const problemStatement =
         '1. [task][SortStrategy Interface](test1,test2) \n 2. [task][SortStrategy Interface](test3) \n lorem ipsum \n lorem \n  3. [task][SortStrategy Interface](test2,test4)';
diff --git a/src/test/javascript/spec/component/shared/metis/postings-markdown-editor/select-with-search.component.spec.ts b/src/test/javascript/spec/component/shared/metis/postings-markdown-editor/select-with-search.component.spec.ts
deleted file mode 100644
index a8060e7fa81b..000000000000
--- a/src/test/javascript/spec/component/shared/metis/postings-markdown-editor/select-with-search.component.spec.ts
+++ /dev/null
@@ -1,148 +0,0 @@
-import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { of, throwError } from 'rxjs';
-import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
-import { faAt } from '@fortawesome/free-solid-svg-icons';
-
-import { SelectWithSearchComponent } from 'app/shared/markdown-editor/select-with-search/select-with-search.component';
-import { InteractiveSearchCommand } from 'app/shared/markdown-editor/commands/interactiveSearchCommand';
-import { AlertService } from 'app/core/util/alert.service';
-import { MockProvider } from 'ng-mocks';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
-import { SimpleChange } from '@angular/core';
-
-describe('SelectWithSearchComponent', () => {
-    let component: SelectWithSearchComponent;
-    let fixture: ComponentFixture<SelectWithSearchComponent>;
-    let alertService: AlertService;
-
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            declarations: [SelectWithSearchComponent],
-            imports: [HttpClientTestingModule, NgbDropdownModule, FontAwesomeModule],
-            providers: [MockProvider(AlertService)],
-        }).compileComponents();
-    });
-
-    beforeEach(() => {
-        fixture = TestBed.createComponent(SelectWithSearchComponent);
-        component = fixture.componentInstance;
-        alertService = TestBed.inject(AlertService);
-        const testItems = [{ name: 'test 1' }, { name: 'test 2' }];
-        const command: InteractiveSearchCommand = {
-            setSelectWithSearchComponent: () => {},
-            performSearch: (searchTerm: string) => {
-                const filteredItems = testItems.filter((item) => item.name.includes(searchTerm));
-                return of(new HttpResponse<any[]>({ body: filteredItems }));
-            },
-            buttonIcon: faAt,
-            execute: () => {
-                component.open();
-            },
-            insertSelection: () => {},
-            getCursorScreenPosition: () => {
-                return { pageX: 0, pageY: 0 };
-            },
-            updateSearchTerm: () => {},
-        } as any;
-        component.command = command;
-        fixture.detectChanges();
-    });
-
-    afterEach(() => {
-        fixture.destroy();
-    });
-
-    it('should initialize and subscribe to search$', fakeAsync(() => {
-        expect(component.values).toEqual([]);
-        expect(component.selectedValue).toBeUndefined();
-
-        // Simulate search input
-        component.updateSearchTerm('test 1', true);
-        tick(1);
-        expect(component.values).toEqual([{ name: 'test 1' }]);
-    }));
-
-    it('should handle errors when performing search', fakeAsync(() => {
-        const command: InteractiveSearchCommand = {
-            setSelectWithSearchComponent: () => {},
-            performSearch: () => throwError(() => new HttpErrorResponse({ status: 400 })),
-            buttonIcon: faAt,
-            insertSelection: () => {},
-        } as any;
-
-        component.command = command;
-        fixture.detectChanges();
-
-        const alertSpy = jest.spyOn(alertService, 'error');
-
-        component.updateSearchTerm('test', true);
-        tick(1);
-
-        expect(alertSpy).toHaveBeenCalledOnce();
-    }));
-
-    it('should toggle menu when clicking button', () => {
-        // Find the menu button in the fixture
-        const menuButton = fixture.debugElement.nativeElement.querySelector('button.btn.btn-sm.py-0');
-
-        const commandExecuteSpy = jest.spyOn(component.command, 'execute');
-        const menuCloseSpy = jest.spyOn(component, 'close');
-
-        // Click button to open menu
-        menuButton.click();
-        fixture.detectChanges();
-
-        expect(commandExecuteSpy).toHaveBeenCalled();
-
-        // Click button to close menu
-        menuButton.click();
-        fixture.detectChanges();
-
-        expect(menuCloseSpy).toHaveBeenCalled();
-    });
-
-    it('should open and close the menu', () => {
-        const handleMenuOpenSpy = jest.spyOn(component, 'handleMenuOpen');
-        const handleMenuClosedSpy = jest.spyOn(component, 'handleMenuClosed');
-
-        // Click button to open menu
-        component.open();
-        fixture.detectChanges();
-
-        // Assert that the handleMenuOpen method was called
-        expect(handleMenuOpenSpy).toHaveBeenCalledOnce();
-        expect(component.dropdown.isOpen()).toBeTrue();
-
-        // Click button to close menu
-        component.close();
-        fixture.detectChanges();
-
-        // Assert that the handleMenuClosed method was called
-        expect(handleMenuClosedSpy).toHaveBeenCalledOnce();
-        expect(component.dropdown.isOpen()).toBeFalse();
-    });
-
-    it('should set the selectedValue and close the menu when calling setSelection', () => {
-        // Simulate some values in the component
-        component.values = [{ name: 'Item 1' }, { name: 'Item 2' }];
-        fixture.detectChanges();
-
-        component.setSelection({ name: 'Item 1' });
-
-        expect(component.selectedValue).toEqual({ name: 'Item 1' });
-        expect(component.dropdown.isOpen()).toBeFalse();
-    });
-
-    it('searchTerm updates on changes', () => {
-        component.editorContentString = 'test';
-        fixture.detectChanges();
-
-        const updateSearchTermSpy = jest.spyOn(component.command, 'updateSearchTerm');
-
-        component.ngOnChanges({ editorContentString: {} as SimpleChange });
-
-        expect(updateSearchTermSpy).toHaveBeenCalledOnce();
-    });
-});
diff --git a/src/test/javascript/spec/component/team/team-update-dialog.component.spec.ts b/src/test/javascript/spec/component/team/team-update-dialog.component.spec.ts
index 7cc7027493d4..b3e76d5a92bb 100644
--- a/src/test/javascript/spec/component/team/team-update-dialog.component.spec.ts
+++ b/src/test/javascript/spec/component/team/team-update-dialog.component.spec.ts
@@ -1,4 +1,3 @@
-import * as ace from 'brace';
 import { ComponentFixture, TestBed, discardPeriodicTasks, fakeAsync, flush, tick } from '@angular/core/testing';
 import { DebugElement } from '@angular/core';
 import { ArtemisTestModule } from '../../test.module';
@@ -20,8 +19,6 @@ import { TeamStudentSearchComponent } from 'app/exercises/shared/team/team-stude
 import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 describe('TeamUpdateDialogComponent', () => {
-    // needed to make sure ace is defined
-    ace.acequire('ace/ext/modelist.js');
     let comp: TeamUpdateDialogComponent;
     let fixture: ComponentFixture<TeamUpdateDialogComponent>;
     let debugElement: DebugElement;
diff --git a/src/test/javascript/spec/component/team/teams.component.spec.ts b/src/test/javascript/spec/component/team/teams.component.spec.ts
index 7a38a8298731..b5a874b28243 100644
--- a/src/test/javascript/spec/component/team/teams.component.spec.ts
+++ b/src/test/javascript/spec/component/team/teams.component.spec.ts
@@ -1,4 +1,3 @@
-import * as ace from 'brace';
 import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { DebugElement } from '@angular/core';
 import { ArtemisTestModule } from '../../test.module';
@@ -27,9 +26,6 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { teamRoute } from 'app/exercises/shared/team/team.route';
 
 describe('TeamsComponent', () => {
-    // needed to make sure ace is defined
-    ace.acequire('ace/ext/modelist.js');
-
     let comp: TeamsComponent;
     let fixture: ComponentFixture<TeamsComponent>;
     let debugElement: DebugElement;
diff --git a/src/test/javascript/spec/component/text-editor/text-editor.component.spec.ts b/src/test/javascript/spec/component/text-editor/text-editor.component.spec.ts
index 653989626b68..6c60b40ad95e 100644
--- a/src/test/javascript/spec/component/text-editor/text-editor.component.spec.ts
+++ b/src/test/javascript/spec/component/text-editor/text-editor.component.spec.ts
@@ -1,4 +1,3 @@
-import * as ace from 'brace';
 import { DebugElement } from '@angular/core';
 import dayjs from 'dayjs/esm';
 import { ActivatedRoute, convertToParamMap } from '@angular/router';
@@ -44,9 +43,6 @@ import { ComplaintsStudentViewComponent } from 'app/complaints/complaints-for-st
 import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 describe('TextEditorComponent', () => {
-    // needed to make sure ace is defined
-    ace.acequire('ace/ext/modelist.js');
-
     let comp: TextEditorComponent;
     let fixture: ComponentFixture<TextEditorComponent>;
     let debugElement: DebugElement;
diff --git a/src/test/javascript/spec/service/guided-tour.service.spec.ts b/src/test/javascript/spec/service/guided-tour.service.spec.ts
index 04694f2919c5..fb7e9a1b9b0d 100644
--- a/src/test/javascript/spec/service/guided-tour.service.spec.ts
+++ b/src/test/javascript/spec/service/guided-tour.service.spec.ts
@@ -591,8 +591,8 @@ describe('GuidedTourService', () => {
                 guidedTourService.enableUserInteraction(htmlTarget, userInteractionEvent);
                 expect(querySelectorSpy).not.toHaveBeenCalled();
             }));
-            it('should enableUserInteraction with UserInteractionEvent.ACE_EDITOR', fakeAsync(() => {
-                const userInteractionEvent = UserInteractionEvent.ACE_EDITOR;
+            it('should enableUserInteraction with UserInteractionEvent.MONACO_EDITOR', fakeAsync(() => {
+                const userInteractionEvent = UserInteractionEvent.MONACO_EDITOR;
                 observeMutationsStub.mockReturnValue(of({ addedNodes: { length: 0 } as NodeList, removedNodes: { length: 0 } as NodeList } as MutationRecord));
                 guidedTourService.enableUserInteraction(htmlTarget, userInteractionEvent);
                 expect(querySelectorSpy).toHaveBeenCalledOnce();
diff --git a/src/test/playwright/support/pageobjects/assessment/ProgrammingExerciseAssessmentPage.ts b/src/test/playwright/support/pageobjects/assessment/ProgrammingExerciseAssessmentPage.ts
index 1e8725207c5d..e2085f6b5bc4 100644
--- a/src/test/playwright/support/pageobjects/assessment/ProgrammingExerciseAssessmentPage.ts
+++ b/src/test/playwright/support/pageobjects/assessment/ProgrammingExerciseAssessmentPage.ts
@@ -6,7 +6,7 @@ import { AbstractExerciseAssessmentPage } from './AbstractExerciseAssessmentPage
  */
 export class ProgrammingExerciseAssessmentPage extends AbstractExerciseAssessmentPage {
     async provideFeedbackOnCodeLine(lineIndex: number, points: number, feedback: string) {
-        // We can't change elements from the ace editor, so we can't use custom ids here
+        // We can't change elements from the Monaco editor, so we can't use custom ids here
         await this.page.locator('.view-line').nth(lineIndex).hover();
         await this.page.locator('.monaco-add-feedback-button').click();
         await this.typeIntoFeedbackEditor(feedback, lineIndex);

From 6e9b9560afb4b8d0212edd1c8d8781967bb02dac Mon Sep 17 00:00:00 2001
From: Florian Glombik <63976129+florian-glombik@users.noreply.github.com>
Date: Thu, 29 Aug 2024 17:45:44 +0200
Subject: [PATCH 10/15] General: Add filter for exercises (#8858)

---
 .../app/entities/exercise-category.model.ts   |  26 +-
 .../shared/exercise/exercise.service.ts       |   9 +-
 .../participation/participation.utils.ts      |   6 +-
 .../course-exercises.component.html           |   2 +-
 .../category-selector.component.ts            |  11 +-
 .../reset-repo-button.component.ts            |   3 +-
 .../date-time-picker.component.ts             |  13 +-
 ...tom-exercise-category-badge.component.html |  10 +
 ...tom-exercise-category-badge.component.scss |  18 +
 ...ustom-exercise-category-badge.component.ts |  23 ++
 .../exercise-categories.component.html        |   4 +-
 .../exercise-categories.module.ts             |   3 +-
 .../exercise-filter-modal.component.html      | 145 ++++++++
 .../exercise-filter-modal.component.scss      |  20 ++
 .../exercise-filter-modal.component.ts        | 231 ++++++++++++
 .../exercise-filter-modal.helper.ts           |  84 +++++
 .../range-slider/range-slider.component.html  |  32 ++
 .../range-slider/range-slider.component.scss  |  65 ++++
 .../range-slider/range-slider.component.ts    | 141 ++++++++
 .../sidebar-accordion.component.ts            |   8 +-
 .../app/shared/sidebar/sidebar.component.html |  19 +-
 .../app/shared/sidebar/sidebar.component.ts   |  67 +++-
 .../app/shared/sidebar/sidebar.helper.ts      | 269 ++++++++++++++
 .../statistics-graph/statistics.service.ts    |   6 +-
 src/main/webapp/app/shared/util/utils.ts      |  15 +
 src/main/webapp/app/types/exercise-filter.ts  |  43 +++
 src/main/webapp/i18n/de/exercise.json         |   1 +
 .../webapp/i18n/de/student-dashboard.json     |  14 +-
 src/main/webapp/i18n/en/exercise.json         |   1 +
 .../webapp/i18n/en/student-dashboard.json     |  14 +-
 .../course/course-exercises.component.spec.ts |   3 +-
 .../course/exercise-filter.model.spec.ts      |   6 +-
 ...ercise-page-with-details.component.spec.ts |   3 +-
 ...e-upload-exercise-update.component.spec.ts |   3 +-
 ...modeling-exercise-update.component.spec.ts |   9 +-
 .../course-exams.component.spec.ts            |   7 +-
 ...gramming-exercise-update.component.spec.ts |   2 +-
 .../quiz-exercise-update.component.spec.ts    |   9 +-
 .../component/range-slider.component.spec.ts  |  69 ++++
 .../exercise-filter-modal.component.spec.ts   | 259 ++++++++++++++
 .../exercise-filter-modal.helper.spec.ts      | 333 ++++++++++++++++++
 .../sidebar-accordion.component.spec.ts       |  18 +-
 .../shared/sidebar/sidebar.component.spec.ts  | 160 ++++++++-
 .../shared/sidebar/sidebar.helper.spec.ts     | 329 +++++++++++++++++
 ...tics-average-score-graph.component.spec.ts |  11 +-
 .../text-exercise-update.component.spec.ts    |   3 +-
 .../course-tutorial-groups.component.spec.ts  |   5 +-
 .../entities/exercise-category.model.spec.ts  |  49 +++
 .../service/modeling-exercise.service.spec.ts |   4 +-
 .../javascript/spec/util/shared/utils.spec.ts |  23 ++
 50 files changed, 2518 insertions(+), 90 deletions(-)
 create mode 100644 src/main/webapp/app/shared/exercise-categories/custom-exercise-category-badge/custom-exercise-category-badge.component.html
 create mode 100644 src/main/webapp/app/shared/exercise-categories/custom-exercise-category-badge/custom-exercise-category-badge.component.scss
 create mode 100644 src/main/webapp/app/shared/exercise-categories/custom-exercise-category-badge/custom-exercise-category-badge.component.ts
 create mode 100644 src/main/webapp/app/shared/exercise-filter/exercise-filter-modal.component.html
 create mode 100644 src/main/webapp/app/shared/exercise-filter/exercise-filter-modal.component.scss
 create mode 100644 src/main/webapp/app/shared/exercise-filter/exercise-filter-modal.component.ts
 create mode 100644 src/main/webapp/app/shared/exercise-filter/exercise-filter-modal.helper.ts
 create mode 100644 src/main/webapp/app/shared/range-slider/range-slider.component.html
 create mode 100644 src/main/webapp/app/shared/range-slider/range-slider.component.scss
 create mode 100644 src/main/webapp/app/shared/range-slider/range-slider.component.ts
 create mode 100644 src/main/webapp/app/shared/sidebar/sidebar.helper.ts
 create mode 100644 src/main/webapp/app/types/exercise-filter.ts
 create mode 100644 src/test/javascript/spec/component/range-slider.component.spec.ts
 create mode 100644 src/test/javascript/spec/component/shared/exercise-filter/exercise-filter-modal.component.spec.ts
 create mode 100644 src/test/javascript/spec/component/shared/exercise-filter/exercise-filter-modal.helper.spec.ts
 create mode 100644 src/test/javascript/spec/component/shared/sidebar/sidebar.helper.spec.ts
 create mode 100644 src/test/javascript/spec/entities/exercise-category.model.spec.ts

diff --git a/src/main/webapp/app/entities/exercise-category.model.ts b/src/main/webapp/app/entities/exercise-category.model.ts
index bc134d0b7f29..68f09c914d2d 100644
--- a/src/main/webapp/app/entities/exercise-category.model.ts
+++ b/src/main/webapp/app/entities/exercise-category.model.ts
@@ -1,6 +1,30 @@
 export class ExerciseCategory {
     public color?: string;
+
+    // TODO should be renamed to "name" -> accessing variable via "category.name" instead of "category.category" - requires database migration (stored as json in database, see the table "exercise_categories")
     public category?: string;
 
-    constructor() {}
+    constructor(category: string | undefined, color: string | undefined) {
+        this.color = color;
+        this.category = category;
+    }
+
+    equals(otherExerciseCategory: ExerciseCategory): boolean {
+        return this.color === otherExerciseCategory.color && this.category === otherExerciseCategory.category;
+    }
+
+    /**
+     * @param otherExerciseCategory
+     * @returns the alphanumerical order of the two exercise categories based on their display text
+     */
+    compare(otherExerciseCategory: ExerciseCategory): number {
+        if (this.category === otherExerciseCategory.category) {
+            return 0;
+        }
+
+        const displayText = this.category?.toLowerCase() ?? '';
+        const otherCategoryDisplayText = otherExerciseCategory.category?.toLowerCase() ?? '';
+
+        return displayText < otherCategoryDisplayText ? -1 : 1;
+    }
 }
diff --git a/src/main/webapp/app/exercises/shared/exercise/exercise.service.ts b/src/main/webapp/app/exercises/shared/exercise/exercise.service.ts
index dffb26604cc7..50c2227751e3 100644
--- a/src/main/webapp/app/exercises/shared/exercise/exercise.service.ts
+++ b/src/main/webapp/app/exercises/shared/exercise/exercise.service.ts
@@ -347,7 +347,7 @@ export class ExerciseService {
      * @param exercise the exercise
      */
     static stringifyExerciseCategories(exercise: Exercise) {
-        return exercise.categories?.map((category) => JSON.stringify(category) as ExerciseCategory);
+        return exercise.categories?.map((category) => JSON.stringify(category) as unknown as ExerciseCategory);
     }
 
     /**
@@ -362,12 +362,15 @@ export class ExerciseService {
     }
 
     /**
-     * Parses the exercise categories JSON string into ExerciseCategory objects.
+     * Parses the exercise categories JSON string into {@link ExerciseCategory} objects.
      * @param exercise - the exercise
      */
     static parseExerciseCategories(exercise?: Exercise) {
         if (exercise?.categories) {
-            exercise.categories = exercise.categories.map((category) => JSON.parse(category as string) as ExerciseCategory);
+            exercise.categories = exercise.categories.map((category) => {
+                const categoryObj = JSON.parse(category as unknown as string);
+                return new ExerciseCategory(categoryObj.category, categoryObj.color);
+            });
         }
     }
 
diff --git a/src/main/webapp/app/exercises/shared/participation/participation.utils.ts b/src/main/webapp/app/exercises/shared/participation/participation.utils.ts
index 7c7a99d3830c..5fc349f22b27 100644
--- a/src/main/webapp/app/exercises/shared/participation/participation.utils.ts
+++ b/src/main/webapp/app/exercises/shared/participation/participation.utils.ts
@@ -102,7 +102,11 @@ export const isParticipationInDueTime = (participation: Participation, exercise:
  * @param participation
  * @param showUngradedResults
  */
-export function getLatestResultOfStudentParticipation(participation: StudentParticipation, showUngradedResults: boolean): Result | undefined {
+export function getLatestResultOfStudentParticipation(participation: StudentParticipation | undefined, showUngradedResults: boolean): Result | undefined {
+    if (!participation) {
+        return undefined;
+    }
+
     // Sort participation results by completionDate desc.
     if (participation.results) {
         participation.results = _orderBy(participation.results, 'completionDate', 'desc');
diff --git a/src/main/webapp/app/overview/course-exercises/course-exercises.component.html b/src/main/webapp/app/overview/course-exercises/course-exercises.component.html
index 2de6ec14a991..6be118bf7475 100644
--- a/src/main/webapp/app/overview/course-exercises/course-exercises.component.html
+++ b/src/main/webapp/app/overview/course-exercises/course-exercises.component.html
@@ -1,7 +1,7 @@
 <div class="d-flex justify-content-between gap-3 horizontal-scroll">
     @if (course) {
         <div [ngClass]="{ 'sidebar-collapsed': isCollapsed }">
-            <jhi-sidebar [itemSelected]="exerciseSelected" [courseId]="courseId" [sidebarData]="sidebarData" [collapseState]="DEFAULT_COLLAPSE_STATE" />
+            <jhi-sidebar [itemSelected]="exerciseSelected" [courseId]="courseId" [sidebarData]="sidebarData" [collapseState]="DEFAULT_COLLAPSE_STATE" [showFilter]="true" />
         </div>
 
         @if (exerciseSelected) {
diff --git a/src/main/webapp/app/shared/category-selector/category-selector.component.ts b/src/main/webapp/app/shared/category-selector/category-selector.component.ts
index 03b24cac6ca1..d899a7b034b3 100644
--- a/src/main/webapp/app/shared/category-selector/category-selector.component.ts
+++ b/src/main/webapp/app/shared/category-selector/category-selector.component.ts
@@ -1,13 +1,12 @@
 import { Component, ElementRef, EventEmitter, Input, OnChanges, Output, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ColorSelectorComponent } from 'app/shared/color-selector/color-selector.component';
 import { ExerciseCategory } from 'app/entities/exercise-category.model';
-import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { MatAutocompleteSelectedEvent, MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import { COMMA, ENTER, TAB } from '@angular/cdk/keycodes';
 import { FormControl } from '@angular/forms';
 import { MatChipInputEvent } from '@angular/material/chips';
 import { Observable, map, startWith } from 'rxjs';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
-import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
 
 const DEFAULT_COLORS = ['#6ae8ac', '#9dca53', '#94a11c', '#691b0b', '#ad5658', '#1b97ca', '#0d3cc2', '#0ab84f'];
 
@@ -44,8 +43,7 @@ export class CategorySelectorComponent implements OnChanges {
     separatorKeysCodes = [ENTER, COMMA, TAB];
     categoryCtrl = new FormControl<string | undefined>(undefined);
 
-    // Icons
-    faTimes = faTimes;
+    readonly faTimes = faTimes;
 
     ngOnChanges() {
         this.uniqueCategoriesForAutocomplete = this.categoryCtrl.valueChanges.pipe(
@@ -134,10 +132,7 @@ export class CategorySelectorComponent implements OnChanges {
     }
 
     private createCategory(categoryString: string): ExerciseCategory {
-        const category = new ExerciseCategory();
-        category.category = categoryString;
-        category.color = this.chooseRandomColor();
-        return category;
+        return new ExerciseCategory(categoryString, this.chooseRandomColor());
     }
 
     private chooseRandomColor(): string {
diff --git a/src/main/webapp/app/shared/components/reset-repo-button/reset-repo-button.component.ts b/src/main/webapp/app/shared/components/reset-repo-button/reset-repo-button.component.ts
index c939dad8cb00..b196fd1d3df3 100644
--- a/src/main/webapp/app/shared/components/reset-repo-button/reset-repo-button.component.ts
+++ b/src/main/webapp/app/shared/components/reset-repo-button/reset-repo-button.component.ts
@@ -29,8 +29,7 @@ export class ResetRepoButtonComponent implements OnInit {
 
     beforeIndividualDueDate: boolean;
 
-    // Icons
-    faBackward = faBackward;
+    readonly faBackward = faBackward;
 
     constructor(
         private participationService: ParticipationService,
diff --git a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts
index 320817cfedc0..58196f94f02d 100644
--- a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts
+++ b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts
@@ -24,18 +24,17 @@ export class FormDateTimePickerComponent implements ControlValueAccessor {
     @Input() error: boolean;
     @Input() warning: boolean;
     @Input() requiredField: boolean = false;
-    @Input() startAt?: dayjs.Dayjs; // Default selected date. By default this sets it to the current time without seconds or milliseconds;
+    @Input() startAt?: dayjs.Dayjs; // Default selected date. By default, this sets it to the current time without seconds or milliseconds;
     @Input() min?: dayjs.Dayjs; // Dates before this date are not selectable.
     @Input() max?: dayjs.Dayjs; // Dates after this date are not selectable.
     @Input() shouldDisplayTimeZoneWarning = true; // Displays a warning that the current time zone might differ from the participants'.
     @Output() valueChange = new EventEmitter();
 
-    // Icons
-    faCalendarAlt = faCalendarAlt;
-    faGlobe = faGlobe;
-    faClock = faClock;
-    faQuestionCircle = faQuestionCircle;
-    faCircleXmark = faCircleXmark;
+    readonly faCalendarAlt = faCalendarAlt;
+    readonly faGlobe = faGlobe;
+    readonly faClock = faClock;
+    readonly faQuestionCircle = faQuestionCircle;
+    readonly faCircleXmark = faCircleXmark;
     readonly faTriangleExclamation = faTriangleExclamation;
 
     private onChange?: (val?: dayjs.Dayjs) => void;
diff --git a/src/main/webapp/app/shared/exercise-categories/custom-exercise-category-badge/custom-exercise-category-badge.component.html b/src/main/webapp/app/shared/exercise-categories/custom-exercise-category-badge/custom-exercise-category-badge.component.html
new file mode 100644
index 000000000000..eec73d5844e4
--- /dev/null
+++ b/src/main/webapp/app/shared/exercise-categories/custom-exercise-category-badge/custom-exercise-category-badge.component.html
@@ -0,0 +1,10 @@
+<h4 class="fw-medium">
+    <div class="badge me-1" [ngStyle]="{ backgroundColor: category.color }" [ngClass]="'category-' + fontSize">
+        {{ category.category }}
+        @if (displayRemoveButton) {
+            <button class="remove-button" (click)="onClick()">
+                <fa-icon [icon]="faTimes" class="category-chip-remove" />
+            </button>
+        }
+    </div>
+</h4>
diff --git a/src/main/webapp/app/shared/exercise-categories/custom-exercise-category-badge/custom-exercise-category-badge.component.scss b/src/main/webapp/app/shared/exercise-categories/custom-exercise-category-badge/custom-exercise-category-badge.component.scss
new file mode 100644
index 000000000000..43a2d70cca34
--- /dev/null
+++ b/src/main/webapp/app/shared/exercise-categories/custom-exercise-category-badge/custom-exercise-category-badge.component.scss
@@ -0,0 +1,18 @@
+.remove-button {
+    color: var(--white);
+    background: transparent !important;
+    border: none !important;
+
+    &:hover {
+        opacity: 0.8;
+    }
+}
+
+/** category options should be consistent with the type CategoryFontSize */
+.category-small {
+    font-size: 0.85rem;
+}
+
+.category-default {
+    font-size: 1rem;
+}
diff --git a/src/main/webapp/app/shared/exercise-categories/custom-exercise-category-badge/custom-exercise-category-badge.component.ts b/src/main/webapp/app/shared/exercise-categories/custom-exercise-category-badge/custom-exercise-category-badge.component.ts
new file mode 100644
index 000000000000..8ba41f96ba8b
--- /dev/null
+++ b/src/main/webapp/app/shared/exercise-categories/custom-exercise-category-badge/custom-exercise-category-badge.component.ts
@@ -0,0 +1,23 @@
+import { Component, Input } from '@angular/core';
+import type { ExerciseCategory } from 'app/entities/exercise-category.model';
+import { CommonModule } from '@angular/common';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+
+type CategoryFontSize = 'default' | 'small';
+
+@Component({
+    selector: 'jhi-custom-exercise-category-badge',
+    templateUrl: './custom-exercise-category-badge.component.html',
+    styleUrls: ['custom-exercise-category-badge.component.scss'],
+    standalone: true,
+    imports: [CommonModule, FontAwesomeModule],
+})
+export class CustomExerciseCategoryBadgeComponent {
+    protected readonly faTimes = faTimes;
+
+    @Input({ required: true }) category: ExerciseCategory;
+    @Input() displayRemoveButton: boolean = false;
+    @Input() onClick: () => void = () => {};
+    @Input() fontSize: CategoryFontSize = 'default';
+}
diff --git a/src/main/webapp/app/shared/exercise-categories/exercise-categories.component.html b/src/main/webapp/app/shared/exercise-categories/exercise-categories.component.html
index dd757a2d5b36..f811a3f4c4e7 100644
--- a/src/main/webapp/app/shared/exercise-categories/exercise-categories.component.html
+++ b/src/main/webapp/app/shared/exercise-categories/exercise-categories.component.html
@@ -11,9 +11,7 @@ <h4 class="fw-medium">
     </h4>
 }
 @for (category of exercise.categories; track category) {
-    <h4 class="fw-medium">
-        <span class="badge" [ngStyle]="{ backgroundColor: category.color }">{{ category.category }}</span>
-    </h4>
+    <jhi-custom-exercise-category-badge [category]="category" />
 }
 @if (exercise.difficulty && showTags.difficulty) {
     <h4 class="fw-medium">
diff --git a/src/main/webapp/app/shared/exercise-categories/exercise-categories.module.ts b/src/main/webapp/app/shared/exercise-categories/exercise-categories.module.ts
index f56611d32021..f0f8877ffdec 100644
--- a/src/main/webapp/app/shared/exercise-categories/exercise-categories.module.ts
+++ b/src/main/webapp/app/shared/exercise-categories/exercise-categories.module.ts
@@ -3,9 +3,10 @@ import { RouterModule } from '@angular/router';
 import { ArtemisSharedModule } from 'app/shared/shared.module';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
 import { ExerciseCategoriesComponent } from 'app/shared/exercise-categories/exercise-categories.component';
+import { CustomExerciseCategoryBadgeComponent } from 'app/shared/exercise-categories/custom-exercise-category-badge/custom-exercise-category-badge.component';
 
 @NgModule({
-    imports: [ArtemisSharedModule, RouterModule, ArtemisSharedComponentModule],
+    imports: [ArtemisSharedModule, RouterModule, ArtemisSharedComponentModule, CustomExerciseCategoryBadgeComponent],
     declarations: [ExerciseCategoriesComponent],
     exports: [ExerciseCategoriesComponent],
 })
diff --git a/src/main/webapp/app/shared/exercise-filter/exercise-filter-modal.component.html b/src/main/webapp/app/shared/exercise-filter/exercise-filter-modal.component.html
new file mode 100644
index 000000000000..1a87237a4d46
--- /dev/null
+++ b/src/main/webapp/app/shared/exercise-filter/exercise-filter-modal.component.html
@@ -0,0 +1,145 @@
+<form name="exerciseFilterForm" (ngSubmit)="applyFilter()">
+    <div class="modal-header">
+        <h4 class="modal-title">
+            <fa-icon [icon]="faFilter" />
+            <span jhiTranslate="artemisApp.courseOverview.exerciseFilter.modalTitle"></span>
+        </h4>
+        <button type="button" class="btn-close" (click)="closeModal()"></button>
+    </div>
+    <div class="modal-body">
+        <div class="form-group">
+            @if (noFiltersAvailable) {
+                <div>
+                    <span jhiTranslate="artemisApp.courseOverview.exerciseFilter.noFilterAvailable"></span>
+                </div>
+            }
+
+            @if (selectableCategoryOptions.length || selectedCategoryOptions.length) {
+                <label for="exercise-categories-filter-selection" class="form-control-label h6" jhiTranslate="artemisApp.exercise.categories"></label>
+
+                <input
+                    id="exercise-categories-filter-selection"
+                    type="text"
+                    class="form-control mb-2"
+                    name="category-filter-selection"
+                    [(ngModel)]="model"
+                    [ngbTypeahead]="search"
+                    [placeholder]="
+                        (!selectableCategoryOptions.length ? 'artemisApp.courseOverview.exerciseFilter.noMoreOptions' : 'artemisApp.exercise.selectCategories') | artemisTranslate
+                    "
+                    (focus)="focus$.next($any($event).target.value)"
+                    (click)="click$.next($any($event).target.value)"
+                    #categoriesFilterSelection="ngbTypeahead"
+                    (selectItem)="onSelectItem($event)"
+                    [resultFormatter]="resultFormatter"
+                    (keydown.enter)="onSelectItem($event)"
+                    [disabled]="!selectableCategoryOptions.length"
+                />
+
+                <div class="row">
+                    <div class="d-flex flex-row flex-wrap">
+                        @for (categoryFilterOption of selectedCategoryOptions; track categoryFilterOption) {
+                            <div class="p-1">
+                                <jhi-custom-exercise-category-badge
+                                    [category]="categoryFilterOption.category"
+                                    [displayRemoveButton]="true"
+                                    [onClick]="removeItem(categoryFilterOption)"
+                                    [fontSize]="'small'"
+                                />
+                            </div>
+                        }
+                    </div>
+                </div>
+            }
+        </div>
+
+        @if (typeFilter?.isDisplayed) {
+            <div class="form-group">
+                <label for="exercise-type-filter-selection" class="form-control-label h6" jhiTranslate="artemisApp.ratingList.exerciseType"></label>
+                <div id="exercise-type-filter-selection">
+                    @for (typeFilter of typeFilter!.options; track typeFilter) {
+                        <div class="form-check form-check-inline no-left-margin-padding">
+                            <label class="pointer">
+                                <input type="checkbox" [(ngModel)]="typeFilter.checked" [name]="typeFilter.value" class="pointer" />
+                                <fa-icon [icon]="typeFilter.icon" class="ms-2" />
+                                <span [jhiTranslate]="typeFilter.name" class="ms-1"></span>
+                            </label>
+                        </div>
+                    }
+                </div>
+            </div>
+        }
+
+        <!--        <div class="form-group">-->
+        <!--            <label class="form-control-label h6" jhiTranslate="artemisApp.courseOverview.exerciseFilter.dueDateRange"> </label>-->
+        <!--            TODO: Implement Date Range Picker (follow up PR @FlorianGlombik)-->
+        <!--        </div>-->
+
+        <!--    On typescript version 5.5.4 the explicit check for difficultyFilter is needed,
+        as otherwise typescript thinks it could be undefined in the loop (the client would not start in this case) -->
+        @if (difficultyFilter?.isDisplayed && difficultyFilter) {
+            <div class="form-group">
+                <label for="difficulty-filter-selection" class="form-control-label h6" jhiTranslate="artemisApp.exercise.difficulty"></label>
+                <div id="difficulty-filter-selection">
+                    @for (difficultyFilterOption of difficultyFilter.options; track difficultyFilterOption) {
+                        <div class="form-check form-check-inline no-left-margin-padding">
+                            <label class="pointer">
+                                <input type="checkbox" [(ngModel)]="difficultyFilterOption.checked" [name]="difficultyFilterOption.value" class="pointer" />
+                                <span [jhiTranslate]="difficultyFilterOption.name" class="ms-1"></span>
+                            </label>
+                        </div>
+                    }
+                </div>
+            </div>
+        }
+
+        <!--    On typescript version 5.5.4 the explicit check for achievedScore is needed,
+        as otherwise typescript thinks achievedScore could be undefined (the client would not start in this case) -->
+        @if (achievedScore && achievedScore?.isDisplayed) {
+            <div class="form-group">
+                <label class="form-control-label h6" for="achieved-score-range-slider" jhiTranslate="artemisApp.courseOverview.exerciseFilter.achievedScore"></label>
+                <jhi-range-slider
+                    id="achieved-score-range-slider"
+                    [generalMinValue]="achievedScore.filter.generalMin"
+                    [generalMaxValue]="achievedScore.filter.generalMax"
+                    [(selectedMinValue)]="achievedScore.filter.selectedMin"
+                    [(selectedMaxValue)]="achievedScore.filter.selectedMax"
+                    [step]="achievedScore.filter.step"
+                    [labelSymbol]="'%'"
+                />
+            </div>
+        }
+
+        <!--    On typescript version 5.5.4 the explicit check for achievablePoints is needed,
+        as otherwise typescript thinks achievablePoints could be undefined (the client would not start in this case) -->
+        @if (achievablePoints && achievablePoints.isDisplayed) {
+            <div class="form-group">
+                <label class="form-control-label h6" for="achieved-points-range-slider" jhiTranslate="artemisApp.courseOverview.exerciseFilter.achievablePoints"></label>
+                <jhi-range-slider
+                    id="achieved-points-range-slider"
+                    [generalMinValue]="achievablePoints.filter.generalMin"
+                    [generalMaxValue]="achievablePoints.filter.generalMax"
+                    [(selectedMinValue)]="achievablePoints.filter.selectedMin"
+                    [(selectedMaxValue)]="achievablePoints.filter.selectedMax"
+                    [step]="achievablePoints.filter.step"
+                />
+            </div>
+        }
+    </div>
+    <div class="modal-footer">
+        <button type="button" class="btn btn-outline-secondary" (click)="clearFilter()">
+            <span jhiTranslate="artemisApp.courseOverview.exerciseFilter.clearFilter"></span>
+        </button>
+
+        <div class="ms-auto">
+            <button type="button" class="btn btn-secondary" (click)="closeModal()" jhiTranslate="entity.action.cancel" aria-label="Close"></button>
+            <button
+                type="button"
+                class="btn btn-primary"
+                (click)="applyFilter()"
+                jhiTranslate="artemisApp.courseOverview.exerciseFilter.applyFilter"
+                [disabled]="noFiltersAvailable"
+            ></button>
+        </div>
+    </div>
+</form>
diff --git a/src/main/webapp/app/shared/exercise-filter/exercise-filter-modal.component.scss b/src/main/webapp/app/shared/exercise-filter/exercise-filter-modal.component.scss
new file mode 100644
index 000000000000..c2db4383039b
--- /dev/null
+++ b/src/main/webapp/app/shared/exercise-filter/exercise-filter-modal.component.scss
@@ -0,0 +1,20 @@
+/*
+ensures that the category dropdown selection does not overflow the screen to the bottom
+(instead a scrollbar will be displayed)
+ */
+:host ::ng-deep ngb-typeahead-window.dropdown-menu {
+    max-height: 25rem;
+    overflow-y: auto;
+}
+
+/* align the first checkbox to the left */
+.no-left-margin-padding:first-child {
+    margin-left: 0;
+    padding-left: 0;
+}
+
+/* otherwise the dropdown changes the color on hover if no further options can be selected */
+.form-control:disabled,
+.form-control[disabled] {
+    pointer-events: none;
+}
diff --git a/src/main/webapp/app/shared/exercise-filter/exercise-filter-modal.component.ts b/src/main/webapp/app/shared/exercise-filter/exercise-filter-modal.component.ts
new file mode 100644
index 000000000000..8b1bf7c58488
--- /dev/null
+++ b/src/main/webapp/app/shared/exercise-filter/exercise-filter-modal.component.ts
@@ -0,0 +1,231 @@
+import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
+import { NgbActiveModal, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
+import { faBackward, faFilter } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { ArtemisSharedCommonModule } from 'app/shared/shared-common.module';
+import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
+import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { SidebarCardElement, SidebarData } from 'app/types/sidebar';
+import { Observable, OperatorFunction, Subject, merge } from 'rxjs';
+import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs/operators';
+import { CustomExerciseCategoryBadgeComponent } from 'app/shared/exercise-categories/custom-exercise-category-badge/custom-exercise-category-badge.component';
+import { RangeSliderComponent } from 'app/shared/range-slider/range-slider.component';
+import {
+    DifficultyFilterOption,
+    ExerciseCategoryFilterOption,
+    ExerciseFilterOptions,
+    ExerciseFilterResults,
+    ExerciseTypeFilterOption,
+    FilterDetails,
+    FilterOption,
+    RangeFilter,
+} from 'app/types/exercise-filter';
+import { satisfiesFilters } from 'app/shared/exercise-filter/exercise-filter-modal.helper';
+import { DifficultyLevel, ExerciseType } from 'app/entities/exercise.model';
+import { ExerciseCategory } from 'app/entities/exercise-category.model';
+import { isRangeFilterApplied } from 'app/shared/sidebar/sidebar.helper';
+
+@Component({
+    selector: 'jhi-exercise-filter-modal',
+    templateUrl: './exercise-filter-modal.component.html',
+    styleUrls: ['./exercise-filter-modal.component.scss'],
+    standalone: true,
+    imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        FontAwesomeModule,
+        ArtemisSharedCommonModule,
+        ArtemisSharedComponentModule,
+        CustomExerciseCategoryBadgeComponent,
+        RangeSliderComponent,
+    ],
+})
+export class ExerciseFilterModalComponent implements OnInit {
+    readonly faFilter = faFilter;
+    readonly faBackward = faBackward;
+
+    @Output() filterApplied = new EventEmitter<ExerciseFilterResults>();
+
+    @ViewChild('categoriesFilterSelection', { static: false }) instance: NgbTypeahead;
+
+    selectedCategoryOptions: ExerciseCategoryFilterOption[] = [];
+    selectableCategoryOptions: ExerciseCategoryFilterOption[] = [];
+
+    noFiltersAvailable: boolean = false;
+
+    focus$ = new Subject<string>();
+    click$ = new Subject<string>();
+
+    form: FormGroup;
+
+    model?: string;
+
+    sidebarData?: SidebarData;
+
+    categoryFilter?: FilterOption<ExerciseCategoryFilterOption>;
+    typeFilter?: FilterOption<ExerciseTypeFilterOption>;
+    difficultyFilter?: FilterOption<DifficultyFilterOption>;
+    achievablePoints?: RangeFilter;
+    achievedScore?: RangeFilter;
+
+    exerciseFilters?: ExerciseFilterOptions;
+
+    constructor(private activeModal: NgbActiveModal) {}
+
+    ngOnInit() {
+        this.categoryFilter = this.exerciseFilters?.categoryFilter;
+        this.typeFilter = this.exerciseFilters?.exerciseTypesFilter;
+        this.difficultyFilter = this.exerciseFilters?.difficultyFilter;
+        this.achievablePoints = this.exerciseFilters?.achievablePoints;
+        this.achievedScore = this.exerciseFilters?.achievedScore;
+
+        this.noFiltersAvailable = !(
+            this.categoryFilter?.isDisplayed ||
+            this.typeFilter?.isDisplayed ||
+            this.difficultyFilter?.isDisplayed ||
+            this.achievedScore?.isDisplayed ||
+            this.achievablePoints?.isDisplayed
+        );
+
+        this.updateCategoryOptionsStates();
+    }
+
+    closeModal(): void {
+        this.activeModal.close();
+    }
+
+    search: OperatorFunction<string, readonly ExerciseCategoryFilterOption[]> = (text$: Observable<string>) => {
+        const debouncedText$ = text$.pipe(debounceTime(200), distinctUntilChanged());
+        const clicksWithClosedPopup$ = this.click$.pipe(filter(() => !this.instance.isPopupOpen()));
+        const inputFocus$ = this.focus$;
+
+        return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$).pipe(
+            map((term) =>
+                term === ''
+                    ? this.selectableCategoryOptions
+                    : this.selectableCategoryOptions.filter((categoryFilter: ExerciseCategoryFilterOption) => {
+                          if (categoryFilter.category.category !== undefined) {
+                              return categoryFilter.category.category?.toLowerCase().indexOf(term.toLowerCase()) > -1;
+                          }
+
+                          return false;
+                      }),
+            ),
+        );
+    };
+    resultFormatter = (exerciseCategory: ExerciseCategoryFilterOption) => exerciseCategory.category.category ?? '';
+
+    onSelectItem(event: any) {
+        const isEnterPressedForNotExistingItem = !event.item;
+        if (isEnterPressedForNotExistingItem) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+
+        event.preventDefault(); // otherwise clearing the input field will not work https://stackoverflow.com/questions/39783936/how-to-clear-the-typeahead-input-after-a-result-is-selected
+        const filterOption: ExerciseCategoryFilterOption = event.item;
+        filterOption.searched = true;
+        this.updateCategoryOptionsStates();
+        this.model = undefined; // Clear the input field after selection
+    }
+
+    removeItem(item: ExerciseCategoryFilterOption): () => void {
+        return () => {
+            item.searched = false;
+            this.updateCategoryOptionsStates();
+        };
+    }
+
+    applyFilter(): void {
+        if (!this.sidebarData?.groupedData) {
+            return;
+        }
+
+        const appliedFilterDetails = this.getAppliedFilterDetails();
+        for (const groupedDataKey in this.sidebarData.groupedData) {
+            this.sidebarData.groupedData[groupedDataKey].entityData = this.sidebarData.groupedData[groupedDataKey].entityData.filter((sidebarElement) =>
+                satisfiesFilters(sidebarElement, appliedFilterDetails),
+            );
+        }
+        this.sidebarData.ungroupedData = this.sidebarData.ungroupedData?.filter((sidebarElement: SidebarCardElement) => satisfiesFilters(sidebarElement, appliedFilterDetails));
+
+        this.filterApplied.emit({
+            filteredSidebarData: this.sidebarData,
+            appliedExerciseFilters: this.exerciseFilters,
+            isFilterActive: this.isFilterActive(appliedFilterDetails),
+        });
+
+        this.closeModal();
+    }
+
+    private getAppliedFilterDetails(): FilterDetails {
+        return {
+            searchedTypes: this.getSearchedTypes(),
+            selectedCategories: this.getSelectedCategories(),
+            searchedDifficulties: this.getSearchedDifficulties(),
+            isScoreFilterApplied: isRangeFilterApplied(this.achievedScore),
+            isPointsFilterApplied: isRangeFilterApplied(this.achievablePoints),
+            achievedScore: this.achievedScore,
+            achievablePoints: this.achievablePoints,
+        };
+    }
+
+    private getSearchedTypes(): ExerciseType[] | undefined {
+        return this.typeFilter?.options.filter((type) => type.checked).map((type) => type.value);
+    }
+
+    private getSelectedCategories(): ExerciseCategory[] {
+        return this.selectedCategoryOptions
+            .filter((categoryOption: ExerciseCategoryFilterOption) => categoryOption.searched)
+            .map((categoryOption: ExerciseCategoryFilterOption) => categoryOption.category);
+    }
+
+    private getSearchedDifficulties(): DifficultyLevel[] | undefined {
+        return this.difficultyFilter?.options.filter((difficulty) => difficulty.checked).map((difficulty) => difficulty.value);
+    }
+
+    private isFilterActive(filterDetails: FilterDetails): boolean {
+        return (
+            !!filterDetails.selectedCategories.length ||
+            !!filterDetails.searchedTypes?.length ||
+            !!filterDetails.searchedDifficulties?.length ||
+            filterDetails.isScoreFilterApplied ||
+            filterDetails.isPointsFilterApplied
+        );
+    }
+
+    clearFilter() {
+        this.categoryFilter?.options.forEach((categoryOption) => (categoryOption.searched = false));
+        this.typeFilter?.options.forEach((typeOption) => (typeOption.checked = false));
+        this.difficultyFilter?.options.forEach((difficultyOption) => (difficultyOption.checked = false));
+
+        this.resetRangeFilter(this.achievedScore);
+        this.resetRangeFilter(this.achievablePoints);
+
+        this.applyFilter();
+    }
+
+    private resetRangeFilter(rangeFilter?: RangeFilter) {
+        if (!rangeFilter?.filter) {
+            return;
+        }
+
+        const filter = rangeFilter.filter;
+        filter.selectedMin = filter.generalMin;
+        filter.selectedMax = filter.generalMax;
+    }
+
+    private updateCategoryOptionsStates() {
+        this.selectedCategoryOptions = this.getUpdatedSelectedCategoryOptions();
+        this.selectableCategoryOptions = this.getSelectableCategoryOptions();
+    }
+
+    private getUpdatedSelectedCategoryOptions(): ExerciseCategoryFilterOption[] {
+        return this.categoryFilter?.options.filter((categoryFilter) => categoryFilter.searched) ?? [];
+    }
+
+    private getSelectableCategoryOptions(): ExerciseCategoryFilterOption[] {
+        return this.categoryFilter?.options.filter((categoryFilter) => !categoryFilter.searched) ?? [];
+    }
+}
diff --git a/src/main/webapp/app/shared/exercise-filter/exercise-filter-modal.helper.ts b/src/main/webapp/app/shared/exercise-filter/exercise-filter-modal.helper.ts
new file mode 100644
index 000000000000..de922fce195d
--- /dev/null
+++ b/src/main/webapp/app/shared/exercise-filter/exercise-filter-modal.helper.ts
@@ -0,0 +1,84 @@
+import { SidebarCardElement } from 'app/types/sidebar';
+import { DifficultyLevel, ExerciseType } from 'app/entities/exercise.model';
+import { ExerciseCategory } from 'app/entities/exercise-category.model';
+import { FilterDetails, RangeFilter } from 'app/types/exercise-filter';
+import { getLatestResultOfStudentParticipation } from 'app/exercises/shared/participation/participation.utils';
+
+export function satisfiesDifficultyFilter(sidebarElement: SidebarCardElement, searchedDifficulties?: DifficultyLevel[]): boolean {
+    if (!searchedDifficulties?.length) {
+        return true;
+    }
+    if (!sidebarElement.difficulty) {
+        return false;
+    }
+
+    return searchedDifficulties.includes(sidebarElement.difficulty);
+}
+
+export function satisfiesTypeFilter(sidebarElement: SidebarCardElement, searchedTypes?: ExerciseType[]): boolean {
+    if (!searchedTypes?.length) {
+        return true;
+    }
+    if (!sidebarElement.exercise?.type) {
+        return false;
+    }
+
+    return searchedTypes.includes(sidebarElement.exercise.type);
+}
+
+export function satisfiesCategoryFilter(sidebarElement: SidebarCardElement, selectedCategories: ExerciseCategory[]): boolean {
+    if (!selectedCategories.length) {
+        return true;
+    }
+    if (!sidebarElement?.exercise?.categories) {
+        return false;
+    }
+
+    // noinspection UnnecessaryLocalVariableJS: not inlined because the variable name improves readability
+    const isAnyExerciseCategoryMatchingASelectedCategory = sidebarElement.exercise.categories.some((category) =>
+        selectedCategories.some((selectedCategory) => selectedCategory.equals(category)),
+    );
+    return isAnyExerciseCategoryMatchingASelectedCategory;
+}
+
+export function satisfiesScoreFilter(sidebarElement: SidebarCardElement, isFilterApplied: boolean, achievedScoreFilter?: RangeFilter): boolean {
+    if (!isFilterApplied || !achievedScoreFilter) {
+        return true;
+    }
+
+    const latestResult = getLatestResultOfStudentParticipation(sidebarElement.studentParticipation, true);
+    if (!latestResult?.score) {
+        return achievedScoreFilter.filter.selectedMin === 0;
+    }
+
+    const isScoreInSelectedMinRange = latestResult.score >= achievedScoreFilter.filter.selectedMin;
+    const isScoreInSelectedMaxRange = latestResult.score <= achievedScoreFilter.filter.selectedMax;
+
+    return isScoreInSelectedMinRange && isScoreInSelectedMaxRange;
+}
+
+export function satisfiesPointsFilter(sidebarElement: SidebarCardElement, isPointsFilterApplied: boolean, achievablePointsFilter?: RangeFilter): boolean {
+    if (!isPointsFilterApplied || !achievablePointsFilter) {
+        return true;
+    }
+
+    /** {@link Exercise.maxPoints} must be in the range 1 - 9999 */
+    if (!sidebarElement.exercise?.maxPoints) {
+        return false;
+    }
+
+    const isAchievablePointsInSelectedMinRange = sidebarElement.exercise.maxPoints >= achievablePointsFilter.filter.selectedMin;
+    const isAchievablePointsInSelectedMaxRange = sidebarElement.exercise.maxPoints <= achievablePointsFilter.filter.selectedMax;
+
+    return isAchievablePointsInSelectedMinRange && isAchievablePointsInSelectedMaxRange;
+}
+
+export function satisfiesFilters(sidebarElement: SidebarCardElement, filterDetails: FilterDetails) {
+    return (
+        satisfiesCategoryFilter(sidebarElement, filterDetails.selectedCategories) &&
+        satisfiesDifficultyFilter(sidebarElement, filterDetails.searchedDifficulties) &&
+        satisfiesTypeFilter(sidebarElement, filterDetails.searchedTypes) &&
+        satisfiesScoreFilter(sidebarElement, filterDetails.isScoreFilterApplied, filterDetails.achievedScore) &&
+        satisfiesPointsFilter(sidebarElement, filterDetails.isPointsFilterApplied, filterDetails.achievablePoints)
+    );
+}
diff --git a/src/main/webapp/app/shared/range-slider/range-slider.component.html b/src/main/webapp/app/shared/range-slider/range-slider.component.html
new file mode 100644
index 000000000000..cf6170502703
--- /dev/null
+++ b/src/main/webapp/app/shared/range-slider/range-slider.component.html
@@ -0,0 +1,32 @@
+<div class="slider m-2 mb-5">
+    <div class="range-input">
+        <div class="progress" [style.left.%]="sliderMinPercentage" [style.right.%]="sliderMaxPercentage"></div>
+        <span class="slider-value" [style.left.%]="sliderMinPercentage * SLIDER_THUMB_LABEL_POSITION_ADJUSTMENT_FACTOR" [style.margin-left]="LABEL_MARGIN + 'rem'"
+            >{{ selectedMinValue }}{{ labelSymbol }}</span
+        >
+        <span class="slider-value" [style.right.%]="sliderMaxPercentage * SLIDER_THUMB_LABEL_POSITION_ADJUSTMENT_FACTOR" [style.margin-right]="LABEL_MARGIN + 'rem'"
+            >{{ selectedMaxValue }}{{ labelSymbol }}</span
+        >
+
+        <input
+            type="range"
+            [min]="generalMinValue"
+            [max]="generalMaxValue"
+            [(ngModel)]="selectedMinValue"
+            class="range-min"
+            [step]="step"
+            (change)="onSelectedMinValueChanged($event)"
+            (input)="updateMinPercentage()"
+        />
+        <input
+            type="range"
+            [min]="generalMinValue"
+            [max]="generalMaxValue"
+            [(ngModel)]="selectedMaxValue"
+            class="range-max"
+            [step]="step"
+            (change)="onSelectedMaxValueChanged($event)"
+            (input)="updateMaxPercentage()"
+        />
+    </div>
+</div>
diff --git a/src/main/webapp/app/shared/range-slider/range-slider.component.scss b/src/main/webapp/app/shared/range-slider/range-slider.component.scss
new file mode 100644
index 000000000000..2342957d2e6d
--- /dev/null
+++ b/src/main/webapp/app/shared/range-slider/range-slider.component.scss
@@ -0,0 +1,65 @@
+$height: 0.5rem;
+$border-radius: 0.5rem;
+
+$slider-thumb-size: 1.2rem;
+$slider-thumb-border-radius: 50%;
+$slider-thumb-color: var(--primary);
+
+.slider {
+    height: $height;
+    border-radius: $border-radius;
+    background: var(--gray-400);
+}
+
+.slider .progress {
+    height: $height;
+    border-radius: $border-radius;
+    position: absolute;
+    background: var(--primary);
+}
+
+.range-input {
+    position: relative;
+}
+
+.range-input input {
+    height: $height;
+    position: absolute;
+    width: 100%;
+    background: none;
+    pointer-events: none;
+    -webkit-appearance: none;
+}
+
+/* Covers Chrome and Safari */
+[type='range']::-webkit-slider-thumb {
+    height: $slider-thumb-size;
+    width: $slider-thumb-size;
+    border-radius: $slider-thumb-border-radius;
+    background: $slider-thumb-color;
+    pointer-events: auto;
+    -webkit-appearance: none;
+    cursor: pointer;
+}
+
+/* covers Mozilla Firefox */
+[type='range']::-moz-range-thumb {
+    height: $slider-thumb-size;
+    width: $slider-thumb-size;
+    border-radius: $slider-thumb-border-radius;
+    background: $slider-thumb-color;
+    pointer-events: auto;
+    -moz-appearance: none;
+    cursor: pointer;
+}
+
+.slider-value {
+    position: absolute;
+    bottom: -2.2rem;
+    pointer-events: none; // we do not want to click the label but the range-thumb
+    color: var(--secondary);
+    text-align: center;
+    justify-content: center;
+    align-content: center;
+    display: flex;
+}
diff --git a/src/main/webapp/app/shared/range-slider/range-slider.component.ts b/src/main/webapp/app/shared/range-slider/range-slider.component.ts
new file mode 100644
index 000000000000..1082ee793ca3
--- /dev/null
+++ b/src/main/webapp/app/shared/range-slider/range-slider.component.ts
@@ -0,0 +1,141 @@
+import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+const DEFAULT_STEP = 1;
+
+@Component({
+    selector: 'jhi-range-slider',
+    templateUrl: './range-slider.component.html',
+    styleUrls: ['./range-slider.component.scss'],
+    standalone: true,
+    imports: [FormsModule, ReactiveFormsModule],
+})
+export class RangeSliderComponent implements OnInit, OnDestroy {
+    @Input() generalMaxValue: number;
+    @Input() generalMinValue: number;
+    @Input() step: number = DEFAULT_STEP;
+
+    /** When extending the supported label symbols you might have to adjust the logic for */
+    @Input() labelSymbol?: '%';
+
+    @Input() selectedMinValue: number;
+    @Input() selectedMaxValue: number;
+    @Output() selectedMinValueChange: EventEmitter<number> = new EventEmitter<number>();
+    @Output() selectedMaxValueChange: EventEmitter<number> = new EventEmitter<number>();
+
+    rangeInputElements?: NodeList;
+    eventListeners: { element: HTMLInputElement; listener: (event: Event) => void }[] = [];
+
+    sliderMinPercentage: number;
+    sliderMaxPercentage: number;
+
+    valueRange: number;
+
+    /** Ensures that the label is placed centered underneath the range thumb */
+    LABEL_MARGIN = 0.4;
+
+    /**
+     * By trial and error it was found out that the slider thumbs are moving on
+     * 97% of the width compared to the colored bar that is displayed between the two thumbs.
+     *
+     * This issue is resolved with this factor when multiplied to {@link sliderMinPercentage} and {@link sliderMaxPercentage}
+     * to calculate the position of the label, as it is not the exact same position as the thumbs.
+     *
+     * <i>
+     * To reproduce:
+     * If you inspect the progress bar in the initial state you will see that it is 100% wide and ends at the left end of
+     * the minimum range thumb.
+     * However, if you move the minimum thumb to the right (as far as possible), you will notice that the progress bar
+     * ends at the right end of the range thumb. - This is the problem that we address with this factor.</i>
+     */
+    SLIDER_THUMB_LABEL_POSITION_ADJUSTMENT_FACTOR = 0.97;
+
+    constructor(private elRef: ElementRef) {}
+
+    ngOnInit() {
+        this.rangeInputElements = this.elRef.nativeElement.querySelectorAll('.range-input input');
+
+        this.rangeInputElements?.forEach((input: HTMLInputElement) => {
+            const listener = (event: InputEvent) => {
+                this.ensureMinValueIsSmallerThanMaxValueViceVersa(event);
+            };
+            input.addEventListener('input', listener);
+            this.eventListeners.push({ element: input, listener });
+        });
+        this.valueRange = this.generalMaxValue - this.generalMinValue;
+
+        this.LABEL_MARGIN = this.getLabelMargin();
+
+        this.updateMinPercentage();
+        this.updateMaxPercentage();
+    }
+
+    ngOnDestroy() {
+        this.eventListeners.forEach(({ element, listener }) => {
+            element.removeEventListener('input', listener);
+        });
+    }
+
+    updateMinPercentage() {
+        let newMinSelection = this.selectedMinValue;
+
+        const tryingToSelectInvalidValue = this.selectedMinValue >= this.selectedMaxValue;
+        if (tryingToSelectInvalidValue) {
+            newMinSelection = this.selectedMaxValue - this.step;
+        }
+
+        // noinspection UnnecessaryLocalVariableJS: not inlined because the variable name improves readability
+        const newMinPercentage = ((newMinSelection - this.generalMinValue) / this.valueRange) * 100;
+        this.sliderMinPercentage = newMinPercentage;
+    }
+
+    updateMaxPercentage() {
+        let newMaxSelection = this.selectedMaxValue;
+
+        const tryingToSelectInvalidValue = this.selectedMaxValue <= this.selectedMinValue;
+        if (tryingToSelectInvalidValue) {
+            newMaxSelection = this.selectedMinValue + this.step;
+        }
+
+        // noinspection UnnecessaryLocalVariableJS: not inlined because the variable name improves readability
+        const newMaxPercentage = 100 - ((newMaxSelection - this.generalMinValue) / this.valueRange) * 100;
+        this.sliderMaxPercentage = newMaxPercentage;
+    }
+
+    onSelectedMinValueChanged(event: Event): void {
+        const updatedMinValue = this.ensureMinValueIsSmallerThanMaxValueViceVersa(event);
+        this.selectedMinValueChange.emit(updatedMinValue);
+    }
+
+    onSelectedMaxValueChanged(event: Event): void {
+        const updatedMaxValue = this.ensureMinValueIsSmallerThanMaxValueViceVersa(event);
+        this.selectedMaxValueChange.emit(updatedMaxValue);
+    }
+
+    private ensureMinValueIsSmallerThanMaxValueViceVersa(event: Event): number {
+        const input = event.target as HTMLInputElement;
+        const minSliderIsUpdated = input.className.includes('range-min');
+
+        if (minSliderIsUpdated) {
+            if (this.selectedMinValue >= this.selectedMaxValue) {
+                this.selectedMinValue = this.selectedMaxValue - this.step;
+            }
+            return this.selectedMinValue;
+        }
+
+        if (this.selectedMaxValue <= this.selectedMinValue) {
+            this.selectedMaxValue = this.selectedMinValue + this.step;
+        }
+        return this.selectedMaxValue;
+    }
+
+    /**
+     * @return margin to labels considering the adjustments needed by the added {@link labelSymbol}
+     */
+    private getLabelMargin() {
+        const BASE_LABEL_MARGIN = 0.4; // should be approximately the width of 1 symbol
+        const shiftToTheLeftDueToAddedSymbols = BASE_LABEL_MARGIN * (this.labelSymbol?.length ?? 0);
+
+        return BASE_LABEL_MARGIN - shiftToTheLeftDueToAddedSymbols;
+    }
+}
diff --git a/src/main/webapp/app/shared/sidebar/sidebar-accordion/sidebar-accordion.component.ts b/src/main/webapp/app/shared/sidebar/sidebar-accordion/sidebar-accordion.component.ts
index 5fef73b00b99..5cd59c0d3b8e 100644
--- a/src/main/webapp/app/shared/sidebar/sidebar-accordion/sidebar-accordion.component.ts
+++ b/src/main/webapp/app/shared/sidebar/sidebar-accordion/sidebar-accordion.component.ts
@@ -24,10 +24,10 @@ export class SidebarAccordionComponent implements OnChanges, OnInit {
     @Input() showAddOption?: ChannelAccordionShowAdd;
     @Input() channelTypeIcon?: ChannelTypeIcons;
     @Input() collapseState: CollapseState;
+    @Input() isFilterActive: boolean = false;
 
-    //icon
-    faChevronRight = faChevronRight;
-    faFile = faFile;
+    readonly faChevronRight = faChevronRight;
+    readonly faFile = faFile;
 
     ngOnInit() {
         this.expandGroupWithSelectedItem();
@@ -35,7 +35,7 @@ export class SidebarAccordionComponent implements OnChanges, OnInit {
     }
 
     ngOnChanges() {
-        if (this.searchValue) {
+        if (this.searchValue || this.isFilterActive) {
             this.expandAll();
         } else {
             this.setStoredCollapseState();
diff --git a/src/main/webapp/app/shared/sidebar/sidebar.component.html b/src/main/webapp/app/shared/sidebar/sidebar.component.html
index c9ff6c8a64ae..ea513b48174e 100644
--- a/src/main/webapp/app/shared/sidebar/sidebar.component.html
+++ b/src/main/webapp/app/shared/sidebar/sidebar.component.html
@@ -4,12 +4,28 @@
             @if (searchFieldEnabled) {
                 <div class="mt-2 mb-2">
                     <jhi-search-filter (newSearchEvent)="setSearchValue($event)" class="mb-2" />
+                    @if (showFilter) {
+                        <div class="ms-2 mt-1 text-primary">
+                            <a (click)="openFilterExercisesDialog()">
+                                @if (isFilterActive) {
+                                    <fa-icon [icon]="faFilterCurrentlyApplied" />
+                                } @else {
+                                    <fa-icon [icon]="faFilter" />
+                                }
+                                <span jhiTranslate="artemisApp.courseOverview.exerciseFilter.filter"></span>
+                            </a>
+                        </div>
+                    }
                 </div>
             }
             @if (!sidebarData?.ungroupedData || !(sidebarData?.ungroupedData | searchFilter: ['title', 'type'] : searchValue)?.length) {
                 <div
                     [ngClass]="{ 'content-height-dev': !isProduction || isTestServer }"
-                    jhiTranslate="artemisApp.courseOverview.general.noDataFound"
+                    [jhiTranslate]="
+                        (sidebarDataBeforeFiltering?.ungroupedData?.length ?? 0) > 0 && sidebarData.ungroupedData?.length === 0
+                            ? 'artemisApp.courseOverview.general.noElementFoundWithAppliedFilter'
+                            : 'artemisApp.courseOverview.general.noDataFound'
+                    "
                     class="mt-2 text-center scrollable-item-content"
                 ></div>
             } @else {
@@ -36,6 +52,7 @@
                             [channelTypeIcon]="channelTypeIcon"
                             [collapseState]="collapseState"
                             (onUpdateSidebar)="onUpdateSidebar.emit()"
+                            [isFilterActive]="isFilterActive"
                         />
                     } @else {
                         @for (sidebarItem of sidebarData?.ungroupedData | searchFilter: ['title', 'type'] : searchValue; track sidebarItem; let last = $last) {
diff --git a/src/main/webapp/app/shared/sidebar/sidebar.component.ts b/src/main/webapp/app/shared/sidebar/sidebar.component.ts
index fdb0d9adcaaa..de47ff395f76 100644
--- a/src/main/webapp/app/shared/sidebar/sidebar.component.ts
+++ b/src/main/webapp/app/shared/sidebar/sidebar.component.ts
@@ -1,10 +1,20 @@
 import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output } from '@angular/core';
-import { faChevronRight, faFilter, faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
+import { faFilter, faFilterCircleXmark } from '@fortawesome/free-solid-svg-icons';
 import { ActivatedRoute, Params } from '@angular/router';
 import { Subscription, distinctUntilChanged } from 'rxjs';
 import { ProfileService } from '../layouts/profiles/profile.service';
 import { ChannelAccordionShowAdd, ChannelTypeIcons, CollapseState, SidebarCardSize, SidebarData, SidebarTypes } from 'app/types/sidebar';
 import { SidebarEventService } from './sidebar-event.service';
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
+import { cloneDeep } from 'lodash-es';
+import { ExerciseFilterOptions, ExerciseFilterResults } from 'app/types/exercise-filter';
+import {
+    getAchievablePointsAndAchievedScoreFilterOptions,
+    getExerciseCategoryFilterOptions,
+    getExerciseDifficultyFilterOptions,
+    getExerciseTypeFilterOptions,
+} from 'app/shared/sidebar/sidebar.helper';
+import { ExerciseFilterModalComponent } from 'app/shared/exercise-filter/exercise-filter-modal.component';
 
 @Component({
     selector: 'jhi-sidebar',
@@ -22,6 +32,7 @@ export class SidebarComponent implements OnDestroy, OnChanges, OnInit {
     @Input() showAddOption?: ChannelAccordionShowAdd;
     @Input() channelTypeIcon?: ChannelTypeIcons;
     @Input() collapseState: CollapseState;
+    @Input() showFilter: boolean = false;
 
     searchValue = '';
     isCollapsed: boolean = false;
@@ -32,19 +43,26 @@ export class SidebarComponent implements OnDestroy, OnChanges, OnInit {
     profileSubscription?: Subscription;
     sidebarEventSubscription?: Subscription;
     sidebarAccordionEventSubscription?: Subscription;
+
     routeParams: Params;
     isProduction = true;
     isTestServer = false;
 
-    // icons
-    faMagnifyingGlass = faMagnifyingGlass;
-    faChevronRight = faChevronRight;
-    faFilter = faFilter;
+    private modalRef?: NgbModalRef;
+
+    readonly faFilter = faFilter;
+    readonly faFilterCurrentlyApplied = faFilterCircleXmark;
+
+    sidebarDataBeforeFiltering: SidebarData;
+
+    exerciseFilters?: ExerciseFilterOptions;
+    isFilterActive: boolean = false;
 
     constructor(
         private route: ActivatedRoute,
         private profileService: ProfileService,
         private sidebarEventService: SidebarEventService,
+        private modalService: NgbModal,
     ) {}
 
     ngOnInit(): void {
@@ -110,4 +128,43 @@ export class SidebarComponent implements OnDestroy, OnChanges, OnInit {
         };
         return this.sidebarData.sidebarType ? size[this.sidebarData.sidebarType] : 'M';
     }
+
+    openFilterExercisesDialog() {
+        this.initializeFilterOptions();
+
+        if (!this.sidebarDataBeforeFiltering) {
+            this.sidebarDataBeforeFiltering = cloneDeep(this.sidebarData);
+        }
+
+        this.modalRef = this.modalService.open(ExerciseFilterModalComponent, {
+            size: 'lg',
+            backdrop: 'static',
+            animation: true,
+        });
+
+        this.modalRef.componentInstance.sidebarData = cloneDeep(this.sidebarDataBeforeFiltering);
+        this.modalRef.componentInstance.exerciseFilters = cloneDeep(this.exerciseFilters);
+
+        this.modalRef.componentInstance.filterApplied.subscribe((exerciseFilterResults: ExerciseFilterResults) => {
+            this.sidebarData = exerciseFilterResults.filteredSidebarData!;
+            this.exerciseFilters = exerciseFilterResults.appliedExerciseFilters;
+            this.isFilterActive = exerciseFilterResults.isFilterActive;
+        });
+    }
+
+    initializeFilterOptions() {
+        if (this.exerciseFilters) {
+            return;
+        }
+
+        const scoreAndPointsFilterOptions = getAchievablePointsAndAchievedScoreFilterOptions(this.sidebarData, this.exerciseFilters);
+
+        this.exerciseFilters = {
+            categoryFilter: getExerciseCategoryFilterOptions(this.sidebarData, this.exerciseFilters),
+            exerciseTypesFilter: getExerciseTypeFilterOptions(this.sidebarData, this.exerciseFilters),
+            difficultyFilter: getExerciseDifficultyFilterOptions(this.sidebarData, this.exerciseFilters),
+            achievedScore: scoreAndPointsFilterOptions?.achievedScore,
+            achievablePoints: scoreAndPointsFilterOptions?.achievablePoints,
+        };
+    }
 }
diff --git a/src/main/webapp/app/shared/sidebar/sidebar.helper.ts b/src/main/webapp/app/shared/sidebar/sidebar.helper.ts
new file mode 100644
index 000000000000..c77e558b5390
--- /dev/null
+++ b/src/main/webapp/app/shared/sidebar/sidebar.helper.ts
@@ -0,0 +1,269 @@
+import { DifficultyFilterOption, ExerciseCategoryFilterOption, ExerciseFilterOptions, ExerciseTypeFilterOption, FilterOption, RangeFilter } from 'app/types/exercise-filter';
+import { SidebarCardElement, SidebarData } from 'app/types/sidebar';
+import { ExerciseCategory } from 'app/entities/exercise-category.model';
+import { DifficultyLevel, ExerciseType, getIcon } from 'app/entities/exercise.model';
+import { getLatestResultOfStudentParticipation } from 'app/exercises/shared/participation/participation.utils';
+import { roundToNextMultiple } from 'app/shared/util/utils';
+
+const POINTS_STEP = 1;
+const SCORE_THRESHOLD_TO_INCREASE_STEP = 20;
+const SMALL_SCORE_STEP = 1;
+const SCORE_STEP = 5;
+
+const DEFAULT_DIFFICULTIES_FILTER: DifficultyFilterOption[] = [
+    { name: 'artemisApp.exercise.easy', value: DifficultyLevel.EASY, checked: false },
+    { name: 'artemisApp.exercise.medium', value: DifficultyLevel.MEDIUM, checked: false },
+    { name: 'artemisApp.exercise.hard', value: DifficultyLevel.HARD, checked: false },
+];
+
+const DEFAULT_EXERCISE_TYPES_FILTER: ExerciseTypeFilterOption[] = [
+    { name: 'artemisApp.courseStatistics.programming', value: ExerciseType.PROGRAMMING, checked: false, icon: getIcon(ExerciseType.PROGRAMMING) },
+    { name: 'artemisApp.courseStatistics.quiz', value: ExerciseType.QUIZ, checked: false, icon: getIcon(ExerciseType.QUIZ) },
+    { name: 'artemisApp.courseStatistics.modeling', value: ExerciseType.MODELING, checked: false, icon: getIcon(ExerciseType.MODELING) },
+    { name: 'artemisApp.courseStatistics.text', value: ExerciseType.TEXT, checked: false, icon: getIcon(ExerciseType.TEXT) },
+    { name: 'artemisApp.courseStatistics.file-upload', value: ExerciseType.FILE_UPLOAD, checked: false, icon: getIcon(ExerciseType.FILE_UPLOAD) },
+];
+
+function getAvailableCategoriesAsFilterOptions(sidebarData?: SidebarData): ExerciseCategoryFilterOption[] | undefined {
+    const sidebarElementsWithExerciseCategory: SidebarCardElement[] | undefined = sidebarData?.ungroupedData?.filter(
+        (sidebarElement: SidebarCardElement) => sidebarElement.exercise?.categories !== undefined,
+    );
+    const availableCategories: ExerciseCategory[] | undefined = sidebarElementsWithExerciseCategory?.flatMap(
+        (sidebarElement: SidebarCardElement) => sidebarElement.exercise?.categories || [],
+    );
+
+    // noinspection UnnecessaryLocalVariableJS: not inlined because the variable name improves readability
+    const availableCategoriesAsFilterOptions: ExerciseCategoryFilterOption[] | undefined = availableCategories?.map((category: ExerciseCategory) => ({
+        category: category,
+        searched: false,
+    }));
+    return availableCategoriesAsFilterOptions;
+}
+
+function getExerciseCategoryFilterOptionsWithoutDuplicates(exerciseCategoryFilterOptions?: ExerciseCategoryFilterOption[]): ExerciseCategoryFilterOption[] | undefined {
+    return exerciseCategoryFilterOptions?.reduce((unique: ExerciseCategoryFilterOption[], item: ExerciseCategoryFilterOption) => {
+        if (!unique.some((uniqueItem) => uniqueItem.category.equals(item.category))) {
+            unique.push(item);
+        }
+        return unique;
+    }, []);
+}
+
+function sortExerciseCategoryFilterOptionsSortedByName(exerciseCategoryFilterOptions?: ExerciseCategoryFilterOption[]): ExerciseCategoryFilterOption[] {
+    return exerciseCategoryFilterOptions?.sort((categoryFilterOptionsA, categoryFilterOptionB) => categoryFilterOptionsA.category.compare(categoryFilterOptionB.category)) ?? [];
+}
+
+/**
+ * @param exerciseFilters that might already be defined for the course sidebar
+ * @param sidebarData that contains the exercises of a course and their information
+ *
+ * @returns already defined category filter options if they exist, otherwise the category filter options based on the sidebar data
+ */
+export function getExerciseCategoryFilterOptions(sidebarData?: SidebarData, exerciseFilters?: ExerciseFilterOptions): FilterOption<ExerciseCategoryFilterOption> {
+    if (exerciseFilters?.categoryFilter) {
+        return exerciseFilters?.categoryFilter;
+    }
+
+    const availableCategoriesAsFilterOptions = getAvailableCategoriesAsFilterOptions(sidebarData);
+    const selectableCategoryFilterOptions = getExerciseCategoryFilterOptionsWithoutDuplicates(availableCategoriesAsFilterOptions);
+    const sortedCategoryFilterOptions = sortExerciseCategoryFilterOptionsSortedByName(selectableCategoryFilterOptions);
+
+    const isDisplayed = !!sortedCategoryFilterOptions.length;
+    return { isDisplayed: isDisplayed, options: selectableCategoryFilterOptions ?? [] };
+}
+
+/**
+ * @param exerciseFilters that might already be defined for the course sidebar
+ * @param sidebarData that contains the exercises of a course and their information
+ *
+ * @returns already defined exercise type filter options if they exist, otherwise the exercise type filter options based on the sidebar data
+ */
+export function getExerciseTypeFilterOptions(sidebarData?: SidebarData, exerciseFilters?: ExerciseFilterOptions): FilterOption<ExerciseTypeFilterOption> {
+    if (exerciseFilters?.exerciseTypesFilter) {
+        return exerciseFilters?.exerciseTypesFilter;
+    }
+
+    const existingExerciseTypes = sidebarData?.ungroupedData
+        ?.filter((sidebarElement: SidebarCardElement) => sidebarElement.type !== undefined)
+        .map((sidebarElement: SidebarCardElement) => sidebarElement.type);
+
+    const availableTypeFilters = DEFAULT_EXERCISE_TYPES_FILTER?.filter((exerciseType) => existingExerciseTypes?.includes(exerciseType.value));
+
+    return { isDisplayed: availableTypeFilters.length > 1, options: availableTypeFilters };
+}
+
+/**
+ * @param exerciseFilters that might already be defined for the course sidebar
+ * @param sidebarData that contains the exercises of a course and their information
+ *
+ * @returns already defined difficulty filter options if they exist, otherwise the difficulty filter options based on the sidebar data
+ */
+export function getExerciseDifficultyFilterOptions(sidebarData?: SidebarData, exerciseFilters?: ExerciseFilterOptions): FilterOption<DifficultyFilterOption> {
+    if (exerciseFilters?.difficultyFilter) {
+        return exerciseFilters.difficultyFilter;
+    }
+
+    const existingDifficulties = sidebarData?.ungroupedData
+        ?.filter((sidebarElement: SidebarCardElement) => sidebarElement.difficulty !== undefined)
+        .map((sidebarElement: SidebarCardElement) => sidebarElement.difficulty);
+
+    const availableDifficultyFilters = DEFAULT_DIFFICULTIES_FILTER?.filter((difficulty) => existingDifficulties?.includes(difficulty.value));
+
+    return { isDisplayed: !!availableDifficultyFilters.length, options: availableDifficultyFilters };
+}
+
+export function isRangeFilterApplied(rangeFilter?: RangeFilter): boolean {
+    if (!rangeFilter?.filter) {
+        return false;
+    }
+
+    const filter = rangeFilter.filter;
+    const isExcludingMinValues = filter.selectedMin !== filter.generalMin;
+    const isExcludingMaxValues = filter.selectedMax !== filter.generalMax;
+    return isExcludingMinValues || isExcludingMaxValues;
+}
+
+function getUpdatedMinAndMaxValues(minValue: number, maxValue: number, currentMaxValue: number) {
+    let updatedMinValue = minValue;
+    let updatedMaxValue = maxValue;
+
+    if (currentMaxValue < minValue) {
+        updatedMinValue = currentMaxValue;
+    }
+    if (currentMaxValue > maxValue) {
+        updatedMaxValue = currentMaxValue;
+    }
+
+    return { updatedMinValue, updatedMaxValue };
+}
+
+/**
+ * The calculation for points and score are intentionally mixed into one method to reduce the number of iterations over the sidebar data.
+ * @param sidebarData
+ */
+function calculateMinAndMaxForPointsAndScore(sidebarData: SidebarData) {
+    let minAchievablePoints = Infinity;
+    let maxAchievablePoints = -Infinity;
+
+    let minAchievedScore = Infinity;
+    let maxAchievedScore = -Infinity;
+
+    sidebarData.ungroupedData?.forEach((sidebarElement: SidebarCardElement) => {
+        if (sidebarElement.exercise?.maxPoints) {
+            const currentExerciseMaxPoints = sidebarElement.exercise.maxPoints;
+
+            const { updatedMinValue, updatedMaxValue } = getUpdatedMinAndMaxValues(minAchievablePoints, maxAchievablePoints, currentExerciseMaxPoints);
+            minAchievablePoints = updatedMinValue;
+            maxAchievablePoints = updatedMaxValue;
+
+            if (sidebarElement.studentParticipation) {
+                const currentExerciseAchievedScore = getLatestResultOfStudentParticipation(sidebarElement.studentParticipation, true)?.score;
+
+                if (currentExerciseAchievedScore !== undefined) {
+                    const { updatedMinValue, updatedMaxValue } = getUpdatedMinAndMaxValues(minAchievedScore, maxAchievedScore, currentExerciseAchievedScore);
+                    minAchievedScore = updatedMinValue;
+                    maxAchievedScore = updatedMaxValue;
+                }
+            }
+        }
+    });
+
+    return { minAchievablePoints, maxAchievablePoints, minAchievedScore, maxAchievedScore };
+}
+
+/**
+ * **Rounds the min and max values for achievable points and achieved score to the next multiple of the step.
+ * The step {@link POINTS_STEP}, and {@link SCORE_STEP} or {@link SMALL_SCORE_STEP} are the selectable values for the range filter.**
+ * <br>
+ * <i>For the **score filter**, the step is increased if we have more than 20 values between the min and max value,
+ * as up to 100 values are theoretically possible.<br>
+ * For the **achievable points filter**, the step is always 1 as exercises usually have between 1 and 15 points,
+ * so we do not need to increase the step and thereby limit accuracy of filter options.</i>
+ *
+ * @param minAchievablePoints
+ * @param maxAchievablePoints
+ * @param minAchievedScore
+ * @param maxAchievedScore
+ */
+function roundRangeFilterMinAndMaxValues(minAchievablePoints: number, maxAchievablePoints: number, minAchievedScore: number, maxAchievedScore: number) {
+    const roundUp = true;
+    const roundDown = false;
+    const minAchievablePointsRounded = roundToNextMultiple(minAchievablePoints, POINTS_STEP, roundDown);
+    const maxAchievablePointsRounded = roundToNextMultiple(maxAchievablePoints, POINTS_STEP, roundUp);
+
+    let minAchievedScoreRounded;
+    let maxAchievedScoreRounded;
+
+    if (maxAchievedScore > SCORE_THRESHOLD_TO_INCREASE_STEP) {
+        minAchievedScoreRounded = roundToNextMultiple(minAchievedScore, SCORE_STEP, roundDown);
+        maxAchievedScoreRounded = roundToNextMultiple(maxAchievedScore, SCORE_STEP, roundUp);
+    } else {
+        minAchievedScoreRounded = roundToNextMultiple(minAchievedScore, SMALL_SCORE_STEP, roundDown);
+        maxAchievedScoreRounded = roundToNextMultiple(maxAchievedScore, SMALL_SCORE_STEP, roundUp);
+    }
+
+    return { minAchievablePointsRounded, maxAchievablePointsRounded, minAchievedScoreRounded, maxAchievedScoreRounded };
+}
+
+function calculateAchievablePointsFilterOptions(sidebarData: SidebarData): { achievablePoints?: RangeFilter; achievedScore?: RangeFilter } {
+    const { minAchievablePoints, maxAchievablePoints, minAchievedScore, maxAchievedScore } = calculateMinAndMaxForPointsAndScore(sidebarData);
+
+    const { minAchievablePointsRounded, maxAchievablePointsRounded, minAchievedScoreRounded, maxAchievedScoreRounded } = roundRangeFilterMinAndMaxValues(
+        minAchievablePoints,
+        maxAchievablePoints,
+        minAchievedScore,
+        maxAchievedScore,
+    );
+
+    return {
+        achievablePoints: {
+            isDisplayed: minAchievablePointsRounded < maxAchievablePointsRounded,
+            filter: {
+                generalMin: minAchievablePointsRounded,
+                generalMax: maxAchievablePointsRounded,
+                selectedMin: minAchievablePointsRounded,
+                selectedMax: maxAchievablePointsRounded,
+                step: POINTS_STEP,
+            },
+        },
+        achievedScore: {
+            isDisplayed: minAchievedScoreRounded < maxAchievedScoreRounded && minAchievedScoreRounded !== Infinity,
+            filter: {
+                generalMin: minAchievedScoreRounded,
+                generalMax: maxAchievedScoreRounded,
+                selectedMin: minAchievedScoreRounded,
+                selectedMax: maxAchievedScoreRounded,
+                step: maxAchievedScoreRounded <= SCORE_THRESHOLD_TO_INCREASE_STEP ? SMALL_SCORE_STEP : SCORE_STEP,
+            },
+        },
+    };
+}
+
+/**
+ * @param exerciseFilters that might already be defined for the course sidebar
+ * @param sidebarData that contains the exercises of a course and their information
+ *
+ * @returns already defined achievable points and achieved score filter options if they exist, otherwise the achievable points and achieved score filter options based on the sidebar data
+ */
+export function getAchievablePointsAndAchievedScoreFilterOptions(
+    sidebarData?: SidebarData,
+    exerciseFilters?: ExerciseFilterOptions,
+): {
+    achievablePoints?: RangeFilter;
+    achievedScore?: RangeFilter;
+} {
+    if (!sidebarData?.ungroupedData) {
+        return { achievablePoints: undefined, achievedScore: undefined };
+    }
+
+    const isPointsFilterApplied = isRangeFilterApplied(exerciseFilters?.achievablePoints);
+    const isScoreFilterApplied = isRangeFilterApplied(exerciseFilters?.achievedScore);
+
+    const isRecalculatingFilterOptionsRequired = isPointsFilterApplied || isScoreFilterApplied || !exerciseFilters?.achievablePoints || !exerciseFilters?.achievedScore;
+    if (!isRecalculatingFilterOptionsRequired) {
+        // the scores might change when we work on exercises, so we re-calculate the filter options (but only if the filter is actually applied)
+        return { achievablePoints: exerciseFilters?.achievablePoints, achievedScore: exerciseFilters?.achievedScore };
+    }
+
+    return calculateAchievablePointsFilterOptions(sidebarData);
+}
diff --git a/src/main/webapp/app/shared/statistics-graph/statistics.service.ts b/src/main/webapp/app/shared/statistics-graph/statistics.service.ts
index 27b83a0eac33..233a10bfd8d8 100644
--- a/src/main/webapp/app/shared/statistics-graph/statistics.service.ts
+++ b/src/main/webapp/app/shared/statistics-graph/statistics.service.ts
@@ -48,7 +48,7 @@ export class StatisticsService {
         const params = new HttpParams().set('courseId', '' + courseId);
         return this.http.get<CourseManagementStatisticsDTO>(`${this.resourceUrl}course-statistics`, { params }).pipe(
             map((res: CourseManagementStatisticsDTO) => {
-                StatisticsService.convertExerciseCategoriesOfrCourseManagementStatisticsFromServer(res);
+                StatisticsService.convertExerciseCategoriesOfCourseManagementStatisticsFromServer(res);
                 return StatisticsService.convertCourseManagementStatisticDatesFromServer(res);
             }),
         );
@@ -78,9 +78,9 @@ export class StatisticsService {
         return dto;
     }
 
-    private static convertExerciseCategoriesOfrCourseManagementStatisticsFromServer(res: CourseManagementStatisticsDTO): CourseManagementStatisticsDTO {
+    private static convertExerciseCategoriesOfCourseManagementStatisticsFromServer(res: CourseManagementStatisticsDTO): CourseManagementStatisticsDTO {
         res.averageScoresOfExercises.forEach((avgScoresOfExercise) => {
-            avgScoresOfExercise.categories = avgScoresOfExercise.categories?.map((category) => JSON.parse(category as string) as ExerciseCategory);
+            avgScoresOfExercise.categories = avgScoresOfExercise.categories?.map((category) => new ExerciseCategory(category.category, category.color));
         });
         return res;
     }
diff --git a/src/main/webapp/app/shared/util/utils.ts b/src/main/webapp/app/shared/util/utils.ts
index a9ecd05f46d7..ed3df211540a 100644
--- a/src/main/webapp/app/shared/util/utils.ts
+++ b/src/main/webapp/app/shared/util/utils.ts
@@ -156,3 +156,18 @@ export function scrollToTopOfPage() {
 export function isExamExercise(exercise: Exercise) {
     return exercise.course === undefined;
 }
+
+/**
+ * Rounds a value up to the nearest multiple
+ *
+ * @param value    that shall be rounded
+ * @param multiple to which we round up
+ * @param roundUp  if true, we round up, otherwise we round down
+ */
+export function roundToNextMultiple(value: number, multiple: number, roundUp: boolean) {
+    if (roundUp) {
+        return Math.ceil(value / multiple) * multiple;
+    }
+
+    return Math.floor(value / multiple) * multiple;
+}
diff --git a/src/main/webapp/app/types/exercise-filter.ts b/src/main/webapp/app/types/exercise-filter.ts
new file mode 100644
index 000000000000..053dbb8d089c
--- /dev/null
+++ b/src/main/webapp/app/types/exercise-filter.ts
@@ -0,0 +1,43 @@
+import { ExerciseCategory } from 'app/entities/exercise-category.model';
+import { DifficultyLevel, ExerciseType } from 'app/entities/exercise.model';
+import { SidebarData } from 'app/types/sidebar';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+
+/**
+ * isDisplayed - whether the filter is in the filter modal (e.g. for no sidebar element the difficulty is defined, so the difficulty filter is not displayed)
+ */
+export type FilterOption<T> = { isDisplayed: boolean; options: T[] };
+export type ExerciseCategoryFilterOption = { category: ExerciseCategory; searched: boolean };
+export type ExerciseTypeFilterOption = { name: string; value: ExerciseType; checked: boolean; icon: IconProp };
+export type DifficultyFilterOption = { name: string; value: DifficultyLevel; checked: boolean };
+
+export type RangeFilter = {
+    isDisplayed: boolean;
+    filter: {
+        generalMin: number;
+        generalMax: number;
+        selectedMin: number;
+        selectedMax: number;
+        step: number;
+    };
+};
+
+export type ExerciseFilterOptions = {
+    categoryFilter?: FilterOption<ExerciseCategoryFilterOption>;
+    exerciseTypesFilter?: FilterOption<ExerciseTypeFilterOption>;
+    difficultyFilter?: FilterOption<DifficultyFilterOption>;
+    achievedScore?: RangeFilter;
+    achievablePoints?: RangeFilter;
+};
+
+export type ExerciseFilterResults = { filteredSidebarData?: SidebarData; appliedExerciseFilters?: ExerciseFilterOptions; isFilterActive: boolean };
+
+export type FilterDetails = {
+    searchedTypes?: ExerciseType[];
+    selectedCategories: ExerciseCategory[];
+    searchedDifficulties?: DifficultyLevel[];
+    isScoreFilterApplied: boolean;
+    isPointsFilterApplied: boolean;
+    achievedScore?: RangeFilter;
+    achievablePoints?: RangeFilter;
+};
diff --git a/src/main/webapp/i18n/de/exercise.json b/src/main/webapp/i18n/de/exercise.json
index e198497deaa9..332f39024ff4 100644
--- a/src/main/webapp/i18n/de/exercise.json
+++ b/src/main/webapp/i18n/de/exercise.json
@@ -140,6 +140,7 @@
             },
             "categories": "Kategorien",
             "noCategory": "Keine Kategorie",
+            "selectCategories": "Kategorien auswählen",
             "participation": "Teilnahme",
             "participations": "Teilnahmen",
             "submissions": "Einreichungen",
diff --git a/src/main/webapp/i18n/de/student-dashboard.json b/src/main/webapp/i18n/de/student-dashboard.json
index 38820f89e17b..89729023ff10 100644
--- a/src/main/webapp/i18n/de/student-dashboard.json
+++ b/src/main/webapp/i18n/de/student-dashboard.json
@@ -33,7 +33,8 @@
             "manage": "Verwalten",
             "studentView": "Studentenansicht",
             "general": {
-                "noDataFound": "Keine Einträge gefunden."
+                "noDataFound": "Keine Einträge gefunden.",
+                "noElementFoundWithAppliedFilter": "Keine Einträge für die angewendeten Filtereinstellungen gefunden."
             },
             "sidebar": {
                 "past": "Vorangegangen",
@@ -89,6 +90,17 @@
                 "plagiarismCases": "Plagiatsfälle",
                 "gradingSystem": "Notenschlüssel"
             },
+            "exerciseFilter": {
+                "filter": "Filter",
+                "modalTitle": "Aufgaben Filtern",
+                "dueDateRange": "Zeitraum der Einreichungsfrist",
+                "achievedScore": "Erreichtes Ergebnis",
+                "achievablePoints": "Erreichbare Punktzahl",
+                "applyFilter": "Filter anwenden",
+                "resetFilter": "Filter zurücksetzen",
+                "noFilterAvailable": "Für die bisherigen Aufgaben gibt es keine unterscheidenden Filteroptionen",
+                "noMoreOptions": "Keine weiteren Auswahlmöglichkeiten"
+            },
             "exerciseList": {
                 "filter": "Filter ({{ num }})",
                 "releaseDate": "Veröffentlichungsdatum",
diff --git a/src/main/webapp/i18n/en/exercise.json b/src/main/webapp/i18n/en/exercise.json
index fbc47e4093dc..ca2f0fdde23c 100644
--- a/src/main/webapp/i18n/en/exercise.json
+++ b/src/main/webapp/i18n/en/exercise.json
@@ -140,6 +140,7 @@
             },
             "categories": "Categories",
             "noCategory": "No Category",
+            "selectCategories": "Select categories",
             "participation": "Participation",
             "participations": "Participations",
             "submissions": "Submissions",
diff --git a/src/main/webapp/i18n/en/student-dashboard.json b/src/main/webapp/i18n/en/student-dashboard.json
index 586cdf840ce1..ae6d54800cd6 100644
--- a/src/main/webapp/i18n/en/student-dashboard.json
+++ b/src/main/webapp/i18n/en/student-dashboard.json
@@ -33,7 +33,8 @@
             "manage": "Manage",
             "studentView": "Student view",
             "general": {
-                "noDataFound": "No data found."
+                "noDataFound": "No data found.",
+                "noElementFoundWithAppliedFilter": "No element matches the applied filter."
             },
             "sidebar": {
                 "past": "Past",
@@ -89,6 +90,17 @@
                 "plagiarismCases": "Plagiarism Cases",
                 "gradingSystem": "Grading System"
             },
+            "exerciseFilter": {
+                "filter": "Filter",
+                "modalTitle": "Filter Exercises",
+                "dueDateRange": "Due Date Range",
+                "achievedScore": "Achieved Score",
+                "achievablePoints": "Achievable Points",
+                "applyFilter": "Apply filter",
+                "clearFilter": "Clear filter",
+                "noFilterAvailable": "There are no distinguishing filter options for the existing exercises",
+                "noMoreOptions": "No more options"
+            },
             "exerciseList": {
                 "filter": "Filter ({{ num }})",
                 "releaseDate": "Release Date",
diff --git a/src/test/javascript/spec/component/course/course-exercises.component.spec.ts b/src/test/javascript/spec/component/course/course-exercises.component.spec.ts
index 017814b34c5e..3a2e57aa1588 100644
--- a/src/test/javascript/spec/component/course/course-exercises.component.spec.ts
+++ b/src/test/javascript/spec/component/course/course-exercises.component.spec.ts
@@ -29,6 +29,7 @@ import { SidebarComponent } from 'app/shared/sidebar/sidebar.component';
 import { SearchFilterPipe } from 'app/shared/pipes/search-filter.pipe';
 import { SearchFilterComponent } from 'app/shared/search-filter/search-filter.component';
 import { By } from '@angular/platform-browser';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 describe('CourseExercisesComponent', () => {
     let fixture: ComponentFixture<CourseExercisesComponent>;
@@ -44,7 +45,7 @@ describe('CourseExercisesComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ArtemisTestModule, FormsModule, RouterTestingModule.withRoutes([]), MockModule(ReactiveFormsModule)],
+            imports: [ArtemisTestModule, FormsModule, RouterTestingModule.withRoutes([]), MockModule(ReactiveFormsModule), MockDirective(TranslateDirective)],
             declarations: [
                 CourseExercisesComponent,
                 SidebarComponent,
diff --git a/src/test/javascript/spec/component/course/exercise-filter.model.spec.ts b/src/test/javascript/spec/component/course/exercise-filter.model.spec.ts
index 8aadaa3d2189..232aab57fafa 100644
--- a/src/test/javascript/spec/component/course/exercise-filter.model.spec.ts
+++ b/src/test/javascript/spec/component/course/exercise-filter.model.spec.ts
@@ -6,10 +6,8 @@ import { ProgrammingExercise } from 'app/entities/programming-exercise.model';
 import { Exercise } from 'app/entities/exercise.model';
 
 describe('Exercise Filter Test', () => {
-    const category1 = new ExerciseCategory();
-    category1.category = 'Easy';
-    const category2 = new ExerciseCategory();
-    category2.category = 'Hard';
+    const category1 = new ExerciseCategory('Easy', undefined);
+    const category2 = new ExerciseCategory('Hard', undefined);
     const course: Course = { id: 123 } as Course;
     const exercise1 = new ProgrammingExercise(course, undefined);
     exercise1.id = 1;
diff --git a/src/test/javascript/spec/component/exercises/shared/headers/header-exercise-page-with-details.component.spec.ts b/src/test/javascript/spec/component/exercises/shared/headers/header-exercise-page-with-details.component.spec.ts
index 6d38f089db69..6682b12aa12c 100644
--- a/src/test/javascript/spec/component/exercises/shared/headers/header-exercise-page-with-details.component.spec.ts
+++ b/src/test/javascript/spec/component/exercises/shared/headers/header-exercise-page-with-details.component.spec.ts
@@ -67,8 +67,7 @@ describe('HeaderExercisePageWithDetails', () => {
         expect(component.icon.iconName).toBe('keyboard');
 
         // dueDate, categories, examMode should also be set if the necessary information is known
-        const category = new ExerciseCategory();
-        category.category = 'testcategory';
+        const category = new ExerciseCategory('testcategory', undefined);
         const categories = [category];
         exercise.categories = categories;
         exam.endDate = dayjs().subtract(1, 'day');
diff --git a/src/test/javascript/spec/component/file-upload-exercise/file-upload-exercise-update.component.spec.ts b/src/test/javascript/spec/component/file-upload-exercise/file-upload-exercise-update.component.spec.ts
index d104f657bdf3..caec2f8dbd54 100644
--- a/src/test/javascript/spec/component/file-upload-exercise/file-upload-exercise-update.component.spec.ts
+++ b/src/test/javascript/spec/component/file-upload-exercise/file-upload-exercise-update.component.spec.ts
@@ -23,6 +23,7 @@ import { fileUploadExercise } from '../../helpers/mocks/service/mock-file-upload
 import { ExerciseTitleChannelNameComponent } from 'app/exercises/shared/exercise-title-channel-name/exercise-title-channel-name.component';
 import { TeamConfigFormGroupComponent } from 'app/exercises/shared/team-config-form-group/team-config-form-group.component';
 import { NgModel } from '@angular/forms';
+import { ExerciseCategory } from 'app/entities/exercise-category.model';
 
 describe('FileUploadExerciseUpdateComponent', () => {
     let comp: FileUploadExerciseUpdateComponent;
@@ -321,7 +322,7 @@ describe('FileUploadExerciseUpdateComponent', () => {
     it('should updateCategories properly by making category available for selection again when removing it', () => {
         comp.fileUploadExercise = fileUploadExercise;
         comp.exerciseCategories = [];
-        const newCategories = [{ category: 'Easy' }, { category: 'Hard' }];
+        const newCategories = [new ExerciseCategory('Easy', undefined), new ExerciseCategory('Hard', undefined)];
 
         comp.updateCategories(newCategories);
 
diff --git a/src/test/javascript/spec/component/modeling-exercise/modeling-exercise-update.component.spec.ts b/src/test/javascript/spec/component/modeling-exercise/modeling-exercise-update.component.spec.ts
index b05efdeb91e5..f9963b3f1725 100644
--- a/src/test/javascript/spec/component/modeling-exercise/modeling-exercise-update.component.spec.ts
+++ b/src/test/javascript/spec/component/modeling-exercise/modeling-exercise-update.component.spec.ts
@@ -27,6 +27,7 @@ import { ExerciseUpdatePlagiarismComponent } from 'app/exercises/shared/plagiari
 import { NgModel } from '@angular/forms';
 import { TeamConfigFormGroupComponent } from 'app/exercises/shared/team-config-form-group/team-config-form-group.component';
 import { UMLDiagramType } from '@ls1intum/apollon';
+import { ExerciseCategory } from 'app/entities/exercise-category.model';
 
 describe('ModelingExerciseUpdateComponent', () => {
     let comp: ModelingExerciseUpdateComponent;
@@ -34,7 +35,8 @@ describe('ModelingExerciseUpdateComponent', () => {
     let service: ModelingExerciseService;
     let courseService: CourseManagementService;
     let exerciseService: ExerciseService;
-    const categories = [{ category: 'testCat' }, { category: 'testCat2' }];
+    const categories = [new ExerciseCategory('testCat', undefined), new ExerciseCategory('testCat2', undefined)];
+
     const categoriesStringified = categories.map((cat) => JSON.stringify(cat));
 
     beforeEach(() => {
@@ -262,7 +264,8 @@ describe('ModelingExerciseUpdateComponent', () => {
         const modelingExercise = new ModelingExercise(UMLDiagramType.ClassDiagram, undefined, undefined);
         modelingExercise.categories = categories;
         comp.modelingExercise = modelingExercise;
-        const newCategories = [{ category: 'newCat1' }, { category: 'newCat2' }];
+        const newCategories = [new ExerciseCategory('newCat1', undefined), new ExerciseCategory('newCat2', undefined)];
+
         comp.updateCategories(newCategories);
         expect(comp.modelingExercise.categories).toEqual(newCategories);
     });
@@ -285,7 +288,7 @@ describe('ModelingExerciseUpdateComponent', () => {
     it('should updateCategories properly by making category available for selection again when removing it', () => {
         comp.modelingExercise = new ModelingExercise(UMLDiagramType.ClassDiagram, undefined, undefined);
         comp.exerciseCategories = [];
-        const newCategories = [{ category: 'Easy' }, { category: 'Hard' }];
+        const newCategories = [new ExerciseCategory('Easy', undefined), new ExerciseCategory('Hard', undefined)];
 
         comp.updateCategories(newCategories);
 
diff --git a/src/test/javascript/spec/component/overview/course-exams/course-exams.component.spec.ts b/src/test/javascript/spec/component/overview/course-exams/course-exams.component.spec.ts
index cabb62f2ae39..4b6ccb1ca3f1 100644
--- a/src/test/javascript/spec/component/overview/course-exams/course-exams.component.spec.ts
+++ b/src/test/javascript/spec/component/overview/course-exams/course-exams.component.spec.ts
@@ -5,20 +5,21 @@ import { CourseExamsComponent } from 'app/overview/course-exams/course-exams.com
 import { Exam } from 'app/entities/exam.model';
 import { ArtemisTestModule } from '../../../test.module';
 import dayjs from 'dayjs/esm';
-import { MockModule, MockPipe, MockProvider } from 'ng-mocks';
+import { MockDirective, MockModule, MockPipe, MockProvider } from 'ng-mocks';
 import { Observable, of } from 'rxjs';
 import { ArtemisServerDateService } from 'app/shared/server-date.service';
 import { ExamParticipationService } from 'app/exam/participate/exam-participation.service';
 import { StudentExam } from 'app/entities/student-exam.model';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { CourseStorageService } from 'app/course/manage/course-storage.service';
-import { SidebarComponent } from '../../../../../../main/webapp/app/shared/sidebar/sidebar.component';
+import { SidebarComponent } from 'app/shared/sidebar/sidebar.component';
 import { SearchFilterComponent } from 'app/shared/search-filter/search-filter.component';
 import { SearchFilterPipe } from 'app/shared/pipes/search-filter.pipe';
 import { RouterTestingModule } from '@angular/router/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MockRouter } from '../../../helpers/mocks/mock-router';
 import { CourseOverviewService } from 'app/overview/course-overview.service';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 describe('CourseExamsComponent', () => {
     let component: CourseExamsComponent;
@@ -100,7 +101,7 @@ describe('CourseExamsComponent', () => {
         router.navigate.mockImplementation(() => Promise.resolve(true));
 
         TestBed.configureTestingModule({
-            imports: [ArtemisTestModule, RouterTestingModule, MockModule(FormsModule), MockModule(ReactiveFormsModule)],
+            imports: [ArtemisTestModule, RouterTestingModule, MockModule(FormsModule), MockModule(ReactiveFormsModule), MockDirective(TranslateDirective)],
             declarations: [CourseExamsComponent, SidebarComponent, SearchFilterComponent, MockPipe(ArtemisTranslatePipe), MockPipe(SearchFilterPipe)],
             providers: [
                 { provide: Router, useValue: router },
diff --git a/src/test/javascript/spec/component/programming-exercise/programming-exercise-update.component.spec.ts b/src/test/javascript/spec/component/programming-exercise/programming-exercise-update.component.spec.ts
index df1e7b8924b0..c4f40f4b79dc 100644
--- a/src/test/javascript/spec/component/programming-exercise/programming-exercise-update.component.spec.ts
+++ b/src/test/javascript/spec/component/programming-exercise/programming-exercise-update.component.spec.ts
@@ -975,7 +975,7 @@ describe('ProgrammingExerciseUpdateComponent', () => {
         fixture.detectChanges();
         tick();
 
-        const categories = [new ExerciseCategory()];
+        const categories = [new ExerciseCategory(undefined, undefined)];
         expect(comp.exerciseCategories).toBeUndefined();
         comp.updateCategories(categories);
         expect(comp.exerciseCategories).toBe(categories);
diff --git a/src/test/javascript/spec/component/quiz-exercise/quiz-exercise-update.component.spec.ts b/src/test/javascript/spec/component/quiz-exercise/quiz-exercise-update.component.spec.ts
index 60940086d9d3..a7e1309fcea0 100644
--- a/src/test/javascript/spec/component/quiz-exercise/quiz-exercise-update.component.spec.ts
+++ b/src/test/javascript/spec/component/quiz-exercise/quiz-exercise-update.component.spec.ts
@@ -40,8 +40,9 @@ import { MockProvider } from 'ng-mocks';
 import { Duration } from 'app/exercises/quiz/manage/quiz-exercise-interfaces';
 import { QuizQuestionListEditComponent } from 'app/exercises/quiz/manage/quiz-question-list-edit.component';
 import { MockNgbModalService } from '../../helpers/mocks/service/mock-ngb-modal.service';
+import { ExerciseCategory } from 'app/entities/exercise-category.model';
 
-describe('QuizExercise Update Detail Component', () => {
+describe('QuizExerciseUpdateComponent', () => {
     let comp: QuizExerciseUpdateComponent;
     let exerciseGroupService: ExerciseGroupService;
     let courseManagementService: CourseManagementService;
@@ -447,7 +448,7 @@ describe('QuizExercise Update Detail Component', () => {
         it('should updateCategories properly by making category available for selection again when removing it', () => {
             comp.quizExercise = quizExercise;
             comp.exerciseCategories = [];
-            const newCategories = [{ category: 'Easy' }, { category: 'Hard' }];
+            const newCategories = [new ExerciseCategory('Easy', undefined), new ExerciseCategory('Hard', undefined)];
 
             comp.updateCategories(newCategories);
 
@@ -583,8 +584,8 @@ describe('QuizExercise Update Detail Component', () => {
             it('should update categories to given categories', () => {
                 resetQuizExercise();
                 comp.quizExercise = quizExercise;
-                const exerciseCategory1 = { exerciseId: 1, category: 'category1', color: 'color1' };
-                const exerciseCategory2 = { exerciseId: 1, category: 'category1', color: 'color1' };
+                const exerciseCategory1 = new ExerciseCategory('category1', 'color1');
+                const exerciseCategory2 = new ExerciseCategory('category1', 'color1');
                 const expected = [exerciseCategory1, exerciseCategory2];
                 comp.updateCategories([exerciseCategory1, exerciseCategory2]);
                 expect(comp.quizExercise.categories).toEqual(expected);
diff --git a/src/test/javascript/spec/component/range-slider.component.spec.ts b/src/test/javascript/spec/component/range-slider.component.spec.ts
new file mode 100644
index 000000000000..7e1b747047e0
--- /dev/null
+++ b/src/test/javascript/spec/component/range-slider.component.spec.ts
@@ -0,0 +1,69 @@
+import { RangeSliderComponent } from 'app/shared/range-slider/range-slider.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MockModule } from 'ng-mocks';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+describe('RangeSliderComponent', () => {
+    let component: RangeSliderComponent;
+    let fixture: ComponentFixture<RangeSliderComponent>;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [MockModule(FormsModule), MockModule(ReactiveFormsModule)],
+            declarations: [RangeSliderComponent],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(RangeSliderComponent);
+        component = fixture.componentInstance;
+
+        component.generalMinValue = 0;
+        component.generalMaxValue = 100;
+        component.selectedMinValue = 20;
+        component.selectedMaxValue = 80;
+        component.step = 5;
+    });
+
+    it('should emit the updated max value', () => {
+        const emitSpy = jest.spyOn(component.selectedMaxValueChange, 'emit');
+
+        component.selectedMaxValue = 90;
+        const event = new Event('input');
+        Object.defineProperty(event, 'target', { value: { className: 'range-max', value: 90 } });
+
+        component.onSelectedMaxValueChanged(event);
+        expect(emitSpy).toHaveBeenCalledWith(90);
+    });
+
+    it('should emit the updated max value rounded up to next selectable value', () => {
+        const emitSpy = jest.spyOn(component.selectedMaxValueChange, 'emit');
+
+        component.selectedMaxValue = 11;
+        const event = new Event('input');
+        Object.defineProperty(event, 'target', { value: { className: 'range-max', value: 11 } });
+
+        component.onSelectedMaxValueChanged(event);
+        expect(emitSpy).toHaveBeenCalledWith(25);
+    });
+
+    it('should emit the updated min value', () => {
+        const emitSpy = jest.spyOn(component.selectedMinValueChange, 'emit');
+
+        component.selectedMinValue = 30;
+        const event = new Event('input');
+        Object.defineProperty(event, 'target', { value: { className: 'range-min', value: 30 } });
+
+        component.onSelectedMinValueChanged(event);
+        expect(emitSpy).toHaveBeenCalledWith(30);
+    });
+
+    it('should emit the updated min value rounded down to next selectable value', () => {
+        const emitSpy = jest.spyOn(component.selectedMinValueChange, 'emit');
+
+        component.selectedMinValue = 99;
+        const event = new Event('input');
+        Object.defineProperty(event, 'target', { value: { className: 'range-min', value: 99 } });
+
+        component.onSelectedMinValueChanged(event);
+        expect(emitSpy).toHaveBeenCalledWith(75);
+    });
+});
diff --git a/src/test/javascript/spec/component/shared/exercise-filter/exercise-filter-modal.component.spec.ts b/src/test/javascript/spec/component/shared/exercise-filter/exercise-filter-modal.component.spec.ts
new file mode 100644
index 000000000000..3432102e0a9d
--- /dev/null
+++ b/src/test/javascript/spec/component/shared/exercise-filter/exercise-filter-modal.component.spec.ts
@@ -0,0 +1,259 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ExerciseFilterModalComponent } from 'app/shared/exercise-filter/exercise-filter-modal.component';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
+import { ArtemisSharedCommonModule } from 'app/shared/shared-common.module';
+import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
+import { CustomExerciseCategoryBadgeComponent } from 'app/shared/exercise-categories/custom-exercise-category-badge/custom-exercise-category-badge.component';
+import { RangeSliderComponent } from 'app/shared/range-slider/range-slider.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+import { RangeFilter } from 'app/types/exercise-filter';
+import { DifficultyLevel, Exercise, ExerciseType, getIcon } from 'app/entities/exercise.model';
+import { ExerciseCategory } from 'app/entities/exercise-category.model';
+import { SidebarCardElement } from 'app/types/sidebar';
+import { Result } from 'app/entities/result.model';
+import { StudentParticipation } from 'app/entities/participation/student-participation.model';
+
+const EXERCISE_1 = { categories: [new ExerciseCategory('category1', undefined), new ExerciseCategory('category2', '#1b97ca')], maxPoints: 5, type: ExerciseType.TEXT } as Exercise;
+const EXERCISE_2 = {
+    categories: [new ExerciseCategory('category3', '#0d3cc2'), new ExerciseCategory('category4', '#6ae8ac')],
+    maxPoints: 5,
+    type: ExerciseType.PROGRAMMING,
+} as Exercise;
+const EXERCISE_3 = {
+    categories: [new ExerciseCategory('category1', undefined), new ExerciseCategory('category4', '#6ae8ac')],
+    maxPoints: 8,
+    type: ExerciseType.PROGRAMMING,
+} as Exercise;
+
+const SIDEBAR_CARD_ELEMENT_1 = {
+    exercise: EXERCISE_1,
+    type: ExerciseType.TEXT,
+    difficulty: DifficultyLevel.HARD,
+    studentParticipation: { results: [{ score: 7.7 } as Result] } as StudentParticipation,
+} as SidebarCardElement;
+const SIDEBAR_CARD_ELEMENT_2 = {
+    exercise: EXERCISE_2,
+    type: ExerciseType.PROGRAMMING,
+    difficulty: DifficultyLevel.EASY,
+    studentParticipation: { results: [{ score: 5.0 } as Result] } as StudentParticipation,
+} as SidebarCardElement;
+const SIDEBAR_CARD_ELEMENT_3 = {
+    exercise: EXERCISE_3,
+    type: ExerciseType.PROGRAMMING,
+    difficulty: DifficultyLevel.EASY,
+    studentParticipation: { results: [{ score: 82.3 } as Result] } as StudentParticipation,
+} as SidebarCardElement;
+
+const SCORE_FILTER: RangeFilter = {
+    isDisplayed: true,
+    filter: {
+        generalMin: 0,
+        generalMax: 100,
+        selectedMin: 0,
+        selectedMax: 100,
+        step: 5,
+    },
+};
+
+const POINTS_FILTER: RangeFilter = {
+    isDisplayed: true,
+    filter: {
+        generalMin: 0,
+        generalMax: 20,
+        selectedMin: 0,
+        selectedMax: 20,
+        step: 1,
+    },
+};
+
+describe('ExerciseFilterModalComponent', () => {
+    let component: ExerciseFilterModalComponent;
+    let fixture: ComponentFixture<ExerciseFilterModalComponent>;
+    let activeModal: NgbActiveModal;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                MockModule(FormsModule),
+                MockModule(ReactiveFormsModule),
+                MockModule(FontAwesomeModule),
+                MockModule(ArtemisSharedCommonModule),
+                MockModule(ArtemisSharedComponentModule),
+            ],
+            declarations: [ExerciseFilterModalComponent, MockComponent(CustomExerciseCategoryBadgeComponent), MockComponent(RangeSliderComponent)],
+            providers: [MockProvider(NgbActiveModal)],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(ExerciseFilterModalComponent);
+        component = fixture.componentInstance;
+        activeModal = TestBed.inject(NgbActiveModal);
+
+        component.exerciseFilters = {
+            exerciseTypesFilter: {
+                isDisplayed: true,
+                options: [
+                    { name: 'artemisApp.courseStatistics.programming', value: ExerciseType.PROGRAMMING, checked: false, icon: getIcon(ExerciseType.PROGRAMMING) },
+                    { name: 'artemisApp.courseStatistics.quiz', value: ExerciseType.QUIZ, checked: false, icon: getIcon(ExerciseType.QUIZ) },
+                    { name: 'artemisApp.courseStatistics.modeling', value: ExerciseType.MODELING, checked: false, icon: getIcon(ExerciseType.MODELING) },
+                    { name: 'artemisApp.courseStatistics.text', value: ExerciseType.TEXT, checked: false, icon: getIcon(ExerciseType.TEXT) },
+                    { name: 'artemisApp.courseStatistics.file-upload', value: ExerciseType.FILE_UPLOAD, checked: false, icon: getIcon(ExerciseType.FILE_UPLOAD) },
+                ],
+            },
+            difficultyFilter: {
+                isDisplayed: true,
+                options: [
+                    { name: 'artemisApp.exercise.easy', value: DifficultyLevel.EASY, checked: false },
+                    { name: 'artemisApp.exercise.medium', value: DifficultyLevel.MEDIUM, checked: false },
+                    { name: 'artemisApp.exercise.hard', value: DifficultyLevel.HARD, checked: false },
+                ],
+            },
+            categoryFilter: {
+                isDisplayed: true,
+                options: [
+                    { category: new ExerciseCategory('category1', undefined), searched: false },
+                    { category: new ExerciseCategory('category2', undefined), searched: false },
+                ],
+            },
+            achievedScore: SCORE_FILTER,
+            achievablePoints: POINTS_FILTER,
+        };
+
+        fixture.detectChanges();
+    });
+
+    it('should initialize filters properly', () => {
+        expect(component.categoryFilter).toEqual(component.exerciseFilters?.categoryFilter);
+        expect(component.typeFilter).toEqual(component.exerciseFilters?.exerciseTypesFilter);
+        expect(component.difficultyFilter).toEqual(component.exerciseFilters?.difficultyFilter);
+        expect(component.achievedScore).toEqual(component.exerciseFilters?.achievedScore);
+        expect(component.achievablePoints).toEqual(component.exerciseFilters?.achievablePoints);
+    });
+
+    describe('should close modal', () => {
+        it('with button in upper right corner on click', () => {
+            const closeSpy = jest.spyOn(activeModal, 'close');
+            const closeModalSpy = jest.spyOn(component, 'closeModal');
+
+            const closeButton = fixture.debugElement.query(By.css('.btn-close'));
+            expect(closeButton).not.toBeNull();
+
+            closeButton.nativeElement.click();
+            expect(closeSpy).toHaveBeenCalledOnce();
+            expect(closeModalSpy).toHaveBeenCalledOnce();
+        });
+
+        it('with button in lower right corner on click', () => {
+            const closeSpy = jest.spyOn(activeModal, 'close');
+            const closeModalSpy = jest.spyOn(component, 'closeModal');
+
+            const cancelButton = fixture.debugElement.query(By.css('button[jhiTranslate="entity.action.cancel"]'));
+            expect(cancelButton).not.toBeNull();
+
+            cancelButton.nativeElement.click();
+            expect(closeSpy).toHaveBeenCalledOnce();
+            expect(closeModalSpy).toHaveBeenCalledOnce();
+        });
+    });
+
+    describe('select category', () => {
+        it('should mark a category as selected when category is found', () => {
+            expect(component.categoryFilter?.options[0].searched).toBeFalse(); // if it is not false in the beginning we do not test anything here
+            const onSelectItemSpy = jest.spyOn(component, 'onSelectItem');
+
+            component.model = 'category1';
+            // Simulate selecting an item
+            const event = {
+                item: component.selectableCategoryOptions[0],
+                preventDefault: jest.fn(),
+            };
+            component.onSelectItem(event);
+            fixture.detectChanges();
+
+            expect(onSelectItemSpy).toHaveBeenCalledOnce();
+            expect(component.categoryFilter?.options[0].searched).toBeTrue();
+            expect(component.model).toBeUndefined(); // Clear the input field after selection
+        });
+
+        it('should not change category filter when no item is provided', () => {
+            expect(component.categoryFilter?.options[0].searched).toBeFalse(); // if it is not false in the beginning we do not test anything here
+            const onSelectItemSpy = jest.spyOn(component, 'onSelectItem');
+
+            component.model = 'categoryThatIsNotDefinedAndSearchedViaEnter';
+            const event = {
+                item: undefined,
+                preventDefault: jest.fn(),
+                stopPropagation: jest.fn(),
+            };
+            component.onSelectItem(event);
+            fixture.detectChanges();
+
+            expect(onSelectItemSpy).toHaveBeenCalledOnce();
+            expect(component.categoryFilter?.options[0].searched).toBeFalse();
+            expect(component.model).toBe('categoryThatIsNotDefinedAndSearchedViaEnter');
+        });
+    });
+
+    it('should reset all filters when button is clicked', () => {
+        component.categoryFilter!.options[0].searched = true;
+        component.categoryFilter!.options[1].searched = true;
+        component.typeFilter!.options[0].checked = true;
+        component.typeFilter!.options[1].checked = true;
+        component.difficultyFilter!.options[0].checked = true;
+        component.difficultyFilter!.options[1].checked = false;
+        component.achievablePoints!.filter.selectedMax = 10;
+        component.achievedScore!.filter.selectedMin = 10;
+        const resetFilterSpy = jest.spyOn(component, 'clearFilter');
+
+        const resetButton = fixture.debugElement.query(By.css('span[jhiTranslate="artemisApp.courseOverview.exerciseFilter.clearFilter"]'));
+        expect(resetButton).not.toBeNull();
+        resetButton.nativeElement.click();
+
+        expect(resetFilterSpy).toHaveBeenCalledOnce();
+        expect(component.categoryFilter!.options[0].searched).toBeFalse();
+        expect(component.categoryFilter!.options[1].searched).toBeFalse();
+        expect(component.typeFilter!.options[0].checked).toBeFalse();
+        expect(component.typeFilter!.options[1].checked).toBeFalse();
+        expect(component.difficultyFilter!.options[0].checked).toBeFalse();
+        expect(component.difficultyFilter!.options[1].checked).toBeFalse();
+        expect(component.achievablePoints!.filter.selectedMax).toBe(component.achievablePoints?.filter.generalMax);
+        expect(component.achievedScore!.filter.selectedMin).toBe(component.achievedScore?.filter.generalMin);
+    });
+
+    it('should apply filters, emit the correct sidebar data and close the modal', () => {
+        component.sidebarData = {
+            groupByCategory: true,
+            sidebarType: 'exercise',
+            groupedData: {
+                past: { entityData: [SIDEBAR_CARD_ELEMENT_1, SIDEBAR_CARD_ELEMENT_2, SIDEBAR_CARD_ELEMENT_3] },
+            },
+            ungroupedData: [SIDEBAR_CARD_ELEMENT_1, SIDEBAR_CARD_ELEMENT_2, SIDEBAR_CARD_ELEMENT_3],
+        };
+        component.categoryFilter!.options[0].searched = true; // must have 'category1'
+        component.typeFilter!.options[0].checked = true; // must be a programming exercise
+        component.difficultyFilter!.options[0].checked = true; // must be easy
+        component.achievablePoints!.filter.selectedMax = 10;
+        component.achievedScore!.filter.selectedMin = 10;
+
+        const filterAppliedEmitSpy = jest.spyOn(component.filterApplied, 'emit');
+        const applyFilterSpy = jest.spyOn(component, 'applyFilter');
+        const closeModalSpy = jest.spyOn(component, 'closeModal');
+        const applyButton = fixture.debugElement.query(By.css('button[jhiTranslate="artemisApp.courseOverview.exerciseFilter.applyFilter"]'));
+        expect(applyButton).not.toBeNull();
+        applyButton.nativeElement.click();
+
+        expect(applyFilterSpy).toHaveBeenCalledOnce();
+        expect(filterAppliedEmitSpy).toHaveBeenCalledOnce();
+        expect(filterAppliedEmitSpy).toHaveBeenCalledWith({
+            filteredSidebarData: component.sidebarData,
+            appliedExerciseFilters: component.exerciseFilters,
+            isFilterActive: true,
+        });
+        /** only {@link EXERCISE_3} fullfills the filter options and should be emitted in the event */
+        expect(component.sidebarData.ungroupedData?.length).toBe(1);
+
+        expect(closeModalSpy).toHaveBeenCalledOnce();
+    });
+});
diff --git a/src/test/javascript/spec/component/shared/exercise-filter/exercise-filter-modal.helper.spec.ts b/src/test/javascript/spec/component/shared/exercise-filter/exercise-filter-modal.helper.spec.ts
new file mode 100644
index 000000000000..23ec9d99c4be
--- /dev/null
+++ b/src/test/javascript/spec/component/shared/exercise-filter/exercise-filter-modal.helper.spec.ts
@@ -0,0 +1,333 @@
+import { ExerciseCategory } from 'app/entities/exercise-category.model';
+import { DifficultyLevel, Exercise, ExerciseType } from 'app/entities/exercise.model';
+import { Result } from 'app/entities/result.model';
+import { StudentParticipation } from 'app/entities/participation/student-participation.model';
+import { SidebarCardElement } from 'app/types/sidebar';
+import {
+    satisfiesCategoryFilter,
+    satisfiesDifficultyFilter,
+    satisfiesFilters,
+    satisfiesPointsFilter,
+    satisfiesScoreFilter,
+} from 'app/shared/exercise-filter/exercise-filter-modal.helper';
+import { FilterDetails, RangeFilter } from 'app/types/exercise-filter';
+
+const EXERCISE_1 = { categories: [new ExerciseCategory('category1', '#691b0b'), new ExerciseCategory('category2', '#1b97ca')], maxPoints: 10, type: ExerciseType.TEXT } as Exercise;
+const EXERCISE_2 = { categories: [new ExerciseCategory('category3', '#0d3cc2'), new ExerciseCategory('category4', '#6ae8ac')], maxPoints: 5 } as Exercise;
+const EXERCISE_4 = { categories: [new ExerciseCategory('category1', '#691b0b'), new ExerciseCategory('category8', '#1b97ca')], maxPoints: 10 } as Exercise;
+const EXERCISE_5 = { maxPoints: 20 } as Exercise;
+
+const SIDEBAR_CARD_ELEMENT_1 = {
+    exercise: EXERCISE_1,
+    type: ExerciseType.TEXT,
+    difficulty: DifficultyLevel.HARD,
+    studentParticipation: { results: [{ score: 7.7 } as Result] } as StudentParticipation,
+} as SidebarCardElement;
+const SIDEBAR_CARD_ELEMENT_2 = {
+    exercise: EXERCISE_2,
+    type: ExerciseType.PROGRAMMING,
+    difficulty: DifficultyLevel.EASY,
+    studentParticipation: { results: [{ score: 82.3 } as Result] } as StudentParticipation,
+} as SidebarCardElement;
+const SIDEBAR_CARD_ELEMENT_4 = { exercise: EXERCISE_4 } as SidebarCardElement;
+
+/** contains duplicated type and difficulty with {@link SIDEBAR_CARD_ELEMENT_2}*/
+const SIDEBAR_CARD_ELEMENT_5 = { exercise: EXERCISE_5, type: ExerciseType.PROGRAMMING, difficulty: DifficultyLevel.EASY } as SidebarCardElement;
+
+describe('satisfiesDifficultyFilter', () => {
+    it('should return true if difficulty filter is undefined', () => {
+        const difficultyFilter = undefined;
+
+        const resultItemWithDifficulty = satisfiesDifficultyFilter(SIDEBAR_CARD_ELEMENT_1, difficultyFilter);
+        expect(resultItemWithDifficulty).toBeTrue();
+
+        const resultItemWithoutDifficulty = satisfiesDifficultyFilter(SIDEBAR_CARD_ELEMENT_4, difficultyFilter);
+        expect(resultItemWithoutDifficulty).toBeTrue();
+    });
+
+    it('should return true if difficulty filter is []', () => {
+        const difficultyFilter: DifficultyLevel[] = [];
+
+        const resultItemWithDifficulty = satisfiesDifficultyFilter(SIDEBAR_CARD_ELEMENT_1, difficultyFilter);
+        expect(resultItemWithDifficulty).toBeTrue();
+
+        const resultItemWithoutDifficulty = satisfiesDifficultyFilter(SIDEBAR_CARD_ELEMENT_4, difficultyFilter);
+        expect(resultItemWithoutDifficulty).toBeTrue();
+    });
+
+    it('should return true if difficulty is in difficulty filter', () => {
+        const difficultyFilter = [DifficultyLevel.HARD];
+
+        const resultItemWithDifficulty = satisfiesDifficultyFilter(SIDEBAR_CARD_ELEMENT_1, difficultyFilter);
+        expect(resultItemWithDifficulty).toBeTrue();
+    });
+
+    it('should return false if difficulty is NOT in difficulty filter', () => {
+        const difficultyFilter = [DifficultyLevel.HARD];
+
+        const resultItemWithDifficulty = satisfiesDifficultyFilter(SIDEBAR_CARD_ELEMENT_2, difficultyFilter);
+        expect(resultItemWithDifficulty).toBeFalse();
+
+        const resultItemWithoutDifficulty = satisfiesDifficultyFilter(SIDEBAR_CARD_ELEMENT_4, difficultyFilter);
+        expect(resultItemWithoutDifficulty).toBeFalse();
+    });
+});
+
+describe('satisfiesCategoryFilter', () => {
+    it('should return true if difficulty filter is []', () => {
+        const categoryFilter: ExerciseCategory[] = [];
+
+        const resultItemWithCategory = satisfiesCategoryFilter(SIDEBAR_CARD_ELEMENT_1, categoryFilter);
+        expect(resultItemWithCategory).toBeTrue();
+
+        const resultItemWithoutCategory = satisfiesCategoryFilter(SIDEBAR_CARD_ELEMENT_5, categoryFilter);
+        expect(resultItemWithoutCategory).toBeTrue();
+    });
+
+    it('should return true category is included in difficulty filter', () => {
+        const categoryFilter = [new ExerciseCategory('category1', '#691b0b')];
+
+        const resultItemWithMatchingCategory = satisfiesCategoryFilter(SIDEBAR_CARD_ELEMENT_1, categoryFilter);
+        expect(resultItemWithMatchingCategory).toBeTrue();
+    });
+
+    it('should return false if difficulty is NOT in difficulty filter', () => {
+        const categoryFilter = [new ExerciseCategory('notExistingCategory', '#691b0b')];
+
+        const resultItemWithCategory = satisfiesCategoryFilter(SIDEBAR_CARD_ELEMENT_1, categoryFilter);
+        expect(resultItemWithCategory).toBeFalse();
+
+        const resultItemWithoutCategory = satisfiesCategoryFilter(SIDEBAR_CARD_ELEMENT_5, categoryFilter);
+        expect(resultItemWithoutCategory).toBeFalse();
+    });
+});
+
+describe('satisfiesScoreFilter', () => {
+    it('should return true if score filter is undefined', () => {
+        const scoreFilter = undefined;
+
+        const resultItemWithScore = satisfiesScoreFilter(SIDEBAR_CARD_ELEMENT_1, true, scoreFilter);
+        expect(resultItemWithScore).toBeTrue();
+
+        const resultItemWithoutScore = satisfiesScoreFilter(SIDEBAR_CARD_ELEMENT_4, true, scoreFilter);
+        expect(resultItemWithoutScore).toBeTrue();
+    });
+
+    it('should return true if score filter is not applied', () => {
+        const scoreFilter: RangeFilter = {
+            isDisplayed: true,
+            filter: {
+                selectedMin: 0,
+                selectedMax: 1,
+                generalMin: 0,
+                generalMax: 1,
+                step: 1,
+            },
+        };
+
+        const resultItemWithScore = satisfiesScoreFilter(SIDEBAR_CARD_ELEMENT_1, false, scoreFilter);
+        expect(resultItemWithScore).toBeTrue();
+
+        const resultItemWithoutScore = satisfiesScoreFilter(SIDEBAR_CARD_ELEMENT_4, false, scoreFilter);
+        expect(resultItemWithoutScore).toBeTrue();
+    });
+
+    it('should return true if score is in score filter', () => {
+        const scoreFilter: RangeFilter = {
+            isDisplayed: true,
+            filter: {
+                selectedMin: 5,
+                selectedMax: 10,
+                generalMin: 0,
+                generalMax: 80,
+                step: 1,
+            },
+        };
+
+        const resultItemWithScore = satisfiesScoreFilter(SIDEBAR_CARD_ELEMENT_1, true, scoreFilter);
+        expect(resultItemWithScore).toBeTrue();
+    });
+
+    it('should return false if score is NOT in score filter', () => {
+        const scoreFilter: RangeFilter = {
+            isDisplayed: true,
+            filter: {
+                selectedMin: 20,
+                selectedMax: 30,
+                generalMin: 0,
+                generalMax: 80,
+                step: 1,
+            },
+        };
+
+        const resultItemWithScore = satisfiesScoreFilter(SIDEBAR_CARD_ELEMENT_1, true, scoreFilter);
+        expect(resultItemWithScore).toBeFalse();
+
+        const resultItemWithoutScore = satisfiesScoreFilter(SIDEBAR_CARD_ELEMENT_4, true, scoreFilter);
+        expect(resultItemWithoutScore).toBeFalse();
+    });
+
+    it('should return true if score of participation is not defined (not participated) and lower bound is 0', () => {
+        const scoreFilter: RangeFilter = {
+            isDisplayed: true,
+            filter: {
+                selectedMin: 0,
+                selectedMax: 10,
+                generalMin: 0,
+                generalMax: 80,
+                step: 1,
+            },
+        };
+        const resultItemWithScore = satisfiesScoreFilter(SIDEBAR_CARD_ELEMENT_4, true, scoreFilter);
+        expect(resultItemWithScore).toBeTrue();
+    });
+
+    it('should return false if score of participation is not defined (not participated) and lower bound is NOT 0', () => {
+        const scoreFilter: RangeFilter = {
+            isDisplayed: true,
+            filter: {
+                selectedMin: 1,
+                selectedMax: 10,
+                generalMin: 0,
+                generalMax: 80,
+                step: 1,
+            },
+        };
+        const resultItemWithScore = satisfiesScoreFilter(SIDEBAR_CARD_ELEMENT_4, true, scoreFilter);
+        expect(resultItemWithScore).toBeFalse();
+    });
+});
+
+describe('satisfiesPointsFilter', () => {
+    it('should return true if points filter is undefined', () => {
+        const pointsFilter = undefined;
+
+        const resultItemWithPoints = satisfiesPointsFilter(SIDEBAR_CARD_ELEMENT_1, true, pointsFilter);
+        expect(resultItemWithPoints).toBeTrue();
+
+        const resultItemWithoutPoints = satisfiesPointsFilter(SIDEBAR_CARD_ELEMENT_4, true, pointsFilter);
+        expect(resultItemWithoutPoints).toBeTrue();
+    });
+
+    it('should return true if points filter is not applied', () => {
+        const pointsFilter: RangeFilter = {
+            isDisplayed: true,
+            filter: {
+                selectedMin: 0,
+                selectedMax: 1,
+                generalMin: 0,
+                generalMax: 1,
+                step: 1,
+            },
+        };
+
+        const resultItemWithPoints = satisfiesPointsFilter(SIDEBAR_CARD_ELEMENT_1, false, pointsFilter);
+        expect(resultItemWithPoints).toBeTrue();
+
+        const resultItemWithoutPoints = satisfiesPointsFilter(SIDEBAR_CARD_ELEMENT_4, false, pointsFilter);
+        expect(resultItemWithoutPoints).toBeTrue();
+    });
+
+    it('should return true if points is in points filter', () => {
+        const pointsFilter: RangeFilter = {
+            isDisplayed: true,
+            filter: {
+                selectedMin: 9,
+                selectedMax: 10,
+                generalMin: 0,
+                generalMax: 80,
+                step: 1,
+            },
+        };
+
+        const resultItemWithPoints = satisfiesPointsFilter(SIDEBAR_CARD_ELEMENT_1, true, pointsFilter);
+        expect(resultItemWithPoints).toBeTrue();
+    });
+
+    it('should return false if points is NOT in points filter', () => {
+        const pointsFilter: RangeFilter = {
+            isDisplayed: true,
+            filter: {
+                selectedMin: 11,
+                selectedMax: 12,
+                generalMin: 0,
+                generalMax: 80,
+                step: 1,
+            },
+        };
+
+        const resultItemWithPoints = satisfiesPointsFilter(SIDEBAR_CARD_ELEMENT_1, true, pointsFilter);
+        expect(resultItemWithPoints).toBeFalse();
+
+        const resultItemWithoutPoints = satisfiesPointsFilter(SIDEBAR_CARD_ELEMENT_4, true, pointsFilter);
+        expect(resultItemWithoutPoints).toBeFalse();
+    });
+});
+
+describe('satisfiesFilters', () => {
+    it('should return true if item satisfies filters', () => {
+        const filter: FilterDetails = {
+            selectedCategories: [new ExerciseCategory('category1', '#691b0b')],
+            searchedTypes: [ExerciseType.TEXT],
+            searchedDifficulties: [DifficultyLevel.HARD],
+            isScoreFilterApplied: false,
+            isPointsFilterApplied: false,
+            achievedScore: {
+                isDisplayed: true,
+                filter: {
+                    selectedMin: 5,
+                    selectedMax: 10,
+                    generalMin: 0,
+                    generalMax: 80,
+                    step: 1,
+                },
+            },
+            achievablePoints: {
+                isDisplayed: true,
+                filter: {
+                    selectedMin: 9,
+                    selectedMax: 10,
+                    generalMin: 0,
+                    generalMax: 80,
+                    step: 1,
+                },
+            },
+        };
+        const resultItem = satisfiesFilters(SIDEBAR_CARD_ELEMENT_1, filter);
+
+        expect(resultItem).toBeTrue();
+    });
+
+    it('should return false if item does not satisfy the score filter', () => {
+        const filter: FilterDetails = {
+            selectedCategories: [new ExerciseCategory('category1', '#691b0b')],
+            searchedTypes: [ExerciseType.TEXT],
+            searchedDifficulties: [DifficultyLevel.HARD],
+            isScoreFilterApplied: false,
+            isPointsFilterApplied: false,
+            achievedScore: {
+                isDisplayed: true,
+                filter: {
+                    selectedMin: 69,
+                    selectedMax: 70,
+                    generalMin: 0,
+                    generalMax: 80,
+                    step: 1,
+                },
+            },
+            achievablePoints: {
+                isDisplayed: true,
+                filter: {
+                    selectedMin: 9,
+                    selectedMax: 10,
+                    generalMin: 0,
+                    generalMax: 80,
+                    step: 1,
+                },
+            },
+        };
+        const resultItem = satisfiesFilters(SIDEBAR_CARD_ELEMENT_1, filter);
+
+        expect(resultItem).toBeTrue();
+    });
+});
diff --git a/src/test/javascript/spec/component/shared/sidebar/sidebar-accordion.component.spec.ts b/src/test/javascript/spec/component/shared/sidebar/sidebar-accordion.component.spec.ts
index e1e67128974d..bcffb82bc9c1 100644
--- a/src/test/javascript/spec/component/shared/sidebar/sidebar-accordion.component.spec.ts
+++ b/src/test/javascript/spec/component/shared/sidebar/sidebar-accordion.component.spec.ts
@@ -63,10 +63,6 @@ describe('SidebarAccordionComponent', () => {
         jest.restoreAllMocks();
     });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
-
     it('should toggle collapse state for a group', () => {
         const groupKey = 'noDate';
         component.toggleGroupCategoryCollapse(groupKey);
@@ -89,10 +85,20 @@ describe('SidebarAccordionComponent', () => {
         component.searchValue = 'test';
         component.ngOnChanges();
 
+        expect(component.expandAll).toHaveBeenCalledOnce();
+    });
+
+    it('should call expandAll when filter is active', () => {
+        jest.spyOn(component, 'expandAll');
+
+        component.isFilterActive = true;
+        component.ngOnChanges();
+
         fixture.detectChanges();
 
-        expect(component.expandAll).toHaveBeenCalled();
+        expect(component.expandAll).toHaveBeenCalledOnce();
     });
+
     it('should correctly call setStoredCollapseState when searchValue is cleared', () => {
         const expectedStateAfterClear = component.collapseState;
         component.searchValue = 'initial value';
@@ -106,7 +112,7 @@ describe('SidebarAccordionComponent', () => {
 
         fixture.detectChanges();
 
-        expect(component.setStoredCollapseState).toHaveBeenCalled();
+        expect(component.setStoredCollapseState).toHaveBeenCalledOnce();
         expect(component.collapseState).toEqual(expectedStateAfterClear);
     });
 
diff --git a/src/test/javascript/spec/component/shared/sidebar/sidebar.component.spec.ts b/src/test/javascript/spec/component/shared/sidebar/sidebar.component.spec.ts
index b809b3e3708d..55ad12ae7776 100644
--- a/src/test/javascript/spec/component/shared/sidebar/sidebar.component.spec.ts
+++ b/src/test/javascript/spec/component/shared/sidebar/sidebar.component.spec.ts
@@ -4,25 +4,39 @@ import { SidebarCardMediumComponent } from 'app/shared/sidebar/sidebar-card-medi
 import { SidebarCardItemComponent } from 'app/shared/sidebar/sidebar-card-item/sidebar-card-item.component';
 import { SidebarCardDirective } from 'app/shared/sidebar/sidebar-card.directive';
 import { ArtemisTestModule } from '../../../test.module';
-import { DebugElement } from '@angular/core';
 import { SearchFilterPipe } from 'app/shared/pipes/search-filter.pipe';
 import { SearchFilterComponent } from 'app/shared/search-filter/search-filter.component';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
-
 import { By } from '@angular/platform-browser';
-import { MockModule, MockPipe } from 'ng-mocks';
+import { MockComponent, MockDirective, MockModule, MockPipe, MockProvider } from 'ng-mocks';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MockRouterLinkDirective } from '../../../helpers/mocks/directive/mock-router-link.directive';
 import { RouterModule } from '@angular/router';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
+import { SidebarCardElement, SidebarData } from 'app/types/sidebar';
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
+import { ExerciseFilterModalComponent } from 'app/shared/exercise-filter/exercise-filter-modal.component';
+import { ExerciseFilterResults } from 'app/types/exercise-filter';
+import { EventEmitter } from '@angular/core';
+import { ExerciseCategory } from 'app/entities/exercise-category.model';
+import { ExerciseType } from 'app/entities/exercise.model';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 
 describe('SidebarComponent', () => {
     let component: SidebarComponent;
     let fixture: ComponentFixture<SidebarComponent>;
-    let debugElement: DebugElement;
+    let modalService: NgbModal;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ArtemisTestModule, MockModule(FormsModule), MockModule(ReactiveFormsModule), MockModule(RouterModule)],
+            imports: [
+                ArtemisTestModule,
+                MockModule(FormsModule),
+                MockModule(ReactiveFormsModule),
+                MockModule(RouterModule),
+                MockDirective(TranslateDirective),
+                MockComponent(ExerciseFilterModalComponent),
+            ],
             declarations: [
                 SidebarComponent,
                 SidebarCardMediumComponent,
@@ -33,18 +47,19 @@ describe('SidebarComponent', () => {
                 MockPipe(ArtemisTranslatePipe),
                 MockRouterLinkDirective,
             ],
+            providers: [MockProvider(NgbModal)],
         }).compileComponents();
     });
 
     beforeEach(() => {
         fixture = TestBed.createComponent(SidebarComponent);
         component = fixture.componentInstance;
-        debugElement = fixture.debugElement;
-        fixture.detectChanges();
-    });
+        modalService = TestBed.inject(NgbModal);
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
+        component.sidebarData = {
+            sidebarType: 'default',
+        } as SidebarData;
+        fixture.detectChanges();
     });
 
     it('should filter sidebar items based on search criteria', () => {
@@ -71,11 +86,16 @@ describe('SidebarComponent', () => {
             groupByCategory: true,
             ungroupedData: [],
         };
-        fixture.detectChanges();
+        component.sidebarDataBeforeFiltering = {
+            groupByCategory: true,
+            ungroupedData: [] as SidebarCardElement[],
+        };
+
+        const noDataMessageElement = fixture.debugElement.query(By.css('.scrollable-item-content')).nativeElement;
 
-        const noDataMessageElement = debugElement.query(By.css('[jhiTranslate$=noDataFound]'));
         expect(noDataMessageElement).toBeTruthy();
-        expect(noDataMessageElement.nativeElement.getAttribute('jhiTranslate')).toBe('artemisApp.courseOverview.general.noDataFound');
+        // unfortunately the translation key is cut off in debug mode that seems to be used for testing
+        expect(noDataMessageElement.getAttribute('ng-reflect-jhi-translate')).toBe('artemisApp.courseOverview.gene');
     });
 
     it('should give the correct size for exercises', () => {
@@ -109,4 +129,118 @@ describe('SidebarComponent', () => {
         const size = component.getSize();
         expect(size).toBe('M');
     });
+
+    describe('openFilterExercisesLink', () => {
+        const FILTER_LINK_SELECTOR = '.text-primary a';
+
+        it('should display the filter link', () => {
+            component.showFilter = true;
+            fixture.detectChanges();
+
+            const filterLink = fixture.debugElement.query(By.css(FILTER_LINK_SELECTOR));
+
+            expect(filterLink).toBeTruthy();
+        });
+
+        it('should NOT display the filter link when sidebarType is NOT exercise', () => {
+            const filterLink = fixture.debugElement.query(By.css(FILTER_LINK_SELECTOR));
+
+            expect(filterLink).toBeFalsy();
+        });
+
+        it('should open modal on click with initialized filters', () => {
+            component.showFilter = true;
+            fixture.detectChanges();
+            const filterAppliedMock = new EventEmitter<ExerciseFilterResults>();
+            const mockReturnValue = {
+                result: Promise.resolve({}),
+                componentInstance: {
+                    sidebarData: {},
+                    exerciseFilters: {},
+                    filterApplied: filterAppliedMock,
+                },
+            } as NgbModalRef;
+            const openModalSpy = jest.spyOn(modalService, 'open').mockReturnValue(mockReturnValue);
+            const openFilterExercisesDialogSpy = jest.spyOn(component, 'openFilterExercisesDialog');
+            const initFilterOptionsSpy = jest.spyOn(component, 'initializeFilterOptions');
+
+            const filterLink = fixture.debugElement.query(By.css(FILTER_LINK_SELECTOR)).nativeElement;
+            filterLink.click();
+
+            expect(initFilterOptionsSpy).toHaveBeenCalledOnce();
+            expect(openFilterExercisesDialogSpy).toHaveBeenCalledOnce();
+            expect(openModalSpy).toHaveBeenCalledWith(ExerciseFilterModalComponent, { animation: true, backdrop: 'static', size: 'lg' });
+        });
+    });
+
+    describe('openFilterExercisesDialog', () => {
+        it('should subscribe to filterApplied from modal', () => {
+            const filterAppliedEmitter = new EventEmitter<ExerciseFilterResults>();
+            const mockModalRef: Partial<NgbModalRef> = {
+                componentInstance: {
+                    filterApplied: filterAppliedEmitter,
+                },
+            };
+            const openSpy = jest.spyOn(modalService, 'open').mockReturnValue(mockModalRef as NgbModalRef);
+            const subscribeSpy = jest.spyOn(filterAppliedEmitter, 'subscribe');
+
+            component.openFilterExercisesDialog();
+
+            expect(openSpy).toHaveBeenCalledOnce();
+            expect(subscribeSpy).toHaveBeenCalledOnce();
+        });
+
+        it('should update variables correctly when filterApplied is emitted', () => {
+            const filterAppliedEmitter = new EventEmitter<ExerciseFilterResults>();
+            const mockModalRef: Partial<NgbModalRef> = {
+                componentInstance: {
+                    filterApplied: filterAppliedEmitter,
+                },
+            };
+            jest.spyOn(modalService, 'open').mockReturnValue(mockModalRef as NgbModalRef);
+
+            const mockFilterResults: ExerciseFilterResults = {
+                filteredSidebarData: {
+                    sidebarType: 'exercise',
+                    groupByCategory: true,
+                    ungroupedData: [{ title: 'test sidebar card element' } as SidebarCardElement],
+                    groupedData: {
+                        testGroup: {
+                            entityData: [{ title: 'test group element' } as SidebarCardElement],
+                        },
+                    },
+                },
+                appliedExerciseFilters: {
+                    categoryFilter: {
+                        isDisplayed: true,
+                        options: [
+                            {
+                                category: new ExerciseCategory('test', undefined),
+                                searched: true,
+                            },
+                        ],
+                    },
+                    exerciseTypesFilter: {
+                        isDisplayed: true,
+                        options: [
+                            {
+                                name: 'testType',
+                                value: ExerciseType.PROGRAMMING,
+                                checked: true,
+                                icon: 'testIcon' as unknown as IconProp,
+                            },
+                        ],
+                    },
+                },
+                isFilterActive: true,
+            };
+
+            component.openFilterExercisesDialog();
+            filterAppliedEmitter.emit(mockFilterResults);
+
+            expect(component.sidebarData).toEqual(mockFilterResults.filteredSidebarData);
+            expect(component.exerciseFilters).toEqual(mockFilterResults.appliedExerciseFilters);
+            expect(component.isFilterActive).toBeTrue();
+        });
+    });
 });
diff --git a/src/test/javascript/spec/component/shared/sidebar/sidebar.helper.spec.ts b/src/test/javascript/spec/component/shared/sidebar/sidebar.helper.spec.ts
new file mode 100644
index 000000000000..a29596e12685
--- /dev/null
+++ b/src/test/javascript/spec/component/shared/sidebar/sidebar.helper.spec.ts
@@ -0,0 +1,329 @@
+import {
+    getAchievablePointsAndAchievedScoreFilterOptions,
+    getExerciseCategoryFilterOptions,
+    getExerciseDifficultyFilterOptions,
+    getExerciseTypeFilterOptions,
+} from 'app/shared/sidebar/sidebar.helper';
+import { SidebarCardElement, SidebarData } from 'app/types/sidebar';
+import { ExerciseCategory } from 'app/entities/exercise-category.model';
+import { DifficultyLevel, Exercise, ExerciseType, getIcon } from 'app/entities/exercise.model';
+import { StudentParticipation } from 'app/entities/participation/student-participation.model';
+import { Result } from 'app/entities/result.model';
+
+const EXERCISE_1 = { categories: [new ExerciseCategory('category1', '#691b0b'), new ExerciseCategory('category2', '#1b97ca')], maxPoints: 10 } as Exercise;
+const EXERCISE_2 = { categories: [new ExerciseCategory('category3', '#0d3cc2'), new ExerciseCategory('category4', '#6ae8ac')], maxPoints: 5 } as Exercise;
+const EXERCISE_3 = { categories: [new ExerciseCategory('category5', '#691b0b')], maxPoints: 2 } as Exercise;
+
+/** contains 1 duplicate categories and maxPoints with {@link EXERCISE_1} */
+const EXERCISE_4 = { categories: [new ExerciseCategory('category1', '#691b0b'), new ExerciseCategory('category8', '#1b97ca')], maxPoints: 10 } as Exercise;
+const EXERCISE_5 = { categories: [] as ExerciseCategory[], maxPoints: 20 } as Exercise;
+
+const SIDEBAR_CARD_ELEMENT_1 = {
+    exercise: EXERCISE_1,
+    type: ExerciseType.TEXT,
+    difficulty: DifficultyLevel.HARD,
+    studentParticipation: { results: [{ score: 7.7 } as Result] } as StudentParticipation,
+} as SidebarCardElement;
+const SIDEBAR_CARD_ELEMENT_2 = {
+    exercise: EXERCISE_2,
+    type: ExerciseType.PROGRAMMING,
+    difficulty: DifficultyLevel.EASY,
+    studentParticipation: { results: [{ score: 82.3 } as Result] } as StudentParticipation,
+} as SidebarCardElement;
+const SIDEBAR_CARD_ELEMENT_3 = {
+    exercise: EXERCISE_3,
+    type: ExerciseType.QUIZ,
+    difficulty: DifficultyLevel.MEDIUM,
+    studentParticipation: { results: [{ score: 44.5 } as Result] } as StudentParticipation,
+} as SidebarCardElement;
+const SIDEBAR_CARD_ELEMENT_4 = { exercise: EXERCISE_4 } as SidebarCardElement;
+
+/** contains duplicated type and difficulty with {@link SIDEBAR_CARD_ELEMENT_2}*/
+const SIDEBAR_CARD_ELEMENT_5 = { exercise: EXERCISE_5, type: ExerciseType.PROGRAMMING, difficulty: DifficultyLevel.EASY } as SidebarCardElement;
+
+describe('getExerciseCategoryFilterOptions', () => {
+    it('should return all exercise categories', () => {
+        const sidebarData: SidebarData = {
+            groupByCategory: true,
+            groupedData: {
+                dueSoon: {
+                    entityData: [],
+                },
+                noDate: {
+                    entityData: [SIDEBAR_CARD_ELEMENT_1, SIDEBAR_CARD_ELEMENT_2],
+                },
+                past: {
+                    entityData: [SIDEBAR_CARD_ELEMENT_3],
+                },
+            },
+            ungroupedData: [SIDEBAR_CARD_ELEMENT_1, SIDEBAR_CARD_ELEMENT_2, SIDEBAR_CARD_ELEMENT_3],
+        };
+
+        const exerciseCategories = getExerciseCategoryFilterOptions(sidebarData, undefined);
+        expect(exerciseCategories).toEqual({
+            isDisplayed: true,
+            options: [
+                { category: new ExerciseCategory('category1', '#691b0b'), searched: false },
+                { category: new ExerciseCategory('category2', '#1b97ca'), searched: false },
+                { category: new ExerciseCategory('category3', '#0d3cc2'), searched: false },
+                { category: new ExerciseCategory('category4', '#6ae8ac'), searched: false },
+                { category: new ExerciseCategory('category5', '#691b0b'), searched: false },
+            ],
+        });
+    });
+
+    it('should filter duplicates', () => {
+        const sidebarData: SidebarData = {
+            groupByCategory: true,
+            ungroupedData: [SIDEBAR_CARD_ELEMENT_1, SIDEBAR_CARD_ELEMENT_4],
+        };
+
+        const exerciseCategories = getExerciseCategoryFilterOptions(sidebarData, undefined);
+        expect(exerciseCategories).toEqual({
+            isDisplayed: true,
+            options: [
+                { category: new ExerciseCategory('category1', '#691b0b'), searched: false },
+                { category: new ExerciseCategory('category2', '#1b97ca'), searched: false },
+                { category: new ExerciseCategory('category8', '#1b97ca'), searched: false },
+            ],
+        });
+    });
+
+    it('should sort categories alphanumerical', () => {
+        const sidebarData: SidebarData = {
+            groupByCategory: true,
+            ungroupedData: [SIDEBAR_CARD_ELEMENT_2, SIDEBAR_CARD_ELEMENT_1],
+        };
+
+        const exerciseCategories = getExerciseCategoryFilterOptions(sidebarData, undefined);
+        expect(exerciseCategories).toEqual({
+            isDisplayed: true,
+            options: [
+                { category: new ExerciseCategory('category1', '#691b0b'), searched: false },
+                { category: new ExerciseCategory('category2', '#1b97ca'), searched: false },
+                { category: new ExerciseCategory('category3', '#0d3cc2'), searched: false },
+                { category: new ExerciseCategory('category4', '#6ae8ac'), searched: false },
+            ],
+        });
+    });
+
+    it('should not be displayed if no categories are available', () => {
+        const sidebarData: SidebarData = {
+            groupByCategory: true,
+            ungroupedData: [SIDEBAR_CARD_ELEMENT_5],
+        };
+
+        const exerciseCategories = getExerciseCategoryFilterOptions(sidebarData, undefined);
+        expect(exerciseCategories).toEqual({
+            isDisplayed: false,
+            options: [],
+        });
+    });
+
+    it('should directly return if already initialized', () => {
+        const sidebarData: SidebarData = {
+            groupByCategory: true,
+            ungroupedData: [SIDEBAR_CARD_ELEMENT_1, SIDEBAR_CARD_ELEMENT_2],
+        };
+
+        const exerciseCategories = getExerciseCategoryFilterOptions(sidebarData, {
+            categoryFilter: {
+                isDisplayed: false,
+                options: [],
+            },
+        });
+        expect(exerciseCategories).toEqual({
+            isDisplayed: false,
+            options: [],
+        });
+    });
+});
+
+describe('getExerciseTypeFilterOptions', () => {
+    it('should return present exercise types and sort them properly (same order as instructor creation)', () => {
+        const sidebarData: SidebarData = {
+            groupByCategory: true,
+            ungroupedData: [SIDEBAR_CARD_ELEMENT_1, SIDEBAR_CARD_ELEMENT_2, SIDEBAR_CARD_ELEMENT_3, SIDEBAR_CARD_ELEMENT_4, SIDEBAR_CARD_ELEMENT_5],
+        };
+
+        const exerciseTypesFilter = getExerciseTypeFilterOptions(sidebarData, undefined);
+        expect(exerciseTypesFilter).toEqual({
+            isDisplayed: true,
+            options: [
+                { name: 'artemisApp.courseStatistics.programming', value: ExerciseType.PROGRAMMING, checked: false, icon: getIcon(ExerciseType.PROGRAMMING) },
+                { name: 'artemisApp.courseStatistics.quiz', value: ExerciseType.QUIZ, checked: false, icon: getIcon(ExerciseType.QUIZ) },
+                { name: 'artemisApp.courseStatistics.text', value: ExerciseType.TEXT, checked: false, icon: getIcon(ExerciseType.TEXT) },
+            ],
+        });
+    });
+
+    it('should not contain duplicates', () => {
+        const sidebarData: SidebarData = {
+            groupByCategory: true,
+            ungroupedData: [SIDEBAR_CARD_ELEMENT_1, SIDEBAR_CARD_ELEMENT_2, SIDEBAR_CARD_ELEMENT_5],
+        };
+
+        const exerciseTypesFilter = getExerciseTypeFilterOptions(sidebarData, undefined);
+        expect(exerciseTypesFilter).toEqual({
+            isDisplayed: true,
+            options: [
+                { name: 'artemisApp.courseStatistics.programming', value: ExerciseType.PROGRAMMING, checked: false, icon: getIcon(ExerciseType.PROGRAMMING) },
+                { name: 'artemisApp.courseStatistics.text', value: ExerciseType.TEXT, checked: false, icon: getIcon(ExerciseType.TEXT) },
+            ],
+        });
+    });
+
+    it('should directly return if already initialized', () => {
+        const sidebarData: SidebarData = {
+            groupByCategory: true,
+            ungroupedData: [SIDEBAR_CARD_ELEMENT_1, SIDEBAR_CARD_ELEMENT_2],
+        };
+
+        const exerciseTypesFilter = getExerciseTypeFilterOptions(sidebarData, {
+            exerciseTypesFilter: {
+                isDisplayed: false,
+                options: [],
+            },
+        });
+        expect(exerciseTypesFilter).toEqual({
+            isDisplayed: false,
+            options: [],
+        });
+    });
+});
+
+describe('getExerciseDifficultyFilterOptions', () => {
+    it('should return present exercise difficulties and sort them ascending', () => {
+        const sidebarData: SidebarData = {
+            groupByCategory: true,
+            ungroupedData: [SIDEBAR_CARD_ELEMENT_1, SIDEBAR_CARD_ELEMENT_2, SIDEBAR_CARD_ELEMENT_3, SIDEBAR_CARD_ELEMENT_4, SIDEBAR_CARD_ELEMENT_5],
+        };
+
+        const difficultyFilter = getExerciseDifficultyFilterOptions(sidebarData, undefined);
+        expect(difficultyFilter).toEqual({
+            isDisplayed: true,
+            options: [
+                { name: 'artemisApp.exercise.easy', value: DifficultyLevel.EASY, checked: false },
+                { name: 'artemisApp.exercise.medium', value: DifficultyLevel.MEDIUM, checked: false },
+                { name: 'artemisApp.exercise.hard', value: DifficultyLevel.HARD, checked: false },
+            ],
+        });
+    });
+
+    it('should not contain duplicates', () => {
+        const sidebarData: SidebarData = {
+            groupByCategory: true,
+            ungroupedData: [SIDEBAR_CARD_ELEMENT_1, SIDEBAR_CARD_ELEMENT_2, SIDEBAR_CARD_ELEMENT_5],
+        };
+
+        const difficultyFilter = getExerciseDifficultyFilterOptions(sidebarData, undefined);
+        expect(difficultyFilter).toEqual({
+            isDisplayed: true,
+            options: [
+                { name: 'artemisApp.exercise.easy', value: DifficultyLevel.EASY, checked: false },
+                { name: 'artemisApp.exercise.hard', value: DifficultyLevel.HARD, checked: false },
+            ],
+        });
+    });
+
+    it('should directly return if already initialized', () => {
+        const sidebarData: SidebarData = {
+            groupByCategory: true,
+            ungroupedData: [SIDEBAR_CARD_ELEMENT_1, SIDEBAR_CARD_ELEMENT_2],
+        };
+
+        const difficultyFilter = getExerciseDifficultyFilterOptions(sidebarData, {
+            difficultyFilter: {
+                isDisplayed: false,
+                options: [],
+            },
+        });
+        expect(difficultyFilter).toEqual({
+            isDisplayed: false,
+            options: [],
+        });
+    });
+});
+
+describe('getAchievablePointsAndAchievedScoreFilterOptions', () => {
+    const expectedFilterForFirstThreePresentExercises = {
+        achievablePoints: {
+            isDisplayed: true,
+            filter: {
+                generalMin: 2,
+                generalMax: 10,
+                selectedMin: 2,
+                selectedMax: 10,
+                step: 1,
+            },
+        },
+        achievedScore: {
+            isDisplayed: true,
+            filter: {
+                generalMax: 85,
+                generalMin: 5,
+                selectedMax: 85,
+                selectedMin: 5,
+                step: 5,
+            },
+        },
+    };
+
+    it('should return present exercise point and score range', () => {
+        const sidebarData: SidebarData = {
+            groupByCategory: true,
+            ungroupedData: [SIDEBAR_CARD_ELEMENT_1, SIDEBAR_CARD_ELEMENT_2, SIDEBAR_CARD_ELEMENT_3],
+        };
+
+        const scoreAndPointsFilterOptions = getAchievablePointsAndAchievedScoreFilterOptions(sidebarData, undefined);
+        expect(scoreAndPointsFilterOptions).toEqual(expectedFilterForFirstThreePresentExercises);
+    });
+
+    it('should set scores filter to not displayed if no scores are present', () => {
+        const sidebarData: SidebarData = {
+            groupByCategory: true,
+            ungroupedData: [SIDEBAR_CARD_ELEMENT_4, SIDEBAR_CARD_ELEMENT_5],
+        };
+
+        const scoreAndPointsFilterOptions = getAchievablePointsAndAchievedScoreFilterOptions(sidebarData, undefined);
+
+        expect(scoreAndPointsFilterOptions).toEqual({
+            achievablePoints: {
+                isDisplayed: true,
+                filter: {
+                    generalMax: 20,
+                    generalMin: 10,
+                    selectedMax: 20,
+                    selectedMin: 10,
+                    step: 1,
+                },
+            },
+            achievedScore: {
+                isDisplayed: false,
+                filter: {
+                    generalMax: -Infinity,
+                    generalMin: Infinity,
+                    selectedMax: -Infinity,
+                    selectedMin: Infinity,
+                    step: 1,
+                },
+            },
+        });
+    });
+
+    it('should directly return if already initialized and filters are not applied', () => {
+        const sidebarData: SidebarData = {
+            groupByCategory: true,
+            ungroupedData: [SIDEBAR_CARD_ELEMENT_1],
+        };
+
+        const scoreAndPointsFilterOptions = getAchievablePointsAndAchievedScoreFilterOptions(sidebarData, {
+            achievablePoints: expectedFilterForFirstThreePresentExercises.achievablePoints,
+            achievedScore: expectedFilterForFirstThreePresentExercises.achievedScore,
+        });
+        expect(scoreAndPointsFilterOptions).toEqual({
+            achievablePoints: expectedFilterForFirstThreePresentExercises.achievablePoints,
+            achievedScore: expectedFilterForFirstThreePresentExercises.achievedScore,
+        });
+    });
+});
diff --git a/src/test/javascript/spec/component/statistics/statistics-average-score-graph.component.spec.ts b/src/test/javascript/spec/component/statistics/statistics-average-score-graph.component.spec.ts
index e850210ee35e..2626dffc45e1 100644
--- a/src/test/javascript/spec/component/statistics/statistics-average-score-graph.component.spec.ts
+++ b/src/test/javascript/spec/component/statistics/statistics-average-score-graph.component.spec.ts
@@ -12,6 +12,7 @@ import { ArtemisNavigationUtilService } from 'app/utils/navigation.utils';
 import { ChartExerciseTypeFilter } from 'app/shared/chart/chart-exercise-type-filter';
 import { ChartCategoryFilter } from 'app/shared/chart/chart-category-filter';
 import { TranslateDirective } from 'app/shared/language/translate.directive';
+import { ExerciseCategory } from 'app/entities/exercise-category.model';
 
 describe('StatisticsAverageScoreGraphComponent', () => {
     let fixture: ComponentFixture<StatisticsAverageScoreGraphComponent>;
@@ -28,35 +29,35 @@ describe('StatisticsAverageScoreGraphComponent', () => {
         exerciseName: 'FacadePattern',
         averageScore: 0,
         exerciseType: ExerciseType.TEXT,
-        categories: [{ color: '#347aeb', category: 'structural pattern' }],
+        categories: [new ExerciseCategory('structural pattern', '#347aeb')],
     };
     const exercise2 = {
         exerciseId: 2,
         exerciseName: 'BridgePattern',
         averageScore: 20,
         exerciseType: ExerciseType.PROGRAMMING,
-        categories: [{ color: '#347aeb', category: 'structural pattern' }],
+        categories: [new ExerciseCategory('structural pattern', '#347aeb')],
     };
     const exercise3 = {
         exerciseId: 3,
         exerciseName: 'VisitorPattern',
         averageScore: 25,
         exerciseType: ExerciseType.FILE_UPLOAD,
-        categories: [{ color: '#c034eb', category: 'behavioral pattern' }],
+        categories: [new ExerciseCategory('behavioral pattern', '#c034eb')],
     };
     const exercise4 = {
         exerciseId: 4,
         exerciseName: 'AdapterPattern',
         averageScore: 35,
         exerciseType: ExerciseType.QUIZ,
-        categories: [{ color: '#347aeb', category: 'structural pattern' }],
+        categories: [new ExerciseCategory('structural pattern', '#347aeb')],
     };
     const exercise5 = {
         exerciseId: 5,
         exerciseName: 'ProxyPattern',
         averageScore: 40,
         exerciseType: ExerciseType.MODELING,
-        categories: [{ color: '#347aeb', category: 'structural pattern' }],
+        categories: [new ExerciseCategory('structural pattern', '#347aeb')],
     };
     const exercise6 = { exerciseId: 6, exerciseName: 'BuilderPattern', averageScore: 50, exerciseType: ExerciseType.QUIZ };
     const exercise7 = { exerciseId: 7, exerciseName: 'BehaviouralPattern', averageScore: 55, exerciseType: ExerciseType.PROGRAMMING };
diff --git a/src/test/javascript/spec/component/text-exercise/text-exercise-update.component.spec.ts b/src/test/javascript/spec/component/text-exercise/text-exercise-update.component.spec.ts
index aa0f2c889832..88eff4e9d26f 100644
--- a/src/test/javascript/spec/component/text-exercise/text-exercise-update.component.spec.ts
+++ b/src/test/javascript/spec/component/text-exercise/text-exercise-update.component.spec.ts
@@ -23,6 +23,7 @@ import { NgModel } from '@angular/forms';
 import { ExerciseTitleChannelNameComponent } from 'app/exercises/shared/exercise-title-channel-name/exercise-title-channel-name.component';
 import { ExerciseUpdatePlagiarismComponent } from 'app/exercises/shared/plagiarism/exercise-update-plagiarism/exercise-update-plagiarism.component';
 import { TeamConfigFormGroupComponent } from 'app/exercises/shared/team-config-form-group/team-config-form-group.component';
+import { ExerciseCategory } from 'app/entities/exercise-category.model';
 
 describe('TextExercise Management Update Component', () => {
     let comp: TextExerciseUpdateComponent;
@@ -363,7 +364,7 @@ describe('TextExercise Management Update Component', () => {
     it('should updateCategories properly by making category available for selection again when removing it', () => {
         comp.textExercise = new TextExercise(undefined, undefined);
         comp.exerciseCategories = [];
-        const newCategories = [{ category: 'Easy' }, { category: 'Hard' }];
+        const newCategories = [new ExerciseCategory('Easy', undefined), new ExerciseCategory('Hard', undefined)];
 
         comp.updateCategories(newCategories);
 
diff --git a/src/test/javascript/spec/component/tutorial-groups/course-tutorial-groups/course-tutorial-groups.component.spec.ts b/src/test/javascript/spec/component/tutorial-groups/course-tutorial-groups/course-tutorial-groups.component.spec.ts
index 7a722cf69505..cf60468091e9 100644
--- a/src/test/javascript/spec/component/tutorial-groups/course-tutorial-groups/course-tutorial-groups.component.spec.ts
+++ b/src/test/javascript/spec/component/tutorial-groups/course-tutorial-groups/course-tutorial-groups.component.spec.ts
@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { TutorialGroup } from 'app/entities/tutorial-group/tutorial-group.model';
 import { TutorialGroupsService } from 'app/course/tutorial-groups/services/tutorial-groups.service';
 import { MockRouter } from '../../../helpers/mocks/mock-router';
-import { MockModule, MockPipe, MockProvider } from 'ng-mocks';
+import { MockDirective, MockModule, MockPipe, MockProvider } from 'ng-mocks';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { AlertService } from 'app/core/util/alert.service';
 import { ActivatedRoute, Router, RouterModule, convertToParamMap } from '@angular/router';
@@ -18,6 +18,7 @@ import { SidebarComponent } from 'app/shared/sidebar/sidebar.component';
 import { SearchFilterPipe } from 'app/shared/pipes/search-filter.pipe';
 import { SearchFilterComponent } from 'app/shared/search-filter/search-filter.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 describe('CourseTutorialGroupsComponent', () => {
     let fixture: ComponentFixture<CourseTutorialGroupsComponent>;
@@ -32,7 +33,7 @@ describe('CourseTutorialGroupsComponent', () => {
         router.navigate.mockImplementation(() => Promise.resolve(true));
 
         TestBed.configureTestingModule({
-            imports: [ArtemisTestModule, RouterModule, MockModule(FormsModule), MockModule(ReactiveFormsModule)],
+            imports: [ArtemisTestModule, RouterModule, MockModule(FormsModule), MockModule(ReactiveFormsModule), MockDirective(TranslateDirective)],
             declarations: [CourseTutorialGroupsComponent, MockPipe(ArtemisTranslatePipe), SidebarComponent, SearchFilterComponent, MockPipe(SearchFilterPipe)],
             providers: [
                 MockProvider(TutorialGroupsService),
diff --git a/src/test/javascript/spec/entities/exercise-category.model.spec.ts b/src/test/javascript/spec/entities/exercise-category.model.spec.ts
new file mode 100644
index 000000000000..2beba4b62f40
--- /dev/null
+++ b/src/test/javascript/spec/entities/exercise-category.model.spec.ts
@@ -0,0 +1,49 @@
+import { ExerciseCategory } from 'app/entities/exercise-category.model';
+
+describe('ExerciseCategory', () => {
+    describe('equals', () => {
+        it('should return true if the two exercise categories are equal', () => {
+            const exerciseCategory1 = new ExerciseCategory('Category 1', 'red');
+            const exerciseCategory2 = new ExerciseCategory('Category 1', 'red');
+
+            expect(exerciseCategory1.equals(exerciseCategory2)).toBeTruthy();
+        });
+
+        it('should return false if the two exercise categories are not equal', () => {
+            const exerciseCategory1 = new ExerciseCategory('Category 1', 'red');
+            const exerciseCategory2 = new ExerciseCategory('Category 2', 'blue');
+
+            expect(exerciseCategory1.equals(exerciseCategory2)).toBeFalsy();
+        });
+    });
+
+    describe('compare', () => {
+        it("should return 0 if the two exercise categories' display text is the same", () => {
+            const exerciseCategory1 = new ExerciseCategory('Category 1', 'red');
+            const exerciseCategory2 = new ExerciseCategory('Category 1', 'blue');
+
+            expect(exerciseCategory1.compare(exerciseCategory2)).toBe(0);
+        });
+
+        it("should return -1 if the first exercise category's display text is smaller than the second exercise category's display text", () => {
+            const exerciseCategory1 = new ExerciseCategory('Category 1', 'red');
+            const exerciseCategory2 = new ExerciseCategory('Category 2', 'blue');
+
+            expect(exerciseCategory1.compare(exerciseCategory2)).toBe(-1);
+        });
+
+        it("should return 1 if the first exercise category's display text is larger than the second exercise category's display text", () => {
+            const exerciseCategory1 = new ExerciseCategory('Category 2', 'red');
+            const exerciseCategory2 = new ExerciseCategory('Category 1', 'blue');
+
+            expect(exerciseCategory1.compare(exerciseCategory2)).toBe(1);
+        });
+
+        it('should return -1 if the first exercise category is undefined', () => {
+            const exerciseCategory1 = new ExerciseCategory(undefined, 'red');
+            const exerciseCategory2 = new ExerciseCategory('Category 1', 'blue');
+
+            expect(exerciseCategory1.compare(exerciseCategory2)).toBe(-1);
+        });
+    });
+});
diff --git a/src/test/javascript/spec/service/modeling-exercise.service.spec.ts b/src/test/javascript/spec/service/modeling-exercise.service.spec.ts
index e3227f1b718f..5fdfe0efe181 100644
--- a/src/test/javascript/spec/service/modeling-exercise.service.spec.ts
+++ b/src/test/javascript/spec/service/modeling-exercise.service.spec.ts
@@ -22,8 +22,8 @@ describe('ModelingExercise Service', () => {
     let httpMock: HttpTestingController;
     let elemDefault: ModelingExercise;
     let plagiarismResult: ModelingPlagiarismResult;
-    const category = { color: 'red', category: 'testCategory' } as ExerciseCategory;
-    const categories = [JSON.stringify(category) as ExerciseCategory];
+    const category = new ExerciseCategory('testCategory', 'red');
+    const categories = [JSON.stringify(category) as unknown as ExerciseCategory] as ExerciseCategory[];
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [HttpClientTestingModule],
diff --git a/src/test/javascript/spec/util/shared/utils.spec.ts b/src/test/javascript/spec/util/shared/utils.spec.ts
index 296e7ba1fabc..b20604e27615 100644
--- a/src/test/javascript/spec/util/shared/utils.spec.ts
+++ b/src/test/javascript/spec/util/shared/utils.spec.ts
@@ -4,6 +4,7 @@ import {
     isExamExercise,
     round,
     roundScorePercentSpecifiedByCourseSettings,
+    roundToNextMultiple,
     roundValueSpecifiedByCourseSettings,
     stringifyIgnoringFields,
 } from 'app/shared/util/utils';
@@ -119,3 +120,25 @@ describe('isExamExercise', () => {
         expect(isExamExerciseResult).toBeFalse();
     });
 });
+
+describe('roundUpToNextMultiple', () => {
+    it('should round up to multiple of 5 if value is closer to lower multiple', () => {
+        expect(roundToNextMultiple(21, 5, true)).toBe(25);
+    });
+
+    it('should round up to multiple of 5 if value is right underneath next multiple', () => {
+        expect(roundToNextMultiple(24.8, 5, true)).toBe(25);
+    });
+
+    it('should round down to multiple of 5 if value is over next multiple', () => {
+        expect(roundToNextMultiple(24.8, 5, false)).toBe(20);
+    });
+
+    it('should return value is it is a multiple', () => {
+        expect(roundToNextMultiple(25, 5, true)).toBe(25);
+    });
+
+    it('should round up to multiple of 1', () => {
+        expect(roundToNextMultiple(8.2, 1, true)).toBe(9);
+    });
+});

From c2563018412719b391cb0d9a8f85714fd5ba6dd8 Mon Sep 17 00:00:00 2001
From: Johannes Wiest <Johannes.wiest@outlook.com>
Date: Thu, 29 Aug 2024 18:08:46 +0200
Subject: [PATCH 11/15] Development: Remove lifecycle hooks in learning path
 related components (#9248)

---
 .../learning-path-lecture-unit.component.html |  2 +-
 .../learning-path-lecture-unit.component.ts   | 23 +++++++++++--------
 ...nav-overview-learning-objects.component.ts | 17 +++++++++-----
 .../learning-path-nav-overview.component.ts   | 21 ++++++++---------
 .../learning-path-student-nav.component.ts    | 12 +++++-----
 .../learning-path-student-page.component.ts   | 10 ++++----
 ...arning-path-lecture-unit.component.spec.ts |  4 ++--
 7 files changed, 48 insertions(+), 41 deletions(-)

diff --git a/src/main/webapp/app/course/learning-paths/components/learning-path-lecture-unit/learning-path-lecture-unit.component.html b/src/main/webapp/app/course/learning-paths/components/learning-path-lecture-unit/learning-path-lecture-unit.component.html
index 10feb00946b8..2341a771ae26 100644
--- a/src/main/webapp/app/course/learning-paths/components/learning-path-lecture-unit/learning-path-lecture-unit.component.html
+++ b/src/main/webapp/app/course/learning-paths/components/learning-path-lecture-unit/learning-path-lecture-unit.component.html
@@ -1,4 +1,4 @@
-@if (isLectureUnitLoading()) {
+@if (isLoading()) {
     <div class="row justify-content-center m-4">
         <div class="spinner-border text-primary" role="status">
             <span class="sr-only" jhiTranslate="loading"></span>
diff --git a/src/main/webapp/app/course/learning-paths/components/learning-path-lecture-unit/learning-path-lecture-unit.component.ts b/src/main/webapp/app/course/learning-paths/components/learning-path-lecture-unit/learning-path-lecture-unit.component.ts
index a7cd72938c93..c927e2a4532e 100644
--- a/src/main/webapp/app/course/learning-paths/components/learning-path-lecture-unit/learning-path-lecture-unit.component.ts
+++ b/src/main/webapp/app/course/learning-paths/components/learning-path-lecture-unit/learning-path-lecture-unit.component.ts
@@ -1,12 +1,11 @@
-import { Component, InputSignal, Signal, WritableSignal, inject, input, signal } from '@angular/core';
+import { Component, InputSignal, WritableSignal, effect, inject, input, signal } from '@angular/core';
 import { LectureUnitService } from 'app/lecture/lecture-unit/lecture-unit-management/lectureUnit.service';
 import { AlertService } from 'app/core/util/alert.service';
 import { LectureUnit, LectureUnitType } from 'app/entities/lecture-unit/lectureUnit.model';
 import { ArtemisLectureUnitsModule } from 'app/overview/course-lectures/lecture-units.module';
 import { LectureUnitCompletionEvent } from 'app/overview/course-lectures/course-lecture-details.component';
 import { LearningPathNavigationService } from 'app/course/learning-paths/services/learning-path-navigation.service';
-import { Observable, lastValueFrom, switchMap } from 'rxjs';
-import { toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { lastValueFrom } from 'rxjs';
 import { ArtemisSharedModule } from 'app/shared/shared.module';
 import { VideoUnitComponent } from 'app/overview/course-lectures/video-unit/video-unit.component';
 import { TextUnitComponent } from 'app/overview/course-lectures/text-unit/text-unit.component';
@@ -27,18 +26,22 @@ export class LearningPathLectureUnitComponent {
     private readonly alertService: AlertService = inject(AlertService);
 
     readonly lectureUnitId: InputSignal<number> = input.required<number>();
-    readonly isLectureUnitLoading: WritableSignal<boolean> = signal(false);
-    private readonly lectureUnit$: Observable<LectureUnit | undefined> = toObservable(this.lectureUnitId).pipe(switchMap((lectureUnitId) => this.getLectureUnit(lectureUnitId)));
-    readonly lectureUnit: Signal<LectureUnit | undefined> = toSignal(this.lectureUnit$);
+    readonly isLoading: WritableSignal<boolean> = signal(false);
+    readonly lectureUnit = signal<LectureUnit | undefined>(undefined);
 
-    async getLectureUnit(lectureUnitId: number): Promise<LectureUnit | undefined> {
+    constructor() {
+        effect(() => this.loadLectureUnit(this.lectureUnitId()), { allowSignalWrites: true });
+    }
+
+    async loadLectureUnit(lectureUnitId: number): Promise<void> {
         try {
-            this.isLectureUnitLoading.set(true);
-            return await lastValueFrom(this.lectureUnitService.getLectureUnitById(lectureUnitId));
+            this.isLoading.set(true);
+            const lectureUnit = await lastValueFrom(this.lectureUnitService.getLectureUnitById(lectureUnitId));
+            this.lectureUnit.set(lectureUnit);
         } catch (error) {
             this.alertService.error(error);
         } finally {
-            this.isLectureUnitLoading.set(false);
+            this.isLoading.set(false);
         }
     }
 
diff --git a/src/main/webapp/app/course/learning-paths/components/learning-path-nav-overview-learning-objects/learning-path-nav-overview-learning-objects.component.ts b/src/main/webapp/app/course/learning-paths/components/learning-path-nav-overview-learning-objects/learning-path-nav-overview-learning-objects.component.ts
index 15589bdb24bc..97609dd46c27 100644
--- a/src/main/webapp/app/course/learning-paths/components/learning-path-nav-overview-learning-objects/learning-path-nav-overview-learning-objects.component.ts
+++ b/src/main/webapp/app/course/learning-paths/components/learning-path-nav-overview-learning-objects/learning-path-nav-overview-learning-objects.component.ts
@@ -1,4 +1,4 @@
-import { Component, InputSignal, OnInit, OutputEmitterRef, Signal, WritableSignal, computed, inject, input, output, signal } from '@angular/core';
+import { Component, InputSignal, OutputEmitterRef, Signal, WritableSignal, computed, effect, inject, input, output, signal, untracked } from '@angular/core';
 import { ArtemisSharedModule } from 'app/shared/shared.module';
 import { AlertService } from 'app/core/util/alert.service';
 import { LearningPathApiService } from 'app/course/learning-paths/services/learning-path-api.service';
@@ -15,7 +15,7 @@ import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
     templateUrl: './learning-path-nav-overview-learning-objects.component.html',
     styleUrl: './learning-path-nav-overview-learning-objects.component.scss',
 })
-export class LearningPathNavOverviewLearningObjectsComponent implements OnInit {
+export class LearningPathNavOverviewLearningObjectsComponent {
     protected readonly faCheckCircle: IconDefinition = faCheckCircle;
     protected readonly faLock: IconDefinition = faLock;
 
@@ -38,8 +38,13 @@ export class LearningPathNavOverviewLearningObjectsComponent implements OnInit {
 
     readonly onLearningObjectSelected: OutputEmitterRef<void> = output();
 
-    ngOnInit(): void {
-        this.loadLearningObjects();
+    constructor() {
+        effect(
+            () => {
+                untracked(async () => await this.loadLearningObjects());
+            },
+            { allowSignalWrites: true },
+        );
     }
 
     async loadLearningObjects(): Promise<void> {
@@ -57,9 +62,9 @@ export class LearningPathNavOverviewLearningObjectsComponent implements OnInit {
         }
     }
 
-    selectLearningObject(learningObject: LearningPathNavigationObjectDTO): void {
+    async selectLearningObject(learningObject: LearningPathNavigationObjectDTO): Promise<void> {
         if (!learningObject.unreleased) {
-            this.learningPathNavigationService.loadRelativeLearningPathNavigation(this.learningPathId(), learningObject);
+            await this.learningPathNavigationService.loadRelativeLearningPathNavigation(this.learningPathId(), learningObject);
             this.onLearningObjectSelected.emit();
         }
     }
diff --git a/src/main/webapp/app/course/learning-paths/components/learning-path-nav-overview/learning-path-nav-overview.component.ts b/src/main/webapp/app/course/learning-paths/components/learning-path-nav-overview/learning-path-nav-overview.component.ts
index 669bde84d5b3..a63830f98bc7 100644
--- a/src/main/webapp/app/course/learning-paths/components/learning-path-nav-overview/learning-path-nav-overview.component.ts
+++ b/src/main/webapp/app/course/learning-paths/components/learning-path-nav-overview/learning-path-nav-overview.component.ts
@@ -1,4 +1,4 @@
-import { Component, InputSignal, OutputEmitterRef, Signal, WritableSignal, computed, inject, input, output, signal, viewChild } from '@angular/core';
+import { Component, InputSignal, OutputEmitterRef, Signal, WritableSignal, computed, effect, inject, input, output, signal, viewChild } from '@angular/core';
 import { NgbAccordionDirective, NgbAccordionModule, NgbDropdownModule, NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { CommonModule } from '@angular/common';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@@ -10,8 +10,6 @@ import { LearningPathApiService } from 'app/course/learning-paths/services/learn
 import { CompetencyGraphModalComponent } from 'app/course/learning-paths/components/competency-graph-modal/competency-graph-modal.component';
 import { LearningPathNavOverviewLearningObjectsComponent } from 'app/course/learning-paths/components/learning-path-nav-overview-learning-objects/learning-path-nav-overview-learning-objects.component';
 import { LearningPathNavigationService } from 'app/course/learning-paths/services/learning-path-navigation.service';
-import { toObservable, toSignal } from '@angular/core/rxjs-interop';
-import { Observable, switchMap } from 'rxjs';
 
 @Component({
     selector: 'jhi-learning-path-nav-overview',
@@ -34,25 +32,26 @@ export class LearningPathNavOverviewComponent {
 
     readonly onLearningObjectSelected: OutputEmitterRef<void> = output();
     readonly isLoading: WritableSignal<boolean> = signal(false);
-    private readonly competencies$: Observable<LearningPathCompetencyDTO[]> = toObservable(this.learningPathId).pipe(
-        switchMap((learningPathId) => this.loadCompetencies(learningPathId)),
-    );
-    readonly competencies: Signal<LearningPathCompetencyDTO[] | undefined> = toSignal(this.competencies$);
+    readonly competencies = signal<LearningPathCompetencyDTO[]>([]);
 
     // competency id of currently selected learning object
     readonly currentCompetencyId: Signal<number | undefined> = computed(() => this.learningPathNavigationService.currentLearningObject()?.competencyId);
     // current competency of learning path (not the one of the selected learning object)
     readonly currentCompetencyOnPath: Signal<LearningPathCompetencyDTO | undefined> = computed(() => this.competencies()?.find((competency) => competency.masteryProgress < 1));
 
-    async loadCompetencies(learningPathId: number): Promise<LearningPathCompetencyDTO[]> {
+    constructor() {
+        effect(async () => await this.loadCompetencies(this.learningPathId()), { allowSignalWrites: true });
+    }
+
+    async loadCompetencies(learningPathId: number): Promise<void> {
         try {
             this.isLoading.set(true);
             const competencies = await this.learningPathApiService.getLearningPathCompetencies(learningPathId);
-            this.isLoading.set(false);
-            return competencies;
+            this.competencies.set(competencies);
         } catch (error) {
             this.alertService.error(error);
-            return [];
+        } finally {
+            this.isLoading.set(false);
         }
     }
 
diff --git a/src/main/webapp/app/course/learning-paths/components/learning-path-student-nav/learning-path-student-nav.component.ts b/src/main/webapp/app/course/learning-paths/components/learning-path-student-nav/learning-path-student-nav.component.ts
index 906cf5148089..90eb7bb2b43e 100644
--- a/src/main/webapp/app/course/learning-paths/components/learning-path-student-nav/learning-path-student-nav.component.ts
+++ b/src/main/webapp/app/course/learning-paths/components/learning-path-student-nav/learning-path-student-nav.component.ts
@@ -1,4 +1,4 @@
-import { Component, InputSignal, OnInit, Signal, WritableSignal, computed, inject, input, signal } from '@angular/core';
+import { Component, InputSignal, Signal, WritableSignal, computed, effect, inject, input, signal } from '@angular/core';
 import { LearningPathNavigationObjectDTO } from 'app/entities/competency/learning-path.model';
 import { CommonModule } from '@angular/common';
 import { NgbAccordionModule, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
@@ -15,7 +15,7 @@ import { LearningPathNavigationService } from 'app/course/learning-paths/service
     templateUrl: './learning-path-student-nav.component.html',
     styleUrl: './learning-path-student-nav.component.scss',
 })
-export class LearningPathNavComponent implements OnInit {
+export class LearningPathNavComponent {
     protected readonly faChevronDown: IconDefinition = faChevronDown;
     protected readonly faCheckCircle: IconDefinition = faCheckCircle;
     protected readonly faFlag: IconDefinition = faFlag;
@@ -37,12 +37,12 @@ export class LearningPathNavComponent implements OnInit {
 
     readonly isDropdownOpen: WritableSignal<boolean> = signal(false);
 
-    ngOnInit(): void {
-        this.learningPathNavigationService.loadLearningPathNavigation(this.learningPathId());
+    constructor() {
+        effect(async () => await this.learningPathNavigationService.loadLearningPathNavigation(this.learningPathId()), { allowSignalWrites: true });
     }
 
-    selectLearningObject(selectedLearningObject: LearningPathNavigationObjectDTO): void {
-        this.learningPathNavigationService.loadRelativeLearningPathNavigation(this.learningPathId(), selectedLearningObject);
+    async selectLearningObject(selectedLearningObject: LearningPathNavigationObjectDTO): Promise<void> {
+        await this.learningPathNavigationService.loadRelativeLearningPathNavigation(this.learningPathId(), selectedLearningObject);
     }
 
     completeLearningPath(): void {
diff --git a/src/main/webapp/app/course/learning-paths/pages/learning-path-student-page/learning-path-student-page.component.ts b/src/main/webapp/app/course/learning-paths/pages/learning-path-student-page/learning-path-student-page.component.ts
index 18d74923ab92..7df486af265c 100644
--- a/src/main/webapp/app/course/learning-paths/pages/learning-path-student-page/learning-path-student-page.component.ts
+++ b/src/main/webapp/app/course/learning-paths/pages/learning-path-student-page/learning-path-student-page.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Signal, inject, signal } from '@angular/core';
+import { Component, effect, inject, signal } from '@angular/core';
 import { LearningObjectType } from 'app/entities/competency/learning-path.model';
 import { map } from 'rxjs';
 import { toSignal } from '@angular/core/rxjs-interop';
@@ -29,7 +29,7 @@ import { ArtemisSharedModule } from 'app/shared/shared.module';
         ArtemisSharedModule,
     ],
 })
-export class LearningPathStudentPageComponent implements OnInit {
+export class LearningPathStudentPageComponent {
     protected readonly LearningObjectType = LearningObjectType;
 
     private readonly learningApiService: LearningPathApiService = inject(LearningPathApiService);
@@ -39,12 +39,12 @@ export class LearningPathStudentPageComponent implements OnInit {
 
     readonly isLearningPathIdLoading = signal(false);
     readonly learningPathId = signal<number | undefined>(undefined);
-    readonly courseId: Signal<number> = toSignal(this.activatedRoute.parent!.parent!.params.pipe(map((params) => params.courseId)));
+    readonly courseId = toSignal(this.activatedRoute.parent!.parent!.params.pipe(map((params) => Number(params.courseId))), { requireSync: true });
     readonly currentLearningObject = this.learningPathNavigationService.currentLearningObject;
     readonly isLearningPathNavigationLoading = this.learningPathNavigationService.isLoading;
 
-    ngOnInit(): void {
-        this.loadLearningPathId(this.courseId());
+    constructor() {
+        effect(async () => await this.loadLearningPathId(this.courseId()), { allowSignalWrites: true });
     }
 
     private async loadLearningPathId(courseId: number): Promise<void> {
diff --git a/src/test/javascript/spec/component/learning-paths/components/learning-path-lecture-unit.component.spec.ts b/src/test/javascript/spec/component/learning-paths/components/learning-path-lecture-unit.component.spec.ts
index e82d4195a3f6..a77d15c0709f 100644
--- a/src/test/javascript/spec/component/learning-paths/components/learning-path-lecture-unit.component.spec.ts
+++ b/src/test/javascript/spec/component/learning-paths/components/learning-path-lecture-unit.component.spec.ts
@@ -86,7 +86,7 @@ describe('LearningPathLectureUnitComponent', () => {
     });
 
     it('should get lecture unit', async () => {
-        const getLectureUnitSpy = jest.spyOn(component, 'getLectureUnit');
+        const getLectureUnitSpy = jest.spyOn(component, 'loadLectureUnit');
 
         fixture.detectChanges();
         await fixture.whenStable();
@@ -102,7 +102,7 @@ describe('LearningPathLectureUnitComponent', () => {
     });
 
     it('should set loading state correctly', async () => {
-        const setIsLoadingSpy = jest.spyOn(component.isLectureUnitLoading, 'set');
+        const setIsLoadingSpy = jest.spyOn(component.isLoading, 'set');
         fixture.detectChanges();
         await fixture.whenStable();
         fixture.detectChanges();

From 65115832a6f22d18cd207e19b568fac62ce3dd86 Mon Sep 17 00:00:00 2001
From: Stephan Krusche <krusche@in.tum.de>
Date: Fri, 30 Aug 2024 09:54:27 +0300
Subject: [PATCH 12/15] Development: Update client dependencies

---
 package-lock.json | 879 ++++++++++++++++++++++++++--------------------
 package.json      |  52 +--
 2 files changed, 531 insertions(+), 400 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f619a609c426..e0f6197e7588 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,18 +10,18 @@
             "hasInstallScript": true,
             "license": "MIT",
             "dependencies": {
-                "@angular/animations": "18.2.1",
-                "@angular/cdk": "18.2.1",
-                "@angular/common": "18.2.1",
-                "@angular/compiler": "18.2.1",
-                "@angular/core": "18.2.1",
-                "@angular/forms": "18.2.1",
-                "@angular/localize": "18.2.1",
-                "@angular/material": "18.2.1",
-                "@angular/platform-browser": "18.2.1",
-                "@angular/platform-browser-dynamic": "18.2.1",
-                "@angular/router": "18.2.1",
-                "@angular/service-worker": "18.2.1",
+                "@angular/animations": "18.2.2",
+                "@angular/cdk": "18.2.2",
+                "@angular/common": "18.2.2",
+                "@angular/compiler": "18.2.2",
+                "@angular/core": "18.2.2",
+                "@angular/forms": "18.2.2",
+                "@angular/localize": "18.2.2",
+                "@angular/material": "18.2.2",
+                "@angular/platform-browser": "18.2.2",
+                "@angular/platform-browser-dynamic": "18.2.2",
+                "@angular/router": "18.2.2",
+                "@angular/service-worker": "18.2.2",
                 "@ctrl/ngx-emoji-mart": "9.2.0",
                 "@danielmoncada/angular-datetime-picker": "18.1.0",
                 "@fingerprintjs/fingerprintjs": "4.4.3",
@@ -31,10 +31,10 @@
                 "@fortawesome/free-regular-svg-icons": "6.6.0",
                 "@fortawesome/free-solid-svg-icons": "6.6.0",
                 "@ls1intum/apollon": "3.3.14",
-                "@ng-bootstrap/ng-bootstrap": "17.0.0",
+                "@ng-bootstrap/ng-bootstrap": "17.0.1",
                 "@ngx-translate/core": "15.0.0",
                 "@ngx-translate/http-loader": "8.0.0",
-                "@sentry/angular": "8.26.0",
+                "@sentry/angular": "8.27.0",
                 "@swimlane/ngx-charts": "20.5.0",
                 "@swimlane/ngx-graph": "8.4.0",
                 "@vscode/codicons": "0.0.36",
@@ -59,12 +59,12 @@
                 "ngx-infinite-scroll": "18.0.0",
                 "ngx-webstorage": "18.0.0",
                 "papaparse": "5.4.1",
-                "posthog-js": "1.157.2",
+                "posthog-js": "1.160.0",
                 "rxjs": "7.8.1",
                 "showdown": "2.1.0",
                 "showdown-highlight": "3.1.0",
                 "showdown-katex": "0.6.0",
-                "simple-statistics": "7.8.4",
+                "simple-statistics": "7.8.5",
                 "smoothscroll-polyfill": "0.4.4",
                 "sockjs-client": "1.6.1",
                 "split.js": "1.6.5",
@@ -77,33 +77,33 @@
             },
             "devDependencies": {
                 "@angular-builders/jest": "18.0.0",
-                "@angular-devkit/build-angular": "18.2.1",
+                "@angular-devkit/build-angular": "18.2.2",
                 "@angular-eslint/builder": "18.3.0",
                 "@angular-eslint/eslint-plugin": "18.3.0",
                 "@angular-eslint/eslint-plugin-template": "18.3.0",
                 "@angular-eslint/schematics": "18.3.0",
                 "@angular-eslint/template-parser": "18.3.0",
-                "@angular/cli": "18.2.1",
-                "@angular/compiler-cli": "18.2.1",
-                "@angular/language-service": "18.2.1",
-                "@sentry/types": "8.26.0",
+                "@angular/cli": "18.2.2",
+                "@angular/compiler-cli": "18.2.2",
+                "@angular/language-service": "18.2.2",
+                "@sentry/types": "8.27.0",
                 "@types/crypto-js": "4.2.2",
                 "@types/d3-shape": "3.1.6",
                 "@types/dompurify": "3.0.5",
                 "@types/jest": "29.5.12",
                 "@types/lodash-es": "4.17.12",
-                "@types/node": "22.5.0",
+                "@types/node": "22.5.1",
                 "@types/papaparse": "5.3.14",
                 "@types/showdown": "2.0.6",
                 "@types/smoothscroll-polyfill": "0.3.4",
                 "@types/sockjs-client": "1.5.4",
                 "@types/uuid": "10.0.0",
-                "@typescript-eslint/eslint-plugin": "8.2.0",
-                "@typescript-eslint/parser": "8.2.0",
+                "@typescript-eslint/eslint-plugin": "8.3.0",
+                "@typescript-eslint/parser": "8.3.0",
                 "eslint": "9.9.1",
                 "eslint-config-prettier": "9.1.0",
                 "eslint-plugin-deprecation": "3.0.0",
-                "eslint-plugin-jest": "28.8.0",
+                "eslint-plugin-jest": "28.8.1",
                 "eslint-plugin-jest-extended": "2.4.0",
                 "eslint-plugin-prettier": "5.2.1",
                 "folder-hash": "4.0.4",
@@ -116,7 +116,7 @@
                 "jest-junit": "16.0.0",
                 "jest-preset-angular": "14.2.2",
                 "lint-staged": "15.2.9",
-                "ng-mocks": "14.13.0",
+                "ng-mocks": "14.13.1",
                 "prettier": "3.3.3",
                 "sass": "1.77.8",
                 "ts-jest": "29.2.5",
@@ -209,13 +209,13 @@
             }
         },
         "node_modules/@angular-devkit/architect": {
-            "version": "0.1802.1",
-            "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1802.1.tgz",
-            "integrity": "sha512-XTnJfCBMDQl3xF4w/eNrq821gbj2Ig1cqbzpRflhz4pqrANTAfHfPoIC7piWEZ60FNlHapzb6fvh6tJUGXG9og==",
+            "version": "0.1802.2",
+            "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1802.2.tgz",
+            "integrity": "sha512-LPRl9jhcf0NgshaL6RoUy1uL/cAyNt7oxctoZ9EHUu8eh5E9W/jZGhVowjOLpirwqYhmEzKJJIeS49Ssqs3RQg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@angular-devkit/core": "18.2.1",
+                "@angular-devkit/core": "18.2.2",
                 "rxjs": "7.8.1"
             },
             "engines": {
@@ -225,17 +225,17 @@
             }
         },
         "node_modules/@angular-devkit/build-angular": {
-            "version": "18.2.1",
-            "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-18.2.1.tgz",
-            "integrity": "sha512-ANsTWKjIlEvJ6s276TbwnDhkoHhQDfsNiRFUDRGBZu94UNR78ImQZSyKYGHJOeQQH6jpBtraA1rvW5WKozAtlw==",
+            "version": "18.2.2",
+            "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-18.2.2.tgz",
+            "integrity": "sha512-7HEnTN2T1jnjuItXKcApOsoYGgfou4+POju3ZbwIQukDZ3B2COskvQkVTxqPNrQ0ZjT2mxZYoVlmGW9M+7N25g==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@ampproject/remapping": "2.3.0",
-                "@angular-devkit/architect": "0.1802.1",
-                "@angular-devkit/build-webpack": "0.1802.1",
-                "@angular-devkit/core": "18.2.1",
-                "@angular/build": "18.2.1",
+                "@angular-devkit/architect": "0.1802.2",
+                "@angular-devkit/build-webpack": "0.1802.2",
+                "@angular-devkit/core": "18.2.2",
+                "@angular/build": "18.2.2",
                 "@babel/core": "7.25.2",
                 "@babel/generator": "7.25.0",
                 "@babel/helper-annotate-as-pure": "7.24.7",
@@ -246,7 +246,7 @@
                 "@babel/preset-env": "7.25.3",
                 "@babel/runtime": "7.25.0",
                 "@discoveryjs/json-ext": "0.6.1",
-                "@ngtools/webpack": "18.2.1",
+                "@ngtools/webpack": "18.2.2",
                 "@vitejs/plugin-basic-ssl": "1.1.0",
                 "ansi-colors": "4.1.3",
                 "autoprefixer": "10.4.20",
@@ -288,7 +288,7 @@
                 "tslib": "2.6.3",
                 "vite": "5.4.0",
                 "watchpack": "2.4.1",
-                "webpack": "5.93.0",
+                "webpack": "5.94.0",
                 "webpack-dev-middleware": "7.3.0",
                 "webpack-dev-server": "5.0.4",
                 "webpack-merge": "6.0.1",
@@ -379,13 +379,13 @@
             "license": "0BSD"
         },
         "node_modules/@angular-devkit/build-webpack": {
-            "version": "0.1802.1",
-            "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.1802.1.tgz",
-            "integrity": "sha512-xOP9Hxkj/mWYdMTa/8uNxFTv7z+3UiGdt4VAO7vetV5qkU/S9rRq8FEKviCc2llXfwkhInSgeeHpWKdATa+YIQ==",
+            "version": "0.1802.2",
+            "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.1802.2.tgz",
+            "integrity": "sha512-Pj+YmKh0nJOKl6QAsqYh3SqfuVJrFqjyp5WrG9BgfsMD9GCMD+5teMHNYJlp+vG/C8e7VdZp4rqOon8K9Xn4Mw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@angular-devkit/architect": "0.1802.1",
+                "@angular-devkit/architect": "0.1802.2",
                 "rxjs": "7.8.1"
             },
             "engines": {
@@ -399,9 +399,9 @@
             }
         },
         "node_modules/@angular-devkit/core": {
-            "version": "18.2.1",
-            "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-18.2.1.tgz",
-            "integrity": "sha512-fSuGj6CxiTFR+yjuVcaWqaVb5Wts39CSBYRO1BlsOlbuWFZ2NKC/BAb5bdxpB31heCBJi7e3XbPvcMMJIcnKlA==",
+            "version": "18.2.2",
+            "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-18.2.2.tgz",
+            "integrity": "sha512-Zz0tGptI/QQnUBDdp+1G5wGwQWMjpfe2oO+UohkrDVgFS71yVj4VDnOy51kMTxBvzw+36evTgthPpmzqPIfxBw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -427,13 +427,13 @@
             }
         },
         "node_modules/@angular-devkit/schematics": {
-            "version": "18.2.1",
-            "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-18.2.1.tgz",
-            "integrity": "sha512-2t/q0Jcv7yqhAzEdNgsxoGSCmPgD4qfnVOJ7EJw3LNIA+kX1CmtN4FESUS0i49kN4AyNJFAI5O2pV8iJiliKaw==",
+            "version": "18.2.2",
+            "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-18.2.2.tgz",
+            "integrity": "sha512-PU6+3nX+gQ3gofR7BGwXuvNUNeeV2raURaZjlPfGpBqjyTBxukMV71QsTTWptAZT4WibCWkTFp6X1gvsOGbjMg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@angular-devkit/core": "18.2.1",
+                "@angular-devkit/core": "18.2.2",
                 "jsonc-parser": "3.3.1",
                 "magic-string": "0.30.11",
                 "ora": "5.4.1",
@@ -546,9 +546,9 @@
             }
         },
         "node_modules/@angular/animations": {
-            "version": "18.2.1",
-            "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-18.2.1.tgz",
-            "integrity": "sha512-jit452yuE6DMVV09E6RAjgapgw64mMVH31ccpPvMDekzPsTuP3KNKtgRFU/k2DFhYJvyczM1AqqlgccE/JGaRw==",
+            "version": "18.2.2",
+            "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-18.2.2.tgz",
+            "integrity": "sha512-jh/dGrY77HGm54HdTiQsxmvoRfFeJgHeWAK2+nWCPoc4b7OHcWxy/04cYffs0/27ThmABmppP7ERAyZ0f60uow==",
             "license": "MIT",
             "dependencies": {
                 "tslib": "^2.3.0"
@@ -557,18 +557,18 @@
                 "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
             },
             "peerDependencies": {
-                "@angular/core": "18.2.1"
+                "@angular/core": "18.2.2"
             }
         },
         "node_modules/@angular/build": {
-            "version": "18.2.1",
-            "resolved": "https://registry.npmjs.org/@angular/build/-/build-18.2.1.tgz",
-            "integrity": "sha512-HwzjB+I31cAtjTTbbS2NbayzfcWthaKaofJlSmZIst3PN+GwLZ8DU0DRpd/xu5AXkk+DoAIWd+lzUIaqngz6ow==",
+            "version": "18.2.2",
+            "resolved": "https://registry.npmjs.org/@angular/build/-/build-18.2.2.tgz",
+            "integrity": "sha512-okaDdTMXnDhvnnnih6rPQnexL6htfEAPr19bB1Ci9d31gEjVuKZCjlcw2sPZ6BUyilwC9nZlCI5vbH1Ljf6mzA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@ampproject/remapping": "2.3.0",
-                "@angular-devkit/architect": "0.1802.1",
+                "@angular-devkit/architect": "0.1802.2",
                 "@babel/core": "7.25.2",
                 "@babel/helper-annotate-as-pure": "7.24.7",
                 "@babel/helper-split-export-declaration": "7.24.7",
@@ -648,9 +648,9 @@
             }
         },
         "node_modules/@angular/cdk": {
-            "version": "18.2.1",
-            "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-18.2.1.tgz",
-            "integrity": "sha512-6y4MmpEPXze6igUHkLsBUPkxw32F8+rmW0xVXZchkSyGlFgqfh53ueXoryWb0qL4s5enkNY6AzXnKAqHfPNkVQ==",
+            "version": "18.2.2",
+            "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-18.2.2.tgz",
+            "integrity": "sha512-+u7ZcMA24WO03vDzlBJJWq+okZLFDeW9JrtHzrdiT09FDt4sdUp+7PddXaZcRHIXjJL+CaCLQ6slaqPNEufqgg==",
             "license": "MIT",
             "dependencies": {
                 "tslib": "^2.3.0"
@@ -665,18 +665,18 @@
             }
         },
         "node_modules/@angular/cli": {
-            "version": "18.2.1",
-            "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-18.2.1.tgz",
-            "integrity": "sha512-SomUFDHanY4o7k3XBGf1eFt4z1h05IGJHfcbl2vxoc0lY59VN13m/pZsD2AtpqtJTzLQT02XQOUP4rmBbGoQ+Q==",
+            "version": "18.2.2",
+            "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-18.2.2.tgz",
+            "integrity": "sha512-HVVaMxnbID0q+V3KE+JqzGbPHcBUFo1RKhBZ/jxY7USZNzgtyYbRc0IYqPWNdr99UT5QefTJrjVazJo1nqQZvQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@angular-devkit/architect": "0.1802.1",
-                "@angular-devkit/core": "18.2.1",
-                "@angular-devkit/schematics": "18.2.1",
+                "@angular-devkit/architect": "0.1802.2",
+                "@angular-devkit/core": "18.2.2",
+                "@angular-devkit/schematics": "18.2.2",
                 "@inquirer/prompts": "5.3.8",
                 "@listr2/prompt-adapter-inquirer": "2.0.15",
-                "@schematics/angular": "18.2.1",
+                "@schematics/angular": "18.2.2",
                 "@yarnpkg/lockfile": "1.1.0",
                 "ini": "4.1.3",
                 "jsonc-parser": "3.3.1",
@@ -699,9 +699,9 @@
             }
         },
         "node_modules/@angular/common": {
-            "version": "18.2.1",
-            "resolved": "https://registry.npmjs.org/@angular/common/-/common-18.2.1.tgz",
-            "integrity": "sha512-N0ZJO1/iU9UhprplZRPvBcdRgA/i6l6Ng5gXs5ymHBJ0lxsB+mDVCmC4jISjR9gAWc426xXwLaOpuP5Gv3f/yg==",
+            "version": "18.2.2",
+            "resolved": "https://registry.npmjs.org/@angular/common/-/common-18.2.2.tgz",
+            "integrity": "sha512-AQe4xnnNNch/sXRnV82C8FmhijxPATKfPGojC2qbAG2o6VkWKgt5Lbj0O8WxvSIOS5Syedv+O2kLY/JMGWHNtw==",
             "license": "MIT",
             "dependencies": {
                 "tslib": "^2.3.0"
@@ -710,14 +710,14 @@
                 "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
             },
             "peerDependencies": {
-                "@angular/core": "18.2.1",
+                "@angular/core": "18.2.2",
                 "rxjs": "^6.5.3 || ^7.4.0"
             }
         },
         "node_modules/@angular/compiler": {
-            "version": "18.2.1",
-            "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-18.2.1.tgz",
-            "integrity": "sha512-5e9ygKEcsBoV6xpaGKVrtsLxLETlrM0oB7twl4qG/xuKYqCLj8cRQMcAKSqDfTPzWMOAQc7pHdk+uFVo/8dWHA==",
+            "version": "18.2.2",
+            "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-18.2.2.tgz",
+            "integrity": "sha512-gmVNCXZiv/CIk2eKRLnH19N9VsPuE2s3Oxm0MNi003zk1cLy7D4YEm4fSrjKXtPY8MMpRXiu5f63W94hLwWEVw==",
             "license": "MIT",
             "dependencies": {
                 "tslib": "^2.3.0"
@@ -726,7 +726,7 @@
                 "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
             },
             "peerDependencies": {
-                "@angular/core": "18.2.1"
+                "@angular/core": "18.2.2"
             },
             "peerDependenciesMeta": {
                 "@angular/core": {
@@ -735,9 +735,9 @@
             }
         },
         "node_modules/@angular/compiler-cli": {
-            "version": "18.2.1",
-            "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-18.2.1.tgz",
-            "integrity": "sha512-D+Qba0r6RfHfffzrebGYp54h05AxpkagLjit/GczKNgWSP1gIgZxSfi88D+GvFmeWvZxWN1ecAQ+yqft9hJqWg==",
+            "version": "18.2.2",
+            "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-18.2.2.tgz",
+            "integrity": "sha512-fF7lDrTA12YGqVjF4LyMi4hm58cv9G6CWmzSlvun0nMYCwrbRNnakZsj19dOfiIqqu4MwHaF4w3PTmUSxkMuiw==",
             "license": "MIT",
             "dependencies": {
                 "@babel/core": "7.25.2",
@@ -758,14 +758,14 @@
                 "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
             },
             "peerDependencies": {
-                "@angular/compiler": "18.2.1",
+                "@angular/compiler": "18.2.2",
                 "typescript": ">=5.4 <5.6"
             }
         },
         "node_modules/@angular/core": {
-            "version": "18.2.1",
-            "resolved": "https://registry.npmjs.org/@angular/core/-/core-18.2.1.tgz",
-            "integrity": "sha512-9KrSpJ65UlJZNXrE18NszcfOwb5LZgG+LYi5Doe7amt218R1bzb3trvuAm0ZzMaoKh4ugtUCkzEOd4FALPEX6w==",
+            "version": "18.2.2",
+            "resolved": "https://registry.npmjs.org/@angular/core/-/core-18.2.2.tgz",
+            "integrity": "sha512-Rx6XajL0Ydj9hXUSPDvL2Q/kMzWtbiE3VxZFJnkE+fLQiWvr0GncB+NTb/nQ6QlPQ0ly60DvuI3KLcGDuFtGVA==",
             "license": "MIT",
             "dependencies": {
                 "tslib": "^2.3.0"
@@ -779,9 +779,9 @@
             }
         },
         "node_modules/@angular/forms": {
-            "version": "18.2.1",
-            "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-18.2.1.tgz",
-            "integrity": "sha512-T7z8KUuj2PoPxrMrAruQVJha+x4a9Y6IrKYtArgOQQlTwCEJuqpVYuOk5l3fwWpHE9bVEjvgkAMI1D5YXA/U6w==",
+            "version": "18.2.2",
+            "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-18.2.2.tgz",
+            "integrity": "sha512-K8cv0w6o7+ocQfUrdSA3XaKrYfa1+2TlmtyxPHjEd2mCu2R+Yqo5RqJ3P8keFewJ1+bSLhz6xnn6mumwl0RnUQ==",
             "license": "MIT",
             "dependencies": {
                 "tslib": "^2.3.0"
@@ -790,16 +790,16 @@
                 "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
             },
             "peerDependencies": {
-                "@angular/common": "18.2.1",
-                "@angular/core": "18.2.1",
-                "@angular/platform-browser": "18.2.1",
+                "@angular/common": "18.2.2",
+                "@angular/core": "18.2.2",
+                "@angular/platform-browser": "18.2.2",
                 "rxjs": "^6.5.3 || ^7.4.0"
             }
         },
         "node_modules/@angular/language-service": {
-            "version": "18.2.1",
-            "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-18.2.1.tgz",
-            "integrity": "sha512-JI4oox9ELNdDVg0uJqCwgyFoK4XrowV14wSoNpGhpTLModRg3eDS6q+8cKn27cjTQRZvpReyYSTfiZMB8j4eqQ==",
+            "version": "18.2.2",
+            "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-18.2.2.tgz",
+            "integrity": "sha512-aROQNQeLf+o+F5OVvE/9BUe/Tpv8pjzmrZlogBbic5cb4IqSNhR4RjxbgIyXBO/6bhLCZwqfmMqRbW2J2xqMkg==",
             "dev": true,
             "license": "MIT",
             "engines": {
@@ -807,9 +807,9 @@
             }
         },
         "node_modules/@angular/localize": {
-            "version": "18.2.1",
-            "resolved": "https://registry.npmjs.org/@angular/localize/-/localize-18.2.1.tgz",
-            "integrity": "sha512-nNdB6ehXCSBpQ75sTh6Gcwy2rgExfZEkGcPARJLpjqQlHO+Mk3b1y3ka6XT9M2qQYUeyukncTFUMEZWwHICsOA==",
+            "version": "18.2.2",
+            "resolved": "https://registry.npmjs.org/@angular/localize/-/localize-18.2.2.tgz",
+            "integrity": "sha512-grWQ3CVbizOWCthGpyIlNNnZCpF/xpWYa6tIsPzKOXLCyqFQ7vOEtSludNN1nsUmMlZQt76+wA17Fx0qcNx0EA==",
             "license": "MIT",
             "dependencies": {
                 "@babel/core": "7.25.2",
@@ -826,21 +826,21 @@
                 "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
             },
             "peerDependencies": {
-                "@angular/compiler": "18.2.1",
-                "@angular/compiler-cli": "18.2.1"
+                "@angular/compiler": "18.2.2",
+                "@angular/compiler-cli": "18.2.2"
             }
         },
         "node_modules/@angular/material": {
-            "version": "18.2.1",
-            "resolved": "https://registry.npmjs.org/@angular/material/-/material-18.2.1.tgz",
-            "integrity": "sha512-DBSJGqLttT9vYpLGWTuuRoOKd1mNelS0jnNo7jNZyMpjcGfuhNzmPtYiBkXfNsAl7YoXoUmX8+4uh1JZspQGqA==",
+            "version": "18.2.2",
+            "resolved": "https://registry.npmjs.org/@angular/material/-/material-18.2.2.tgz",
+            "integrity": "sha512-c+EQo1GEvM2w3qasgV/BGxB0bpJeSGs2WcMVTXCYVMcqEk8nwpALwfZiCAYl8JoKoiC5k993zz19xP2Eu14qkQ==",
             "license": "MIT",
             "dependencies": {
                 "tslib": "^2.3.0"
             },
             "peerDependencies": {
                 "@angular/animations": "^18.0.0 || ^19.0.0",
-                "@angular/cdk": "18.2.1",
+                "@angular/cdk": "18.2.2",
                 "@angular/common": "^18.0.0 || ^19.0.0",
                 "@angular/core": "^18.0.0 || ^19.0.0",
                 "@angular/forms": "^18.0.0 || ^19.0.0",
@@ -849,9 +849,9 @@
             }
         },
         "node_modules/@angular/platform-browser": {
-            "version": "18.2.1",
-            "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-18.2.1.tgz",
-            "integrity": "sha512-hQABX7QotGmCIR3EhCBCDh5ZTvQao+JkuK5CCw2G1PkRfJMBwEpjNqnyhz41hZhWiGlucp9jgbeypppW+mIQEw==",
+            "version": "18.2.2",
+            "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-18.2.2.tgz",
+            "integrity": "sha512-Bfvl8elCFxyJ9vlwamr4X5sVMcp/tSwBal2coyl0WR+/PH2PAAtf+/WMYxIN90yZmPiJx6RZWUSJRlHOFiFp3A==",
             "license": "MIT",
             "dependencies": {
                 "tslib": "^2.3.0"
@@ -860,9 +860,9 @@
                 "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
             },
             "peerDependencies": {
-                "@angular/animations": "18.2.1",
-                "@angular/common": "18.2.1",
-                "@angular/core": "18.2.1"
+                "@angular/animations": "18.2.2",
+                "@angular/common": "18.2.2",
+                "@angular/core": "18.2.2"
             },
             "peerDependenciesMeta": {
                 "@angular/animations": {
@@ -871,9 +871,9 @@
             }
         },
         "node_modules/@angular/platform-browser-dynamic": {
-            "version": "18.2.1",
-            "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-18.2.1.tgz",
-            "integrity": "sha512-tYJHtshbaKrtnRA15k3vrveSVBqkVUGhINvGugFA2vMtdTOfhfPw+hhzYrcwJibgU49rHogCfI9mkIbpNRYntA==",
+            "version": "18.2.2",
+            "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-18.2.2.tgz",
+            "integrity": "sha512-UM/+1nY4iIj1v4lxAmV3XRHPAh/4qfNKScCLq8tJGot64rPCbtCl0Rl8rFFGqxAFvTErVDaJycUgWNZSfVl/hw==",
             "license": "MIT",
             "dependencies": {
                 "tslib": "^2.3.0"
@@ -882,16 +882,16 @@
                 "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
             },
             "peerDependencies": {
-                "@angular/common": "18.2.1",
-                "@angular/compiler": "18.2.1",
-                "@angular/core": "18.2.1",
-                "@angular/platform-browser": "18.2.1"
+                "@angular/common": "18.2.2",
+                "@angular/compiler": "18.2.2",
+                "@angular/core": "18.2.2",
+                "@angular/platform-browser": "18.2.2"
             }
         },
         "node_modules/@angular/router": {
-            "version": "18.2.1",
-            "resolved": "https://registry.npmjs.org/@angular/router/-/router-18.2.1.tgz",
-            "integrity": "sha512-gVyqW6fYnG7oq1DlZSXJMQ2Py2dJQB7g6XVtRcYB1gR4aeowx5N9ws7PjqAi0ih91ASq2MmP4OlSSWLq+eaMGg==",
+            "version": "18.2.2",
+            "resolved": "https://registry.npmjs.org/@angular/router/-/router-18.2.2.tgz",
+            "integrity": "sha512-tBHwuNtZNjzYAoVdveTI1ke/ZnQjKhc7gqDk9HCH2JUpdQhGbTvCKwDM51ktJpPMPcZlA263lQyy7VIyvdtK0A==",
             "license": "MIT",
             "dependencies": {
                 "tslib": "^2.3.0"
@@ -900,16 +900,16 @@
                 "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
             },
             "peerDependencies": {
-                "@angular/common": "18.2.1",
-                "@angular/core": "18.2.1",
-                "@angular/platform-browser": "18.2.1",
+                "@angular/common": "18.2.2",
+                "@angular/core": "18.2.2",
+                "@angular/platform-browser": "18.2.2",
                 "rxjs": "^6.5.3 || ^7.4.0"
             }
         },
         "node_modules/@angular/service-worker": {
-            "version": "18.2.1",
-            "resolved": "https://registry.npmjs.org/@angular/service-worker/-/service-worker-18.2.1.tgz",
-            "integrity": "sha512-Is4arGy+4HjyvALmR/GsWI4SwXYVJ1IkauAgxPsQKvWLNHdX7a/CEgEEVQGXq96H46QX9O2OcW69PnPatmJIXg==",
+            "version": "18.2.2",
+            "resolved": "https://registry.npmjs.org/@angular/service-worker/-/service-worker-18.2.2.tgz",
+            "integrity": "sha512-az0v0gNkAjOQ4DThDWfNJv2DkH63B4Vj/WnXd8pbY/C7Be6w3S1mN2y9vJClWAzUH/GSLQHnOrZJfnZtTc8M0w==",
             "license": "MIT",
             "dependencies": {
                 "tslib": "^2.3.0"
@@ -921,8 +921,8 @@
                 "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
             },
             "peerDependencies": {
-                "@angular/common": "18.2.1",
-                "@angular/core": "18.2.1"
+                "@angular/common": "18.2.2",
+                "@angular/core": "18.2.2"
             }
         },
         "node_modules/@babel/code-frame": {
@@ -1283,13 +1283,13 @@
             }
         },
         "node_modules/@babel/helpers": {
-            "version": "7.25.0",
-            "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.25.0.tgz",
-            "integrity": "sha512-MjgLZ42aCm0oGjJj8CtSM3DB8NOOf8h2l7DCTePJs29u+v7yO/RBX9nShlKMgFnRks/Q4tBAe7Hxnov9VkGwLw==",
+            "version": "7.25.6",
+            "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.25.6.tgz",
+            "integrity": "sha512-Xg0tn4HcfTijTwfDwYlvVCl43V6h4KyVVX2aEm4qdO/PC6L2YvzLHFdmxhoeSA3eslcE6+ZVXHgWwopXYLNq4Q==",
             "license": "MIT",
             "dependencies": {
                 "@babel/template": "^7.25.0",
-                "@babel/types": "^7.25.0"
+                "@babel/types": "^7.25.6"
             },
             "engines": {
                 "node": ">=6.9.0"
@@ -1311,12 +1311,12 @@
             }
         },
         "node_modules/@babel/parser": {
-            "version": "7.25.4",
-            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.4.tgz",
-            "integrity": "sha512-nq+eWrOgdtu3jG5Os4TQP3x3cLA8hR8TvJNjD8vnPa20WGycimcparWnLK4jJhElTK6SDyuJo1weMKO/5LpmLA==",
+            "version": "7.25.6",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.6.tgz",
+            "integrity": "sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==",
             "license": "MIT",
             "dependencies": {
-                "@babel/types": "^7.25.4"
+                "@babel/types": "^7.25.6"
             },
             "bin": {
                 "parser": "bin/babel-parser.js"
@@ -1504,13 +1504,13 @@
             }
         },
         "node_modules/@babel/plugin-syntax-import-assertions": {
-            "version": "7.24.7",
-            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.24.7.tgz",
-            "integrity": "sha512-Ec3NRUMoi8gskrkBe3fNmEQfxDvY8bgfQpz6jlk/41kX9eUjvpyqWU7PBP/pLAvMaSQjbMNKJmvX57jP+M6bPg==",
+            "version": "7.25.6",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.25.6.tgz",
+            "integrity": "sha512-aABl0jHw9bZ2karQ/uUD6XP4u0SG22SJrOHFoL6XB1R7dTovOP4TzTlsxOYC5yQ1pdscVK2JTUnF6QL3ARoAiQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@babel/helper-plugin-utils": "^7.24.7"
+                "@babel/helper-plugin-utils": "^7.24.8"
             },
             "engines": {
                 "node": ">=6.9.0"
@@ -2721,16 +2721,16 @@
             }
         },
         "node_modules/@babel/traverse": {
-            "version": "7.25.4",
-            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.4.tgz",
-            "integrity": "sha512-VJ4XsrD+nOvlXyLzmLzUs/0qjFS4sK30te5yEFlvbbUNEgKaVb2BHZUpAL+ttLPQAHNrsI3zZisbfha5Cvr8vg==",
+            "version": "7.25.6",
+            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.6.tgz",
+            "integrity": "sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ==",
             "license": "MIT",
             "dependencies": {
                 "@babel/code-frame": "^7.24.7",
-                "@babel/generator": "^7.25.4",
-                "@babel/parser": "^7.25.4",
+                "@babel/generator": "^7.25.6",
+                "@babel/parser": "^7.25.6",
                 "@babel/template": "^7.25.0",
-                "@babel/types": "^7.25.4",
+                "@babel/types": "^7.25.6",
                 "debug": "^4.3.1",
                 "globals": "^11.1.0"
             },
@@ -2739,12 +2739,12 @@
             }
         },
         "node_modules/@babel/traverse/node_modules/@babel/generator": {
-            "version": "7.25.5",
-            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.5.tgz",
-            "integrity": "sha512-abd43wyLfbWoxC6ahM8xTkqLpGB2iWBVyuKC9/srhFunCd1SDNrV1s72bBpK4hLj8KLzHBBcOblvLQZBNw9r3w==",
+            "version": "7.25.6",
+            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.6.tgz",
+            "integrity": "sha512-VPC82gr1seXOpkjAAKoLhP50vx4vGNlF4msF64dSFq1P8RfB+QAuJWGHPXXPc8QyfVWwwB/TNNU4+ayZmHNbZw==",
             "license": "MIT",
             "dependencies": {
-                "@babel/types": "^7.25.4",
+                "@babel/types": "^7.25.6",
                 "@jridgewell/gen-mapping": "^0.3.5",
                 "@jridgewell/trace-mapping": "^0.3.25",
                 "jsesc": "^2.5.1"
@@ -2754,9 +2754,9 @@
             }
         },
         "node_modules/@babel/types": {
-            "version": "7.25.4",
-            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.4.tgz",
-            "integrity": "sha512-zQ1ijeeCXVEh+aNL0RlmkPkG8HUiDcU2pzQQFjtbntgAczRASFzj4H+6+bV+dy1ntKR14I/DypeuRG1uma98iQ==",
+            "version": "7.25.6",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.6.tgz",
+            "integrity": "sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==",
             "license": "MIT",
             "dependencies": {
                 "@babel/helper-string-parser": "^7.24.8",
@@ -4094,6 +4094,16 @@
                 "node": ">=8"
             }
         },
+        "node_modules/@jest/console/node_modules/slash": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+            "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/@jest/console/node_modules/supports-color": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -4218,6 +4228,16 @@
                 "node": ">=8"
             }
         },
+        "node_modules/@jest/core/node_modules/slash": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+            "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/@jest/core/node_modules/supports-color": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -4415,6 +4435,16 @@
                 "node": ">=8"
             }
         },
+        "node_modules/@jest/reporters/node_modules/slash": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+            "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/@jest/reporters/node_modules/supports-color": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -4488,6 +4518,16 @@
                 "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
             }
         },
+        "node_modules/@jest/test-sequencer/node_modules/slash": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+            "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/@jest/transform": {
             "version": "29.7.0",
             "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-29.7.0.tgz",
@@ -4585,6 +4625,16 @@
                 "node": ">=8"
             }
         },
+        "node_modules/@jest/transform/node_modules/slash": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+            "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/@jest/transform/node_modules/supports-color": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -5045,9 +5095,9 @@
             ]
         },
         "node_modules/@ng-bootstrap/ng-bootstrap": {
-            "version": "17.0.0",
-            "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-17.0.0.tgz",
-            "integrity": "sha512-hTbBtozJlpevF1RO6J2adCoXiAkMTPV3wmXIyK05dVha4VsKjHibgaL6YldToKoh6ElQnIYkPEIJHX9z5EtyMw==",
+            "version": "17.0.1",
+            "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-17.0.1.tgz",
+            "integrity": "sha512-utbm8OXIoqVVYGVzQkOS773ymbjc+UMkXv8lyi7hTqLhCQs0rZ0yA74peqVZRuOGXLHgcSTA7fnJhA80iQOblw==",
             "license": "MIT",
             "dependencies": {
                 "tslib": "^2.3.0"
@@ -5062,9 +5112,9 @@
             }
         },
         "node_modules/@ngtools/webpack": {
-            "version": "18.2.1",
-            "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-18.2.1.tgz",
-            "integrity": "sha512-v86U3jOoy5R9ZWe9Q0LbHRx/IBw1lbn0ldBU+gIIepREyVvb9CcH/vAyIb2Fw1zaYvvfG1OyzdrHyW8iGXjdnQ==",
+            "version": "18.2.2",
+            "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-18.2.2.tgz",
+            "integrity": "sha512-YhADmc+lVjLt3kze07A+yLry2yzcghdclu+7D3EDfa6fG2Pk33HK3MY2I0Z0BO+Ivoq7cV7yxm+naR+Od0Y5ng==",
             "dev": true,
             "license": "MIT",
             "engines": {
@@ -5709,14 +5759,14 @@
             ]
         },
         "node_modules/@schematics/angular": {
-            "version": "18.2.1",
-            "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-18.2.1.tgz",
-            "integrity": "sha512-bBV7I+MCbdQmBPUFF4ECg37VReM0+AdQsxgwkjBBSYExmkErkDoDgKquwL/tH7stDCc5IfTd0g9BMeosRgDMug==",
+            "version": "18.2.2",
+            "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-18.2.2.tgz",
+            "integrity": "sha512-0uPA1kQ38RnbNrzMlveX/QAqQIDu2INl5IYd3EUbJZRfYSp1VVyOSyuIBJ+1iUl5Y5VUa2uylaVZXhFdKWprXw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@angular-devkit/core": "18.2.1",
-                "@angular-devkit/schematics": "18.2.1",
+                "@angular-devkit/core": "18.2.2",
+                "@angular-devkit/schematics": "18.2.2",
                 "jsonc-parser": "3.3.1"
             },
             "engines": {
@@ -5726,73 +5776,73 @@
             }
         },
         "node_modules/@sentry-internal/browser-utils": {
-            "version": "8.26.0",
-            "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-8.26.0.tgz",
-            "integrity": "sha512-O2Tj+WK33/ZVp5STnz6ZL0OO+/Idk2KqsH0ITQkQmyZ2z0kdzWOeqK7s7q3/My6rB1GfPcyqPcBBv4dVv92FYQ==",
+            "version": "8.27.0",
+            "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-8.27.0.tgz",
+            "integrity": "sha512-YTIwQ1GM1NTRXgN4DvpFSQ2x4pjlqQ0FQAyHW5x2ZYv4z7VmqG4Xkid1P/srQUipECk6nxkebfD4WR19nLsvnQ==",
             "license": "MIT",
             "dependencies": {
-                "@sentry/core": "8.26.0",
-                "@sentry/types": "8.26.0",
-                "@sentry/utils": "8.26.0"
+                "@sentry/core": "8.27.0",
+                "@sentry/types": "8.27.0",
+                "@sentry/utils": "8.27.0"
             },
             "engines": {
                 "node": ">=14.18"
             }
         },
         "node_modules/@sentry-internal/feedback": {
-            "version": "8.26.0",
-            "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-8.26.0.tgz",
-            "integrity": "sha512-hQtw1gg8n6ERK1UH47F7ZI1zOsbhu0J2VX+TrnkpaQR2FgxDW1oe9Ja6oCV4CQKuR4w+1ZI/Kj4imSt0K33kEw==",
+            "version": "8.27.0",
+            "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-8.27.0.tgz",
+            "integrity": "sha512-b71PQc9aK1X9b/SO1DiJlrnAEx4n0MzPZQ/tKd9oRWDyGit6pJWZfQns9r2rvc96kJPMOTxFAa/upXRCkA723A==",
             "license": "MIT",
             "dependencies": {
-                "@sentry/core": "8.26.0",
-                "@sentry/types": "8.26.0",
-                "@sentry/utils": "8.26.0"
+                "@sentry/core": "8.27.0",
+                "@sentry/types": "8.27.0",
+                "@sentry/utils": "8.27.0"
             },
             "engines": {
                 "node": ">=14.18"
             }
         },
         "node_modules/@sentry-internal/replay": {
-            "version": "8.26.0",
-            "resolved": "https://registry.npmjs.org/@sentry-internal/replay/-/replay-8.26.0.tgz",
-            "integrity": "sha512-JDY7W2bswlp5c3483lKP4kcb75fHNwGNfwD8x8FsY9xMjv7nxeXjLpR5cCEk1XqPq2+n6w4j7mJOXhEXGiUIKg==",
+            "version": "8.27.0",
+            "resolved": "https://registry.npmjs.org/@sentry-internal/replay/-/replay-8.27.0.tgz",
+            "integrity": "sha512-Ofucncaon98dvlxte2L//hwuG9yILSxNrTz/PmO0k+HzB9q+oBic4667QF+azWR2qv4oKSWpc+vEovP3hVqveA==",
             "license": "MIT",
             "dependencies": {
-                "@sentry-internal/browser-utils": "8.26.0",
-                "@sentry/core": "8.26.0",
-                "@sentry/types": "8.26.0",
-                "@sentry/utils": "8.26.0"
+                "@sentry-internal/browser-utils": "8.27.0",
+                "@sentry/core": "8.27.0",
+                "@sentry/types": "8.27.0",
+                "@sentry/utils": "8.27.0"
             },
             "engines": {
                 "node": ">=14.18"
             }
         },
         "node_modules/@sentry-internal/replay-canvas": {
-            "version": "8.26.0",
-            "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-8.26.0.tgz",
-            "integrity": "sha512-2CFQW6f9aJHIo/DqmqYa9PaYoLn1o36ywc0h8oyGrD4oPCbrnE5F++PmTdc71GBODu41HBn/yoCTLmxOD+UjpA==",
+            "version": "8.27.0",
+            "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-8.27.0.tgz",
+            "integrity": "sha512-uuEfiWbjwugB9M4KxXxovHYiKRqg/R6U4EF8xM/Ub4laUuEcWsfRp7lQ3MxL3qYojbca8ncIFic2bIoKMPeejA==",
             "license": "MIT",
             "dependencies": {
-                "@sentry-internal/replay": "8.26.0",
-                "@sentry/core": "8.26.0",
-                "@sentry/types": "8.26.0",
-                "@sentry/utils": "8.26.0"
+                "@sentry-internal/replay": "8.27.0",
+                "@sentry/core": "8.27.0",
+                "@sentry/types": "8.27.0",
+                "@sentry/utils": "8.27.0"
             },
             "engines": {
                 "node": ">=14.18"
             }
         },
         "node_modules/@sentry/angular": {
-            "version": "8.26.0",
-            "resolved": "https://registry.npmjs.org/@sentry/angular/-/angular-8.26.0.tgz",
-            "integrity": "sha512-9YolcJMdEzS6hbImal3jrAbzGZGM7DpmfSOfzt1Cs4bYTD9gCxKRkLyUgiNRIlrIBO7CkdpMrCSY+nEohvCw7A==",
+            "version": "8.27.0",
+            "resolved": "https://registry.npmjs.org/@sentry/angular/-/angular-8.27.0.tgz",
+            "integrity": "sha512-0BjjrqnVMofVbQGEwfZgYAZWFl4ewkWRjcUj+NIX4iJpRZZniKZxo6XOlo/pTkt4oVHsbNHJO0C1tS+gRZFErg==",
             "license": "MIT",
             "dependencies": {
-                "@sentry/browser": "8.26.0",
-                "@sentry/core": "8.26.0",
-                "@sentry/types": "8.26.0",
-                "@sentry/utils": "8.26.0",
+                "@sentry/browser": "8.27.0",
+                "@sentry/core": "8.27.0",
+                "@sentry/types": "8.27.0",
+                "@sentry/utils": "8.27.0",
                 "tslib": "^2.4.1"
             },
             "engines": {
@@ -5806,52 +5856,52 @@
             }
         },
         "node_modules/@sentry/browser": {
-            "version": "8.26.0",
-            "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-8.26.0.tgz",
-            "integrity": "sha512-e5s6eKlwLZWzTwQcBwqyAGZMMuQROW9Z677VzwkSyREWAIkKjfH2VBxHATnNGc0IVkNHjD7iH3ixo3C0rLKM3w==",
+            "version": "8.27.0",
+            "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-8.27.0.tgz",
+            "integrity": "sha512-eL1eaHwoYUGkp4mpeYesH6WtCrm+0u9jYCW5Lm0MAeTmpx22BZKEmj0OljuUJXGnJwFbvPDlRjyz6QG11m8kZA==",
             "license": "MIT",
             "dependencies": {
-                "@sentry-internal/browser-utils": "8.26.0",
-                "@sentry-internal/feedback": "8.26.0",
-                "@sentry-internal/replay": "8.26.0",
-                "@sentry-internal/replay-canvas": "8.26.0",
-                "@sentry/core": "8.26.0",
-                "@sentry/types": "8.26.0",
-                "@sentry/utils": "8.26.0"
+                "@sentry-internal/browser-utils": "8.27.0",
+                "@sentry-internal/feedback": "8.27.0",
+                "@sentry-internal/replay": "8.27.0",
+                "@sentry-internal/replay-canvas": "8.27.0",
+                "@sentry/core": "8.27.0",
+                "@sentry/types": "8.27.0",
+                "@sentry/utils": "8.27.0"
             },
             "engines": {
                 "node": ">=14.18"
             }
         },
         "node_modules/@sentry/core": {
-            "version": "8.26.0",
-            "resolved": "https://registry.npmjs.org/@sentry/core/-/core-8.26.0.tgz",
-            "integrity": "sha512-g/tVmTZD4GNbLFf++hKJfBpcCAtduFEMLnbfa9iT/QEZjlmP+EzY+GsH9bafM5VsNe8DiOUp+kJKWtShzlVdBA==",
+            "version": "8.27.0",
+            "resolved": "https://registry.npmjs.org/@sentry/core/-/core-8.27.0.tgz",
+            "integrity": "sha512-4frlXluHT3Du+Omw91K04jpvbfMtydvg4Bxj2+gt/DT19Swhm/fbEpzdUjgbAd3Jinj/n0qk/jFRXjr9JZKFjg==",
             "license": "MIT",
             "dependencies": {
-                "@sentry/types": "8.26.0",
-                "@sentry/utils": "8.26.0"
+                "@sentry/types": "8.27.0",
+                "@sentry/utils": "8.27.0"
             },
             "engines": {
                 "node": ">=14.18"
             }
         },
         "node_modules/@sentry/types": {
-            "version": "8.26.0",
-            "resolved": "https://registry.npmjs.org/@sentry/types/-/types-8.26.0.tgz",
-            "integrity": "sha512-zKmh6SWsJh630rpt7a9vP4Cm4m1C2gDTUqUiH565CajCL/4cePpNWYrNwalSqsOSL7B9OrczA1+n6a6XvND+ng==",
+            "version": "8.27.0",
+            "resolved": "https://registry.npmjs.org/@sentry/types/-/types-8.27.0.tgz",
+            "integrity": "sha512-B6lrP46+m2x0lfqWc9F4VcUbN893mVGnPEd7KIMRk95mPzkFJ3sNxggTQF5/ZfNO7lDQYQb22uysB5sj/BqFiw==",
             "license": "MIT",
             "engines": {
                 "node": ">=14.18"
             }
         },
         "node_modules/@sentry/utils": {
-            "version": "8.26.0",
-            "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-8.26.0.tgz",
-            "integrity": "sha512-xvlPU9Hd2BlyT+FhWHGNwnxWqdVRk2AHnDtVcW4Ma0Ri5EwS+uy4Jeik5UkSv8C5RVb9VlxFmS8LN3I1MPJsLw==",
+            "version": "8.27.0",
+            "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-8.27.0.tgz",
+            "integrity": "sha512-gyJM3SyLQe0A3mkQVVNdKYvk3ZoikkYgyA/D+5StFNLKdyUgEbJgXOGXrQSSYPF7BSX6Sc5b0KHCglPII0KuKw==",
             "license": "MIT",
             "dependencies": {
-                "@sentry/types": "8.26.0"
+                "@sentry/types": "8.27.0"
             },
             "engines": {
                 "node": ">=14.18"
@@ -6271,27 +6321,18 @@
             }
         },
         "node_modules/@types/eslint": {
-            "version": "9.6.0",
-            "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.0.tgz",
-            "integrity": "sha512-gi6WQJ7cHRgZxtkQEoyHMppPjq9Kxo5Tjn2prSKDSmZrCz8TZ3jSRCeTJm+WoM+oB0WG37bRqLzaaU3q7JypGg==",
+            "version": "9.6.1",
+            "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
+            "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==",
             "dev": true,
             "license": "MIT",
+            "optional": true,
+            "peer": true,
             "dependencies": {
                 "@types/estree": "*",
                 "@types/json-schema": "*"
             }
         },
-        "node_modules/@types/eslint-scope": {
-            "version": "3.7.7",
-            "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
-            "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
-            "dev": true,
-            "license": "MIT",
-            "dependencies": {
-                "@types/eslint": "*",
-                "@types/estree": "*"
-            }
-        },
         "node_modules/@types/estree": {
             "version": "1.0.5",
             "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -6454,9 +6495,9 @@
             }
         },
         "node_modules/@types/node": {
-            "version": "22.5.0",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.0.tgz",
-            "integrity": "sha512-DkFrJOe+rfdHTqqMg0bSNlGlQ85hSoh2TPzZyhHsXnMtligRWpxUySiyw8FY14ITt24HVCiQPWxS3KO/QlGmWg==",
+            "version": "22.5.1",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.1.tgz",
+            "integrity": "sha512-KkHsxej0j9IW1KKOOAA/XBA0z08UFSrRQHErzEfA3Vgq57eXIMYboIlHJuYIfd+lwCQjtKqUu3UnmKbtUc9yRw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -6660,17 +6701,17 @@
             "license": "MIT"
         },
         "node_modules/@typescript-eslint/eslint-plugin": {
-            "version": "8.2.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.2.0.tgz",
-            "integrity": "sha512-02tJIs655em7fvt9gps/+4k4OsKULYGtLBPJfOsmOq1+3cdClYiF0+d6mHu6qDnTcg88wJBkcPLpQhq7FyDz0A==",
+            "version": "8.3.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.3.0.tgz",
+            "integrity": "sha512-FLAIn63G5KH+adZosDYiutqkOkYEx0nvcwNNfJAf+c7Ae/H35qWwTYvPZUKFj5AS+WfHG/WJJfWnDnyNUlp8UA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@eslint-community/regexpp": "^4.10.0",
-                "@typescript-eslint/scope-manager": "8.2.0",
-                "@typescript-eslint/type-utils": "8.2.0",
-                "@typescript-eslint/utils": "8.2.0",
-                "@typescript-eslint/visitor-keys": "8.2.0",
+                "@typescript-eslint/scope-manager": "8.3.0",
+                "@typescript-eslint/type-utils": "8.3.0",
+                "@typescript-eslint/utils": "8.3.0",
+                "@typescript-eslint/visitor-keys": "8.3.0",
                 "graphemer": "^1.4.0",
                 "ignore": "^5.3.1",
                 "natural-compare": "^1.4.0",
@@ -6694,16 +6735,16 @@
             }
         },
         "node_modules/@typescript-eslint/parser": {
-            "version": "8.2.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.2.0.tgz",
-            "integrity": "sha512-j3Di+o0lHgPrb7FxL3fdEy6LJ/j2NE8u+AP/5cQ9SKb+JLH6V6UHDqJ+e0hXBkHP1wn1YDFjYCS9LBQsZDlDEg==",
+            "version": "8.3.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.3.0.tgz",
+            "integrity": "sha512-h53RhVyLu6AtpUzVCYLPhZGL5jzTD9fZL+SYf/+hYOx2bDkyQXztXSc4tbvKYHzfMXExMLiL9CWqJmVz6+78IQ==",
             "dev": true,
             "license": "BSD-2-Clause",
             "dependencies": {
-                "@typescript-eslint/scope-manager": "8.2.0",
-                "@typescript-eslint/types": "8.2.0",
-                "@typescript-eslint/typescript-estree": "8.2.0",
-                "@typescript-eslint/visitor-keys": "8.2.0",
+                "@typescript-eslint/scope-manager": "8.3.0",
+                "@typescript-eslint/types": "8.3.0",
+                "@typescript-eslint/typescript-estree": "8.3.0",
+                "@typescript-eslint/visitor-keys": "8.3.0",
                 "debug": "^4.3.4"
             },
             "engines": {
@@ -6723,14 +6764,14 @@
             }
         },
         "node_modules/@typescript-eslint/scope-manager": {
-            "version": "8.2.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.2.0.tgz",
-            "integrity": "sha512-OFn80B38yD6WwpoHU2Tz/fTz7CgFqInllBoC3WP+/jLbTb4gGPTy9HBSTsbDWkMdN55XlVU0mMDYAtgvlUspGw==",
+            "version": "8.3.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.3.0.tgz",
+            "integrity": "sha512-mz2X8WcN2nVu5Hodku+IR8GgCOl4C0G/Z1ruaWN4dgec64kDBabuXyPAr+/RgJtumv8EEkqIzf3X2U5DUKB2eg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/types": "8.2.0",
-                "@typescript-eslint/visitor-keys": "8.2.0"
+                "@typescript-eslint/types": "8.3.0",
+                "@typescript-eslint/visitor-keys": "8.3.0"
             },
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -6741,14 +6782,14 @@
             }
         },
         "node_modules/@typescript-eslint/type-utils": {
-            "version": "8.2.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.2.0.tgz",
-            "integrity": "sha512-g1CfXGFMQdT5S+0PSO0fvGXUaiSkl73U1n9LTK5aRAFnPlJ8dLKkXr4AaLFvPedW8lVDoMgLLE3JN98ZZfsj0w==",
+            "version": "8.3.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.3.0.tgz",
+            "integrity": "sha512-wrV6qh//nLbfXZQoj32EXKmwHf4b7L+xXLrP3FZ0GOUU72gSvLjeWUl5J5Ue5IwRxIV1TfF73j/eaBapxx99Lg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/typescript-estree": "8.2.0",
-                "@typescript-eslint/utils": "8.2.0",
+                "@typescript-eslint/typescript-estree": "8.3.0",
+                "@typescript-eslint/utils": "8.3.0",
                 "debug": "^4.3.4",
                 "ts-api-utils": "^1.3.0"
             },
@@ -6766,9 +6807,9 @@
             }
         },
         "node_modules/@typescript-eslint/types": {
-            "version": "8.2.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.2.0.tgz",
-            "integrity": "sha512-6a9QSK396YqmiBKPkJtxsgZZZVjYQ6wQ/TlI0C65z7vInaETuC6HAHD98AGLC8DyIPqHytvNuS8bBVvNLKyqvQ==",
+            "version": "8.3.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.3.0.tgz",
+            "integrity": "sha512-y6sSEeK+facMaAyixM36dQ5NVXTnKWunfD1Ft4xraYqxP0lC0POJmIaL/mw72CUMqjY9qfyVfXafMeaUj0noWw==",
             "dev": true,
             "license": "MIT",
             "engines": {
@@ -6780,16 +6821,16 @@
             }
         },
         "node_modules/@typescript-eslint/typescript-estree": {
-            "version": "8.2.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.2.0.tgz",
-            "integrity": "sha512-kiG4EDUT4dImplOsbh47B1QnNmXSoUqOjWDvCJw/o8LgfD0yr7k2uy54D5Wm0j4t71Ge1NkynGhpWdS0dEIAUA==",
+            "version": "8.3.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.3.0.tgz",
+            "integrity": "sha512-Mq7FTHl0R36EmWlCJWojIC1qn/ZWo2YiWYc1XVtasJ7FIgjo0MVv9rZWXEE7IK2CGrtwe1dVOxWwqXUdNgfRCA==",
             "dev": true,
             "license": "BSD-2-Clause",
             "dependencies": {
-                "@typescript-eslint/types": "8.2.0",
-                "@typescript-eslint/visitor-keys": "8.2.0",
+                "@typescript-eslint/types": "8.3.0",
+                "@typescript-eslint/visitor-keys": "8.3.0",
                 "debug": "^4.3.4",
-                "globby": "^11.1.0",
+                "fast-glob": "^3.3.2",
                 "is-glob": "^4.0.3",
                 "minimatch": "^9.0.4",
                 "semver": "^7.6.0",
@@ -6809,16 +6850,16 @@
             }
         },
         "node_modules/@typescript-eslint/utils": {
-            "version": "8.2.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.2.0.tgz",
-            "integrity": "sha512-O46eaYKDlV3TvAVDNcoDzd5N550ckSe8G4phko++OCSC1dYIb9LTc3HDGYdWqWIAT5qDUKphO6sd9RrpIJJPfg==",
+            "version": "8.3.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.3.0.tgz",
+            "integrity": "sha512-F77WwqxIi/qGkIGOGXNBLV7nykwfjLsdauRB/DOFPdv6LTF3BHHkBpq81/b5iMPSF055oO2BiivDJV4ChvNtXA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.4.0",
-                "@typescript-eslint/scope-manager": "8.2.0",
-                "@typescript-eslint/types": "8.2.0",
-                "@typescript-eslint/typescript-estree": "8.2.0"
+                "@typescript-eslint/scope-manager": "8.3.0",
+                "@typescript-eslint/types": "8.3.0",
+                "@typescript-eslint/typescript-estree": "8.3.0"
             },
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -6832,13 +6873,13 @@
             }
         },
         "node_modules/@typescript-eslint/visitor-keys": {
-            "version": "8.2.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.2.0.tgz",
-            "integrity": "sha512-sbgsPMW9yLvS7IhCi8IpuK1oBmtbWUNP+hBdwl/I9nzqVsszGnNGti5r9dUtF5RLivHUFFIdRvLiTsPhzSyJ3Q==",
+            "version": "8.3.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.3.0.tgz",
+            "integrity": "sha512-RmZwrTbQ9QveF15m/Cl28n0LXD6ea2CjkhH5rQ55ewz3H24w+AMCJHPVYaZ8/0HoG8Z3cLLFFycRXxeO2tz9FA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/types": "8.2.0",
+                "@typescript-eslint/types": "8.3.0",
                 "eslint-visitor-keys": "^3.4.3"
             },
             "engines": {
@@ -7497,6 +7538,16 @@
                 "node": ">=8"
             }
         },
+        "node_modules/babel-jest/node_modules/slash": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+            "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/babel-jest/node_modules/supports-color": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -8085,9 +8136,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001651",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz",
-            "integrity": "sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==",
+            "version": "1.0.30001654",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001654.tgz",
+            "integrity": "sha512-wLJc602fW0OdrUR+PqsBUH3dgrjDcT+mWs/Kw86zPvgjiqOiI2TXMkBFK4KihYzZclmJxrFwgYhZDSEogFai/g==",
             "funding": [
                 {
                     "type": "opencollective",
@@ -8196,9 +8247,9 @@
             }
         },
         "node_modules/cjs-module-lexer": {
-            "version": "1.3.1",
-            "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.3.1.tgz",
-            "integrity": "sha512-a3KdPAANPbNE4ZUv9h6LckSl9zLsYOP4MBmhIPkRaeyybt+r4UghLvq+xw/YwUcC1gqylCkL4rdVs3Lwupjm4Q==",
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.4.0.tgz",
+            "integrity": "sha512-N1NGmowPlGBLsOZLPvm48StN04V4YvQRL0i6b7ctrVY3epjP/ct7hFLOItz6pDIvRjwpfPxi52a2UWV2ziir8g==",
             "dev": true,
             "license": "MIT"
         },
@@ -8639,53 +8690,6 @@
                 "node": ">=10.13.0"
             }
         },
-        "node_modules/copy-webpack-plugin/node_modules/globby": {
-            "version": "14.0.2",
-            "resolved": "https://registry.npmjs.org/globby/-/globby-14.0.2.tgz",
-            "integrity": "sha512-s3Fq41ZVh7vbbe2PN3nrW7yC7U7MFVc5c98/iTl9c2GawNMKx/J648KQRW6WKkuU8GIbbh2IXfIRQjOZnXcTnw==",
-            "dev": true,
-            "license": "MIT",
-            "dependencies": {
-                "@sindresorhus/merge-streams": "^2.1.0",
-                "fast-glob": "^3.3.2",
-                "ignore": "^5.2.4",
-                "path-type": "^5.0.0",
-                "slash": "^5.1.0",
-                "unicorn-magic": "^0.1.0"
-            },
-            "engines": {
-                "node": ">=18"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/copy-webpack-plugin/node_modules/path-type": {
-            "version": "5.0.0",
-            "resolved": "https://registry.npmjs.org/path-type/-/path-type-5.0.0.tgz",
-            "integrity": "sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==",
-            "dev": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">=12"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/copy-webpack-plugin/node_modules/slash": {
-            "version": "5.1.0",
-            "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz",
-            "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==",
-            "dev": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">=14.16"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
         "node_modules/core-js": {
             "version": "3.38.1",
             "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.1.tgz",
@@ -9649,6 +9653,16 @@
                 "node": ">=8"
             }
         },
+        "node_modules/dir-glob/node_modules/path-type": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+            "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/dns-packet": {
             "version": "5.6.1",
             "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.6.1.tgz",
@@ -9777,9 +9791,9 @@
             }
         },
         "node_modules/emoji-regex": {
-            "version": "10.3.0",
-            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz",
-            "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==",
+            "version": "10.4.0",
+            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.4.0.tgz",
+            "integrity": "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==",
             "dev": true,
             "license": "MIT"
         },
@@ -9993,9 +10007,9 @@
             }
         },
         "node_modules/escalade": {
-            "version": "3.1.2",
-            "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
-            "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+            "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
             "license": "MIT",
             "engines": {
                 "node": ">=6"
@@ -10208,10 +10222,41 @@
                 "url": "https://opencollective.com/typescript-eslint"
             }
         },
+        "node_modules/eslint-plugin-deprecation/node_modules/globby": {
+            "version": "11.1.0",
+            "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+            "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "array-union": "^2.1.0",
+                "dir-glob": "^3.0.1",
+                "fast-glob": "^3.2.9",
+                "ignore": "^5.2.0",
+                "merge2": "^1.4.1",
+                "slash": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/eslint-plugin-deprecation/node_modules/slash": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+            "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/eslint-plugin-jest": {
-            "version": "28.8.0",
-            "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-28.8.0.tgz",
-            "integrity": "sha512-Tubj1hooFxCl52G4qQu0edzV/+EZzPUeN8p2NnW5uu4fbDs+Yo7+qDVDc4/oG3FbCqEBmu/OC3LSsyiU22oghw==",
+            "version": "28.8.1",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-28.8.1.tgz",
+            "integrity": "sha512-G46XMyYu6PtSNJUkQ0hsPjzXYpzq/O4vpCciMizTKRJG8kNsRreGoMRDG6H9FIB/xVgfFuclVnuX4XRvFUzrZQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -10379,6 +10424,37 @@
                 "node": ">=4.0"
             }
         },
+        "node_modules/eslint-plugin-jest-extended/node_modules/globby": {
+            "version": "11.1.0",
+            "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+            "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "array-union": "^2.1.0",
+                "dir-glob": "^3.0.1",
+                "fast-glob": "^3.2.9",
+                "ignore": "^5.2.0",
+                "merge2": "^1.4.1",
+                "slash": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/eslint-plugin-jest-extended/node_modules/slash": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+            "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/eslint-plugin-prettier": {
             "version": "5.2.1",
             "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.1.tgz",
@@ -11448,21 +11524,21 @@
             }
         },
         "node_modules/globby": {
-            "version": "11.1.0",
-            "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
-            "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+            "version": "14.0.2",
+            "resolved": "https://registry.npmjs.org/globby/-/globby-14.0.2.tgz",
+            "integrity": "sha512-s3Fq41ZVh7vbbe2PN3nrW7yC7U7MFVc5c98/iTl9c2GawNMKx/J648KQRW6WKkuU8GIbbh2IXfIRQjOZnXcTnw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "array-union": "^2.1.0",
-                "dir-glob": "^3.0.1",
-                "fast-glob": "^3.2.9",
-                "ignore": "^5.2.0",
-                "merge2": "^1.4.1",
-                "slash": "^3.0.0"
+                "@sindresorhus/merge-streams": "^2.1.0",
+                "fast-glob": "^3.3.2",
+                "ignore": "^5.2.4",
+                "path-type": "^5.0.0",
+                "slash": "^5.1.0",
+                "unicorn-magic": "^0.1.0"
             },
             "engines": {
-                "node": ">=10"
+                "node": ">=18"
             },
             "funding": {
                 "url": "https://github.com/sponsors/sindresorhus"
@@ -12812,6 +12888,16 @@
                 "node": ">=8"
             }
         },
+        "node_modules/jest-circus/node_modules/slash": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+            "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/jest-circus/node_modules/supports-color": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -13044,6 +13130,16 @@
                 "node": ">=8"
             }
         },
+        "node_modules/jest-config/node_modules/slash": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+            "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/jest-config/node_modules/supports-color": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -13589,6 +13685,16 @@
                 "node": ">=8"
             }
         },
+        "node_modules/jest-message-util/node_modules/slash": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+            "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/jest-message-util/node_modules/supports-color": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -13772,6 +13878,16 @@
                 "node": ">=8"
             }
         },
+        "node_modules/jest-resolve/node_modules/slash": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+            "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/jest-resolve/node_modules/supports-color": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -14012,6 +14128,16 @@
                 "node": ">=8"
             }
         },
+        "node_modules/jest-runtime/node_modules/slash": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+            "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/jest-runtime/node_modules/supports-color": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -16123,9 +16249,9 @@
             "license": "MIT"
         },
         "node_modules/ng-mocks": {
-            "version": "14.13.0",
-            "resolved": "https://registry.npmjs.org/ng-mocks/-/ng-mocks-14.13.0.tgz",
-            "integrity": "sha512-cQ6nUj/P+v7X52gYU6bAj/03iDKl2pzbPy2V0tx/d5lxME063Vxc190p6UPlJkbRIxcB+OqSALPgQvy83efzjw==",
+            "version": "14.13.1",
+            "resolved": "https://registry.npmjs.org/ng-mocks/-/ng-mocks-14.13.1.tgz",
+            "integrity": "sha512-eyfnjXeC108SqVD09i/cBwCpKkK0JjBoAg8jp7oQS2HS081K3WJTttFpgLGeLDYKmZsZ6nYpI+HHNQ3OksaJ7A==",
             "dev": true,
             "license": "MIT",
             "funding": {
@@ -16231,9 +16357,9 @@
             }
         },
         "node_modules/node-gyp-build": {
-            "version": "4.8.1",
-            "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.1.tgz",
-            "integrity": "sha512-OSs33Z9yWr148JZcbZd5WiAXhh/n9z8TxQcdMhIOlpN9AhWpLfvVFO73+m77bBABQMaY9XSvIa+qk0jlI7Gcaw==",
+            "version": "4.8.2",
+            "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.2.tgz",
+            "integrity": "sha512-IRUxE4BVsHWXkV/SFOut4qTlagw2aM8T5/vnTsmrHJvVoKueJHRc/JaFND7QDDc61kLYUJ6qlZM3sqTSyx2dTw==",
             "dev": true,
             "license": "MIT",
             "bin": {
@@ -17073,13 +17199,16 @@
             "license": "MIT"
         },
         "node_modules/path-type": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-            "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/path-type/-/path-type-5.0.0.tgz",
+            "integrity": "sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==",
             "dev": true,
             "license": "MIT",
             "engines": {
-                "node": ">=8"
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
             }
         },
         "node_modules/pepjs": {
@@ -17407,9 +17536,9 @@
             "license": "MIT"
         },
         "node_modules/posthog-js": {
-            "version": "1.157.2",
-            "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.157.2.tgz",
-            "integrity": "sha512-ATYKGs+Q51u26nHHhrhWNh1whqFm7j/rwQQYw+y6/YzNmRlo+YsqrGZji9nqXb9/4fo0ModDr+ZmuOI3hKkUXA==",
+            "version": "1.160.0",
+            "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.160.0.tgz",
+            "integrity": "sha512-K/RRgmPYIpP69nnveCJfkclb8VU+R+jsgqlrKaLGsM5CtQM9g01WOzAiT3u36WLswi58JiFMXgJtECKQuoqTgQ==",
             "license": "MIT",
             "dependencies": {
                 "fflate": "^0.4.8",
@@ -18808,12 +18937,12 @@
             }
         },
         "node_modules/simple-statistics": {
-            "version": "7.8.4",
-            "resolved": "https://registry.npmjs.org/simple-statistics/-/simple-statistics-7.8.4.tgz",
-            "integrity": "sha512-KHC7X+4Dji2rFgnPU7FxPPp4GxPz9hvQCHx2x6JbjLYNKuSMHcoNZ54gF0xBBMOAvNtWmfCHcfC4MD2T89ffEA==",
+            "version": "7.8.5",
+            "resolved": "https://registry.npmjs.org/simple-statistics/-/simple-statistics-7.8.5.tgz",
+            "integrity": "sha512-yw4aOnkvPLbL80zamrEKznAnk5cIIkjEcx/z0aQl+m/YKMmVufrnWgWJWRspqZtwh+ElZXRhJ0MtnUjFUQV5Ow==",
             "license": "ISC",
             "engines": {
-                "node": ">= 18"
+                "node": "*"
             }
         },
         "node_modules/sisteransi": {
@@ -18824,13 +18953,16 @@
             "license": "MIT"
         },
         "node_modules/slash": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-            "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz",
+            "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==",
             "dev": true,
             "license": "MIT",
             "engines": {
-                "node": ">=8"
+                "node": ">=14.16"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
             }
         },
         "node_modules/slice-ansi": {
@@ -21018,13 +21150,12 @@
             }
         },
         "node_modules/webpack": {
-            "version": "5.93.0",
-            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.93.0.tgz",
-            "integrity": "sha512-Y0m5oEY1LRuwly578VqluorkXbvXKh7U3rLoQCEO04M97ScRr44afGVkI0FQFsXzysk5OgFAxjZAb9rsGQVihA==",
+            "version": "5.94.0",
+            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz",
+            "integrity": "sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@types/eslint-scope": "^3.7.3",
                 "@types/estree": "^1.0.5",
                 "@webassemblyjs/ast": "^1.12.1",
                 "@webassemblyjs/wasm-edit": "^1.12.1",
@@ -21033,7 +21164,7 @@
                 "acorn-import-attributes": "^1.9.5",
                 "browserslist": "^4.21.10",
                 "chrome-trace-event": "^1.0.2",
-                "enhanced-resolve": "^5.17.0",
+                "enhanced-resolve": "^5.17.1",
                 "es-module-lexer": "^1.2.1",
                 "eslint-scope": "5.1.1",
                 "events": "^3.2.0",
diff --git a/package.json b/package.json
index f19185aadfb5..0fba06f2db55 100644
--- a/package.json
+++ b/package.json
@@ -13,18 +13,18 @@
         "node_modules"
     ],
     "dependencies": {
-        "@angular/animations": "18.2.1",
-        "@angular/cdk": "18.2.1",
-        "@angular/common": "18.2.1",
-        "@angular/compiler": "18.2.1",
-        "@angular/core": "18.2.1",
-        "@angular/forms": "18.2.1",
-        "@angular/localize": "18.2.1",
-        "@angular/material": "18.2.1",
-        "@angular/platform-browser": "18.2.1",
-        "@angular/platform-browser-dynamic": "18.2.1",
-        "@angular/router": "18.2.1",
-        "@angular/service-worker": "18.2.1",
+        "@angular/animations": "18.2.2",
+        "@angular/cdk": "18.2.2",
+        "@angular/common": "18.2.2",
+        "@angular/compiler": "18.2.2",
+        "@angular/core": "18.2.2",
+        "@angular/forms": "18.2.2",
+        "@angular/localize": "18.2.2",
+        "@angular/material": "18.2.2",
+        "@angular/platform-browser": "18.2.2",
+        "@angular/platform-browser-dynamic": "18.2.2",
+        "@angular/router": "18.2.2",
+        "@angular/service-worker": "18.2.2",
         "@ctrl/ngx-emoji-mart": "9.2.0",
         "@danielmoncada/angular-datetime-picker": "18.1.0",
         "@fingerprintjs/fingerprintjs": "4.4.3",
@@ -34,10 +34,10 @@
         "@fortawesome/free-regular-svg-icons": "6.6.0",
         "@fortawesome/free-solid-svg-icons": "6.6.0",
         "@ls1intum/apollon": "3.3.14",
-        "@ng-bootstrap/ng-bootstrap": "17.0.0",
+        "@ng-bootstrap/ng-bootstrap": "17.0.1",
         "@ngx-translate/core": "15.0.0",
         "@ngx-translate/http-loader": "8.0.0",
-        "@sentry/angular": "8.26.0",
+        "@sentry/angular": "8.27.0",
         "@swimlane/ngx-charts": "20.5.0",
         "@swimlane/ngx-graph": "8.4.0",
         "@vscode/codicons": "0.0.36",
@@ -62,12 +62,12 @@
         "ngx-infinite-scroll": "18.0.0",
         "ngx-webstorage": "18.0.0",
         "papaparse": "5.4.1",
-        "posthog-js": "1.157.2",
+        "posthog-js": "1.160.0",
         "rxjs": "7.8.1",
         "showdown": "2.1.0",
         "showdown-highlight": "3.1.0",
         "showdown-katex": "0.6.0",
-        "simple-statistics": "7.8.4",
+        "simple-statistics": "7.8.5",
         "smoothscroll-polyfill": "0.4.4",
         "sockjs-client": "1.6.1",
         "split.js": "1.6.5",
@@ -113,33 +113,33 @@
     },
     "devDependencies": {
         "@angular-builders/jest": "18.0.0",
-        "@angular-devkit/build-angular": "18.2.1",
+        "@angular-devkit/build-angular": "18.2.2",
         "@angular-eslint/builder": "18.3.0",
         "@angular-eslint/eslint-plugin": "18.3.0",
         "@angular-eslint/eslint-plugin-template": "18.3.0",
         "@angular-eslint/schematics": "18.3.0",
         "@angular-eslint/template-parser": "18.3.0",
-        "@angular/cli": "18.2.1",
-        "@angular/compiler-cli": "18.2.1",
-        "@angular/language-service": "18.2.1",
-        "@sentry/types": "8.26.0",
+        "@angular/cli": "18.2.2",
+        "@angular/compiler-cli": "18.2.2",
+        "@angular/language-service": "18.2.2",
+        "@sentry/types": "8.27.0",
         "@types/crypto-js": "4.2.2",
         "@types/d3-shape": "3.1.6",
         "@types/dompurify": "3.0.5",
         "@types/jest": "29.5.12",
         "@types/lodash-es": "4.17.12",
-        "@types/node": "22.5.0",
+        "@types/node": "22.5.1",
         "@types/papaparse": "5.3.14",
         "@types/showdown": "2.0.6",
         "@types/smoothscroll-polyfill": "0.3.4",
         "@types/sockjs-client": "1.5.4",
         "@types/uuid": "10.0.0",
-        "@typescript-eslint/eslint-plugin": "8.2.0",
-        "@typescript-eslint/parser": "8.2.0",
+        "@typescript-eslint/eslint-plugin": "8.3.0",
+        "@typescript-eslint/parser": "8.3.0",
         "eslint": "9.9.1",
         "eslint-config-prettier": "9.1.0",
         "eslint-plugin-deprecation": "3.0.0",
-        "eslint-plugin-jest": "28.8.0",
+        "eslint-plugin-jest": "28.8.1",
         "eslint-plugin-jest-extended": "2.4.0",
         "eslint-plugin-prettier": "5.2.1",
         "folder-hash": "4.0.4",
@@ -152,7 +152,7 @@
         "jest-junit": "16.0.0",
         "jest-preset-angular": "14.2.2",
         "lint-staged": "15.2.9",
-        "ng-mocks": "14.13.0",
+        "ng-mocks": "14.13.1",
         "prettier": "3.3.3",
         "sass": "1.77.8",
         "ts-jest": "29.2.5",

From 728478f1dcd7cc2a6b3aa98071f17a81fe076340 Mon Sep 17 00:00:00 2001
From: Stephan Krusche <krusche@in.tum.de>
Date: Fri, 30 Aug 2024 10:20:38 +0300
Subject: [PATCH 13/15] Development: Update server dependencies

---
 build.gradle                              |  8 ++++----
 gradle.properties                         | 10 +++++-----
 src/main/resources/config/application.yml |  3 +++
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/build.gradle b/build.gradle
index 8eda5b8226e5..ff218ebaf409 100644
--- a/build.gradle
+++ b/build.gradle
@@ -421,12 +421,12 @@ dependencies {
     }
     implementation "io.springfox:springfox-bean-validators:3.0.0"
     implementation "com.mysql:mysql-connector-j:9.0.0"
-    implementation "org.postgresql:postgresql:42.7.3"
+    implementation "org.postgresql:postgresql:42.7.4"
 
     implementation "org.zalando:problem-spring-web:0.29.1"
     implementation "org.zalando:jackson-datatype-problem:0.27.1"
     implementation "com.ibm.icu:icu4j-charset:75.1"
-    implementation "com.github.seancfoley:ipaddress:5.5.0"
+    implementation "com.github.seancfoley:ipaddress:5.5.1"
     implementation "org.apache.maven:maven-model:3.9.9"
     // NOTE: 3.0.2 is broken for splitting lecture specific PDFs
     implementation "org.apache.pdfbox:pdfbox:3.0.1"
@@ -474,7 +474,7 @@ dependencies {
     testImplementation "org.awaitility:awaitility:4.2.2"
     testImplementation "org.apache.maven.shared:maven-invoker:3.3.0"
     testImplementation "org.gradle:gradle-tooling-api:8.10"
-    testImplementation "org.apache.maven.surefire:surefire-report-parser:3.4.0"
+    testImplementation "org.apache.maven.surefire:surefire-report-parser:3.5.0"
     testImplementation "com.opencsv:opencsv:5.9"
     testImplementation("io.zonky.test:embedded-database-spring-test:2.5.1") {
         exclude group: "org.testcontainers", module: "mariadb"
@@ -486,7 +486,7 @@ dependencies {
     }
     testImplementation("net.bytebuddy:byte-buddy") {
         version {
-            strictly "1.14.19"
+            strictly "1.15.1"
         }
     }
     // cannot update due to "Syntax error in SQL statement "WITH ids_to_delete"
diff --git a/gradle.properties b/gradle.properties
index cfff6f39ed14..99ad42379403 100644
--- a/gradle.properties
+++ b/gradle.properties
@@ -6,9 +6,9 @@ node_version=20.14.0
 npm_version=10.7.0
 
 # Dependency versions
-jhipster_dependencies_version=8.6.0
-spring_boot_version=3.3.2
-spring_security_version=6.3.2
+jhipster_dependencies_version=8.7.0
+spring_boot_version=3.3.3
+spring_security_version=6.3.3
 # TODO: before we upgrade to 6.5.x, we need to make sure that there are no performance issues with empty sets or lists
 hibernate_version=6.4.9.Final
 # TODO: can we update to 5.x?
@@ -18,11 +18,11 @@ jaxb_runtime_version=4.0.5
 # TODO: we cannot update to 5.5.0 because we currently use the CP Subsystem for fenced locks, however CP Subsystem is only available to Enterprise customers
 hazelcast_version=5.4.0
 junit_version=5.10.2
-mockito_version=5.12.0
+mockito_version=5.13.0
 fasterxml_version=2.17.2
 jgit_version=6.10.0.202406032230-r
 sshd_version=2.13.2
-checkstyle_version=10.17.0
+checkstyle_version=10.18.0
 jplag_version=5.1.0
 slf4j_version=2.0.16
 sentry_version=7.14.0
diff --git a/src/main/resources/config/application.yml b/src/main/resources/config/application.yml
index 8c391da0b7a9..8c66b009451c 100644
--- a/src/main/resources/config/application.yml
+++ b/src/main/resources/config/application.yml
@@ -198,6 +198,9 @@ spring:
             thread-name-prefix: artemis-scheduling-
             pool:
                 size: 2
+    threads:
+        virtual:
+            enabled: true
     thymeleaf:
         mode: HTML
     output:

From f726b93b9f395fe910ce9aa54e16e496b587f864 Mon Sep 17 00:00:00 2001
From: Benjamin Schmitz <66966223+bensofficial@users.noreply.github.com>
Date: Fri, 30 Aug 2024 09:26:32 +0200
Subject: [PATCH 14/15] Development: Update version of micrometer prometheus
 package (#9255)

---
 build.gradle | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/build.gradle b/build.gradle
index ff218ebaf409..d6ad3c355b34 100644
--- a/build.gradle
+++ b/build.gradle
@@ -330,7 +330,7 @@ dependencies {
 
     implementation "tech.jhipster:jhipster-framework:${jhipster_dependencies_version}"
     implementation "org.springframework.boot:spring-boot-starter-cache:${spring_boot_version}"
-    implementation "io.micrometer:micrometer-registry-prometheus:1.12.6"
+    implementation "io.micrometer:micrometer-registry-prometheus:1.13.3"
     implementation "net.logstash.logback:logstash-logback-encoder:8.0"
 
     // Defines low-level streaming API, and includes JSON-specific implementations

From b4a87d98a139f0268d43b051faafce6e52a169f8 Mon Sep 17 00:00:00 2001
From: Mohamed Bilel Besrour <58034472+BBesrour@users.noreply.github.com>
Date: Fri, 30 Aug 2024 10:37:06 +0300
Subject: [PATCH 15/15] Development: Remove fenced locks in integrated code
 lifecycle (#9180)

---
 gradle.properties                             |   3 +-
 .../LocalCIResultProcessingService.java       |   6 -
 .../localci/SharedQueueManagementService.java | 108 ++++++------------
 .../SharedQueueProcessingService.java         |  17 +--
 4 files changed, 35 insertions(+), 99 deletions(-)

diff --git a/gradle.properties b/gradle.properties
index 99ad42379403..948cea0f35c8 100644
--- a/gradle.properties
+++ b/gradle.properties
@@ -15,8 +15,7 @@ hibernate_version=6.4.9.Final
 opensaml_version=4.3.2
 jwt_version=0.12.6
 jaxb_runtime_version=4.0.5
-# TODO: we cannot update to 5.5.0 because we currently use the CP Subsystem for fenced locks, however CP Subsystem is only available to Enterprise customers
-hazelcast_version=5.4.0
+hazelcast_version=5.5.0
 junit_version=5.10.2
 mockito_version=5.13.0
 fasterxml_version=2.17.2
diff --git a/src/main/java/de/tum/in/www1/artemis/service/connectors/localci/LocalCIResultProcessingService.java b/src/main/java/de/tum/in/www1/artemis/service/connectors/localci/LocalCIResultProcessingService.java
index fd7e0cc0dc89..dfc7dcf776c2 100644
--- a/src/main/java/de/tum/in/www1/artemis/service/connectors/localci/LocalCIResultProcessingService.java
+++ b/src/main/java/de/tum/in/www1/artemis/service/connectors/localci/LocalCIResultProcessingService.java
@@ -20,7 +20,6 @@
 import com.hazelcast.collection.ItemEvent;
 import com.hazelcast.collection.ItemListener;
 import com.hazelcast.core.HazelcastInstance;
-import com.hazelcast.cp.lock.FencedLock;
 import com.hazelcast.map.IMap;
 
 import de.tum.in.www1.artemis.domain.BuildJob;
@@ -73,8 +72,6 @@ public class LocalCIResultProcessingService {
 
     private IMap<String, BuildAgentInformation> buildAgentInformation;
 
-    private FencedLock resultQueueLock;
-
     private UUID listenerId;
 
     public LocalCIResultProcessingService(@Qualifier("hazelcastInstance") HazelcastInstance hazelcastInstance, ProgrammingExerciseGradingService programmingExerciseGradingService,
@@ -97,7 +94,6 @@ public LocalCIResultProcessingService(@Qualifier("hazelcastInstance") HazelcastI
     public void init() {
         this.resultQueue = this.hazelcastInstance.getQueue("buildResultQueue");
         this.buildAgentInformation = this.hazelcastInstance.getMap("buildAgentInformation");
-        this.resultQueueLock = this.hazelcastInstance.getCPSubsystem().getLock("resultQueueLock");
         this.listenerId = resultQueue.addItemListener(new ResultQueueListener(), true);
     }
 
@@ -112,9 +108,7 @@ public void removeListener() {
     public void processResult() {
 
         // set lock to prevent multiple nodes from processing the same build job
-        resultQueueLock.lock();
         ResultQueueItem resultQueueItem = resultQueue.poll();
-        resultQueueLock.unlock();
 
         if (resultQueueItem == null) {
             return;
diff --git a/src/main/java/de/tum/in/www1/artemis/service/connectors/localci/SharedQueueManagementService.java b/src/main/java/de/tum/in/www1/artemis/service/connectors/localci/SharedQueueManagementService.java
index bdaea1f46fd5..939fa41cee19 100644
--- a/src/main/java/de/tum/in/www1/artemis/service/connectors/localci/SharedQueueManagementService.java
+++ b/src/main/java/de/tum/in/www1/artemis/service/connectors/localci/SharedQueueManagementService.java
@@ -27,7 +27,6 @@
 
 import com.hazelcast.collection.IQueue;
 import com.hazelcast.core.HazelcastInstance;
-import com.hazelcast.cp.lock.FencedLock;
 import com.hazelcast.map.IMap;
 import com.hazelcast.topic.ITopic;
 
@@ -66,11 +65,6 @@ public class SharedQueueManagementService {
 
     private IMap<String, ZonedDateTime> dockerImageCleanupInfo;
 
-    /**
-     * Lock to prevent multiple nodes from processing the same build job.
-     */
-    private FencedLock sharedLock;
-
     private ITopic<String> canceledBuildJobsTopic;
 
     public SharedQueueManagementService(BuildJobRepository buildJobRepository, @Qualifier("hazelcastInstance") HazelcastInstance hazelcastInstance, ProfileService profileService) {
@@ -86,7 +80,6 @@ public SharedQueueManagementService(BuildJobRepository buildJobRepository, @Qual
     public void init() {
         this.buildAgentInformation = this.hazelcastInstance.getMap("buildAgentInformation");
         this.processingJobs = this.hazelcastInstance.getMap("processingJobs");
-        this.sharedLock = this.hazelcastInstance.getCPSubsystem().getLock("buildJobQueueLock");
         this.queue = this.hazelcastInstance.getQueue("buildJobQueue");
         this.canceledBuildJobsTopic = hazelcastInstance.getTopic("canceledBuildJobsTopic");
         this.dockerImageCleanupInfo = this.hazelcastInstance.getMap("dockerImageCleanupInfo");
@@ -148,28 +141,22 @@ public List<BuildAgentInformation> getBuildAgentInformationWithoutRecentBuildJob
      * @param buildJobId id of the build job to cancel
      */
     public void cancelBuildJob(String buildJobId) {
-        sharedLock.lock();
-        try {
-            // Remove build job if it is queued
-            if (queue.stream().anyMatch(job -> Objects.equals(job.id(), buildJobId))) {
-                List<BuildJobQueueItem> toRemove = new ArrayList<>();
-                for (BuildJobQueueItem job : queue) {
-                    if (Objects.equals(job.id(), buildJobId)) {
-                        toRemove.add(job);
-                    }
-                }
-                queue.removeAll(toRemove);
-            }
-            else {
-                // Cancel build job if it is currently being processed
-                BuildJobQueueItem buildJob = processingJobs.remove(buildJobId);
-                if (buildJob != null) {
-                    triggerBuildJobCancellation(buildJobId);
+        // Remove build job if it is queued
+        if (queue.stream().anyMatch(job -> Objects.equals(job.id(), buildJobId))) {
+            List<BuildJobQueueItem> toRemove = new ArrayList<>();
+            for (BuildJobQueueItem job : queue) {
+                if (Objects.equals(job.id(), buildJobId)) {
+                    toRemove.add(job);
                 }
             }
+            queue.removeAll(toRemove);
         }
-        finally {
-            sharedLock.unlock();
+        else {
+            // Cancel build job if it is currently being processed
+            BuildJobQueueItem buildJob = processingJobs.remove(buildJobId);
+            if (buildJob != null) {
+                triggerBuildJobCancellation(buildJobId);
+            }
         }
     }
 
@@ -188,30 +175,17 @@ private void triggerBuildJobCancellation(String buildJobId) {
      * Cancel all queued build jobs.
      */
     public void cancelAllQueuedBuildJobs() {
-        sharedLock.lock();
-        try {
-            log.debug("Cancelling all queued build jobs");
-            queue.clear();
-        }
-        finally {
-            sharedLock.unlock();
-        }
+        log.debug("Cancelling all queued build jobs");
+        queue.clear();
     }
 
     /**
      * Cancel all running build jobs.
      */
     public void cancelAllRunningBuildJobs() {
-        sharedLock.lock();
-        try {
-            for (BuildJobQueueItem buildJob : processingJobs.values()) {
-                cancelBuildJob(buildJob.id());
-            }
-        }
-        finally {
-            sharedLock.unlock();
+        for (BuildJobQueueItem buildJob : processingJobs.values()) {
+            cancelBuildJob(buildJob.id());
         }
-
     }
 
     /**
@@ -220,13 +194,7 @@ public void cancelAllRunningBuildJobs() {
      * @param agentName name of the agent
      */
     public void cancelAllRunningBuildJobsForAgent(String agentName) {
-        sharedLock.lock();
-        try {
-            processingJobs.values().stream().filter(job -> Objects.equals(job.buildAgentAddress(), agentName)).forEach(job -> cancelBuildJob(job.id()));
-        }
-        finally {
-            sharedLock.unlock();
-        }
+        processingJobs.values().stream().filter(job -> Objects.equals(job.buildAgentAddress(), agentName)).forEach(job -> cancelBuildJob(job.id()));
     }
 
     /**
@@ -235,19 +203,13 @@ public void cancelAllRunningBuildJobsForAgent(String agentName) {
      * @param courseId id of the course
      */
     public void cancelAllQueuedBuildJobsForCourse(long courseId) {
-        sharedLock.lock();
-        try {
-            List<BuildJobQueueItem> toRemove = new ArrayList<>();
-            for (BuildJobQueueItem job : queue) {
-                if (job.courseId() == courseId) {
-                    toRemove.add(job);
-                }
+        List<BuildJobQueueItem> toRemove = new ArrayList<>();
+        for (BuildJobQueueItem job : queue) {
+            if (job.courseId() == courseId) {
+                toRemove.add(job);
             }
-            queue.removeAll(toRemove);
-        }
-        finally {
-            sharedLock.unlock();
         }
+        queue.removeAll(toRemove);
     }
 
     /**
@@ -269,25 +231,19 @@ public void cancelAllRunningBuildJobsForCourse(long courseId) {
      * @param participationId id of the participation
      */
     public void cancelAllJobsForParticipation(long participationId) {
-        sharedLock.lock();
-        try {
-            List<BuildJobQueueItem> toRemove = new ArrayList<>();
-            for (BuildJobQueueItem queuedJob : queue) {
-                if (queuedJob.participationId() == participationId) {
-                    toRemove.add(queuedJob);
-                }
+        List<BuildJobQueueItem> toRemove = new ArrayList<>();
+        for (BuildJobQueueItem queuedJob : queue) {
+            if (queuedJob.participationId() == participationId) {
+                toRemove.add(queuedJob);
             }
-            queue.removeAll(toRemove);
+        }
+        queue.removeAll(toRemove);
 
-            for (BuildJobQueueItem runningJob : processingJobs.values()) {
-                if (runningJob.participationId() == participationId) {
-                    cancelBuildJob(runningJob.id());
-                }
+        for (BuildJobQueueItem runningJob : processingJobs.values()) {
+            if (runningJob.participationId() == participationId) {
+                cancelBuildJob(runningJob.id());
             }
         }
-        finally {
-            sharedLock.unlock();
-        }
     }
 
     /**
diff --git a/src/main/java/de/tum/in/www1/artemis/service/connectors/localci/buildagent/SharedQueueProcessingService.java b/src/main/java/de/tum/in/www1/artemis/service/connectors/localci/buildagent/SharedQueueProcessingService.java
index 853b89493827..d19d0fae96ba 100644
--- a/src/main/java/de/tum/in/www1/artemis/service/connectors/localci/buildagent/SharedQueueProcessingService.java
+++ b/src/main/java/de/tum/in/www1/artemis/service/connectors/localci/buildagent/SharedQueueProcessingService.java
@@ -32,7 +32,6 @@
 import com.hazelcast.collection.ItemEvent;
 import com.hazelcast.collection.ItemListener;
 import com.hazelcast.core.HazelcastInstance;
-import com.hazelcast.cp.lock.FencedLock;
 import com.hazelcast.map.IMap;
 
 import de.tum.in.www1.artemis.domain.BuildLogEntry;
@@ -65,11 +64,6 @@ public class SharedQueueProcessingService {
 
     private final BuildAgentSshKeyService buildAgentSSHKeyService;
 
-    /**
-     * Lock to prevent multiple nodes from processing the same build job.
-     */
-    private FencedLock sharedLock;
-
     private IQueue<BuildJobQueueItem> queue;
 
     private IQueue<ResultQueueItem> resultQueue;
@@ -104,7 +98,6 @@ public SharedQueueProcessingService(@Qualifier("hazelcastInstance") HazelcastIns
     public void init() {
         this.buildAgentInformation = this.hazelcastInstance.getMap("buildAgentInformation");
         this.processingJobs = this.hazelcastInstance.getMap("processingJobs");
-        this.sharedLock = this.hazelcastInstance.getCPSubsystem().getLock("buildJobQueueLock");
         this.queue = this.hazelcastInstance.getQueue("buildJobQueue");
         this.resultQueue = this.hazelcastInstance.getQueue("buildResultQueue");
         this.listenerId = this.queue.addItemListener(new QueuedBuildJobItemListener(), true);
@@ -176,14 +169,8 @@ private void checkAvailabilityAndProcessNextBuild() {
                 return;
             }
 
-            // Lock the queue to prevent multiple nodes from processing the same build job
-            sharedLock.lock();
-            try {
-                buildJob = addToProcessingJobs();
-            }
-            finally {
-                sharedLock.unlock();
-            }
+            buildJob = addToProcessingJobs();
+
             processBuild(buildJob);
         }
         catch (RejectedExecutionException e) {